/* ============================================================
   좌측 대화 셸 — index.html · pricing.html
   설계: ~/.claude/plans/ver2-ui-wiggly-clover.md §2 (좌측 레일)
        docs/Implementation-Plan/landing_ai_experience.md

   ★이 레일은 페이지 목차가 아니다. 추후 실제 대화 목록이 들어갈 자리이고,
     지금은 그 골격(새 대화 · 기능 · 대화 · 하단 보조)을 미리 세운 것이다.
     그래서 블록 이름과 동사가 ver2 계획과 같다 — 기능 = "새로 시작한다", 대화 = "이어서 한다".

   ★색은 앱의 AI 표면 토큰(--aiop-*, server.ts)과 같은 값이다. 블랙 & 차콜:
       프레임(레일)  #08080a  가장 어두움
       캔버스(본문)  #0f0f11
       카드·말풍선   #1a1a1e
       입력·칩       #151518
     레일이 본문보다 어두운 것이 이 셸의 구조 신호다.

   ★레이아웃: body 에 padding 을 주지 않는다.
     · body{padding-left} → sticky 헤더까지 밀려 로고가 레일 오른쪽으로 간다.
     · body{display:grid} → grid 아이템의 sticky 컨테이닝 블록이 자기 area 라 헤더가 죽는다.
     · 채택: body 직계의 section/main/footer 에만 margin-left. 마크업 재들여쓰기 0줄이고
       오버레이(.dl-modal·.promo-chat)는 선택자에 안 걸려 fixed 가 유지된다.

   ★브레이크포인트 1200: .ads-grid·.uc-panel·.reel-body 가 뷰포트 900px 에서 1열이 된다.
     1025 에서 레일 272 를 빼면 본문 753px 인데 미디어쿼리는 뷰포트를 보므로 2열이 우겨넣어진다.
   ============================================================ */

:root {
  --shell-w: 272px;
  --shell-top: 68px;          /* .nav__inner 높이 */
  --shell-frame: #08080a;     /* 레일 — 가장 어두운 면 */
  --shell-surface: #1a1a1e;   /* 카드·호버 위 면 */
  --shell-raise: #151518;     /* 입력·칩 */
  --shell-line: #2a2a30;
  --shell-line-strong: #3a3a42;
  --shell-text: #ececf1;
  --shell-soft: #a8a8b3;
  --shell-dim: #8b8b95;   /* #74747e 는 #0f0f11 위 3.75:1 로 S7(4.5:1) 미달 */
}

/* 스킵 링크 — 레일 링크가 본문보다 DOM 앞에 오므로 필수. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 80;
  padding: 10px 16px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 14px; font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus-visible { top: 12px; outline: none; box-shadow: 0 0 0 3px rgba(122, 169, 255, .55); }
[id="main-content"]:focus { outline: none; }

.shell-side {
  position: fixed; left: 0; top: var(--shell-top); bottom: 0; width: var(--shell-w);
  z-index: 45;
  display: flex; flex-direction: column;
  padding: 14px 10px 12px;
  background: var(--shell-frame);
  border-right: 1px solid var(--shell-line);
  color: var(--shell-soft);
  overflow: hidden;
}
.shell-side__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.shell-side__scroll::-webkit-scrollbar { width: 8px; }
.shell-side__scroll::-webkit-scrollbar-thumb { background: var(--shell-line); border-radius: 99px; }

/* 새 대화 — 무채색 secondary. 페이지의 primary(상단 '무료로 시작')를 뺏지 않는다. */
.shell-new {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-bottom: 14px; padding: 10px 12px;
  font-family: inherit; font-size: 14px; font-weight: 600; text-align: left;
  color: var(--shell-text); background: var(--shell-raise);
  border: 1px solid var(--shell-line); border-radius: 11px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.shell-new:hover { background: var(--shell-surface); border-color: var(--shell-line-strong); }
.shell-new svg { flex: 0 0 auto; }

.shell-group {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0 6px; padding: 0 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--shell-dim);
}
.shell-group:first-child { margin-top: 0; }

/* 기능·대화 항목 공통. 아이콘 자리는 지우지 않고 비운다 —
   "아이콘 있다/없다"가 곧 "실행이 붙었다/아니다"의 1차 신호다(ver2 §2-3). */
/* a 와 button 이 같은 모양이어야 한다 — 기능은 button(대화 시작), 요금제는 a(이동). */
.shell-item {
  width: 100%; font-family: inherit; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; border-radius: 9px;
  font-size: 14px; color: var(--shell-soft);
  transition: background .12s ease, color .12s ease;
}
.shell-item__ic { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: currentColor; }
.shell-item__tx { min-width: 0; }
.shell-item b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-item small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--shell-dim); }
.shell-item:hover { background: rgba(255, 255, 255, .05); color: var(--shell-text); }
/* 선택은 무채색 면 — 파랑 예산은 행동(상단 CTA·승인 대기 칩)이 갖는다(S11). */
.shell-item[aria-current] { background: var(--shell-surface); color: var(--shell-text); }
.shell-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(122, 169, 255, .6); }

/* 대화 — 지금은 방문자가 이 페이지에서 실제로 돌린 분석만 쌓인다.
   ★지어낸 대화를 미리 채우지 않는다. 없으면 빈 상태가 그렇게 말한다(S6). */
