/* ==========================================================================
   home.css — 홈 /ko/ · en 홈 /en/ (B4 · DESIGN 8-1 · 8-13 · 6절 S1 S2 S3 · 4-16)
   - 머리 h- 만 씀. 그림 키트(ui-*)는 ui-kit.css · 답 카드 내용(tx-answer)은 B2 answer.css · 단계 목록 꼴은 B2 player.css.
   - 테마는 html[data-theme] 토큰으로만(prefers-color-scheme 0) · 그라데이션 0 · 움직임은 home.js 가 seek(t)/스프링으로
     (CSS transition 은 올림 · 누름 · 강조 낱말 색 160ms 같은 작은 것만 — 5-1 예외).
   - 첫 화면 예산(8-1 표): 1440×900 · 1280×800 · 1024×768 에 질문 · 판 · 노선 ①~⑥ 이 다 들어가게 높이를 맞춤.
   ========================================================================== */

/* ── 0. 공용 자리 ───────────────────────────────────────────────────────── */
.h-main{ --h-tab-h:0px;   /* 「답」 꼬리표 없앰(사용자 10/20) — 자리 0 */ padding-bottom:var(--section-gap); }
.h-top{ padding-top:12px; }
.h-slot{ margin-top:var(--section-gap); }
.h-slot:empty{ display:none; }

/* ── 1. 히어로 격자(H1 · 8-1 첫 화면 예산) ──────────────────────────────────
   ≥1280  왼쪽(질문 · 질문 칸 · 칩 = 판 높이 안 세로 가운데) | 판 / 판 아래 장면 단추 / 노선 / 패널
   1024–1279  질문 + 질문 칸 384 | compact 판 416 / 칩 줄(폭 거의 전체 2줄) + 장면 단추(오른쪽) / 노선 / 패널
   ≤1023  질문 · 질문 칸 · 칩 · 답 자리 / 노선 / 패널 / 판 / 장면 단추(H3 · H16) */
.h-grid{ display:grid; align-items:start; }
.h-left{ min-width:0; }
.h-hero{ min-width:0; }
.h-stage{ min-width:0; }
.h-answer-slot{ min-width:0; }

@media (min-width:1280px){
  .h-grid{
    grid-template-columns:minmax(0,1fr) auto; column-gap:40px;
    grid-template-areas:"left stage" ". ctl" "route route" "panel panel";
  }
  .h-left{ grid-area:left; align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding-top:var(--h-tab-h); }
  .h-stage{ grid-area:stage; }
  .h-ctl{ grid-area:ctl; }
  .h-answer-slot{ display:none; }
}
@media (min-width:1024px) and (max-width:1279.98px){
  .h-grid{
    grid-template-columns:384px minmax(0,1fr) auto; column-gap:24px;
    grid-template-areas:"hero stage stage" "ctl ctl ctl" "chips chips chips" "route route route" "panel panel panel";
  }
  .h-left{ display:contents; }
  .h-hero{ grid-area:hero; align-self:center; padding-top:var(--h-tab-h); }
  .h-chips{ grid-area:chips; margin-top:16px !important; }   /* 개인 · 법인 줄 아래 · 「자주 있는 문의」 글자 없음(사용자 10/20) */
  .h-answer-slot{ display:none; }
  .h-stage{ grid-area:stage; justify-self:end; }
  .h-ctl{ grid-area:ctl; margin-top:8px !important; justify-self:end; align-self:start; }
}
@media (max-width:1023.98px){
  .h-grid{ grid-template-columns:minmax(0,1fr); grid-template-areas:"hero" "chips" "slot" "route" "panel" "stage" "ctl"; }
  .h-left{ display:contents; }
  .h-hero{ grid-area:hero; }
  .h-chips{ grid-area:chips; }
  .h-answer-slot{ grid-area:slot; }
  .h-route{ grid-area:route; }
  .h-stage{ grid-area:stage; margin-top:28px; }
  .h-ctl{ grid-area:ctl; }
}
.h-route{ grid-area:route; }
.h-panel{ grid-area:panel; }

/* ── 2. 질문(U3 글자 그대로 · 강조 낱말 색만 바뀜 — E2 · E9) ─────────────── */
.h-h1{ margin:0; font-weight:inherit; }
.h-q, .h-a{ display:block; }
.h-q{ color:var(--ink); text-wrap-style:balance; }
.h-a{ margin-top:14px; color:var(--ink); text-wrap-style:balance; }
.h-a em{ font-style:normal; font-weight:inherit; color:inherit; transition:color 160ms ease-out; }
.h-a em.is-on{ color:var(--accent); }                       /* ≥601 답 줄 = WCAG 큰 글자(21 · 26px/700) → --accent(3-1 · Q15) */
@media (max-width:600.98px){
  .h-a{ margin-top:10px; }
  .h-a em.is-on{ color:var(--accent-ink); font-weight:700; }  /* ≤600 = 진한 주황 + 700(P9 여유) */
}
html.rm .h-a em{ transition:none; }

/* ── 2a. 「질문」 칸(H2 · H24 · 8-1 #2a) ──────────────────────────────────── */
.h-ask{ margin-top:28px; max-width:560px; }
.h-ask__tag{
  position:relative; z-index:1; display:inline-flex; align-items:center; height:28px; margin:0 0 -1.5px; padding:0 14px;
  border:1.5px solid var(--line-strong); border-bottom:0; border-radius:12px 12px 0 0; background:var(--surface);
  color:var(--ink-2); font-size:14px; font-weight:700; line-height:1;
}
.h-qbox{
  position:relative; display:flex; align-items:center; gap:10px; height:60px; padding:0 14px 0 18px;
  border:1.5px solid var(--line-strong); border-radius:var(--r-qfield); background:var(--surface); color:var(--ink);
}
.h-qbox:focus-within{ outline:3px solid var(--focus); outline-offset:2px; }
.h-qbox__ico{ flex:none; width:22px; height:22px; color:var(--ink-2); }
.h-qbox__in{
  flex:1 1 auto; min-width:0; height:100%; margin:0; padding:0; border:0; outline:none; background:transparent;
  color:var(--ink); font-size:17px; font-weight:500; line-height:1.3; caret-color:var(--accent);
  -webkit-appearance:none; appearance:none;
}
.h-qbox__in::placeholder{ color:var(--ink-3); opacity:1; }
.h-qbox__in::-webkit-search-cancel-button, .h-qbox__in::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
.h-qbox__in:focus-visible{ outline:none; }
.h-qbox__conv{     /* 한/영 안 바꾼 글자 → 「→ 문자」(S2 · NC-03) */
  flex:none; display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:999px;
  border:1.5px solid var(--accent); background:var(--surface); color:var(--accent-ink);
  font-size:14px; font-weight:700; line-height:1; white-space:nowrap;
}
.h-qbox__kbd{ flex:none; }
@media (max-width:1023.98px){
  .h-ask{ margin-top:22px; max-width:calc(100% - var(--lane-cut)); }
  .h-qbox{ height:56px; }
  .h-qbox__kbd{ display:none; }
}
@media (max-width:600.98px){
  .h-ask{ margin-top:18px; }
  .h-ask__tag{ height:26px; padding:0 12px; font-size:14px; font-weight:700; }   /* 14/700 — 13px 층에 안 셈(3-4 · Q30③) */
  .h-qbox{ height:52px; padding:0 10px 0 14px; gap:8px; }
  .h-qbox__ico{ width:20px; height:20px; }
  .h-qbox__in{ font-size:16px; }                                                  /* iOS 확대 방지 */
}

