/* ⭐Pretendard — 윈도우·안드로이드에서도 애플 느낌을 내는 한글 글꼴(사장님 승인 2026-09-04).
 *   ⛔주소를 지어내지 않았다. 받아서 확인했다: HTTP 200 · 59,900B · SIL 오픈폰트 라이선스.
 *   ⭐버전을 고정한다 — 떠 있는 태그를 쓰면 어느 날 글꼴이 말없이 바뀐다.
 *   ⚠️@import 는 모든 규칙보다 **앞**이어야 한다. 아래로 옮기면 통째로 무시된다.
 *   ⚠️CDN 이 끊기면 -apple-system → 맑은 고딕으로 떨어진다(화면은 안 죽는다). */
@import url("./fonts/pretendard.css");   /* ⛔외부 CDN 금지 — th5_fonts_local.mjs 가 받아 둔 것 */

/* theme.css — CityWalk 겉모습 정본 (THEME-V3 · 2026-09-04)
 *
 * ## 사장님 지시
 *   V1: "대기업 사이트 · 미래적 · 어두운 바탕"
 *   V2: **"애플 같은 느낌이 없음. 다시 해봐"**
 *
 * ## ⛔V1 이 왜 애플과 정반대였나 (내 잘못을 적어둔다)
 * "미래적 = 날카로움"으로 읽고 정확히 애플이 **안 하는** 것들을 했다:
 * ```
 *   내가 한 것                      애플이 하는 것
 *   모서리 3~4px (각짐)         →   12~20px · 버튼은 완전 pill
 *   선 3단계로 또렷하게          →   선을 거의 안 쓴다. **면과 여백**으로 나눈다
 *   강조색 2개(주황+청록)        →   무채색이 거의 전부. 강조는 **한 곳**에만
 *   라벨 대문자 + 자간 .18em     →   대문자 라벨을 안 쓴다. 그냥 문장이다
 *   Chakra Petch(각진 테크 폰트) →   SF Pro — 중립적이고 인간적
 *   본문 15px                    →   17px. 크고 느슨하다
 * ```
 * 애플의 인상은 **덜어낸 자리**에서 온다. 더 넣어서 만들 수 없다.
 *
 * ## ⛔바탕은 순검정으로 못 간다 — 실측 근거
 * 애플 다크는 #000 이지만, 대문 지구본이 `gl.clearColor(0.016,0.024,0.051)` =
 * **#04060d 를 코드에 박아** 쓴다(walk.html:397). 바탕만 검정으로 바꾸면
 * 지구본 둘레에 **경계선이 드러난다.** 그래서 `--void` 는 그대로 두고 그 위 층만 바꿨다.
 * (그 13/255 만큼의 푸른 기는 눈에 안 보인다. 애플다움은 거기 있지 않다.)
 *
 * ## ⛔브랜드 색을 버리지 않았다 — 대신 **한 곳에만** 쓴다
 * `--city:#ffb45c` 는 "CityWalk 의 색"이다. 애플도 강조색이 있다 — 다만 화면에 하나뿐이다.
 * 그래서 주 버튼 하나에만 남기고, 청록(`--rim`)은 강조에서 내려 **상태·진행** 표시로만 쓴다.
 *
 * ## ⛔글꼴은 애플 기기에서만 진짜다
 * `-apple-system` 이 먼저다 — 맥·아이폰에서는 **진짜 SF Pro / Apple SD Gothic Neo** 가 나온다.
 * 윈도우에서는 Segoe UI Variable / 맑은 고딕으로 떨어진다(근사치).
 * ⛔Chakra Petch 를 display 에서 뺐다 — 가장 애플답지 않은 한 가지였다.
 * ⚠️윈도우에서도 애플 느낌을 내려면 Pretendard 웹폰트가 필요하다. 외부 CDN 이 하나 는다 — 사장님 결정.
 *
 * ## ⛔옛 이름을 지우지 않았다
 * 8개 화면이 `--void --ink --mut --rim --city --line --disp --sans` 를 이미 쓴다.
 * 이름을 바꾸면 그 화면들이 통째로 깨진다. 값만 바꿨다.
 */

