/* ===========================================================================
   My Knowledge Kitchen — 디자인 토큰 (concept-v1 공통)
   톤: Claude 데스크톱 — 웜 뉴트럴 베이스 + 클레이/코랄 액센트, 절제된 색 사용.
   컬러 / 폰트 / 반경 / 그림자 토큰 + 리셋 + 스테이지(mock 프레임) 공통 chrome.
   ※ 아이콘 = Lucide(v1.22.0) 정식 — assets/icons.js 가 <symbol> 세트를 주입,
     사용처는 <svg class="ic"><use href="#i-NAME"/></svg>. 색=currentColor(var), 크기=부모 CSS/인라인.
   =========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ---- 컬러 ---- */
  --ink:#1F1E1B;            /* 본문(웜 니어블랙) */
  --ink_2:#47453F;          /* 보조 텍스트 */
  --ink_3:#8B877D;          /* 캡션/플레이스홀더 */
  --line:#ECEAE3;           /* 헤어라인 */
  --line_2:#F4F2EC;         /* 약한 구분선 */
  --bg:#FBFAF6;             /* 웜 오프화이트 패널 */
  --surface:#FFFFFF;        /* 카드/표면 */
  --accent:#CF6B4C;         /* 클레이/코랄 — 로고·링크·상태점에만 절제 사용 */
  --accent_soft:#F6EAE3;    /* 코랄 소프트 틴트(선택/태그 배경) */
  --ink_btn:#22201C;        /* 주요 액션 버튼 = 잉크(거의 블랙) */
  --ink_btn_hover:#34322B;
  --link:#2F6DA3;           /* 링크(뮤트 블루) */
  --link_soft:#EDF2F8;      /* 링크 칩 배경 */
  --cite_border:#DCE6F1;    /* 링크 칩 보더 */
  --green:#5A8F66;          /* 생성/완료 표식 */
  --green_soft:#E9F1EA;     /* 그린 소프트 */
  --amber:#C2841C;          /* 중요(★)/상태 */
  --amber_soft:#FBF1DE;     /* 앰버 소프트 */
  --user_bubble:#F0EEE7;    /* 사용자 입력 버블 */
  --danger:#C0492E;         /* 파괴적 액션(휴지통 등) */
  --danger_soft:#FBEDE8;
  --stage:#14120E;          /* mock 스테이지(프레임 바깥) */
  --scrim:rgba(20,18,14,.45);/* 모달 백드롭 딤 */
  --on_solid:#FFFFFF;       /* 잉크/코랄 등 솔리드 위 텍스트·아이콘 색 */

  /* ---- 폰트 ---- */
  --font_sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",Roboto,sans-serif;
  --font_mono:ui-monospace,"SF Mono",Menlo,monospace;
  --font_serif:Georgia,"Times New Roman",serif;  /* 이탤릭 글리프 등 장식 */

  /* ---- 폰트 굵기 (SSoT · mkk-20260702-001) ----
     제품 기준 = 네이티브(Flutter) 렌더. antialiased 목업은 ~반 weight 얇게 보여주는 아티팩트라
     굵기는 네이티브(fs-native 프리뷰) 기준으로 재보정. → AppFontWeight.{name} 생성.
     원시 4단: */
  --fw_light:300;      /* 선택적 — 아주 얇은 표시용. 본문엔 미사용(14px 한국어서 과함) */
  --fw_regular:400;    /* 본문·메타·캡션 */
  --fw_medium:500;     /* 보조 강조 */
  --fw_semibold:600;   /* 라벨·칩·버튼·카드제목·섹션 */
  --fw_bold:700;       /* 큰 헤드라인·브랜드만 */

  /* ---- 폰트 크기 (SSoT · mkk-20260702-004 · AppFontSize) — 목업 인라인/컴포넌트 실측 15종 ---- */
  --fs_10:10px; --fs_10_5:10.5px; --fs_11:11px; --fs_11_5:11.5px; --fs_12:12px;
  --fs_12_5:12.5px; --fs_13:13px; --fs_13_5:13.5px; --fs_14:14px; --fs_15:15px;
  --fs_16:16px; --fs_17:17px; --fs_19:19px; --fs_22:22px; --fs_28:28px;

  /* ---- 반경 ---- */
  --radius_card:13px;
  --radius_pill:20px;

  /* ---- 반경 확장 (SSoT · mkk-20260702-004 · AppRadius.r*) — 13/20 은 card/pill 로 병합 ---- */
  --radius_r5:5px; --radius_r6:6px; --radius_r7:7px; --radius_r8:8px; --radius_r9:9px;
  --radius_r10:10px; --radius_r11:11px; --radius_r12:12px; --radius_r14:14px;
  --radius_r16:16px; --radius_r22:22px;

  /* ---- 그림자 ---- */
  --shadow_frame:0px 8px 36px rgba(0,0,0,.34);
  --shadow_card:0px 1px 2px rgba(13,15,26,.04);   /* 거의 평평 */
  --shadow_pop:0px 8px 24px rgba(13,15,26,.10);   /* 드롭다운/모달 — 가볍게 */
  --shadow_toast:0px 4px 16px rgba(13,15,26,.18);
  --shadow_sheet:0px -6px 20px rgba(13,15,26,.08);/* 바텀시트(위로) */
  --shadow_knob:0px 1px 2px rgba(13,15,26,.2);    /* 토글 노브 */
}

