/* Hallmark · genre: atmospheric · macrostructure: Tile Board (첫 화면) + One-line Tool (도구) · theme: custom (vibe: "밤의 작업대, 따뜻한 주황 빛 하나")
 * paper oklch(15% 0.012 275) · accent oklch(76% 0.15 55) amber · display/body Pretendard Variable + JetBrains Mono
 * axes: dark / geometric-sans / warm · motion: emil-design-eng(누름 0.97 · 200ms ease-out · 스태거 40ms)
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 * 이 파일이 미니진형천국·AI 전화의 디자인 원본이다(설명은 design.md). 도구 HTML은 자기 <style> 뒤에 이 파일을 붙인다 —
 * 도구 안의 옛 변수 이름(--paper·--pop·--grape…)은 아래 「다리」에서 토큰으로 이어 줌. 새 화면은 --color-* 토큰을 바로 쓴다 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap");

:root:root:root{
  color-scheme:dark;
  /* 색 */
  --color-paper:oklch(15% 0.012 275);
  --color-paper-2:oklch(19.5% 0.014 275);
  --color-paper-3:oklch(24% 0.016 275);
  --color-rule:oklch(31% 0.016 275);
  --color-ink:oklch(96% 0.006 275);
  --color-ink-2:oklch(80% 0.01 275);
  --color-ink-3:oklch(66% 0.012 275);
  --color-accent:oklch(76% 0.15 55);
  --color-accent-ink:oklch(20% 0.03 55);
  --color-accent-soft:oklch(30% 0.06 55);
  --color-bloom-1:oklch(48% 0.13 55 / .28);
  --color-bloom-2:oklch(42% 0.14 300 / .32);
  --color-minus:oklch(76% 0.12 30);
  --color-ok:oklch(80% 0.12 160);
  --color-ok-soft:oklch(30% 0.05 160);
  --color-warn:oklch(86% 0.12 90);
  --color-warn-soft:oklch(32% 0.05 90);
  --color-focus:oklch(82% 0.14 55);
  --color-danger:oklch(62% 0.19 27);
  --color-danger-ink:oklch(98% 0.01 27);
  --color-shade:oklch(0% 0 0 / .35);
  /* 글꼴 */
  --font-body:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  /* 크기·간격·모서리 */
  --text-title:clamp(26px, 6vw, 32px);
  --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; --space-xl:24px; --space-2xl:40px;
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  /* 움직임 */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-in:cubic-bezier(0.55,0,1,0.45);
  --dur-press:160ms; --dur-ui:200ms; --dur-enter:260ms;

  /* ── 다리: 도구들의 옛 변수 이름 → 토큰 ── */
  --font:var(--font-body);
  --paper:var(--color-paper); --bg:var(--color-paper);
  --card:var(--color-paper-2); --panel:var(--color-paper-2);
  --ink:var(--color-ink); --ink-2:var(--color-ink-2); --ink-3:var(--color-ink-3);
  --line:var(--color-rule);
  --accent:var(--color-accent); --accent-soft:var(--color-accent-soft);
  --pop:var(--color-accent); --pop-soft:var(--color-accent-soft);
  --grape:var(--color-accent); --grape-soft:var(--color-accent-soft);
  --sky:var(--color-accent); --sky-soft:var(--color-accent-soft);
  --glow:var(--color-accent); --glow-2:var(--color-accent);
  --navy:var(--color-ink-2);
  --minus:var(--color-minus);
  --ok:var(--color-ok); --mint:var(--color-ok); --mint-soft:var(--color-ok-soft);
  --sun:var(--color-warn);
}

/* ── 바탕 ── */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;margin:0}
body{
  background-color:var(--color-paper);
  background-image:
    radial-gradient(60% 40% at 85% -5%, var(--color-bloom-1), transparent 70%),
    radial-gradient(55% 35% at 0% 105%, var(--color-bloom-2), transparent 70%);
  background-attachment:fixed;
  color:var(--color-ink);
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
}
[hidden]{display:none !important}

