:root{
  --paper:#F2F1EC; --card:#FBFAF7; --ink:#1B1B1E; --gray:#8A8A85;
  --rule:#D6D5CE; --teal:#00806E; --teal-soft:#E2EFEC;
  --amber:#B87200; --amber-soft:#FBEEDA;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font-family:'IBM Plex Sans KR',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.wrap{max-width:1280px;margin:0 auto;padding:28px 20px 90px}

header{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:20px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray);margin-bottom:6px}
h1{font-size:clamp(23px,4.2vw,32px);font-weight:700;letter-spacing:-.02em;margin:0}
.sub{color:var(--gray);font-size:13px;margin:4px 0 0;max-width:56ch}

/* segmented */
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:2px;overflow:hidden}
.seg button{background:none;border:0;padding:7px 14px;font-family:inherit;font-size:12.5px;
  color:var(--ink);cursor:pointer;border-right:1px solid var(--rule)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.seg button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

.cols{display:grid;grid-template-columns:1fr 430px;gap:26px;align-items:start}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}

.bar{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:15px 16px;margin-bottom:16px}
.bar-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:9px}
.bar-row{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--rule);background:#fff;border-radius:2px;padding:6px 11px;
  font-family:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;transition:.12s}
.chip:hover{border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.chip.ghost{background:transparent;color:var(--gray)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .sum{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--gray);margin-left:6px}
.chip.on .sum{color:#9C9B94}
.divide{margin-top:14px;padding-top:13px;border-top:1px dashed var(--rule)}

/* master */
.master-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.master-head strong{font-weight:600}
.mval{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--gray)}
.mtrack{height:6px;background:var(--rule);border-radius:99px;margin:9px 0 6px;overflow:hidden}
.mfill{height:100%;width:0;background:var(--teal);transition:width .25s,background .25s}
.mnote{font-size:11.5px;color:var(--gray);margin:0;min-height:17px}
.mnote.warn{color:var(--amber);font-weight:500}

section{background:var(--card);border:1px solid var(--rule);border-radius:3px;margin-bottom:13px;overflow:hidden}
section.hide{display:none}
.sec-head{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;background:none;
  border:0;cursor:pointer;text-align:left;font-family:inherit;font-size:14px;font-weight:600;
  color:var(--ink);border-bottom:1px solid transparent}
section.open .sec-head{border-bottom-color:var(--rule)}
.sec-head:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.sec-idx{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--teal);
  letter-spacing:.1em;border:1px solid var(--teal);border-radius:2px;padding:1px 5px}
.sec-caret{margin-left:auto;color:var(--gray);font-size:12px;transition:transform .18s}
section.open .sec-caret{transform:rotate(180deg)}
.sec-body{display:none;padding:4px 16px 18px}
section.open .sec-body{display:block}
.mini{display:flex;flex-wrap:wrap;gap:6px;padding:11px 0 4px;border-bottom:1px dashed var(--rule)}
.mini .chip{font-size:11.5px;padding:4px 9px}

.field{padding:11px 0;border-bottom:1px dashed var(--rule)}
.field:last-child{border-bottom:0}
.field.hide{display:none}
.f-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.f-name{font-size:13px;font-weight:500}
.f-num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gray)}
select{width:100%;margin-top:7px;padding:8px 10px;border:1px solid var(--rule);border-radius:2px;
  background:#fff;font-family:inherit;font-size:13px;color:var(--ink)}
select:focus{outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal)}

.ticks{display:flex;justify-content:space-between;padding:0 8px;margin:9px 0 -4px}
.ticks span{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--rule);width:1px;text-align:center}
.ticks span.on{color:var(--teal)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--gray)}
input[type=range]::-moz-range-track{height:2px;background:var(--gray)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:18px;
  background:var(--ink);border:0;border-radius:1px;margin-top:-8px}
input[type=range]::-moz-range-thumb{width:12px;height:18px;background:var(--ink);border:0;border-radius:1px}
input[type=range]:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.phrase{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.5;color:var(--teal);
  background:var(--teal-soft);border-radius:2px;padding:5px 8px;margin-top:4px}
