/* 손님 화면 디자인 토큰 — 한 곳에서만 정의한다.
 *
 * 왜 갈아엎었나
 * -------------
 * 지금까지 화면은 전부 **개발자 화면의 옷**을 입고 있었다. 어두운 먹빛 바탕에
 * 얇은 선, 표와 격자, 등급 한자. 만든 사람은 읽히지만 손님은 시험지처럼 느낀다.
 *
 * 벤치마크 문서(05)는 「귀인지도식 파스텔 톤을 따라가지 않는다 — 우리가 파는 건
 * 소장하는 종이다」라고 적어 뒀지만, 오너 판단으로 **그 결정을 뒤집었다.**
 * 종이까지 포함해 전부 밝고 친근한 쪽으로 간다. 문서도 함께 갱신했다.
 *
 * 무엇을 지키고 무엇을 버렸나
 * ---------------------------
 * 버린 것 — 어두운 바탕, 각진 모서리, 얇은 선, 표 격자, 한자 우선.
 * 지킨 것 — 낙관(도장)이라는 형식, 한지의 따뜻한 흰색, 오행 다섯 색.
 *           한자는 남기되 **장식으로만** 두고 뜻은 항상 한글이 앞선다.
 *
 * 색을 고른 방법
 * --------------
 * 오행 다섯 색을 그대로 쓰되 채도를 낮추고 명도를 올려 파스텔로 옮겼다.
 * 木 초록 · 火 산호 · 土 살구 · 金 라벤더 · 水 하늘. 이 다섯이 곧 브랜드 팔레트다 —
 * 새 색을 지어내지 않았으므로 오행첩·인쇄물·화면이 같은 색을 공유한다.
 */

/* ★ 아래 토큰 블록 셋은 `web/tokens/` 가 생성한다. 손으로 고치지 마라 —
     `npm run tokens` 가 덮어쓴다. 값은 `src/*.tokens.json` 에 있다.
     다크가 **한 소스에서 두 블록**으로 나온다: OS 설정(@media)과 토글([data-theme]). */

:root{
  /* ── 바탕 ── */
  --bg: #F1F1EE;
  --bg-2: #E7E7E3;
  --card: #FFFFFF;
  --card-2: #F1F1EE;

  /* ── 글자 ── */
  --fg: #15161A;
  --fg-2: #4A4B4F;
  --fg-3: #656669;

  /* ── 선·그림자 ── */
  --line: #D8D8D3;
  --line-2: #15161A;
  --shadow: 0 2px 10px rgba(34,40,43,.07), 0 1px 3px rgba(34,40,43,.05);
  --shadow-lg: 0 8px 28px rgba(34,40,43,.12), 0 2px 8px rgba(34,40,43,.07);

  /* ── 오행 다섯 색 (五方正色) ── */
  --wood: #1F8C62;
  --wood-bg: #E3F0EA;
  --wood-ink: #027A52;
  --fire: #BC094A;
  --fire-bg: #FBE4EC;
  --fire-ink: #BC094A;
  --earth: #E5A400;
  --earth-bg: #FAEFD8;
  --earth-ink: #9B5F03;
  --metal: #8E979E;
  --metal-bg: #ECEEEF;
  --metal-ink: #656C73;
  --water: #14307A;
  --water-bg: #E2E6F0;
  --water-ink: #14307A;

  /* ── 주조·강조 (낙관과 쪽빛) ── */
  --brand: #FF3B00;
  --brand-ink: #CB2D00;
  --brand-bg: #FFE9E2;
  --brand-on: #15161A;
  --brand-shadow: #FF3B002E;
  --accent: #14307A;
  --accent-on: #FFFFFF;

  /* ── 상태 ── */
  --ok: #3E7D5A;
  --ok-bg: #E4EFE6;
  --ok-ink: #245C40;
  --warn: #B0801F;
  --warn-bg: #F6EEDC;
  --warn-ink: #7E5612;
  --bad: #B0342A;
  --bad-bg: #F7E7E1;
  --bad-ink: #93261D;

  /* ── 글꼴 ── */
  --ui: 'Schibsted Grotesk','Pretendard','Apple SD Gothic Neo','Noto Sans KR',-apple-system, BlinkMacSystemFont,sans-serif;
  --round: 'Gaegu','Pretendard','Apple SD Gothic Neo',sans-serif;
  --hanja: 'Nanum Myeongjo','Hiragino Mincho ProN',AppleMyungjo,Batang,serif;
  --mono: ui-monospace,'SF Mono',Menlo,monospace;

  /* ── 모서리·간격 ── */
  --r-sm: 5px;
  --r: 20px;
  --r-lg: 26px;
  --r-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ── 모션 ── */
  --t-fast: 120ms;
  --t-base: 240ms;
  --t-slow: 500ms;
  --curve-out: cubic-bezier(.22,.9,.3,1);
  --curve-move: cubic-bezier(.2,.7,.3,1);

  /* ── 타입 스케일 ── */
  --micro: 11px;
  --caption: 13px;
  --body: 15px;
  --lead: 17px;
  --title: 20px;
  --head: 24px;
  --display: 30px;
  --lh-tight: 1.35;
  --lh-normal: 1.7;
  --lh-relaxed: 1.85;
  --track-tight: -0.02em;

  /* ── 효과 (글래스·글로우) ── */
  --glass-fill: #FFFFFF1F;
  --glass-fill-strong: #FFFFFF29;
  --glass-border: #FFFFFF66;
  --glass-blur: 14px;
  --glow-white: #FFFFFF8C;
  --glow-periwinkle: #96AAF3E6;
  --grad-done-from: #A9B8FF;
  --grad-done-to: #DCC8F6;
  --caret: #D9CFFB;
  --pad: #151515;
  --key: #6B6B6B;
  --bloom-blue: #6B74D9;
  --bloom-rose: #D2A9BC;
}

