/* 계산기 디자인 — 시안B(스타일). 규칙은 AGENTS.md를 따릅니다. */

/* ───────── 글꼴 (fonts/web: 화면 글자만 남긴 웹 글꼴, make-fonts.py로 만듦) ─────────
   Calc Sans KR = IBM Plex Sans KR, Calc Mono = IBM Plex Mono 의 부분 글꼴입니다.
   OFL 예약 이름 "Plex" 때문에 줄인 글꼴은 이름을 바꿨습니다. */
@font-face{font-family:"Wanted Sans";src:url("fonts/web/WantedSans-Variable.woff2") format("woff2");font-weight:400 950;font-display:swap}
@font-face{font-family:"Calc Sans KR";src:url("fonts/web/CalcSansKR-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Calc Sans KR";src:url("fonts/web/CalcSansKR-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Calc Sans KR";src:url("fonts/web/CalcSansKR-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Calc Sans KR";src:url("fonts/web/CalcSansKR-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Calc Mono";src:url("fonts/web/CalcMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Calc Mono";src:url("fonts/web/CalcMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Calc Mono";src:url("fonts/web/CalcMono-SemiBold.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Galmuri11";src:url("fonts/web/Galmuri11-Bold.woff2") format("woff2");font-weight:400 700;font-display:swap}
/* ───────── 색·글꼴 토큰 (샘플 실측값) ───────── */
:root{
  --bg:#3430B4;          /* 남보라 바탕 */
  --bg-deep:#2D29A6;
  --cream:#F0EEE5;       /* 글자·버튼·카드 */
  --cream-2:#E6E3D7;     /* 카드 안 보조 칸 */
  --cream-3:#DCD9CC;
  --lime:#DEE6A7;        /* 작은 포인트 */
  --rule:#615CBF;        /* 1px 구분선 */
  --rule-soft:rgba(240,238,229,.13);
  --blue:#302BB4;        /* 크림 위 파란 글자 */
  --ink:#2A2B26;         /* 카드 제목 */
  --ink-2:#4D4D48;       /* 카드 본문 */
  --card-rule:#D4D2C9;
  --muted:#C4C1EA;       /* 남보라 위 흐린 글자 */
  --muted-2:#9F9BDD;
  --font-title:"Wanted Sans","Calc Sans KR","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-body:"Calc Sans KR","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-num:"Calc Mono","Calc Sans KR","Noto Sans KR",monospace;
  --font-pixel:"Galmuri11","Calc Mono",monospace;
  --gutter:50px;
  color-scheme:dark;font-family:var(--font-body);color:var(--cream);background:var(--bg);font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;word-break:keep-all;overflow-wrap:break-word;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");min-height:100svh;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}

/* ───────── 머리글 (높이 93px + 1px 선) ───────── */
.site-header{height:94px;padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:14px;color:var(--cream);text-decoration:none;height:auto}
.page-logo{display:block;height:38px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.wordmark{display:flex;flex-direction:column;gap:3px;line-height:1}
.wordmark strong{font-family:var(--font-title);font-size:19px;font-weight:700;letter-spacing:-.6px}
.wordmark small{font-family:var(--font-num);font-size:8.5px;letter-spacing:.16em;color:var(--cream);opacity:.9}
.header-right{display:flex;align-items:center;gap:34px}
.edition{font-size:12.5px;font-weight:600;letter-spacing:-.2px;color:var(--cream)}
.header-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;height:46px;padding:0 22px;background:var(--cream);color:var(--blue);border-radius:3px;font-size:13px;font-weight:600;text-decoration:none;min-width:204px}
.header-cta span{font-family:var(--font-num);font-size:13px}
.header-cta:hover{background:#fff}

/* ───────── 본문 배치 ───────── */
main{position:relative;max-width:1440px;margin:0 auto;min-height:calc(100svh - 94px - 64px);
  display:grid;grid-template-columns:360px 290px minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"calc hist intro" "calc hist camera";column-gap:32px;
  padding:44px var(--gutter) 26px 100px}
.intro{grid-area:intro;margin-left:76px;min-width:0}
.calculator{grid-area:calc;align-self:start}
.history-panel{grid-area:hist;align-self:start}
.camera-panel{grid-area:camera;margin-left:76px;min-width:0}

/* 설계도 장식 (화면 읽기 프로그램에서는 숨김) */
.blueprint{position:absolute;left:var(--gutter);top:0;width:770px;height:100%;pointer-events:none;z-index:0}
.bp-frame{position:absolute;left:4px;top:44px;right:0;bottom:26px;border:1px solid var(--rule-soft)}
.bp-line{position:absolute;background:var(--rule-soft)}
.bp-h{height:1px;left:4px;right:0}
.bp-v{width:1px;top:44px;bottom:26px}
.bp-sq{position:absolute;width:13px;height:13px;border:1px solid rgba(240,238,229,.32);background:var(--bg)}
.bp-dot{position:absolute;width:9px;height:9px;background:rgba(240,238,229,.16)}
.bp-label{position:absolute;font-family:var(--font-num);font-size:11px;letter-spacing:.2em;color:rgba(240,238,229,.32)}
.bp-pixel{position:absolute;font-family:var(--font-pixel);font-weight:700;font-size:24px;letter-spacing:2px;color:rgba(240,238,229,.16)}
.calculator,.history-panel,.camera-panel{position:relative;z-index:1}

/* ───────── 소개 (오른쪽 글 영역) ───────── */
.eyebrow{position:absolute;left:var(--gutter);top:14px;display:flex;align-items:center;gap:10px;font-family:var(--font-num);font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--muted);z-index:2}
.eyebrow span{width:6px;height:6px;background:var(--lime)}
h1{font-family:var(--font-title);font-size:clamp(46px,4.2vw,60px);font-weight:600;line-height:1.08;letter-spacing:-.045em;margin:0 0 24px;color:var(--cream);word-break:keep-all}
h1 .px{font-family:var(--font-pixel);font-weight:700;letter-spacing:0;font-size:.94em}
h1 .dot{display:inline-block;width:.2em;height:.2em;margin-left:.08em;background:var(--lime);color:transparent;overflow:hidden;vertical-align:baseline;line-height:0}
.intro p{margin:0;padding-top:20px;border-top:1px solid var(--rule);font-size:16px;line-height:1.75;font-weight:500;letter-spacing:-.3px;color:var(--cream)}
.intro p::first-line{font-family:var(--font-title);font-size:25px;font-weight:700;letter-spacing:-.04em}
.keyboard-note{margin-top:14px;display:flex;align-items:center;gap:14px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.keyboard-note small{font-family:var(--font-num);font-size:10.5px;letter-spacing:.06em;color:var(--muted-2)}
.key-icon{flex-shrink:0;width:36px;height:36px;border:1px solid var(--rule);border-radius:3px;display:grid;place-items:center;font-size:17px;color:var(--cream)}

/* ───────── 계산기 = 떠 있는 크림 카드 (그림자는 여기만) ───────── */
.calculator{width:360px;background:var(--cream);color:var(--ink);border-radius:6px;padding:22px 22px 16px;
  box-shadow:0 26px 50px -20px rgba(16,12,84,.6),0 8px 18px -10px rgba(16,12,84,.45)}
.calc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.calc-top>span{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:var(--ink-2)}
.calc-top>span::before{content:"CALCULATOR";font-family:var(--font-num);font-size:11px;font-weight:500;letter-spacing:.22em;color:var(--blue)}
.history-toggle{background:transparent;border:1px solid var(--card-rule);border-radius:3px;color:var(--blue);display:grid;place-items:center;width:36px;height:36px;padding:0}
.history-toggle:hover{background:var(--cream-2)}
.history-toggle:focus-visible,.key:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.display-area{height:150px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding:12px 2px 18px;gap:8px;overflow:hidden}
.expression{height:20px;color:var(--blue);font-family:var(--font-num);font-size:13px;letter-spacing:.02em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
output{display:block;max-width:100%;font-family:var(--font-num);font-size:68px;font-weight:400;line-height:1.1;letter-spacing:-.04em;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--card-rule);border:1px solid var(--card-rule);border-radius:3px;overflow:hidden}
.key{border:0;border-radius:0;height:62px;background:var(--cream);color:var(--ink);font-family:var(--font-num);font-size:24px;font-weight:400;display:flex;align-items:center;justify-content:center;user-select:none;touch-action:manipulation;transition:background .12s,color .12s}
.key:hover{background:#E9E6DB}
.key:active,.key.pressed{background:var(--cream-3)}
.utility{background:var(--cream-2);color:var(--blue);font-size:19px;font-weight:500}
.utility:hover{background:var(--cream-3)}
.operator{background:var(--bg);color:var(--cream);font-size:26px}
.operator:hover{background:#3E3AC4}
.operator[aria-pressed="true"]{background:var(--lime);color:var(--blue)}
.operator:active,.operator.pressed{background:#25219A;color:var(--cream)}
.zero{grid-column:span 2;justify-content:flex-start;padding-left:26px}
.home-indicator{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--card-rule);font-size:12.5px;font-weight:600;color:var(--blue)}
.home-indicator::before{content:"키보드로 바로 계산"}
.home-indicator::after{content:"↗";font-family:var(--font-num);font-size:13px}

/* ───────── 계산 로그 = 남보라 위 선으로 나눈 블록 ───────── */
.history-panel{height:620px;min-width:0;background:var(--bg);border:1px solid var(--rule);padding:22px 22px 20px;display:flex;flex-direction:column;color:var(--cream)}
.history-panel:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.history-heading h2{font-family:var(--font-title);font-size:20px;font-weight:700;margin:0;letter-spacing:-.04em;display:flex;align-items:center;gap:10px}
.history-heading h2::before{content:"";width:6px;height:6px;background:var(--lime)}
#history-count{font-family:var(--font-num);font-size:11px;letter-spacing:.06em;color:var(--cream);border:1px solid var(--rule);padding:4px 8px;border-radius:2px;font-variant-numeric:tabular-nums}
.log-clock{padding:22px 0 18px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
#current-date{font-size:12px;color:var(--muted)}
#current-time{font-family:var(--font-num);font-size:34px;font-weight:400;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.history-caption{font-family:var(--font-body);font-size:11px;color:var(--muted-2);margin:14px 0 4px}
#history-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
#history-list li{padding:15px 0;border-bottom:1px solid var(--rule);text-align:right;overflow-wrap:anywhere}
#history-list time{display:block;font-family:var(--font-num);font-size:10px;letter-spacing:.06em;color:var(--muted-2);margin-bottom:8px;font-variant-numeric:tabular-nums}
.log-formula{display:block;font-family:var(--font-num);font-size:13px;color:var(--muted)}
#history-list strong{display:block;font-family:var(--font-num);font-size:26px;font-weight:500;color:var(--cream);margin-top:4px;font-variant-numeric:tabular-nums}
#history-list .empty-history{border:0;text-align:center;padding:60px 0;font-size:13px;color:var(--muted-2)}
.history-session{margin:14px 0 0;color:var(--muted-2);font-size:10.5px}
#clear-history{display:flex;align-items:center;justify-content:space-between;background:transparent;color:var(--cream);border:1px solid var(--rule);border-radius:3px;height:46px;padding:0 16px;margin-top:12px;font-size:13px;font-weight:600}
#clear-history::after{content:"×";font-family:var(--font-num);font-size:15px}
#clear-history:hover:not(:disabled){background:var(--bg-deep)}
#clear-history:disabled{opacity:.45;cursor:default}

/* ───────── 졸음 알리미 = 분할 탭 + 선 구획 ───────── */
.camera-panel{display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:26px;align-content:start;padding-top:22px;color:var(--cream)}
.camera-heading{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);height:52px;margin-bottom:18px}
.camera-heading h2,.camera-badge{display:flex;align-items:center;justify-content:center;gap:9px;margin:0;font-size:14px;font-weight:600;letter-spacing:-.2px}
.camera-heading h2{background:var(--cream);color:var(--blue)}
.camera-heading h2::before,.camera-badge::before{content:"";width:5px;height:5px;background:currentColor}
.camera-badge{color:var(--cream);white-space:nowrap}
.camera-badge::before{background:var(--muted-2)}
.camera-preview{grid-column:1;grid-row:2 / span 2;position:relative;aspect-ratio:4/3;background:var(--bg-deep);border:1px solid var(--rule);overflow:hidden;align-self:start}
.camera-preview::before,.camera-preview::after{content:"";position:absolute;width:9px;height:9px;border:1px solid rgba(240,238,229,.35);z-index:1}
.camera-preview::before{left:6px;top:6px}
.camera-preview::after{right:6px;bottom:6px}
#camera-video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
#camera-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:12px;color:var(--muted);line-height:1.7;margin:0}
#camera-placeholder[hidden]{display:none}
#camera-status{grid-column:2;font-size:16px;font-weight:700;letter-spacing:-.3px;line-height:1.5;color:var(--cream);margin:0 0 12px;min-height:24px}
.camera-metrics{grid-column:2;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.camera-metrics>div{padding:12px 0 12px}
.camera-metrics>div+div{border-left:1px solid var(--rule);padding-left:16px}
.camera-metrics span{display:block;font-size:11px;color:var(--muted)}
.camera-metrics strong{display:block;margin-top:6px;font-family:var(--font-num);font-size:24px;font-weight:500;color:var(--cream);font-variant-numeric:tabular-nums}
.camera-rule,.camera-privacy{font-size:12px;line-height:1.7;margin:16px 0 0;color:var(--muted)}
.camera-rule{grid-column:1 / -1}
.camera-privacy{grid-column:1 / -1;margin-top:2px;color:var(--muted-2)}
.camera-actions{grid-column:1 / -1;display:flex;align-items:center;gap:28px;margin-top:18px}
.camera-actions button{border:0;border-radius:3px;height:52px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:26px}
#camera-toggle{background:var(--cream);color:var(--blue);padding:0 22px;min-width:210px}
#camera-toggle::after{content:"↗";font-family:var(--font-num);font-size:14px}
#camera-toggle:hover{background:#fff}
#camera-toggle[aria-pressed="true"]{background:var(--lime)}
#alert-test{background:transparent;color:var(--cream);padding:0 4px;gap:12px}
#alert-test::after{content:"↓";font-family:var(--font-num);font-size:14px}
#alert-test:hover{text-decoration:underline;text-underline-offset:5px}
#camera-alert{grid-column:1 / -1;min-height:0;font-size:13px;font-weight:700;color:var(--lime);margin:8px 0 0;line-height:1.6}

#wake-flash{position:fixed;inset:0;z-index:1000;pointer-events:none;background:#fff;opacity:0}
#wake-flash.active{animation:wake-pulse .45s step-end 2}
/* 흰색 0.3초 + 간격 0.15초를 두 번 반복합니다. */
@keyframes wake-pulse{0%{opacity:1}66.666667%,100%{opacity:0}}

/* ───────── 바닥글 ───────── */
footer{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.footer-inner{height:64px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--cream)}
.footer-inner>span:first-child{font-family:var(--font-num);font-size:10.5px;font-weight:600;letter-spacing:.14em;border:1px solid var(--cream);padding:4px 8px;border-radius:2px}
.footer-inner>span:last-child{display:flex;align-items:center;gap:8px;font-weight:600}
.footer-spark{font-size:15px;color:var(--lime)}

/* ───────── 반응형 ───────── */
@media(max-width:1279px){
  main{grid-template-columns:360px 300px;grid-template-rows:auto auto;grid-template-areas:"calc hist" "camera camera";justify-content:center;column-gap:28px;row-gap:10px;padding:40px var(--gutter) 40px}
  .intro,.blueprint{display:none}
  .camera-panel{margin-left:0;max-width:688px}
  .header-right .edition{display:none}
}
@media(max-width:760px){
  :root{--gutter:16px}
  .site-header{height:64px}
  .page-logo{height:30px}
  .wordmark small{display:none}
  .header-cta{min-width:0;height:38px;padding:0 14px;gap:12px;font-size:12px}
  main{grid-template-columns:minmax(0,390px);grid-template-areas:"calc" "hist" "camera";row-gap:24px;padding:20px var(--gutter) 30px;min-height:0}
  .calculator{width:100%;padding:18px 16px 14px;justify-self:center}
  .display-area{height:clamp(120px,22svh,170px)}
  .key{height:clamp(54px,7.4svh,62px)}
  .history-panel{width:100%;height:460px}
  .camera-panel{grid-template-columns:minmax(0,1fr);padding-top:4px}
  .camera-preview{grid-row:auto;grid-column:1;width:100%;margin-bottom:16px}
  #camera-status,.camera-metrics{grid-column:1}
  .camera-actions{gap:16px}
  #camera-toggle{min-width:0;flex:1}
  .footer-inner{height:56px;font-size:11px}
}
@media(max-width:360px){.camera-actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.key{transition:none}}

/* 설계도 장식 위치 */
.bp-h1{top:300px}.bp-h2{top:560px}
.bp-v1{left:24px}.bp-v2{left:442px}
.bp-sq1{left:-2px;top:38px}.bp-sq2{left:18px;top:294px}.bp-sq3{left:436px;top:38px}.bp-sq4{left:436px;top:554px}.bp-sq5{right:-6px;top:294px}
.bp-dot1{left:16px;top:400px}.bp-dot2{left:30px;top:400px}.bp-dot3{left:16px;top:414px}
.bp-label1{left:36px;bottom:44px}.bp-label2{left:454px;bottom:44px}
.bp-pixel{left:640px;top:672px}