/* ── 2b. 자주 있는 문의 칩 5(8-1 #2b · S2) ───────────────────────────────── */
.h-chips{ margin-top:24px; }
.h-chips__label{ margin:0 0 10px; font-size:13px; font-weight:700; line-height:1.4; color:var(--ink-3); }
.h-chips__list{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.h-chips__list > li{ display:flex; min-width:0; max-width:100%; }
.h-chip{
  position:relative; display:inline-flex; align-items:center; gap:8px; min-height:36px; max-width:100%; margin:0; padding:7px 15px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink);
  font-size:14px; font-weight:600; line-height:1.4; text-align:left; cursor:pointer;
  transition:border-color var(--ui-fast) ease-out, box-shadow var(--ui-fast) ease-out;
}
.h-chip:hover{ border-color:var(--line-strong); }
.h-chip:active{ transform:scale(.98); }
.h-chip[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 .5px var(--ink); }
.h-chip[aria-pressed="true"]::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); }
@media (min-width:1024px) and (max-width:1279.98px){
  .h-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
  .h-chips__label{ display:none; }
  .h-chips__list{ display:contents; }
  .h-chip{ min-height:34px; padding:6px 14px; }
}
@media (max-width:1023.98px){
  .h-chips{ margin-top:22px; max-width:calc(100% - var(--lane-cut)); }
}
@media (max-width:600.98px){
  .h-chips{ margin-top:18px; }
  .h-chips__label{ margin-bottom:8px; }
  .h-chips__list{ flex-direction:column; align-items:flex-start; gap:7px; }       /* 줄마다 하나 · 오른쪽 84 비움(8-1) */
  .h-chip{ min-height:38px; padding:7px 14px; }
}

/* ── 2c. <1024 칩 아래 답 자리(H3 · S2) ─────────────────────────────────── */
.h-answer-slot:empty{ display:none; }
.h-answer-slot{ padding-top:6px; }
@media (max-width:1023.98px){ .h-answer-slot{ max-width:100%; } }

/* ── 3. 히어로 판 껍데기(S1 · S2 — 판 · 「답」 꼬리표 · 높이 스프링은 home.js) ──
   판 = 3-6 모서리 24(꼬리표 쪽 0) · 그림자 sh-3 · 판 속 그림 = ui-kit .ui-board(full: ≥1440 680×520 · 1280–1439 600×460 · ≤1279 compact) */
.h-board{ position:relative; width:680px; max-width:100%; padding-top:var(--h-tab-h); }   /* 판 너비 = 키트 full 과 같은 값(답 꼴에서도 그대로 — 답 글 길이에 따라 칸이 늘거나 줄지 않게) */
@media (min-width:1280px) and (max-width:1439px){ .h-board{ width:600px; } }
@media (min-width:1024px) and (max-width:1279.98px){ .h-board{ width:416px; } }
/* JS 가 왼쪽 칸 자리를 「기록 판 높이 기준 가운데」로 재서 고정(.is-pinned) — 답 판이 길어져도 질문 칸이 움직이지 않게(움직이면 타자 중 화면이 따라 내려감) */
@media (min-width:1280px){ .h-grid.is-pinned .h-left{ align-self:start; justify-content:flex-start; } }
@media (min-width:1024px) and (max-width:1279.98px){ .h-grid.is-pinned .h-hero{ align-self:start; } }
.h-board__skin{
  position:absolute; left:0; right:0; top:var(--h-tab-h); bottom:0; z-index:0; pointer-events:none;
  border-radius:var(--r-board); background:var(--ui-surface); box-shadow:var(--sh-3);
}
.h-tab{
  position:absolute; left:0; top:0; z-index:2; display:flex; align-items:center; height:var(--h-tab-h); max-width:100%; margin:0; padding:0 16px;
  background:var(--ui-surface); border-radius:12px 12px 0 0; box-shadow:var(--sh-1); clip-path:inset(-14px -14px 0 -14px);
  color:var(--ink); font-size:14px; font-weight:700; line-height:1; white-space:nowrap; overflow:hidden;
}
.h-tab__t{ display:block; white-space:nowrap; }
.h-board .h-tab{ display:none !important; }   /* 사용자 10/20 「왼쪽 위에 답 이라고 튀어나와있는 부분 없애줘」 — JS 가 쓰는 요소라 지우지 않고 숨김 */
.h-board__clip{
  position:relative; z-index:1; overflow:hidden; border-radius:var(--r-board);
}
.h-board .ui-board{ --ui-board-r:var(--r-board); background:transparent; }
.h-board .ui-todo{ position:relative; }
.h-board .h-todo0{ position:absolute; z-index:1; margin:0; }                         /* 「해야 할 일이 없어요」(S1 9.40 까지) — 자리는 home.js 가 끝 줄에 맞춤 */
.h-board .ui-todo__row.is-hl{ position:relative; }
.h-board .ui-todo__row.is-hl::after{                                                /* 끝 장면 강조 상자(S1 9.50– · HTML 정지 그림에도 있음) */
  content:""; position:absolute; left:-8px; right:-8px; top:-6px; bottom:-6px; border:2.5px solid var(--accent); border-radius:13px; pointer-events:none;
}
.h-board .ui-tl > .ui-rec{ will-change:auto; }
.h-board .ui-box__input .h-typed{ word-break:keep-all; }

/* 답 꼴(S2 — 기록 그림 층은 흐려 나가고 같은 판에 답 내용) · 기록 꼴일 때 답 층은 위에 겹친 채 숨김(높이 0 기여) */
.h-board__answer{ padding:26px 30px 30px; }
.h-board__answer[hidden]{ display:none; }
/* 시연 판은 클릭 · 선택에 반응하지 않음(사용자 10/20) — 답 꼴일 때만 누를 수 있음 */
.h-board[data-tl]:not([data-mode="answer"]){ pointer-events:none; user-select:none; -webkit-user-select:none; }
.h-board:not([data-mode="answer"]) .h-board__answer{ position:absolute; left:0; top:0; width:100%; visibility:hidden; pointer-events:none; }
.h-board:not([data-mode="answer"]) .h-board__answer.is-leaving{ visibility:visible; }
.h-board[data-mode="answer"] .h-board__answer{ position:relative; }
.h-board[data-mode="answer"] .ui-board{ position:absolute; left:0; top:0; }
.h-board[data-mode="answer"] .h-board__answer .tx-answer .tx-player{ max-width:100%; }
.h-board__answer .tx-answer__title{ padding-right:4px; }