.shell-threads { display: grid; gap: 2px; }
.shell-thread b { font-weight: 600; }
.shell-thread small { color: var(--shell-dim); }
.shell-empty { padding: 10px 10px 4px; font-size: 12.5px; line-height: 1.55; color: var(--shell-dim); }

/* 가입 후 화면 미리보기 — 앱의 실제 좌측 메뉴를 그대로 옮긴 그림이다.
   ★누를 수 없다. div 로 그리고 커서도 기본값을 쓴다 — 버튼처럼 보이면 눌러 보고,
     아무 일도 안 일어나면 그때 신뢰가 깎인다(결재 예고 미리보기와 같은 처리). */
.shell-group__tag {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); color: var(--shell-dim);
}
.shell-peek { display: grid; gap: 1px; opacity: .72; }
/* 이제 링크다 — 눌리지 않는 것처럼 보이던 규칙(cursor:default·hover 없음)을 걷어낸다.
   보조 항목은 앱과 같은 위계로 흐리게 두되, 눌리는 것은 눌리게 보여야 한다. */
.shell-item.is-peek { color: var(--shell-soft); }
.shell-item.is-sub { padding-left: 39px; font-size: 13px; }
.shell-item.is-sub b { font-weight: 400; color: var(--shell-dim); }
.shell-peek__note { padding: 10px 10px 2px; font-size: 11.5px; line-height: 1.5; color: var(--shell-dim); }
.shell-new__ic { flex: 0 0 auto; width: 18px; height: 18px; }

/* 하단 보조 — ChatGPT 의 '플랜 및 가격 보기 / 설정 / 도움말' 자리. */
.shell-foot { flex: 0 0 auto; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--shell-line); }
.shell-foot .shell-item { font-size: 13px; }

/* ── 첫 화면 집중 모드 ────────────────────────────────────────────────────
   방문자가 처음 오면 히어로 한 장만 둔다. 주소를 넣는 순간 나머지 문서가 열린다.
   ★JS 가 켜는 방식이다(CSS 기본값은 '전부 보임'). 스크립트가 죽으면 랜딩이 한 장짜리
     빈 페이지가 되는 것이 가장 나쁜 실패라, 실패 방향을 '다 보이는 쪽'으로 잡는다. */
body.is-focus-hero > section:not(.hero),
body.is-focus-hero > footer { display: none; }
body.is-focus-hero .hero { min-height: calc(100vh - var(--shell-top)); display: flex; align-items: center; }
@media (max-width: 1199px) { body.is-focus-hero .hero { min-height: auto; display: block; } }

.shell-scrim { display: none; }

@media (min-width: 1200px) {
  body > section, body > main, body > footer { margin-left: var(--shell-w); }
  .nav .nav__links, .nav__toggle { display: none; }
  .shell-side__auth { display: none; }
  /* 헤더는 레일 위를 지난다. 로고가 가운데 정렬 컨테이너에 갇혀 있으면 레일 왼쪽 끝과
     어긋나 두 개의 시작점이 생긴다. 레일 안쪽 여백(10px)+새 대화 버튼 여백(12px)에 맞춘다. */
  .nav__inner { max-width: none; padding-left: 22px; padding-right: 24px; }
}

/* ── ≤1199: 드로어 ────────────────────────────────────────────────────────
   기존 .nav.is-open 드롭다운과 공존하지 않는다 — 같은 링크가 두 군데 있으면 하나가 낡는다. */
@media (max-width: 1199px) {
  .nav .nav__links { display: none; }
  .nav__toggle { display: block; }
  .shell-side {
    width: min(320px, 86vw);
    /* ★visibility 로 감춘다 — transform 만으로는 화면 밖 링크가 탭 순서에 남는다. */
    visibility: hidden; transform: translateX(-100%);
    transition: transform .22s ease, visibility .22s;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
  }
  .shell-open .shell-side { visibility: visible; transform: none; }
  .shell-scrim {
    display: block; position: fixed; inset: var(--shell-top) 0 0 0; z-index: 44;
    background: rgba(0, 0, 0, .6);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .shell-open .shell-scrim { opacity: 1; pointer-events: auto; }
  .shell-open, .shell-open body { overflow: hidden; }
  .shell-side__auth { display: grid; gap: 8px; margin-top: 12px; }
  .shell-side__auth .btn { width: 100%; }
}

/* 헤더 버튼 — ★페이지의 primary 는 히어로의 '읽어보기'다(체험이 첫 행동이므로).
   헤더는 상시 내비이지 이 화면의 다음 행동이 아니므로 꽉 찬 파랑을 양보한다.
   첫 화면에 꽉 찬 파랑이 둘이면 어느 쪽을 눌러야 하는지 3초 안에 안 보인다(S2·S11). */
.nav__cta .btn { font-size: 14px; padding: 9px 18px; }
.nav__signin { font-size: 14px; font-weight: 600; color: var(--muted); padding: 9px 6px; }
.nav__signin:hover { color: var(--ink); }
.nav__signin:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
@media (max-width: 1199px) {
  .nav__cta .btn { font-size: 13px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .shell-side, .shell-scrim, .skip-link { transition: none; }
}