/* AIDRA Apple 베이스·셸·공통 컨트롤 (DESIGN.md).
 * 단일책임: reset·body·셸(헤더/메인)·버튼·입력·중립(미인증) 화면.
 * 위저드/스텝 세부 컴포넌트는 components.css. 토큰은 tokens.css(@import).
 * 키·모델명·원문 없음 — 순수 표현 CSS. CDN 폰트 로드 없음(system stack — egress 0). */
@import url('/ui/tokens.css');
@import url('/ui/components.css');
@import url('/ui/cosmos.css');

* { box-sizing: border-box; }
[hidden] { display: none !important; }
*::selection { background: rgba(0, 102, 204, 0.14); color: var(--accent); }

/* ── 스크롤바 — 앱 전체 단일 디자인(트랙 투명 · 얇고 반투명한 손잡이만) ──
 * 전엔 규칙이 없어 UA 기본값(흰 트랙 + 회색 손잡이)이 다크 캔버스 위에 그대로 나왔다(오너 지적 2026-08-05).
 *
 * ⚠️ 표준(scrollbar-width/color)과 ::-webkit-scrollbar 는 **공존하지 않는다**. Chrome 121+ · Firefox 는
 *   표준값이 auto 가 아니면 webkit 의사요소를 **통째로 무시**한다(사양). 아래 webkit 블록은
 *   그것을 모르는 구형 Safari/Chrome 전용 폴백이다 — 둘은 반드시 같은 그림을 그려야 한다.
 *   그래서 스크롤바를 **숨기는 곳도 반드시 둘 다** 써야 한다(scrollbar-width:none + ::-webkit-scrollbar{display:none}).
 *   하나만 쓰면 한쪽 브라우저에서 조용히 다시 나타난다 — 현재 숨기는 3곳(.wiz-rail · .ph-tb-chips · .feed-carousel)은 둘 다 있다.
 *
 * scrollbar-color 는 상속되므로 :root 한 번이면 닿고(뷰포트 스크롤바 포함), scrollbar-width 는 비상속이라 * 가 필요하다. */
:root { scrollbar-color: var(--scroll-thumb) transparent; }
* { scrollbar-width: thin; }

*::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
/* border+background-clip = 손잡이 양옆 2px 여백(트랙 없이 떠 있는 모양). */
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }

html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 좌측 GNB 독(글라스 카드 — fixed, flow 밖. 인증 시 body.shell-chrome 으로만 노출) ── */
/* fixed 라서 body.iv-mode 세로 플렉스 캐스케이드를 건드리지 않는다 — main 우측 오프셋은 body padding-left 가 전담.
 *
 * 형태: 화면에 붙은 전폭 패널이 아니라 **네 변이 닫힌 떠 있는 카드**다(오너 지정 2026-07-30,
 *   Framer Sidebar Dock Menu). 원본 값: 라운드 20px · 1px rgba(255,255,255,0.08) 보더 · 패딩 16 ·
 *   blur(10px) 유리 · 세로 space-between(위=브랜드+메뉴, 아래=액션+계정).
 *   의도적 차이: 라운드·간격·유리는 제품 토큰(--r-lg 18 · --sp-md · saturate(180%) blur(20px))을 쓴다 —
 *   원본 수치를 그대로 박으면 하단 툴바 독·rail-mini 와 미세하게 다른 유리가 하나 더 생긴다.
 * ⚠️ 폭 계약: body 는 여전히 --sidebar-w(240) 만큼 padding-left 로 자리를 비운다. 카드는 그 **레인 안쪽**에
 *   좌우 여백을 두고 앉는다 — 카드 폭을 240 으로 두면 여백만큼 콘텐츠를 침범한다. */
.shell-sidebar {
  position: fixed;
  left: var(--sp-sm); top: var(--sp-sm); bottom: var(--sp-sm);
  z-index: 70;                   /* 드로어 백드롭(60)·드로어(61) 위 — 생성(백그라운드 잡) 중에도 좌측 nav 클릭 허용 */
  width: calc(var(--sidebar-w) - var(--sp-sm) * 2);
  display: none;                 /* 미인증 = 숨김(C-7). body.shell-chrome 일 때만 표시. */
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-md);
  background: rgba(15, 15, 23, 0.66);   /* 카드가 콘텐츠 위에 떠 있으므로 붙어 있을 때(0.55)보다 한 단계 진하게 */
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.45);
  animation: dock-in var(--t-mid) var(--ease) both;
}
/* 펴기(display:none → flex)마다 재생된다 — 접기는 즉시(펴진 뒤 사라지는 카드를 기다릴 이유가 없다).
 * 원본은 spring(bounce 0) = 오버슈트 없는 감쇠라, 제품 토큰 --ease 가 같은 느낌이다. */