.phrase.off{color:var(--gray);background:#EFEEE9}

.checks{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.checks label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);
  border-radius:2px;padding:5px 9px;font-size:12px;cursor:pointer;background:#fff}
.checks input{accent-color:var(--teal);margin:0}
.checks label:has(input:checked){border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}

/* output */
.out{position:sticky;top:20px}
@media(max-width:1000px){.out{position:static}}
.out-card{background:var(--ink);border-radius:3px;padding:17px;color:#F2F1EC}
.out-card .eyebrow{color:#8E8E88}
.tools{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 14px}
.tools button{background:none;border:1px solid #3A3A3E;border-radius:2px;padding:5px 9px;
  font-family:inherit;font-size:11.5px;color:#C9C8C3;cursor:pointer}
.tools button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.tools button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.gen{width:100%;padding:12px;background:var(--teal);color:#fff;border:0;border-radius:2px;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:15px}
.gen:hover{background:#00695B}
.gen:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ob{margin-bottom:13px}
.ob.hide{display:none}
textarea{width:100%;background:#232327;border:1px solid #3A3A3E;border-radius:2px;color:#E6E5E0;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.65;padding:11px;
  resize:vertical;margin-top:7px}
textarea:focus{outline:2px solid var(--teal);outline-offset:-1px}
.copy{margin-top:7px;padding:7px 12px;background:transparent;border:1px solid #4A4A4E;border-radius:2px;
  color:#E6E5E0;font-family:inherit;font-size:12px;cursor:pointer}
.copy:hover{border-color:#E6E5E0}
.copy:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.tip{font-size:11.5px;color:#9A998F;margin:13px 0 0;line-height:1.65;
  border-top:1px solid #33333A;padding-top:12px}
.rec{font-size:11.5px;color:var(--teal);background:var(--teal-soft);border-radius:2px;
  padding:6px 9px;margin-top:7px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rec.warn{color:var(--amber);background:var(--amber-soft)}
.rec button{border:1px solid currentColor;background:none;border-radius:2px;padding:2px 8px;
  font-family:inherit;font-size:11px;color:inherit;cursor:pointer}
.pv{margin-bottom:14px}
.pv-frame{background:#1F1F23;border:1px solid #33333A;border-radius:2px;padding:10px;
  display:flex;justify-content:center;align-items:center;min-height:150px}
.pv-meta{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#8E8E88;
  margin-top:7px;line-height:1.6}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 설정 코드 입력창 */
.cfg{background:#fff;color:var(--ink);border-color:var(--rule);font-size:10.5px}
.save-msg{font-size:11.5px;color:var(--gray);margin:9px 0 0;min-height:16px}
.copy.wide{width:100%;margin-top:2px}

#promptWarnings { white-space: pre-line; }
#promptWarnings.hide { display: none; }

#copyStatus { font-size: 12px; color: #E6E5E0; }
#copyStatus:empty { display: none; }
#copyConfirm { box-sizing: border-box; width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: auto; padding: 22px;
  border: 1px solid var(--amber); border-radius: 6px; color: var(--ink); background: var(--paper, #FAF9F5); }
#copyConfirm::backdrop { background: rgba(0,0,0,.65); }
#copyConfirm h2 { font-size: 18px; margin: 0 0 12px; }
#copyConfirm p, #copyConflictList { font-size: 14px; line-height: 1.6; }
#copyConflictList { max-height: 34dvh; overflow: auto; padding-left: 22px; }
#copyConflictList li { margin-bottom: 8px; }
#copyError { color: #9B351B; }
.copy-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.copy-actions button { flex: 1; min-width: 125px; padding: 12px; cursor: pointer;
  font: inherit; border: 1px solid var(--teal); border-radius: 3px; }
#copyProceed { background: var(--teal); color: white; }
.copy-actions button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.copy-actions button:disabled { opacity: .6; cursor: wait; }