/* /c/hashtag — "시간을 사는 예약 페이지". 접두사 ht-. 색·타이포는 site.css :root 토큰만 사용. */

/* ── 1. 히어로 ─────────────────────────────────────────── */
.cat-hashtag .ht-hero{padding:44px 0 0}
.ht-hero h1{max-width:13em;margin-bottom:26px}
.ht-lead{max-width:38em;margin:0 0 34px;font-size:16.5px;font-weight:400;line-height:1.7;color:var(--muted)}
.ht-facts{list-style:none;display:flex;flex-wrap:wrap;gap:1px;margin:0 0 34px;padding:0;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ht-facts li{flex:1 1 150px;background:var(--panel);padding:18px 20px}
.ht-facts .mlab{display:block;color:var(--faint)}
.ht-facts b{display:block;margin-top:9px;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1}
.ht-facts li:last-child b{color:var(--acc)}
.ht-jump{scroll-margin-top:80px}

/* 풀블리드 타임 스트립 — 시간이 흘러가는 눈금 */
.ht-strip{position:relative;height:74px;margin-top:56px;overflow:hidden;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ht-strip::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 24px)}
.ht-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),transparent 14%,transparent 86%,var(--bg))}
.ht-strip i{position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,var(--acc-bg) 35%,var(--acc-bg) 65%,transparent);border-left:1px solid var(--acc-bd);border-right:1px solid var(--acc-bd);animation:ht-sweep 16s linear infinite}
@keyframes ht-sweep{from{transform:translateX(-110%)}to{transform:translateX(340%)}}

/* ── 2. 부킹 밴드(풀블리드 슬래브) ────────────────────────── */
.cat-hashtag .ht-band{padding:74px 0 78px;background:var(--panel);border-bottom:1px solid var(--line);scroll-margin-top:60px}
.ht-bh{max-width:44em;margin-bottom:38px}
.ht-bh .mlab{display:block;color:var(--acc);margin-bottom:14px}
.ht-bh h2{font-size:clamp(28px,3.4vw,44px);margin:0 0 14px}
.ht-bh p{margin:0;font-size:14.5px;font-weight:400;color:var(--muted);line-height:1.7}

