.preview { max-width:680px; margin:auto; padding:20px 22px 38px; }
.topbar,.top-actions,.stats,.scene-top,.workbench-heading,.sheet-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:8px; color:var(--pine); text-decoration:none; font-size:13px; font-weight:800; }.brand-mark { font-size:23px; }.top-actions { gap:8px; }
.icon-button { min-height:38px; padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink-2); font-size:11px; cursor:pointer; }.icon-button[aria-pressed="true"] { color:var(--pine); border-color:var(--moss); }
.intro { display:grid; gap:12px; padding:28px 0 23px; }.intro .eyebrow { display:flex; align-items:center; gap:9px; }
.mission-number { background:var(--pine); color:var(--pine-ink); padding:2px 7px; border-radius:5px; font-size:11px; letter-spacing:1px; }
.test-badge { margin-left:auto; border:1px solid var(--line); border-radius:20px; padding:2px 8px; font-size:10px; letter-spacing:0; }
h1 { font-size:clamp(28px,6vw,38px); letter-spacing:-1.4px; line-height:1.3; }.intro > p:not(.eyebrow) { font-size:14px; color:var(--ink-2); line-height:1.75; }
.stats { justify-content:flex-start; gap:20px; font-size:11px; color:var(--ink-2); }.stats strong { margin-left:5px; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:700; }
.vault-scene { position:relative; overflow:hidden; border-radius:18px; background:radial-gradient(ellipse at 50% 15%,color-mix(in srgb,var(--moss) 40%,var(--pine)),var(--pine) 70%); color:var(--pine-ink); padding:18px 18px 17px; box-shadow:0 12px 32px color-mix(in srgb,var(--pine) 18%,transparent); }
.scene-grain { position:absolute; inset:0; pointer-events:none; opacity:.09; background-image:repeating-linear-gradient(100deg,transparent 0 9px,var(--pine-ink) 10px,transparent 11px 19px); }.scene-top { position:relative; }
.small-label { font-size:10px; font-weight:600; letter-spacing:1.2px; }.lock-state { display:inline-flex; align-items:center; gap:6px; font-size:10px; opacity:.8; }
.lock-state span { width:5px; height:5px; border-radius:50%; background:var(--honey); box-shadow:0 0 7px var(--honey); }
.vault-object { position:relative; max-width:334px; margin:16px auto 0; padding-top:92px; }.vault-halo { position:absolute; inset:30px -25px 0; border-radius:50%; opacity:.12; background:var(--honey); filter:blur(35px); transition:opacity .8s; }
.shackle { position:absolute; width:156px; height:113px; top:0; left:calc(50% - 78px); filter:drop-shadow(0 5px 4px color-mix(in srgb,var(--ink) 40%,transparent)); transform-origin:35% 90%; transition:transform .75s cubic-bezier(.25,.8,.3,1); }
.lock-body { position:relative; z-index:1; border:1px solid color-mix(in srgb,var(--honey-soft) 75%,var(--honey)); border-radius:18px 18px 28px 28px; padding:16px 16px 17px; color:var(--honey-ink); background:linear-gradient(110deg,color-mix(in srgb,var(--honey) 65%,var(--bark)),var(--honey) 25%,var(--honey-soft) 52%,var(--honey) 76%,color-mix(in srgb,var(--honey) 65%,var(--bark))); box-shadow:inset 0 1px 1px var(--honey-soft),inset 0 -4px 8px color-mix(in srgb,var(--bark) 40%,transparent),0 18px 22px color-mix(in srgb,var(--ink) 30%,transparent); }
.lock-body::before { content:''; position:absolute; inset:0; border-radius:inherit; background:repeating-linear-gradient(0deg,transparent 0 2px,color-mix(in srgb,var(--honey-soft) 10%,transparent) 3px); pointer-events:none; }
.rivet { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--bark); opacity:.45; box-shadow:0 1px 1px var(--honey-soft); }.rivet-a { top:10px; left:10px; }.rivet-b { top:10px; right:10px; }.rivet-c { bottom:14px; left:12px; }.rivet-d { bottom:14px; right:12px; }
.lock-engraving { text-align:center; font-size:28px; line-height:1.1; color:var(--bark); text-shadow:0 1px 0 var(--honey-soft); }.lock-inscription { text-align:center; font-size:10px; font-weight:700; margin:7px 0 13px; letter-spacing:1px; opacity:.8; }
.dials { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:9px; background:var(--bark); border-radius:9px; box-shadow:inset 0 3px 8px color-mix(in srgb,var(--ink) 55%,transparent),0 1px 1px var(--honey-soft); }
.dial { min-width:0; display:grid; gap:2px; }.dial-arrow { padding:0; height:25px; border:0; background:transparent; color:var(--honey-soft); font-size:17px; cursor:pointer; opacity:.7; border-radius:5px; }.dial-arrow:hover,.dial-arrow:focus-visible { opacity:1; background:color-mix(in srgb,var(--honey) 20%,transparent); }.dial-arrow:disabled { opacity:.3; cursor:default; }
.dial-window { position:relative; height:84px; overflow:hidden; border-radius:5px; color:var(--bark); background:linear-gradient(90deg,var(--surface-2),var(--surface) 50%,var(--surface-2)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 15%,transparent); touch-action:none; cursor:grab; user-select:none; }.dial-window:active { cursor:grabbing; }
.dial-window::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg,color-mix(in srgb,var(--bark) 35%,transparent),transparent 35% 65%,color-mix(in srgb,var(--bark) 35%,transparent)); }
.dial-window::after { content:''; position:absolute; left:0; right:0; top:28px; height:28px; border-top:1px solid color-mix(in srgb,var(--honey) 55%,transparent); border-bottom:1px solid color-mix(in srgb,var(--honey) 55%,transparent); pointer-events:none; }
.dial-track span { display:block; height:28px; line-height:28px; font-family:var(--font-mono); font-size:22px; text-align:center; opacity:.35; }.dial-track span:nth-child(2) { opacity:1; font-size:27px; font-weight:800; }
.alignment-mark { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:9px; font-size:8px; letter-spacing:1.7px; opacity:.6; }.alignment-mark span { width:26px; height:1px; background:var(--bark); }
.unlock-button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:13px; border:1px solid color-mix(in srgb,var(--honey-soft) 40%,var(--bark)); border-radius:8px; background:linear-gradient(var(--bark),color-mix(in srgb,var(--bark) 80%,var(--ink))); color:var(--honey-soft); font-size:13px; font-weight:700; box-shadow:0 3px 0 color-mix(in srgb,var(--bark) 70%,var(--ink)); cursor:pointer; transition:transform .15s,box-shadow .15s; }.unlock-button:active { transform:translateY(2px); box-shadow:0 1px 0 var(--bark); }.unlock-button:disabled { cursor:default; opacity:.7; }
.unlock-button svg { width:15px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dial-help { position:relative; margin-top:19px; font-size:10px; text-align:center; opacity:.7; }.feedback { position:relative; margin:13px auto 0; padding:10px 12px; border-radius:8px; font-size:12px; line-height:1.65; background:color-mix(in srgb,var(--surface) 13%,transparent); color:var(--pine-ink); }.feedback[data-kind="wrong"] { border:1px solid var(--bad); }.feedback[data-kind="success"] { border:1px solid var(--honey); }
.vault-scene.is-wrong .vault-object { animation:lock-rattle .45s; }.vault-scene.is-wrong .dials { box-shadow:inset 0 3px 8px var(--ink),0 0 0 2px var(--bad),0 0 15px var(--bad); }.vault-scene.is-checking .lock-state span { animation:checking .7s ease-in-out infinite; }
.vault-scene.is-open .shackle { transform:translateY(-20px) rotate(-17deg); }.vault-scene.is-open .vault-halo { opacity:.55; }.vault-scene.is-open .lock-state span { background:var(--honey-soft); }
.sparks { position:absolute; inset:0; z-index:3; pointer-events:none; }.spark { position:absolute; width:4px; height:4px; top:55%; left:50%; background:var(--honey-soft); border-radius:50%; box-shadow:0 0 5px var(--honey); animation:spark-flight 1.1s ease-out both; }
.inventory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:15px 0 20px; }
.inventory-item { position:relative; min-width:0; display:grid; justify-items:center; gap:4px; border:1px solid var(--line); border-radius:12px; padding:14px 6px 12px; background:var(--surface); color:var(--ink); cursor:pointer; transition:transform .2s,border-color .2s,box-shadow .2s; }.inventory-item:hover { transform:translateY(-2px); border-color:var(--moss); box-shadow:var(--shadow); }.inventory-item:active { transform:scale(.97); }
.tool-icon { font-size:25px; color:var(--pine); line-height:1.1; }.inventory-item > span:not(.tool-icon) { font-size:11px; font-weight:700; }.inventory-item small { font-size:9px; color:var(--ink-2); }.inventory-item b { margin-left:2px; color:var(--moss); font-size:9px; }
.workbench { border:1px solid var(--line); padding:18px; border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }.workbench h2 { font-size:16px; }.workbench .small-label { color:var(--ink-2); font-size:9px; letter-spacing:.4px; }.workbench > p { color:var(--ink-2); font-size:11px; margin-top:7px; }
.order { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; list-style:none; padding:0; margin:16px 0 12px; }.order li { min-width:0; position:relative; }
.record-card { display:grid; gap:6px; justify-items:center; width:100%; min-height:91px; border:1px solid var(--line); border-radius:7px; padding:8px 2px 9px; background:linear-gradient(140deg,var(--surface),var(--surface-2)); color:var(--ink); cursor:grab; touch-action:none; user-select:none; transition:border-color .15s,background .15s,box-shadow .15s; }.record-card::before { content:''; position:absolute; top:0; width:18px; height:5px; background:color-mix(in srgb,var(--honey) 35%,transparent); transform:rotate(-3deg); }
.record-card .position { font:9px var(--font-mono); color:var(--ink-2); }.record-card .record-name { font-size:11px; font-weight:700; }.record-card .record-code { color:var(--pine); font:700 23px var(--font-mono); line-height:1; }
.record-card.is-selected { border-color:var(--honey); box-shadow:0 0 0 2px var(--honey-soft); background:var(--honey-soft); }.record-card.is-dragging { opacity:.65; border-color:var(--moss); }.record-card:active { cursor:grabbing; }
.workbench .workbench-help { font-size:10px; }.workbench-note { display:flex; gap:8px; margin-top:14px; border-top:1px solid var(--line); padding-top:12px; color:var(--ink-2); font-size:10px; }.workbench-note > span:first-child { color:var(--moss); font-size:19px; line-height:1; }
footer { text-align:center; color:var(--ink-2); font-size:10px; padding-top:23px; }
.sheet,.reward-dialog { color:var(--ink); background:var(--surface); border:1px solid var(--line); width:min(560px,calc(100% - 28px)); max-height:88dvh; border-radius:18px; padding:24px; box-shadow:0 30px 70px color-mix(in srgb,var(--ink) 35%,transparent); }
dialog::backdrop { background:color-mix(in srgb,var(--ink) 70%,transparent); backdrop-filter:blur(5px); }dialog[open] { animation:sheet-arrive .25s ease-out; }.sheet-heading { align-items:flex-start; }.sheet-heading h2 { font-size:22px; letter-spacing:-.6px; margin-top:3px; }.sheet-heading .eyebrow { font-size:10px; }
.close-button { flex:none; width:38px; height:38px; border:1px solid var(--line); background:var(--surface-2); border-radius:50%; color:var(--ink-2); font-size:24px; line-height:1; cursor:pointer; }.sheet-description { margin:17px 0 23px; color:var(--ink-2); font-size:13px; }
.record-page { min-width:0; border:1px solid var(--line); border-radius:12px; padding:12px; margin:0 0 16px; }.record-page legend { font-size:14px; font-weight:800; padding:0 6px; }.record-page legend span { font-weight:400; font-size:10px; margin-left:5px; color:var(--ink-2); }
.record-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.record-options button { position:relative; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:65px; padding:11px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:transform .15s,border-color .2s,background .2s; }.record-options button > span { font-size:13px; font-weight:700; }.record-options small { font-size:9px; color:var(--ink-2); white-space:nowrap; }.record-options small b { font:700 17px var(--font-mono); margin-left:2px; color:var(--pine); }
.record-options button[aria-pressed="true"] { background:var(--honey-soft); border-color:var(--honey); box-shadow:inset 0 0 0 1px var(--honey); }.record-options button[aria-pressed="true"]::after { content:'채택'; position:absolute; right:5px; top:-7px; background:var(--pine); color:var(--pine-ink); padding:0 5px; font-size:8px; border-radius:4px; transform:rotate(7deg); animation:stamp-in .2s; }.record-options button:active { transform:scale(.97); }.sheet-return { margin-top:20px; }
.rules { padding:0 0 0 22px; margin:0; font-size:14px; }.rules li + li { margin-top:17px; }.body-rule { margin-top:23px; padding:18px; border-radius:12px; background:var(--honey-soft); color:var(--honey-ink); display:grid; gap:12px; font-size:13px; }.body-rule h3 { font-size:14px; }.body-rule ul { padding-left:19px; margin:0; }.body-rule li + li { margin-top:9px; }.body-rule .muted { color:inherit; opacity:.7; font-size:11px; }
.hint-button { margin-top:20px; background:var(--surface-2); border:1px dashed var(--line); border-radius:8px; color:var(--ink-2); width:100%; padding:12px; font-size:12px; cursor:pointer; }.hint { margin-top:11px; padding:15px; border-radius:8px; background:var(--surface-2); font-size:13px; }
.signboard { margin:0; padding:22px 19px; border-radius:12px; border:1px solid var(--line); border-left:4px solid var(--moss); background:var(--bg); font-size:13px; }.signboard h3 { font-size:15px; }.signboard > * + * { margin-top:14px; }.signboard h3:not(:first-child) { margin-top:24px; }.signboard .edition-mark { font:700 35px var(--font-mono); color:var(--pine); }
.observation { margin-top:18px; padding:14px 16px; background:var(--surface-2); border-radius:10px; font-size:12px; }.observation summary { cursor:pointer; font-weight:700; }.observation p { margin-top:10px; }
.reward-dialog { overflow:hidden; text-align:center; max-width:420px; padding:32px 25px 25px; }.reward-dialog .eyebrow { color:var(--moss); letter-spacing:3px; font-size:11px; }.reward-dialog h2 { position:relative; font-size:23px; margin:8px 0 22px; }
.reward-rays { position:absolute; top:55px; left:calc(50% - 130px); width:260px; height:260px; background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--honey) 16%,transparent) 0deg 10deg,transparent 10deg 25deg); border-radius:50%; mask-image:radial-gradient(circle,var(--ink),transparent 70%); animation:rays-turn 16s linear infinite; }
.key-fragment { position:relative; width:136px; height:136px; margin:0 auto 20px; background:linear-gradient(135deg,var(--honey-soft),var(--honey)); border:1px solid var(--honey); border-radius:28px 10px 28px 10px; display:flex; align-items:center; justify-content:center; gap:3px; box-shadow:0 0 40px color-mix(in srgb,var(--honey) 25%,transparent); transform:rotate(-6deg); animation:fragment-arrive .65s cubic-bezier(.2,1.3,.4,1); }.key-fragment svg { width:55px; height:55px; fill:none; stroke:var(--bark); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.key-fragment strong { color:var(--bark); font:800 46px var(--font-mono); }
.fragment-label { position:relative; font-size:14px; font-weight:700; }.reward-stat { font-size:12px; color:var(--ink-2); margin-top:8px; }.solution { position:relative; text-align:left; margin:24px 0 20px; border-top:1px solid var(--line); padding-top:15px; font-size:12px; }.solution summary { cursor:pointer; color:var(--ink-2); }.solution p { margin-top:12px; line-height:1.85; }
.sheet-heading { position:sticky; top:0; z-index:5; background:var(--surface); padding-bottom:12px; border-bottom:1px solid var(--line); }
.record-page { scroll-margin-top:90px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@keyframes lock-rattle { 0%,100% { transform:translateX(0) rotate(0); }20%,60% { transform:translateX(-6px) rotate(-2deg); }40%,80% { transform:translateX(6px) rotate(2deg); } }
@keyframes checking { 50% { opacity:.25; } }
@keyframes spark-flight { from { transform:translate(0,0) scale(1); opacity:1; }to { transform:translate(var(--spark-x),var(--spark-y)) scale(.1); opacity:0; } }
@keyframes sheet-arrive { from { transform:translateY(20px) scale(.98); opacity:0; }to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes stamp-in { from { transform:scale(1.4) rotate(7deg); opacity:0; }to { transform:scale(1) rotate(7deg); opacity:1; } }
@keyframes rays-turn { to { transform:rotate(360deg); } }
@keyframes fragment-arrive { from { transform:translateY(18px) scale(.75) rotate(15deg); opacity:0; }to { transform:translateY(0) scale(1) rotate(-6deg); opacity:1; } }
@media(max-width:420px) { .preview { padding:14px 15px 30px; }.intro { padding-top:23px; }.vault-scene { padding:15px 15px 16px; }.lock-body { padding-left:12px; padding-right:12px; }.dials { gap:6px; padding:8px; }.workbench { padding:15px; }.sheet { padding:20px; }.sheet-heading h2 { font-size:20px; }.brand { font-size:11px; gap:5px; }.top-actions { gap:5px; }.icon-button { font-size:10px; padding:4px 7px; } }
@media(max-width:350px) { .dials { gap:4px; padding:6px; }.record-options button { flex-direction:column; justify-content:center; }.brand-mark { display:none; } }
@media(prefers-reduced-motion:reduce) { .spark { display:none; }.vault-halo { filter:none; opacity:.05; } }