/* 발생보고 — 화면 스타일. 한 서체(Pretendard) + 메타 정보용 Geist Mono, 머리카락 선, 강조색 하나(버밀리언).
   종이(A4 미리보기)는 테마와 상관없이 늘 종이색이다. */
:root{
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-doc:"Noto Serif KR","Batang","AppleMyungjo",serif;

  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.875rem; --t-body:.9375rem; --t-md:1.0625rem; --t-lg:1.375rem; --t-xl:clamp(2rem,1.4rem + 2vw,2.75rem);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --bar-h:52px; --head-h:48px;
  --ease:cubic-bezier(.22,1,.36,1);

  --bg:oklch(.982 .003 60); --surface:oklch(.995 .002 60); --canvas:oklch(.958 .004 60); --raised:oklch(.997 .001 60);
  --line:oklch(.905 .005 60); --line-soft:oklch(.938 .004 60); --line-strong:oklch(.83 .006 60);
  --fg:oklch(.215 .008 50); --fg-2:oklch(.44 .009 50); --fg-3:oklch(.59 .008 50);
  --ink:oklch(.215 .008 50); --ink-hover:oklch(.32 .008 50); --on-ink:oklch(.985 .003 60);
  --accent:oklch(.64 .19 38); --accent-strong:oklch(.56 .19 36); --accent-soft:oklch(.95 .03 45); --ring:oklch(.64 .19 38 / .28);
  --ok:oklch(.52 .12 155); --ok-soft:oklch(.955 .035 155);
  --danger:oklch(.53 .19 27); --danger-soft:oklch(.955 .03 27);
  --warn-fg:oklch(.48 .1 70); --warn-soft:oklch(.96 .045 85);
  --shadow-sm:0 1px 1px oklch(.2 .01 50 / .05);
  --shadow-pop:0 0 0 1px oklch(.2 .01 50 / .07),0 10px 28px -8px oklch(.2 .01 50 / .22);
  --shadow-sheet:0 0 0 1px oklch(.2 .01 50 / .07),0 1px 2px oklch(.2 .01 50 / .06),0 18px 40px -16px oklch(.2 .01 50 / .22);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:oklch(.165 .004 50); --surface:oklch(.19 .004 50); --canvas:oklch(.142 .004 50); --raised:oklch(.205 .004 50);
  --line:oklch(.29 .005 50); --line-soft:oklch(.245 .005 50); --line-strong:oklch(.38 .006 50);
  --fg:oklch(.95 .004 60); --fg-2:oklch(.75 .007 60); --fg-3:oklch(.58 .007 60);
  --ink:oklch(.95 .004 60); --ink-hover:oklch(.86 .004 60); --on-ink:oklch(.18 .004 50);
  --accent:oklch(.72 .16 42); --accent-strong:oklch(.76 .15 42); --accent-soft:oklch(.27 .05 40); --ring:oklch(.72 .16 42 / .32);
  --ok:oklch(.76 .13 155); --ok-soft:oklch(.26 .04 155);
  --danger:oklch(.74 .15 27); --danger-soft:oklch(.27 .05 27);
  --warn-fg:oklch(.84 .1 85); --warn-soft:oklch(.28 .045 80);
  --shadow-pop:0 0 0 1px oklch(1 0 0 / .07),0 12px 32px -8px oklch(0 0 0 / .6);
  --shadow-sheet:0 0 0 1px oklch(0 0 0 / .4),0 24px 48px -16px oklch(0 0 0 / .7);
  color-scheme:dark;
}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:var(--t-base);line-height:1.55;
  font-feature-settings:"ss06","tnum";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-break:keep-all;overflow-wrap:anywhere}
::selection{background:var(--accent-soft)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
* {scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}

/* ---------- 상단 바 ---------- */
.bar{position:sticky;top:0;z-index:20;height:var(--bar-h);display:flex;align-items:center;gap:var(--s-4);padding:0 var(--s-4) 0 var(--s-5);
  background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:var(--s-2);text-decoration:none;min-width:0}
.mark{width:22px;height:22px;fill:none;stroke:var(--fg);stroke-width:1.6}
.mark-dot{fill:var(--accent);stroke:none}
.brand-name{font-weight:650;letter-spacing:-.015em;font-size:var(--t-body)}
.brand-sep{color:var(--line-strong);margin:0 2px}
.brand-org{color:var(--fg-2);white-space:nowrap}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line);border-radius:5px;background:var(--raised);
  font-size:var(--t-xs);font-weight:600;color:var(--fg-2);white-space:nowrap}
