:root {
  color-scheme: light;
  --page: #f2f0f7;
  --phone: #19191d;
  --number: #36353b;
  --utility: #b8b7bf;
  --operator: #f2a937;
  --ink: #302c39;
}

* { box-sizing: border-box; }

body {
  min-width: 0;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 96%, rgba(216, 211, 230, .58), transparent 28%),
    radial-gradient(circle at 80% 2%, rgba(255, 255, 255, .7), transparent 38%),
    var(--page);
  font-family: "Apple SD Gothic Neo", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button { font: inherit; }

.page-shell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100svh;
  padding: 120px 28px 28px;
  place-items: center;
}

.brand-logo {
  position: absolute;
  top: 24px;
  left: 20px;
  width: min(264px, 54vw);
  height: auto;
  object-fit: contain;
}

.app-layout {
  display: grid;
  width: min(100%, 1348px);
  grid-template-columns: 250px 410px minmax(330px, 1fr) 280px;
  align-items: stretch;
  gap: 16px;
}

.circuit-panel {
  display: flex;
  min-width: 0;
  padding: 27px 17px 18px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(137, 200, 230, .18);
  border-radius: 42px;
  color: #eef8ff;
  background: radial-gradient(circle at 40% 24%, #263e55, #151d2d 71%);
  box-shadow: 0 16px 26px rgba(44, 40, 55, .13), inset 0 1px rgba(255, 255, 255, .09);
}

.circuit-header { display: flex; min-height: 54px; align-items: start; justify-content: space-between; gap: 8px; }
.circuit-kicker { display: flex; margin: 0 0 7px; align-items: center; color: #b9d0db; font-size: 9px; font-weight: 800; letter-spacing: .13em; gap: 6px; }
.circuit-dot { width: 7px; height: 7px; border-radius: 50%; background: #63e0d5; box-shadow: 0 0 0 3px rgba(99, 224, 213, .13); }
.circuit-header h2 { margin: 0; color: #f2fbff; font-size: 21px; font-weight: 800; letter-spacing: -.08em; line-height: 1; }
.circuit-live { padding: 5px 7px; border-radius: 12px; color: #87f3d3; background: rgba(99, 224, 213, .1); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.circuit-canvas-wrap { position: relative; min-height: 516px; margin: 10px -4px 7px; overflow: hidden; border-radius: 25px; background: radial-gradient(circle at 50% 28%, #1f3851, #0e1422 70%); }
#circuit-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#circuit-canvas:active { cursor: grabbing; }
.circuit-fallback { position: absolute; z-index: 2; inset: 0; display: grid; margin: 0; overflow: hidden; color: #c5d2e0; background: radial-gradient(circle at 50% 28%, #1f3851, #0e1422 70%); font-size: 12px; place-items: center; }
.circuit-fallback canvas { width: 100%; height: 100%; cursor: grab; touch-action: none; }
.circuit-fallback canvas:active { cursor: grabbing; }
.circuit-hint { margin: auto 2px 0; color: #a8bdcb; font-size: 10px; font-weight: 600; letter-spacing: -.04em; line-height: 1.55; }
.circuit-hint span { color: #63e0d5; font-size: 15px; vertical-align: -1px; }

.calculator {
  display: flex;
  min-width: 0;
  padding: 39px 24px 24px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 43px;
  color: #f8f8fb;
  background: var(--phone);
  box-shadow: 0 18px 27px rgba(44, 40, 55, .18), 0 5px 10px rgba(44, 40, 55, .12);
}

.phone-status {
  display: grid;
  min-height: 18px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #f5f5f7;
  font-size: 13px;
  font-weight: 700;
}

.current-time { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.university-name { margin: 0; font-size: 14px; letter-spacing: -.07em; }

.sound-control {
  display: inline-flex;
  min-height: 24px;
  padding: 0;
  justify-self: end;
  align-items: center;
  cursor: pointer;
  border: 0;
  color: #dadadf;
  background: transparent;
  gap: 7px;
  -webkit-tap-highlight-color: transparent;
}

.sound-control:focus-visible,
.key:focus-visible,
.clear-history:focus-visible { outline: 3px solid #f5c66d; outline-offset: 3px; }
.battery-percent { font-size: 11px; font-variant-numeric: tabular-nums; }
.battery { display: block; position: relative; width: 29px; height: 14px; padding: 2px; border: 1.5px solid #d9d9df; border-radius: 4px; }
.battery::after { position: absolute; top: 3px; right: -4px; width: 2px; height: 6px; border-radius: 0 2px 2px 0; background: #d9d9df; content: ""; }
.battery-level { display: block; width: 86%; height: 100%; border-radius: 1px; background: #b9df79; transition: background .15s ease; }
.sound-control[aria-pressed="false"] .battery-level { background: #83828a; }
.sound-icon { display: none; }

.display-wrap {
  display: flex;
  min-width: 0;
  min-height: 170px;
  padding: 8px 2px 11px;
  align-items: flex-end;
  justify-content: flex-end;
}

.display {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #f8f8fb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(68px, 8.1vw, 104px);
  font-weight: 300;
  letter-spacing: -.075em;
  line-height: 1.05;
  padding-block: .04em;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }

.key {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  cursor: pointer;
  user-select: none;
  border: 0;
  border-radius: 50%;
  color: #f9f9fb;
  background: var(--number);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  place-items: center;
  transition: transform .1s ease, filter .1s ease;
  -webkit-tap-highlight-color: transparent;
}

.key:hover { filter: brightness(1.13); }
.key:active, .key.pressed { transform: scale(.93); filter: brightness(.92); }
.utility { color: #25242a; background: var(--utility); }
.operator { color: #fff; background: var(--operator); font-size: 42px; font-weight: 300; }
.operator.active { color: var(--operator); background: #fff; }
.zero { grid-column: span 2; aspect-ratio: auto; border-radius: 999px; justify-content: start; padding-left: 32px; }

.history-panel {
  min-width: 0;
  padding: 31px 27px;
  border-radius: 42px;
  background: rgba(255, 255, 255, .66);
  box-shadow: inset 0 1px rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
}

.history-header {
  display: flex;
  min-height: 77px;
  padding-bottom: 22px;
  align-items: start;
  justify-content: space-between;
  border-bottom: 1px solid #e2dfe5;
}

.history-kicker { margin: 0 0 8px; color: #827b8c; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.history-header h1 { margin: 0; color: #322d3a; font-size: 25px; font-weight: 800; letter-spacing: -.08em; line-height: 1; }

.clear-history {
  min-height: 36px;
  padding: 0 14px;
  cursor: pointer;
  border: 0;
  border-radius: 18px;
  color: #776f80;
  background: rgba(255, 255, 255, .58);
  font-size: 13px;
  font-weight: 700;
  transition: background .15s ease, transform .15s ease;
}
.clear-history:hover { background: #fff; }
.clear-history:active { transform: scale(.95); }

.history-list { min-height: 98px; }
.history-item { display: grid; min-height: 98px; padding: 20px 4px 16px; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid #eeebef; gap: 18px; }
.history-expression { color: #777080; font-size: 15px; font-weight: 500; letter-spacing: -.03em; }
.history-result { color: #342e3e; font-size: 27px; font-weight: 800; letter-spacing: -.055em; white-space: nowrap; }
.history-empty { margin: 28px 4px; color: #9a94a0; font-size: 14px; }
.history-empty[hidden] { display: none; }

.camera-panel {
  display: flex;
  min-width: 0;
  padding: 27px 20px 20px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 42px;
  color: #fff;
  background: linear-gradient(165deg, #3a3043, #221f2b 70%);
  box-shadow: 0 16px 26px rgba(44, 40, 55, .13), inset 0 1px rgba(255, 255, 255, .1);
}

.camera-header { display: flex; min-height: 54px; align-items: start; justify-content: space-between; gap: 8px; }
.camera-kicker { display: flex; margin: 0 0 7px; align-items: center; color: #cbc3d1; font-size: 9px; font-weight: 800; letter-spacing: .13em; gap: 6px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #b7df7a; box-shadow: 0 0 0 3px rgba(183, 223, 122, .13); }
.camera-header h2 { margin: 0; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.08em; line-height: 1; }
.camera-status { max-width: 82px; padding: 5px 7px; overflow: hidden; border-radius: 12px; color: #e6e0e9; background: rgba(255, 255, 255, .09); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.camera-stage { position: relative; min-height: 286px; margin: 14px 0 15px; overflow: hidden; border-radius: 25px; background: #17151d; isolation: isolate; }
.camera-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-placeholder { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; color: #c9c1d2; background: radial-gradient(circle at 50% 35%, #4b4058, #292432 72%); font-size: 12px; font-weight: 700; transition: opacity .2s ease; gap: 9px; }
.camera-placeholder p { margin: 0; }
.camera-face { display: grid; width: 67px; aspect-ratio: 1; border: 2px solid #bdb3c6; border-radius: 45% 45% 48% 48%; color: #ebc75c; font-size: 25px; place-items: center; }
.camera-panel.is-active .camera-placeholder { opacity: 0; pointer-events: none; }
.camera-scan { position: absolute; z-index: 1; top: 8%; right: 8%; bottom: 8%; left: 8%; border: 1px solid rgba(255, 255, 255, .35); border-radius: 48%; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.camera-panel.is-active .camera-scan { opacity: 1; animation: scan-pulse 2s ease-in-out infinite; }

.laser-emitter { position: absolute; z-index: 2; left: var(--laser-x, 50%); top: var(--laser-y, 50%); width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; opacity: 0; background: #ff4f78; box-shadow: 0 0 10px 4px #ff3061, 0 0 28px 9px rgba(255, 66, 116, .7); pointer-events: none; transform: translate(-50%, -50%) scale(.3); }
.laser-beam { --laser-angle: 0deg; --laser-direction: 1; position: absolute; z-index: 2; left: var(--laser-x, 50%); top: var(--laser-y, 50%); width: 165%; height: 5px; border-radius: 999px; opacity: 0; background: linear-gradient(90deg, #fff 0%, #ff4c79 13%, #ff1460 58%, rgba(255, 20, 96, 0) 100%); box-shadow: 0 0 5px #fff, 0 0 12px #ff316a, 0 0 26px #ff145f; pointer-events: none; transform: rotate(var(--laser-angle)) scaleX(0); transform-origin: 0 50%; }
.laser-emitter.is-firing { animation: emitter-pop .42s ease-out both; }
.laser-beam.is-firing { animation: laser-shot .42s cubic-bezier(.1, .7, .35, 1) both; }

.flash-overlay { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; justify-items: center; opacity: 0; color: #32212c; background: rgba(255, 248, 186, .93); font-size: 37px; font-weight: 900; letter-spacing: -.11em; pointer-events: none; transform: scale(.9); }
.flash-overlay i { margin-top: 2px; color: #f1963a; font-size: 36px; font-style: normal; }
.camera-panel.is-alert { animation: panel-flash .9s steps(2, end); }
.camera-panel.is-alert .flash-overlay { animation: alert-pop .9s ease both; }

.blink-summary { display: flex; min-height: 42px; padding: 0 4px; align-items: center; justify-content: space-between; color: #d8d1dc; font-size: 12px; font-weight: 700; }
.blink-summary strong { color: #f6ca73; font-size: 21px; letter-spacing: -.06em; }
.blink-summary small { color: #aaa2b1; font-size: 12px; font-weight: 700; }
.camera-action { width: 100%; min-height: 45px; cursor: pointer; border: 0; border-radius: 15px; color: #3b2c3c; background: #f1bc58; font-size: 14px; font-weight: 800; transition: transform .15s ease, filter .15s ease; }
.camera-action:hover { filter: brightness(1.08); }
.camera-action:active { transform: scale(.97); }
.camera-action:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.camera-note { margin: 12px 3px 0; color: #aaa1b3; font-size: 10px; font-weight: 600; letter-spacing: -.04em; text-align: center; }

@keyframes scan-pulse { 50% { border-color: rgba(255, 228, 135, .95); box-shadow: 0 0 25px rgba(255, 211, 97, .35); } }
@keyframes panel-flash { 0%, 100% { filter: brightness(1); } 25%, 65% { filter: brightness(1.7) saturate(1.3); } 45%, 80% { filter: brightness(.72); } }
@keyframes alert-pop { 0%, 100% { opacity: 0; transform: scale(.9); } 15%, 78% { opacity: 1; transform: scale(1); } }
@keyframes emitter-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
@keyframes laser-shot { 0% { opacity: 0; transform: rotate(var(--laser-angle)) scaleX(0); } 15% { opacity: 1; } 72% { opacity: 1; transform: rotate(var(--laser-angle)) scaleX(var(--laser-direction)); } 100% { opacity: 0; transform: rotate(var(--laser-angle)) scaleX(var(--laser-direction)); } }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1400px) {
  .app-layout { width: min(100%, 1022px); grid-template-columns: 250px 410px minmax(0, 1fr); }
  .camera-panel { min-height: 355px; grid-column: 1 / -1; }
  .camera-stage { min-height: 230px; }
}

@media (max-width: 1120px) {
  .app-layout { width: min(100%, 920px); grid-template-columns: 250px minmax(0, 1fr); }
  .circuit-panel { grid-column: 1; }
  .calculator { grid-column: 2; }
  .history-panel { grid-column: 1 / -1; }
  .camera-panel { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .page-shell { padding-top: 105px; }
  .app-layout { width: min(100%, 490px); grid-template-columns: minmax(0, 410px); justify-content: center; }
  .circuit-panel, .calculator, .history-panel, .camera-panel { grid-column: auto; }
  .circuit-canvas-wrap { min-height: 320px; }
  .history-panel { min-height: 320px; }
  .camera-panel { min-height: 0; grid-column: auto; }
}

@media (max-width: 480px) {
  .page-shell { padding: 88px 12px 12px; align-content: start; }
  .brand-logo { top: 18px; left: 16px; width: min(230px, 64vw); }
  .circuit-panel { padding: 24px 14px 16px; border-radius: 36px; }
  .circuit-canvas-wrap { min-height: 280px; }
  .calculator { padding: 29px 18px 18px; border-radius: 36px; }
  .display-wrap { min-height: 145px; }
  .keypad { gap: 10px; }
  .key { font-size: clamp(25px, 9vw, 38px); }
  .operator { font-size: clamp(29px, 10vw, 42px); }
  .zero { padding-left: 28px; }
  .history-panel { padding: 27px 22px; border-radius: 36px; }
  .camera-panel { padding: 24px 18px 18px; border-radius: 36px; }
}

@media (max-width: 240px) {
  .page-shell { padding: 56px 6px 6px; }
  .brand-logo { top: 12px; left: 10px; }
  .circuit-panel { padding: 18px 10px 12px; border-radius: 27px; }
  .circuit-canvas-wrap { min-height: 190px; }
  .circuit-header h2 { font-size: 18px; }
  .calculator { padding: 18px 10px 10px; border-radius: 27px; }
  .phone-status { font-size: 10px; }
  .university-name { font-size: 10px; }
  .battery-percent { display: none; }
  .display-wrap { min-height: 85px; }
  .display { font-size: clamp(32px, 22vw, 58px); }
  .keypad { gap: 4px; }
  .key { font-size: 17px; }
  .operator { font-size: 22px; }
  .zero { padding-left: 17px; }
  .history-panel { padding: 18px 14px; border-radius: 27px; }
  .history-header h1 { font-size: 20px; }
}

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