/* 어두운 화면을 쓰는 손님도 있다. 색만 바꾸고 성격은 유지한다 —
   밝은 쪽에서 '따뜻한 종이' 였다면 어두운 쪽에서는 '밤의 종이' 다. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* ── 바탕 ── */
    --bg: #000000;
    --bg-2: #0A0A0C;
    --card: #1F1F1F;
    --card-2: #292929;

    /* ── 글자 ── */
    --fg: #FFFFFF;
    --fg-2: #CCCCCC;
    --fg-3: #999999;

    /* ── 선·그림자 ── */
    --line: #2E2E2E;
    --line-2: #666666;
    --shadow: 0 2px 14px rgba(0,0,0,.55);
    --shadow-lg: 0 14px 44px rgba(0,0,0,.65);

    /* ── 오행 다섯 색 (五方正色) ── */
    --wood-bg: #0C241C;
    --wood-ink: #8FEDC4;
    --fire-bg: #2A0C17;
    --fire-ink: #FFA894;
    --earth-bg: #241A06;
    --earth-ink: #FFD489;
    --metal-bg: #1B1E21;
    --metal-ink: #C3D6E1;
    --water-bg: #0B1330;
    --water-ink: #9FB6FF;
    --wood: #71D9A9;
    --fire: #E72E64;
    --earth: #E5A400;
    --metal: #8E979E;
    --water: #5579CA;

    /* ── 주조·강조 (낙관과 쪽빛) ── */
    --brand-ink: #FFFFFF;
    --brand-bg: #1F1F1F;
    --brand-on: #000000;
    --brand-shadow: #FFFFFF8C;
    --brand: #FFFFFF;
    --accent: #96AAF3;
    --accent-on: #0B0B10;

    /* ── 상태 ── */
    --ok: #4FD8A0;
    --ok-bg: #0E2A20;
    --ok-ink: #87EFC2;
    --warn: #F0B94E;
    --warn-bg: #2B2110;
    --warn-ink: #FFD98C;
    --bad: #FF7C6B;
    --bad-bg: #2E1512;
    --bad-ink: #FFAE9F;
  }
}
:root[data-theme="dark"]{
  /* ── 바탕 ── */
  --bg: #000000;
  --bg-2: #0A0A0C;
  --card: #1F1F1F;
  --card-2: #292929;

  /* ── 글자 ── */
  --fg: #FFFFFF;
  --fg-2: #CCCCCC;
  --fg-3: #999999;

  /* ── 선·그림자 ── */
  --line: #2E2E2E;
  --line-2: #666666;
  --shadow: 0 2px 14px rgba(0,0,0,.55);
  --shadow-lg: 0 14px 44px rgba(0,0,0,.65);

  /* ── 오행 다섯 색 (五方正色) ── */
  --wood-bg: #0C241C;
  --wood-ink: #8FEDC4;
  --fire-bg: #2A0C17;
  --fire-ink: #FFA894;
  --earth-bg: #241A06;
  --earth-ink: #FFD489;
  --metal-bg: #1B1E21;
  --metal-ink: #C3D6E1;
  --water-bg: #0B1330;
  --water-ink: #9FB6FF;
  --wood: #71D9A9;
  --fire: #E72E64;
  --earth: #E5A400;
  --metal: #8E979E;
  --water: #5579CA;

  /* ── 주조·강조 (낙관과 쪽빛) ── */
  --brand-ink: #FFFFFF;
  --brand-bg: #1F1F1F;
  --brand-on: #000000;
  --brand-shadow: #FFFFFF8C;
  --brand: #FFFFFF;
  --accent: #96AAF3;
  --accent-on: #0B0B10;

  /* ── 상태 ── */
  --ok: #4FD8A0;
  --ok-bg: #0E2A20;
  --ok-ink: #87EFC2;
  --warn: #F0B94E;
  --warn-bg: #2B2110;
  --warn-ink: #FFD98C;
  --bad: #FF7C6B;
  --bad-bg: #2E1512;
  --bad-ink: #FFAE9F;
}