.brand .tag{margin-left:var(--s-1)}
.seg{margin-left:auto;display:inline-flex;padding:2px;gap:2px;background:var(--canvas);border:1px solid var(--line-soft);border-radius:var(--r-md)}
.seg a,.seg button{display:inline-flex;align-items:center;height:28px;padding:0 var(--s-3);border-radius:var(--r-sm);border:0;background:none;
  font-size:var(--t-sm);font-weight:550;color:var(--fg-2);text-decoration:none;transition:color .15s,background-color .15s}
.seg a:hover,.seg button:hover{color:var(--fg)}
.seg [aria-current="page"],.seg [aria-selected="true"]{background:var(--raised);color:var(--fg);box-shadow:0 0 0 1px var(--line),var(--shadow-sm)}
.who{display:inline-flex;align-items:center;gap:var(--s-2);height:34px;padding:0 var(--s-3) 0 4px;border:0;border-radius:var(--r-md);background:none;color:var(--fg-2);font-size:var(--t-sm)}
.who:hover{background:var(--canvas);color:var(--fg)}
.avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-size:var(--t-xs);font-weight:650}
.who-name{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 공통 컨트롤 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:34px;padding:0 14px;border-radius:var(--r-md);
  border:1px solid transparent;font-size:var(--t-sm);font-weight:600;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s,opacity .15s}
.btn-primary{background:var(--ink);color:var(--on-ink)}
.btn-primary:hover:not([disabled]){background:var(--ink-hover)}
.btn-secondary{background:var(--raised);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-secondary:hover:not([disabled]){border-color:var(--line-strong);background:var(--surface)}
.btn-ghost{background:none;color:var(--fg-2)}
.btn-ghost:hover:not([disabled]){background:var(--canvas);color:var(--fg)}
.btn-danger{color:var(--danger)}
.btn-danger[data-armed]{background:var(--danger);color:var(--on-ink)}
.btn-lg{height:42px;padding:0 18px;font-size:var(--t-body)}
.btn-sm{height:30px;padding:0 10px;font-size:var(--t-sm)}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn[aria-busy="true"]{cursor:progress;pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:28px;height:28px;border:0;border-radius:var(--r-sm);background:none;color:var(--fg-3)}
.icon-btn:hover{background:var(--canvas);color:var(--fg)}
.kbd{font-family:var(--font-mono);font-size:var(--t-xs);font-weight:500;padding:1px 5px;border-radius:4px;
  background:color-mix(in oklch,var(--on-ink) 14%,transparent);color:color-mix(in oklch,var(--on-ink) 75%,transparent)}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-label{font-size:var(--t-sm);font-weight:550;color:var(--fg-2)}
.opt{font-weight:400;color:var(--fg-3);margin-left:var(--s-1)}
input[type=text],input[type=date],input[type=number],input[type=tel],input[type=datetime-local],select{height:38px;width:100%;min-width:0;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--raised);font-size:var(--t-base);transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--fg-3);opacity:1}
input:hover,select:hover{border-color:var(--line-strong)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.select{position:relative}
.select select{appearance:none;padding-right:36px;cursor:pointer;text-overflow:ellipsis}
.select::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;margin-top:-7px;pointer-events:none;background:var(--fg-3);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.25 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.select-sm select{height:30px;font-size:var(--t-sm)}
.editor{border:1px solid var(--line);border-radius:10px;background:var(--raised);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.editor:hover{border-color:var(--line-strong)}
.editor:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.editor textarea{display:block;width:100%;min-height:220px;padding:14px 16px;border:0;outline:0;background:none;resize:none;
  font-size:var(--t-body);line-height:1.75;overflow:hidden}
.editor-foot{display:flex;gap:var(--s-2);padding:10px 14px;border-top:1px solid var(--line-soft);background:var(--surface);font-size:var(--t-xs);line-height:1.6;color:var(--fg-2)}
.editor-foot .i{width:14px;height:14px;margin-top:2px;color:var(--fg-3)}

.label{font-size:var(--t-sm);font-weight:650;color:var(--fg)}
.hint{font-size:var(--t-xs);color:var(--fg-3)}
.count{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-xs);color:var(--fg-3)}
.note{display:flex;gap:var(--s-2);align-items:flex-start;margin:var(--s-3) 0 0;font-size:var(--t-sm);color:var(--fg-2)}
.note .i{width:14px;height:14px;margin-top:3px;color:var(--fg-3)}
.eyebrow{margin:0;font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.02em;color:var(--fg-3)}
.section-title{display:flex;align-items:center;gap:6px;margin:0 0 var(--s-3);font-size:var(--t-sm);font-weight:650}
.section-title .i{width:14px;height:14px;color:var(--fg-2)}
.section-sub{margin:calc(-1 * var(--s-2)) 0 var(--s-3);font-size:var(--t-xs);color:var(--fg-3)}
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
.span-2{grid-column:1/-1}

/* ---------- 진입(코드) 화면 ---------- */
.gate{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(32px,6vw,96px);min-height:calc(100dvh - var(--bar-h));
  padding:clamp(40px,11vh,120px) 0 0 clamp(20px,7vw,112px);overflow:hidden}
.gate-copy{padding-bottom:var(--s-7)}
.gate h1{margin:var(--s-3) 0 var(--s-4);font-size:var(--t-xl);line-height:1.18;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.lede{margin:0;max-width:38ch;font-size:var(--t-body);line-height:1.7;color:var(--fg-2)}
.gate-form{display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-6)}
.gate-form input{height:42px;font-size:var(--t-body)}
.gate-actions{display:flex;gap:var(--s-2);margin-top:var(--s-1)}
.gate-actions .btn-primary{flex:1}
.form-error{display:flex;gap:var(--s-2);margin:0;padding:10px 12px;border-radius:var(--r-md);background:var(--danger-soft);color:var(--danger);font-size:var(--t-sm)}
.points{list-style:none;margin:var(--s-6) 0 0;padding:var(--s-5) 0 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:10px;font-size:var(--t-sm);color:var(--fg-2)}
.points li{display:flex;gap:10px;align-items:center}
.points .i{color:var(--fg-3)}
.gate-shot{position:relative;min-width:0}
.shot-canvas{height:100%;padding:56px 0 0 56px;border:1px solid var(--line);border-right:0;border-bottom:0;border-radius:var(--r-lg) 0 0 0;background:var(--canvas);
  overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.shot-canvas .sheet{--zoom:.8}

/* ---------- 작업 화면(2단) ---------- */
.work{display:grid;grid-template-columns:minmax(380px,500px) minmax(0,1fr);height:calc(100dvh - var(--bar-h))}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.pane-edit,.pane-list{background:var(--surface);border-right:1px solid var(--line)}
.pane-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:var(--head-h);padding:0 var(--s-5);border-bottom:1px solid var(--line-soft)}
.pane-status{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--fg-3)}
.pane-body{flex:1;overflow:auto;padding:var(--s-5) var(--s-5) var(--s-6)}
.pane-body.flush{padding:0}
.panel{animation:enter .22s var(--ease)}
.group+.group{margin-top:var(--s-6)}
.group-head{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2);min-height:28px}
.group-head .icon-btn{margin-left:auto}

