/* 작업실 입구 — 대문은 수노 첫 화면 구성(어두운 배경 · 큰 헤드라인 · 프롬프트 상자 · 카드 갤러리)을 기존 색으로 */
@font-face{font-family:'Paperlogy';font-weight:400;font-display:swap;src:url(fonts/Paperlogy-4Regular.woff2) format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:700;font-display:swap;src:url(fonts/Paperlogy-7Bold.woff2) format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:800;font-display:swap;src:url(fonts/Paperlogy-8ExtraBold.woff2) format('woff2')}

:root{
  --paper:#f5f2e9; --surface:#fffdf8; --band:#ebe6d8; --ink:#282621; --ink-2:#5f5b50; --ink-3:#857f70;
  --line:rgba(40,38,33,.13); --pop-deep:#0f7d70; --pop-ink:#fff; --pop-soft:#e2f0ec; --warn:#a2401f; --warn-soft:#f8e6dc;
  --font:'Paperlogy','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  /* 어두운 대문용 — 기존 잉크·종이·청록을 그대로 쓴 변주 */
  --night:#14130f; --night-2:#1d1b16; --night-3:#282621; --nline:rgba(245,242,233,.12); --ntext:#f5f2e9; --ntext-2:rgba(245,242,233,.68); --ntext-3:rgba(245,242,233,.46);
  --pop:#1aa493; --gold:#e3b96a; --rust:#b8542c;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--paper);color:var(--ink);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:inherit}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--pop-deep);outline-offset:2px;border-radius:8px}

/* 상단 — 처리방침 쪽에서 쓰는 앱 셸 탭 막대 */
.tabbar{display:flex;align-items:stretch;padding:0 20px;background:var(--band);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none}
.tabbar .brand{padding:0 18px 0 0;margin:10px 14px 10px 0;border-right:1px solid var(--line)}
.brand .mk{width:24px;height:24px;border-radius:7px;background:var(--ink);color:#f5f2e9;display:grid;place-items:center;flex-shrink:0}
.brand .mk svg{width:14px;height:14px}
.brand .name{font-size:15px;font-weight:800;letter-spacing:-.03em}
.tabs{display:flex;align-items:flex-end;gap:4px;min-width:0;padding-top:8px}
.tab{display:flex;align-items:center;padding:9px 16px 10px;border-radius:12px 12px 0 0;font-size:14px;font-weight:700;color:var(--ink-3);white-space:nowrap;position:relative;top:1px;border:1px solid transparent;border-bottom:0}
.tab.on{background:var(--paper);color:var(--ink);font-weight:800;border-color:var(--line)}
@media(max-width:560px){.tabbar{padding:0 10px}.tabbar .brand{padding-right:10px;margin-right:8px}.tabbar .brand .name{display:none}.tab{padding:8px 11px 9px;font-size:13px}}

/* 처리방침 문서 */
.page{max-width:760px;margin:0 auto;padding:36px 16px 56px}
.eb{display:inline-block;font-size:13px;font-weight:800;color:var(--pop-deep);background:var(--pop-soft);padding:3px 11px;border-radius:999px}
.page h1{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1.22;margin-top:10px;word-break:keep-all}
.page h1 em{font-style:normal;color:var(--pop-deep)}
.page .lede{margin-top:12px;color:var(--ink-2);font-size:15px;word-break:keep-all}
.doc h2{font-size:18px;margin:28px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.doc p,.doc li{color:var(--ink-2);font-size:15px}
.doc ul{padding-left:20px}
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:8px;border-bottom:1px solid var(--line)}
.doc .draft{background:var(--warn-soft);color:var(--warn);padding:12px 14px;border-radius:10px;font-weight:700;margin-bottom:20px}

/* 입구 카드 (밝은 종이 카드 — 어두운 대문 위에서도 그대로) */
.box{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px 22px;color:var(--ink)}
.box .st{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.box .st .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:14px;flex-shrink:0}
.box p{margin-top:10px;color:var(--ink-2);font-size:15px;word-break:keep-all}
.box .row{margin-top:18px;display:flex;flex-direction:column;gap:10px;max-width:420px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);background:var(--paper);border-radius:12px;padding:12px}
.agree input{width:20px;height:20px;margin-top:2px;accent-color:var(--pop-deep);flex-shrink:0}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:800;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.main{background:var(--pop-deep);border-color:var(--pop-deep);color:var(--pop-ink)}
.btn.google{background:#fff;color:#1f1f1f;border-color:#c7c7c7}
.btn.google svg{width:20px;height:20px}
.field{width:100%;min-height:52px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);font-size:20px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.field:focus{outline:2px solid var(--pop-deep);outline-offset:1px}
.msg{margin-top:14px;font-size:14px;padding:10px 12px;border-radius:10px;max-width:420px}
.msg.err{background:var(--warn-soft);color:var(--warn)}
.msg.ok{background:var(--pop-soft);color:var(--pop-deep)}
.small{margin-top:16px;font-size:13px;color:var(--ink-3);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.small button{background:none;border:0;text-decoration:underline;cursor:pointer;color:inherit;font-size:13px}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--pop-deep);animation:sp .9s linear infinite;margin-top:12px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}

/* 앱 화면 */
.appframe{position:fixed;inset:0;width:100%;height:100%;border:0;background:var(--paper)}

/* ═══════════ 대문 — 첫 장면만 어둡고, 그 아래는 작업실과 같은 종이색 ═══════════ */
.wrap{max-width:1120px;margin:0 auto;padding:72px 24px}
.h1b{font-size:clamp(32px,4.6vw,54px);font-weight:800;letter-spacing:-.045em;line-height:1.1;word-break:keep-all;color:var(--ink)}
.sub{margin-top:18px;color:var(--ink-2);font-size:clamp(15px,1.5vw,18px);line-height:1.7;max-width:680px;word-break:keep-all}
.note{margin-top:14px;color:var(--ink-2);font-size:15px;word-break:keep-all;max-width:640px}

/* 상단 메뉴 — 잉크색, 첫 장면 위에 얹힘 */
.nav{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:28px;padding:14px 28px;background:rgba(20,19,15,.72);color:var(--ntext);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--nline)}
.nav .brand .mk{background:var(--ntext);color:var(--night)}
.nav .brand .name{font-size:15px;letter-spacing:-.03em}
.menu{display:flex;gap:22px;font-size:14.5px;font-weight:700;color:var(--ntext-2)}
.menu a{text-decoration:none}
.menu a:hover{color:var(--ntext)}
.navr{margin-left:auto;display:flex;gap:8px}
.pill{padding:9px 18px;border-radius:999px;background:var(--ntext);color:var(--night);font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .2s,background .2s}
.pill:hover{transform:translateY(-1px)}
.pill.ghost{background:transparent;color:var(--ntext);border:1px solid var(--nline)}