/* 효과 층(점 · 글자 커서 · 강조 상자 · 커서 · 누름 고리) — 위치는 home.js 가 seek(t) 로 */
.h-fx{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:6; pointer-events:none; }
.h-dot{
  position:absolute; left:0; top:0; display:block; width:12px; height:12px; border-radius:50%;
  background:var(--accent); border:0 solid var(--accent); box-sizing:border-box; opacity:0;
}
.h-cursor{ opacity:0; }
.h-ring{ --p:1; }
.h-morph{
  position:absolute; z-index:2; left:0; top:0; display:block; box-sizing:border-box; pointer-events:none; opacity:0;
  border:1.5px solid var(--ui-orange); border-radius:12px; background:var(--ui-card); box-shadow:var(--ui-box-shadow);
}

/* 첫 그림(head 스크립트가 html.hero-intro 를 첫 그림 전에 담) = t 0 꼴: 크림 바탕 위 주황 점 하나 ·
   판 자리 크기는 그대로(레이아웃 튐 0). JS 가 3초 안에 못 돌면 안전장치가 끝 장면을 보임(6절 S1) */
html.hero-intro .h-board:not(.is-live) .h-board__skin{
  left:calc(50% - 7px); right:auto; top:calc(50% + var(--h-tab-h) / 2 - 7px); bottom:auto; width:14px; height:14px;
  border-radius:7px; background:var(--accent); box-shadow:none;
  animation:h-fs-skin 0s 3s forwards;
}
html.hero-intro .h-board:not(.is-live) :is(.h-board__clip, .h-tab){ opacity:0; animation:h-fs-show 0s 3s forwards; }
html.hero-intro:not(.h-live) .h-a em.is-on{ color:inherit; animation:h-fs-em 0s 3s forwards; }
html.hero-intro:not(.h-live) .h-pp__stop{ display:block; }
html.hero-intro:not(.h-live) .h-pp__play{ display:none; }
@keyframes h-fs-skin{
  to{ left:0; right:0; top:var(--h-tab-h); bottom:0; width:auto; height:auto; border-radius:var(--r-board); background:var(--ui-surface); box-shadow:var(--sh-3); }
}
@keyframes h-fs-show{ to{ opacity:1; } }
@keyframes h-fs-em{ to{ color:var(--accent); } }

/* 판 크기(키트 full 과 같은 값 — 꼬리표 자리만 더함) */
@media (max-width:1023.98px){
  .h-board{ width:min(416px, 100%); }
  .h-board .ui-board{ width:100%; }
}
@media (max-width:600.98px){
  .h-board{ width:100%; }
}

/* ── 3b. 판 아래 ❚❚/▶ · 장면 단추(5-3 · S1 장면 단추 「대화 · 메모 · 한눈에」) ── */
.h-ctl{ display:flex; align-items:center; gap:10px; margin-top:8px; min-height:32px; }
.h-pp{
  flex:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer;
}
.h-pp svg{ width:16px; height:16px; }
.h-pp__stop{ display:none; }
.h-pp.is-playing .h-pp__stop{ display:block; }
.h-pp.is-playing .h-pp__play{ display:none; }
.h-pp:hover{ border-color:var(--ink-2); }
.h-scenes{ display:inline-flex; align-items:center; gap:2px; padding:2px; border-radius:999px; background:var(--bg-2); }
.h-scene{
  display:inline-flex; align-items:center; height:28px; padding:0 13px; border:0; border-radius:999px; background:transparent;
  color:var(--ink-2); font-size:14px; font-weight:650; line-height:1; cursor:pointer;
  transition:background-color var(--ui-fast) ease-out, color var(--ui-fast) ease-out, box-shadow var(--ui-fast) ease-out;
}
.h-scene:hover{ color:var(--ink); }
.h-scene[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }
@media (max-width:1023.98px){ .h-ctl{ max-width:calc(100% - var(--lane-cut)); flex-wrap:wrap; } }
html.rm .h-scene{ transition:none; }

/* ── 3c. ko 판 10/19(사용자 직접 지시) — 개인 시간표 부품 · 「개인 | 법인」 · 법인 판 ────────────────
   ko 판에만 있는 마크업(.h-board[data-tl] · .h-corp · .h-who)에만 걸림 — en 홈은 옛 판 그대로. */