.tabs{display:flex;gap:var(--s-5);height:100%}
.tabs [role=tab]{position:relative;display:inline-flex;align-items:center;gap:6px;height:100%;padding:0;border:0;background:none;font-size:var(--t-base);font-weight:550;color:var(--fg-3)}
.tabs [role=tab]:hover{color:var(--fg)}
.tabs [aria-selected="true"]{color:var(--fg)}
.tabs [aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--fg)}
.tab-count{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--fg-3)}

.brief{margin-top:var(--s-3);padding:14px 16px;border:1px solid var(--line-soft);border-radius:10px;background:var(--canvas)}
.brief-head{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.brief-meta{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--fg-3)}
.brief-text{margin:0;white-space:pre-wrap;font-size:var(--t-body);line-height:1.75}

.disclosure summary{display:flex;align-items:center;gap:var(--s-3);height:36px;list-style:none;cursor:pointer;border-radius:var(--r-sm)}
.disclosure summary::-webkit-details-marker{display:none}
.summary-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-xs);color:var(--fg-3)}
.disclosure .chev{color:var(--fg-3);transition:transform .2s var(--ease)}
.disclosure[open] .chev{transform:rotate(180deg)}
.disclosure .grid-2{margin-top:var(--s-3)}

.callout{margin-bottom:var(--s-6);padding:var(--s-4) 18px;border:1px dashed var(--line-strong);border-radius:10px;font-size:var(--t-sm);color:var(--fg-2)}
.callout p{margin:0}
.callout-title{font-weight:650;color:var(--fg);margin-bottom:var(--s-1)!important}
.private{padding:18px;margin-left:calc(-1 * 18px);margin-right:calc(-1 * 18px);border-radius:var(--r-lg);background:var(--canvas)}
.group.private+.group{margin-top:var(--s-5)}

