@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+KR:wght@400;500;600&display=swap");

/* 유키오 칸 공통. 모든 클래스는 yk- 로 시작한다. 값은 tokens.css 변수만 쓴다. */
@property --yk-arm { syntax: "<length>"; inherits: false; initial-value: 16px; }

body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); word-break: keep-all; -webkit-font-smoothing: antialiased; }
.yk-pad { padding: var(--space-8); }
.yk-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.yk-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* 글자 */
.yk-label { font-family: var(--font-mono); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.yk-unit { font-family: var(--font-mono); font-size: 22px; line-height: 28px; font-style: normal; color: var(--ink-muted); }
.yk-tick { font-family: var(--font-mono); font-size: 18px; line-height: 20px; letter-spacing: 0.04em; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ground: 밤안개 바탕, 얼음 가루, 생각의 흔적 */
.yk-ground { position: relative; background: radial-gradient(70% 55% at 50% 30%, var(--fog), var(--ground) 72%); color: var(--ink); overflow: hidden; isolation: isolate; }
.yk-ground > .yk-air-canvas, .yk-ground > .yk-air { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* 정지 화면과 시안용: 스크립트 없이 CSS로만 움직이는 같은 바탕 */
.yk-air { overflow: hidden; }
.yk-air svg { position: absolute; left: 0; overflow: visible; }
.yk-air-snow { top: -100%; width: 100%; height: 200%; animation: yk-air-snow var(--dur-drift) linear infinite; }
.yk-air-dot { fill: var(--ring); }
.yk-ground[data-mode="alert"] .yk-air-dot { fill: var(--alert); }
.yk-air-fx { top: 0; width: 100%; height: 100%; }
.yk-air-wave { opacity: 0; animation: yk-air-wave var(--dur-listen) var(--ease-out) infinite; }
.yk-air-orbit { animation: yk-air-orbit var(--dur-think) linear infinite; }
.yk-air-corner { stroke: var(--ink-faint); stroke-width: 1; fill: none; }
.yk-air-line { position: absolute; bottom: 40px; left: var(--x, 32px); font-family: var(--font-mono); font-size: 18px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; opacity: 0; animation: yk-air-line var(--dur-trace) linear infinite; animation-delay: var(--d, 0ms); }
.yk-air[data-state="speak"] .yk-air-snow { animation: yk-air-snow var(--dur-drift) linear infinite, yk-air-pulse 600ms ease-in-out infinite alternate; }
@keyframes yk-air-snow { from { transform: translateY(0); } to { transform: translateY(50%); } }
@keyframes yk-air-wave { from { transform: scale(0.35); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes yk-air-orbit { to { transform: rotate(360deg); } }
@keyframes yk-air-pulse { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes yk-air-line { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 0.26; } 60% { opacity: 0.13; } 100% { transform: translateY(-460px); opacity: 0; } }
.yk-ground[data-mode="alert"] { background: radial-gradient(70% 55% at 50% 30%, var(--alert-ground), var(--ground) 80%); }

/* Bracket: 모서리 괄호 네 개 */
.yk-bracket { --yk-arm: 16px; --yk-bc: var(--line-strong);
  background-image: linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc));
  background-size: var(--yk-arm) 2px, 2px var(--yk-arm), var(--yk-arm) 2px, 2px var(--yk-arm), var(--yk-arm) 2px, 2px var(--yk-arm), var(--yk-arm) 2px, 2px var(--yk-arm);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat; }
.yk-bracket[data-draw] { animation: yk-arm var(--dur-draw) var(--ease-out) both; }
@keyframes yk-arm { from { --yk-arm: 0px; } to { --yk-arm: 16px; } }

/* LeaderLine */
.yk-leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.yk-leader-path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.yk-leader[data-draw] .yk-leader-path { animation: yk-draw var(--dur-draw) var(--ease-out) both; }
.yk-leader-dot { fill: var(--ink); }
.yk-leader-halo { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.yk-leader[data-tone="alert"] .yk-leader-path, .yk-leader[data-tone="alert"] .yk-leader-halo { stroke: var(--alert); }
.yk-leader[data-tone="alert"] .yk-leader-dot { fill: var(--alert); }
@keyframes yk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Readout */
.yk-readout { display: grid; gap: var(--space-1); min-width: 0; }
.yk-readout-num { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.yk-readout-num b { font-weight: 500; font-size: 44px; line-height: 48px; letter-spacing: -0.01em; }
.yk-readout[data-size="xl"] .yk-readout-num b { font-size: 72px; line-height: 72px; letter-spacing: -0.02em; }
.yk-readout[data-tone="alert"] .yk-readout-num b { color: var(--alert); }
.yk-readout b.yk-flash { animation: yk-flash var(--dur-tick) var(--ease-out); }
@keyframes yk-flash { from { text-shadow: 0 0 18px var(--light); } to { text-shadow: 0 0 0 transparent; } }

/* InfoPlate */
.yk-plate { position: relative; display: grid; gap: var(--space-3); padding: var(--space-6); background-color: var(--surface); border-radius: var(--radius-0); min-width: 0; }
.yk-plate-name { margin: 0; font-family: var(--font-sans); font-size: 28px; line-height: 40px; font-weight: 600; color: var(--ink); }
.yk-plate-note { margin: 0; font-size: 24px; line-height: 34px; color: var(--ink-muted); }
.yk-plate-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-6); }
.yk-plate[data-attach] { animation: yk-attach var(--dur-attach) var(--ease-out) both; animation-delay: var(--yk-delay, var(--dur-draw)); }
.yk-plate[data-tone="alert"] { --yk-bc: var(--alert); background-color: var(--alert-ground); }
@keyframes yk-attach { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* SpeechLine, HeardLine */
.yk-speech { margin: 0; font-family: var(--font-sans); font-size: 34px; line-height: 46px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.yk-speech[data-size="m"] { font-size: 28px; line-height: 40px; font-weight: 400; letter-spacing: 0; }
.yk-speech .yk-w { transition: color 120ms linear, text-shadow 320ms var(--ease-out); }
.yk-speech[data-playing] .yk-w { color: var(--ink-muted); }
.yk-speech[data-playing] .yk-w[data-lit] { color: var(--ink); }
.yk-speech[data-playing] .yk-w[data-now] { text-shadow: 0 0 16px var(--light); }
.yk-heard { margin: 0; display: flex; gap: var(--space-3); align-items: baseline; font-family: var(--font-sans); font-size: 24px; line-height: 34px; color: var(--ink-muted); }
.yk-heard .yk-label { font-size: 20px; }

/* ListenWindow */
.yk-window { display: grid; gap: var(--space-2); }
.yk-window-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.yk-window-track { height: 4px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.yk-window-bar { height: 100%; width: 100%; border-radius: var(--radius-pill); background: var(--ring); transform-origin: left center; }
.yk-window[data-run] .yk-window-bar { animation: yk-shrink var(--yk-secs, 6s) linear forwards; }
.yk-window[data-tone="alert"] .yk-window-bar { background: var(--alert); }
@keyframes yk-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ChoiceButton: 상자 없이 코드 + 글 + 아래 선. 이글루의 "D 01.02.2020 / CLICK TO EXPLORE" 문법 */
.yk-choice { --yk-rule: var(--line-strong); --yk-rule-w: 1px; --yk-bc: var(--focus); --yk-arm: 0px; position: relative; appearance: none; display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: 0 var(--space-4) 0 var(--space-3); border: 0; border-radius: var(--radius-0); background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 600; text-align: left; cursor: pointer; flex: 1 1 0; min-width: 0; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  background-image: linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc));
  background-size: var(--yk-arm) 3px, 3px var(--yk-arm), var(--yk-arm) 3px, 3px var(--yk-arm), 3px var(--yk-arm), 3px var(--yk-arm);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 100% 100%; background-repeat: no-repeat;
  transition: --yk-arm 200ms var(--ease-out), color 160ms linear; }
.yk-choice::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--yk-rule-w); background: var(--yk-rule); transform-origin: left center; transition: height 160ms var(--ease-out), background-color 160ms linear; }
.yk-choice::before { content: "+"; position: absolute; right: -7px; bottom: -11px; font-family: var(--font-mono); font-size: 20px; line-height: 20px; font-weight: 400; color: var(--yk-rule); }
.yk-choice-code { flex: none; font-family: var(--font-mono); font-size: 20px; line-height: 20px; font-weight: 500; letter-spacing: 0.06em; padding: 6px 8px; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.yk-choice-text { min-width: 0; overflow: hidden; text-overflow: clip; }
.yk-choice--primary { --yk-rule: var(--ink); --yk-rule-w: 2px; }
.yk-choice--primary::after { box-shadow: var(--glow-light); }
.yk-choice--primary .yk-choice-code { background: var(--ink); color: var(--ground); box-shadow: none; }
.yk-choice--alert { --yk-rule: var(--alert); --yk-rule-w: 2px; }
.yk-choice--alert::after { box-shadow: var(--glow-alert); }
.yk-choice--alert .yk-choice-code { background: var(--alert-fill); color: var(--on-alert); box-shadow: none; }
@media (hover: hover) { .yk-choice:hover, .yk-choice.is-hover { --yk-rule-w: 3px; } }
.yk-choice:active, .yk-choice.is-active { --yk-rule-w: 4px; transform: translateY(1px); }
.yk-choice:focus-visible, .yk-choice.is-focus { outline: none; --yk-arm: 14px; }
.yk-choice[data-heard] { --yk-bc: var(--ring); --yk-arm: 14px; --yk-rule: var(--ring); --yk-rule-w: 3px; }
.yk-choice[data-heard] .yk-choice-code { background: var(--ring); color: var(--ground); box-shadow: none; }
.yk-choice:disabled { opacity: 0.4; cursor: default; }
.yk-choice:disabled::after { box-shadow: none; }
.yk-choice[data-enter]::after { animation: yk-rule-in var(--dur-draw) var(--ease-out) both; }
@keyframes yk-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@property --yk-rule-w { syntax: "<length>"; inherits: true; initial-value: 1px; }

/* AlertTag: 빗금 머리줄 + 종류 + 아래 선. 이글루 "////// Manifesto" 머리줄과 같은 문법 */
.yk-alert { position: relative; display: grid; gap: var(--space-2); padding-bottom: var(--space-3); color: var(--alert); min-width: 0; }
.yk-alert::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--alert); box-shadow: var(--glow-alert); transform-origin: left center; }
.yk-alert::before { content: "+"; position: absolute; right: -7px; bottom: -10px; font-family: var(--font-mono); font-size: 20px; line-height: 20px; color: var(--alert); }
.yk-alert-head { display: flex; align-items: baseline; gap: var(--space-3); font-family: var(--font-mono); font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0.06em; white-space: nowrap; }
.yk-alert-hatch { display: inline-block; overflow: hidden; width: 6.2ch; letter-spacing: -0.02em; }
.yk-alert-code { color: var(--alert); }
.yk-alert-dist { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.yk-alert-dist b { font-weight: 500; font-size: 28px; }
.yk-alert-main { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.yk-alert-main svg { width: 30px; height: 30px; flex: none; stroke: var(--alert); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.yk-alert-kind { font-family: var(--font-sans); font-size: 30px; line-height: 38px; font-weight: 600; color: var(--alert); white-space: nowrap; }
.yk-alert-where { font-family: var(--font-sans); font-size: 22px; line-height: 28px; color: var(--ink-muted); white-space: nowrap; }
.yk-alert[data-enter] .yk-alert-hatch { animation: yk-hatch 360ms steps(6, end) both; }
.yk-alert[data-enter]::after { animation: yk-rule-in var(--dur-draw) var(--ease-out) 200ms both; }
@keyframes yk-hatch { from { width: 0; } to { width: 6.2ch; } }

/* YukioFace */
.yk-face { display: block; width: 100%; height: auto; overflow: visible; }
.yk-f-eye-s { fill: none; stroke: var(--yukio-eye); stroke-width: 19; stroke-linecap: round; }
.yk-f-eye-hi { fill: none; stroke: var(--yukio-eye-hi); stroke-width: 15; stroke-linecap: round; stroke-dasharray: 2 6; opacity: 0.6; }
.yk-f-fill { fill: var(--yukio-eye); }
.yk-f-ring { fill: none; stroke: var(--yukio-eye-hi); stroke-width: 5; stroke-dasharray: 2 5; opacity: 0.6; }
.yk-f-line { fill: none; stroke: var(--yukio-eye); stroke-width: 15; stroke-linecap: round; }
.yk-f-line-w { stroke-width: 16; }
.yk-f-blush { fill: var(--yukio-blush); }
.yk-f-blush-l { fill: none; stroke: var(--yukio-blush-line); stroke-width: 2.5; stroke-linecap: round; }
.yk-f-arcs { fill: none; stroke: var(--yukio-eye); stroke-width: 4; stroke-linecap: round; animation: yk-f-pulse 900ms ease-in-out infinite; }
.yk-f-dots circle { fill: var(--yukio-eye); animation: yk-f-dot 1200ms ease-in-out infinite; }
.yk-f-dots circle:nth-child(2) { animation-delay: 200ms; }
.yk-f-dots circle:nth-child(3) { animation-delay: 400ms; }
.yk-f-mark { fill: none; stroke: var(--yukio-eye); stroke-width: 6; stroke-linecap: round; }
.yk-f-bang { fill: none; stroke: var(--alert-fill); stroke-width: 7; stroke-linecap: round; }
.yk-f-sweat { fill: var(--yukio-sweat); }
.yk-f-blink { animation: yk-f-blink 3600ms infinite; transform-box: fill-box; transform-origin: center; }
.yk-f-talk { animation: yk-f-talk 300ms ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.yk-f-wiggle { animation: yk-f-wig 800ms ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes yk-f-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes yk-f-dot { 0%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
@keyframes yk-f-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }
@keyframes yk-f-talk { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes yk-f-wig { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* YukioStage */
.yk-stage { --yk-stage-ring: var(--ring); --yk-body-w: 46%; position: relative; width: 100%; aspect-ratio: 576 / 360; max-width: 100%; }
.yk-stage[data-size="s"] { --yk-body-w: 52%; width: 216px; }
.yk-stage[data-state="alert"] { --yk-stage-ring: var(--alert); }
.yk-stage-floor { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.yk-stage-body { position: absolute; left: calc(50% - var(--yk-body-w) / 2); bottom: 24.4%; width: var(--yk-body-w); animation: yk-breathe var(--dur-breathe) var(--ease-weight) infinite alternate; }
.yk-stage[data-size="s"] .yk-stage-body { bottom: 24.4%; }
.yk-stage-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.yk-stage-face { position: absolute; left: 10.56%; top: 28.47%; width: 79.03%; height: 48.3%; }
.yk-stage-face .yk-face { width: 100%; height: 100%; }
.yk-stage-corner { position: absolute; display: grid; gap: 2px; }
.yk-stage-corner[data-at="tl"] { left: 0; top: 0; }
.yk-stage-corner[data-at="tr"] { right: 0; top: 0; text-align: right; }
.yk-stage-state { color: var(--ink); }
.yk-stage[data-state="alert"] .yk-stage-state { color: var(--alert); }
.yk-stage[data-size="s"] .yk-stage-corner { display: none; }
@keyframes yk-breathe { from { transform: translateY(0); } to { transform: translateY(-8px); } }

.yk-p-top { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.yk-p-side { fill: var(--fog); }
.yk-p-rim { fill: none; stroke: var(--light); stroke-width: 2; opacity: 0.55; }
.yk-p-shadow { fill: var(--ground); opacity: 0.55; animation: yk-shadow var(--dur-breathe) var(--ease-weight) infinite alternate; transform-box: fill-box; transform-origin: center; }
.yk-p-dial { fill: none; stroke: var(--ink-faint); stroke-width: 10; stroke-dasharray: 0.002 0.018833; }
.yk-p-dial-major { fill: none; stroke: var(--yk-stage-ring); stroke-width: 18; stroke-dasharray: 0.003 0.122; opacity: 0.8; }
.yk-p-wait { fill: none; stroke: var(--yk-stage-ring); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0; }
.yk-p-listen { fill: none; stroke: var(--yk-stage-ring); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.yk-p-orbit { fill: none; stroke: var(--yk-stage-ring); stroke-width: 2; stroke-dasharray: 0.06 0.02 0.01 0.02; opacity: 0; }
.yk-p-orbit-tick { fill: var(--yk-stage-ring); opacity: 0; }
@keyframes yk-shadow { from { transform: scaleX(1); opacity: 0.55; } to { transform: scaleX(0.92); opacity: 0.4; } }

.yk-stage[data-state="listen"] .yk-p-listen { animation: yk-listen var(--dur-listen) var(--ease-out) infinite; }
.yk-stage[data-state="listen"] .yk-p-listen:nth-of-type(2) { animation-delay: calc(var(--dur-listen) / 3); }
.yk-stage[data-state="listen"] .yk-p-listen:nth-of-type(3) { animation-delay: calc(var(--dur-listen) * 2 / 3); }
@keyframes yk-listen { from { transform: scale(0.72); opacity: 0.9; } to { transform: scale(1.32); opacity: 0; } }

.yk-stage[data-state="think"] .yk-p-orbit { opacity: 0.9; animation: yk-orbit var(--dur-think) linear infinite; }
.yk-stage[data-state="think"] .yk-p-dial-major { animation: yk-orbit var(--dur-think) linear infinite reverse; }
@keyframes yk-orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }

.yk-stage[data-state="wait"] .yk-p-wait { opacity: 1; animation: yk-wait var(--yk-secs, 6s) linear forwards; }
@keyframes yk-wait { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } }

.yk-stage[data-state="speak"] .yk-p-rim { animation: yk-rim 1600ms ease-in-out infinite alternate; }
@keyframes yk-rim { from { opacity: 0.35; } to { opacity: 0.9; } }
.yk-stage[data-state="alert"] .yk-p-rim { stroke: var(--alert); opacity: 0.9; }
.yk-stage[data-state="alert"] .yk-p-top { stroke: var(--alert); }

@media (prefers-reduced-motion: reduce) {
  .yk-stage-body, .yk-p-shadow, .yk-p-listen, .yk-p-orbit, .yk-p-dial-major, .yk-p-rim, .yk-f-arcs, .yk-f-dots circle, .yk-f-blink, .yk-f-talk, .yk-f-wiggle, .yk-air-snow, .yk-air-wave, .yk-air-orbit, .yk-air-line, .yk-alert[data-enter] .yk-alert-hatch, .yk-alert[data-enter]::after, .yk-choice[data-enter]::after { animation: none !important; }
  .yk-stage[data-state="listen"] .yk-p-listen { opacity: 0.6; }
  .yk-leader[data-draw] .yk-leader-path, .yk-plate[data-attach], .yk-bracket[data-draw] { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}