:root{
  --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
  --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
  --line:#e3e1db; --line-2:#dcdad3; --line-3:#efeee9; --hover:#efeee9; --soft:#f3f2ee; --track:#ebe9e3;
  --accent:#f2a20c; /* 키캡 앰버 */
  --accent-deep:#b87400;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn--solid{background:var(--ink);color:#fff;border:none;font-weight:500}
.btn--solid:hover{background:var(--ink-hover)}
.btn--sm{height:30px;padding:0 12px;font-size:12px}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}

.cc{width:100%;max-width:1240px;margin:0 auto;padding:28px 28px 56px;display:flex;flex-direction:column;gap:20px}

/* ---------- Keycaps ---------- */
.keys-wrap{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:20px;background:#2a2926;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06),0 20px 40px -24px rgba(0,0,0,.5)}
.keys-wrap .mono-label{color:#a7a296}
.keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.key{position:relative;height:64px;border:none;border-radius:10px;cursor:pointer;padding:6px 10px 12px;text-align:left;
  background:linear-gradient(#fdfcf9,#ecebe5);color:var(--ink);
  box-shadow:0 6px 0 #c9c6bd,0 7px 0 #1b1a18,0 10px 14px rgba(0,0,0,.35);transition:transform .07s,box-shadow .07s;
  display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.key b{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.key small{font-size:11px;color:var(--sub)}
.key:hover{background:linear-gradient(#fff,#f3f2ec)}
.key:active{transform:translateY(4px);box-shadow:0 2px 0 #c9c6bd,0 3px 0 #1b1a18,0 4px 8px rgba(0,0,0,.3)}
.key[aria-checked="true"]{background:linear-gradient(#ffcb5c,var(--accent));transform:translateY(3px);
  box-shadow:0 3px 0 var(--accent-deep),0 4px 0 #1b1a18,0 6px 10px rgba(0,0,0,.3)}
.key[aria-checked="true"] small{color:#5c3c00}
.key--none b{font-family:var(--font);font-weight:500}
.check{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#d9d5ca;cursor:pointer;line-height:1.5}
.check input{accent-color:var(--accent);width:16px;height:16px;margin:1px 0 0;flex:none}

/* ---------- Clean chips ---------- */
.clean{display:flex;flex-direction:column;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel);font-size:13px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--ink)}
.chip input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px}
.chip:has(input[type=checkbox]:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:has(input[type=checkbox]:focus-visible){outline:2px solid var(--accent-deep);outline-offset:2px}
.chip input[type=checkbox]+span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--line-2);vertical-align:1px}
.chip input[type=checkbox]:checked+span::before{background:var(--accent)}
.chip--sel{padding-right:6px;cursor:default}
.chip--sel select{height:28px;border:none;border-radius:999px;background:var(--soft);font:inherit;font-size:12.5px;padding:0 8px;color:var(--ink);cursor:pointer;max-width:170px}
.chip--sel.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.chip--sel.is-active select{background:var(--accent);font-weight:500}

/* ---------- Panes ---------- */
.panes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pane{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-width:0}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line-3)}
.pane-title{font-size:13px;font-weight:700}
.pane textarea{display:block;width:100%;height:340px;resize:vertical;border:none;outline:none;padding:16px;margin:0;
  font-family:var(--mono);font-size:14px;line-height:1.7;color:var(--ink);background:transparent;white-space:pre;overflow:auto}
.pane textarea::placeholder{color:#b5b1a6}
.pane--out{border-color:var(--ink);box-shadow:4px 4px 0 var(--accent)}
.pane--out .pane-head{background:var(--ink);color:#fff;border-bottom-color:var(--ink)}
.pane--out .pane-head .mono-label{color:#c9c5ba}
.pane--out textarea{background:#fffdf6}
.pane-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 8px 16px;border-top:1px solid var(--line-3);flex-wrap:wrap}
.note{font-size:12px;color:var(--sub);line-height:1.5}

/* ---------- Glance ---------- */
.glance{display:flex;flex-direction:column;gap:12px}
.glance-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.glance-title{margin:0;font-size:15px}
.glance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;text-align:left;min-width:0}
.gl:hover{border-color:var(--ink)}
.gl:active{transform:scale(.99)}
.gl small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.gl code{font-family:var(--mono);font-size:13.5px;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-empty{grid-column:1/-1;padding:18px;border:1px dashed var(--line-2);border-radius:12px;font-size:13px;color:var(--sub);text-align:center}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .keys{grid-template-columns:repeat(4,minmax(0,1fr))}
  .glance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .topbar{padding:14px 16px}
  .cc{padding:16px 16px 40px;gap:16px}
  .keys-wrap{padding:14px;border-radius:16px}
  .keys{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .key{height:52px;padding:5px 10px 10px}
  .key b{font-size:13.5px}
  .key small{font-size:10px}
  .panes{grid-template-columns:1fr}
  .pane textarea{height:200px;font-size:13px}
  .glance-grid{grid-template-columns:1fr}
  .chip{height:36px;padding:0 12px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){ .key,.chip,.toast{transition:none} }

/* 다크 모드 (인쇄는 라이트 그대로). 키캡은 어두운 키보드 톤으로 */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#141311; --surface:#191816; --panel:#1e1d1a; --panel-soft:#23221f;
    --ink:#ecebe6; --ink-hover:#ffffff; --ink-2:#c9c6be; --sub:#a29f96; --muted:#8c8980;
    --line:#2f2d29; --line-2:#3a3833; --line-3:#272622; --hover:#2a2925; --soft:#272622; --track:#35332e;
    --accent:#f5b02e; --accent-deep:#c98a12;
  }
  :root[data-theme="dark"] .btn--solid,:root[data-theme="dark"] .toast{color:var(--bg)}
  :root[data-theme="dark"] .btn--solid{background:var(--accent)}
  :root[data-theme="dark"] .btn--solid:hover{background:#f8c45f}
  :root[data-theme="dark"] .keys-wrap{background:#1b1a18;border:1px solid var(--line-2)}
  :root[data-theme="dark"] .key{background:#383733 linear-gradient(#45433e,#383733);color:var(--ink);box-shadow:0 6px 0 #252421,0 7px 0 #0c0c0b,0 10px 14px rgba(0,0,0,.5)}
  :root[data-theme="dark"] .key:hover{background:#3f3d39 linear-gradient(#4d4b46,#3f3d39)}
  :root[data-theme="dark"] .key:active{box-shadow:0 2px 0 #252421,0 3px 0 #0c0c0b,0 4px 8px rgba(0,0,0,.4)}
  :root[data-theme="dark"] .key[aria-checked="true"]{background:var(--accent) linear-gradient(#ffcb5c,var(--accent));color:#1c1c1a;box-shadow:0 3px 0 var(--accent-deep),0 4px 0 #0c0c0b,0 6px 10px rgba(0,0,0,.4)}
  :root[data-theme="dark"] .chip:has(input[type=checkbox]:checked){background:rgba(245,176,46,.14);color:var(--ink);border-color:var(--accent)}
  :root[data-theme="dark"] .chip--sel.is-active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
  :root[data-theme="dark"] .chip--sel.is-active select{color:#1c1c1a}
  :root[data-theme="dark"] .pane textarea::placeholder{color:#6f6c64}
  :root[data-theme="dark"] .pane--out{border-color:var(--accent)}
  :root[data-theme="dark"] .pane--out .pane-head{background:var(--panel-soft);color:var(--ink);border-bottom-color:var(--line-2)}
  :root[data-theme="dark"] .pane--out .pane-head .mono-label{color:var(--muted)}
  :root[data-theme="dark"] .pane--out textarea{background:#201e19}
}