/* ── 공통 바탕 ─────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--ui); font-size:var(--lead); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.l4c-page{max-width:520px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7)}

/* ── 카드 ── */
.l4c-card{
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:var(--sp-5) var(--sp-5);
}
.l4c-card + .l4c-card{margin-top:var(--sp-4)}

/* ── 버튼 ──
   눌러도 되는 것이 눌러도 되게 보여야 한다. 크고 둥글게. */
.l4c-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--ui);font-size:var(--lead);font-weight:700;
  padding:var(--sp-4) var(--sp-5);border:none;border-radius:var(--r-pill);
  background:var(--brand);color:var(--brand-on);cursor:pointer;
  box-shadow:0 3px 10px var(--brand-shadow);
  transition:transform var(--t-fast) var(--curve-out), box-shadow var(--t-fast) var(--curve-out), filter var(--t-fast) var(--curve-out);
  min-height:48px;                 /* 부스는 손가락으로 누른다 */
}
.l4c-btn:hover{filter:brightness(1.04);box-shadow:0 5px 16px var(--brand-shadow)}
.l4c-btn:active{transform:translateY(1px) scale(.99)}
.l4c-btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
.l4c-btn.ghost{
  background:var(--card-2);color:var(--fg-2);
  box-shadow:inset 0 0 0 2px var(--line-2);
}
.l4c-btn.ghost:hover{background:var(--bg-2)}
.l4c-btn.sm{font-size:var(--body);padding:var(--sp-2) var(--sp-4);min-height:38px}

/* ── 입력 ── */
.l4c-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.l4c-field > span{font-size:var(--caption);font-weight:700;color:var(--fg-2)}
.l4c-input{
  font-family:var(--ui);font-size:var(--lead);padding:var(--sp-4) var(--sp-4);
  border:2px solid var(--line-2);border-radius:var(--r);
  background:var(--card);color:var(--fg);width:100%;min-height:52px;
  transition:border-color var(--t-fast) var(--curve-out), box-shadow var(--t-fast) var(--curve-out);
}
.l4c-input:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-bg)}

/* 키보드 사용자에게 초점이 보여야 한다 */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm);
}

/* ── 알약 라벨 ── */
.l4c-pill{
  display:inline-block;font-size:var(--caption);font-weight:700;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
  background:var(--brand-bg);color:var(--brand-ink);
}
/* ★ 글자색이 **라이트 값으로 박혀** 있었다. 다크에서는 어두운 면에 어두운 글자가
   얹혀 2.30~3.24:1 이었다(다섯 전부). 라이트에서도 火 4.30 · 土 3.72 로 미달이었다.
   `--*-ink` 토큰으로 올리면서 값을 바로잡았다 — `--ok-ink` 와 같은 이유, 같은 방식. */
.l4c-pill.wood {background:var(--wood-bg); color:var(--wood-ink)}
.l4c-pill.fire {background:var(--fire-bg); color:var(--fire-ink)}
.l4c-pill.earth{background:var(--earth-bg);color:var(--earth-ink)}
.l4c-pill.metal{background:var(--metal-bg);color:var(--metal-ink)}
.l4c-pill.water{background:var(--water-bg);color:var(--water-ink)}

/* ── 도장 ──
   낙관은 이 브랜드의 유일한 '각진 것' 이다. 그래서 남긴다 —
   전부 둥글면 도장이 도장으로 안 보인다. */
.l4c-seal{
  display:grid;place-items:center;flex:0 0 auto;
  width:56px;height:56px;border-radius:var(--r);
  background:var(--brand-bg);color:var(--brand-ink);
  font-family:var(--hanja);font-size:var(--title);line-height:1.05;
  box-shadow:inset 0 0 0 2px var(--brand);
}
.l4c-seal small{display:block;font-size:var(--title)}

/* ── 오류 ── */
/* ★ `.l4c-err` 는 없앴다(2026-09-06). 화면 넷이 이걸 쓰고 다른 셋이 자기
   `.err` 를 따로 갖고 있었다 — 같은 「오류 한 마디」가 정의 넷이었다.
   지금은 `web/app/src/ui/Note.tsx` 의 `tone="bad"` 하나다. 거기가
   `role="alert"` 를 붙일지도 함께 정한다(여기서는 정할 수 없던 것이다). */

/* ── 제목 ── */
.l4c-h1{font-size:var(--head);font-weight:800;letter-spacing:-.02em;margin:0;
        line-height:1.3;text-wrap:balance}
.l4c-lede{font-size:var(--body);color:var(--fg-2);margin:var(--sp-2) 0 0}
.l4c-label{font-size:var(--micro);font-weight:800;color:var(--fg-3);
           letter-spacing:.06em;margin-bottom:var(--sp-2)}

/* 한자는 장식이다. 항상 한글 뒤에, 작게. */
.l4c-hanja{font-family:var(--hanja);font-size:.82em;opacity:.65;margin-left:var(--sp-1)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}