/*
 * shell.css — 앱 셸: 왼쪽 사이드바(메뉴 + 내가 본 사주 + 계정 칸)와 메인 첫 화면(.gd-*) 배치, landing/saju 뷰 전환.
 * ============================================================
 * tokens.css 변수만 쓴다 — styles.css 를 안 싣는 페이지(compat/법정/요금/소개/start/map)에서도 같은 모양이 나와야 한다.
 * 수치는 tokens.css 의 --shell-* 토큰. 분기점은 701(사이드바 고정 대 시트) / 768 / 640 셋뿐이다.
 * 상태 클래스(<html>):
 *   shell              head 인라인이 첫 페인트 전에 세운다. 이 파일 규칙 전부의 스위치.
 *   shell-pinned       701px 이상에서 사이드바를 고정한 상태. 기본은 1280 이상 고정, 701~1279 접힘이고 사용자가 고르면
 *                      그 값(localStorage roum_shell_side)을 따른다. head 인라인이 첫 페인트 전에 같은 식으로 세운다.
 *   shell-peek         접힌 상태에서 토글에 올린 엿보기 패널(본문 위 오버레이, 본문은 안 움직인다).
 *   shell-drawer-open  700px 이하 전체 폭 시트가 열린 상태.
 *   shell-acct         coin-ui 의 .coin-acct 가 있는 페이지 — 사이드바를 고정했을 때 칩을 하단 계정 칸으로 옮긴다.
 * 스크롤러는 window 그대로다. 사이드바만 fixed 이고 본문은 body padding-left(--shell-w) 하나로 민다.
 * 고정/해제 사이에는 전환이 없다. 움직임은 엿보기(.14s)와 시트(.3s)뿐이다.
 */

/* ════════ 폭 상태 ════════
   701 이상은 GNB 를 숨기고 --gnb-h 를 0 으로 둔다 — 결과 네비 top, 점프 착지 여백, 코인칩 오프셋이 같은 변수로 같이 맞는다. */
@media (min-width: 701px) {
  html.shell { --gnb-h: 0px; }
  html.shell #roumGnb { display: none; }
  html.shell.shell-pinned { --shell-w: var(--shell-w-open, 288px); }
  html.shell body { padding-left: var(--shell-w, 0px); }
}

html.shell body { background: var(--shell-bg-page, #FBFAF8); }

/* 옛 히어로는 첫 화면 인사말과 작성창이 대신한다(DOM 은 남긴다 — 히어로 카드 스크립트가 노드를 찾는다). */
html.shell .hero-v2 { display: none; }

/* 700px 이하 상단 바는 nav.js 의 GNB 그대로다(두 벌 금지). 시트가 왼쪽에서 나오므로 햄버거만 왼쪽 끝으로 옮긴다. */
@media (max-width: 700.98px) {
  html.shell .gnb-right { order: -1; margin-left: 0; margin-right: 4px; }
}

/* ════════ 사이드바 ════════ */
.shell-side { display: none; }
html.shell .shell-side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--shell-w-open, 288px);
  padding: max(4px, env(safe-area-inset-top)) 8px max(6px, env(safe-area-inset-bottom));
  padding-left: max(8px, env(safe-area-inset-left));
  background: var(--shell-bg-side, #FBFAF8);
  border-right: 0.5px solid var(--shell-line, rgba(26, 24, 48, 0.08));
  color: var(--color-text-primary, #1A1830);
  font-family: var(--font-sans, "Pretendard", -apple-system, sans-serif);
  font-size: 14px;
  line-height: 21px;
  letter-spacing: normal;
  word-break: keep-all;
}

/* 701 이상 접힘 — 사이드바는 통째로 사라지고 토글만 남는다. 토글에 올리면 같은 패널이 본문 위로 떠오른다(엿보기). */
@media (min-width: 701px) {
  html.shell:not(.shell-pinned) .shell-side {
    z-index: 860;
    visibility: hidden;
    background: var(--shell-composer-bg, #FFFFFF);
    border-right: 0;
    box-shadow: var(--shell-peek-shadow);
    clip-path: inset(0 100% 0 0);
    transform: translateX(-4px);
    transition: clip-path var(--shell-peek-dur, 140ms) linear, transform 80ms ease, visibility 0s linear var(--shell-peek-dur, 140ms);
  }
  html.shell.shell-peek:not(.shell-pinned) .shell-side {
    visibility: visible;
    clip-path: inset(0 -64px 0 0);
    transform: none;
    transition: clip-path var(--shell-peek-dur, 140ms) linear, transform 80ms ease;
  }
}

/* 700 이하 — 왼쪽에서 밀려 들어오는 전체 폭 시트. 닫혀 있을 땐 visibility 로 탭 순서와 접근성 트리에서도 뺀다.
   레이어는 nav.js 드로어 자리(코인칩 9000 위, 게이트 9999 와 모달 10000 아래). 화면을 다 덮으므로 스크림은 없다. */
@media (max-width: 700.98px) {
  html.shell .shell-side {
    z-index: 9501;
    width: 100%;
    border-right: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--shell-sheet-dur, 300ms) var(--shell-sheet-ease, ease), visibility 0s linear var(--shell-sheet-dur, 300ms);
  }
  html.shell.shell-drawer-open .shell-side {
    transform: none;
    visibility: visible;
    transition: transform var(--shell-sheet-dur, 300ms) var(--shell-sheet-ease, ease);
  }
}

/* ── 사이드바 토글(701 이상) — 화면 (12,12) 에 고정. 고정 상태에선 사이드바 머리 위에, 접힘 상태에선 혼자 떠 있다. ── */
.shell-toggle { display: none; }
@media (min-width: 701px) {
  html.shell .shell-toggle {
    position: fixed;
    top: 12px;
    left: max(12px, env(safe-area-inset-left));
    z-index: 870;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--color-text-secondary, #5B5570);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
.shell-toggle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.shell-toggle svg { display: block; width: 18px; height: 18px; }

/* 접힘 상태에선 떠 있는 토글(12~36px)이 본문 왼쪽 위에 겹친다 — 본문 열이 화면 왼쪽에 붙는 폭(1180 미만)에서
   위에 붙는 결과 네비만 토글 폭만큼 안쪽에서 시작한다(점프 착지/스파이 수식은 높이만 보므로 그대로다). */
@media (min-width: 701px) and (max-width: 1179.98px) {
  html.shell:not(.shell-pinned) .result-nav,
  html.shell:not(.shell-pinned) .result-tabbar { padding-left: 34px; }
}

/* ── 머리(브랜드 + 시트 닫기) — 머리 줄 44px. 701 이상에선 왼쪽 36px 를 떠 있는 토글에 비워 둔다. ── */
.shell-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: var(--shell-head-h, 44px);
  padding: 0 4px 0 30px;
}
.shell-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 6px;
  border-radius: 6px;
  color: var(--color-text-primary, #1A1830);
  text-decoration: none;
  white-space: nowrap;
}
.shell-logo { display: block; flex: none; width: 18px; height: 18px; color: var(--color-brand-mark, #3F4560); }
.shell-wordmark {
  font-family: var(--font-serif, "Hahmlet", "Nanum Myeongjo", serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 20px;
}
.shell-close { display: none; }
@media (max-width: 700.98px) {
  .shell-head { padding-left: 0; }
  html.shell .shell-close {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--color-text-secondary, #5B5570);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .shell-close::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}
.shell-side .sh-ic { display: block; flex: none; width: var(--shell-icon, 20px); height: var(--shell-icon, 20px); }

/* ── 몸통(메뉴 + 내가 본 사주) — 사이드바 안에서만 스크롤한다(본문 스크롤러와 무관) ── */
.shell-body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -8px;
  padding: 4px 8px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.shell-nav { display: flex; flex-direction: column; }

/* 행 — 32px, 간격 0.5px, 라운드 8px. 아이콘 20px 를 28px 상자에(사이드바 x=10), 글자는 x=46 에서 시작한다.
   손가락 입력(pointer: coarse)과 700 이하 시트에선 44px 로 키운다(터치 타깃 44px 규칙). */
.shell-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--shell-row-h, 32px);
  margin: 0 0 0.5px;
  padding: 0 8px 0 2px;
  border: 0;
  border-radius: var(--shell-row-r, 8px);
  background: none;
  color: var(--color-text-secondary, #5B5570);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shell-item[hidden] { display: none; }
.shell-item > .sh-ic { margin: 0 4px; }
.shell-item[aria-current="page"],
.shell-item.is-on { background: var(--shell-row-active, rgba(26, 24, 48, 0.07)); color: var(--color-text-primary, #1A1830); }
.shell-lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shell-new { color: var(--color-text-primary, #1A1830); }

/* ── 내가 본 사주 — 구역 사이 28px, 라벨 13px 아래 9px, 한 줄 33px 행 ── */
.shell-saved { display: flex; flex-direction: column; margin-top: var(--shell-group-gap, 28px); }
.shell-sec-lb {
  margin: 0 0 9px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  color: var(--shell-muted, #8C879B);
}
.shell-saved-list { list-style: none; margin: 0; padding: 0; }
.shell-saved-list:empty { display: none; }
.shell-saved-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 33px;
  margin: 0 0 0.5px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--shell-row-r, 8px);
  background: none;
  color: var(--color-text-secondary, #5B5570);
  font-family: inherit;
  font-size: 14px;
  line-height: 21px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shell-saved-btn[aria-current="true"] { background: var(--shell-row-active, rgba(26, 24, 48, 0.07)); color: var(--color-text-primary, #1A1830); }
.ssi-nm { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
.ssi-nm-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssi-star { display: block; flex: none; width: 11px; height: 11px; color: var(--color-butter, #C9A24B); }
.ssi-sub { flex: none; font-size: 12px; line-height: 16px; color: var(--shell-muted, #8C879B); white-space: nowrap; }
.shell-saved-note {
  margin: 0 0 8px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text-secondary, #5B5570);
  white-space: normal;
}
.shell-saved-note[hidden] { display: none; }
.shell-saved-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px; }
.shell-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 0.5px solid var(--shell-line-strong, rgba(26, 24, 48, 0.2));
  border-radius: var(--shell-row-r, 8px);
  background: var(--shell-composer-bg, #FFFFFF);
  color: var(--color-text-primary, #1A1830);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shell-chip::before { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.shell-chip.is-ghost { border-color: transparent; background: none; color: var(--color-text-secondary, #5B5570); padding: 0 6px; }
.shell-chip[hidden] { display: none; }

/* ── 바닥(계정 칸 + 화면 모드) — 계정 칸 32px, 화면 아래 8px(사이드바 안쪽 6 + 2) ── */
.shell-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 6px 0 2px; }
.shell-me { flex: 1 1 auto; width: auto; margin: 0; }
.shell-theme {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--shell-btn, 32px);
  height: var(--shell-btn, 32px);
  padding: 0;
  border: 0;
  border-radius: var(--shell-btn-r, 8px);
  background: none;
  color: var(--color-text-secondary, #5B5570);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shell-theme::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.shell-theme .sh-ic-sun { display: none; }
[data-theme="dark"] .shell-theme .sh-ic-moon { display: none; }
[data-theme="dark"] .shell-theme .sh-ic-sun { display: block; }

/* 손가락 입력과 시트 — 행 44px */
@media (pointer: coarse) {
  html.shell .shell-item,
  html.shell .shell-saved-btn { min-height: 44px; }
}
@media (max-width: 700.98px) {
  html.shell .shell-item,
  html.shell .shell-saved-btn { min-height: 44px; }
}

/* 포커스 표시 — 사이드바 가장자리에서 바깥 링이 잘리지 않게 안쪽으로 그린다. */
.shell-side a:focus-visible,
.shell-side button:focus-visible,
.shell-toggle:focus-visible {
  outline: 2px solid var(--color-accent, #8F7BF0);
  outline-offset: -2px;
}

/* ════════ coin-ui 계정 칩 → 고정 사이드바의 하단 계정 칸(CSS 만) ════════
   coin-ui.js 는 칩을 body 직속 fixed 로 붙인다 — 자리와 모양만 옮기고 JS 는 그대로 둔다. 접힘/엿보기/시트에선 원래 자리(오른쪽 위).
   .gnb-on:has(#results.show) .coin-acct 의 top 은 :has 안의 #results 때문에 특이도가 (1,3,0) 이라 따로 이긴다 —
   :has 를 모르는 엔진이 목록 전체를 버리지 않게 그 규칙은 혼자 둔다. */
@media (min-width: 701px) {
  /* 고정 사이드바에선 coin-ui 칩이 계정 칸을 맡는다 — 그 칩은 DOM 맨 끝이라 Tab 순서가 늦으니, 사이드바 자리의 MY 버튼은 화면 밖에 두되 키보드로 닿으면 나타난다 */
  html.shell-acct.shell-pinned .shell-me { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.shell-acct.shell-pinned .shell-me:focus-visible { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; }
  html.shell.shell-pinned .coin-acct {
    top: auto;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    box-sizing: border-box;
    width: calc(var(--shell-w-open, 288px) - 16px - var(--shell-btn, 32px) - 4px);
    max-width: none;
    min-height: 32px;
    height: 32px;
    padding: 0 6px 0 4px;
    gap: 6px;
    justify-content: space-between;
    border: 0;
    border-radius: var(--shell-row-r, 8px);
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.shell.shell-pinned .coin-acct .ca-id { order: -1; gap: 6px; }
  html.shell.shell-pinned .coin-acct .ca-ava { width: 24px; height: 24px; font-size: 0.7rem; box-shadow: none; }
  html.shell.shell-pinned .coin-acct .ca-name { max-width: 104px; font-size: 14px; font-weight: 400; color: var(--color-text-secondary, #5B5570); }
  html.shell.shell-pinned .coin-acct .ca-coin { padding: 3px 8px 3px 5px; gap: 5px; }
  html.shell.shell-pinned .coin-acct .ca-dot { width: 14px; height: 14px; }
  /* 고정 사이드바 안이라 아래로 읽는 동안 칩을 치울 이유가 없다. */
  html.shell.shell-pinned .coin-acct.scroll-hide { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
}
@media (min-width: 701px) {
  html.shell.shell-pinned body.gnb-on:has(#results.show) .coin-acct { top: auto; }
}
@media (min-width: 701px) and (pointer: coarse) {
  html.shell.shell-pinned .coin-acct { height: 44px; min-height: 44px; }
  html.shell-acct.shell-pinned .shell-foot { min-height: 44px; }
}

/* ════════ 메인 첫 화면(index 의 section#shellLanding) ════════
   배치만 여기서 한다. 작성창 카드와 안쪽(입력칸, 버튼, 말풍선, 칩 모양)은 guide.css 가 --shell-* 토큰으로 입힌다. */
html.shell body.view-landing main > .landing-col,
html.shell body.view-landing #results { display: none; }
html.shell body:is(.view-saju, .view-chat, .view-grow) #shellLanding { display: none; }
/* 첫 화면에는 장식 레이어(새벽 워시, 그레인)를 깔지 않는다. */
html.shell body.view-landing::before { content: none; }
html.shell body.view-landing main {
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: 0;
  min-height: calc(100vh - var(--gnb-h, 0px));
  min-height: calc(100svh - var(--gnb-h, 0px));
}

/* 세로 자리: 768 이상은 인사말 윗변 = 60px(머리 48 + 12) + 32vh + 9.1px(높이 900 이상) 또는 60px + max(28vh + 9.1px, 192px).
   1440x900 에서 y=357. 768 미만은 10vh, 700 이하는 GNB 아래 10vh + 24px. 좌우 여백 64 / 28 / 16(작성창 기준).
   body 에 두는 이유 — main 밖의 사업자 정보 푸터도 같은 좌우 여백을 쓴다. */
html.shell body.view-landing { --gd-x: 64px; --gd-top: calc(60px + max(28vh + 9.1px, 192px)); }
@media (min-height: 900px) {
  html.shell body.view-landing { --gd-top: calc(60px + 32vh + 9.1px); }
}
/* 가로로 든 폰(높이 520 이하) — 하한 192px 이면 작성창이 접힌 화면 아래로 밀린다 */
@media (min-width: 701px) and (max-height: 520px) {
  html.shell body.view-landing { --gd-top: calc(60px + 6vh); }
}
@media (max-width: 767.98px) {
  html.shell body.view-landing { --gd-x: 28px; --gd-top: calc(60px + 10vh); }
}
@media (max-width: 700.98px) {
  html.shell body.view-landing { --gd-top: calc(10vh + 24px); }
}
@media (max-width: 639.98px) {
  html.shell body.view-landing { --gd-x: 16px; }
}

.gd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--shell-stack-gap, 24px);
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: max(24px, calc(var(--gd-top, 0px) - var(--gd-ev, 0px))) var(--gd-x, 16px) 32px;
}
html.shell body.view-landing #shellLanding { flex: 1 0 auto; }
.gd-hero { width: 100%; max-width: var(--shell-greet-max, 672px); text-align: center; }
.gd-hero[hidden] { display: none; }
.gd-greet {
  margin: 0;
  font-family: var(--font-serif, "Hahmlet", "Nanum Myeongjo", serif);
  font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--color-text-primary, #1A1830);
  text-wrap: balance;
  word-break: keep-all;
}
/* 인사말 앞 나침반 마크 — 1em, 간격 .45em. guide.js 가 글자를 바꿔도(textContent) 지워지지 않게 가상 요소로 그린다. */
.gd-greet::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.45em;
  vertical-align: -0.16em;
  background: var(--shell-greet-mark, #8F7BF0);
  -webkit-mask: url("assets/brand/mark.svg") center / contain no-repeat;
  mask: url("assets/brand/mark.svg") center / contain no-repeat;
}
.gd-sub {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary, #5B5570);
  word-break: keep-all;
}
.gd-thread { display: flex; flex-direction: column; width: 100%; max-width: var(--shell-composer-max, 640px); }   /* 간격은 guide.css 몫 */
.gd-thread:empty { display: none; }
.gd-composer { position: relative; box-sizing: border-box; width: 100%; max-width: var(--shell-composer-max, 640px); }
/* 칩 줄은 작성창 8px 아래 */
.gd-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: var(--shell-composer-max, 640px);
  margin-top: calc(8px - var(--shell-stack-gap, 24px));
}
.gd-chips:empty { display: none; }

/* 640 미만 — 작성창을 화면 아래에 붙인다(첫 화면이 화면 높이를 채우므로 margin-top:auto 로 바닥에 선다). */
@media (max-width: 639.98px) {
  html.shell body.view-landing #shellLanding { padding-bottom: 8px; }
  html.shell body.view-landing:not(.gd-active) #gdComposer { margin-top: auto; }
}

/* 대화가 쌓이면(guide.js 가 body.gd-active) 인사말을 걷고 대화를 위에서부터, 작성창은 화면 아래에 붙인다. */
/* 제목 탐색(h1)은 남긴다 — 대화가 시작된 첫 화면은 인사말 h1 을 화면 밖에 두고, saju 뷰는 옛 히어로의 h1 만 보조기기에 남긴다(버튼 등은 visibility 로 뺀다). */
body.gd-active #gdHero { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.shell body.view-saju .hero-v2 { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; visibility: hidden; }
html.shell body.view-saju .hero-v2 .hero-v2-headline { visibility: visible; }
html.shell body.view-saju .hero-v2, html.shell body.view-saju .hero-v2 * { animation: none; transition: none; }
html.shell body.gd-active #shellLanding { justify-content: flex-start; padding-top: 24px; padding-bottom: 0; }
/* 접힘/엿보기/시트에선 계정 칩이 오른쪽 위 fixed(44px) — 오른쪽 정렬 첫 말풍선이 그 밑에 깔리지 않게 위 여백을 칩 아래로 */
html.shell:not(.shell-pinned) body.gd-active #shellLanding { padding-top: 64px; }
/* 결과를 한 번 본 뒤(#results.show 가 남음) 첫 화면으로 돌아오면 nav.css 가 칩을 결과 네비 아래(+54px)로 내린다 — 첫 화면엔 그 네비가 없으니 제자리로(:has 규칙은 혼자 둔다) */
html.shell body.view-landing.gnb-on:has(#results.show):has(#shellLanding) .coin-acct { top: calc(var(--gnb-h, 0px) + 8px); }
/* 대화가 길어지면 '맨 위로' 버튼이 바닥 고정 작성창의 버튼(새 대화/보내기)을 덮는다 — 첫 화면 대화 중에만 숨긴다(saju 뷰는 그대로) */
html.shell body.view-landing.gd-active .scroll-top { display: none; }
body.gd-active .gd-composer {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 5;
  margin-top: auto;
}
@media (max-width: 639.98px) {
  body.gd-active .gd-composer { bottom: max(8px, env(safe-area-inset-bottom)); }
}
/* 충전 이벤트 배너(#evtBanner) — index 스크립트가 main 안 .landing-col 앞, 곧 #shellLanding 뒤에 꽂는다(DOM 은 그대로).
   640 이상은 첫 화면 아래쪽에 작성창 폭으로 가운데. 640 미만은 작성창이 화면 바닥에 붙어야 하므로 첫 화면 맨 위로 올리고
   (코인칩 아래 64px), 그만큼 인사말 위 여백에서 뺀다(:has 를 모르는 엔진은 인사말이 그만큼 내려갈 뿐이다). */
html.shell body.view-landing #evtBanner {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--gd-x, 16px));
  max-width: var(--shell-composer-max, 640px);
  margin: 0 auto 16px;
}
@media (max-width: 639.98px) {
  html.shell body.view-landing #evtBanner { order: -1; margin: 64px auto 0; }
  html.shell body.view-landing main:has(> #evtBanner) { --gd-ev: 126px; }
}

/* 첫 화면 맨 아래 사업자 정보(전상법 초기화면 표시, 12px/19.5px 가운데) — 640 이상.
   푸터(business-info.js 가 body 끝 div[data-biz-footer] 에 그린다)는 옮기지 않는다. shell.js 가 그 높이를 --shell-foot-h 로
   재 주면 첫 화면(main) 최소 높이에서 빼서 푸터가 첫 화면 바닥에 서게 한다. 640 미만은 작성창이 바닥이라 푸터는 아래로 둔다.
   모양은 첫 화면에서만 줄인다(saju 뷰와 다른 페이지 푸터는 legal.css 그대로). */
@media (min-width: 640px) {
  /* 폴백 146px 은 줄인 푸터의 실측 높이(702~1440) — shell.js 가 재기 전 첫 페인트에서도 푸터가 제자리에 선다. */
  html.shell body.view-landing:not(.gd-active) main {
    min-height: calc(100vh - var(--gnb-h, 0px) - var(--shell-foot-h, 146px));
    min-height: calc(100svh - var(--gnb-h, 0px) - var(--shell-foot-h, 146px));
  }
  html.shell body.view-landing .biz-footer {
    box-sizing: border-box;
    max-width: calc(var(--shell-composer-max, 640px) + 2 * var(--gd-x, 64px));
    margin: 0 auto;
    padding: 8px var(--gd-x, 64px) max(12px, env(safe-area-inset-bottom));
    border-top: 0;
    font-size: 12px;
    line-height: 19.5px;
    text-align: center;
    word-break: keep-all;
  }
  html.shell body.view-landing .biz-footer .biz-links,
  html.shell body.view-landing .biz-footer .biz-sns { display: inline-flex; vertical-align: middle; }
  html.shell body.view-landing .biz-footer .biz-links { justify-content: center; gap: 0 14px; margin: 0; font-size: 12px; }
  html.shell body.view-landing .biz-footer .biz-sns { gap: 0; margin: 0 0 0 6px; }
  html.shell body.view-landing .biz-footer .biz-sns-ic { width: 16px; height: 16px; }
  html.shell body.view-landing .biz-footer .biz-cs { margin: 0; font-size: 12px; }
  html.shell body.view-landing .biz-footer .biz-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin: 0; }
  html.shell body.view-landing .biz-footer .biz-row { gap: 4px; }
  html.shell body.view-landing .biz-footer .biz-row dt { min-width: 0; font-weight: 500; }
  html.shell body.view-landing .biz-footer .biz-ftc { margin-left: 4px; }
  html.shell body.view-landing .biz-footer .biz-copyright { margin-top: 0; font-size: 12px; }
}
/* 마우스에서만 링크/아이콘 행을 낮춘다 — 손가락 입력은 legal.css 의 44px 를 그대로 쓴다. */
@media (min-width: 640px) and (pointer: fine) {
  html.shell body.view-landing .biz-footer .biz-links a { min-height: 28px; }
  html.shell body.view-landing .biz-footer .biz-sns-link { width: 28px; height: 28px; border-radius: var(--shell-btn-r, 8px); }
}

/* 작성창 아래 틈으로 대화 글자가 비치지 않게 바탕색 띠를 깐다(guide.css 는 .gd-composer::after 를 쓰지 않는다). */
body.gd-active .gd-composer::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 100%;
  height: calc(max(12px, env(safe-area-inset-bottom)) + 1px);
  background: var(--shell-bg-page, #FBFAF8);
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 인쇄(약관/환불 정책 등) — 사이드바와 토글을 빼고 본문을 왼쪽으로 되돌린다. */
@media print {
  .shell-side,
  .shell-toggle { display: none !important; }
  html.shell body { padding-left: 0 !important; }
}

/* reduce-motion — 엿보기/시트 전환을 끈다. 캐스케이드 규약대로 파일 최말미. */
@media (prefers-reduced-motion: reduce) {
  html.shell .shell-side,
  html.shell:not(.shell-pinned) .shell-side,
  html.shell.shell-peek:not(.shell-pinned) .shell-side,
  html.shell.shell-drawer-open .shell-side { transition: none; }
}

/* 호버는 호버가 있는 입력에서만 — 터치에서 탭한 뒤 바탕이 눌린 채 남지 않게(styles.css 와 같은 규약) */
@media (hover: hover) {
.shell-toggle:hover { background: var(--shell-row-hover, rgba(26, 24, 48, 0.05)); color: var(--color-text-primary, #1A1830); }
.shell-item:not([aria-current="page"]):not(.is-on):hover { background: var(--shell-row-hover, rgba(26, 24, 48, 0.05)); color: var(--color-text-primary, #1A1830); }
.shell-saved-btn:not([aria-current="true"]):hover { background: var(--shell-row-hover, rgba(26, 24, 48, 0.05)); color: var(--color-text-primary, #1A1830); }
.shell-chip:hover { background: var(--shell-row-hover, rgba(26, 24, 48, 0.05)); }
.shell-theme:hover { background: var(--shell-row-hover, rgba(26, 24, 48, 0.05)); color: var(--color-text-primary, #1A1830); }
}
@media (min-width: 701px) and (hover: hover) {
  html.shell.shell-pinned .coin-acct:hover { transform: none; box-shadow: none; background: var(--shell-row-hover, rgba(26, 24, 48, 0.05)); }
}

/* 브랜드 링크(시각 32px)도 손가락 입력과 시트에선 44px 누르는 자리 — 다른 버튼의 ::before 와 같은 방식 */
@media (pointer: coarse), (max-width: 700.98px) {
  html.shell .shell-brand::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
/* coin-ui 칩은 div 라 기본 포커스 표시가 없다 — shell.js 가 버튼 역할을 주므로 키보드 포커스를 보이게 */
html.shell .coin-acct:focus-visible { outline: 2px solid var(--color-accent, #6D5AE6); outline-offset: 2px; }

/* ════════ 기능 화면(index) — 결과 중 그 기능 카드만 보이고, 뒤로 가기(브라우저/머리띠)로 이전 화면 ════════
   상담(#chatCard)과 2030 풀이(#grow2030Section)는 #results 의 직계 자식이라 나머지 형제를 숨기는 것으로 끝난다.
   결과 네비(sticky)도 그 형제라 함께 숨고, 계정 칩은 결과 네비 보정(+54px)을 받지 않는다. */
html.shell body:is(.view-chat, .view-grow) main > .landing-col { display: none; }
html.shell body:is(.view-chat, .view-grow) main { display: none; }   /* 머리띠는 main 밖(#results 앞)이라 함께 사라지지 않는다 */
html.shell body:is(.view-chat, .view-grow) #results.show { padding-top: 0; }
html.shell body.view-chat #results > :not(#chatCard) { display: none !important; }
html.shell body.view-grow #results > :not(#grow2030Section) { display: none !important; }
html.shell body:is(.view-chat, .view-grow).gnb-on:has(#results.show):has(#shellLanding) .coin-acct { top: calc(var(--gnb-h, 0px) + 8px); }
.shell-viewbar { display: none; }
html.shell body:is(.view-chat, .view-grow) .shell-viewbar {
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: var(--gnb-h, 0px);
  z-index: 6;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px var(--space-sm, 16px);
  background: var(--shell-bg-page, #FBFAF8);
}
.shell-vb-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--shell-line, rgba(26, 24, 48, 0.08));
  border-radius: 999px;
  background: var(--shell-composer-bg, #FFFFFF);
  color: var(--color-text-secondary, #5B5570);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.shell-vb-back::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.shell-vb-title { margin: 0; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--color-text-primary, #1A1830); }   /* 기능 화면의 유일한 제목(h1) */
@media (hover: hover) {
  .shell-vb-back:hover { background: var(--shell-row-hover, rgba(26, 24, 48, 0.05)); color: var(--color-text-primary, #1A1830); }
}