/* ═══════════════════════════════════════════════════════════
   그링 플로우 — 디자인 토큰

   방향: macOS 의 재질감.
     · 반투명은 사이드바와 툴바에만. 내용 영역은 불투명하게.
       (전부 흐리면 도면이 안 읽힌다 — macOS 도 그렇게 안 한다)
     · 테두리는 선 하나가 아니라 두 겹이다.
       바깥 hairline + 안쪽 위 하이라이트. 이게 '유리' 느낌을 만든다.
     · 그림자도 한 겹이 아니다. 붙어 있는 그림자 + 멀리 퍼지는 그림자.

   색은 여전히 의미다.
     steel = 못 바꾸는 것 · blue = 우리가 만드는 것 · amber = 위반
   ═══════════════════════════════════════════════════════════ */
:root{
  /* ── 강조 ── */
  --blue:#3457dc;
  --blue-d:#0055D4;
  --blue-l:#3D8BFF;
  --blue-s:#EBF3FF;
  --blue-glow:rgba(0,106,255,.26);

  /* ── 잉크 ── */
  --ink:#0B0C0E;
  --ink-1:rgba(11,12,14,.88);
  --ink-2:rgba(11,12,14,.58);
  --ink-3:rgba(11,12,14,.40);
  --ink-4:rgba(11,12,14,.24);

  /* ── 표면 ── */
  --desk:#E6E8EC;
  --desk-2:#DBDFE6;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --card:#FFFFFF;
  --dark:#0E1012;
  --dark-2:#191C1F;
  --paper:#E9EBE6;
  --paper-line:#C3C9C0;

  /* ── 재질 (반투명) ── */
  --mat-bar:rgba(252,253,254,.72);
  --mat-side:rgba(250,251,252,.64);
  --mat-pop:rgba(255,255,255,.84);
  --blur:saturate(180%) blur(24px);
  --blur-lite:saturate(180%) blur(14px);

  /* ── 선 ── */
  --hair:rgba(11,12,14,.10);
  --hair-2:rgba(11,12,14,.055);
  --gloss:rgba(255,255,255,.72);
  --gloss-dark:rgba(255,255,255,.08);

  /* ── 의미색 ── */
  --steel:#8B959B;
  --steel-d:#4A555B;
  --amber:#A97B08;
  --amber-s:#FDF6E3;
  --red:#C6402B;
  --red-s:#FCEFEC;
  --green:#18794E;
  --green-s:#E7F4EC;

  /* ── 타이포 ── */
  --sans:Pretendard,-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo",system-ui,sans-serif;
  /* ⚠️ IBM Plex Mono 에는 한글 글리프가 없다.
     폴백을 안 두면 한글이 시스템 기본 고정폭(굴림 계열)으로 떨어져
     혼자 다른 글꼴로 보인다. 숫자·영문은 모노, 한글은 Pretendard 로 간다. */
  --mono:"SF Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,
         Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --script:"Playwrite ID","Playwrite IT Moderna",cursive;

  /* ── 치수 ── */
  --gut:36px;
  --max:1200px;

  /* ── 모서리 — macOS 는 크게 준다 ── */
  --r-xs:6px;
  --r-s:9px;
  --r:14px;
  --r-l:20px;
  --r-xl:28px;

  /* ── 그림자 — 두 겹 이상 ── */
  --sh-1:0 1px 1px rgba(11,12,14,.05), 0 0 0 .5px rgba(11,12,14,.06);
  --sh-2:0 1px 2px rgba(11,12,14,.06), 0 4px 12px -4px rgba(11,12,14,.12), 0 0 0 .5px rgba(11,12,14,.055);
  --sh-3:0 2px 4px rgba(11,12,14,.05), 0 12px 28px -8px rgba(11,12,14,.16), 0 0 0 .5px rgba(11,12,14,.06);
  --sh-win:0 4px 8px rgba(11,12,14,.045), 0 24px 60px -18px rgba(11,12,14,.26), 0 0 0 .5px rgba(11,12,14,.08);
  --sh-pop:0 6px 14px rgba(11,12,14,.08), 0 28px 60px -20px rgba(11,12,14,.3), 0 0 0 .5px rgba(11,12,14,.09);
}

@media (max-width:900px){
  :root{ --gut:20px; --r-l:16px; --r-xl:20px; }
}

/* ── 리셋 ─────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--surface);
  line-height:1.6;
  letter-spacing:-.011em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 1;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:inherit;letter-spacing:inherit}
input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
svg{display:block}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-xs)}
input:focus-visible,select:focus-visible{
  outline:none;border-color:var(--blue) !important;
  box-shadow:0 0 0 3.5px var(--blue-glow);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── 공용 ─────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1}

/* 버튼 — 사각에 모서리만 살짝. 그림자와 그라데이션은 쓰지 않는다.
   면과 글자만으로 위계를 만든다. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 20px;border-radius:6px;
  font-size:14px;font-weight:600;letter-spacing:-.014em;
  white-space:nowrap;position:relative;
  transition:background .16s cubic-bezier(.3,0,.2,1),
             color .16s, opacity .16s;
}
.btn:active{opacity:.85}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-d)}
.btn--ghost{
  background:#fff;color:var(--ink-1);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.btn--ghost:hover{background:#F1F3F5}
.btn--sm{padding:8px 16px;font-size:13.5px}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.34;pointer-events:none;box-shadow:none}

/* 세그먼트 컨트롤 — macOS 의 그것 */
.seg{
  display:flex;padding:3px;gap:3px;
  background:rgba(11,12,14,.05);border-radius:8px;
}
.seg button{
  flex:1;padding:7px 10px;border-radius:5px;
  font-size:13px;font-weight:500;color:var(--ink-2);text-align:center;
  transition:background .16s,color .16s,box-shadow .16s;
}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink-1)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:640}

/* 치수선 */
.dimrule{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.dimrule::before,.dimrule::after{content:"";height:1px;background:var(--hair);flex:1}
.dimrule__tick{width:1px;height:9px;background:var(--ink-4);flex:none}