.pane-foot{position:relative;flex:none;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);background:var(--surface)}
.pane-foot .btn-ghost,.pane-foot .foot-next{margin-left:auto}
.foot-status{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--fg-3);font-variant-numeric:tabular-nums}
.live{display:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.progress{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden;opacity:0;transition:opacity .2s}
.progress span{position:absolute;inset:0 auto 0 0;width:32%;background:var(--accent)}
body.is-busy .progress{opacity:1}
body.is-busy .progress span{animation:slide 1.3s var(--ease) infinite}
.btn[aria-busy="true"] .live{display:block;animation:pulse 1.2s ease-in-out infinite}
.btn[aria-busy="true"] .kbd{display:none}

/* ---------- 미리보기 ---------- */
.pane-doc{background:var(--canvas)}
.doc-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:var(--head-h);padding:0 var(--s-5);border-bottom:1px solid var(--line-soft)}
.doc-id{display:flex;align-items:baseline;gap:var(--s-3);min-width:0}
.file{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-actions{display:flex;gap:var(--s-2);flex:none}
.receipt{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-3) var(--s-5) 0;padding:9px 12px;border-radius:var(--r-md);background:var(--ok-soft);color:var(--ok);font-size:var(--t-sm);font-weight:550;animation:enter .3s var(--ease)}
.canvas{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:var(--s-6) clamp(16px,3vw,48px) var(--s-8)}
.sheet{zoom:var(--zoom,1);transition:opacity .3s var(--ease)}
body.is-generating #tCanvas .sheet{opacity:.45}
.help{width:min(100%,640px);margin-top:var(--s-6);font-size:var(--t-sm);color:var(--fg-2)}
.help summary{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;color:var(--fg-2);width:max-content;list-style:none}
.help summary::-webkit-details-marker{display:none}
.help summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--ease)}
.help[open] summary::before{transform:rotate(45deg)}
.help summary:hover{color:var(--fg)}
.help ul{margin:var(--s-3) 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;line-height:1.6}

/* 종이: 용산구 1단계 내부보고 서식을 흉내 낸다(실제 파일은 hwpx 서식). */
.paper{width:794px;min-height:1123px;padding:76px 72px 88px;background:oklch(.995 .002 90);color:oklch(.17 .01 260);box-shadow:var(--shadow-sheet);border-radius:2px;
  font-family:var(--font-doc);font-size:16px;line-height:1.72;word-break:keep-all;overflow-wrap:anywhere;color-scheme:light}