@keyframes dock-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
body.shell-chrome .shell-sidebar { display: flex; }
/* 인증(크롬 on)에서만 메인 컬럼을 레일 폭만큼 우측으로. 미인증 게이트는 풀블리드 유지. */
body.shell-chrome { padding-left: var(--sidebar-w); }

/* 레일 헤더(브랜드 + 접기 토글) */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); }
/* 접기/펴기 토글(아이콘 버튼 — 미니멀·투명 배경) */
.rail-toggle {
  display: flex; align-items: center; justify-content: center;
  position: relative; width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  font-size: 17px; line-height: 1;
  color: var(--ink-48); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.rail-toggle:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
/* 히트영역 40×40 확보 — 시각 30 유지, 가상요소로 클릭/터치 영역만 확장(#16) */
.rail-toggle::after { content: ''; position: absolute; inset: -5px; }
/* 사이드바 헤더 우측 액션 그룹(전체검색 트리거 + 접기 토글) — 사이드바 헤더가 3개 자식이되어도 space-between 이 중간을 띄우지 않게 묶음. */
.sidebar-head-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
/* (검색 트리거 .gs-trigger 는 우측 상단 클러스터로 이관 — topActions.js/feed.css .top-actions) */
/* 접힘 상태에서만 노출되는 좌상단 플로팅 미니 헤더 — 로고 유지 + 펴기 버튼(레일 숨겨도 브랜드는 안 사라짐) */
.rail-mini {
  position: fixed; left: var(--sp-sm); top: var(--sp-sm); z-index: 71;
  display: none; align-items: center; gap: var(--sp-xs);
  padding: 5px 6px 5px 12px;
  background: rgba(15, 15, 23, 0.55);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.rail-mini-brand { font-weight: 600; font-size: var(--fs-body); letter-spacing: var(--ls-tagline); color: var(--ink); }
/* 접힘(rail-collapsed): 레일 숨김 + 메인 풀폭 + 고정요소 좌측 0 + 펴기 버튼 노출. 인증(shell-chrome)일 때만 적용. */
body.shell-chrome.rail-collapsed { padding-left: 0; }
body.shell-chrome.rail-collapsed .shell-sidebar { display: none; }
body.shell-chrome.rail-collapsed .rail-mini { display: flex; }
body.shell-chrome.rail-collapsed .wiz-composer { left: 0; }
body.shell-chrome.rail-collapsed .app-toast { left: 50%; }
.brand {
  font-weight: 600;
  font-size: var(--fs-tagline);
  letter-spacing: var(--ls-tagline);
  color: var(--ink);
  cursor: pointer;
  padding: 0 var(--sp-sm);        /* nav 항목 텍스트 인셋과 좌측 정렬 */
}
.shell-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-xxs);
  /* 짧은 뷰포트에서 메뉴가 독 카드 밖으로 넘치지 않게 — 브랜드·하단(액션·계정)은 제자리, 메뉴만 스크롤한다. */
  min-height: 0;
  overflow-y: auto;
}
.nav-btn {
  position: relative;
  width: 100%;
  text-align: left;
  white-space: nowrap;            /* 한글 라벨 자모 단위 줄바꿈 방지(모바일 가로 바 포함) */
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--ink-48);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  padding: 10px var(--sp-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
/* ⚠️ 메뉴 항목은 텍스트만 — 아이콘 넣지 말 것(오너 요청 2026-07-28). navRail.js 주석 참고. */
.nav-btn:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.nav-btn--active { color: var(--ink); font-weight: 600; background: rgba(255,255,255,0.08); }
.nav-btn--active:hover { background: rgba(255,255,255,0.11); }
/* 검색+알림 — 사이드바 최하단(레일 하단 고정은 여기가 담당, auth-area 는 바로 뒤따름). topActions.js 가 채움.
   44×44 아이콘 버튼(feed-notif-bell과 동일 규칙) — 우측 상단 고정 배치가 우측 드로어와 겹치던 문제(오너 지적) 해소. */
.sidebar-actions { margin-top: auto; display: flex; align-items: center; gap: 4px; }
.sidebar-action-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-48); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar-action-btn:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
.sidebar-action-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 선택 표시 = 영역 하이라이트(배경) + 볼드. 액센트 선/틱 미사용. */
.auth-area {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-sm);
  color: var(--ink-48);
  font-size: var(--fs-caption);
}
#who { font-variant-numeric: tabular-nums; padding: 0 var(--sp-sm); }

