@font-face{font-family:Topicup;src:url('assets/Pretendard-Black.ttf') format('truetype');font-weight:900;font-display:block}
@font-face{font-family:TopicupExtra;src:url('assets/Pretendard-ExtraBold.ttf') format('truetype');font-weight:800;font-display:block}
:root{color-scheme:dark;--bg:#0b1320;--surface:#142035;--ink:#f7f8fc;--muted:#b4bfcd;--accent:#fff07a;--line:#2c3b50}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;line-height:1.55}button,textarea,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.masthead{max-width:1240px;margin:auto;padding:30px 32px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}.monogram{font-family:Georgia,serif;font-weight:bold;font-size:34px;color:var(--accent)}h1{font-size:22px;letter-spacing:-.8px;margin:0}.masthead p{margin:2px 0 0;font-size:14px;color:var(--muted)}main{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:28px;padding:32px}.editor,.preview{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}.section-label{display:flex;gap:10px;align-items:center;margin-bottom:22px}.section-label>span{color:var(--accent);font-size:14px;font-weight:650;letter-spacing:1px}h2{margin:0;font-size:18px;letter-spacing:-.3px}label,legend{font-size:15px}textarea{display:block;width:100%;margin-top:9px;min-height:176px;background:#0b1423;color:white;border:1px solid #536279;border-radius:10px;padding:16px;resize:vertical;font-size:18px;line-height:1.9;overflow-wrap:normal;white-space:pre}textarea::placeholder{color:#8f9db0}.hint{font-size:14px;color:var(--muted);margin:10px 0 20px}.tones{display:grid;gap:9px;margin-top:10px}fieldset{border:0;margin:22px 0 0;padding:0;min-width:0}.tone{display:flex;gap:10px;align-items:center;border:1px solid var(--line);padding:12px;border-radius:10px;cursor:pointer}.tone:has(input:checked){background:#1d2d43;border-color:var(--accent)}.tone input{accent-color:var(--accent);margin:0}.tone strong{font-size:15px;display:block}.tone small{font-size:14px;display:block;color:var(--muted)}.swatch{width:28px;height:28px;border-radius:50%;border:1px solid #718095;flex-shrink:0}.swatch.navy{background:linear-gradient(90deg,#111d2e 50%,#fff07a 50%)}.swatch.black{background:linear-gradient(90deg,#000 50%,#f9c045 50%)}.status{font-size:14px;min-height:44px;color:var(--accent);margin:20px 0 10px}.status.error{color:#ffafaa}.primary,.secondary{width:100%;padding:13px 18px;border-radius:9px;font-weight:750;border:1px solid var(--accent);font-size:16px}.primary{background:var(--accent);color:#111d2e}.secondary{background:transparent;color:var(--ink);border-color:#627188;margin-top:9px}.save-hint{margin-bottom:0}.preview{align-self:start}.canvas-wrap{background:#111d2e;border:1px solid #364158;border-radius:12px;overflow:hidden}canvas{display:block;width:100%;height:auto;aspect-ratio:1440/880}.preview-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-top:14px}footer{max-width:1240px;margin:0 auto;padding:0 32px 32px;color:var(--muted);font-size:14px}dialog{max-width:760px;width:calc(100% - 28px);border:1px solid #536279;border-radius:14px;background:var(--surface);color:var(--ink);padding:18px}dialog::backdrop{background:#000a}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dialog-head button{padding:8px 16px;color:white;background:#293b55;border:1px solid #637086;border-radius:8px}dialog img{display:block;width:100%;height:auto}dialog p{font-size:14px;color:var(--muted)}
@media(max-width:800px){.masthead{padding:20px}main{grid-template-columns:1fr;padding:20px;gap:18px}.editor,.preview{padding:20px}.preview{grid-row:2}footer{padding:0 20px 24px}h1{font-size:21px}}
@media(prefers-reduced-motion:no-preference){button,.tone{transition:background .15s,border-color .15s}}
main{grid-template-areas:"editor preview" "actions preview";align-items:start;gap:20px 28px}
.editor{grid-area:editor}.preview{grid-area:preview}.actions{grid-area:actions;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}
.editor .hint{margin-bottom:0}.editor .status{min-height:22px;margin:12px 0 0}.color-options{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}.color-options summary{cursor:pointer;font-size:15px;color:var(--muted)}.color-options fieldset{margin-top:10px}
.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}
.swatch.pale{background:linear-gradient(90deg,#000 50%,#fff07a 50%)}.canvas-wrap{background:#000000}
@media(max-width:800px){
  .masthead{padding:14px 18px}main{grid-template-areas:"editor" "preview" "actions";gap:12px;padding:14px}
  .editor,.preview,.actions{padding:16px;border-radius:14px}.section-label{margin-bottom:12px}
  #copy{min-height:126px;padding:12px;font-size:18px;line-height:1.65}.editor .hint{margin-top:8px;font-size:14px}
  .preview .canvas-wrap{position:relative;aspect-ratio:1440/440}.preview canvas{position:absolute;bottom:0;left:0;width:100%;height:auto}
  .preview-meta{margin-top:9px}footer{padding:0 18px 24px}.save-hint{margin-top:10px}
}
[hidden]{display:none!important}.studio-tabs{max-width:1240px;margin:0 auto;display:flex;gap:8px;padding:20px 32px 0}.tab{border:1px solid var(--line);background:transparent;color:var(--muted);padding:10px 26px;border-radius:100px;font-weight:750}.tab.active{background:var(--accent);border-color:var(--accent);color:#111d2e}.upload-button{display:block;position:relative;text-align:center;border:1px dashed #7c8a9d;border-radius:10px;padding:15px;font-weight:700;cursor:pointer;background:#0b1423}.upload-button input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.upload-button:focus-within{outline:3px solid var(--accent);outline-offset:3px}#carousel-copy{min-height:150px}.carousel-canvas-wrap{overflow:hidden;background:#111d2e;border-radius:12px;border:1px solid #364158;max-width:540px;margin:auto}.carousel-canvas-wrap canvas{aspect-ratio:4/5}.photo-options{border-top:1px solid var(--line);margin-top:20px;padding-top:14px}.photo-options summary{cursor:pointer;color:var(--muted);font-size:15px}.photo-options label{display:flex;justify-content:space-between;margin:14px 0 3px}.photo-options input[type=range]{width:100%;accent-color:var(--accent);min-height:32px}#carousel-main .preview{position:sticky;top:18px}
@media(max-width:800px){.studio-tabs{padding:14px 14px 0}.tab{flex:1;padding:9px}#carousel-main .preview{position:static}.carousel-canvas-wrap{max-width:380px}.carousel-canvas-wrap canvas{position:static;width:100%}#carousel-copy{min-height:126px;padding:12px;font-size:18px;line-height:1.65}}
.photo-options select,.photo-options input[type=text]{width:100%;background:#0b1423;color:var(--ink);border:1px solid #536279;border-radius:8px;padding:10px;font:inherit;min-height:44px}.photo-options input[type=color]{width:64px;height:42px;padding:3px;border:1px solid #536279;border-radius:8px;background:#0b1423;vertical-align:middle;cursor:pointer}.photo-options input[type=color]:disabled{opacity:.4;cursor:not-allowed}.color-value{margin-left:10px;color:var(--muted);font-size:14px}.photo-options label.option-toggle{align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}.option-toggle input{width:22px;height:22px;accent-color:var(--accent)}
.carousel-controls,.carousel-preview-column{display:contents}
@media(min-width:801px){
  #carousel-main{grid-template-areas:"controls preview";grid-template-rows:auto;align-items:start;min-height:820px;overflow-anchor:none}
  #carousel-main .carousel-controls{grid-area:controls;display:flex;flex-direction:column;gap:20px;min-width:0}
  #carousel-main .editor,#carousel-main .actions{flex-shrink:0}
  #carousel-main .carousel-preview-column{grid-area:preview;display:block;position:sticky;top:18px;height:1px;align-self:start}
  #carousel-main .preview{position:static;max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
}