:root{--ink:#1d1d1f;--sub:#6e6e73;--faint:#86868b;--bg:#f5f5f7;--card:#fff;--hair:#d2d2d7;--blue:#0071e3;--orange:#f56300;--green:#1a8f4a;--purple:#8944ab;--red:#d70015;--edge:#c7c7cc}
*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo",sans-serif;letter-spacing:-.01em;word-break:keep-all}
nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;height:52px;padding:0 28px;background:rgba(245,245,247,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.seg{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px;border-radius:9px;background:rgba(118,118,128,.12)}
.seg button{flex:none;padding:4px 14px;border:0;border-radius:7px;background:none;color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.seg button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.05)}
.right{flex:none;display:flex;align-items:center;gap:18px;margin-left:auto;font-size:13px;color:var(--sub)}
select{appearance:none;padding:4px 10px;border:0;border-radius:7px;background:rgba(118,118,128,.12);color:var(--ink);font:inherit;font-size:13px}
.sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.sw input{appearance:none;width:38px;height:23px;margin:0;border-radius:12px;background:rgba(120,120,128,.24);position:relative;cursor:pointer;transition:background .2s}
.sw input::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:left .22s cubic-bezier(.3,1.3,.6,1)}
.sw input:checked{background:#34c759}.sw input:checked::after{left:17px}
.sw input:disabled{opacity:.45;cursor:default}
.hero{padding:34px 40px 14px}
h1{margin:0;font:600 44px/1.08 -apple-system,BlinkMacSystemFont,"SF Pro Display","Apple SD Gothic Neo",sans-serif;letter-spacing:-.025em}
.lead{margin:8px 0 0;font-size:19px;color:var(--sub);letter-spacing:-.015em}
.lead b{color:var(--ink);font-weight:500}
.note{margin:8px 0 0;max-width:760px;font-size:14px;color:var(--sub)}
.past{display:inline-block;margin:0 0 10px;padding:3px 12px;border:0;border-radius:980px;background:rgba(245,99,0,.12);color:var(--orange);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.link-btn{margin-top:10px;padding:0;border:0;background:none;color:var(--blue);font:inherit;font-size:14px;cursor:pointer}
#layout{display:flex;align-items:flex-start;padding:0 12px 18px}
/* 트리: stack-diagram의 engineered-paper 형상. 모눈 캔버스, 흰 정사각 타일, 직각 선, 모노 라벨 */
@font-face{font-family:"Geist";font-weight:100 900;font-display:swap;src:url(/fonts/Geist.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:100 800;font-display:swap;src:url(/fonts/JetBrainsMono.woff2) format("woff2")}
#wrap{--paper:oklch(98.5% .004 250);--rule:oklch(93% .007 255);--rule-2:oklch(83% .011 255);--muted:oklch(56% .013 255);--neutral:oklch(46% .015 255);--ink-2:oklch(34% .018 257);--accent:oklch(58% .2 256);--accent-soft:oklch(58% .2 256 / .45);--accent-tint:oklch(97% .012 256 / .5);--veil:oklch(98.5% .004 250 / .8);--ok:oklch(55% .14 150);--warn:oklch(62% .17 55);--display:"Geist","Apple SD Gothic Neo",-apple-system,sans-serif;--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,"Apple SD Gothic Neo",monospace;
  flex:1;min-width:0;overflow-x:auto;border:1px solid var(--rule-2);border-radius:10px;background:var(--paper)}
#box{position:relative}
#stage{position:relative;transform-origin:top left;background-color:var(--paper);background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
#stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.grp{position:absolute;top:8px;bottom:8px;border:1.5px solid var(--rule-2);border-radius:12px;background:oklch(96.5% .005 252 / .45)}
.grp.end{border-color:var(--accent-soft);background:var(--accent-tint)}
.g-label{position:absolute;top:12px;left:14px;display:flex;align-items:baseline;gap:8px;font:600 13px/1 var(--display);color:var(--neutral);white-space:nowrap}
.grp.end .g-label{color:var(--accent)}
.g-label small{font:400 10px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.edge{fill:none;stroke-width:1.4;stroke:var(--neutral);transition:stroke .2s}
.edge.e{stroke:var(--accent);stroke-width:1.8}.edge.k{stroke:var(--ok);stroke-width:1.8}.edge.dash{stroke-dasharray:4 5;opacity:.6}
.head{fill:var(--neutral)}.head.e{fill:var(--accent)}.head.k{fill:var(--ok)}
.el{font:500 10.5px var(--mono);fill:var(--neutral);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.el.e{fill:var(--accent)}.el.k{fill:var(--ok)}.el.up{fill:var(--green)}.el.down{fill:var(--red)}
.node{position:absolute;display:block;width:168px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer}
.tile{display:grid;place-content:center;width:60px;height:60px;margin:0 auto;border:1px solid var(--rule-2);border-radius:12px;background:#fff;box-shadow:0 1px 2px oklch(24% .02 258 / .05);transition:border-color .15s cubic-bezier(.16,1,.3,1),box-shadow .15s}
.node .tile{gap:1px;line-height:1}
.node .tile small{font:400 9.5px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.node .tile span{font:600 17px/1.1 var(--display);color:var(--ink)}
.node:hover .tile{border-color:var(--accent)}
.node.next .tile{border-color:var(--warn);box-shadow:0 0 0 3px oklch(62% .17 55 / .14)}
.node.resolved .tile{border-color:var(--ok)}
.node.sel .tile{border-color:var(--accent);box-shadow:0 0 0 3px oklch(58% .2 256 / .2)}
.node .name{display:-webkit-box;margin-top:8px;overflow:hidden;font:600 13px/1.3 var(--display);letter-spacing:-.01em;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.name span,.role span{padding:0 4px;border-radius:3px;background:var(--veil);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.role{display:block;margin-top:3px;overflow:hidden;font:400 10px/1.4 var(--mono);letter-spacing:.04em;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.next .role{color:var(--warn)}.resolved .role{color:var(--ok)}
.role.xlink{color:var(--purple)}
.leaf{position:absolute;display:flex;align-items:center;gap:12px;width:236px}
.leaf .tile{flex:none;width:56px;height:56px;margin:0;font:600 16px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.leaf .txt{min-width:0}
.nm{display:-webkit-box;overflow:hidden;font:600 13px/1.3 var(--display);letter-spacing:-.01em;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.leaf .role{margin-top:2px}
.leaf .tile.up{border-color:var(--green)}.leaf .tile.down{border-color:var(--red)}
.up{color:var(--green)!important}.down{color:var(--red)!important}
#removed{padding:0 14px;font-size:13px;color:var(--sub)}
#removed h3{margin:8px 0 4px}
#sheet{flex:none;position:sticky;top:64px;width:0;max-height:calc(100vh - 76px);overflow:hidden;border-radius:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 12px 40px rgba(0,0,0,.12);opacity:0;transition:width .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
#sheet.open{width:360px;margin-left:8px;opacity:1;overflow:auto}
.in{width:360px;padding:20px 22px 22px}
.when{margin:0;font-size:13px;color:var(--sub)}
.close{float:right;width:26px;height:26px;border:0;border-radius:50%;background:rgba(118,118,128,.14);color:var(--sub);font:inherit;font-size:15px;line-height:1;cursor:pointer}
h2{margin:3px 0 6px;font-size:23px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
h3{margin:20px 0 6px;font-size:13px;font-weight:600;color:var(--sub)}
.crit{margin:0;color:var(--sub);font-size:14px}
ul{list-style:none;margin:0;padding:0}
.group{border-radius:12px;background:rgba(118,118,128,.08);padding:0 12px}
.row{display:grid;grid-template-columns:1fr auto;gap:0 8px;padding:9px 0;border-top:.5px solid var(--hair)}.row:first-child{border-top:0}
.row b{font-weight:500}.row>span{font-weight:600;font-variant-numeric:tabular-nums}.row small{grid-column:1/-1;color:var(--sub);font-size:12.5px}
.row a{display:block;grid-column:1/-1;overflow:hidden;color:var(--blue);font-size:12.5px;white-space:nowrap;text-overflow:ellipsis}
.sign{padding:8px 0;font-size:14px;border-top:.5px solid var(--hair)}.sign:first-child{border-top:0}
.sign small{display:block;color:var(--sub);font-size:12.5px}
.lk{display:block;width:100%;padding:9px 0;border:0;border-top:.5px solid var(--hair);background:none;color:var(--blue);font:inherit;font-size:14px;text-align:left;cursor:pointer}.lk:first-child{border-top:0}
.lk small{display:block;color:var(--sub);font-size:12.5px}
.cm{padding:8px 0;font-size:14px;border-top:.5px solid var(--hair);white-space:pre-wrap;overflow-wrap:anywhere}.cm:first-child{border-top:0}.cm small{display:block;color:var(--faint);font-size:12px}
textarea{display:block;width:100%;height:68px;margin-top:8px;padding:10px 12px;border:0;border-radius:12px;background:rgba(118,118,128,.08);color:inherit;font:inherit;font-size:14px;resize:none}
.save{width:100%;margin-top:8px;padding:9px;border:0;border-radius:980px;background:var(--blue);color:#fff;font:inherit;font-weight:500;cursor:pointer}.save:hover{background:#0077ed}.save:disabled{opacity:.5;cursor:default}
.err{margin:8px 0 0;color:var(--red);font-size:13px;overflow-wrap:anywhere}
.fail{margin:8px 28px;padding:18px 20px;border-radius:18px;background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.fail code{display:block;margin:6px 0 10px;color:var(--sub);font-size:13px;overflow-wrap:anywhere}
.fail li{padding:4px 0;font-size:14px;color:var(--red);overflow-wrap:anywhere}
:focus-visible{outline:3px solid rgba(0,113,227,.45);outline-offset:1px}
/* 목록 보기: 좁은 화면 기본. 다이어그램과 같은 종이·타일·모노 라벨 형상을 쓴다 */
#wrap.as-list{overflow:visible}
#list{padding:8px;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:24px 24px;border-radius:10px}
.sec{position:relative;margin:0 0 10px;padding:42px 10px 6px;border:1.5px solid var(--rule-2);border-radius:12px;background:oklch(96.5% .005 252 / .6)}
.sec.end{border-color:var(--accent-soft);background:var(--accent-tint)}
.sec.end .g-label{color:var(--accent)}
.sec .g-label{margin:0}
.item{display:flex;align-items:flex-start;gap:12px;width:100%;margin:0 0 6px;padding:10px;border:1px solid transparent;border-radius:12px;background:var(--veil);color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.item.scen{align-items:center}
.item .tile{flex:none;margin:0;gap:1px;line-height:1}
.item .tile small{font:400 9.5px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.item .tile span{font:600 17px/1.1 var(--display)}
.item.scen .tile{width:52px;height:52px;font:600 16px/1 var(--display);font-variant-numeric:tabular-nums}
.item.next .tile{border-color:var(--warn);box-shadow:0 0 0 3px oklch(62% .17 55 / .14)}
.item.resolved .tile{border-color:var(--ok)}
.item.on{border-color:var(--accent-soft)}
.item.sel{border-color:var(--accent);box-shadow:0 0 0 3px oklch(58% .2 256 / .15)}
.item .body{min-width:0;flex:1}
.item .from{display:block;margin-bottom:2px;font:400 10.5px/1.4 var(--mono);color:var(--muted)}
.item .q{display:block;font:600 14.5px/1.35 var(--display);letter-spacing:-.01em}
.item .role{margin-top:4px}
.item.next .role{color:var(--warn)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.chip{display:inline-flex;align-items:baseline;gap:6px;padding:3px 8px;border:1px solid var(--rule-2);border-radius:7px;background:#fff;font:500 11.5px/1.3 var(--mono);color:var(--neutral)}
.chip b{font-weight:600;color:var(--ink)}
.chip em{font-style:normal;color:var(--accent)}
.chip.done{border-color:var(--ok);color:var(--ok)}
.item.on .chip{border-color:var(--accent-soft)}
@media(min-width:761px){.sec{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:6px}.sec .item{margin:0}}
#scrim{display:none}
@media(max-width:900px){#layout{display:block}#sheet.open{position:static;width:auto;margin:10px 0 0;max-height:none}.in{width:auto}h1{font-size:32px}.hero{padding:22px 20px 10px}nav{padding:0 12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* 휴대폰: 상단 막대를 두 줄로, 상세 창은 아래에서 올라오는 시트로 */
@media(max-width:760px){
  nav{flex-wrap:wrap;height:auto;gap:8px;padding:8px 12px}
  nav>.seg{flex:1 1 100%}
  .right{flex:1 1 100%;margin-left:0;gap:10px;justify-content:space-between}
  .right select{min-width:0;flex:1}
  .sw .long{display:none}
  .seg button{padding:6px 12px}
  .hero{padding:18px 16px 8px}
  h1{font-size:28px}
  .lead{font-size:16px}
  .note{font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  #layout{padding:0 8px 24px}
  #wrap{-webkit-overflow-scrolling:touch}
  #sheet,#sheet.open{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:30;width:auto;margin:0;max-height:86vh;border-radius:20px 20px 0 0;background:rgba(255,255,255,.96);box-shadow:0 -10px 40px rgba(0,0,0,.18);transform:translateY(100%);opacity:1;overflow:auto;overscroll-behavior:contain;transition:transform .3s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom)}
  #sheet.open{transform:none}
  #sheet .in{width:auto;padding:14px 18px 22px}
  #sheet .in::before{content:"";display:block;width:36px;height:5px;margin:0 auto 12px;border-radius:3px;background:rgba(60,60,67,.3)}
  .close{width:32px;height:32px}
  #scrim{display:block;position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s}
  .sheet-open #scrim{opacity:1;pointer-events:auto}
  .sheet-open{overflow:hidden}
  textarea{font-size:16px}
}