/* =========================================================================
   서명전에 — Brand Tokens v2
   "Mono + Indigo Ink" — 산뜻하게 모던하지만 무게감 있는 신뢰
   ------------------------------------------------------------------------
   원칙:
   - 베이스는 거의 무채색 (잉크 블랙 + 페이퍼 화이트). 잉크처럼 또렷.
   - 브랜드 컬러는 한 톤(Indigo Ink)만 진하게 — 토스 블루도 아니고 청량 블루도 아닌,
     서류·만년필·법률 무게감의 깊은 인디고.
   - 액센트는 따뜻한 코랄(서명/도장 인주 느낌) — 강조와 도장에만 절제해서.
   - Semantic은 명도 위주로 차분하게 (네온톤 X).
   ------------------------------------------------------------------------ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");

:root {
  /* ---------- Ink (브랜드 메인) ---------- */
  --ink-50:   #EEF0F7;
  --ink-100:  #DDE2EF;
  --ink-200:  #B6BFD8;
  --ink-300:  #8896BC;
  --ink-400:  #5C6E9C;
  --ink-500:  #354A82;     /* 보조 잉크 */
  --ink-600:  #1F3168;     /* === Brand === Indigo Ink */
  --ink-700:  #15224B;
  --ink-800:  #0D1838;
  --ink-900:  #070E22;

  --brand:        var(--ink-600);   /* #1F3168 */
  --brand-hover:  var(--ink-700);
  --brand-press:  var(--ink-800);
  --brand-soft:   var(--ink-50);
  --brand-ink:    var(--ink-700);   /* 텍스트 on soft */

  /* ---------- Seal (액센트 — 도장/서명 인주) ---------- */
  --seal-50:   #FFF1EC;
  --seal-100:  #FFD9CB;
  --seal-300:  #F58F6E;
  --seal-500:  #D85A36;     /* === Accent === 절제된 따뜻한 코랄 */
  --seal-700:  #9C3A1C;
  --seal:        var(--seal-500);
  --seal-soft:   var(--seal-50);
  --seal-ink:    var(--seal-700);

  /* ---------- Paper / Mono Greyscale ---------- */
  --paper:    #FAFAF7;     /* 따뜻한 종이 화이트 (페이지 배경) */
  --paper-2:  #F4F4EE;
  --grey-50:  #F7F7F4;
  --grey-100: #EFEFEA;
  --grey-150: #E5E5DF;
  --grey-200: #D6D6CF;
  --grey-300: #B8B8AF;
  --grey-400: #939389;
  --grey-500: #6E6E64;
  --grey-600: #525249;
  --grey-700: #3A3A33;
  --grey-800: #25251F;
  --grey-900: #14140F;     /* 잉크 블랙 */

  /* ---------- Semantic (차분한 명도 톤) ---------- */
  --alert:       #C8344B;
  --alert-soft:  #FBE9EC;
  --alert-ink:   #7A1A29;

  --warn:        #B6791F;
  --warn-soft:   #FAEFD8;
  --warn-ink:    #6E450C;

  --safe:        #2E7D5B;
  --safe-soft:   #E1F0E8;
  --safe-ink:    #16472F;

  --info:        var(--ink-500);
  --info-soft:   var(--ink-50);
  --info-ink:    var(--ink-700);

  /* ---------- Surface ---------- */
  --bg:          var(--paper);
  --bg-card:     #FFFFFF;
  --bg-soft:     var(--grey-50);
  --bg-ink:      var(--grey-900);
  --separator:   var(--grey-150);
  --hairline:    rgba(20, 20, 15, 0.08);

  /* ---------- Label ---------- */
  --label:               var(--grey-900);
  --label-secondary:     var(--grey-600);
  --label-tertiary:      var(--grey-500);
  --label-quaternary:    var(--grey-400);
  --label-on-ink:        #FFFFFF;
  --label-on-ink-soft:   rgba(255,255,255,0.72);

  /* ---------- Type ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-serif: "Source Serif Pro", "Noto Serif KR", "Nanum Myeongjo", ui-serif, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Shape ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(20,20,15,0.04), 0 1px 3px rgba(20,20,15,0.06);
  --shadow-2: 0 4px 14px rgba(20,20,15,0.07), 0 2px 4px rgba(20,20,15,0.05);
  --shadow-3: 0 14px 36px rgba(20,20,15,0.10), 0 4px 10px rgba(20,20,15,0.06);
  --shadow-brand: 0 8px 24px rgba(31,49,104,0.22);
  --shadow-seal:  0 6px 18px rgba(216,90,54,0.22);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 160ms;
  --dur: 220ms;
  --dur-slow: 320ms;
}

/* ---------- Base reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; color: inherit; }
.tnum { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }