/* ═══ 라벤더 유리 — 유행 방 세 개의 공통 재질 (2026-09-17 사장님 픽) ═══
   규칙 다섯: ① 첫 화면은 답 ② 라벤더 집 + 흰 유리 카드 ③ 방 하나 = 기능 하나 ④ 목록은 자란다 ⑤ 화면당 도형 하나·강조색 하나·문장 하나 */
body[data-room]{
  --ink:#241C3A; --ink2:#4A4166; --sub:#6F6690; --faint:#9A92B8;
  --free:#2E9E6E; --free-w:#E4F5EC; --no:#D05A7A; --no-w:#FBE9EF;
  --amber:#E0A64A; --amber-w:#FFF3DC; --amber-d:#8A5A00;
  --card:rgba(255,255,255,.74); --line:rgba(255,255,255,.95); --line2:#DCD3FB; --soft:#F3EEFF; --soft2:#E9E2FF; --wash:#EDE6FF;
  --grad:linear-gradient(135deg,#7C5CFF 0%,#A66BEA 55%,#D46BC8 100%);
  --sh-s:0 6px 22px rgba(120,90,255,.08), 0 1px 2px rgba(60,40,120,.04); --sh-m:0 14px 36px rgba(120,90,255,.14); --sh-l:0 24px 60px rgba(120,90,255,.18);
  background:linear-gradient(180deg,#F8F5FF 0%,#F4EFFF 45%,#F7F2FC 100%); color:var(--ink); position:relative;
}
body[data-room]::before{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 40% at 85% 0%, rgba(255,175,215,.34), transparent 60%), radial-gradient(50% 35% at 5% 20%, rgba(170,195,255,.34), transparent 60%), radial-gradient(40% 30% at 70% 80%, rgba(200,230,255,.25), transparent 60%)}
body[data-room] .bar{background:rgba(248,245,255,.82)}
/* 유리 카드 */
.gl{background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--sh-s); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%)}
.gl.lift{transition:transform .2s var(--e), box-shadow .2s} .gl.lift:hover{transform:translateY(-4px); box-shadow:var(--sh-m)}
/* 알약·버튼 — 보라→분홍 */
body[data-room] .btn.pri{background:var(--grad); border-color:transparent; box-shadow:0 8px 20px rgba(140,90,240,.26)}
body[data-room] .btn.pri:hover{background:var(--grad); filter:brightness(1.05); transform:translateY(-1px)}
.pill{display:inline-flex; background:var(--soft); border:1px solid var(--line2); border-radius:999px; padding:3px}
.pill button{font-size:12.5px; font-weight:800; padding:8px 15px; border-radius:999px; color:var(--sub); transition:background .18s, color .18s}
.pill button.on{background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(140,90,240,.25)}
/* 방 머리 */
.rh{padding:clamp(36px,5vw,56px) 0 8px}
.rh .eb{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--pri-d)}
.rh .eb i{width:7px; height:7px; border-radius:50%; background:var(--free); box-shadow:0 0 0 3px var(--free-w)}
.rh h1{margin:12px 0 10px; font-size:clamp(28px,6vw,44px); font-weight:800; letter-spacing:-.055em; line-height:1.1}
.rh h1 mark{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding:0}
.rh p{margin:0; font-size:14.5px; color:var(--ink2); line-height:1.75; max-width:50ch} .rh p b{color:var(--ink)}
.stamp{margin-top:14px; font-size:12px; color:var(--faint); font-weight:700} .stamp b{color:var(--ink2)}
/* 구역 */
.sec2{margin-top:clamp(52px,7vw,84px)}
.sec2 .eb{font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--faint); margin-bottom:6px}
.sec2 .eb.g{color:var(--free)} .sec2 .eb.y{color:var(--amber-d)} .sec2 .eb.p{color:var(--pri-d)}
.sec2 h2{margin:0 0 6px; font-size:clamp(20px,4vw,26px); font-weight:800; letter-spacing:-.04em}
.sec2 .d{font-size:13px; color:var(--sub); margin:0 0 18px; line-height:1.7} .sec2 .d b{color:var(--ink2)}
/* 검색창 */
.srch{display:flex; align-items:center; gap:8px; border:1.5px solid var(--line2); border-radius:999px; padding:0 6px 0 16px}
.srch:focus-within{border-color:var(--pri); box-shadow:0 0 0 4px var(--wash)}
.srch input{flex:1; min-width:0; border:0; outline:0; background:none; font-size:15px; font-weight:700; padding:13px 0; color:var(--ink)}
.srch input::placeholder{color:var(--faint); font-weight:600}
.srch button{flex:0 0 auto; font-size:13px; padding:10px 17px}
/* 이유 칩 */
.why{display:flex; flex-wrap:wrap; gap:5px} .why span{font-size:11px; font-weight:800; padding:4px 9px; border-radius:7px; background:var(--soft); color:var(--sub); white-space:nowrap}
.why span.g{background:var(--free-w); color:var(--free)} .why span.y{background:var(--amber-w); color:var(--amber-d)} .why span.p{background:var(--wash); color:var(--pri-d)} .why span.r{background:var(--no-w); color:var(--no)}
/* 판정 */
.vd{display:inline-block; font-size:12.5px; font-weight:800; padding:7px 13px; border-radius:999px; background:var(--soft); color:var(--sub)}
.vd.g{background:var(--grad); color:#fff} .vd.y{background:var(--amber-w); color:var(--amber-d)} .vd.r{background:var(--no-w); color:var(--no)}
/* 계기판(도형 하나) */
.gauge{position:relative; width:min(100%,380px); margin:0 auto}
.gauge svg{display:block; width:100%; overflow:visible}
.gauge .track{stroke:rgba(92,60,219,.12)} .gauge .arc{stroke:url(#gaugeGrad); filter:drop-shadow(0 0 10px rgba(124,92,255,.45))}
.gauge .needle{stroke:#3B2B7A} .gauge .tick{fill:var(--faint); font-size:11px; font-weight:800}
.gauge .big{position:absolute; left:0; right:0; bottom:-4px; text-align:center; font-size:clamp(44px,10vw,64px); font-weight:800; letter-spacing:-.07em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.gauge .big small{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--faint); -webkit-text-fill-color:var(--faint); margin-top:4px}
/* 말 카드 (답 3장) */
.picks{display:grid; grid-template-columns:repeat(3,1fr); gap:12px} @media (max-width:640px){ .picks{grid-template-columns:1fr} }
.pk{position:relative; padding:18px 18px 16px; text-align:left; color:inherit; min-width:0}
.pk.one{background:linear-gradient(160deg,rgba(124,92,255,.10),transparent 60%), var(--card); border-color:#DDD3FF}
.pk .no{position:absolute; right:14px; top:10px; font-size:32px; font-weight:800; letter-spacing:-.06em; line-height:1; color:rgba(124,92,255,.16)}
.pk .cat{font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--faint)}
.pk .w{display:block; margin-top:5px; font-size:clamp(20px,4vw,24px); font-weight:800; letter-spacing:-.045em; line-height:1.15; padding-right:36px}
.pk .why{margin-top:11px}
.pk .sc{display:inline-flex; align-items:baseline; gap:4px; margin-top:12px; font-size:12px; font-weight:800; color:var(--pri-d)} .pk .sc b{font-size:20px; letter-spacing:-.05em}
.pk .cta{margin-top:10px; font-size:12px; font-weight:800; color:var(--pri-d)}
/* 말 목록 (칩) */
.chips2{display:flex; flex-wrap:wrap; gap:7px}
.chips2 button{font-size:12.5px; font-weight:800; padding:8px 13px; border-radius:999px; background:var(--card); border:1px solid var(--line2); color:var(--ink2); transition:transform .15s, background .15s}
.chips2 button:hover{transform:translateY(-2px); background:#fff} .chips2 button b{color:var(--free); margin-left:5px; font-size:11.5px} .chips2 button b.dn{color:var(--no)} .chips2 button i{font-style:normal; font-size:9.5px; font-weight:800; color:#fff; background:var(--grad); padding:2px 6px; border-radius:5px; margin-left:6px; vertical-align:1px}
/* 시트 (말 한 장) */
.tcov{position:fixed; inset:0; z-index:120; display:none; background:rgba(36,28,58,.38); backdrop-filter:blur(4px); align-items:flex-end; justify-content:center; padding:0}
.tcov.on{display:flex}
@media (min-width:640px){ .tcov{align-items:center; padding:20px} }
.tcs{width:min(100%,680px); max-height:92vh; overflow:auto; background:#FBF9FF; border-radius:26px 26px 0 0; box-shadow:var(--sh-l); position:relative; animation:stuIn .24s var(--e)}
@media (min-width:640px){ .tcs{border-radius:26px} }
.tcs .x{position:absolute; right:12px; top:12px; z-index:3; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--ink); font-size:14px; box-shadow:var(--sh-s)}
.tcs .hd{padding:24px 22px 0} .tcs .hd .cat{font-size:10.5px; font-weight:800; letter-spacing:.08em; color:var(--faint)}
.tcs .hd h3{margin:6px 0 0; font-size:28px; font-weight:800; letter-spacing:-.05em; line-height:1.15}
.tcs .top{display:grid; grid-template-columns:1fr 1.2fr; gap:14px; align-items:center; padding:14px 22px 0}
@media (max-width:480px){ .tcs .top{grid-template-columns:1fr} }
.tcs .rad{width:min(100%,220px); margin:0 auto}
.tcs .score{display:flex; align-items:baseline; gap:6px} .tcs .score b{font-size:54px; font-weight:800; letter-spacing:-.07em; line-height:.9; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} .tcs .score span{font-size:12px; font-weight:800; color:var(--faint)}
.tcs .axes{display:grid; gap:8px; margin-top:12px} .tcs .axes div{display:grid; grid-template-columns:1fr 64px; grid-template-areas:'t v' 'b b'; gap:3px 8px; align-items:center; font-size:12.5px; font-weight:700; color:var(--ink2)}
.tcs .axes div > span:first-child{grid-area:t} .tcs .axes .bb{grid-area:b} .tcs .axes .v{grid-area:v}
.tcs .axes .bb{height:8px; border-radius:4px; background:var(--soft); overflow:hidden} .tcs .axes .bb i{display:block; height:100%; width:var(--w); border-radius:4px; background:var(--grad)} .tcs .axes .v{text-align:right; font-weight:800; font-variant-numeric:tabular-nums; color:var(--sub)}
.tcs .blk{padding:20px 22px 0} .tcs .blk .h{font-size:11px; font-weight:800; letter-spacing:.07em; color:var(--faint); margin-bottom:9px; display:flex; justify-content:space-between; gap:8px} .tcs .blk .h span{font-weight:700; letter-spacing:0; color:var(--sub)}
.tcs .chart{background:var(--soft); border-radius:14px; padding:12px 10px 6px}
.tcs .lbl{display:flex; justify-content:space-between; font-size:10px; font-weight:700; color:var(--faint); padding:4px 4px 0}
.mticks{position:relative; height:26px; margin-top:4px} .mticks span{position:absolute; top:0; transform:translateX(-50%); font-size:9.5px; font-weight:800; color:var(--faint); white-space:nowrap; line-height:1.2; text-align:center} .mticks span small{display:block; font-size:8px; color:var(--pri-d)}
@media (max-width:480px){ .mticks span:nth-child(even){display:none} }
.tcs .qs{display:grid; gap:7px} .tcs .qs a{display:block; background:#fff; border:1px solid var(--line2); border-radius:13px; padding:11px 13px; font-size:13.5px; font-weight:700; line-height:1.5; color:var(--ink)} .tcs .qs a:hover{border-color:var(--pri-l)} .tcs .qs a small{display:block; font-size:11.5px; color:var(--faint); font-weight:600; margin-top:3px; line-height:1.5}
.tcs .vids{display:grid; grid-template-columns:1fr 1fr; gap:8px} .tcs .vids a{display:block; background:#fff; border:1px solid var(--line2); border-radius:13px; overflow:hidden; color:inherit} .tcs .vids img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block} .tcs .vids .t{font-size:12px; font-weight:700; padding:8px 10px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .tcs .vids .m{font-size:10.5px; color:var(--free); font-weight:800; padding:0 10px 9px}
.tcs .cta{display:flex; gap:8px; flex-wrap:wrap; padding:22px 22px 24px} .tcs .cta .btn{font-size:12.5px}
.tcs .none{font-size:12.5px; color:var(--faint); font-weight:600}
.cal12{display:grid; grid-template-columns:repeat(12,1fr); gap:3px; align-items:end; height:44px}
.cal12 i{display:block; border-radius:3px 3px 1px 1px; background:var(--soft2); height:var(--h); min-height:4px}
.cal12 i.now{background:var(--pri-d)} .cal12 i.next{background:var(--pri-l)} .cal12 i.peak{background:var(--amber)} .cal12 i.now.peak{box-shadow:inset 0 0 0 2px var(--amber)}
.cal12m{display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin-top:6px; font-size:9px; font-weight:700; color:var(--faint); text-align:center} .cal12m span.on{color:var(--pri-d); font-weight:800}
.wait{border:1px dashed var(--line2); border-radius:18px; padding:26px 18px; text-align:center; background:rgba(255,255,255,.5)}
.wait .t{font-size:15px; font-weight:800; letter-spacing:-.02em} .wait .d{font-size:12.5px; color:var(--sub); margin-top:6px; line-height:1.7}
.skl{display:grid; gap:9px} .skl i{display:block; height:62px; border-radius:16px; background:linear-gradient(90deg,var(--soft),var(--soft2),var(--soft)); background-size:200% 100%; animation:skl 1.3s linear infinite}
@keyframes skl{from{background-position:200% 0} to{background-position:-200% 0}}
.legal{margin-top:var(--gap); border-radius:18px; background:rgba(255,255,255,.55); padding:16px 20px; font-size:12.5px; line-height:1.8; color:var(--sub)} .legal b{color:var(--ink2)}

/* ── 검색어 방 탭 ─────────────────────────────────────────────
   🚨 2026-09-17 사장님: «위 메뉴랑 아래 탭이 위계가 똑같아 보인다».
      위(상단바)는 «알약», 아래(방 탭)는 «밑줄» 로 층을 나눈다.
      아래층은 글자도 작고, 바탕도 한 톤 눌러서 «안쪽 방» 처럼 보이게. */
.subnav{position:sticky; top:56px; z-index:40; background:linear-gradient(180deg,rgba(235,227,255,.72),rgba(240,234,255,.52));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(140,90,240,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.subnav-in{max-width:var(--W); margin:0 auto; padding:0 clamp(14px,4vw,28px); display:flex; gap:clamp(14px,2.4vw,26px); overflow-x:auto; scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:11px 1px 10px;
  font-size:12.5px; font-weight:700; letter-spacing:-.02em; color:var(--sub); white-space:nowrap; border-radius:0}
.subnav a .ico{flex:0 0 auto; opacity:.5}
.subnav a:hover{color:var(--ink)} .subnav a:hover .ico{opacity:.8}
.subnav a.on{color:var(--pri-d); font-weight:800}
.subnav a.on .ico{opacity:1}
.subnav a.on::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2.5px; border-radius:3px 3px 0 0; background:var(--grad)}
@media (max-width:560px){ .subnav{top:62px} .subnav-in{gap:16px} .subnav a{font-size:12px; padding:10px 1px 9px} }
/* 탭·구역 머리의 선 아이콘 */
.subnav a .ico{flex:0 0 auto; opacity:.85}
.subnav a.on .ico{opacity:1}
.sec2 .eb{display:inline-flex; align-items:center; gap:6px}
.sec2 .eb .ico{flex:0 0 auto; opacity:.95}
.rh .eb .ico{flex:0 0 auto}