:root {
  /* ── 바탕 — 애플은 층을 **선이 아니라 밝기**로 나눈다 ───── */
  --void:      #04060d;                    /* ⛔지구본 clearColor 와 같은 값. 바꾸지 마라 */
  --bg:        #04060d;
  --surface:   #141416;                    /* 카드 — 애플 시스템 그레이 계열 */
  --raised:    #1d1d1f;                    /* 떠 있는 것(시트) — apple.com 의 짙은 회색 */
  --sunken:    #0b0b0d;

  /* ── 글자 — 순백을 안 쓴다 ──────────────────────────────── */
  --ink:       #f5f5f7;                    /* 애플의 흰색 */
  --ink-2:     #d2d2d7;
  --mut:       #86868b;                    /* apple.com 의 회색 */
  --faint:     #6e6e73;

  /* ── 선 — ⭐거의 안 보이게. 나누는 일은 면과 여백이 한다 ── */
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  --line-3:    rgba(255,255,255,.05);
  --hair:      rgba(255,255,255,.07);      /* 구분선 전용 */

  /* ── 강조 — ⭐화면에 하나만 ──────────────────────────────── */
  /* ⭐주황을 흰색으로 바꿨다(사장님 승인 2026-09-04).
   *   애플은 강조색을 화면에 거의 안 쓴다 — 색은 사진·제품이 맡고 UI 는 무채색이다.
   *   ⛔이름(`--city`)은 그대로 둔다. 8개 화면이 이 이름을 쓴다 — 바꾸면 통째로 깨진다. */
  --city:      #f5f5f7;                    /* CityWalk 의 색 — 이제 흰색 */
  --on-city:   #0b0b0d;                    /* 흰 버튼 위의 글자색 */
  --city-dim:  rgba(255,255,255,.10);
  --city-warm: #ffb45c;                    /* ⛔옛 주황을 지우지 않았다 — 되돌릴 때 필요하다 */
  --link:      #2997ff;                    /* 애플 블루 — 링크·보조 행동 */
  --rim:       #57d6e8;                    /* ⛔강조에서 내렸다. 진행·상태 표시용 */
  --rim-dim:   rgba(87,214,232,.10);
  --ok:        #30d158;                    /* 애플 시스템 그린 */
  --warn:      #ffd60a;
  --bad:       #ff453a;                    /* 애플 시스템 레드 */

  /* ── 글꼴 — ⭐애플 기기에서는 진짜 SF Pro 가 나온다 ─────── */
  /* ⭐애플 기기에서는 여전히 **진짜 SF Pro** 가 먼저다(-apple-system).
   *   그 밖(윈도우·안드로이드)에서는 Pretendard 가 받는다 — 그래서 SF 다음, 나머지 앞이다.
   *   ⛔`Pretendard Variable` 이 실제 패밀리 이름이다. 'Pretendard' 만 쓰면 안 잡힌다. */
  --sys: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
         'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo',
         'Segoe UI Variable Display', 'Segoe UI',
         'IBM Plex Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  --disp: var(--sys);                      /* ⛔각진 테크 폰트를 뺐다 */
  --sans: var(--sys);
  --mono: 'SF Mono', ui-monospace, 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;

  /* ── 글씨 — ⭐크고 느슨하게. 자간은 **좁게** ─────────────── */
  --t-display: clamp(46px, 7.4vw, 96px);
  --t-h1:      clamp(32px, 4.4vw, 56px);
  --t-h2:      clamp(23px, 2.6vw, 32px);
  --t-h3:      19px;
  --t-body:    17px;                       /* 애플 본문 크기 */
  --t-small:   14px;
  --t-label:   13px;                       /* ⛔대문자로 쓰지 않는다 */
  --w-display: 600;                        /* 애플 헤드라인은 굵지 않다 */
  --w-body:    400;
  --lh-tight:  1.07;
  --lh-body:   1.6;
  --tr-display: -.028em;                   /* ⭐큰 글씨일수록 자간을 좁힌다 */
  --tr-h2:      -.018em;
  --tr-body:    -.004em;

  /* ── 간격 — ⭐애플의 인상 절반은 여백이다 ────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 18px;
  --s5: 28px; --s6: 40px; --s7: 64px; --s8: 96px; --s9: 140px;
  --gutter: clamp(24px, 7vw, 120px);

  /* ── 모서리 — ⭐애플은 크게 굴린다. 버튼은 완전 pill ────── */
  --r1: 10px; --r2: 14px; --r3: 20px; --r4: 28px; --r-pill: 980px;

  /* ── 모션 — 부드럽고 조금 느리게 ────────────────────────── */
  --e:    cubic-bezier(.28,.11,.32,1);     /* 애플 곡선 */
  --fast: 200ms;
  --slow: 400ms;

  /* ── 깊이 — ⛔테두리 발광 대신 **부드러운 그림자** ──────── */
  --lift:   0 4px 24px rgba(0,0,0,.5);
  --lift-2: 0 18px 60px rgba(0,0,0,.6);
  --glow-city: none;                       /* ⛔V1 의 발광을 껐다 — 애플은 안 빛낸다 */
  --glow-rim:  none;

  /* ── ⛔표류한 이름들(파이프라인이 잡았다 · journey.html) ── */
  --dim:    var(--mut);
  --fg:     var(--ink);
  --accent: var(--city);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --slow: 0ms; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ══ 부품 — ⛔`ui-` 접두사. 기존 클래스와 부딪히면 조용히 뒤틀린다 ══ */

/* ⛔대문자·자간 넓힘을 없앴다. 애플은 라벨도 그냥 문장이다. */
.ui-label { font-size: var(--t-label); color: var(--mut); letter-spacing: var(--tr-body); }

.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: var(--w-body) var(--t-body)/1 var(--sans); letter-spacing: var(--tr-body);
  padding: 13px 24px; border-radius: var(--r-pill);       /* ⭐완전 pill */
  border: 0; background: rgba(255,255,255,.10); color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: background var(--fast) var(--e), transform var(--fast) var(--e), opacity var(--fast) var(--e);
}
.ui-btn:hover { background: rgba(255,255,255,.16); }
.ui-btn:active { transform: scale(.97); }
.ui-btn:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }

/* ⭐주 행동 **하나**만 브랜드 색. 화면에 두 개면 아무것도 강조가 아니다. */
.ui-btn--primary { background: var(--city); color: var(--on-city); font-weight: 500; }
.ui-btn--primary:hover { background: var(--city); opacity: .88; }
/* 보조 행동은 애플 블루 링크처럼 — ⛔테두리를 두르지 않는다 */
.ui-btn--ghost { background: transparent; color: var(--link); padding-left: 8px; padding-right: 8px; }
.ui-btn--ghost:hover { background: transparent; opacity: .7; }

.ui-card {
  background: var(--surface); border: 0; border-radius: var(--r3);
  padding: var(--s5); transition: transform var(--slow) var(--e), background var(--slow) var(--e);
}
.ui-card--raised { background: var(--raised); box-shadow: var(--lift); }

/* 목록 — ⛔칸마다 테두리를 두르지 않는다. 얇은 구분선 하나로 나눈다. */
.ui-row {
  display: flex; align-items: center; gap: var(--s4);
  padding: 17px 4px; border: 0; border-bottom: 1px solid var(--hair);
  color: var(--ink); text-decoration: none; background: transparent;
  font-size: var(--t-body); letter-spacing: var(--tr-body);
  transition: opacity var(--fast) var(--e);
}
.ui-row:last-child { border-bottom: 0; }
.ui-row:hover { opacity: .62; }
.ui-row__go { margin-left: auto; font-size: var(--t-small); color: var(--link); }