/* 첫 장면 — 고른 작업실에 따라 빛 색이 바뀜(청록 · 황토 · 보라) */
.hero{--g1:rgba(26,164,147,.55);--g2:rgba(227,185,106,.5);--g3:rgba(184,84,44,.45);
  position:relative;overflow:hidden;min-height:0;display:grid;place-items:center;padding:88px 24px 72px;text-align:center;color:var(--ntext);
  background:
    radial-gradient(760px 520px at 50% 38%,var(--g1) 0,transparent 65%),
    radial-gradient(640px 480px at 14% 18%,var(--g2) 0,transparent 62%),
    radial-gradient(620px 520px at 88% 24%,var(--g3) 0,transparent 62%),
    linear-gradient(180deg,#1c1a14 0,#14130f 100%);
  transition:--g1 .8s,--g2 .8s,--g3 .8s}
.hero:has(.hero-c[data-room="school"]){--g1:rgba(227,185,106,.5);--g2:rgba(184,84,44,.5);--g3:rgba(26,164,147,.35)}
.hero:has(.hero-c[data-room="pl"]){--g1:rgba(106,79,143,.6);--g2:rgba(26,164,147,.4);--g3:rgba(201,182,232,.35)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* 아래쪽은 종이색으로 녹아들게 */
.hero::after{display:none}
.hero-c{position:relative;z-index:2;max-width:940px;width:100%}
.hero-c::before{content:"";position:absolute;inset:-60px -120px;background:radial-gradient(60% 70% at 50% 50%,rgba(20,19,15,.55),transparent 70%);z-index:-1;pointer-events:none}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .eb{animation:rise .7s ease both}
.hero .prompt{animation:rise .8s .12s ease both}
.side{animation:rise 1s .25s ease both}
.hero .eb{background:rgba(245,242,233,.08);color:var(--ntext-2);border:1px solid var(--nline);font-size:13px;font-weight:700;white-space:normal;line-height:1.5;max-width:92vw;padding:6px 16px;backdrop-filter:blur(6px)}
.hero .eb b{color:var(--ntext);font-weight:800}
.kicker{display:none;margin-top:26px;font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--ntext-3)}
.hero h1{margin:26px 0 22px;text-align:center;font-size:clamp(28px,4.4vw,50px);font-weight:800;letter-spacing:-.05em;line-height:1.14;word-break:keep-all}
.hero h1 .fix{display:flex;align-items:flex-end;justify-content:center;color:var(--ntext-2);font-size:.72em;font-weight:700;letter-spacing:-.03em}
/* 타이핑 줄: 높이는 스크립트가 가장 긴 문장 기준으로 잡고, 짧은 문장은 그 안 가운데에 */
.hero h1 .dynline{display:flex;align-items:center;justify-content:center;margin-top:4px}
.hero h1 .dyn{color:var(--ntext)}
.caret{display:inline-block;width:3px;height:.9em;margin-left:5px;vertical-align:-.08em;background:var(--ntext);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero .lede{margin:22px auto 0;color:var(--ntext-2);font-size:clamp(15px,1.5vw,18px);line-height:1.7;max-width:640px;word-break:keep-all;min-height:3.4em}

/* 프롬프트 상자 — 세 작업실 고르기 */
.prompt{margin:22px auto 0;max-width:760px;text-align:left;background:rgba(20,19,15,.55);border:1px solid rgba(245,242,233,.16);border-radius:22px;padding:16px 18px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.prompt .ph{font-size:16px;font-weight:700;color:var(--ntext-2)}
.prompt .pr{display:flex;align-items:center;gap:12px}
.picks{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-width:0}
.chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid transparent;background:rgba(245,242,233,.08);color:var(--ntext-2);font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.chip:hover{background:rgba(245,242,233,.14);color:var(--ntext)}
.chip.on{background:rgba(245,242,233,.16);color:var(--ntext);border-color:rgba(245,242,233,.22)}
.chip i{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.chip i.c{background:linear-gradient(135deg,var(--pop),#0b4f47)}
.chip i.s{background:linear-gradient(135deg,var(--gold),#8a6a2c)}
.chip i.p{background:linear-gradient(135deg,#c9b6e8,#6a4f8f)}
/* 선택된 칩 안에서 왼쪽→오른쪽으로 차는 막대 = 다음 작업실로 넘어갈 때까지 */
.chip .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ntext);transform-origin:left;transform:scaleX(0);opacity:0}
.chip.on .bar{opacity:.9;transition:transform .6s ease}

@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.go{transition:transform .25s,box-shadow .25s}
.go:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(26,164,147,.9)}
.go{margin:0 auto;display:flex;width:100%;max-width:360px;justify-content:center;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;color:#fff;font-weight:800;font-size:15px;white-space:nowrap;text-decoration:none;background:linear-gradient(100deg,var(--pop-deep) 0,var(--pop) 45%,var(--gold) 120%);box-shadow:0 10px 30px -10px rgba(26,164,147,.8);flex-shrink:0}
.go svg{width:16px;height:16px}
.tiny{margin:16px auto 0;font-size:13px;color:var(--ntext-3);max-width:560px;line-height:1.6;word-break:keep-all}
/* 상자 아랫줄 — 여기서 나오는 것 */
.outs{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:12px;border-top:1px dashed rgba(245,242,233,.16);font-size:13px;color:var(--ntext-3)}
.outs .k{font-weight:800;color:var(--ntext-2);margin-right:4px}
.outs .o{padding:3px 9px;border-radius:999px;background:rgba(245,242,233,.12);color:var(--ntext);font-weight:700}
.outs .arr{color:var(--ntext-3);margin:0 2px}
.outs .to{color:var(--ntext-2)}
/* 한 발 더 — 비교 */
.step-sec{padding-top:64px;padding-bottom:80px}
.hl{background:linear-gradient(transparent 30%,rgba(227,185,106,.75) 30%,rgba(227,185,106,.75) 94%,transparent 94%);color:inherit;padding:0 .08em;margin:0 -.08em;border-radius:3px}
.vs{margin-top:32px;display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:stretch}
.vs article{border-radius:22px;padding:26px 24px}
.vs-a{background:var(--band);border:1px dashed var(--line);color:var(--ink-2)}
.vs-b{background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(40,38,33,.4)}
.vs-k{display:inline-block;font-size:15px;font-weight:800;padding:6px 16px;border-radius:999px;background:rgba(40,38,33,.1);color:var(--ink-2)}
.vs-b{border:2px solid var(--pop-deep);box-shadow:0 30px 60px -30px rgba(15,125,112,.45)}
.vs-b .vs-k{background:var(--pop-deep);color:#fff}
.keys{list-style:none;margin-top:18px;display:grid;gap:10px}
.keys li{font-size:clamp(20px,2.3vw,27px);font-weight:800;letter-spacing:-.035em;color:var(--ink-2);line-height:1.3;word-break:keep-all}
.keys b{color:var(--pop-deep);font-weight:800;background:linear-gradient(transparent 60%,var(--pop-soft) 0)}
.keys-c{margin-top:18px;font-size:16px;font-weight:700;color:var(--ink);word-break:keep-all;line-height:1.6}
.ex-k{margin-top:20px;font-size:12.5px;font-weight:800;color:var(--ink-3);letter-spacing:.02em}
.vs-q{margin-top:16px;font-size:clamp(20px,2.3vw,27px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.vs-a ul{margin-top:14px;padding-left:18px;font-size:15px;line-height:1.7}
.flow{list-style:none;margin-top:8px;display:grid;gap:8px;counter-reset:f}
.flow li{display:grid;grid-template-columns:26px 112px 1fr;gap:10px;align-items:baseline;padding:10px 12px;border-radius:12px;background:var(--paper);font-size:14.5px}
.flow li::before{counter-increment:f;content:counter(f);width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12px;font-weight:800;align-self:center}
.flow b{font-weight:800;color:var(--ink)}
.flow span{color:var(--ink-2);word-break:keep-all}
.vs-out{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--ink-3)}
.vs-out span{font-weight:800;color:var(--ink-2);margin-right:4px}
.vs-out b{padding:4px 10px;border-radius:999px;background:var(--pop-deep);color:#fff;font-weight:800}
.vs-out em{font-style:normal;color:var(--ink-2)}

/* 양옆 기울어진 노래 카드 */
.side{position:absolute;top:50%;width:280px;z-index:1;transform-origin:center;opacity:.9}
.side.l{left:-30px;transform:translateY(-46%) rotate(-10deg)}
.side.r{right:-30px;transform:translateY(-40%) rotate(10deg)}
@media (min-width:1500px){.side{width:320px}.side.l{left:4vw}.side.r{right:4vw}}
.side .meta{margin-top:12px;padding:0 6px;text-align:left}
.side b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.side small{display:block;font-size:13px;color:var(--ntext-3)}

/* 카드 그림 — 그라데이션으로 만든 앨범 아트 */
.art{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);isolation:isolate;background-size:cover;background-position:center}
.art::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;background-image:inherit;filter:contrast(1.3)}
.art::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 30%,rgba(255,255,255,.18),transparent 70%),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45))}
.art .play{position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);z-index:2}
.art .play::before{content:"";position:absolute;left:11px;top:8px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.art .tag{position:absolute;left:12px;bottom:12px;z-index:2;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;background:rgba(20,19,15,.55);color:var(--ntext);backdrop-filter:blur(6px);white-space:nowrap}
.a1{background:radial-gradient(60% 50% at 70% 20%,#8fd9cc,transparent 60%),radial-gradient(70% 60% at 20% 90%,#0f7d70,transparent 65%),linear-gradient(160deg,#1aa493,#0b4f47)}
.a2{background:radial-gradient(55% 45% at 30% 20%,#ffd98a,transparent 60%),radial-gradient(60% 60% at 80% 85%,#b8542c,transparent 65%),linear-gradient(160deg,#e3b96a,#7a3d1c)}
.a3{background:radial-gradient(60% 45% at 25% 25%,#f0e3c8,transparent 60%),radial-gradient(60% 60% at 85% 80%,#5f5b50,transparent 65%),linear-gradient(160deg,#857f70,#282621)}
.a4{background:radial-gradient(55% 50% at 70% 20%,#f8e6dc,transparent 60%),radial-gradient(60% 60% at 20% 90%,#a2401f,transparent 65%),linear-gradient(160deg,#d66b3f,#5a2110)}
.a5{background:radial-gradient(55% 50% at 30% 25%,#c9b6e8,transparent 60%),radial-gradient(60% 60% at 80% 85%,#3b2a55,transparent 65%),linear-gradient(160deg,#6a4f8f,#1f1730)}
.a6{background:radial-gradient(55% 50% at 65% 20%,#bfe6d9,transparent 60%),radial-gradient(60% 60% at 20% 85%,#8a6a2c,transparent 65%),linear-gradient(160deg,#0f7d70,#8a6a2c)}
/* 힉스필드로 만든 표지 — 그라데이션(.a1~.a6)은 이미지가 안 뜰 때 대비 */
.art[style*="covers/"]{background-size:cover;background-position:center;background-repeat:no-repeat}
.art[style*="covers/"]::before{display:none}
.art[style*="covers/"]::after{background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35))}

/* 노래 갤러리 (종이색) */
.gallery{padding:72px 0 56px;text-align:center;background:var(--night);color:var(--ntext)}
.gallery .h1b{color:var(--ntext)}
.gallery .wrap{padding-top:0;padding-bottom:0}
.gallery .sub{margin-left:auto;margin-right:auto;max-width:720px}
.rail{--gut:max(24px,calc((100vw - 1120px)/2 + 24px));display:flex;gap:22px;padding:44px var(--gut) 24px;scroll-padding-inline:var(--gut);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;text-align:left}
.rail::-webkit-scrollbar{display:none}
.rail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.card{flex:0 0 230px;scroll-snap-align:start}
.card .art{border-radius:14px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card:hover .art{transform:translateY(-6px) scale(1.015);box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.card b{display:block;margin-top:14px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ntext);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card small{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:13px;color:var(--ntext-2)}
.av{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--pop),#0b4f47);flex-shrink:0}
.av.alt{background:linear-gradient(135deg,var(--gold),#8a6a2c)}
.av.pl{background:linear-gradient(135deg,#c9b6e8,#6a4f8f)}

/* 세 작업실 (앱과 같은 띠색 위 종이 카드) */
.rooms-sec{background:var(--paper);max-width:none}
.rooms-sec>*,.how-sec>*,.openwrap>*{max-width:1120px;margin-left:auto;margin-right:auto}
.how-sec{background:var(--band);max-width:none;border-top:1px solid var(--line)}
.rooms{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.room{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px 26px;border-top:4px solid var(--pop-deep)}
.room.alt{border-top-color:var(--gold)}.room.pl{border-top-color:#6a4f8f}
/* 작업실 이름이 제목, 설명은 그 아래 */
.room-k{display:flex;align-items:center;gap:10px;font-size:clamp(22px,2.2vw,26px);font-weight:800;letter-spacing:-.04em;color:var(--pop-deep);line-height:1.2;word-break:keep-all}
.room-k::before{content:"";width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,var(--pop),#0b4f47);flex-shrink:0}
.room.alt .room-k{color:#8a6a2c}.room.alt .room-k::before{background:linear-gradient(135deg,var(--gold),#8a6a2c)}
.room.pl .room-k{color:#6a4f8f}.room.pl .room-k::before{background:linear-gradient(135deg,#c9b6e8,#6a4f8f)}
.room h3{margin-top:8px;font-size:17px;font-weight:700;letter-spacing:-.02em;word-break:keep-all;line-height:1.35;color:var(--ink)}
.room p{margin-top:10px;color:var(--ink-2);font-size:15.5px;line-height:1.65;word-break:keep-all}
/* 카드 오른쪽 위에 큰 숫자 — 워터마크처럼, 부제의 숫자는 색만 */
.room{position:relative;overflow:hidden;--rc:var(--pop-deep);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.room:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(40,38,33,.45)}
.room.alt{--rc:#b08a3c}.room.pl{--rc:#6a4f8f}
.big{position:absolute;right:10px;bottom:-34px;font-size:140px;font-weight:800;letter-spacing:-.08em;line-height:1;color:var(--rc);opacity:.13;pointer-events:none;user-select:none}
.big i{font-style:normal;font-size:.5em;vertical-align:.55em;letter-spacing:0;margin-left:.02em}
.room>*:not(.big){position:relative}
.room h3{display:block;margin-top:14px;font-size:19px;font-weight:800;letter-spacing:-.03em;word-break:keep-all;line-height:1.35;color:var(--ink)}
.room h3 b{color:var(--rc);font-weight:800}
.chips{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2)}

/* 만드는 순서 — 크고 쉽게 */
.ease{margin-top:14px;font-size:clamp(17px,1.8vw,21px);color:var(--ink-2);font-weight:700;word-break:keep-all}
.ease b{color:var(--pop-deep);font-weight:800}
.steps{list-style:none;margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.steps li{transition:transform .35s cubic-bezier(.2,.8,.2,1);position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px 26px 28px;display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center}
.steps li+li::before{content:"→";position:absolute;left:-19px;top:40px;width:20px;text-align:center;font-size:22px;font-weight:800;color:var(--ink-3)}
.steps .sn{grid-row:1;width:48px;height:48px;border-radius:50%;background:var(--pop-deep);color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px}
.steps b{grid-row:1;grid-column:2;display:block;margin:0;font-size:clamp(24px,2.4vw,30px);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.steps li:hover{transform:translateY(-3px)}
.steps li.opt{border-style:dashed}
.steps li.opt .sn{background:transparent;border:2px dashed var(--pop-deep);color:var(--pop-deep)}
.steps b em{display:inline-block;font-style:normal;font-size:12.5px;font-weight:800;color:var(--pop-deep);background:var(--pop-soft);padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:6px;letter-spacing:-.01em}
.steps p{grid-column:1/-1;margin-top:14px;font-size:clamp(16px,1.5vw,18px);line-height:1.55;color:var(--ink-2);word-break:keep-all}
.facts{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px 22px 24px;position:relative;overflow:hidden}
.fact::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:var(--pop-soft);opacity:.7;z-index:0}
.fact>*{position:relative;z-index:1}
.fact .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--pop-deep);color:#fff}
.fact .ic svg{width:24px;height:24px}
.fact b{display:block;margin-top:16px;font-size:clamp(20px,1.9vw,23px);font-weight:800;letter-spacing:-.035em;line-height:1.15}
.fact b em{font-style:normal;font-size:1.5em;color:var(--pop-deep);letter-spacing:-.05em;line-height:1;margin-right:2px}
.fact span:not(.ic){display:block;margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2);word-break:keep-all}

/* 열기 */
.openwrap{max-width:none;padding-top:88px;padding-bottom:104px;background:radial-gradient(700px 400px at 50% 100%,rgba(15,125,112,.35),transparent 65%),var(--night);color:var(--ntext)}
.openwrap .h1b{color:var(--ntext)}
.openwrap .note{color:var(--ntext-2)}
.openwrap .box{max-width:560px;margin-top:28px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.foot{max-width:none;margin:0;padding:24px 24px 44px;border-top:1px solid var(--nline);font-size:13px;color:var(--ntext-3);background:var(--night);justify-content:center;display:flex;gap:14px;flex-wrap:wrap}

/* 다시 온 사람: 확인 중엔 대문 대신 로딩만 */
.loader{display:none;position:fixed;inset:0;place-items:center;background:var(--paper)}
.returning #gate{visibility:hidden}
.returning .loader{display:grid}

@media (max-width:1180px){.side{width:230px;opacity:.75}.side.l{left:-80px}.side.r{right:-80px}}
@media (max-width:1000px){.rooms{grid-template-columns:1fr 1fr}.rooms .pl{grid-column:1/-1}.menu{display:none}.side{display:none}.hero{min-height:0;padding:64px 20px 100px}}
@media (max-width:860px){
  .rooms,.steps{grid-template-columns:1fr}
  .steps li+li::before{content:"↓";left:50%;top:-22px;transform:translateX(-50%)}
  .facts{grid-template-columns:1fr 1fr}
  .wrap{padding:56px 16px}
  .pc{display:none}
  .prompt .go{max-width:none}
  .card{flex-basis:200px}
  .vs{grid-template-columns:1fr}
  .flow li{grid-template-columns:26px 1fr}
  .flow span{grid-column:2}
}
@media (max-width:560px){
  .nav{padding:12px 16px;gap:12px}
  .nav .brand .name{font-size:14px}
  .pill.ghost{display:none}
  .facts{grid-template-columns:1fr}
  .chip{height:34px;padding:0 11px;font-size:13px}
  .hero h1{font-size:clamp(26px,7.6vw,38px)}
  .hero .lede{min-height:0}
}

section[id]{scroll-margin-top:64px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero .eb,.hero .prompt,.side{animation:none}.caret{animation:none}.card:hover .art{transform:none}}