/* ---- 베이스 ---- */
html,body{height:100%}
body{
  font-family:var(--font_sans);
  font-size:15px;                 /* 표준 웹 베이스 */
  font-weight:400;                /* 본문 = Regular. (얇은 느낌은 weight가 아니라 antialiased 렌더 효과 → weight로 재현 불가) */
  background:var(--stage);        /* mock 스테이지 — 앱 프레임과 분리 */
  color:var(--ink);
  margin:0; height:100vh; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  -webkit-font-smoothing:auto;   /* 네이티브 기본 — 아래 폰트 렌더링 정책 참조 */
}

/* ==== 폰트 렌더링 정책 (SSoT · mkk-20260702-001/002 결정) ========================
   제품 굵기 기준 = **네이티브(Flutter) 렌더**. 과거 `-webkit-font-smoothing:antialiased` 는
   macOS 브라우저에서 텍스트를 ~반 weight 얇게 렌더하는 아티팩트로, Flutter엔 대응 스위치가 없어
   "목업은 얇고 앱은 굵은" 불일치를 만들었다. → **강제 antialiased 제거(auto=네이티브 기본)** 하고
   굵기는 이 네이티브 프리뷰 기준으로 확정한다(목업 숫자 = 토큰 = 앱, 단일 SSoT).
   `.fs-antialiased` 는 과거 감성 확인용 참고 토글로만 남긴다(제품 기준 아님). */
body.fs-antialiased, body.fs-antialiased *{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- mock 스테이지 chrome ---- */
.frame-label{flex-shrink:0;margin:0 0 0 2px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9A958C}
.route-badge{
  flex-shrink:0; align-self:flex-start; margin:0 0 0 2px;
  font-family:var(--font_mono); font-size:11px;font-weight:600;
  background:#332F2A;color:#E8C3B0; padding:6px 12px;border-radius:7px;
  cursor:pointer;user-select:none;border:none; transition:background .15s;
}
.route-badge:hover{background:#403B34}
/* 스테이지 상단 행: 목록(index) 바로가기 + 라우트 배지 */
.stage-top{flex-shrink:0; display:flex; align-items:center; gap:8px; margin-left:2px}
.to-index{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#14120E;background:#E8C3B0;border:none;border-radius:7px;padding:6px 11px;text-decoration:none;cursor:pointer;transition:background .15s}
.to-index:hover{background:#F0D2C2}
.to-index svg{width:13px;height:13px}
.stage-top .route-badge{margin:0}
.screen-frame{
  flex:1; min-height:0; width:100%; background:var(--bg);
  border:0; border-radius:14px; box-shadow:var(--shadow_frame);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
}
#route-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:#2B2925;color:var(--on_solid);font-size:12.5px;font-weight:600;
  padding:10px 18px;border-radius:10px;display:none;z-index:200;box-shadow:var(--shadow_toast);
}