/* ── 머리: 제목 한 단어, 아이콘 타일 없음 ── */
header .ico{display:none}
header h1{font-size:var(--text-title);font-weight:700;letter-spacing:-0.03em;line-height:1.1;font-style:normal;color:var(--color-ink)}
header p,header small{display:none}
.mjc-home{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:var(--space-xs);
  border-radius:var(--radius-pill);color:var(--color-ink-2);text-decoration:none;flex:none;
  transition:transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.mjc-home svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mjc-home:active{transform:scale(0.92)}

/* ── 입력칸 ── */
textarea{background:var(--color-paper-3);color:var(--color-ink);border-color:var(--color-rule)}
textarea::placeholder,input::placeholder{color:var(--color-ink-3)}

/* ── 큰 버튼(.go · .wide · .copy · .cta): 주황 하나, 꺼지면 이유가 읽히게 ── */
.go,.wide,.copy,.cta.main,#goImg,#goMerge,#goSign{
  background:var(--color-accent);color:var(--color-accent-ink);box-shadow:none;
  font-weight:700;letter-spacing:-0.01em;
}
.go:disabled,.wide:disabled,.copy:disabled,.cta:disabled,#goImg:disabled,#goMerge:disabled,#goSign:disabled{
  opacity:1;background:var(--color-paper-3);color:var(--color-ink-3);box-shadow:none;cursor:default;
}
.go[data-state="success"],.wide[data-state="success"],.copy[data-state="success"],.cta[data-state="success"]{background:var(--color-ok);color:var(--color-accent-ink)}
.go[data-state="loading"],#goImg[data-state="loading"],#goMerge[data-state="loading"],#goSign[data-state="loading"]{opacity:1;background:var(--color-paper-3);color:var(--color-ink)}

/* ── 도구별 다듬기 ── */
.out .big{background:var(--color-paper-3)}
.out .big .lab{color:var(--color-ink-2)}
.inrow input::placeholder{color:var(--color-ink-3)}
.inbox:focus-within{border-color:var(--color-accent);box-shadow:none}
.cta{background:var(--color-paper-2);border-color:var(--color-rule);color:var(--color-ink)}
.cta.main{box-shadow:none;border-color:transparent}
.cta.main::before{content:none}
.cta[data-state="success"]{border-color:transparent}

/* ── 누름 반응: 누르는 것 전부 ── */
button,label.pick,.cp,.chips button,.seg button,.tog button{
  transition:transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
button:not(:disabled):active,label.pick:active{transform:scale(0.97)}
button:focus-visible,a:focus-visible,label:focus-within,textarea:focus-visible,input:focus-visible{
  outline:2px solid var(--color-focus);outline-offset:2px;
}

/* ── 기다림 표시: 오브 + 글자 ── */
mjc-orb{display:inline-block;vertical-align:middle;flex:none;line-height:0}
.mjc-busy{display:inline-flex;align-items:center;gap:var(--space-sm)}
.mono,.mjc-mono{font-family:var(--font-mono);font-weight:500}

/* ── 맨 아래 작은 줄 ── */
.foot,.rule{color:var(--color-ink-3);font-size:11.5px}

/* ── 처음 열 때: 위에서부터 차례로 ── */
@media (prefers-reduced-motion: no-preference){
  main > *{animation:mjc-in var(--dur-enter) var(--ease-out) both}
  main > *:nth-child(2){animation-delay:40ms}
  main > *:nth-child(3){animation-delay:80ms}
  main > *:nth-child(4){animation-delay:120ms}
  main > *:nth-child(5){animation-delay:160ms}
  main > *:nth-child(n+6){animation-delay:200ms}
}
@keyframes mjc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:120ms !important;animation-delay:0ms !important;transition-duration:0ms !important}
  @keyframes mjc-in{from{opacity:0}to{opacity:1}}
}