/* Field-paper surfaces, signal colours, and oversized countdown typography. */
:root{--ground:#1a1f16;--paper:#293522;--input:#35422a;--ink:#f1f3df;--muted:#c0cbb0;--line:#64734e;--signal:#d2ff3f;--warning:#ff793b}
body{background:var(--ground);color:var(--ink);background-image:repeating-linear-gradient(125deg,transparent 0 36px,#687b3910 36px 72px)}
main{max-width:1200px;padding-top:36px}.grid{grid-template-columns:minmax(0,1fr) 430px;gap:32px}
.top{border-top:7px solid var(--signal);border-bottom:1px solid var(--line);padding:21px 0 24px;margin-bottom:28px}
.brand,.form h1,.poster .name,.poster .day,.poster .clock{font-family:Impact,'Arial Black','Malgun Gothic',sans-serif;font-weight:900}
.brand{font-size:clamp(32px,5vw,54px);line-height:1.08;letter-spacing:-2px;word-break:keep-all}
.brand:before{content:'///';color:var(--signal);margin-right:12px;letter-spacing:-5px}
.form{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--signal);border-radius:2px 2px 12px 2px;padding:28px;box-shadow:6px 6px 0 #11190e55}
.form h1{font-size:29px;letter-spacing:-1.6px;margin-bottom:24px}
.label,legend{font-size:14px;font-weight:800;letter-spacing:.2px}.form fieldset{margin-top:30px}.hint,small,.date-row label,.time-row label,.time-row>span,.preview-heading{color:var(--muted)}
input,select,textarea{background:var(--input);border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:12px 13px}textarea{border-radius:2px 2px 8px 2px}input::placeholder,textarea::placeholder{color:#bac6a7}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.choice span{background:#334128;border:1px solid #64734e;border-radius:2px;padding:7px 7px 14px;color:var(--ink)}
.template-choice img{border-radius:0}.template-choice b{font-weight:900;font-size:16px}
.choice input:checked+span{color:var(--signal);background:#39462a;border:2px solid var(--signal);box-shadow:3px 3px 0 #11190e}
.choice input:focus-visible+span{outline-color:var(--signal)}
.photo-label{background:#303d26;border:2px dashed #8a9b68;border-radius:0 0 10px 0;height:152px;padding:12px 7px;gap:12px}.photo-label:focus-within{outline-color:var(--signal)}
.photo-label .add{color:var(--signal);display:grid;place-items:center}.photo-label .add svg{width:32px;height:32px}.photo-label img{border-radius:2px}.photo-caption{font-size:13px;font-weight:700}.remove{color:var(--muted)}
.create{background:var(--signal);color:#1c2815;border:1px solid var(--signal);border-radius:2px;padding:17px 12px;font-size:19px;font-weight:900;box-shadow:4px 4px 0 #14200e;letter-spacing:-.7px}.create:hover{background:#e0ff79}.create:active{box-shadow:1px 1px 0 #14200e;transform:translate(2px,2px)}
.notice{background:#35402b;border-left:4px solid var(--warning);color:var(--muted);font-size:13px;padding:14px}.notice strong{color:var(--ink)}
.preview-heading{justify-content:flex-end;font-size:12px;letter-spacing:1px;margin-bottom:12px}
.poster,.poster[data-theme=meme]{border:1px solid #829265;border-radius:1px;background:#202b1c;box-shadow:10px 16px 0 #11190d55,0 24px 45px #070d09a6;overflow:hidden}
.poster:after{inset:40% 0 0;background:linear-gradient(transparent,#202b1ce8 40%,#1a2517 75%)}
.poster:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.sample-badge{top:3%;right:4%;background:#26351edd;border:1px solid #95a375;border-radius:0;color:#e4ebd4;font-size:11px;letter-spacing:1px}
.poster-information{bottom:3%;left:4%;right:4%;text-shadow:0 2px 3px #182212}
.poster .name{font-size:clamp(22px,8cqw,35px);letter-spacing:-1.5px}.poster .copy{font-size:clamp(13px,3.8cqw,16px);color:#d0dbc0;line-height:1.3;margin-top:4px}
.poster .day,.poster[data-theme=meme] .day{font-size:26cqw;line-height:.97;color:var(--signal);font-style:normal;letter-spacing:-.025em;margin:12px 0 3px;font-stretch:condensed}
.poster .clock{gap:2cqw;margin-top:0;letter-spacing:-.025em;line-height:1;color:var(--ink)}.poster .clock div,.poster .clock b{font-size:11cqw;font-weight:900}.poster .clock small{font:11px/1.3 Arial,'Malgun Gothic',sans-serif;letter-spacing:1px;color:#c0cbb0;margin-top:6px}
.poster .note{margin-top:12px;padding-top:8px;border-top:1px solid #8b9d65;color:#d0dbc0;font-size:11px}.poster .poster-footer{color:#c0cbb0;font-size:12px;line-height:1.35;max-height:4.1em;overflow:auto}
.poster[data-urgent=true]{border:2px solid var(--warning);box-shadow:9px 15px 0 #78391944,0 24px 45px #0a1209a6}.poster[data-urgent=true] .day,.poster[data-urgent=true] .clock{color:var(--warning)}
.poster[data-urgent=true] .day:before{content:'입대 임박';display:block;font:800 11px/1.5 'Malgun Gothic',sans-serif;letter-spacing:3px;margin-bottom:3px}
.poster[data-arrived=true] .day{font-size:16cqw;letter-spacing:-.07em}
.text-editor{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--line);border-radius:2px;padding:18px;margin-top:26px}.editor-heading h2{font-weight:900}.editor-button{border-radius:2px;background:#3b492e;border-color:#81915f;color:var(--signal);font-weight:700}.editor-button:hover{background:#475735}.text-editor input[type=range]{accent-color:var(--signal)}.poster-text{color:var(--ink)}.poster-text.selected{border-color:var(--signal)}.delete-text{color:#ffb890}.range-label{color:var(--muted)}
.source-photos{background:#293522;border-color:var(--line);border-radius:2px;padding:15px}.source-photos .portrait{background:#39462e;border:1px solid #798963;border-radius:2px}
dialog{background:var(--paper);border:2px solid var(--signal);border-radius:2px;box-shadow:10px 10px 0 #11190e77;color:var(--ink)}dialog p{color:var(--muted)}
@media(max-width:850px){.grid{grid-template-columns:1fr}.preview-column{max-width:430px;margin:10px auto 0}.form{padding:22px}.brand{font-size:clamp(29px,6.5vw,48px)}.top{padding:17px 0 21px}.form h1{font-size:27px}}
@media(max-width:390px){main{padding-left:14px;padding-right:14px}.form{padding:17px}.brand:before{margin-right:8px}.photo-label{height:136px}.photo-caption{font-size:12px}.poster .note{font-size:10px}}