/* /next (2026-11-04, "OPENTAWI in Seoul"): clean modern pass. Archivo wordmark, Instrument Serif italic for "in Seoul",
   Pretendard for Korean. Warm off-white, near-black ink, one Seoul red. The hanbok 3D characters carry the Korean flavor. */
@font-face{font-family:'Archivo';src:url('/landing/fonts/Archivo-Variable.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/next/fonts/InstrumentSerif-Italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Pretendard';src:url('/next/fonts/Pretendard-next.woff2') format('woff2');font-weight:45 920;font-display:swap}
:root{
  --bg:#F7F6F2;--card:#FFFFFF;--ink:#111214;--ink-2:#4B4D52;--ink-3:#8A8B8F;--line:#E6E4DE;--line-2:#EFEDE8;--red:#E5402D;
  --wm:'Archivo','Pretendard',sans-serif;--it:'Instrument Serif',Georgia,serif;--kr:'Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif;
  --gut:max(20px,env(safe-area-inset-left,0px));--gut-r:max(20px,env(safe-area-inset-right,0px));--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--kr);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.test-bar{padding:7px var(--gut-r) 7px var(--gut);background:var(--ink);color:#F7F6F2;font-size:12px;text-align:center;letter-spacing:.01em}
.top{display:flex;align-items:center;gap:16px;max-width:1120px;margin:0 auto;padding:18px var(--gut-r) 6px var(--gut)}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.logo-word{font:800 22px/1 var(--wm);font-stretch:112%;letter-spacing:.02em}
.logo-in{font:italic 400 19px/1 var(--it);color:var(--red)}
.lang{margin-left:auto;display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.lang button{border:0;background:none;padding:6px 12px;border-radius:999px;font:700 12px/1 var(--wm);letter-spacing:.06em;color:var(--ink-3);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

main{max-width:1120px;margin:0 auto;padding:12px var(--gut-r) 56px var(--gut);outline:0}
.screen{display:grid;gap:22px;animation:in .5s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--wm);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--red)}
.h1{font:800 clamp(34px,6.4vw,64px)/1.06 var(--wm);font-stretch:104%;letter-spacing:-.025em;text-wrap:balance}
.h1 em{font:italic 400 1.04em/1 var(--it);letter-spacing:0;color:var(--red)}
.h2{font:700 clamp(24px,3.6vw,34px)/1.25 var(--kr);letter-spacing:-.03em;text-wrap:balance}
.sub{font-size:17px;color:var(--ink-2);max-width:52ch}
.meta{font:600 12px/1.4 var(--wm);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.step{display:flex;align-items:center;gap:10px}
.step i{flex:1;max-width:44px;height:3px;border-radius:9px;background:var(--line)}
.step i.on{background:var(--ink)}
.back{justify-self:start;border:0;background:none;padding:4px 0;font-size:14px;color:var(--ink-2);cursor:pointer}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 16px/1 var(--kr);cursor:pointer;transition:transform .15s var(--ease),background .15s;text-decoration:none}
.btn:hover{background:#000}.btn:active{transform:scale(.98)}
.btn .ar{font:700 16px/1 var(--wm)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--card)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* hero */
.hero{display:grid;gap:22px;padding:28px 0 0}
.cast{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;min-height:clamp(210px,26vw,280px);margin:10px calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut));padding-bottom:18px;border-bottom:1px solid var(--line);overflow:hidden}
.cast canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .6s;cursor:pointer}
.cast.ready canvas{opacity:1}.cast.ready img{opacity:0;transition:opacity .4s}
.cast img{width:min(150px,22vw);height:auto;margin:0 -10px;transition:transform .5s var(--ease);animation:idle 4s ease-in-out infinite}
.cast img:nth-child(2n){animation-delay:-1.3s}.cast img:nth-child(3n){animation-delay:-2.4s}
@keyframes idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-.6deg)}}
.based{font-size:14px;color:var(--ink-2)}
.based b{color:var(--ink)}

