/* 공통 — 팔레트 토큰·리셋·카드 골격·5화면 골격(dock·레일·페이저·보드). 화면별 규칙은 screens.css (이 파일 다음에 읽힌다 — 순서가 곧 캐스케이드) */
/* 팔레트 v5 — 브랜드 3색(차콜·틸·멜론)은 유지하고, 표면을 1.5px 외곽선에서 '라운드 + 부드러운 그림자'로 옮겼다.
   도면의 단일 출처는 docs/layout.html. 여기 값과 도면이 어긋나면 도면을 고칠 것 */
:root {
  --ground:#F5F2E9; --surface:#FFFCF6; --hair:#F0EDE3; --well:#EFEBE0;
  --ink:#33312D; --ink2:#6E6A61; --ink3:#9A958A; --off:#C9C2B2;
  --teal:#129793; --teal-ink:#0C6D6A; --teal-tint:#DEF0EF; --teal-tint2:#EAF5F4; --aqua:#9BD7D5;
  --melon:#FF7260; --melon-ink:#C9452F; --melon-tint:#FFE9E4; --melon-tint2:#FFF4F1;
  --marker:#F6C445; --heat:255,114,96;        /* 히트맵·막대 램프 = 멜론 #FF7260 (09-04, 이전 틸) */
  --e1: 0 1px 2px rgba(51,49,45,.04), 0 10px 26px rgba(51,49,45,.055);
  --e2: 0 16px 36px rgba(51,49,45,.24);
  --r-card: 24px; --r-tile: 16px;
  --px: 20px; --py: 20px;              /* 카드 안쪽 여백 — 카드 하단 절(탄소)이 음수 여백으로 가장자리까지 채울 때 같은 값을 쓴다 */
  --dock-h: 56px;                      /* 모바일 하단 dock 높이 (+ safe-area) */
  --t-view: .24s; --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); word-break: keep-all;
       font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
       -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.card { background: var(--surface); border-radius: var(--r-card); padding: var(--py) var(--px); box-shadow: var(--e1); }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .10em; color: var(--ink3); }
.note { font-size: 11px; color: var(--ink3); line-height: 1.55; }
a { color: var(--teal-ink); text-decoration: none; }
a.u { border-bottom: 1px solid rgba(12,109,106,.35); }
[hidden] { display: none !important; }

/* ---- 화면 골격 (09-03 개정) ----
   한 번에 한 화면만 보인다([data-active]). 모바일(<900): 하단 dock 탭이 전환, 카드는 세로 한 줄. 데스크톱(≥900): 좌측 레일이 전환,
   그 화면의 카드를 12컬럼 그리드(1920×1080 기준 max 1800px)에 펼친다 — 자리는 screens.css 끝의 미디어 쿼리 */
.dock a, .rail a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
                   font-size: 11px; font-weight: 700; color: var(--ink3); letter-spacing: -.01em; }
.dock a svg, .rail a svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8;
                           stroke-linecap: round; stroke-linejoin: round; }
.dock a[aria-current="page"], .rail a[aria-current="page"] { color: var(--teal-ink); }
.dock a[aria-current="page"] .fill, .rail a[aria-current="page"] .fill { fill: var(--teal); stroke: var(--teal); }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
        height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: var(--surface); box-shadow: 0 -1px 0 var(--hair), 0 -8px 24px rgba(51,49,45,.06); }
.dock a { position: relative; z-index: 1; height: var(--dock-h); -webkit-tap-highlight-color: transparent; }
.dock .mark { position: absolute; top: 6px; left: 6px; width: 0; height: calc(var(--dock-h) - 12px); border-radius: 14px;
              background: var(--teal-tint); transition: left var(--t-view) var(--ease), width var(--t-view) var(--ease); }
.rail { display: none; }
.views { margin: 0; padding: 0; }
/* 더미데이터 띠(09-04) — 화면 위에 붙어 따라온다(sticky). 멜론 틴트 위 멜론 잉크: 경고보다는 '참고' 어조 */
.feedbar { position: sticky; top: 0; z-index: 15; padding: 9px 16px; text-align: center; font-size: 12px; line-height: 1.45;
           font-weight: 600; color: var(--melon-ink); background: var(--melon-tint); }
.feedbar b { font-weight: 800; }
.view { display: none; }
.view[data-active] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px 28px; }
.view > * { width: 100%; max-width: 390px; }
.enter { animation: enter var(--t-view) var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 899px) {
  body { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
  .dock { display: none; }
  .rail { position: fixed; left: 14px; top: 40px; z-index: 20; display: flex; flex-direction: column; gap: 6px; width: 56px; }
  .rail a { height: 54px; border-radius: 14px; font-size: 10px; gap: 2px; }
  .rail a[aria-current="page"] { background: var(--surface); box-shadow: var(--e1); }
  .views { max-width: 1800px; margin: 0 auto; padding: 32px 32px 48px 104px; }
  .feedbar { max-width: 1800px; margin: 0 auto; padding: 10px 32px 10px 104px; font-size: 13px; }
  .view[data-active] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch;
                       grid-auto-flow: row dense; padding: 0; }        /* 숨은 카드가 남긴 자리는 다음 카드가 채운다 */
  .view > * { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}