:root{--workspace: #dfe3e8;--workspace-grid: rgba(49, 65, 91, .11);--panel: #f7f8fa;--panel-strong: #ffffff;--panel-muted: #eef1f4;--ink: #16202d;--muted: #5d6b7d;--line: #b8c2cf;--line-strong: #8d98a8;--accent: #1e3a5f;--accent-soft: #d9e6f2;--green: #217346;--green-soft: #d8ebdf;--orange: #ab5a00;color:var(--ink);background:var(--workspace);font-family:IBM Plex Sans KR,Pretendard,sans-serif;font-size:15px;line-height:1.5;font-weight:400;color-scheme:light;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:1100px;background:linear-gradient(180deg,#ffffff8c,#ffffff47),repeating-linear-gradient(to right,transparent 0 31px,var(--workspace-grid) 31px 32px),repeating-linear-gradient(to bottom,transparent 0 31px,var(--workspace-grid) 31px 32px),var(--workspace)}button,input,select,textarea{font:inherit}code,pre{font-family:JetBrains Mono,Iosevka,monospace}.app-shell{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}.ribbon{display:flex;align-items:stretch;gap:0;border-bottom:2px solid var(--accent);background:linear-gradient(90deg,rgba(30,58,95,.12),transparent 40%),linear-gradient(180deg,#f6f8fb,#edf1f5)}.ribbon-brand{display:flex;align-items:center;gap:8px;padding:0 20px;background:var(--accent);color:#fff}.ribbon-brand strong{font-size:.88rem;letter-spacing:.02em}.ribbon-brand small{opacity:.7;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.ribbon-tabs{display:flex;gap:0}.ribbon-tab{display:grid;gap:1px;padding:10px 20px;border:none;border-right:1px solid var(--line);background:transparent;cursor:pointer;text-align:left}.ribbon-tab span{font-size:.84rem;font-weight:600;color:var(--muted)}.ribbon-tab small{font-size:.68rem;color:var(--line-strong);font-family:JetBrains Mono,monospace}.ribbon-tab.active{background:linear-gradient(180deg,rgba(30,58,95,.08),transparent),var(--panel-strong);box-shadow:inset 0 -3px 0 var(--accent)}.ribbon-tab.active span{color:var(--accent)}.workbook{padding:16px;overflow-y:auto}.bottom-bar{display:flex;justify-content:space-between;padding:8px 20px;border-top:1px solid var(--line);background:var(--panel-muted);font-size:.72rem;color:var(--muted)}.demo-content{display:grid;gap:16px}.demo-header{display:grid;gap:8px;padding:18px 20px;border:1px solid var(--line-strong);background:linear-gradient(180deg,#fffffff0,#f0f4f7f5),var(--panel);box-shadow:6px 6px #7884972e}.demo-header h2{margin:0;font-size:1.32rem;line-height:1.2}.eyebrow{margin:0 0 6px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}.hero-copy{max-width:72ch;margin:4px 0 0;font-size:.92rem;color:var(--muted)}.hero-copy code{padding:1px 5px;background:var(--accent-soft);font-size:.84rem}.sample-selector{display:flex;flex-wrap:wrap;gap:8px}.sample-chip{padding:8px 14px;border:1px solid var(--line);border-radius:0;background:linear-gradient(180deg,#fffffffa,#f0f3f7fa),var(--panel);color:var(--muted);cursor:pointer;font-size:.82rem;font-weight:600}.sample-chip.active{border-color:var(--accent);color:var(--accent);background:linear-gradient(90deg,rgba(30,58,95,.1),transparent 40%),var(--panel-strong);box-shadow:inset 4px 0 0 var(--accent)}.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:.84rem;font-weight:700;color:var(--ink)}.section-heading small{color:var(--muted)}.adapter-notice{display:grid;gap:6px;padding:12px 14px;border:1px solid rgba(171,90,0,.35);background:#fff3e0cc;font-size:.84rem}.adapter-notice strong{color:var(--orange)}.adapter-notice p{margin:0;color:var(--muted);line-height:1.45;font-weight:500}.schema-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,1fr);gap:16px;align-items:start}.schema-visual,.schema-json{display:grid;gap:14px;padding:16px;border:1px solid var(--line-strong);background:linear-gradient(180deg,#fffffff5,#f4f6f8fa),var(--panel);box-shadow:6px 6px #7884972e}.demo-table{width:100%;border-collapse:collapse;font-size:.88rem}.demo-table td{padding:8px 12px;border:1px solid var(--line);white-space:nowrap}.demo-table .header-cell{font-weight:700;background:#e3f2fd;text-align:center}.schema-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(30,58,95,.06),transparent),var(--panel-muted)}.stat strong{font-size:1.4rem;color:var(--accent);line-height:1}.stat small{font-size:.72rem;color:var(--muted)}.json-block{margin:0;max-height:480px;overflow:auto;padding:14px;border:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(184,194,207,.32) 27px 28px),linear-gradient(180deg,#fff,#f7f9fb);color:#10213d;font-size:.82rem;line-height:1.5}.schema-explanation{display:grid;gap:12px;padding:16px;border:1px solid var(--line-strong);background:linear-gradient(180deg,#fffffff5,#f4f6f8fa),var(--panel);box-shadow:6px 6px #7884972e}.point-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.point-card{display:grid;gap:6px;padding:14px;border:1px solid var(--line);background:var(--panel-strong)}.point-card strong{font-size:.88rem;color:var(--accent)}.point-card p{margin:0;font-size:.82rem;color:var(--muted);line-height:1.4}.point-card code{padding:1px 4px;background:var(--accent-soft);font-size:.76rem}.matrix-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:16px;align-items:start}.matrix-grid-wrap{display:grid;gap:12px;padding:16px;border:1px solid var(--line-strong);background:linear-gradient(180deg,#fffffff5,#f4f6f8fa),var(--panel);box-shadow:6px 6px #7884972e}.matrix-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line-strong)}.matrix-grid-shell{position:relative}.matrix-merge-overlay{position:absolute;inset:0;display:grid;pointer-events:none;z-index:1}.matrix-corner{background:var(--panel-muted);padding:6px}.matrix-col-header,.matrix-row-header{display:grid;place-items:center;padding:6px 8px;background:var(--accent-soft);font-size:.72rem;font-weight:700;color:var(--accent);font-family:JetBrains Mono,monospace}.matrix-cell{display:grid;gap:2px;padding:8px 6px;background:var(--panel-strong);cursor:pointer;min-height:52px;align-content:center;transition:background .1s;position:relative;z-index:0}.matrix-cell:hover{outline:2px solid var(--accent);outline-offset:-2px;z-index:1}.matrix-cell.active{outline:2px solid var(--green);outline-offset:-2px;background:#2173461f!important;z-index:2}.matrix-cell.same-ref{z-index:1}.matrix-cell.merged{background:#fff6}.matrix-cell.origin,.matrix-cell.covered{background:transparent}.matrix-merge-link{font-size:.62rem;font-family:JetBrains Mono,monospace;color:var(--accent)}.matrix-merge-visual{display:grid;place-items:center;padding:6px 10px;margin:1px;border:2px solid transparent;color:#10213d;font-weight:600;text-align:center}.matrix-merge-visual.active{outline:2px solid var(--green);outline-offset:-2px}.matrix-merge-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.matrix-val{font-size:.82rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.matrix-coord{font-size:.62rem;font-family:JetBrains Mono,monospace;color:var(--line-strong)}.matrix-inspector{display:grid;gap:14px;padding:16px;border:1px solid var(--line-strong);background:linear-gradient(180deg,#fffffff5,#f4f6f8fa),var(--panel);box-shadow:6px 6px #7884972e}.inspector-body{display:grid;gap:10px}.inspector-field{display:grid;grid-template-columns:80px 1fr;gap:8px;align-items:center}.inspector-field label{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}.inspector-field code{padding:6px 10px;border:1px solid var(--line);background:var(--panel-strong);font-size:.8rem;word-break:break-all}.inspector-field.merge-info code{border-color:#1e3a5f4d;background:var(--accent-soft)}.inspector-value{font-weight:600;color:var(--green)}.inspector-notice{padding:10px 12px;border:1px solid rgba(33,115,70,.3);background:var(--green-soft);font-size:.82rem;color:#14532d}.inspector-notice.neutral{border-color:var(--line);background:var(--panel-muted);color:var(--muted)}.inspector-placeholder{padding:24px 16px;border:1px dashed var(--line-strong);background:var(--panel-muted);color:var(--muted);font-size:.88rem;text-align:center}.build-steps{display:grid;gap:8px}.build-step{display:flex;gap:12px;align-items:start;padding:10px 12px;border:1px solid var(--line);background:var(--panel-strong)}.step-num{display:grid;place-items:center;min-width:26px;height:26px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700}.build-step strong{font-size:.84rem}.build-step p{margin:2px 0 0;font-size:.78rem;color:var(--muted)}.fetch-layout{display:grid;grid-template-columns:minmax(360px,.8fr) minmax(0,1.2fr);gap:16px;align-items:start}.fetch-controls{display:grid;gap:14px;padding:16px;border:1px solid var(--line-strong);background:linear-gradient(180deg,#fffffff5,#f4f6f8fa),var(--panel);box-shadow:6px 6px #7884972e}.method-selector{display:flex;flex-wrap:wrap;gap:6px}.method-chip{padding:6px 12px;border:1px solid var(--line);border-radius:0;background:var(--panel-strong);color:var(--muted);cursor:pointer;font-size:.78rem;font-weight:600;font-family:JetBrains Mono,monospace}.method-chip.active{border-color:var(--green);color:var(--green);background:var(--green-soft);box-shadow:inset 0 -2px 0 var(--green)}.method-detail{display:grid;gap:6px;padding:12px;border:1px solid var(--line);background:var(--panel-muted)}.method-sig{font-size:.78rem;color:var(--accent)}.method-detail p{margin:0;font-size:.82rem;color:var(--muted)}.index-control,.index-control label{display:grid;gap:6px}.index-control label>span{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}.index-input-row{display:flex;gap:10px;align-items:center}.index-input-row input[type=range]{flex:1;accent-color:var(--accent)}.index-value{min-width:28px;text-align:center;font-family:JetBrains Mono,monospace;font-size:.88rem;font-weight:600;color:var(--accent)}.source-mini-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line-strong);font-size:.76rem}.source-mini-shell{position:relative}.source-mini-overlay{position:absolute;inset:0;display:grid;pointer-events:none;z-index:1}.mini-corner{background:var(--panel-muted);padding:4px}.mini-col-header,.mini-row-header{display:grid;place-items:center;padding:4px 6px;background:var(--panel-muted);font-weight:700;color:var(--muted);font-family:JetBrains Mono,monospace;font-size:.68rem}.mini-col-header.hl,.mini-row-header.hl{background:var(--accent-soft);color:var(--accent)}.mini-cell{padding:4px 6px;background:var(--panel-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;position:relative;z-index:0}.mini-cell.highlighted{background:#21734626;font-weight:600}.mini-cell.merged{background:#ffffff59}.mini-cell.covered{background:transparent}.source-merge-visual{display:grid;place-items:center;margin:1px;padding:4px 6px;border:1px solid transparent;color:#10213d;font-weight:600;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-merge-visual.highlighted{outline:2px solid var(--green);outline-offset:-2px}.fetch-result{display:grid;gap:14px;padding:16px;border:1px solid var(--line-strong);background:linear-gradient(180deg,#fffffff5,#f4f6f8fa),var(--panel);box-shadow:6px 6px #7884972e}.array-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid var(--line);background:var(--panel-muted)}.array-header code{font-size:.78rem;color:var(--accent)}.array-header small{font-size:.72rem;color:var(--muted)}.array-items{display:grid;gap:4px}.array-item{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);background:var(--panel-strong)}.array-index{font-size:.68rem;font-family:JetBrains Mono,monospace;color:var(--muted)}.array-val{font-size:.82rem}.stability-note{display:grid;gap:10px;margin-top:8px}.stability-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.stability-item{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line);background:var(--panel-strong)}.stability-item strong{font-size:.82rem;color:var(--accent)}.stability-item p{margin:0;font-size:.76rem;color:var(--muted)}@media(max-width:1400px){body{min-width:0}.schema-layout,.matrix-layout,.fetch-layout{grid-template-columns:1fr}.point-grid{grid-template-columns:repeat(2,1fr)}}