/* 개인: 통화 기록(재생 줄 + 「음성인식」 한 줄) · 통화요약(「음성인식」 누른 뒤 제자리에서 열림 — 높이는 home.js) */
.h-board .h-callrow{ display:flex; align-items:center; gap:6px; margin:8px 10px 9px; }
.h-board .h-callrow > .ui-audio{ flex:1 1 auto; min-width:0; margin:0; }
.h-board .h-callrow > .ui-stt{ flex:none; margin:0; }
.h-board .ui-stt.is-on{ background:var(--ui-msg); color:#FFFFFF; }
.h-board .h-sum{ overflow:hidden; }
.h-board .h-sum__in{ margin:0 10px 10px; padding:7px 10px 8px; border-radius:8px; background:var(--ui-surface-2); border:1px solid var(--ui-line); }
.h-board .h-sum__t{ display:flex; align-items:center; gap:5px; margin:0 0 3px; font-size:11px; font-weight:700; line-height:1.4; color:var(--ui-ink-2); }
.h-board .h-sum__t::before{
  content:""; flex:none; width:12px; height:12px; background-color:currentColor;
  -webkit-mask:var(--ui-ic-lines) center/contain no-repeat; mask:var(--ui-ic-lines) center/contain no-repeat;
}
.h-board .h-sum__l{ position:relative; margin:0; padding-left:11px; font-size:12px; line-height:1.45; color:var(--ui-ink); word-break:keep-all; }
.h-board .h-sum__l::before{ content:""; position:absolute; left:2px; top:.66em; width:4px; height:4px; border-radius:50%; background:var(--ui-sub); }
.h-board .ui-todo__row.is-task .ui-todo__ico::before{ -webkit-mask-image:var(--ui-ic-checksq); mask-image:var(--ui-ic-checksq); }
.h-board .h-send .ui-box__lbl{ margin-top:2px; }
.h-board .h-send .ui-box__main{ min-height:54px; }
/* 시간줄 끝 장면: 판에 다 안 들어가면 오래된 기록부터 뺌(맨 위 기록이 반쯤 잘린 채 멈추는 일 0) ·
   움직이는 동안(.is-all)은 다 놓고 home.js 가 시간줄을 위로 밂(새 기록이 들어올 자리를 냄) */
.h-board .h-tl:not(.is-all) > .ui-rec:not(:nth-last-child(-n+3 of .ui-rec)){ display:none; }        /* 두 칸 판(≥1280): 끝 기록 3 */
@media (min-width:601px) and (max-width:1279.98px){                                                     /* compact 판(높이 320 고정): 끝 기록 1 */
  .h-board .h-tl:not(.is-all) > .ui-rec:not(:nth-last-child(-n+1 of .ui-rec)){ display:none; }
  .h-board .h-sum__l:nth-child(4){ display:none; }
}
.h-board .h-tl.is-all > .ui-rec.ui-rec{ display:block; }                                               /* ≤600(높이 auto)은 키트 그대로 끝 기록 2 */

/* 개인 ③ 통화 장면(약 2초) — 폰(안드로이드 틀)이 판 오른쪽에서 들어와 「수신 전화 → 통화 중 0:00…4:08 → 통화 종료」 */
.h-board .ui-phone.h-callph{ --dev-w:156px; --dev-h:244px; position:absolute; z-index:4; right:30px; top:50%; margin-top:-122px; }
@container uib (max-width:559px){ .h-board .ui-phone.h-callph{ --dev-w:144px; --dev-h:226px; right:18px; margin-top:-113px; } }
.h-call{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px 8px 12px; text-align:center; }
.h-call__ava{ position:relative; flex:none; width:46px; height:46px; margin-bottom:6px; border-radius:50%; background:#AAB4BE; }
.h-call__ava::before{
  content:""; position:absolute; inset:11px; background-color:#FFFFFF;
  -webkit-mask:var(--ui-ic-person) center/contain no-repeat; mask:var(--ui-ic-person) center/contain no-repeat;
}
.h-call__ava::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid var(--ui-go); opacity:var(--rp,0); transform:scale(calc(.82 + .3 * var(--rq,0))); }
.h-call__name{ font-size:13.5px; font-weight:700; line-height:1.3; color:var(--ui-ink); }
.h-call__num{ font-size:11px; line-height:1.3; color:var(--ui-sub); font-variant-numeric:tabular-nums; }
.h-call__st{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:11.5px; font-weight:700; line-height:1.3; color:var(--ui-ink-2); font-variant-numeric:tabular-nums; }
.h-call__w{ display:none; }
.h-callph:not([data-w]) .h-call__w[data-w="end"], .h-callph[data-w="ring"] .h-call__w[data-w="ring"],
.h-callph[data-w="on"] .h-call__w[data-w="on"], .h-callph[data-w="end"] .h-call__w[data-w="end"]{ display:inline; }
.h-callph[data-w="on"] .h-call__w[data-w="on"]{ color:var(--ui-go-ink); }
.h-callph[data-w="ring"] .h-call__t{ display:none; }
.h-call__btn{ position:relative; flex:none; width:36px; height:36px; margin-top:auto; border-radius:50%; background:#D93A3F; }
.h-call__btn::before{
  content:""; position:absolute; inset:9px; background-color:#FFFFFF; transform:rotate(135deg);
  -webkit-mask:var(--ui-ic-phone) center/contain no-repeat; mask:var(--ui-ic-phone) center/contain no-repeat;
}
.h-callph[data-w="ring"] .h-call__btn{ background:var(--ui-go); }
.h-callph[data-w="ring"] .h-call__btn::before{ transform:none; }

/* 「개인 | 법인」 분할 단추(장면 단추 오른쪽) · 법인일 때 장면 단추 = 「PC 여러 대 · 마스터 계정」 */
.h-who{ display:inline-flex; align-items:center; gap:2px; margin-left:auto; padding:2px; border-radius:999px; background:var(--bg-2); }
.h-who__b{
  display:inline-flex; align-items:center; height:28px; padding:0 14px; border:0; border-radius:999px; background:transparent;
  color:var(--ink-2); font-size:14px; font-weight:650; line-height:1; cursor:pointer;
  transition:background-color var(--ui-fast) ease-out, color var(--ui-fast) ease-out, box-shadow var(--ui-fast) ease-out;
}
.h-who__b:hover{ color:var(--ink); }
.h-who__b[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.h-who__b:focus-visible, .h-ctl[data-who] .h-scene:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; }
html.rm .h-who__b{ transition:none; }
@media (min-width:1024px) and (max-width:1279.98px){
  .h-ctl[data-who]{ max-width:213px; flex-wrap:wrap; justify-content:flex-end; row-gap:6px; }
  .h-ctl[data-who="corp"] .h-scene{ padding:0 9px; font-size:13px; }
}   /* 1024–1279: 「개인 | 법인」은 장면 단추 아래 줄 — 칩 줄 폭을 줄이지 않음(첫 화면 예산 8-1) */
.h-scene__corp{ display:none; }
.h-ctl[data-who="corp"] .h-scene__solo{ display:none; }
.h-ctl[data-who="corp"] .h-scene__corp{ display:inline; }
.h-ctl[data-who="corp"] .h-scene[data-scene="2"]{ display:none; }
.h-board[data-who="solo"] [data-who-sr="corp"], .h-board[data-who="corp"] [data-who-sr="solo"]{ display:none; }

/* 법인 판 — 개인 판(.ui-board)과 같은 자리 · 같은 크기(그 위에 겹침 · 높이 기여 0 · CLS 0) · 끝 장면 = 장면 B */
.h-corp{
  display:none; position:absolute; z-index:2; left:0; top:0; right:0; bottom:0; overflow:hidden;
  border-radius:var(--r-board); background:var(--ui-surface); color:var(--ui-ink);
  container:hc / size; font-size:12.5px; line-height:1.45;
}
.h-board[data-who="corp"] .h-corp{ display:block; }
.h-board[data-who="corp"] .ui-board{ visibility:hidden !important; }
.h-board[data-mode="answer"] .h-corp{ display:none; }
.h-corp :where(p, ol, figure){ margin:0; }
.h-corp__sc{ position:absolute; left:0; top:0; right:0; bottom:0; display:flex; flex-direction:column; padding:16px 22px 46px; }
.h-corp__a{ display:none; }
.h-corp__name{ flex:none; margin:0 0 12px; font-size:13px; font-weight:700; line-height:1.4; color:var(--ui-ink-2); }
.h-corp__note{ position:absolute; left:22px; right:22px; bottom:16px; margin:0; font-size:12px; font-weight:600; line-height:1.4; color:var(--ui-sub); }

/* 이음 그림: 보내는 쪽 | 줄기 | 받는 쪽 — 줄기는 받는(보내는) 칸 셋의 가운데를 잇는 세로선(CSS 만 · 칸 셋 = 같은 높이) */
.h-net{ --g:8px; --bus-w:44px; --src-w:172px; flex:1 1 auto; min-height:0; display:grid; grid-template-columns:var(--src-w) var(--bus-w) minmax(0,1fr); }
.h-net.is-b{ --src-w:150px; }
.h-net__src, .h-net__dst{ min-width:0; min-height:0; display:flex; flex-direction:column; gap:var(--g); }
.h-net__bus{ position:relative; }
.h-net.is-a .h-net__src{ justify-content:center; }
.h-net.is-a .h-net__dst > .h-pcw{ flex:1 1 0; min-height:0; }
.h-net.is-b .h-net__src > .h-ph{ flex:1 1 0; min-height:0; }
.h-net.is-b .h-net__dst{ justify-content:center; }
.h-ln{ position:absolute; display:block; background:var(--ui-line-2); border-radius:2px; }
.h-ln > i{ position:absolute; left:0; top:0; right:0; bottom:0; display:block; border-radius:inherit; background:var(--accent); transform:scale(0); }
.h-ln.is-src{ top:50%; left:100%; width:calc(var(--bus-w) / 2 + 1px); height:2px; margin-top:-1px; }
.h-ln.is-dst{ top:50%; right:100%; width:calc(var(--bus-w) / 2 + 1px); height:2px; margin-top:-1px; }
.h-ln.is-up, .h-ln.is-dn{ left:50%; width:2px; margin-left:-1px; }
.h-ln.is-up{ top:calc((100% - 2 * var(--g)) / 6); bottom:50%; }
.h-ln.is-dn{ top:50%; bottom:calc((100% - 2 * var(--g)) / 6); }
.h-dev{ position:relative; display:flex; flex-direction:column; min-height:0; }
.h-net.is-a .h-dev{ height:100%; justify-content:center; }
.h-tag{ flex:none; margin:0 0 6px; font-size:12px; font-weight:700; line-height:1.4; color:var(--ui-ink-2); text-align:center; }

/* 장면 A: 가게 폰 한 대(텍스토리 앱 김소연 스토리) → 직원 이름이 붙은 PC 여러 대(같은 스토리) */
.h-corp .ui-phone.h-shop{ --dev-w:172px; height:auto; flex:0 1 330px; min-height:0; }
.h-shop .ui-bubble > p{ max-width:132px; }
.h-shop .ui-phone__chat{ gap:7px; }
.h-pcw{ position:relative; display:flex; min-width:0; }
.h-corp .ui-pc.is-mini{ --pc-w:100%; width:100%; display:flex; flex-direction:column; height:auto; min-height:0; }
.h-pc{ flex:1 1 auto; }
.h-who-chip{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:var(--ui-chrome-ink); font-size:11px; font-weight:700; line-height:1; white-space:nowrap; }
.h-who-chip > .ui-avatar{ width:17px; height:17px; font-size:11px; }
.h-who-chip.is-master{ margin-left:0; padding:0 8px; height:20px; border-radius:999px; background:var(--ui-orange-fill); color:#FFFFFF; }
.h-pc__recs{ flex:1 1 auto; min-height:0; display:grid; align-items:start; padding:7px 8px 0; overflow:hidden; }
.h-pc__recs > .ui-rec{ grid-area:1 / 1; min-width:0; --ui-rec-hy:4px; --ui-rec-by:4px; --ui-rec-bb:6px; }
.h-pc__recs .ui-rec__body{ font-size:12px; }
.h-pc__act{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 8px 7px; }
.h-pc__act > .ui-to{ height:22px; }
.h-pc__act > .ui-act{ height:24px; }

/* 장면 B: 직원 폰 여러 대 → 마스터 계정 PC 한 화면(폰 · 직원별 칩) */
.h-ph{ position:relative; display:flex; flex-direction:row-reverse; align-items:center; justify-content:flex-start; gap:10px; }   /* 폰 틀을 줄기 쪽(오른쪽) 끝에 — 이음선이 틀에서 바로 나감 */
.h-ph__fr{ position:relative; flex:none; display:grid; place-items:center; width:40px; height:68px; border-radius:9px; background:var(--ui-bezel); box-shadow:inset 0 0 0 1.5px var(--ui-bezel-edge); }
.h-ph__fr::before{ content:""; position:absolute; left:3px; top:3px; right:3px; bottom:3px; border-radius:6px; background:var(--ui-sms-bg); }
.h-ph__fr > .ui-i{ position:relative; --ui-i-s:18px; color:var(--ui-msg); }
.h-ph__who{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:0; text-align:right; }
.h-ph__who > b{ font-size:13px; font-weight:700; line-height:1.3; color:var(--ui-ink); }
.h-ph__who > span{ font-size:11px; font-weight:600; line-height:1.3; color:var(--ui-sub); }
.h-corp .h-master .ui-pc__title{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px 8px; font-size:12px; }
.h-corp .h-master .ui-list__row{ grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"av name via" "av last last"; column-gap:9px; row-gap:2px; padding:9px 12px; }
.h-corp .h-master .ui-list__row > .ui-avatar{ width:28px; height:28px; font-size:12px; }
.h-corp .h-master .ui-list__row > b{ font-size:12.5px; font-variant-numeric:tabular-nums; }
.h-corp .h-master .ui-list__last{ font-size:11.5px; }
.h-corp .h-master .ui-list__row[data-n="2"] .ui-list__last{ --ui-i-mask:var(--ui-ic-phone); }
.h-via{ grid-area:via; align-self:center; display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; background:var(--ui-av-green); color:#FFFFFF; font-size:11px; font-weight:700; line-height:1; white-space:nowrap; }
.h-via[data-c="blue"]{ background:var(--ui-av-blue); }
.h-via[data-c="purple"]{ background:var(--ui-av-purple); }
.h-via[data-c="teal"]{ background:var(--ui-av-teal); }

/* 판 너비별(법인 판 자체 너비 hc) — 글자 11px 아래로 줄이지 않고 칸 · 내용만 줄임 */
@container hc (max-width:659px){
  .h-corp__sc{ padding:12px 16px 40px; }
  .h-corp__note{ left:16px; right:16px; bottom:13px; }
  .h-corp__name{ margin-bottom:8px; }
  .h-net{ --bus-w:36px; --src-w:156px; }
  .h-net.is-b{ --src-w:136px; }
  .h-corp .ui-phone.h-shop{ --dev-w:156px; }
  .h-shop .ui-bubble > p{ max-width:118px; }
}
@container hc (max-width:559px){
  .h-corp__sc{ padding:10px 12px 34px; }
  .h-corp__name{ margin-bottom:6px; font-size:12px; }
  .h-corp__note{ left:12px; right:12px; bottom:10px; font-size:11px; }
  .h-net{ --g:6px; --bus-w:24px; --src-w:118px; }
  .h-net.is-b{ --src-w:104px; }
  .h-corp .ui-phone.h-shop{ --dev-w:118px; --dev-pad:4px; --dev-r:18px; }
  .h-shop .ui-phone__head{ padding:5px 7px; }
  .h-shop .ui-phone__head > :is(.ui-i,.ui-phone__ava){ display:none; }
  .h-shop .ui-phone__input{ display:none; }
  .h-shop .ui-phone__chat{ display:grid; align-content:end; padding:6px 5px 7px; }
  .h-shop .ui-phone__chat > .ui-bubble{ grid-area:1 / 1; }
  .h-shop .ui-bubble > p{ max-width:100px; }
  .h-tag{ margin-bottom:4px; font-size:11px; }
  .h-pc__recs{ padding:5px 6px 0; }
  .h-pc__recs .ui-rec__body{ display:none; }
  .h-pc__recs .ui-rec__head{ border-bottom:0; }
  .h-pc__act{ padding:4px 6px 5px; }
  .h-pc__act > .ui-to{ display:none; }
  .h-pc__act > .ui-act{ margin-left:auto; height:22px; }
  .h-who-chip .ui-avatar{ display:none; }
  .h-ph{ gap:7px; }
  .h-ph__fr{ width:30px; height:52px; border-radius:7px; }
  .h-ph__fr > .ui-i{ --ui-i-s:15px; }
  .h-ph__who > b{ font-size:12px; }
  .h-corp .h-master .ui-pc__title{ padding:6px 10px; }
  .h-corp .h-master .ui-list__row{ grid-template-columns:22px minmax(0,1fr); grid-template-areas:"av name" "av via" "av last"; padding:6px 10px; column-gap:7px; }
  .h-corp .h-master .ui-list__row > .ui-avatar{ width:22px; height:22px; font-size:11px; }
  .h-via{ justify-self:start; height:18px; padding:0 7px; }
}

/* ── 4. 처음 시작하기 노선(4-16 · 7-1 · S3) ──────────────────────────────────
   사용자 10/19 직접 지시 — 폰 · PC 차선 0: ①→⑥ 을 같은 높이 한 줄에 순서대로(고리 · 노선 3px · 지나간 길 4px 주황 · 이름 · 메타 = 모두 고리 아래 같은 쪽)
   ≥1024 = 여섯 칸 고르게 · ≤1023 = 같은 한 줄을 가로 스크롤(scroll-snap · 열린 역이 보이게 · 오른쪽 84 = 문의 런처 자리라 비움)
   선 · 지나간 길의 왼쪽 끝 · 길이는 JS 가 ① · ⑥ 고리 가운데를 재서 놓음(measureRoute) */
.h-route{ margin-top:16px; }
.h-route__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; }
.h-route__t{ margin:0; font-size:18px; font-weight:750; line-height:1.35; letter-spacing:-.02em; color:var(--ink); }
.h-route__t a{ color:inherit; text-decoration:none; }
.h-route__t a:hover{ text-decoration:underline; text-underline-offset:3px; }
.h-route__sub{ margin:0; font-size:14px; font-weight:600; line-height:1.4; color:var(--ink-2); }
.h-route__guide{ margin-left:auto; font-size:14px; }
.h-route__map{ position:relative; margin-top:8px; }
/* ≥1280: 노선 머리는 판 아래 장면 단추 줄의 왼쪽 빈자리에 놓음(첫 화면 1280×800 · 1440×900 에 노선 ①~⑥ 이 다 들어오게 — 8-1 예산) */
@media (min-width:1280px){
  .h-route{ position:relative; margin-top:12px; }
  .h-route__head{ position:absolute; left:0; bottom:calc(100% + 16px); max-width:calc(100% - 720px); }
  .h-route__map{ margin-top:0; }
}
@media (min-width:1280px) and (max-width:1439px){ .h-route__head{ max-width:calc(100% - 640px); } }

.h-route__rail{ position:relative; }
.h-lines{ position:absolute; inset:0; pointer-events:none; }
.h-line, .h-pass{ position:absolute; left:0; top:var(--ly, 17px); width:0; display:block; border-radius:2px; }
.h-line{ height:3px; margin-top:-1.5px; background:var(--ink); }
.h-pass{ height:4px; margin-top:-2px; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); }
.h-stations{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:8px; margin:0; padding:0; list-style:none; }
.h-sti{ position:relative; min-width:0; }
.h-st{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%;
  margin:0; padding:6px 8px 6px 6px; border:0; border-radius:12px; background:none; color:var(--ink); text-align:left; cursor:pointer;
}
.h-st:focus-visible{ outline:3px solid var(--focus); outline-offset:-1px; }
.h-st__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; max-width:100%; }
.h-st__name{ font-size:15px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--ink); word-break:keep-all; }
.h-st__meta{ font-size:13px; font-weight:600; line-height:1.3; color:var(--ink-3); font-variant-numeric:tabular-nums; word-break:keep-all; }
.h-st__next{ display:none; color:var(--accent-ink); }
.h-st__seen{ display:none; }
.h-sti.is-next .h-st__next{ display:inline; }
.h-sti.is-seen .h-st__seen{ display:inline; }
.h-st:hover .h-st__name{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }

/* 고리 22(테두리 3 --ink · 속 --surface) · 다음 = 속 주황 점 12 · 봤어요 = --ink 채움 + 흰 ✓ · 열림 = 바깥 3px 주황 고리 */
.h-st__ring{
  position:relative; flex:none; display:block; width:22px; height:22px; border-radius:50%;
  border:3px solid var(--ink); background:var(--surface); box-sizing:border-box;
  transition:box-shadow var(--ui-fast) ease-out;
}
.h-st__ring::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--accent); transform:scale(0); }
.h-sti.is-next .h-st__ring::after{ transform:scale(1); }
.h-sti.is-seen .h-st__ring{ background:var(--ink); }
.h-sti.is-seen .h-st__ring::after{
  transform:scale(1); width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:0; background:var(--surface);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.h-st[aria-expanded="true"] .h-st__ring{ box-shadow:0 0 0 2px var(--bg), 0 0 0 5px var(--accent); }
.h-st:active .h-st__ring{ transform:scale(.94); }
.h-st__press{ position:absolute; left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:2px solid var(--accent); pointer-events:none; opacity:0; }
html.rm .h-st__ring{ transition:none; }

/* ≤1023: 같은 한 줄 · 가로 스크롤(칸 폭 고정 · 칸 머리에 맞춰 멈춤) — 노선 오른쪽 84 비움 */
@media (max-width:1023.98px){
  .h-route{ max-width:calc(100% - var(--lane-cut)); }
  .h-route__head{ gap:2px 12px; }
  .h-route__map{
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px 0;
  }
  .h-route__map::-webkit-scrollbar{ display:none; }
  .h-route__rail{ width:max-content; }
  .h-stations{ grid-template-columns:repeat(4, 136px); column-gap:6px; }
  .h-sti{ scroll-snap-align:start; }
  .h-st__name{ font-size:14px; }
}
@media (max-width:600.98px){
  .h-route__guide{ margin-left:0; }
}

/* ── 4b. 처음 시작하기 카드(사용자 10/20 참고 그림) ─────────────────────────────
   머리 = 「처음 시작하시나요?」 + 한 줄 + 오른쪽 「전체 가이드 보기 →」 · 카드 안에 01~06(번호 · 아이콘 · 제목 · 한 줄) 3칸 × 2줄
   사용자 10/23: ⑤ 첫 문자 보내기 · ⑥ 고객 이력 보기 뺌 → 01~04 한 줄 4칸 · 이름은 꺾이지 않게 한 줄(en 「Connect PC and Phone」 기준)
   ≥1280 = 번호 · 아이콘 · 이름 가로 · 1279~601 = 번호 · 아이콘 위 / 이름 아래 · ≤600 = 가로(꺾임 허용) · 이름 아래 짧은 설명 한 줄
   노선 선 · 고리 · 패널 꼭지는 숨김(JS 는 그대로 — 역을 누르면 아래 패널이 열림 · 기본 닫힘) · ≤1023 두 칸 · ≤600 한 칸 */
.h-lines, .h-route .h-st__ring, .h-panel__tip{ display:none !important; }
.h-route__head{ align-items:baseline; gap:4px 14px; margin-bottom:16px; }
.h-route__t{ font-size:30px; font-weight:800; line-height:1.25; letter-spacing:-.035em; }
.h-route__sub{ font-size:15px; font-weight:500; }
.h-route__guide{ margin-left:auto; font-size:16px; font-weight:700; }
.h-route__map{ margin-top:0; padding:8px 18px;   /* 위아래 14 → 8(사용자 10/21) */ border:1px solid var(--line); border-radius:24px; background:color-mix(in srgb, var(--surface) 55%, transparent); }
.h-stations{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px 16px; }
.h-st{ flex-direction:row; align-items:center; gap:10px; padding:12px; border-radius:16px; transition:background-color var(--ui-fast) ease-out; }
.h-st:hover{ background:var(--bg-2); }
.h-st:hover .h-st__name{ text-decoration:none; }
.h-st__no{ flex:none; width:22px; font-size:15px; font-weight:600; line-height:1; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.h-st__ico{ flex:none; display:grid; place-items:center; width:32px; height:32px; color:var(--ink); }
.h-st__ico svg{ width:26px; height:26px; }
.h-st__txt{ gap:3px; }
.h-st__name{ font-size:16px; font-weight:750; line-height:1.35; white-space:nowrap; }
.h-st__desc{ font-size:14px; font-weight:500; line-height:1.4; color:var(--ink-2); white-space:nowrap; }   /* 이름 아래 짧은 한 줄(사용자 10/23) */
.h-st[aria-expanded="true"]{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.h-st[aria-expanded="true"] :is(.h-st__no, .h-st__ico){ color:var(--accent-ink); }
@media (min-width:1280px){ .h-route__head{ position:static; max-width:none; } }   /* 머리를 판 아래 빈자리(절대 위치)에서 카드 위로 */
@media (min-width:601px) and (max-width:1279.98px){ .h-st{ flex-wrap:wrap; gap:6px 8px; } .h-st__txt{ flex:1 0 100%; } }   /* 칸이 좁아 번호 · 아이콘을 이름 위로 */
@media (max-width:1023.98px){
  .h-route__t{ font-size:26px; }
  .h-route__map{ overflow:visible; padding:10px; }
  .h-route__rail{ width:auto; }
  .h-stations{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 12px; }
  .h-sti{ scroll-snap-align:none; }
}
@media (max-width:600.98px){
  .h-route__t{ font-size:22px; }
  .h-stations{ grid-template-columns:minmax(0,1fr); }
  .h-st{ padding:12px; gap:10px; }
  :is(.h-st__name, .h-st__desc){ white-space:normal; }
}

/* ── 5. 역 패널(4-16 · S3) ──────────────────────────────────────────────────
   사용자 10/19 직접 지시 — 패널 높이 고정 + 글 스크롤:
   ≥1024 = 높이 = 왼쪽 16:9 상자(플레이어 · ⑤⑥ 화면 카드) · 오른쪽 글(단계 · 설명 · 단추)은 그 칸 안에서 세로 스크롤
   ≤1023 = 16:9 상자 위 · 글 아래(글 칸 = 모든 역 같은 고정 높이 · 칸 안에서 스크롤) · 역을 바꿀 때 높이 움직임 0 */
.h-panel{ position:relative; display:none; margin-top:20px; }
.h-panel.is-open{ display:block; }
.h-panel__tip{
  position:absolute; z-index:2; top:-9px; left:0; width:18px; height:18px; margin-left:-9px;
  background:var(--surface); border-radius:3px; transform:translateX(var(--tip-x, 60px)) rotate(45deg);
  box-shadow:-2px -2px 6px rgba(44,58,66,.05);
}
html[data-theme="dark"] .h-panel__tip{ box-shadow:-2px -2px 6px rgba(0,0,0,.3); }
.h-panel__clip{ position:relative; z-index:1; overflow:hidden; border-radius:var(--r-board); background:var(--surface); box-shadow:var(--sh-2); }
.h-panel__in{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"media head" "media body";
  grid-template-rows:auto minmax(0,1fr); column-gap:32px; padding:24px;
}
.h-panel__head{ grid-area:head; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:32px; min-width:0; }
.h-panel__loc{ min-width:0; margin:0; font-size:13px; font-weight:600; line-height:1.4; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h-panel__close{
  flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin:-4px -6px -4px 0;
  border-radius:10px; color:var(--ink-2); cursor:pointer;
}
.h-panel__close svg{ width:20px; height:20px; }
.h-panel__close:hover{ background:var(--bg-2); color:var(--ink); }
.h-panel__media{ grid-area:media; position:relative; min-width:0; align-self:start; }
.h-panel__media .tx-player{ width:100%; }
/* 글 칸 = 스크롤 칸(≥1024 은 contain:size — 글 길이가 패널 높이를 늘리지 않음 · 높이는 왼쪽 상자가 정함) */
.h-panel__body{
  grid-area:body; position:relative; min-width:0; min-height:0; display:flex; flex-direction:column;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  margin:0 -6px; padding:6px 6px 2px;
}
.h-panel__body.is-more{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
@media (min-width:1024px){ .h-panel__body{ contain:size; } }
.h-panel__swap{ min-width:0; }
.h-panel__h3{ margin:0; font-size:20px; font-weight:750; line-height:1.35; letter-spacing:-.02em; color:var(--ink); }
.h-panel__h3:focus{ outline:none; }
.h-panel__h3:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.h-panel__text{ margin-top:10px; }
.h-panel__text p{ margin:0 0 10px; font-size:16px; font-weight:450; line-height:1.7; color:var(--ink); word-break:keep-all; }
.h-panel__text p:last-child{ margin-bottom:0; }
.h-steps{ margin-top:14px; }
.h-panel__guides{ margin-top:16px; }
.h-panel__guides > p{ margin:0 0 8px; font-size:13px; font-weight:700; line-height:1.4; color:var(--ink-3); }
.h-panel__guides ul{ display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.h-panel__guides a{ display:inline-flex; align-items:center; gap:6px; padding:5px 0; font-size:15px; font-weight:650; line-height:1.45; color:var(--accent-ink); text-decoration:none; }
.h-panel__guides a:hover{ text-decoration:underline; text-underline-offset:3px; }
.h-panel__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:20px; padding-bottom:4px; }
.h-panel__btns .tx-btn{ min-height:44px; }

/* ④ 두 길 스위치(role=tablist · 앞 · 뒤 가장자리 표시기) — 한 역 안에서 폰 주소록 · PC 엑셀 고르기 · 두 단추 폭 같게(사용자 10/23) */
.h-switch{ position:relative; flex:none; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; width:max-content; max-width:100%; margin:0 0 14px; padding:3px; border-radius:12px; background:var(--bg-2); }
.h-switch[hidden]{ display:none; }
.h-switch__ind{ position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0; border-radius:9px; background:var(--surface); box-shadow:var(--sh-1); pointer-events:none; }
.h-switch [role="tab"]{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 12px; margin:0; border:0; border-radius:9px;
  background:transparent; color:var(--ink-2); font-size:14px; font-weight:650; line-height:1.3; text-align:left; cursor:pointer;
}
.h-switch [role="tab"][aria-selected="true"]{ color:var(--ink); }
.h-switch [role="tab"] svg{ width:16px; height:16px; flex:none; }

/* 화면 카드(⑤ 전송 · ⑥ 스토리 · en ④ 폰 주소록 길) = 플레이어와 같은 16:9 상자 — 속 화면은 설계 폭(680 · 좁으면 0.6 배까지)으로 그리고 JS 가 상자에 맞춰 줄임(fitCard) */
.h-card{ position:relative; aspect-ratio:16/9; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-1); background:var(--ui-surface-2, var(--surface-2)); }
.h-card[hidden]{ display:none; }
.h-card > .ui-send, .h-card > .ui-board{ position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:0 0; }
.h-card--send .ui-send{ --ui-board-r:var(--r-card); }
.h-card__fx{ position:absolute; inset:0; z-index:9; pointer-events:none; }
.h-card__replay{
  position:absolute; z-index:10; left:12px; bottom:12px; margin:0; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 13px 0 10px;
  border:1.5px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--ink);
  font-size:14px; font-weight:650; line-height:1; cursor:pointer; box-shadow:var(--sh-1);
}
.h-card__replay svg{ width:14px; height:14px; }
.h-card__replay[hidden]{ display:none; }
.h-card .h-hl{ position:absolute; z-index:8; border:2.5px solid var(--accent); border-radius:13px; pointer-events:none; opacity:0; }
/* en ④ 폰 주소록 길(맞는 미국판 영상 0 — 운영 en 경로를 화면 카드로) */
.h-card--path{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; background:var(--bg-2); }
.h-path__ico{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }
.h-path__ico svg{ width:28px; height:28px; }
.h-path__line{ max-width:100%; margin:0; padding:8px 14px; border-radius:12px; background:var(--surface); font-size:15px; font-weight:650; line-height:1.45; color:var(--ink); text-align:center; word-break:keep-all; }

@media (min-width:1024px) and (max-width:1279.98px){
  .h-panel__in{ column-gap:24px; padding:20px; }
}
@media (max-width:1023.98px){
  .h-panel{ margin-top:16px; }
  .h-panel__in{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "media" "body"; grid-template-rows:auto auto auto; row-gap:12px; padding:16px; }
  .h-panel__body{ height:var(--h-body, 320px); padding-top:2px; }
  .h-panel__swap, .h-panel__btns, .h-switch{ max-width:calc(100% - var(--lane-cut) + 12px); }   /* 패널 안 글 · 단추 줄 = 화면 오른쪽 84 앞에서 끝(3-8 채팅 길) */
}
@media (max-width:600.98px){
  .h-panel{ margin:12px 0 10px; }
  .h-panel__clip{ border-radius:18px; }
  .h-panel__in{ padding:14px; }
  .h-panel__h3{ font-size:18px; }
  .h-panel__btns{ flex-direction:column; align-items:stretch; }
  .h-switch{ display:flex; flex-direction:column; width:100%; }
  .h-path__line{ font-size:13px; }
}

/* ── 6. 이야기(블로그 3 · 8-1 #9) ─────────────────────────────────────────── */
.h-blog{ margin-top:var(--section-gap); }
.h-blog__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; margin-bottom:24px; }
.h-blog__head .t-h2{ margin:0; }
.h-blog__list{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.h-blog__list .tx-post{ height:100%; min-height:150px; }
@media (max-width:1023.98px){
  .h-blog__list{ grid-template-columns:minmax(0,1fr); max-width:calc(100% - var(--lane-cut)); }
  .h-blog__list .tx-post{ min-height:0; }
}

/* ── 7. en 홈(8-13) — ko 와 같은 노선 · 패널 · 플레이어(사용자 10/19) · 역 메타 0(새 문구 0) ──── */
html[lang="en"] .h-q{ letter-spacing:-.035em; }
html[lang="en"] .h-st__meta{ display:none; }
@media (min-width:1024px) and (max-width:1279.98px){ html[lang="en"] .h-q{ font-size:44px; } }   /* 판단: en 질문(33자)이 384 칸에서 석 줄 · 한 낱말 줄이 되지 않게 */

/* 줄인 움직임 — 즉시(JS 도 즉시 · 여기는 안전망) */
html.rm .h-chip, html.rm .h-pp, html.rm .h-scene{ transition:none; }

/* ── 처음 시작하기 패널 = 영상만 가로폭 전체(사용자 10/19 「오른쪽에 타임라인이나 설명이나 가이드보기 버튼 다음 연락처 가져오기 버튼 이부분을 없애고
      그냥 가로폭 전체를 영상 나오도록 해줘. 세로폭도 그에 맞게 늘려주고.」) — 글 · 장 목록 · 단추 0 · ④ 두 방법 단추와 닫기만 영상 위 한 줄 ── */
.h-panel__in{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"sw head" "media media"; grid-template-rows:minmax(46px,auto) auto; row-gap:12px; }   /* 첫 줄 높이 고정 — ④(두 방법 단추)와 다른 역의 패널 높이 같게 */
.h-panel__body{ display:contents; }
.h-panel__swap, .h-panel__btns, .h-panel__loc{ display:none !important; }
.h-panel .h-switch{ grid-area:sw; margin:0; align-self:center; }
.h-panel__head{ grid-area:head; justify-content:flex-end; min-height:0; }
.h-panel__media{ grid-area:media; }
@media (max-width:1023.98px){
  .h-panel__in{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"sw head" "media media"; grid-template-rows:minmax(46px,auto) auto; }
}

/* 처음 시작하기 역 이름 아래 「영상 0:36」 「같은 영상 0:22부터」 「폰 0:32 · PC 0:36」 「화면으로 보기」(+ 「다음 ·」) 줄 0 — 사용자 10/19 「이런 텍스트 없애줘. 디자인은 지금 그대로.」 */
.h-route .h-st__meta{ display:none !important; }

/* 홈 칸 사이 여유를 넉넉하게(사용자 10/19 「홈화면의 섹션별 간격이나 여유를 좀 여유있게」 → 「간격을 더 여유있게 해줘.」) → 「아주 조금만 좁혀줘」) — 홈에서만 칸 간격 96 → 176(≤1023 64 → 112) · 히어로 → 처음 시작하기 16 → 92 → 36(사용자 10/21 「개인 법인 스위치 사이 여백 줄여줘」 · ≤1023 64) */
.h-main{ --section-gap:176px; }
.h-route{ margin-top:36px; }
@media (max-width:1023.98px){
  .h-main{ --section-gap:112px; }
  .h-route{ margin-top:64px; }
}