/* who */
.who{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.who-card{display:grid;grid-template-rows:auto 1fr auto;gap:12px;min-height:360px;padding:22px;border:1px solid var(--line);border-radius:28px;background:var(--card);text-align:left;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.who-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(17,18,20,.35);border-color:var(--ink)}
.who-card img{justify-self:center;width:min(200px,100%);height:auto}
.who-card .en{font:800 28px/1.05 var(--wm);font-stretch:104%;letter-spacing:-.02em}
.who-card .ko{display:block;margin-top:6px;font-size:14.5px;color:var(--ink-2)}
.who-card .go{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line-2);font-size:14px;font-weight:600}

/* characters */
.picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch}
.stage{position:relative;min-height:360px;border-radius:28px;background:radial-gradient(120% 90% at 50% 100%,var(--tone,#EDE7DD),#FBFAF7 70%);overflow:hidden}
.stage img{position:absolute;inset:8% 10% 6%;width:80%;height:86%;object-fit:contain;transition:opacity .4s}
.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;cursor:grab;opacity:0;transition:opacity .5s}
.stage.ready canvas{opacity:1}.stage.ready img{opacity:0}
.stage .floor{position:absolute;left:22%;right:22%;bottom:9%;height:14px;border-radius:50%;background:rgba(17,18,20,.08);filter:blur(6px)}
.stage .hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:600 11px/1 var(--wm);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.detail{display:grid;align-content:space-between;gap:18px;padding:24px;border-radius:28px;background:var(--card);border:1px solid var(--line)}
.detail .en{font:800 34px/1.05 var(--wm);font-stretch:104%;letter-spacing:-.02em}
.detail .ko{font-size:16px;color:var(--ink-2);margin-top:6px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile{display:grid;justify-items:start;gap:2px;padding:12px 12px 14px;border:1px solid var(--line);border-radius:20px;background:var(--card);cursor:pointer;text-align:left;transition:border-color .15s,transform .15s var(--ease)}
.tile img{justify-self:center;width:100%;max-width:120px;aspect-ratio:1;object-fit:contain;margin-bottom:4px}
.tile b{font:700 13px/1.2 var(--wm);letter-spacing:.06em;text-transform:uppercase}
.tile small{font-size:13px;color:var(--ink-2)}
.tile[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tile.soon{cursor:default;opacity:.55;border-style:dashed}
.tile.soon .ph{justify-self:center;width:100%;max-width:120px;aspect-ratio:1;display:grid;place-items:center;font:italic 400 18px var(--it);color:var(--ink-3)}

/* form */
.form{display:grid;gap:18px;max-width:560px;padding:24px;border-radius:28px;background:var(--card);border:1px solid var(--line)}
.field{display:grid;gap:8px}
.field>span,.field legend{font-size:14px;font-weight:600}
.field small{font-size:12.5px;color:var(--ink-3)}
.find>label{font-size:14px;font-weight:600}.find-res{display:grid;gap:6px}.find-res:empty{display:none}
.find-opt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;color:var(--ink);text-align:left;cursor:pointer}.find-opt b{font-weight:700;font-size:15px}.find-opt span{font-size:12.5px;color:var(--ink-3);text-align:right}.find-opt:hover,.find-opt:focus-visible{border-color:var(--ink)}
.find-none{margin:0;font-size:13px;color:var(--ink-3)}
fieldset.field{border:0;margin:0;padding:0}
.in{width:100%;min-height:52px;border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:12px 16px;font-size:16px;transition:border-color .15s,background .15s}
.in:focus{outline:0;border-color:var(--ink);background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.agree{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:16px;border-radius:16px;background:var(--bg)}
.agree input{width:20px;height:20px;margin-top:3px;accent-color:var(--ink)}
.agree b{display:block;font-size:15px}
.agree span{font-size:13.5px;color:var(--ink-2)}
.err{min-height:1.3em;font-size:13.5px;color:var(--red)}

/* card */
.issue{justify-items:center;text-align:center}
.card{--c-bg:#fff;--c-ink:var(--ink);--c-sub:var(--ink-2);--c-line:var(--line-2);position:relative;width:min(340px,86vw);border-radius:26px;background:var(--c-bg);color:var(--c-ink);box-shadow:0 1px 0 var(--line),0 40px 80px -40px rgba(17,18,20,.45);overflow:hidden;text-align:left;animation:deal .9s var(--ease) both;transition:background .3s,color .3s}
.card.fr-hanji::after{content:"";position:absolute;inset:7px;border:1.5px solid var(--c-line);border-radius:21px;pointer-events:none}
@keyframes deal{0%{opacity:0;transform:translateY(30px) rotateX(18deg) scale(.94)}100%{opacity:1;transform:none}}
.card-meta{display:flex;justify-content:space-between;gap:8px;padding:16px 18px 0;font:700 10.5px/1.3 var(--wm);letter-spacing:.14em;text-transform:uppercase;color:var(--c-sub)}
.card-art{position:relative;margin:12px;aspect-ratio:1;border-radius:18px;background:linear-gradient(160deg,var(--a,#F1E8D8),var(--b,#DCC9A8));display:grid;place-items:end center;overflow:hidden;transition:background .35s}
.card-art::before{content:"";position:absolute;inset:0;pointer-events:none}
.th-hanok::before{background:radial-gradient(circle at 50% 0,transparent 13px,var(--p) 13.5px,var(--p) 15px,transparent 15.5px) 0 0/28px 13px}
.th-namsan::before{background:radial-gradient(circle at 72% 28%,var(--p) 0 12%,transparent 12.5%)}
.th-han::before{background:radial-gradient(circle,var(--p) 0 1.5px,transparent 2px) 0 0/23px 17px;-webkit-mask:linear-gradient(#000 0 50%,transparent 60%);mask:linear-gradient(#000 0 50%,transparent 60%)}
.th-seongsu::before{background:linear-gradient(var(--p) 1.5px,transparent 1.5px) 0 0/100% 20px,linear-gradient(90deg,var(--p) 1.5px,transparent 1.5px) 0 0/50px 40px}
.th-palace::before{background:repeating-linear-gradient(90deg,var(--p) 0 5px,transparent 5px 12px,rgba(80,150,230,.5) 12px 17px,transparent 17px 28px);height:14%}
.th-blossom::before{background:radial-gradient(ellipse 5px 3px,var(--p) 0 98%,transparent) 0 0/34px 30px,radial-gradient(ellipse 4px 3px,var(--p) 0 98%,transparent) 17px 15px/34px 30px}
.card-art img{position:relative;width:84%;height:auto;margin-bottom:4%;transition:opacity .4s}
.card-art canvas{position:absolute;inset:0;width:100%!important;height:100%!important;cursor:grab;opacity:0;transition:opacity .5s}
.card-art.ready canvas{opacity:1}.card-art.ready img{opacity:0}
.seal{position:absolute;top:10px;right:12px;z-index:2;display:grid;place-items:center;width:38px;padding:7px 0;border-radius:6px;background:#C8321F;color:#FFF4EC;font:800 15px/1.15 var(--kr);text-align:center;box-shadow:inset 0 0 0 2.5px #C8321F,inset 0 0 0 4px #FFF4EC;transform:rotate(-7deg);animation:stamp .35s var(--ease) both;pointer-events:none}
@keyframes stamp{0%{opacity:0;transform:rotate(-7deg) scale(1.6)}100%{opacity:1;transform:rotate(-7deg) scale(1)}}
.card-body{display:grid;gap:4px;padding:2px 18px 18px}
.card-name{font:800 26px/1.15 var(--kr);letter-spacing:-.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-role{font-size:13.5px;color:var(--c-sub)}
.card-tag{margin-top:4px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-foot{display:flex;justify-content:space-between;align-items:baseline;padding:12px 18px 16px;border-top:1px solid var(--c-line)}
.card-foot .logo-word{font-size:13px}.card-foot .logo-in{font-size:13px}
.card-foot .no{font:600 11px/1 var(--wm);letter-spacing:.1em;color:var(--c-sub)}
.pose-hint{max-width:340px;font-size:13px;color:var(--ink-3)}
.studio{display:grid;gap:16px;width:min(560px,100%);padding:20px;border-radius:24px;background:var(--card);border:1px solid var(--line);text-align:left}
.studio-h{font:700 13px/1 var(--wm);letter-spacing:.12em;text-transform:uppercase}
.opt{display:grid;gap:8px;min-width:0}
.opt-l{font-size:13px;font-weight:600;color:var(--ink-2)}
.sws{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.sws::-webkit-scrollbar{display:none}
.sw{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;white-space:nowrap;cursor:pointer;transition:border-color .15s}
.sw i{width:24px;height:24px;border-radius:50%}
.sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sw:not(:has(i)){padding:0 14px}
.sw.dot{padding:0 8px}.sw.dot i{width:26px;height:26px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.seal.en{width:auto;padding:6px 9px;font:800 12px/1 var(--wm);letter-spacing:.06em}
.mini-seal{display:inline-block;padding:3px 6px;border-radius:4px;background:#C8321F;color:#FFF4EC;font:800 12px/1.1 var(--kr)}
.next-note{max-width:440px;font-size:14.5px;color:var(--ink-2)}

.foot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;max-width:1120px;margin:0 auto;padding:24px var(--gut-r) 40px var(--gut);border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.foot .logo-word{font-size:13px;color:var(--ink)}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;transition:.25s var(--ease);pointer-events:none;max-width:calc(100vw - 32px);z-index:50}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* home: one line, two choices */
.home{min-height:min(68vh,620px);align-content:center;gap:40px;padding:24px 0}
.home .h1{font-size:clamp(40px,8.4vw,84px)}
.sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:620px}
.side-card{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;padding:0 24px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,transform .15s var(--ease)}
.side-card:hover{transform:translateY(-2px)}.side-card:active{transform:scale(.98)}
.side-card[data-side="brand"]{background:var(--ink);color:#fff}
.side-t{font:800 20px/1.2 var(--kr);letter-spacing:-.03em}
.side-go{font:700 20px/1 var(--wm)}
/* Korean mode reads as Korean: Hangul headline in Pretendard, the accent word in red rather than a Latin italic */
:lang(ko) .h1{font-family:var(--kr);font-weight:800;letter-spacing:-.045em;line-height:1.16}
:lang(ko) .h1 em{font:inherit;color:var(--red)}
:lang(ko) .eyebrow,:lang(ko) .meta,:lang(ko) .card-meta,:lang(ko) .tile b,:lang(ko) .studio-h{font-family:var(--kr);letter-spacing:.02em;text-transform:none}
:lang(ko) .detail .en{font-family:var(--kr);letter-spacing:-.04em}
@media (max-width:560px){.sides{grid-template-columns:1fr}.post{grid-template-columns:80px 1fr;gap:12px;padding:12px}.post-offer{font-size:16px}}

/* English home: one quiet sans-serif voice; the italic belongs to the logo. */
:lang(en) .home{gap:36px}
:lang(en) .home .h1{font-family:var(--wm);font-size:clamp(44px,7vw,80px);font-weight:560;font-stretch:100%;letter-spacing:-.055em;line-height:1.06;text-wrap:initial;overflow-wrap:normal}
:lang(en) .home .h1 em{font:inherit;color:var(--red);letter-spacing:inherit}
:lang(en) .home .sides{max-width:520px;gap:12px}
:lang(en) .home .side-card{min-height:62px;padding:0 22px;border-width:1px;border-radius:14px;transition:background .2s,border-color .2s,transform .2s var(--ease)}
:lang(en) .home .side-card[data-side="creator"]{border-color:#C5C3BD;background:transparent}
:lang(en) .home .side-card[data-side="creator"]:hover{background:#FFF;border-color:var(--ink)}
:lang(en) .home .side-card[data-side="brand"]:hover{background:#303236}
:lang(en) .home .side-t{font:550 16px/1.3 var(--wm);font-stretch:100%;letter-spacing:-.015em}
:lang(en) .home .side-go{font-size:18px;font-weight:400}
:lang(en) .test-bar{font-family:var(--wm);font-size:12px;font-weight:450;letter-spacing:.005em;line-height:1.5}
@media(max-width:560px){:lang(en) .home{gap:32px}:lang(en) .home .h1{font-size:clamp(34px,10.8vw,58px);line-height:1.08;letter-spacing:-.05em}:lang(en) .home .sides{gap:10px}:lang(en) .home .side-card{min-height:62px;padding:0 20px}}

/* collab: post form note, blind posts, applicants, board */
.h3{font:700 19px/1.3 var(--kr);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.tag{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--line-2);font:600 11px/1.4 var(--kr);color:var(--ink-2);letter-spacing:0;vertical-align:middle}
.note{padding:12px 14px;border-radius:14px;background:var(--bg);font-size:13.5px;color:var(--ink-2)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-light{background:#fff;color:var(--ink)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.post{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:14px;border:1px solid var(--line);border-radius:22px;background:var(--card);transition:border-color .15s}
.post.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.post-art{aspect-ratio:1;border-radius:16px;background:radial-gradient(110% 80% at 50% 100%,var(--tone),#FBFAF7 72%);display:grid;place-items:end center;overflow:hidden}
.post-art img{width:92%;height:auto}
.post-body{display:grid;gap:6px;align-content:start;min-width:0}
.post-meta{font-size:12.5px;color:var(--ink-3)}
.post-offer{font:700 17px/1.35 var(--kr);letter-spacing:-.02em}
.post-hide{font-size:12.5px;color:var(--ink-2)}
.post-facts{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.post-facts li{padding:3px 9px;border-radius:999px;background:var(--bg);font-size:12px;color:var(--ink-2)}
.post-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;font-size:13px;color:var(--ink-2)}
.seoul{position:relative;width:100%;aspect-ratio:1.15;max-height:520px;border-radius:24px;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,#FBFAF7,#EDE9E0)}
.seoul canvas{display:block;width:100%!important;height:100%!important;cursor:pointer}
.map-hint{margin-top:-10px}
.seoul{touch-action:none}
.map-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.map-tag{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:0;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(17,18,20,.12);font:600 11.5px/1.2 var(--kr);color:var(--ink);white-space:nowrap;pointer-events:auto;cursor:pointer;transition:background .15s}
.map-tag b{font-weight:700}.map-tag i{font-style:normal;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--red);color:#fff;font:700 11px/1.4 var(--wm);text-align:center}
.map-tag[hidden]{display:none}.map-tag.far{padding:3px 4px 3px 9px}.map-tag.on{background:var(--ink);color:#fff}
.map-tag.dong{padding:2px 7px;font-size:10.5px;background:rgba(255,253,248,.86);box-shadow:0 1px 4px rgba(17,18,20,.1)}.map-tag.dong i{font-size:10px;min-width:16px;padding:0 5px}.map-tag.dong.me{outline:2px solid var(--red);outline-offset:-1px}
.map-ctl{position:absolute;right:10px;top:10px;z-index:2;display:grid;gap:6px}
.map-ctl button{width:38px;height:38px;border:0;border-radius:12px;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(17,18,20,.15);font:700 18px/1 var(--wm);color:var(--ink);cursor:pointer}
.cat-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:-6px}.cat-chips::-webkit-scrollbar{display:none}
.cat-chips .chip{flex:none;display:inline-flex;align-items:center;gap:6px}.cat-chips .chip img{width:22px;height:22px;object-fit:contain}
.sheet{position:fixed;inset:auto 0 0 0;z-index:55;display:grid;padding:0 max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));transform:translateY(105%);transition:transform .28s var(--ease)}
.sheet.on{transform:none}
.sheet-in{position:relative;max-width:560px;width:100%;margin:0 auto;padding:14px 12px 12px;border-radius:24px 24px 20px 20px;background:var(--card);box-shadow:0 -10px 40px rgba(17,18,20,.25)}
.sheet-in::before{content:"";display:block;width:40px;height:4px;margin:0 auto 10px;border-radius:9px;background:var(--line)}
.sheet-x{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;border-radius:50%;background:var(--bg);font-size:20px;cursor:pointer}
.sheet .post{border:0;padding:4px}
.gu-chips .chip b{font-weight:700;color:var(--red)}.gu-chips .chip[aria-pressed="true"] b{color:#fff}
.mypost{display:grid;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.empty{padding:28px 16px;border:1px dashed var(--line);border-radius:20px;text-align:center;color:var(--ink-3);font-size:14px}
.appls{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.appl{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:18px;background:var(--card);animation:in .45s var(--ease)}
.appl img{width:52px;height:52px;border-radius:14px;background:var(--bg);object-fit:contain}
.appl b{display:block;font-size:15px}.appl small{font-size:12.5px;color:var(--ink-2)}
.appl.wait{display:block;text-align:center;color:var(--ink-3);font-size:13.5px;border-style:dashed}
.result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px;background:var(--ink);color:#fff;font-weight:600}
.result .tag{background:#2A2B31;color:#B9BAC0}
/* the match moment */
.match{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));background:rgba(12,12,14,.0);transition:background .35s;overflow-y:auto}
.match.on{background:rgba(12,12,14,.94)}
.match-in{display:grid;justify-items:center;gap:16px;width:min(460px,100%);color:#fff;text-align:center;opacity:0;transition:opacity .3s}
.match.on .match-in{opacity:1}
.match-k{font:800 13px/1 var(--wm);letter-spacing:.08em}.match-k .logo-in{font-size:14px}
.match-cards{position:relative;display:flex;justify-content:center;gap:10px;width:100%}
.mcard{display:grid;gap:6px;width:46%;padding:10px 10px 14px;border-radius:20px;background:#fff;color:var(--ink);text-align:left}
.mcard:first-child{animation:flyL .7s var(--ease) both}.mcard:last-child{animation:flyR .7s var(--ease) both}
@keyframes flyL{0%{transform:translateX(-60vw) rotate(-14deg)}70%{transform:translateX(6px) rotate(-4deg)}100%{transform:rotate(-4deg)}}
@keyframes flyR{0%{transform:translateX(60vw) rotate(14deg)}70%{transform:translateX(-6px) rotate(4deg)}100%{transform:rotate(4deg)}}
.mcard-art{aspect-ratio:1;border-radius:14px;background:radial-gradient(110% 80% at 50% 100%,var(--tone),#FBFAF7 72%);display:grid;place-items:end center;overflow:hidden}
.mcard-art img{width:90%;height:auto}
.mcard b{font:800 15px/1.25 var(--kr);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mcard small{font-size:11.5px;color:var(--ink-2)}
.match-seal{position:absolute;left:50%;top:38%;z-index:2;display:grid;place-items:center;min-width:72px;padding:12px 10px;border-radius:10px;background:#C8321F;color:#FFF4EC;font:800 22px/1 var(--kr);box-shadow:inset 0 0 0 3px #C8321F,inset 0 0 0 5px #FFF4EC;transform:translate(-50%,-50%) rotate(-8deg);animation:seal .45s .65s var(--ease) both}
@keyframes seal{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(2.4)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
.match-h{font:800 clamp(30px,8vw,44px)/1.1 var(--kr);letter-spacing:-.04em;animation:in .5s .9s var(--ease) both}
:lang(en) .match-h{font-family:var(--wm)}
.match-who{font-size:16px;font-weight:600;animation:in .5s 1s var(--ease) both}
.match-note{max-width:34ch;font-size:14px;color:#B9BAC0;animation:in .5s 1.1s var(--ease) both}
@media (max-width:760px){
  .who{gap:10px}.who-card{min-height:300px;padding:16px;border-radius:22px}.who-card .en{font-size:22px}.who-card .ko{font-size:13px}
  .picker{grid-template-columns:1fr}.stage{min-height:320px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tile{padding:8px 8px 10px;border-radius:16px}.tile b{font-size:10.5px}.tile small{font-size:11.5px}:lang(ko) .tile b{font-size:13px}
  .detail .en{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.nudge{display:grid;gap:8px;text-align:left;margin:0 0 18px;padding:14px 16px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink)}
.nudge-h{margin:0;font-weight:700;font-size:15px;color:var(--ink)}
.nudge-t{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.nudge-row{display:flex;gap:8px;align-items:center}
.nudge-row .in{flex:1;min-width:0}
.nudge .err:empty{display:none}

/* Logo opening: existing Archivo / Instrument Serif identity, no media download. */
.brand-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);animation:brand-intro-out .3s ease 2.65s both;cursor:pointer}
.brand-intro-mark{position:relative;display:flex;align-items:baseline;gap:clamp(10px,2vw,24px);padding:0 0 22px;max-width:calc(100vw - 48px);color:var(--ink)}
.brand-intro-word{font:800 clamp(30px,7vw,94px)/1 var(--wm);font-stretch:112%;letter-spacing:.02em;animation:brand-word-in .65s var(--ease) both}
.brand-intro-seoul{font:italic 400 clamp(29px,6.2vw,82px)/1 var(--it);color:var(--red);white-space:nowrap;animation:brand-seoul-in .6s var(--ease) .28s both}
.brand-intro-rule{position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--line);transform-origin:left;animation:brand-rule-in .7s var(--ease) .35s both}
.brand-intro-rule::after{content:'';position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--red)}
.brand-intro-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));min-height:44px;border:0;background:transparent;padding:10px 4px;color:var(--ink-2);font:500 13px/1 var(--kr);cursor:pointer}
@keyframes brand-word-in{from{opacity:0;transform:translateY(12px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes brand-seoul-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes brand-rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes brand-intro-out{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(max-width:480px){.brand-intro-mark{flex-direction:column;align-items:center;gap:14px;padding-bottom:24px}.brand-intro-word{font-size:clamp(30px,10vw,44px)}.brand-intro-seoul{font-size:clamp(29px,9vw,40px)}}
@media(prefers-reduced-motion:reduce){.brand-intro{display:none;animation:none}.brand-intro *{animation:none}}

/* Nomad home and persistent account/role access. */
#next-nav{margin-left:auto;display:flex;align-items:center;gap:16px}
.top .lang{margin-left:0}
.nav-link{border:0;background:none;padding:10px 0;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.nav-link:hover{text-decoration:underline;text-underline-offset:5px}
.home-copy{display:grid;gap:20px}
.home-tag{font:650 24px/1.4 var(--wm);letter-spacing:-.025em;color:var(--ink)}
.home-sub{font-size:16px;color:var(--ink-2)}
:lang(ko) .home .h1 em{font:inherit;color:var(--red)}
.auth-dialog{width:min(440px,calc(100% - 32px));max-height:85dvh;overflow:auto;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink)}
.auth-dialog::backdrop{background:rgba(0,0,0,.4)}
.auth-dialog .sub{font-size:14px;margin:16px 0 24px}
.auth-dialog form{display:grid;gap:16px}
.auth-more{display:block;margin-top:20px;color:var(--ink-2);font-size:13px}
@media(max-width:560px){.top{flex-wrap:wrap;gap:10px}.top .logo{margin-right:auto}.top .lang{order:1}#next-nav{order:2;flex-basis:100%;justify-content:flex-end;border-top:1px solid var(--line);gap:20px}.home-copy{gap:16px}.home-sub{font-size:14px}.home-tag{font-size:20px}}

:lang(ko) .home .h1{font-size:clamp(34px,5.6vw,70px);font-weight:750;line-height:1.17;letter-spacing:-.045em;text-wrap:initial}