/* 태그 — 조용하게 */
.ui-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-label); color: var(--mut); letter-spacing: var(--tr-body);
  border: 0; border-radius: var(--r-pill); padding: 6px 14px;
  background: rgba(255,255,255,.07);
}

.ui-note  { color: var(--mut); font-size: var(--t-small); line-height: var(--lh-body); }
.ui-faint { color: var(--faint); font-size: var(--t-small); }

/* ⭐출처 표기 — ⛔골든 룰: "저작자 표시는 화면에 보여야 표시다".
 *   작게 만들거나 감추지 마라. 게이트(GM3)가 실제 픽셀 크기를 잰다. */
.ui-attrib {
  font-size: 11px; line-height: 1.5; color: var(--mut);
  background: rgba(20,20,22,.9); border: 0;
  border-radius: var(--r1); padding: 6px 10px;
}
.ui-attrib a { color: var(--link); }

/* ══ NAV-V1 공용 상단 탭 — ui_nav.js 가 붙인다. 홈으로·운영노트·패치·내 여정. ⛔화면별 복제 금지 ══ */
.ui-nav{position:fixed;left:12px;top:12px;z-index:9000;display:flex;gap:6px;padding:4px;border-radius:999px;
  background:rgba(12,14,20,.62);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border:1px solid rgba(255,255,255,.08);font:500 14px/1 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",system-ui,sans-serif}
.ui-nav a{color:rgba(255,255,255,.82);text-decoration:none;padding:8px 14px;border-radius:999px;white-space:nowrap}
.ui-nav a:hover{background:rgba(255,255,255,.10);color:#fff}
.ui-nav a.on{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:520px){.ui-nav{left:8px;top:8px;gap:2px}.ui-nav a{padding:7px 10px;font-size:13px}}

/* ══ MOBILE-COMPACT-V1 M1 (사장님 2026-09-05) — ≤640px 상단 한 줄: [뒤로] [현재 화면] [메뉴 ☰] · 메뉴는 펼침 ══
 * ⛔6개 탭을 글자만 줄여 한 줄에 우겨 넣지 않는다. 터치 영역 ≥40px. safe-area 적용. 가로 스크롤 0. */
.ui-nav.ui-nav-m{left:0;right:0;top:0;border-radius:0;border-width:0 0 1px 0;padding:calc(4px + env(safe-area-inset-top)) 6px 4px;
  gap:6px;display:flex;align-items:center;min-height:calc(44px + env(safe-area-inset-top));max-width:100vw;box-sizing:border-box;
  background:rgba(8,10,16,.86);overflow:visible}
.ui-nav.ui-nav-m .ui-nav-back,.ui-nav.ui-nav-m .ui-nav-menu{flex:none;min-width:40px;min-height:40px;padding:8px 10px;
  background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#f5f5f7;font:500 14px/1 inherit;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.ui-nav.ui-nav-m .ui-nav-menu{margin-left:auto}
.ui-nav.ui-nav-m .ui-nav-menu[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.ui-nav.ui-nav-m .ui-nav-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 15px/1.2 inherit;font-family:inherit;color:#f5f5f7;padding:0 4px;text-align:center}
.ui-nav.ui-nav-m .ui-nav-list{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;gap:2px;padding:6px;
  background:rgba(8,10,16,.96);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.ui-nav.ui-nav-m .ui-nav-list[hidden]{display:none}
.ui-nav.ui-nav-m .ui-nav-list a{display:block;padding:12px 14px;min-height:44px;box-sizing:border-box;border-radius:10px;font-size:15px;
  color:rgba(255,255,255,.88);white-space:normal}
.ui-nav.ui-nav-m .ui-nav-list a.on{background:rgba(255,255,255,.16);color:#fff}
@media (prefers-reduced-motion:no-preference){.ui-nav.ui-nav-m .ui-nav-list{animation:uiNavDrop .16s ease-out}}
@keyframes uiNavDrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}