.paper .ttl{border-top:1.5px solid #333;border-bottom:1.5px solid #333;text-align:center;font-family:var(--font-sans);font-weight:700;font-size:1.75em;padding:8px 0;margin:0 0 8px;letter-spacing:-.01em;color:#1a2a44}
.paper .meta{text-align:right;color:#333;font-size:.95em;margin-bottom:14px}
.paper .sum{background:#fff3b0;border:1px solid #e3c85a;padding:10px 14px;font-family:var(--font-sans);font-weight:650;margin-bottom:18px;line-height:1.6}
.paper h4{font-family:var(--font-sans);font-size:1.12em;font-weight:700;margin:18px 0 6px;color:#111}
.paper h4::before{content:"□";color:#e07b2a;margin-right:6px;font-weight:400}
.paper p{margin:0 0 .2em}
.paper p.o{padding-left:2.4em;text-indent:-1.3em}
.paper p.o::before{content:"○ "}
.paper p.d{padding-left:3.9em;text-indent:-1.1em;font-size:.95em}
.paper p.d::before{content:"- "}
.paper p.dd{padding-left:5.2em;text-indent:-1em;font-size:.92em;color:#333}
.paper p.dd::before{content:"ㆍ "}
.paper table{border-collapse:collapse;width:100%;margin:8px 0 10px;font-family:var(--font-sans);font-size:.84em;text-align:center}
.paper th,.paper td{border:1px solid #666;padding:4px 5px;height:2em}
.paper th{background:#e8edf5;font-weight:500}
.paper thead tr:first-child th{border-top:2px solid #333}

/* ---------- 교관 ---------- */
.work-admin{grid-template-columns:minmax(320px,400px) minmax(0,1fr)}
.pane-detail{overflow:auto;background:var(--bg)}
.banner{display:flex;gap:var(--s-2);margin:var(--s-3) var(--s-4) 0;padding:9px 12px;border-radius:var(--r-md);background:var(--warn-soft);color:var(--warn-fg);font-size:var(--t-xs);line-height:1.55}
.banner .i{width:14px;height:14px;margin-top:2px}
.list-tools{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line-soft)}
.list-tools .select{flex:1;min-width:0}
.rows{list-style:none;margin:0;padding:var(--s-2)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;width:100%;padding:10px 12px;border:0;border-radius:var(--r-md);background:none;text-align:left;transition:background-color .12s}
.row:hover{background:var(--canvas)}
.row[aria-current="true"]{background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.row-dot{grid-row:1/3;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--ok)}
.row-dot.off{background:var(--line-strong)}
.row-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-meta{font-size:var(--t-xs);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-meta .mono{font-family:var(--font-mono)}
.rows-empty{padding:var(--s-6) var(--s-4);text-align:left;font-size:var(--t-sm);color:var(--fg-3)}
.detail{max-width:860px;padding:var(--s-6) clamp(20px,4vw,56px) var(--s-7);animation:enter .22s var(--ease)}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.detail-head h2{margin:6px 0 0;font-size:var(--t-lg);font-weight:700;letter-spacing:-.025em;line-height:1.3;text-wrap:balance}
.detail-actions{display:flex;gap:var(--s-2);flex:none}
.detail-foot{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5)}
.detail .editor textarea{min-height:200px}
.seg-inline{margin:0 0 var(--s-4)}
.canvas-inset{border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--canvas);padding:var(--s-6) var(--s-5)}
.raw pre{margin:0 0 var(--s-5);padding:14px 16px;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface);white-space:pre-wrap;word-break:break-word;
  font-family:var(--font-sans);font-size:var(--t-body);line-height:1.7}
.empty{max-width:420px;padding:var(--s-8) clamp(20px,4vw,56px)}
.empty-title{margin:0 0 var(--s-2);font-size:var(--t-md);font-weight:650}
.empty p:not(.empty-title){margin:0;font-size:var(--t-sm);line-height:1.65;color:var(--fg-2)}

/* ---------- 토스트 ---------- */
.toasts{position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-2);pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:10px;max-width:380px;padding:11px 14px;border-radius:10px;background:var(--raised);box-shadow:var(--shadow-pop);
  font-size:var(--t-sm);line-height:1.5;pointer-events:auto;animation:toast-in .26s var(--ease)}
.toast.leaving{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.toast-icon svg{display:block;width:16px;height:16px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.toast[data-tone="ok"] .toast-icon{color:var(--ok)}
.toast[data-tone="error"] .toast-icon{color:var(--danger)}
.toast[data-tone="info"] .toast-icon{color:var(--fg-2)}

@keyframes enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(320%)}}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- 반응형 ---------- */
@media (max-width:1080px){
  .gate{grid-template-columns:minmax(0,1fr);padding-right:clamp(20px,7vw,112px)}
  .gate-shot{display:none}
  .gate-copy{max-width:440px}
  .work,.work-admin{grid-template-columns:minmax(0,1fr);height:auto}
  .pane-edit,.pane-list{border-right:0;border-bottom:1px solid var(--line)}
  .pane-body{overflow:visible}
  .pane-foot{position:sticky;bottom:0;z-index:10}
  .pane-doc .canvas{overflow:visible}
  .pane-detail{overflow:visible}
}
@media (max-width:640px){
  .bar{padding:0 var(--s-3) 0 var(--s-4);gap:var(--s-2)}
  .brand-sep,.brand-org,.brand .tag,.who-name{display:none}
  .pane-head,.pane-body,.pane-foot,.doc-bar{padding-left:var(--s-4);padding-right:var(--s-4)}
  .doc-bar{height:auto;padding-top:var(--s-3);padding-bottom:var(--s-3);flex-wrap:wrap}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .private{margin-left:calc(-1 * var(--s-3));margin-right:calc(-1 * var(--s-3));padding:var(--s-4) var(--s-3)}
  .kbd{display:none}
  .detail-head{flex-direction:column}
  .toasts{left:var(--s-4);right:var(--s-4);align-items:stretch}
  .toast{max-width:none}
}