/* ==========================================================================
   UNHCR UNANHAE EVENT (유난력 테스트) Stylesheet
   Restructured & Optimized from monolithic original HTML (34.7 MB -> modular CSS)
   ========================================================================== */


/* --- [01/36] Block: section-styles-1 --- */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&family=Noto+Sans+KR:wght@400;500;700;800;900&display=swap');
    :root{--blue:#0648d5;--deep:#04266c;--ink:#15171b;--cream:#fff9e9;--yellow:#ffd83d;--coral:#ff6b58;--mint:#62dfba;--line:#191919;--white:#fff;--shadow:7px 7px 0 var(--line)}
    *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--ink);font-family:"Noto Sans KR",system-ui,sans-serif;overflow-x:hidden}
    button{font:inherit;color:inherit} .app{min-height:100svh;position:relative}.screen{display:none;min-height:100svh}.screen.active{display:flex}
    .grain{position:fixed;inset:0;opacity:.05;pointer-events:none;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E")}
    .home{background:var(--blue);color:white;align-items:center;justify-content:center;padding:42px 20px;position:relative;isolation:isolate;text-align:center}
    .home:before,.home:after{content:"";position:absolute;border:3px solid var(--line);z-index:-1;transform:rotate(-7deg)}.home:before{width:240px;height:240px;border-radius:50%;background:var(--yellow);top:-95px;right:-70px}.home:after{width:170px;height:400px;background:var(--coral);left:-115px;bottom:-140px;transform:rotate(28deg)}
    .scribble{font-family:"Gowun Dodum",sans-serif;font-size:14px;letter-spacing:.16em;display:inline-block;transform:rotate(-3deg);border-bottom:3px solid var(--yellow);padding-bottom:5px}.hero-title{font-size:clamp(44px,12vw,90px);line-height:.98;margin:24px 0 22px;letter-spacing:-.08em;font-weight:900}.hero-title span{display:block;color:var(--yellow);text-shadow:4px 4px 0 var(--deep)}
    .hero-copy{font-size:clamp(16px,4vw,21px);line-height:1.75;margin:0 auto 28px;max-width:600px}.hero-copy b{background:var(--white);color:var(--blue);padding:0 5px}.sticker{display:inline-block;background:var(--mint);color:var(--ink);border:2px solid var(--line);border-radius:99px;padding:8px 15px;font-size:13px;font-weight:800;transform:rotate(4deg);margin-bottom:20px}
    .cta{appearance:none;border:3px solid var(--line);background:var(--yellow);padding:17px 26px;border-radius:7px;font-weight:900;font-size:18px;box-shadow:var(--shadow);cursor:pointer;transition:.15s transform,.15s box-shadow}.cta:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 var(--line)}.cta:active{transform:translate(7px,7px);box-shadow:none}.cta.dark{background:var(--ink);color:#fff}.cta.white{background:white}.small-note{display:block;margin-top:18px;font-size:12px;opacity:.75}
    .quiz{flex-direction:column;background:var(--cream)}.quiz-head{height:84px;display:flex;align-items:center;gap:15px;padding:0 max(20px,calc((100vw - 740px)/2));position:sticky;top:0;background:rgba(255,249,233,.94);backdrop-filter:blur(8px);z-index:5;border-bottom:2px solid var(--line)}.qnum{font-size:14px;font-weight:900;min-width:52px}.progress{height:13px;border:2px solid var(--line);background:white;flex:1;border-radius:9px;overflow:hidden}.progress>i{height:100%;width:0;display:block;background:var(--blue);transition:width .35s ease}.exit{background:none;border:0;font-size:25px;cursor:pointer}
    .quiz-body{width:min(700px,calc(100% - 36px));margin:auto;padding:55px 0 80px}.question-kicker{font-family:"Gowun Dodum";color:var(--blue);font-weight:800;font-size:15px}.question{font-size:clamp(25px,6vw,38px);letter-spacing:-.05em;line-height:1.35;margin:10px 0 30px;white-space:pre-line}.answers{display:grid;gap:13px}.answer{width:100%;border:2.5px solid var(--line);background:white;border-radius:9px;padding:18px 19px;text-align:left;font-size:16px;font-weight:700;line-height:1.5;cursor:pointer;box-shadow:4px 4px 0 rgba(21,23,27,.9);transition:.12s}.answer:hover{background:var(--yellow);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
    .reaction{position:fixed;inset:0;display:none;z-index:30;background:rgba(4,38,108,.9);align-items:center;justify-content:center;color:white;text-align:center;padding:30px}.reaction.show{display:flex;animation:fade .18s}.reaction-card{transform:rotate(-2deg);font-size:clamp(28px,8vw,50px);font-weight:900;line-height:1.35}.reaction-card small{display:block;font-family:"Gowun Dodum";font-size:15px;color:var(--yellow);margin-bottom:15px;letter-spacing:.1em}@keyframes fade{from{opacity:0}to{opacity:1}}
    .loading{align-items:center;justify-content:center;flex-direction:column;background:var(--ink);color:white;text-align:center;padding:24px}.scanner{width:180px;height:180px;border:3px solid var(--yellow);border-radius:50%;position:relative;margin-bottom:35px;animation:pulse 1s infinite alternate}.scanner:before,.scanner:after{content:"";position:absolute;inset:20px;border:2px dashed var(--mint);border-radius:50%;animation:spin 2.5s linear infinite}.scanner:after{inset:50px;background:var(--coral);border:2px solid white}.loading h2{font-size:30px;margin:0}.loading p{color:#cdd7f6}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{to{box-shadow:0 0 0 25px rgba(255,216,61,.08)}}
    .result{display:none;flex-direction:column;background:var(--cream)}.result.active{display:flex}.result-hero{background:var(--blue);color:white;text-align:center;padding:60px 20px 70px;border-bottom:3px solid var(--line);position:relative;overflow:hidden}.result-hero:after{content:"CERTIFIED";position:absolute;font-size:110px;font-weight:900;opacity:.07;transform:rotate(-12deg);left:50%;bottom:-12px;translate:-50% 0}.eyebrow{font-family:"Gowun Dodum";letter-spacing:.16em;color:var(--yellow);font-weight:800}.result-emoji{font-size:70px;margin:15px}.result-title{font-size:clamp(35px,9vw,64px);line-height:1.08;margin:5px 0 16px;letter-spacing:-.06em}.result-title b{color:var(--yellow);display:block}.score-pill{display:inline-flex;align-items:baseline;gap:6px;background:white;color:var(--blue);border:3px solid var(--line);box-shadow:5px 5px 0 var(--line);padding:9px 18px;transform:rotate(-2deg);font-weight:800}.score-pill strong{font-size:30px}.result-content{width:min(680px,calc(100% - 36px));margin:0 auto;padding:48px 0}.quote{font-size:25px;font-weight:900;text-align:center;margin:0 0 35px}.desc{font-size:17px;line-height:1.85;text-align:center;white-space:pre-line}.side-note{font-size:13px;background:var(--yellow);border:2px solid var(--line);padding:12px 15px;display:table;margin:28px auto;transform:rotate(1.5deg)}
    .section-title{font-size:23px;margin:50px 0 20px;letter-spacing:-.04em}.bars{display:grid;gap:12px}.bar-row{display:grid;grid-template-columns:72px 1fr 38px;align-items:center;gap:10px;font-weight:800}.bar{height:16px;border:2px solid var(--line);background:white}.bar i{display:block;height:100%;background:var(--coral);width:0;transition:width 1s ease}.usage{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.usage div{background:white;border:2px solid var(--line);padding:18px 10px;text-align:center;font-weight:800}.usage span{font-size:25px;display:block;margin-bottom:8px}
    .mate{background:var(--mint);border:3px solid var(--line);box-shadow:var(--shadow);padding:25px;margin:12px 7px 45px;transform:rotate(-1deg)}.mate h3{font-size:22px;margin:0 0 8px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions .cta{font-size:15px;padding:15px 8px}.actions .wide{grid-column:1/-1}
    .gift-match{border:3px solid var(--line);background:#fff;padding:28px 22px;margin:16px 0 28px;box-shadow:var(--shadow);position:relative;overflow:hidden}.gift-match:before{content:"FOR YOU";position:absolute;right:-9px;top:11px;background:var(--coral);border:2px solid var(--line);padding:5px 18px;font-size:12px;font-weight:900;transform:rotate(8deg)}.gift-label{font-size:13px;color:var(--blue);font-weight:900;letter-spacing:.08em}.gift-visual{width:128px;height:128px;margin:20px auto;border:3px solid var(--line);border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:64px}.gift-match h3{text-align:center;font-size:27px;margin:8px 0}.gift-match>p{text-align:center;line-height:1.7;margin:8px auto 20px;max-width:500px}.gift-why{background:var(--cream);border:2px dashed var(--line);padding:13px 15px;font-size:14px;line-height:1.6;margin-bottom:18px}.gift-match .cta{width:100%}.gift-disclaimer{font-size:11px!important;color:#666;margin:12px 0 0!important}.float-actions{display:none;position:fixed;left:50%;bottom:12px;translate:-50% 0;width:min(620px,calc(100% - 24px));z-index:15;grid-template-columns:1fr 1.35fr;gap:8px;background:rgba(255,255,255,.94);border:2px solid var(--line);padding:8px;box-shadow:5px 5px 0 var(--line);backdrop-filter:blur(8px)}.result.active .float-actions{display:grid}.float-actions button{border:0;padding:12px 8px;font-weight:900;cursor:pointer}.float-share{background:var(--yellow)}.float-donate{background:var(--blue);color:white}
    .reveal{background:var(--ink);color:white;text-align:center;padding:80px 20px}.reveal .hook{font-family:"Gowun Dodum";color:var(--yellow);font-size:18px}.reveal h2{font-size:clamp(34px,9vw,60px);line-height:1.25;letter-spacing:-.06em;margin:25px auto;max-width:760px}.reveal p{max-width:570px;margin:0 auto;font-size:17px;line-height:1.9;color:#e1e1e1}.brand-reveal{margin:75px auto 40px;padding:35px 18px;background:var(--blue);border:3px solid white;max-width:600px}.brand-reveal h3{font-size:50px;margin:0 0 15px}.brand-reveal strong{color:var(--yellow)}.brand-reveal p{font-size:21px;color:white}.footer{padding:35px 20px 45px;text-align:center;background:var(--blue);color:white}.footer small{opacity:.7;display:block;margin-top:20px}
    #shareCanvas{display:none}@media(max-width:480px){.usage{grid-template-columns:1fr}.hero-copy br{display:none}.quiz-head{height:68px}.result-content{padding-top:38px}.actions{grid-template-columns:1fr}.actions .wide{grid-column:auto}}
    @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

    /* 2026 brand-film visual system: title artwork first, cinematic restraint */
    :root{--blue:#0072bc;--deep:#003f79;--sky:#cceeff;--paper:#fbfcf8;--yellow:#ffd84a;--ink:#102437;--line:#102437;--shadow:0 16px 40px rgba(9,55,91,.14)}
    body{background:var(--paper);color:var(--ink)}
    .grain{opacity:.035;mix-blend-mode:multiply}
    .home{min-height:100svh;background:
      radial-gradient(circle at 18% 15%,rgba(255,255,255,.96) 0 8%,transparent 30%),
      radial-gradient(circle at 82% 72%,rgba(255,255,255,.8) 0 9%,transparent 27%),
      linear-gradient(155deg,#f8fdff 0%,#dff4ff 47%,#bde6fa 100%);color:var(--ink);padding:40px 24px;overflow:hidden}
    .home:before{width:min(900px,95vw);height:240px;top:auto;right:-9vw;bottom:-35px;border:0;border-radius:0;background:url("../images/common/reaction-brush-blue.png") center/100% 100% no-repeat;transform:rotate(-5deg);opacity:.96;clip-path:none;filter:drop-shadow(0 10px 18px rgba(0,71,128,.12))}
    .home:after{display:none}
    .home-inner{width:min(720px,100%);position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
    .campaign-title{width:min(570px,88vw);height:auto;display:block;margin:0 auto -12px;filter:drop-shadow(0 8px 14px rgba(0,91,158,.10))}
    .test-label{display:inline-flex;align-items:center;gap:10px;color:var(--deep);font-size:14px;font-weight:900;letter-spacing:.14em;margin-bottom:18px}
    .test-label:before,.test-label:after{content:"";display:block;width:32px;height:2px;background:var(--blue)}
    .hero-title{font-size:clamp(30px,6vw,42px);line-height:1.25;margin:0 0 20px;letter-spacing:-.055em;color:var(--ink);font-weight:900}
    .hero-title span{display:inline;color:var(--blue);text-shadow:none}
    .hero-copy{font-size:clamp(16px,3.8vw,19px);line-height:1.8;margin:0 auto 30px;max-width:620px;color:#29465e;letter-spacing:-.025em}
    .hero-copy b{display:block;background:none;color:var(--deep);padding:4px 0 0;font-size:1.05em}
    .home .cta{min-width:250px;border:0;border-radius:999px;background:linear-gradient(100deg,#f6bf32,#ffdd72);box-shadow:0 12px 25px rgba(172,118,0,.22);color:#183146;padding:18px 30px}
    .home .cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(172,118,0,.26)}
    .small-note{color:#4c6578;opacity:.85}
    .quiz{background:linear-gradient(180deg,#edf9ff 0 17%,var(--paper) 47%)}
    .quiz-head{background:rgba(248,253,255,.9);border-bottom:1px solid rgba(0,63,121,.14);box-shadow:0 5px 22px rgba(0,75,132,.06)}
    .progress{height:8px;border:0;background:#d8ecf6}.progress>i{background:linear-gradient(90deg,var(--blue),#4aa8df)}
    .quiz-body{width:min(720px,calc(100% - 32px));padding:64px 0 90px}
    .question-kicker{font-family:"Noto Sans KR",sans-serif;font-size:13px;letter-spacing:.13em;text-transform:uppercase}
    .question{margin-top:13px;margin-bottom:34px}
    .answer{border:1px solid rgba(0,63,121,.16);border-radius:16px;padding:19px 21px;box-shadow:0 8px 24px rgba(0,75,132,.08);color:#17344b}
    .answer:hover{background:#e8f7ff;border-color:var(--blue);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,75,132,.13)}
    .reaction{background:rgba(0,67,121,.94)}.reaction-card{position:relative;isolation:isolate;min-width:min(680px,94vw);padding:70px 28px}.reaction-card:before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(720px,96vw);height:250px;background:url("../images/common/reaction-brush-blue.png") center/100% 100% no-repeat;transform:translate(-50%,-48%) rotate(-2deg) scaleX(0);transform-origin:left center;filter:brightness(.82) saturate(1.15);opacity:.95}.reaction.show .reaction-card:before{animation:brushIn .52s cubic-bezier(.2,.8,.2,1) forwards}.reaction-card small{color:#bdeaff}.reaction-card span{position:relative;text-shadow:0 2px 12px rgba(0,42,76,.35)}@keyframes brushIn{to{transform:translate(-50%,-48%) rotate(-2deg) scaleX(1)}}
    .loading{background:linear-gradient(150deg,#004d8b,#0072bc)}.scanner{border-color:white}.scanner:before,.scanner:after{border-color:#9be2ff}.scanner:after{background:#fff}
    .result{background:var(--paper)}
    .result-hero{background:linear-gradient(155deg,#0066aa,#0087d3);border:0;padding-top:74px}.result-hero:before{content:"";position:absolute;left:50%;bottom:-55px;width:min(760px,92vw);height:210px;background:url("../images/common/reaction-brush-blue.png") center/100% 100% no-repeat;transform:translateX(-50%) rotate(-2deg);opacity:.35;mix-blend-mode:screen}.result-hero:after{opacity:.045}
    .score-pill{border:0;border-radius:999px;box-shadow:0 10px 24px rgba(0,35,70,.22)}
    .result-content{width:min(700px,calc(100% - 32px))}.quote{color:var(--deep)}.section-title{position:relative;display:table;isolation:isolate}.section-title:after{content:"";position:absolute;z-index:-1;left:-10px;right:-22px;bottom:-8px;height:34px;background:url("../images/common/reaction-brush-blue.png") center/100% 100% no-repeat;opacity:.18;transform:rotate(-1deg)}
    .side-note{background:#e5f6ff;border:0;border-left:4px solid var(--blue);transform:none;border-radius:4px;box-shadow:none}
    .bar{border:0;border-radius:999px;background:#ddecf3;overflow:hidden}.bar i{background:var(--blue)!important}
    .usage div{border:1px solid #d1e2eb;border-radius:14px;box-shadow:0 8px 22px rgba(0,75,132,.06)}
    .mate,.gift-match{border:0;border-radius:20px;box-shadow:var(--shadow);transform:none}.mate{background:#dff4ff}
    .gift-match:before{background:var(--blue);color:white;border:0}.gift-visual{border:0;background:#e3f5ff}
    .cta{border:0;border-radius:999px;background:linear-gradient(100deg,#f5bc2d,#ffda65);box-shadow:0 10px 24px rgba(151,107,0,.18)}.cta:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(151,107,0,.22)}.cta.dark{background:var(--deep)}
    .reveal{position:relative;overflow:hidden;background:linear-gradient(155deg,#004780,#0072bc);padding:96px 20px}.reveal:before{content:"";position:absolute;inset:5% -10% auto;height:240px;background:url("../images/common/reaction-brush-blue.png") center/100% 100% no-repeat;transform:rotate(-5deg);filter:brightness(1.12);opacity:.22}
    .reveal .hook{color:#a9e4ff}.brand-reveal{background:transparent;border:0;padding:15px;margin-top:58px}.brand-reveal img{width:min(420px,82vw);height:auto}.brand-reveal h3{display:none}.brand-reveal strong{color:#9edfff}
    .footer{background:#003e74}.float-actions{border:0;border-radius:16px;box-shadow:0 10px 28px rgba(0,42,78,.2)}
    @media(max-width:480px){.campaign-title{width:min(440px,98vw);margin-bottom:-4px}.hero-title{font-size:28px}.home{padding:28px 18px 92px}.home:before{width:130vw;height:185px;right:-30vw;bottom:-28px}.hero-copy{line-height:1.72}.reaction-card{padding-inline:12px}.reaction-card:before{width:120vw;height:200px}.reveal{padding-top:80px}}
    /* Explicit brush layers + tactile controls */
    .home:before,.reaction-card:before,.result-hero:before{display:none!important}.cover-brush{position:absolute;z-index:0;width:min(920px,98vw);height:250px;object-fit:fill;right:-8vw;bottom:-42px;transform:rotate(-5deg);pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,71,128,.12))}.home-inner{z-index:2}.small-note{margin:0 0 17px;color:#315b78;font-weight:700;letter-spacing:.02em}.reaction-brush{position:absolute;z-index:-1;left:50%;top:50%;width:min(760px,105vw);height:260px;object-fit:fill;transform:translate(-50%,-50%) rotate(-2deg) scaleX(0);transform-origin:left center;filter:brightness(.82) saturate(1.15);opacity:.97}.reaction.show .reaction-brush{animation:brushImageIn .52s cubic-bezier(.2,.8,.2,1) forwards}@keyframes brushImageIn{to{transform:translate(-50%,-50%) rotate(-2deg) scaleX(1)}}.result-brush{position:absolute;z-index:0;left:50%;bottom:-62px;width:min(780px,96vw);height:220px;object-fit:fill;transform:translateX(-50%) rotate(-2deg);opacity:.36;mix-blend-mode:screen;pointer-events:none}.result-hero>*:not(.result-brush){position:relative;z-index:1}.home .cta{border:3px solid var(--ink);border-radius:10px;background:linear-gradient(110deg,#ffc828,#ffe16a);box-shadow:12px 12px 0 #152432;color:#102437;font-weight:900;transition:transform .14s ease,box-shadow .14s ease}.home .cta:hover{transform:translate(4px,4px);box-shadow:8px 8px 0 #152432}.home .cta:active{transform:translate(12px,12px);box-shadow:0 0 0 #152432}.answer{border:2px solid rgba(16,36,55,.82);box-shadow:5px 5px 0 rgba(16,36,55,.88)}.answer:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(16,36,55,.88)}.answer:active{transform:translate(5px,5px);box-shadow:none}@media(max-width:480px){.cover-brush{width:145vw;height:190px;right:-38vw;bottom:-30px}.reaction-brush{width:125vw;height:205px}.result-brush{width:125vw;height:180px}.home .cta{box-shadow:9px 9px 0 #152432}}

    /* Natural stroke proportions + selected brand-film backgrounds */
    .cover-brush{width:min(820px,88vw);height:auto;left:50%;right:auto;bottom:-235px;transform:translateX(-50%) rotate(-2deg);object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,71,128,.10))}
    .reaction-brush{width:min(720px,90vw);height:auto;object-fit:contain;transform:translate(-50%,-50%) rotate(-1deg) scaleX(0);filter:brightness(.84) saturate(1.08)}
    .reaction.show .reaction-brush{animation:brushNaturalIn .5s cubic-bezier(.2,.8,.2,1) forwards}@keyframes brushNaturalIn{to{transform:translate(-50%,-50%) rotate(-1deg) scaleX(1)}}
    .result-brush{width:min(700px,86vw);height:auto;bottom:-215px;object-fit:contain;transform:translateX(-50%) rotate(-1deg);opacity:.3}
    .section-title:after,.reveal:before{display:none!important}
    .quiz{background-image:linear-gradient(rgba(251,252,248,.88),rgba(251,252,248,.94)),url("../images/backgrounds/watercolor_bg.webp");background-size:cover;background-position:center;background-attachment:fixed}
    .quiz-head{background:rgba(248,253,255,.92)}
    .loading{position:relative;isolation:isolate;background-image:linear-gradient(rgba(0,66,116,.58),rgba(0,89,154,.72)),url("../images/backgrounds/door_reference.webp");background-size:cover;background-position:center;color:#fff}
    .loading:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at center,transparent 25%,rgba(0,35,68,.22) 100%)}
    .reveal{background-image:linear-gradient(rgba(0,67,121,.86),rgba(0,57,105,.93)),url("../images/backgrounds/watercolor_bg.webp");background-size:cover;background-position:center}
    @media(max-width:480px){.cover-brush{width:94vw;bottom:-150px}.reaction-brush{width:96vw}.result-brush{width:94vw;bottom:-135px}.quiz{background-attachment:scroll;background-position:center top}.loading{background-position:62% center}}
    /* Section styles */
    .cover-brush{display:none!important}.home{padding-bottom:48px}
    .answer{border:2.5px solid var(--deep);border-radius:9px;background:#fff;padding:18px 19px;box-shadow:4px 4px 0 var(--deep);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.answer:hover{background:#dff4ff;border-color:var(--deep);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--deep)}.answer:active{transform:translate(4px,4px);box-shadow:none}
    .cta{border:3px solid var(--deep);border-radius:7px;background:var(--yellow);box-shadow:7px 7px 0 var(--deep);transition:transform .15s ease,box-shadow .15s ease}.cta:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 var(--deep)}.cta:active{transform:translate(7px,7px);box-shadow:none}.cta.white{background:#fff}.cta.dark{background:var(--deep);color:#fff}
    .home .cta{border:3px solid var(--deep);border-radius:7px;box-shadow:10px 10px 0 #152432}.home .cta:hover{transform:translate(3px,3px);box-shadow:7px 7px 0 #152432}.home .cta:active{transform:translate(10px,10px);box-shadow:none}
    .score-pill{border:3px solid var(--deep);border-radius:0;box-shadow:5px 5px 0 var(--deep);transform:rotate(-2deg)}.side-note{background:#dff4ff;border:2px solid var(--deep);border-left:2px solid var(--deep);border-radius:0;transform:rotate(1.5deg);box-shadow:none}.bar{height:16px;border:2px solid var(--deep);border-radius:0;background:#fff}.bar i{background:var(--blue)!important}.usage div{background:#fff;border:2px solid var(--deep);border-radius:0;box-shadow:none}.mate{background:#bfe9ff;border:3px solid var(--deep);border-radius:0;box-shadow:7px 7px 0 var(--deep);transform:rotate(-1deg)}.gift-match{border:3px solid var(--deep);border-radius:0;box-shadow:7px 7px 0 var(--deep)}.gift-match:before{background:var(--blue);color:#fff;border:2px solid var(--deep)}.gift-visual{border:3px solid var(--deep);background:var(--yellow)}.gift-why{background:#edf9ff;border:2px dashed var(--deep)}.float-actions{border:2px solid var(--deep);border-radius:0;box-shadow:5px 5px 0 var(--deep)}
    @media(max-width:480px){.home{padding-bottom:40px}.home .cta{box-shadow:8px 8px 0 #152432}.gift-match,.mate{box-shadow:5px 5px 0 var(--deep)}}
    /* Result emphasis refinements */
    .result-brush{display:none!important}.side-note{display:block;width:min(620px,94%);font-size:17px;font-weight:800;line-height:1.65;text-align:center;padding:18px 24px;margin:34px auto 52px;background:var(--yellow);border:3px solid var(--deep);box-shadow:7px 7px 0 var(--deep);transform:rotate(.6deg)}
    @media(max-width:480px){.side-note{width:100%;font-size:15px;padding:16px 15px;margin-bottom:44px;box-shadow:5px 5px 0 var(--deep)}}
  
/* Section styles */
.gift-visual{width:min(360px,82%);height:240px;border-radius:18px;background:#fff;padding:12px;overflow:hidden}
.gift-visual img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
@media(max-width:480px){.gift-visual{width:100%!important;height:210px!important;padding:10px!important;border-radius:16px!important}}

#resultDesc,#mateDesc{white-space:normal}
@media (max-width:700px){#resultDesc,#mateDesc{white-space:pre-line}}

/* --- [02/36] Block: live-mobile-stability --- */
html,body{max-width:100%;overflow-x:hidden}
img,canvas{max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
.float-actions{bottom:max(12px,env(safe-area-inset-bottom));padding-bottom:max(8px,env(safe-area-inset-bottom))}
@media(max-width:480px){
  .result-content{padding-bottom:110px}
  .gift-match,.mate{max-width:100%;margin-left:0;margin-right:0}
}

/* --- [03/36] Block: live-v10-reaction --- */
/* Section styles */
.reaction{
  isolation:isolate!important;
  overflow:hidden!important;
}
.reaction-card{
  position:relative!important;
  z-index:2!important;
  width:100vw!important;
  max-width:none!important;
  min-width:100vw!important;
  background:transparent!important;
}
.reaction-brush{
  position:fixed!important;
  z-index:1!important;
  left:-165vw!important;
  top:50%!important;
  width:150vw!important;
  max-width:none!important;
  height:58vh!important;
  object-fit:fill!important;
  transform:translateY(-50%) rotate(-1deg);
  transform-origin:center center!important;
  opacity:0;
  pointer-events:none!important;
  will-change:left,transform,opacity;
}
.reaction.show .reaction-brush{
  animation:reactionBrushSweepV10 .82s cubic-bezier(.18,.75,.16,1) forwards!important;
}
@keyframes reactionBrushSweepV10{
  0%{
    left:-165vw;
    opacity:0;
    transform:translateY(-50%) rotate(-1deg);
  }
  10%{opacity:1}
  72%{
    left:-25vw;
    opacity:1;
    transform:translateY(-50%) rotate(0deg);
  }
  100%{
    left:-25vw;
    opacity:1;
    transform:translateY(-50%) rotate(0deg);
  }
}
.reaction-card small,.reaction-card span{
  position:relative!important;
  z-index:3!important;
}
@media(max-width:700px){
  .reaction-brush{
    left:-195vw!important;
    width:180vw!important;
    height:52vh!important;
  }
  @keyframes reactionBrushSweepV10{
    0%{
      left:-195vw;
      opacity:0;
      transform:translateY(-50%) rotate(-1deg);
    }
    10%{opacity:1}
    72%{
      left:-40vw;
      opacity:1;
      transform:translateY(-50%) rotate(0deg);
    }
    100%{
      left:-40vw;
      opacity:1;
      transform:translateY(-50%) rotate(0deg);
    }
  }
}

/* --- [04/36] Block: v14-event-mobile-first --- */
@media(max-width:700px){
 html,body{overflow-x:hidden}.home{min-height:100dvh!important;padding:24px 16px 34px!important}.home-inner{width:100%!important;justify-content:flex-start!important}.test-guide{margin-top:4px!important}.test-label{font-size:15px!important}.small-note{font-size:12px!important;margin-bottom:12px!important}.imagination-guide{font-size:13px!important;line-height:1.6!important;padding:11px 13px!important;margin-bottom:18px!important}.hero-title{font-size:clamp(29px,9vw,38px)!important;line-height:1.18!important;word-break:keep-all}.hero-copy{font-size:14px!important;line-height:1.7!important;margin:14px auto 20px!important}.home .cta{width:100%!important;max-width:360px!important;min-height:54px!important;font-size:16px!important}.campaign-title{width:min(88vw,420px)!important;margin-top:auto!important}
 .quiz-head{height:58px!important;padding:0 14px!important}.quiz-body{width:calc(100% - 28px)!important;padding:34px 0 46px!important}.question-kicker{font-size:11px!important}.question{font-size:clamp(24px,7.2vw,31px)!important;line-height:1.35!important;margin:9px 0 24px!important;word-break:keep-all}.answers{gap:11px!important}.answer{min-height:58px!important;padding:15px 15px!important;font-size:14px!important;line-height:1.48!important;border-radius:10px!important;box-shadow:4px 4px 0 rgba(16,36,55,.88)!important}.answer b{margin-right:3px!important}
 .reaction-card span{font-size:clamp(26px,8vw,38px)!important;line-height:1.2!important}.reaction-card small{font-size:12px!important}.reaction-brush{height:44vh!important}
 .result-hero{padding:48px 16px 50px!important}.result-emoji{font-size:54px!important;margin:10px!important}.result-title{font-size:clamp(32px,9vw,44px)!important}.score-pill{padding:7px 13px!important}.score-pill strong{font-size:25px!important}.result-content{width:calc(100% - 28px)!important;padding:34px 0 116px!important}.quote{font-size:21px!important;line-height:1.45!important;margin-bottom:24px!important}.desc{font-size:15px!important;line-height:1.75!important}.side-note{font-size:14px!important;line-height:1.6!important;margin:26px auto 38px!important}.gift-match{padding:22px 16px!important;margin:14px 0 24px!important}.gift-visual{width:104px!important;height:104px!important;font-size:52px!important}.gift-match h3{font-size:23px!important}.gift-match>p{font-size:14px!important}.actions{grid-template-columns:1fr!important;gap:10px!important}.actions button,.actions a{min-height:50px!important}.float-actions{left:10px!important;right:10px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;translate:0 0!important;width:auto!important;grid-template-columns:.9fr 1.25fr!important;border-radius:12px!important}.float-actions button{font-size:12px!important;border-radius:8px!important}
}

/* --- [05/36] Block: live-v18-result-assets --- */
/* Section styles */
.gift-visual{width:min(520px,100%)!important;height:clamp(260px,42vw,390px)!important;margin:22px auto!important;padding:14px!important;border-radius:18px!important;background:#fff!important;overflow:hidden!important}
.gift-visual img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
.footer{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important}
.footer-unhcr-logo{display:block;width:min(250px,58vw);height:auto;object-fit:contain;margin:0 auto}
.reaction{overflow:hidden!important}
.reaction-card{position:relative!important;width:100vw!important;max-width:none!important;min-width:100vw!important;padding:70px 16px!important;overflow:visible!important}
.reaction-brush{position:fixed!important;z-index:1!important;left:-175vw!important;top:50%!important;width:165vw!important;max-width:none!important;height:62vh!important;object-fit:fill!important;transform:translateY(-50%) rotate(-1deg)!important;transform-origin:center!important;opacity:0!important;filter:none!important;pointer-events:none!important;will-change:left,opacity!important}
.reaction.show .reaction-brush{animation:reactionBrushSweepV18 .82s cubic-bezier(.18,.75,.16,1) forwards!important}
@keyframes reactionBrushSweepV18{0%{left:-175vw;opacity:0}10%{opacity:1}72%,100%{left:-32vw;opacity:1}}
.reaction-card small,.reaction-card span{position:relative!important;z-index:3!important}
@media(max-width:600px){.gift-visual{width:100%!important;height:280px!important;padding:8px!important}.footer-unhcr-logo{width:min(230px,64vw)}.reaction-brush{left:-220vw!important;width:205vw!important;height:56vh!important}@keyframes reactionBrushSweepV18{0%{left:-220vw;opacity:0}10%{opacity:1}72%,100%{left:-52vw;opacity:1}}}

/* --- [06/36] Block: live-v19-flow-polish --- */
/* Section styles */
.gift-visual.gift-bracelet img{width:auto!important;max-width:54%!important;height:100%!important;max-height:300px!important;margin:0 auto!important;object-fit:contain!important}
.reaction{background:rgba(0,67,121,.94)!important;isolation:isolate!important;overflow:hidden!important}
.reaction-card{position:relative!important;z-index:2!important;width:100vw!important;min-width:100vw!important;max-width:none!important}
.reaction-brush{position:fixed!important;left:0!important;top:50%!important;width:110vw!important;max-width:none!important;height:auto!important;object-fit:contain!important;opacity:0!important;transform:translate3d(-115vw,-50%,0) rotate(-1deg)!important;will-change:transform,opacity!important;z-index:1!important;filter:none!important}
.reaction.show .reaction-brush{animation:reactionBrushViewportV19 1.45s cubic-bezier(.18,.75,.16,1) both!important}
@keyframes reactionBrushViewportV19{0%{opacity:0;transform:translate3d(-115vw,-50%,0) rotate(-1deg)}8%{opacity:1}45%{opacity:1;transform:translate3d(-5vw,-50%,0) rotate(0deg)}73%{opacity:1;transform:translate3d(-5vw,-50%,0) rotate(0deg)}100%{opacity:0;transform:translate3d(105vw,-50%,0) rotate(1deg)}}
.reaction-card small,.reaction-card span{position:relative!important;z-index:3!important}
@media(max-width:700px){.gift-visual.gift-bracelet img{max-width:48%!important;max-height:245px!important}.reaction-brush{width:118vw!important}@keyframes reactionBrushViewportV19{0%{opacity:0;transform:translate3d(-123vw,-50%,0) rotate(-1deg)}8%{opacity:1}45%{opacity:1;transform:translate3d(-9vw,-50%,0) rotate(0deg)}73%{opacity:1;transform:translate3d(-9vw,-50%,0) rotate(0deg)}100%{opacity:0;transform:translate3d(109vw,-50%,0) rotate(1deg)}}}

/* --- [07/36] Block: v21-result-hierarchy --- */
/* Section styles */
.result-title{
  margin-top:8px!important;
}
.result-title .result-name{
  display:block;
  margin:0 0 10px;
  color:rgba(255,255,255,.82);
  font-family:"Noto Sans KR",sans-serif;
  font-size:clamp(17px,3.2vw,23px);
  font-weight:600;
  line-height:1.45;
  letter-spacing:-.035em;
}
.result-title .result-type-name{
  display:block;
  color:var(--yellow);
  font-size:clamp(42px,9.5vw,68px);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.mate-section-title span{
  white-space:nowrap;
}
.mate{
  text-align:center;
}
.mate h3{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 0 12px;
}
.mate .mate-emoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:50%;
  background:#fff;
  font-size:27px;
  line-height:1;
  box-shadow:0 4px 12px rgba(0,63,121,.10);
}
.mate .mate-type{
  color:var(--deep);
  font-size:clamp(23px,4.6vw,31px);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.045em;
}
@media(max-width:480px){
  .result-title .result-name{
    margin-bottom:7px;
    font-size:16px;
  }
  .result-title .result-type-name{
    font-size:clamp(37px,11vw,48px);
  }
  .mate-section-title{
    font-size:21px!important;
    line-height:1.45!important;
  }
  .mate{
    padding:22px 16px!important;
  }
  .mate .mate-emoji{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:24px;
  }
  .mate .mate-type{
    font-size:24px;
  }
}

/* --- [08/36] Block: v25-readability-fixes --- */
/* Section styles */
.bars .bar-row > span:first-child,
.bars .row > span:first-child,
#bars > div > span:first-child{
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  white-space:nowrap!important;
  line-height:1.25!important;
  min-width:112px!important;
  width:112px!important;
  flex:0 0 112px!important;
}
.question-title,
.question h2,
.q-title,
#questionText{
  font-size:clamp(24px,4.8vw,34px)!important;
  line-height:1.34!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  white-space:normal!important;
  text-wrap:balance;
}
.option,
.answer-btn,
.answers button,
#answers button{
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  white-space:normal!important;
  line-height:1.55!important;
}
@media(max-width:480px){
  .question-title,
  .question h2,
  .q-title,
  #questionText{
    font-size:23px!important;
    line-height:1.38!important;
    letter-spacing:-.035em!important;
  }
  .bars .bar-row > span:first-child,
  .bars .row > span:first-child,
  #bars > div > span:first-child{
    min-width:104px!important;
    width:104px!important;
    flex-basis:104px!important;
    font-size:16px!important;
  }
}

/* --- [09/36] Block: v26-pattern-only-fix --- */
/* Only the '나의 선택 패턴' block: give labels enough room and prevent collision with bars. */
#bars .bar-row,
#bars .row,
#bars > div{
  display:grid!important;
  grid-template-columns:138px minmax(120px,1fr) 34px!important;
  align-items:center!important;
  column-gap:12px!important;
}
#bars .bar-row > span:first-child,
#bars .row > span:first-child,
#bars > div > span:first-child{
  width:auto!important;
  min-width:0!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  font-size:15px!important;
  letter-spacing:-.04em!important;
}
#bars .bar-row > b:last-child,
#bars .row > b:last-child,
#bars > div > b:last-child{
  text-align:right!important;
}
@media(max-width:480px){
  #bars .bar-row,
  #bars .row,
  #bars > div{
    grid-template-columns:112px minmax(105px,1fr) 30px!important;
    column-gap:8px!important;
  }
  #bars .bar-row > span:first-child,
  #bars .row > span:first-child,
  #bars > div > span:first-child{
    font-size:14px!important;
    letter-spacing:-.055em!important;
  }
}

/* --- [10/36] Block: v27-event-final --- */
.question,.answer,.question-kicker{word-break:keep-all!important;overflow-wrap:normal!important}
.question{font-size:clamp(23px,5vw,34px)!important;white-space:normal!important}
.question-kicker{white-space:nowrap!important}
#bars{display:flex!important;flex-direction:column!important;gap:10px!important}
#bars .qual-pattern-row{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:14px!important;padding:14px 16px!important;border:1px solid rgba(0,63,121,.16)!important;border-radius:14px!important;background:#fff!important}
#bars .qual-pattern-row span{font-size:13px!important;color:#66788a!important;font-weight:700!important;white-space:nowrap!important}
#bars .qual-pattern-row b{font-size:17px!important;color:#003f79!important;white-space:nowrap!important}
#bars .rank-1{border:2px solid #0072bc!important}
/* question changes read as a clean horizontal transition */
.quiz-body{animation:v27HorizontalIn .32s ease both}
@keyframes v27HorizontalIn{from{opacity:.72;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}

/* --- [11/36] Block: result-score-and-ondock --- */
.unan-score{margin:20px auto 26px;max-width:360px;padding:18px 20px;text-align:center;border:1px solid rgba(255,255,255,.28);border-radius:20px;background:rgba(255,255,255,.12)}
.unan-score span{display:block;font-size:14px;font-weight:700;opacity:.9}.unan-score strong{display:block;margin:3px 0;color:var(--yellow);font-size:44px;font-weight:900;line-height:1}
.unan-score small{display:block;margin-top:8px;font-size:12px;line-height:1.45;opacity:.78;word-break:keep-all}
.ondock-result-card{max-width:440px;margin:24px auto 34px;padding:16px;background:#f9a0b0;border-radius:24px;text-align:center}
.ondock-result-card .ondock-copy{padding:5px 8px 14px;color:#542f2d}.ondock-result-card .ondock-copy span{display:block;font-size:13px;font-weight:800}.ondock-result-card .ondock-copy strong{display:block;margin-top:5px;font-size:19px;line-height:1.35;word-break:keep-all}
.ondock-result-card img{display:block;width:min(100%,368px);height:auto;margin:auto;border-radius:18px}
#shareCanvas{display:none!important}
@media(max-width:480px){.unan-score strong{font-size:38px}.ondock-result-card{margin-left:auto;margin-right:auto;padding:12px}.ondock-result-card .ondock-copy strong{font-size:17px}}

/* --- [12/36] Block: social-share-styles --- */
.social-share-panel{margin:28px auto 10px;max-width:620px;text-align:center}
.social-share-panel>p{margin:0 0 12px;font-size:15px;font-weight:800;color:#0b3155}
.social-share-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.social-btn{border:0;border-radius:999px;padding:11px 15px;font:700 13px/1 "Noto Sans KR",sans-serif;cursor:pointer;background:#fff;color:#0b3155;box-shadow:0 4px 14px rgba(0,52,93,.10)}
.social-btn.facebook{background:#1877f2;color:#fff}.social-btn.xshare{background:#111;color:#fff}
.social-btn.kakao{background:#fee500;color:#191919}.social-btn.instagram{background:#fff;color:#c13584;border:1px solid rgba(193,53,132,.25)}
.social-btn.linkcopy{background:#eaf5fb;color:#006eb8}
.social-share-panel small{display:block;margin-top:10px;color:#718091;font-size:11px;line-height:1.45;word-break:keep-all}
@media(max-width:480px){.social-share-buttons{display:grid;grid-template-columns:1fr 1fr}.social-btn{width:100%;padding:12px 8px}}

/* --- [13/36] Block: review-hero-v2 --- */
/* Review hero v2 — mobile-first campaign visual */
#home.home.active{min-height:100svh;position:relative;overflow:hidden;padding:0!important;display:grid;place-items:center;background:#bfeaff url("../images/backgrounds/watercolor_bg.webp") center bottom/cover no-repeat!important;isolation:isolate}
#home.home::before{content:"";display:block!important;position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.18) 48%,rgba(255,255,255,.02) 100%)!important;width:auto!important;height:auto!important;transform:none!important}
#home.home::after{content:"";position:absolute;z-index:1;left:-2vw;right:-2vw;bottom:-2px;height:min(28vh,280px);background:url("../images/backgrounds/stage6_flora.webp") center bottom/cover no-repeat;pointer-events:none}
#home .home-inner{position:relative;z-index:3;width:min(760px,92vw);margin:0 auto;padding:clamp(34px,7vh,72px) 20px clamp(210px,27vh,300px);text-align:center;display:flex;flex-direction:column;align-items:center}
#home .campaign-title{order:1;width:min(460px,72vw);margin:0 auto 8px!important;filter:drop-shadow(0 5px 10px rgba(0,68,120,.08))}
#home .hero-kicker{order:2;margin:4px 0 6px;font-size:clamp(16px,2vw,21px);font-weight:900;color:#083f73;letter-spacing:-.03em}
#home .hero-title{order:3;margin:0 0 12px!important;font-size:clamp(36px,5.4vw,64px)!important;line-height:1.05!important;letter-spacing:-.065em!important;color:#073d70!important;text-wrap:balance}
#home .hero-title span{display:block!important;color:#0072bc!important}
#home .hero-meta{order:4;display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid rgba(0,82,145,.14);backdrop-filter:blur(7px);font-size:14px;font-weight:800;color:#315b78}
#home .cta{order:5;min-width:min(360px,84vw)!important;padding:18px 28px!important;font-size:clamp(18px,2vw,22px)!important;border:3px solid #102437!important;border-radius:10px!important;background:#ffd43b!important;box-shadow:10px 10px 0 #102437!important;color:#102437!important;font-weight:900!important}
#home .cta:hover{transform:translate(3px,3px)!important;box-shadow:7px 7px 0 #102437!important}
#home .micro-copy{order:6;margin:19px 0 0;font-size:13px;font-weight:700;color:#315b78}
#home .test-guide,#home .hero-copy,#home .cover-brush{display:none!important}
@media (max-width:600px){
 #home.home.active{min-height:100svh;background-position:52% bottom!important}
 #home.home::after{height:21vh;min-height:145px;background-size:auto 100%;background-repeat:repeat-x}
 #home .home-inner{width:100%;padding:30px 18px max(170px,22vh)}
 #home .campaign-title{width:min(340px,78vw);margin-bottom:4px!important}
 #home .hero-kicker{font-size:15px;margin-top:2px}
 #home .hero-title{font-size:clamp(34px,10.8vw,48px)!important;line-height:1.07!important;margin-bottom:12px!important}
 #home .hero-meta{font-size:12px;padding:7px 11px;margin-bottom:17px}
 #home .cta{width:min(330px,88vw)!important;min-width:0!important;padding:17px 18px!important;font-size:18px!important;box-shadow:8px 8px 0 #102437!important}
 #home .micro-copy{font-size:12px;margin-top:16px}
}
@media (max-width:380px){#home .home-inner{padding-top:22px}#home .campaign-title{width:72vw}#home .hero-title{font-size:33px!important}#home .hero-meta{margin-bottom:14px}}
@media (orientation:landscape) and (max-height:620px){#home .home-inner{padding:22px 20px 100px}#home .campaign-title{width:260px}#home .hero-title{font-size:34px!important}#home.home::after{height:120px}#home .micro-copy{display:none}}

/* --- [14/36] Block: hero-clean-authoritative --- */
/* CLEAN HERO — single authoritative start-screen layout */
#home.home.active{
  min-height:100svh!important; width:100%!important; padding:0!important; margin:0!important;
  display:grid!important; place-items:center!important; position:relative!important; overflow:hidden!important;
  background-position:center center!important; background-size:cover!important; background-repeat:no-repeat!important;
}
#home.home::before,#home.home::after{display:none!important;content:none!important}
#home .home-inner.hero-final-layout{
  position:relative!important; z-index:10!important; width:min(720px,92vw)!important; margin:0 auto!important;
  padding:clamp(18px,3vh,30px) clamp(18px,3vw,30px) clamp(24px,4vh,38px)!important;
  display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important;
  gap:0!important; text-align:center!important; isolation:isolate!important;
}
/* soft white blur halo only behind copy/title/CTA, not a hard white card */
#home .home-inner.hero-final-layout::before{
  content:""!important; display:block!important; position:absolute!important; z-index:-1!important;
  left:50%!important; top:49%!important; transform:translate(-50%,-50%)!important;
  width:min(760px,96vw)!important; height:82%!important; border-radius:48%!important;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.78) 0%,rgba(255,255,255,.58) 42%,rgba(255,255,255,.20) 68%,rgba(255,255,255,0) 88%)!important;
  filter:blur(16px)!important; pointer-events:none!important;
}
#home .hero-question{display:block!important;margin:0 0 8px!important;font-family:"Gowun Dodum",sans-serif!important;font-size:clamp(16px,2vw,24px)!important;font-weight:800!important;line-height:1.42!important;letter-spacing:.02em!important;color:#123c70!important;transform:rotate(-3deg)!important;text-shadow:0 2px 10px rgba(255,255,255,.95)!important;pointer-events:none!important}
#home .hero-question::after{content:"";display:block;width:88%;height:3px;margin:2px auto 0;background:#ffd326;border-radius:999px;transform:rotate(-2deg)}
#home .hero-campaign-title,#home .campaign-title,#home .hero-kicker,#home .hero-title,#home .hero-meta,#home .micro-copy,#home .test-guide,#home .hero-copy,#home .hero-signpost,#home .hero-brushstroke{display:none!important}
#home .hero-campaign-title-img{display:block!important;width:min(500px,64vw)!important;max-width:100%!important;height:auto!important;margin:0 auto 0!important;object-fit:contain!important;filter:drop-shadow(0 5px 10px rgba(0,68,120,.08));pointer-events:none!important}
#home .hero-test-label{position:relative!important;display:block!important;margin:0 0 10px!important;padding:7px 24px 9px!important;font-family:"Gowun Dodum",sans-serif!important;font-size:clamp(23px,2.8vw,34px)!important;font-weight:900!important;line-height:1!important;color:#17263d!important;transform:rotate(-2deg)!important;isolation:isolate!important;pointer-events:none!important}
#home .hero-test-label::before{content:"";position:absolute;z-index:-1;inset:2px -7px -1px;background:#ffe36d;clip-path:polygon(2% 20%,98% 0,100% 78%,4% 100%,0 55%);box-shadow:0 7px 14px rgba(87,67,0,.10)}
#home .hero-description{display:block!important;margin:0 0 17px!important;font-family:"Gowun Dodum",sans-serif!important;font-size:clamp(16px,2vw,23px)!important;font-weight:800!important;line-height:1.5!important;letter-spacing:.015em!important;color:#173d70!important;transform:rotate(-2deg)!important;text-shadow:0 2px 10px rgba(255,255,255,.95)!important;pointer-events:none!important}
#home .hero-description em{font-style:normal;border-bottom:3px solid #ffd326;padding:0 3px}
#home #startBtn{
  display:inline-flex!important; align-items:center!important; justify-content:center!important; position:relative!important; z-index:9999!important;
  order:initial!important; width:auto!important; min-width:min(330px,82vw)!important; max-width:90vw!important;
  margin:0!important; padding:17px 28px!important; border:3px solid #102437!important; border-radius:14px!important;
  background:linear-gradient(110deg,#ffc828,#ffe16a)!important; color:#102437!important; font-size:clamp(18px,2vw,22px)!important;
  font-weight:900!important; line-height:1.2!important; box-shadow:10px 10px 0 #152432!important;
  cursor:pointer!important; pointer-events:auto!important; touch-action:manipulation!important; user-select:none!important;
  transition:transform .12s ease,box-shadow .12s ease!important;
}
#home #startBtn:hover{transform:translate(3px,3px)!important;box-shadow:7px 7px 0 #152432!important}
#home #startBtn:active,#home #startBtn.is-pressed{transform:translate(10px,10px)!important;box-shadow:0 0 0 #152432!important}
#home img,#home p{pointer-events:none!important}
@media(max-width:600px){
 #home.home.active{background-position:center center!important}
 #home .home-inner.hero-final-layout{width:100%!important;padding:16px 14px 24px!important}
 #home .home-inner.hero-final-layout::before{width:116vw!important;height:76%!important;filter:blur(14px)!important}
 #home .hero-question{font-size:clamp(15px,4.3vw,19px)!important;margin-bottom:7px!important}
 #home .hero-campaign-title-img{width:min(72vw,420px)!important;margin-bottom:0!important}
 #home .hero-test-label{font-size:clamp(22px,6.4vw,29px)!important;margin-bottom:9px!important;padding:7px 20px 9px!important}
 #home .hero-description{font-size:clamp(15px,4.2vw,18px)!important;line-height:1.45!important;margin-bottom:17px!important}
 #home #startBtn{min-width:min(300px,78vw)!important;padding:15px 20px!important;font-size:17px!important;box-shadow:8px 8px 0 #152432!important}
}

/* --- [15/36] Block: visual-backgrounds-clean --- */
/* Quiz question background */
#quiz.screen.quiz{
  background-image:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.76)),url("../images/backgrounds/watercolor_bg.webp")!important;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;background-attachment:fixed!important;
}
#quiz .quiz-head{background:rgba(248,253,255,.88)!important;backdrop-filter:blur(9px)!important}
#quiz .quiz-body{background:rgba(255,255,255,.72)!important;border-radius:26px!important;padding:42px 34px 52px!important;margin:42px auto 70px!important;box-shadow:0 14px 40px rgba(0,63,121,.10)!important}
/* Result measurement/loading background */
#loading.screen.loading{
  position:relative!important;isolation:isolate!important;overflow:hidden!important;
  background-image:linear-gradient(rgba(0,63,121,.18),rgba(0,63,121,.32)),url("../images/backgrounds/door_reference.webp")!important;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:#fff!important;
  text-shadow:0 2px 14px rgba(0,35,68,.38)!important;
}
#loading .scanner{background:rgba(0,114,188,.18)!important;backdrop-filter:blur(2px)!important}
#loading h2,#loading p{position:relative;z-index:2}
@media(max-width:700px){
 #quiz.screen.quiz{background-attachment:scroll!important;background-position:center top!important}
 #quiz .quiz-body{width:calc(100% - 28px)!important;margin:24px auto 44px!important;padding:30px 18px 38px!important;border-radius:20px!important}
 #loading.screen.loading{background-position:center!important}
}

/* --- [16/36] Block: gift-layout-clean --- */
.gift-visual{width:min(520px,100%)!important;height:340px!important;margin:22px auto!important;padding:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#fff!important;border-radius:18px!important;overflow:hidden!important}
.gift-visual img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important}
.gift-visual.gift-bracelet img{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important}
.gift-visual.gift-fox{padding:0!important;background:#f5efe2!important}
.gift-visual.gift-fox img{object-fit:contain!important}
.gift-visual.gift-kit img{object-fit:contain!important}
.gift-visual.gift-moonlight img{object-fit:contain!important;padding:22px!important}
.gift-visual.gift-wishfairy{padding:0!important}
.gift-visual.gift-wishfairy img{object-fit:contain!important}
@media(max-width:600px){.gift-visual{height:280px!important;padding:12px!important}.gift-visual.gift-moonlight img{padding:14px!important}}

/* --- [17/36] Block: round1-result-reveal-bg --- */
.reveal{
  background-image:linear-gradient(rgba(0,63,121,.78),rgba(0,57,105,.86)),url("../images/backgrounds/watercolor_bg.webp")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.reveal .brand-reveal img{display:block!important;width:min(430px,82vw)!important;height:auto!important;margin:0 auto 12px!important;object-fit:contain!important}
.footer-unhcr-logo{display:block!important;width:min(270px,64vw)!important;height:auto!important;margin:0 auto!important;object-fit:contain!important}

/* --- [18/36] Block: quiz-back-navigation --- */
.quiz-back{appearance:none;border:0;background:rgba(255,255,255,.9);color:var(--deep);font-weight:900;font-size:14px;line-height:1;padding:10px 12px;border-radius:999px;cursor:pointer;box-shadow:0 3px 10px rgba(0,63,121,.10);white-space:nowrap}
.quiz-back:hover{background:#fff}.quiz-back:disabled{opacity:0;pointer-events:none}
@media(max-width:480px){.quiz-back{padding:9px 10px;font-size:13px}.quiz-back span{display:none}.qnum{min-width:48px!important}}

/* --- [19/36] Block: mobile-qa-v4 --- */
/* One UI font across EVENT; artwork text remains part of images */
body,button,input,.scribble,.question-kicker,.reaction-card small,.eyebrow,.reveal .hook,#home .hero-test-label{font-family:"Noto Sans KR",system-ui,sans-serif!important}
.float-actions{display:none!important}
.ondock-download-btn{display:block;margin:0 auto 12px;border:0;background:#fff;color:var(--deep);font:800 14px "Noto Sans KR",sans-serif;padding:10px 15px;border-radius:999px;cursor:pointer}
@media(max-width:480px){
  /* Larger, more legible start/quiz UI */
  #home .hero-test-label{font-size:clamp(24px,7vw,31px)!important;font-weight:900!important}
  #home .cta{font-size:18px!important;min-height:58px!important}
  .question-kicker{font-size:16px!important;line-height:1.5!important}
  .question{font-size:clamp(27px,7.5vw,34px)!important;line-height:1.38!important;word-break:keep-all!important;text-wrap:balance!important}
  .answer{font-size:16px!important;line-height:1.58!important;padding:17px 16px!important;word-break:keep-all!important}
  /* Result: shorter, larger and tighter */
  .result-hero{padding:42px 16px 44px!important}
  .result-content{width:calc(100% - 30px)!important;padding:30px 0 48px!important}
  .quote{font-size:23px!important;line-height:1.42!important;margin-bottom:18px!important}
  .desc{font-size:17px!important;line-height:1.72!important;word-break:keep-all!important;text-align:center!important}
  .side-note{font-size:15px!important;line-height:1.55!important;margin:22px auto 30px!important;padding:14px 12px!important}
  .unan-score{margin-bottom:22px!important}
  .ondock-result-card{max-width:360px!important;margin:18px auto 26px!important;padding:10px!important;border-radius:20px!important}
  .ondock-result-card .ondock-copy{padding:3px 6px 8px!important}
  .ondock-result-card .ondock-copy span{font-size:12px!important}
  .ondock-result-card .ondock-copy strong{font-size:16px!important;line-height:1.35!important;margin-top:3px!important}
  .ondock-result-card img{width:min(100%,320px)!important;border-radius:14px!important}
  .ondock-download-btn{font-size:13px!important;padding:9px 14px!important;margin-bottom:9px!important}
  .section-title{font-size:24px!important;margin:34px 0 16px!important}
  .usage{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .usage div{min-height:92px!important;padding:12px 5px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;font-size:12px!important;line-height:1.35!important;word-break:keep-all!important}
  .usage span{font-size:22px!important;margin-bottom:5px!important}
  .gift-match{padding:20px 14px!important;margin:12px 0 22px!important}
  .gift-visual{width:100%!important;height:190px!important;padding:8px!important}
  .gift-match h3{font-size:24px!important;margin:10px 0 5px!important}
  .gift-match>p{font-size:15px!important;line-height:1.65!important;margin:6px auto 14px!important}
  .gift-why{font-size:14px!important;line-height:1.55!important;padding:11px 12px!important;margin-bottom:14px!important}
  .gift-disclaimer{font-size:12px!important;line-height:1.55!important}
  .actions{display:block!important;margin-top:18px!important}
  .actions #retryBtn{width:100%!important;min-height:54px!important;font-size:16px!important}
}

/* --- [20/36] Block: v25-mobile-result-polish --- */
/* V5 mobile readability and hierarchy */
@media(max-width:700px){
  .home,.home button,.quiz,.result{font-family:"Noto Sans KR","Apple SD Gothic Neo",sans-serif!important}
  .test-label{font-size:17px!important;font-weight:800!important;letter-spacing:-.02em!important}
  .hero-description{font-size:17px!important;line-height:1.55!important;font-weight:700!important;letter-spacing:-.025em!important;word-break:keep-all!important}
  .hero-description em{font-weight:900!important;font-style:normal!important}
  .eyebrow{font-family:inherit!important;font-weight:800!important;letter-spacing:.08em!important}
  .desc{font-size:17px!important;line-height:1.65!important;font-weight:700!important;word-break:keep-all!important;margin-bottom:18px!important}
  .section-title{font-size:21px!important;line-height:1.35!important;margin:38px 0 15px!important;word-break:keep-all!important}
  .usage{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  .usage div{min-height:86px!important;padding:11px 5px!important;font-size:12px!important;line-height:1.35!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
  .usage span{font-size:20px!important;margin-bottom:5px!important}
  .mate-section-title{font-size:18px!important;color:#425b70!important;margin-top:34px!important}
  .mate-section-title span{font-size:19px!important;color:var(--deep)!important;font-weight:900!important}
  .mate{padding:17px 15px!important;margin-bottom:34px!important;box-shadow:3px 3px 0 var(--deep)!important}
  .mate h3{font-size:18px!important;line-height:1.35!important}.mate p{font-size:13px!important;line-height:1.55!important}.mate b{font-size:12px!important}
  .gift-match{padding:18px 14px!important}.gift-label{font-size:11px!important}.gift-match h3{font-size:21px!important;margin:7px 0!important}.gift-match>p{font-size:13px!important;line-height:1.55!important;margin:6px auto 13px!important}
  .gift-why{font-size:14px!important;line-height:1.6!important;padding:12px 13px!important;margin-bottom:14px!important;word-break:keep-all!important}
  .gift-disclaimer{font-size:11px!important;line-height:1.5!important}
  .reveal{padding:52px 20px 118px!important}.reveal .hook{font-size:14px!important}.reveal h2{font-size:clamp(27px,8vw,35px)!important;line-height:1.3!important;margin:12px 0 24px!important}.reveal>p:not(.hook){font-size:15px!important;line-height:1.75!important;word-break:keep-all!important}
  .float-actions{display:grid!important;bottom:max(8px,env(safe-area-inset-bottom))!important;padding:7px!important;gap:7px!important;background:rgba(255,255,255,.96)!important}
  .float-actions button{min-height:48px!important;font-size:13px!important;line-height:1.25!important}
}

/* --- [21/36] Block: v7-result-mobile-polish --- */
/* V7: mobile result hierarchy and spacing */
.result-hero .unan-score{color:#fff;margin:20px auto 0;max-width:390px;padding:16px 20px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.32)}
.result-hero .unan-score span{font-size:16px;font-weight:800}.result-hero .unan-score strong{font-size:48px}.result-hero .unan-score small{font-size:13px;opacity:.92}
#mateScore{display:block;margin-top:12px;font-size:22px;font-weight:900;color:var(--deep)}
.float-actions a{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;padding:12px 8px;font-weight:900;cursor:pointer}
.reveal .brand-reveal{margin:30px auto 20px!important;padding:0!important}.reveal .brand-reveal img{margin:0 auto!important}.reveal .reveal-bridge{margin-top:12px!important}.reveal .cta{margin-top:16px!important}
@media(max-width:700px){
 .result-hero{padding-bottom:32px!important}.result-hero .unan-score{margin-top:16px!important;padding:14px 16px!important}.result-hero .unan-score span{font-size:16px!important}.result-hero .unan-score strong{font-size:46px!important;margin:5px 0!important}.result-hero .unan-score small{font-size:13px!important;line-height:1.45!important}
 .desc{font-size:16px!important;line-height:1.72!important;font-weight:600!important;word-break:keep-all!important}
 .ondock-result-card{max-width:330px!important;margin:16px auto 22px!important;padding:8px!important}.ondock-result-card .ondock-copy{padding:2px 5px 6px!important}.ondock-result-card .ondock-copy span{font-size:12px!important}.ondock-result-card .ondock-copy strong{font-size:16px!important}.ondock-result-card img{width:min(100%,286px)!important;max-height:430px!important;object-fit:contain!important}.ondock-download-btn{margin:4px auto 8px!important}
 #mateScore{font-size:24px!important;margin-top:13px!important}
 .gift-match{padding:18px 14px!important}.gift-match h3{font-size:22px!important}.gift-match>p{font-size:13px!important;line-height:1.55!important;margin-bottom:12px!important}.gift-why{font-size:15px!important;line-height:1.72!important;padding:14px!important;margin-bottom:14px!important;word-break:keep-all!important;overflow:visible!important;height:auto!important;min-height:0!important}.gift-disclaimer{font-size:11px!important;line-height:1.5!important}
 .reveal{padding:46px 20px 112px!important}.reveal .hook{font-size:15px!important}.reveal h2{font-size:clamp(28px,8vw,35px)!important;margin:10px 0 20px!important}.reveal>p:not(.hook):not(.reveal-bridge){font-size:15px!important;line-height:1.75!important}.reveal .brand-reveal{margin:24px auto 12px!important;padding:0!important}.reveal .brand-reveal img{width:min(330px,76vw)!important;margin:0 auto!important}.reveal .reveal-bridge{font-size:16px!important;line-height:1.6!important;margin:6px auto 0!important}.reveal .cta{margin-top:14px!important}
 .float-actions{display:grid!important}.float-actions .float-share,.float-actions .float-donate{font-size:13px!important;line-height:1.25!important;min-height:48px!important;border-radius:8px!important}
}

/* --- [22/36] Block: v8-mobile-fixes --- */
/* V8 final mobile fixes */
@media(max-width:700px){
  #mateScore{font-size:17px!important;line-height:1.35!important;margin-top:9px!important}
  .gift-match{overflow:visible!important;padding:20px 14px 22px!important;margin-bottom:30px!important}
  .gift-why{display:block!important;height:auto!important;min-height:0!important;overflow:visible!important;margin:12px 0 16px!important;padding:13px 12px!important;font-size:14px!important;line-height:1.65!important}
  .gift-match .cta{display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;height:auto!important;min-height:54px!important;margin:0!important;padding:13px 12px!important;line-height:1.35!important;z-index:2!important}
  .gift-disclaimer{display:block!important;position:relative!important;clear:both!important;height:auto!important;min-height:0!important;margin:16px 2px 0!important;padding:0!important;font-size:11px!important;line-height:1.6!important;z-index:1!important}
  .ondock-download-btn{margin:10px auto 2px!important}
  .reveal{padding-bottom:94px!important}
  .reveal .brand-reveal{margin:18px auto 2px!important}
  .reveal .brand-reveal img{display:block!important;margin:0 auto!important}
  .reveal .reveal-bridge{margin:0 auto!important;padding-top:0!important}
}
/* Brush is always a viewport layer and is reset in JS for every reaction. */
.reaction-brush{visibility:visible!important;display:block!important}

/* --- [23/36] Block: mobile-brush-guarantee-v1 --- */
/* iOS/Netlify guarantee: the brush is already on-screen when every reaction opens. */
.reaction .reaction-brush{left:50%!important;top:50%!important;width:min(760px,118vw)!important;height:auto!important;opacity:0!important;transform:translate3d(-50%,-50%,0) rotate(-1deg) scaleX(.82)!important;transform-origin:center center!important;object-fit:contain!important;will-change:opacity,transform!important;}
.reaction.show .reaction-brush{opacity:.97!important;transform:translate3d(-50%,-50%,0) rotate(-1deg) scaleX(1)!important;animation:brushGuaranteedReveal .38s ease-out both!important;}
@keyframes brushGuaranteedReveal{0%{opacity:.35;transform:translate3d(-50%,-50%,0) rotate(-1deg) scaleX(.82)}100%{opacity:.97;transform:translate3d(-50%,-50%,0) rotate(-1deg) scaleX(1)}}
@media(max-width:700px){.reaction .reaction-brush{width:132vw!important;max-width:none!important;}}

/* --- [24/36] Block: mobile-result-final-polish-v3 --- */
/* Ondock: artwork itself is the card; remove the extra pink container. */
.ondock-result-card{max-width:440px!important;margin:20px auto 24px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-align:center!important}
.ondock-result-card .ondock-copy{padding:0 8px 10px!important;color:var(--deep)!important}
.ondock-result-card .ondock-copy span{display:block!important;font-size:15px!important;font-weight:900!important;line-height:1.45!important;word-break:keep-all!important}
.ondock-result-card img{display:block!important;width:min(100%,368px)!important;height:auto!important;margin:0 auto!important;border-radius:0!important;box-shadow:none!important}
.ondock-download-btn{margin:10px auto 0!important}
/* Gift text: Korean line breaks should follow phrases, not split words. */
.gift-match h3,.gift-match>p,.gift-why,.gift-disclaimer,.gift-match .cta{word-break:keep-all!important;overflow-wrap:break-word!important;text-wrap:pretty!important}
.gift-match>p{max-width:34em!important;margin-left:auto!important;margin-right:auto!important}
.gift-why{text-align:left!important}
.gift-match .cta{white-space:normal!important;text-align:center!important}
/* Closing brand mark: tighten the empty space directly below the title image. */
.reveal .brand-reveal{margin-bottom:0!important}
.reveal .brand-reveal img{margin-bottom:0!important}
.reveal .reveal-bridge{margin-top:-8px!important;padding-top:0!important}
@media(max-width:700px){
 .ondock-result-card{max-width:330px!important;margin:14px auto 20px!important;padding:0!important}
 .ondock-result-card .ondock-copy{padding:0 6px 8px!important}
 .ondock-result-card .ondock-copy span{font-size:14px!important}
 .ondock-result-card img{width:min(100%,300px)!important;max-height:none!important;object-fit:contain!important}
 .gift-match{padding:18px 15px 22px!important}
 .gift-match h3{font-size:22px!important;line-height:1.3!important;margin:8px auto 6px!important}
 .gift-match>p{font-size:14px!important;line-height:1.62!important;margin:6px auto 13px!important;padding:0 2px!important}
 .gift-why{font-size:14px!important;line-height:1.68!important;padding:13px 12px!important;margin:12px 0 16px!important}
 .gift-match .cta{font-size:14px!important;line-height:1.35!important;padding:13px 10px!important}
 .gift-disclaimer{font-size:11px!important;line-height:1.6!important;margin-top:15px!important}
 .reveal .brand-reveal{margin:14px auto 0!important}
 .reveal .brand-reveal img{margin:0 auto!important}
 .reveal .reveal-bridge{margin:-10px auto 0!important;padding-top:0!important}
}

/* --- [25/36] Block: desktop-gift-layout-fix-v5 --- */
/* V5: keep the gift explanation, CTA and disclaimer in normal document flow on desktop. */
.gift-match{overflow:visible!important;box-sizing:border-box!important}
.gift-match .cta{display:flex!important;position:relative!important;float:none!important;clear:both!important;width:100%!important;max-width:none!important;min-height:58px!important;margin:18px 0 0!important;padding:15px 18px!important;box-sizing:border-box!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1.35!important;white-space:normal!important;z-index:1!important}
.gift-disclaimer{display:block!important;position:relative!important;float:none!important;clear:both!important;width:100%!important;box-sizing:border-box!important;margin:16px 0 0!important;padding:0 4px!important;text-align:center!important;line-height:1.65!important;z-index:0!important}
.gift-why{display:block!important;position:relative!important;float:none!important;clear:both!important;width:100%!important;box-sizing:border-box!important;height:auto!important;overflow:visible!important;margin:16px 0 0!important}
@media(min-width:701px){
 .gift-match{padding-bottom:28px!important}
 .gift-match .cta{font-size:17px!important}
 .gift-disclaimer{font-size:12px!important}
}

/* --- [26/36] Block: v7-mobile-polish --- */
/* Result section hierarchy: Ondock heading matches the following section headings. */
.ondock-section-title{font-size:24px!important;line-height:1.35!important;margin:34px 0 16px!important;text-align:left!important;font-weight:900!important;color:var(--deep)!important}
.ondock-result-card{margin-top:0!important}
.ondock-download-btn{display:block!important;background:var(--blue)!important;color:#fff!important;border:2px solid var(--line)!important;box-shadow:4px 5px 0 var(--line)!important;border-radius:999px!important;padding:11px 18px!important;font-weight:900!important;font-size:14px!important;line-height:1.2!important}
.ondock-download-btn:hover,.ondock-download-btn:focus-visible{filter:brightness(.96)!important}
/* Gift copy: stable Korean wrapping and clean left alignment on narrow screens. */
.gift-match>p,.gift-why{max-width:100%!important;text-align:left!important;word-break:keep-all!important;overflow-wrap:break-word!important;white-space:normal!important;text-wrap:pretty!important;letter-spacing:-.02em!important}
.gift-match>p{line-height:1.68!important}
.gift-why{line-height:1.72!important;padding:14px 14px!important}
.gift-disclaimer{font-size:10px!important;line-height:1.55!important;letter-spacing:-.025em!important;word-break:keep-all!important;overflow-wrap:break-word!important}
@media(max-width:700px){
 .ondock-section-title{font-size:21px!important;line-height:1.35!important;margin:38px 0 15px!important;padding:0!important;text-align:left!important}
 .ondock-result-card{max-width:330px!important;margin:0 auto 26px!important}
 .ondock-download-btn{margin:12px auto 0!important;background:var(--blue)!important;color:#fff!important;font-size:13px!important;padding:10px 17px!important}
 .gift-match>p{font-size:14px!important;line-height:1.68!important;margin:7px 0 14px!important;padding:0 1px!important}
 .gift-why{font-size:14px!important;line-height:1.72!important;margin:12px 0 16px!important;padding:14px 13px!important}
 .gift-disclaimer{font-size:9px!important;line-height:1.5!important;margin:13px 0 0!important;padding:0 2px!important;text-align:left!important}
}

/* --- [27/36] Block: mobile-intro-legibility-final --- */
@media (max-width:600px){
  #home .hero-question{font-weight:900!important;letter-spacing:-.01em!important;text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 1px currentColor!important;-webkit-font-smoothing:antialiased!important;}
  #home .hero-description{font-weight:900!important;letter-spacing:-.01em!important;text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 1px currentColor!important;-webkit-font-smoothing:antialiased!important;}
  #home .hero-description em{font-weight:900!important;}
}

/* --- [28/36] Block: v13-mobile-natural-linebreaks --- */
@media (max-width:700px){
  /* Korean mobile copy: allow browser to wrap at natural Korean line opportunities. */
  .hero-description,.hero-title,.hero-copy,.small-note,
  .question,.answer,.desc,.quote,.section-title,.side-note,
  .mate-section-title,.mate h3,.mate p,.gift-match h3,.gift-match>p,.gift-why,.gift-disclaimer,
  .reveal .hook,.reveal h2,.reveal>p,.ondock-result-card .ondock-copy strong,
  .social-share-panel small{
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    line-break:strict!important;
    text-wrap:pretty!important;
  }
  .answer{hyphens:none!important;}
  .question{line-height:1.42!important;}
  .desc,.gift-match>p,.gift-why,.mate p{letter-spacing:-.02em!important;}
  .gift-disclaimer{letter-spacing:-.03em!important;}
}

/* --- [29/36] Block: mobile-answer-touch-fix-v15 --- */
/* Prevent sticky :hover/pressed state from carrying into the next question on touch devices. */
@media (hover:none), (pointer:coarse){
  .answer:hover,.answer:focus,.answer:focus-visible{
    background:#fff!important;
    border-color:var(--deep)!important;
    transform:none!important;
    box-shadow:4px 4px 0 var(--deep)!important;
    outline:none!important;
  }
  .answer:active{background:#dff4ff!important;transform:translate(4px,4px)!important;box-shadow:none!important}
}

/* --- [30/36] Block: v17-intro-linebreak-fix --- */
/* Keep the intro copy in semantic phrase units so Korean words never split awkwardly on mobile. */
#home .hero-description .hero-desc-line{white-space:nowrap!important;display:inline-block!important;}
@media(max-width:600px){
  #home .hero-description{width:100%!important;text-align:center!important;}
  #home .hero-description .hero-desc-line{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;}
}

/* --- [31/36] Block: mobile-result-forced-break-v4 --- */
.mobile-forced-br{display:none;}
@media (max-width:700px){
  .mobile-forced-br{display:block!important;}
  #resultDesc,#mateDesc{white-space:normal!important;word-break:keep-all!important;overflow-wrap:normal!important;}
}

/* --- [32/36] Block: mobile-forced-linebreak-v5 --- */
.mobile-only-break{display:none;}
@media (max-width:700px){
  br.mobile-only-break{display:block!important;content:"";}
  #reactionText{white-space:normal!important;}
}

/* --- [33/36] Block: mobile-reaction-text-position-v6 --- */
/* Mobile: keep the forced two-line reaction copy visually centered on the brush. */
@media (max-width:700px){
  #reactionSmall,#reactionText{transform:translateY(-12px)!important;}
}

/* --- [34/36] Block: mobile-gift-copy-final-v8 --- */
/* V8 mobile: use the full text column and allow natural Korean wrapping. */
@media (max-width:700px){
  .gift-match{padding-left:14px!important;padding-right:14px!important}
  .gift-why{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    margin:12px 0 16px!important;
    padding:12px 13px!important;
    text-align:left!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-break:strict!important;
    text-wrap:wrap!important;
    font-size:14px!important;
    line-height:1.65!important;
    letter-spacing:-.015em!important;
  }
  .gift-disclaimer{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    margin:12px 0 0!important;
    padding:0 2px!important;
    text-align:left!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-break:strict!important;
    text-wrap:wrap!important;
    font-size:9px!important;
    line-height:1.55!important;
    letter-spacing:-.01em!important;
    color:#777!important;
  }
}

/* --- [35/36] Block: mobile-gift-disclaimer-v11 --- */
@media (max-width:700px){
  .gift-match .gift-disclaimer{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:11px 0 0!important;
    padding:0!important;
    font-size:8px!important;
    line-height:1.48!important;
    letter-spacing:-.025em!important;
    text-align:left!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
  }
}

/* --- [36/36] Block: mobile-gift-alignment-v12 --- */
/* V12 mobile: visually balance every text block in all six gift-match cards. */
@media (max-width:700px){
  .gift-match{padding-left:16px!important;padding-right:16px!important}
  .gift-match>p{
    width:100%!important;max-width:100%!important;box-sizing:border-box!important;
    margin:7px auto 14px!important;padding:0 7px!important;
    text-align:center!important;font-size:13.5px!important;line-height:1.68!important;
    word-break:keep-all!important;overflow-wrap:break-word!important;letter-spacing:-.02em!important;
  }
  .gift-why{
    width:100%!important;max-width:100%!important;box-sizing:border-box!important;
    margin:12px 0 16px!important;padding:13px 16px!important;
    text-align:left!important;font-size:13.5px!important;line-height:1.72!important;
    word-break:keep-all!important;overflow-wrap:break-word!important;line-break:strict!important;
    letter-spacing:-.025em!important;
  }
  .gift-match .gift-disclaimer{
    width:calc(100% - 12px)!important;max-width:none!important;box-sizing:border-box!important;
    margin:11px auto 0!important;padding:0!important;
    text-align:center!important;font-size:7.5px!important;line-height:1.52!important;
    letter-spacing:-.025em!important;word-break:keep-all!important;overflow-wrap:break-word!important;
    white-space:normal!important;color:#777!important;
  }
}

/* 팝업 창의 스타일을 지정하고, 카카오톡 브라우저에서 버튼을 눌렀을 때 이 팝업을 띄우도록 event-card.js의 로직을 수정*/
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.image-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}
.image-modal-content {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}
.image-modal-instruction {
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}
#modal-image-content {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 10px;
}
.image-modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}