/* One calm, readable column on every screen */
.topbar { display:none; }
.brand-top { display:flex; align-items:center; justify-content:space-between; height:auto; padding:28px 0 12px; }
.brand-top .brand { font-family:"Noto Sans KR",sans-serif; font-size:26px; letter-spacing:-.08em; }
.theme-toggle { display:flex; padding:3px; border:1px solid var(--line); border-radius:9px; }
.theme-toggle button { padding:6px 9px; border:0; border-radius:6px; background:transparent; color:var(--muted); font:12px "Noto Sans KR",sans-serif; cursor:pointer; }
.theme-toggle button.active { background:var(--ink); color:#fff; }
.app-shell { padding:8px 0 12px; }
.create-panel { display:block !important; width:min(100%,560px) !important; margin:0 auto !important; }
.intro,.preview-label { display:none !important; }
.url-field { height:58px; margin:0 0 22px !important; padding:0 16px; border-radius:13px; }
.generate-button { width:100%; height:56px; border:0; border-radius:13px; background:var(--ink); color:#fff; font:600 16px "Noto Sans KR",sans-serif; cursor:pointer; }
.generate-button span { margin-left:8px; font-size:20px; }
.generate-button:disabled { opacity:.65; cursor:wait; }
input[type=text] { font-size:16px; }
.field-status { display:none; }
.qr-stage { width:min(100%,460px) !important; margin:0 auto 20px !important; }
.format-select { height:44px; margin-bottom:12px; }
.format { font-size:13px; }
.action-row { grid-template-columns:1fr; gap:11px; }
.settings-button,.download-button { height:56px; font-size:15px; }
.ad-wrap { margin-top:8px; }
.ad-frame { width:100%; height:100px; overflow:hidden; line-height:0; border-radius:14px; }
.ad-frame .kakao_ad_area,.ad-frame iframe { width:100% !important; max-width:none !important; height:100px !important; border:0; border-radius:14px; }
footer { border:0; padding:18px 0 32px; text-align:center; }
footer a { font-size:15px; }
footer a strong { font-weight:700; }
.settings-sheet { background:#fff; }
.setting-block>label,.label-line label { font-size:16px; }
.style-option { font-size:13px; }
.color-input,.range-line { font-size:13px; }
.upload-zone strong { font-size:13px; }
.sheet-done { height:56px; font-size:15px; }
.sheet-head { border-bottom:0; }
.setting-block { border-bottom:0; padding:17px 0; }
.style-options { display:flex; gap:8px; }
.style-option { flex:1; height:44px; padding:0; font-size:14px; }
.style-option .mini { display:none; }
.upload-zone { min-height:54px; justify-content:center; border-style:solid; border-color:#dfe2e6; }
.upload-zone .upload-icon { display:grid; flex:0 0 auto; place-items:center; width:auto; height:auto; border-radius:0; background:transparent; font-size:28px; line-height:1; }
.upload-zone strong,.upload-zone small { display:none; }
@media (min-width:720px) {
  .wrap { width:min(100% - 96px,700px); }
  .brand-top { padding-top:42px; }
  .app-shell { padding-top:10px; }
  .create-panel { width:100% !important; max-width:none; margin:0 !important; }
  .qr-stage { width:460px !important; }
  footer { text-align:center; }
}
@media (min-width:720px) {
  .settings-sheet { top:50%; right:50%; bottom:auto; left:auto; width:min(500px,calc(100vw - 48px)); max-height:min(78vh,680px); border-radius:18px; transform:translate(50%,-45%) scale(.96); opacity:0; }
  .modal.open .settings-sheet { transform:translate(50%,-50%) scale(1); opacity:1; }
  .sheet-handle { display:none; }
  .sheet-head { padding-top:10px; }
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#f2f4f7; --muted:#a2a9b5; --line:#2c313a; --panel:#20242b; }
  body { background:#111318; color:#f2f4f7; }
  .brand-top .brand { color:#f2f4f7; }
  .url-field,.settings-button,.format { border-color:#3a404a; background:#191d23; color:#f2f4f7; }
  input[type=text] { background:transparent; color:#f2f4f7; }
  .format { border-right-color:#3a404a; }
  .format.active,.download-button,.sheet-done { background:#f2f4f7; color:#111318; }
  .generate-button { background:#f2f4f7; color:#111318; }
  .qr-stage { border-color:#303641; }
  .settings-sheet { background:#171a20; color:#f2f4f7; }
  .sheet-head,.setting-block { border-color:#303641; }
  .close-button,.upload-icon { background:#292e37; color:#f2f4f7; }
  .style-option,.color-input { background:#1b1f26; border-color:#3a404a; color:#c8cdd5; }
  .style-option.selected { border-color:#f2f4f7; box-shadow:inset 0 0 0 1px #f2f4f7; color:#f2f4f7; }
  .color-input b { color:#e1e5eb; }
  .upload-zone { border-color:#616975; }
  .sheet-handle { background:#4a515d; }
  footer a { color:#aeb5bf; }
  #toast { background:#f2f4f7; color:#111318; }
}
html[data-theme="light"] body { background:#fff; color:#111827; }
html[data-theme="light"] .brand-top .brand { color:#111827; }
html[data-theme="light"] .url-field,html[data-theme="light"] .settings-button,html[data-theme="light"] .format { border-color:#dfe2e6; background:#fff; color:#111827; }
html[data-theme="light"] input[type=text] { color:#111827; }
html[data-theme="light"] .format.active,html[data-theme="light"] .download-button,html[data-theme="light"] .sheet-done,html[data-theme="light"] .generate-button { background:#111827; color:#fff; }
html[data-theme="light"] .settings-sheet { background:#fff; color:#111827; }
html[data-theme="light"] .theme-toggle { border-color:#dfe2e6; }
html[data-theme="light"] .theme-toggle button { color:#727985; }
html[data-theme="light"] .theme-toggle button.active { background:#111827; color:#fff; }
html[data-theme="dark"] body { background:#111318; color:#f2f4f7; }
html[data-theme="dark"] .brand-top .brand { color:#f2f4f7; }
html[data-theme="dark"] .url-field,html[data-theme="dark"] .settings-button,html[data-theme="dark"] .format { border-color:#3a404a; background:#191d23; color:#f2f4f7; }
html[data-theme="dark"] input[type=text] { color:#f2f4f7; background:transparent; }
html[data-theme="dark"] .format.active,html[data-theme="dark"] .download-button,html[data-theme="dark"] .sheet-done,html[data-theme="dark"] .generate-button { background:#f2f4f7; color:#111318; }
html[data-theme="dark"] .settings-sheet { background:#171a20; color:#f2f4f7; }
html[data-theme="dark"] .style-option,html[data-theme="dark"] .color-input { background:#1b1f26; border-color:#3a404a; color:#c8cdd5; }
html[data-theme="dark"] #toast { background:#f2f4f7; color:#111318; }
html[data-theme="dark"] .theme-toggle { border-color:#3a404a; }
html[data-theme="dark"] .theme-toggle button { color:#b8bec8; }
html[data-theme="dark"] .theme-toggle button.active { background:#f2f4f7; color:#111318; }