/* ── 버튼 기본(유틸 — 헤어라인 사각, scale active) ── */
button {
  font: inherit;
  letter-spacing: var(--ls-caption);
  cursor: pointer;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 8px 15px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
button:active { transform: scale(0.96); }
button:disabled { opacity: 0.4; cursor: default; transform: none; }
button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

/* 프라이머리 — Action Blue 필 CTA */
.primary-btn {
  color: var(--on-accent);
  font-weight: 600; /* 주 CTA 가 본문(400)보다 얇았다 — 위계를 바로잡음 */
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
}
/* ⚠️ hover 가 지금까지 없었다 — 제품 전역의 주 CTA 가 마우스를 올려도 무반응이었다.
 *   element 수준에 button:hover 를 달지 않는 이유: 그건 특이도가 (0,1,1) 이라
 *   .ep-card·.pl-row 같은 클래스 배경(0,1,0)을 덮어버린다(카드를 <button> 으로 만든 9곳이 전부 깨진다).
 *   보통 버튼의 hover 는 .btn 프리미티브(button.css)가 담당하고, 여긴 기존 2종만 보완한다. */
@media (hover: hover) {
  .primary-btn:hover:not(:disabled) { background: var(--accent-focus); border-color: var(--accent-focus); }
  .secondary-btn:hover:not(:disabled) { background: var(--accent-soft); }
}
.primary-btn:active { transform: scale(0.96); }

/* 세컨더리 — 고스트 필(투명 + 액센트 텍스트/보더) */
.secondary-btn {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
}

/* ── 입력(필 검색/텍스트 + 포커스 블루 링) ── */
input, textarea, select {
  font: inherit;
  letter-spacing: var(--ls-body);
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 11px 20px;
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
textarea { border-radius: var(--r-lg); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-48); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-focus);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
}
input[type='checkbox'] { accent-color: var(--accent); width: 18px; height: 18px; padding: 0; border-radius: var(--r-xs); }
input[type='number'] { border-radius: var(--r-md); }

/* ── 메인 컬럼(여백 넉넉 — 갤러리) ── */
.shell-main { padding: 0; }
/* 뷰 래퍼는 페이드만(transform 미사용) — rise 의 transform 잔존(matrix identity)이 fixed 자손(.wiz-composer)의
   포함블록을 가로채 컴포저가 viewport 가 아닌 '페이지' 하단에 붙는 버그 방지. 안쪽 .wiz-content 가 translateY 모션 담당. */
.shell-view { animation: fade var(--t-mid) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ── 중립(미인증) 사인인 게이트 — C-7: 기능구조·모델·툴명 0 노출 ── */
.signin-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-lg); text-align: center;
  min-height: 100vh; padding: var(--sp-section) var(--sp-lg);
  animation: rise var(--t-mid) var(--ease) both;
}
.signin-card {
  max-width: 420px; width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-md);
  padding: var(--sp-xxl) var(--sp-xl);
  background: var(--parchment);
  border-radius: var(--r-lg);
}
.signin-mark {
  font-size: var(--fs-display-md); font-weight: 600; letter-spacing: var(--ls-display-md);
  color: var(--ink);
}
.signin-tagline { color: var(--ink-80); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.signin-hint { color: var(--ink-48); font-size: var(--fs-caption); margin: var(--sp-xs) 0 0; }
.signin-actions { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: var(--sp-sm); }

/* ── 반응형(좁은 화면) ── */
@media (max-width: 720px) {
  /* 좁은 화면: 좌측 레일 → 상단 가로 바(sticky, in-flow). main 우측 오프셋 해제. */
  /* 독 카드(라운드·섀도·네 변 보더)를 전부 되돌린다 — 화면 폭을 꽉 채우는 상단 바에 라운드가 남으면
     좌우 위 모서리만 깎인 채 화면 끝에 물려 어긋난 조각처럼 보인다. */
  .shell-sidebar {
    position: sticky; inset: auto; top: 0; bottom: auto;
    width: auto; flex-direction: row; align-items: center;
    gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md);
    border: none; border-bottom: 1px solid var(--hairline);
    border-radius: 0; box-shadow: none; animation: none;
  }
  /* 가로 바에서는 메뉴가 가로로 흐른다 — 세로 스크롤 컨테이너를 남기면 항목이 잘린다. */
  .shell-nav { overflow-y: visible; }
  .shell-nav { flex-direction: row; align-items: center; gap: 2px; }
  .nav-btn { width: auto; padding: 6px 14px; }
  .auth-area { flex-direction: row; align-items: center; margin-top: 0; margin-left: auto; }
  #who { display: none; }         /* 모바일 상단 바: 장황한 상태 텍스트 숨김(로그아웃 버튼이 인증 상태 표시) */
  body.shell-chrome { padding-left: 0; }
  body.shell-chrome .wiz-composer { left: 0; }
  body.shell-chrome .app-toast { left: 50%; }
  .shell-main { padding: var(--sp-lg) var(--sp-md); }
}