.ht-book{position:relative}
/* 지역 라디오 — 화면에서 감추되 포커스는 유지 */
.ht-reg{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ht-seg{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.ht-segb{flex:1 1 240px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;cursor:pointer;background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:18px 22px;transition:border-color .15s,background .15s,color .15s}
.ht-segb:hover{border-color:var(--line3);background:var(--card2)}
.ht-segb b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.ht-segb .mlab{color:var(--faint)}
.ht-segb em{margin-left:auto;font-style:normal;font-size:13.5px;font-weight:600;color:var(--faint)}
/* 선택 상태 · 포커스 링 — 지역이 늘어나면 인덱스 한 줄씩 추가 */
.ht-book:has(#ht-reg-0:checked) .ht-segb[for="ht-reg-0"],
.ht-book:has(#ht-reg-1:checked) .ht-segb[for="ht-reg-1"],
.ht-book:has(#ht-reg-2:checked) .ht-segb[for="ht-reg-2"],
.ht-book:has(#ht-reg-3:checked) .ht-segb[for="ht-reg-3"]{background:var(--acc-bg);border-color:var(--acc-bd);box-shadow:0 10px 40px -22px var(--acc-glow)}
.ht-book:has(#ht-reg-0:checked) .ht-segb[for="ht-reg-0"] em,
.ht-book:has(#ht-reg-1:checked) .ht-segb[for="ht-reg-1"] em,
.ht-book:has(#ht-reg-2:checked) .ht-segb[for="ht-reg-2"] em,
.ht-book:has(#ht-reg-3:checked) .ht-segb[for="ht-reg-3"] em{color:var(--acc)}
.ht-book:has(#ht-reg-0:focus-visible) .ht-segb[for="ht-reg-0"],
.ht-book:has(#ht-reg-1:focus-visible) .ht-segb[for="ht-reg-1"],
.ht-book:has(#ht-reg-2:focus-visible) .ht-segb[for="ht-reg-2"],
.ht-book:has(#ht-reg-3:focus-visible) .ht-segb[for="ht-reg-3"]{outline:2px solid var(--acc);outline-offset:3px}

/* 패널 전환 — 라디오 바로 뒤 패널만 노출(인덱스 무관) */
.ht-panel{display:none;background:var(--card);border:1px solid var(--line2);border-radius:22px;overflow:hidden}
.ht-reg:checked+.ht-panel{display:block}
.ht-ph{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:20px 26px;border-bottom:1px solid var(--line)}
.ht-ph b{font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.ht-ph span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* 시간 슬롯 — 지속시간에 비례하는 타임라인 바 */
.ht-slots{padding:6px 26px 4px}
.ht-slot{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 132px 26px;grid-template-areas:"d t p k";align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:opacity .15s}
.ht-slot:last-child{border-bottom:0}
.ht-slot input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.ht-dur{grid-area:d;display:flex;align-items:baseline;gap:5px;color:var(--muted);transition:color .15s}
.ht-dur b{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1}
.ht-dur i{font-style:normal;font-size:13px;font-weight:400}
.ht-track{grid-area:t;position:relative;height:26px;border-radius:6px;background-color:rgba(255,255,255,.03);background-image:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px calc(100% / var(--c,12)));overflow:hidden}
.ht-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--acc-glow),var(--acc-bd));border-right:2px solid var(--acc);transition:filter .15s}
.ht-p{grid-area:p;text-align:right;font-size:15.5px;font-weight:600;white-space:nowrap;color:var(--muted);transition:color .15s}
.ht-tick{grid-area:k;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);color:transparent;transition:all .15s}
.ht-slot:hover .ht-dur,.ht-slot:hover .ht-p{color:var(--ink)}
.ht-slot:hover .ht-tick{border-color:var(--line3)}
.ht-slot:has(input:checked) .ht-dur,.ht-slot:has(input:checked) .ht-p{color:var(--ink)}
.ht-slot:has(input:checked) .ht-p{color:var(--acc)}
.ht-slot:has(input:checked) .ht-fill{filter:brightness(1.5)}
.ht-slot:has(input:checked) .ht-tick{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.ht-slot:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
.ht-slot.ask{cursor:default;opacity:.55}
.ht-slot.ask .ht-p{font-size:13.5px;font-weight:400}

.ht-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;background:var(--card2);border-top:1px solid var(--line2)}
.ht-sum-t .mlab{display:block;color:var(--faint);margin-bottom:7px}
.ht-sum-v{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--acc)}
.ht-sum .btn{flex:0 0 auto}
.ht-fine{margin:20px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ── 3. 트렌드 패널 목업 ──────────────────────────────────── */
.cat-hashtag .ht-mocksec{padding:88px 0 0}
.ht-mockwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:64px;align-items:center}
.ht-mocktxt>.mlab{display:block;color:var(--acc);margin-bottom:14px}
.ht-mocktxt h2{font-size:clamp(26px,3.2vw,40px);margin:0 0 14px}
.ht-mocktxt>p{margin:0 0 28px;font-size:15px;font-weight:400;line-height:1.75;color:var(--muted);max-width:34em}
.ht-rd{border-top:1px solid var(--line);padding:16px 0}
.ht-rd .mlab{display:block;color:var(--faint);margin-bottom:8px}
.ht-rd p{margin:0;font-size:14px;font-weight:400;line-height:1.7;color:var(--muted);max-width:34em}

.ht-mock{background:var(--panel);border:1px solid var(--line2);border-radius:22px;padding:20px;box-shadow:0 36px 70px -34px rgba(0,0,0,.85)}
.ht-mock-h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ht-mock-h .mlab{color:var(--faint)}
.ht-live{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc-glow);animation:blink 2s ease-in-out infinite}
.ht-mock-l{list-style:none;margin:0;padding:0}
.ht-mock-l li{display:flex;align-items:center;gap:14px;padding:13px 10px;border-radius:12px}
.ht-mock-l li.on{background:var(--acc-bg);border:1px solid var(--acc-bd);padding:14px 10px}
.ht-rk{flex:0 0 auto;width:20px;font-size:13px;color:var(--dim);text-align:right}
.ht-mock-l li.on .ht-rk{color:var(--acc)}
.ht-mi{min-width:0;flex:1}
.ht-mi b{display:block;font-family:var(--mono);font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--acc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht-mi i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.ht-sk{display:block;height:9px;border-radius:99px;background:var(--card2);background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);background-size:220% 100%;animation:ht-sh 2.6s linear infinite}
.ht-sk.b{height:7px;margin-top:8px;opacity:.6}
@keyframes ht-sh{from{background-position:120% 0}to{background-position:-120% 0}}
.ht-mock-l li:nth-child(2) .ht-sk.a{width:62%}.ht-mock-l li:nth-child(2) .ht-sk.b{width:34%}
.ht-mock-l li:nth-child(3) .ht-sk.a{width:48%}.ht-mock-l li:nth-child(3) .ht-sk.b{width:28%}
.ht-mock-l li:nth-child(4) .ht-sk.a{width:71%}.ht-mock-l li:nth-child(4) .ht-sk.b{width:31%}
.ht-mock-l li:nth-child(5) .ht-sk.a{width:41%}.ht-mock-l li:nth-child(5) .ht-sk.b{width:24%}
.ht-mock-l li:nth-child(6) .ht-sk.a{width:57%}.ht-mock-l li:nth-child(6) .ht-sk.b{width:36%}
.ht-cap{margin:16px 0 0;font-size:13px;font-weight:400;line-height:1.7;color:var(--faint)}

/* ── 4. 진행 조건 ────────────────────────────────────────── */
.cat-hashtag .ht-condsec{padding:88px 0 0}
.ht-condsec .dhead{margin-top:0}
.ht-cond{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ht-cc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;transition:border-color .15s,background .15s}
.ht-cc:hover{border-color:var(--line2);background:var(--card2)}
.ht-ci{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--acc-bg);border:1px solid var(--acc-bd);color:var(--acc);margin-bottom:16px}
.ht-cc b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.ht-cc p{margin:0;font-size:14px;font-weight:400;line-height:1.7;color:var(--muted)}
.ht-note{margin:20px 0 0;font-size:13px;font-weight:400;color:var(--faint)}
.ht-note a{color:var(--acc);text-underline-offset:3px}
.ht-note a:hover{text-decoration:underline}

/* ── 반응형 — 가로 스크롤 금지 ─────────────────────────────── */
@media (max-width:1000px){
  .ht-mockwrap{grid-template-columns:1fr;gap:44px}
  .ht-mockcol{max-width:460px}
  .ht-cond{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .cat-hashtag .ht-hero{padding:32px 0 0}
  .ht-facts li{flex:1 1 46%;padding:15px 16px}
  .ht-facts b{font-size:21px}
  .ht-strip{height:56px;margin-top:40px}
  .cat-hashtag .ht-band{padding:56px 0 60px}
  .ht-segb{flex:1 1 100%;padding:15px 18px}
  .ht-ph,.ht-slots,.ht-sum{padding-left:18px;padding-right:18px}
  .ht-slot{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d p" "t t";gap:12px 14px}
  .ht-tick{display:none}
  .ht-sum{justify-content:stretch}
  .ht-sum .btn{flex:1 1 100%;justify-content:center}
  .cat-hashtag .ht-mocksec,.cat-hashtag .ht-condsec{padding-top:64px}
  .ht-cond{grid-template-columns:1fr}
}
/* 소형 단말(≤600) — 긴 금액 라벨이 가로 폭을 밀지 못하게 */
@media (max-width:600px){
  .ht-ph,.ht-slots,.ht-sum{padding-left:14px;padding-right:14px}
  .ht-p{white-space:normal}
  .ht-sum-v{font-size:18px}
  .ht-mock{padding:16px}
  .ht-mock-l li,.ht-mock-l li.on{gap:10px;padding:12px 6px}
}