:root{color-scheme:dark;font-family:Inter,Noto Sans KR,system-ui,sans-serif;background:#100f14;color:#f8f3ea;--bg: #100f14;--panel: #1e1a29;--line: #000;--accent: #ffbf69;--accent-2: #84dcc6}@font-face{font-family:BM JUA;src:url(/fonts/BMJUA.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:BM YEONSUNG;src:url(/fonts/BMYEONSUNG.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Mulmaru;src:url(/fonts/Mulmaru.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}*{box-sizing:border-box}body{margin:0;background:linear-gradient(#0000 93%,#ffffff0a 93%) 0 0 / 100% 18px,linear-gradient(90deg,#0000 93%,#ffffff0a 93%) 0 0 / 18px 100%,var(--bg)}button,input,textarea{font:inherit}.app-shell{max-width:720px;margin:0 auto;padding:32px 20px 72px}.intro{margin-bottom:20px}.eyebrow{margin:0 0 8px;color:var(--accent-2);font-size:.78rem;letter-spacing:.18em}.intro h1{margin:0;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05}.panel{display:grid;gap:20px;padding:20px;border:3px solid var(--line);box-shadow:6px 6px #000;background:var(--panel)}.flow{align-content:start}.upload-box,.action,.download{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 16px;border:3px solid var(--line);box-shadow:4px 4px #000}.upload-box{position:relative;width:fit-content;background:var(--accent);color:#241809;font-weight:700;cursor:pointer}.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer}.field{display:grid;gap:8px}.field span{color:var(--accent-2);font-size:.92rem}.field-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.font-toggle{display:flex;gap:8px}.font-chip{min-height:34px;padding:6px 12px;border:3px solid var(--line);box-shadow:2px 2px #000;background:#2a2438;color:#f8f3ea;cursor:pointer}.font-chip.is-selected{background:var(--accent);color:#241809}.field textarea{width:100%;padding:12px;border:3px solid var(--line);background:#f5efe5;color:#201d28}.field textarea.title-input{height:4.6rem;min-height:4.6rem;max-height:4.6rem;resize:none;overflow:hidden;line-height:1.4}.color-row{display:grid;gap:16px}.palette-field{border:0;margin:0;padding:0;min-inline-size:0}.palette-field legend{color:var(--accent-2);font-size:.92rem;padding:0;margin-bottom:8px}.palette{display:grid;grid-template-columns:repeat(6,36px);gap:10px}.swatch{width:36px;height:36px;padding:0;border:3px solid var(--line);box-shadow:3px 3px #000;cursor:pointer}.swatch.is-selected{outline:3px solid var(--accent);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.section-label{margin:0 0 10px;color:var(--accent-2);font-size:.92rem;font-weight:600}.photo-stack{display:grid;gap:14px}.photo-slot{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:12px;align-items:stretch;min-width:0}.photo-card{position:relative;display:grid;grid-template-rows:1fr auto;overflow:hidden;border:3px solid var(--line);box-shadow:4px 4px #000;background:#0e0d13;cursor:pointer}.photo-card input{position:absolute;inset:0;z-index:3;opacity:0;cursor:pointer}.photo-media{display:block;overflow:hidden;line-height:0;background:#0e0d13}.photo-card img,.photo-placeholder{width:100%;aspect-ratio:2.2 / 1;object-fit:cover;display:grid;place-items:center;background:#0e0d13}.photo-placeholder{color:var(--accent);font-family:Courier New,monospace;font-size:1.4rem}.photo-meta{position:relative;z-index:2;display:grid;gap:2px;padding:8px 10px;background:#000000b8}.photo-meta strong{color:var(--accent);font-family:Courier New,monospace}.photo-meta span{color:#d9d0c4;font-size:.82rem}.caption-field{display:grid;gap:6px;align-content:start}.photo-controls{display:grid;gap:10px;align-content:center;min-width:0}.crop-controls{display:grid;gap:8px}.frame-dropdown{border:3px solid var(--line);box-shadow:3px 3px #000;background:#16121f}.frame-dropdown summary{list-style:none;cursor:pointer;padding:10px 12px;color:var(--accent-2);font-size:.9rem;font-weight:700;text-align:center;-webkit-user-select:none;user-select:none}.frame-dropdown summary::-webkit-details-marker{display:none}.frame-dropdown summary:after{content:" ▾"}.frame-dropdown[open] summary:after{content:" ▴"}.frame-pad{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:4px 12px 14px;text-align:center}.frame-hint{flex-basis:100%;margin:0;color:#d9d0c4;font-size:.78rem;text-align:center}.joystick{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);gap:4px;justify-content:center}.joy-up{grid-column:2;grid-row:1}.joy-left{grid-column:1;grid-row:2}.joy-center-spacer{grid-column:2;grid-row:2}.joy-right{grid-column:3;grid-row:2}.joy-down{grid-column:2;grid-row:3}.zoom-pad{display:grid;gap:4px}.reset-frame{min-height:36px;padding:0 12px;border:3px solid var(--line);box-shadow:2px 2px #000;background:var(--accent);color:#241809;font-weight:700;cursor:pointer}.joy-btn{width:36px;height:36px;padding:0;border:3px solid var(--line);box-shadow:2px 2px #000;background:#f5efe5;color:#201d28;font-size:.95rem;font-weight:700;line-height:1;cursor:pointer}.joy-btn:active{transform:translate(1px,1px);box-shadow:1px 1px #000}.crop-controls label{display:grid;gap:4px}.crop-controls span{color:var(--accent-2);font-size:.82rem}.crop-controls input[type=range]{width:100%}.caption-field span{color:var(--accent-2);font-size:.85rem}.caption-field input{width:100%;min-width:0;padding:10px 12px;border:3px solid var(--line);background:#f5efe5;color:#201d28}.preview-block{display:grid;justify-items:start}.live-preview{position:relative;width:fit-content;border:3px solid var(--line);box-shadow:6px 6px #000;background:#0e0d13;line-height:0}.live-preview canvas{display:block;max-width:min(360px,100%);height:auto}.preview-empty{position:absolute;inset:12px 12px auto;margin:0;padding:8px 10px;background:#000000b8;color:#f5efe5;font-size:.82rem;line-height:1.35}.export-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.action{width:fit-content;background:var(--accent-2);color:#10231f;font-weight:700;cursor:pointer}.status{margin:0;color:#d9d0c4}.create-count{margin:28px 0 0;text-align:center;color:#b7aea2;font-size:.9rem;letter-spacing:-.01em}.download{width:fit-content;background:#f5efe5;color:#16131d;text-decoration:none;font-weight:700}@media(max-width:640px){.photo-slot{grid-template-columns:1fr}.palette{grid-template-columns:repeat(6,minmax(0,36px))}}