/* MAESTRO 화면 스타일 — 색과 글꼴은 맨 위 토큰에서만 정한다. 밝은·어두운 화면은 기기 설정을 따른다. */
html{-webkit-text-size-adjust:100%} body{margin:0} [hidden]{display:none!important} img{max-width:100%}
/* 배치: 고정 머리(이름·탭) 아래 세 화면 — 면담(대화 | 차원 상태), 레거시(오각형 | 지식지도 | 근거), 원문 */
:root{
  --bg:#FAFAF8; --surface:#FFFFFF; --wash:#F1F2F6; --ink:#16296B; --text:#2B3350; --muted:#5A6478;
  --line:#E2E0DA; --line-2:#C5C9D6; --navy:#16296B; --on-navy:#FFFFFF; --gold:#C08A2E; --gold-ink:#8A6212; --edge:#7B849C;
  --ok:#1F7A4D; --warn:#A8610B; --bad:#B3261E;
  --d-episode:#0F7B74; --d-rule:#2A5FBF; --d-principle:#8A6212; --d-transfer:#6B4FB3; --d-exception:#B34E14;
  --f-body:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --f-display:"Noto Serif KR","Nanum Myeongjo",Georgia,serif;
  --f-num:Inter,"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0D1220; --surface:#151B2E; --wash:#1B2340; --ink:#E9ECF6; --text:#CDD3E4; --muted:#98A2BA;
  --line:#2A3250; --line-2:#3D4770; --navy:#3C52AE; --on-navy:#FFFFFF; --gold:#D3A65A; --gold-ink:#E2BD78; --edge:#8D97B3;
  --ok:#4CC38A; --warn:#E3A857; --bad:#F2857D;
  --d-episode:#45BDB3; --d-rule:#7CA6F5; --d-principle:#E0B560; --d-transfer:#AE96EE; --d-exception:#EE9560; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0D1220; --surface:#151B2E; --wash:#1B2340; --ink:#E9ECF6; --text:#CDD3E4; --muted:#98A2BA;
  --line:#2A3250; --line-2:#3D4770; --navy:#3C52AE; --on-navy:#FFFFFF; --gold:#D3A65A; --gold-ink:#E2BD78; --edge:#8D97B3;
  --ok:#4CC38A; --warn:#E3A857; --bad:#F2857D;
  --d-episode:#45BDB3; --d-rule:#7CA6F5; --d-principle:#E0B560; --d-transfer:#AE96EE; --d-exception:#EE9560; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:15px;line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--bg)}
h1,h2,h3,p,ol,ul,blockquote,figure{margin:0;padding:0} ol,ul{list-style:none}
button,textarea,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.shell{max-width:1760px;margin-inline:auto;display:flex;flex-direction:column;gap:14px;padding-block:0 28px}

.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:9;background:var(--bg);display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding-block:14px 12px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:8px}
.mark{font-family:var(--f-num);font-weight:600;letter-spacing:.22em;color:var(--ink);font-size:14px}
.proto{font-size:12px;color:var(--gold-ink);border:1px solid var(--gold);padding:1px 7px;border-radius:999px}
.legacy{font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--ink);text-wrap:balance;min-width:0}
.tabs{display:flex;gap:4px;margin-left:auto}
.tabs a{padding:7px 14px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:500}
.tabs a[aria-current="page"]{background:var(--navy);color:var(--on-navy)}
.store{font-size:12px;color:var(--muted);min-width:0}

.banner{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 14px;background:var(--wash);border-left:3px solid var(--gold);font-size:14px}
.banner.bad{border-left-color:var(--bad)}
.banner .grow{flex:1;min-width:0}

.btn{border:1px solid var(--line-2);background:var(--surface);padding:7px 14px;border-radius:6px;cursor:pointer;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.btn.ghost{background:transparent}
.btn.small{padding:3px 9px;font-size:13px}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:1px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.chip.dim{color:var(--c);border-color:var(--c);background:color-mix(in srgb, var(--c) 9%, var(--surface))}
.chip.ok{color:var(--ok);border-color:var(--ok)} .chip.warn{color:var(--warn);border-color:var(--warn)} .chip.bad{color:var(--bad);border-color:var(--bad)}
.d-episode{--c:var(--d-episode)} .d-rule{--c:var(--d-rule)} .d-principle{--c:var(--d-principle)} .d-transfer{--c:var(--d-transfer)} .d-exception{--c:var(--d-exception)}
.d-actor,.d-goal,.d-constraint,.d-action,.d-outcome{--c:var(--muted)}
.id{font-family:var(--f-num);font-weight:600;font-size:12px;color:var(--c, var(--muted));font-variant-numeric:tabular-nums}
h2{font-size:17px;color:var(--ink);font-weight:700}
h3{font-size:15px;color:var(--ink);font-weight:700}
.cap{font-size:12px;color:var(--muted)}
.label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em}

/* 면담 */
.iv{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.iv-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.iv-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.steps li{border-top:3px solid var(--line-2);padding-top:6px;min-width:0}
.steps li b{display:block;font-size:14px;color:var(--c)}
.steps li span{font-size:12px;color:var(--muted)}
.steps li.s-ok,.steps li.s-now,.steps li.s-fu,.steps li.s-wait{border-top-color:var(--c)}
.steps li.s-now b::after,.steps li.s-fu b::after{content:" ●";font-size:10px}
.thread{display:flex;flex-direction:column;gap:12px;min-height:120px}
.msg{max-width:780px;display:flex;flex-direction:column;gap:5px;min-width:0}
.msg.ai{align-self:flex-start} .msg.me{align-self:flex-end;align-items:flex-end}
.msg .who{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.msg .body{padding:11px 15px;border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.ai .body{background:var(--surface);border:1px solid var(--line);font-size:17px;color:var(--ink);font-weight:500}
.msg.me .body{background:var(--wash)}
.msg .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted);font-family:var(--f-num)}
.linkish{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:inherit}
.startcard,.endcard{background:var(--surface);border:1px solid var(--line);padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.ladder{display:flex;flex-direction:column}
.ladder li{display:grid;grid-template-columns:20px 92px minmax(0,1fr);gap:2px 10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
.ladder li:first-child{border-top:0}
.ladder .num{font-family:var(--f-num);font-weight:600;color:var(--c)}
.ladder b{color:var(--c)}
.ladder .what{min-width:0}
.ladder .cog{font-size:13px;color:var(--muted)}
.ladder .ask{grid-column:3;font-size:13px;color:var(--muted)}
.ladder.compact li{grid-template-columns:18px minmax(0,1fr);padding:7px 4px}
.ladder.compact .what{grid-column:2;font-size:13px}
.ladder li.pickable{cursor:pointer}
.ladder li.on{background:var(--wash)}
.composer{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.composer textarea{width:100%;border:0;background:transparent;resize:vertical;min-height:110px;font-size:16px;line-height:1.6;outline:none}
.partial{color:var(--muted);font-style:italic;overflow-wrap:anywhere}
.composer-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grow{flex:1}
.mic{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--navy);color:var(--ink);background:var(--surface);border-radius:999px;padding:8px 16px 8px 12px;cursor:pointer;font-weight:700}
.mic svg{width:18px;height:18px;fill:currentColor}
.mic.on{background:var(--bad);border-color:var(--bad);color:#fff}
.counts{font-size:12px;color:var(--muted);font-family:var(--f-num);font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--muted)}
.iv-rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(env(safe-area-inset-top, 0px) + 78px);min-width:0}
.box{background:var(--surface);border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.rows{display:flex;flex-direction:column}
.rows > *{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line);min-width:0}
.rows > *:first-child{border-top:0}
.pick{background:none;border:0;padding:6px 0;text-align:left;cursor:pointer;display:flex;gap:8px;align-items:baseline;width:100%;border-top:1px solid var(--line);min-width:0}
.pick:first-child{border-top:0}
.pick span.t{overflow-wrap:anywhere;min-width:0}
.pick:hover span.t{text-decoration:underline}

/* 레거시 */
.lg{display:grid;grid-template-columns:280px minmax(0,1fr) 330px;gap:16px;align-items:start}
.lg-left,.lg-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.lg-center{display:flex;flex-direction:column;gap:10px;min-width:0}
.penta svg{display:block;width:100%;height:auto}
.penta .ring{fill:none;stroke:var(--line)} .penta .spoke{stroke:var(--line)}
.penta .shape{fill:color-mix(in srgb, var(--gold) 22%, transparent);stroke:var(--gold);stroke-width:2}
.penta .dot{fill:var(--c)}
.penta .ax{cursor:pointer} .penta .ax text{fill:var(--c);font-size:13px;font-weight:700}
.penta .ax text.n{fill:var(--muted);font-family:var(--f-num);font-size:12px;font-weight:500}
.penta .ax.on text{text-decoration:underline}
table.m{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
table.m th{font-size:11px;color:var(--muted);font-weight:700;text-align:right;padding:4px 0 4px 6px;border-bottom:1px solid var(--line)}
table.m th:first-child,table.m td:first-child{text-align:left;padding-left:0}
table.m td{text-align:right;padding:5px 0 5px 6px;border-bottom:1px solid var(--line);font-family:var(--f-num)}
table.m td:first-child{font-family:var(--f-body);font-weight:700;color:var(--c)}
table.m tr.on td{background:var(--wash)}
.g-toolbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.g-toolbar select{border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:6px;padding:3px 6px;font-size:13px;max-width:210px}
.g-toolbar label{font-size:13px;color:var(--muted);display:inline-flex;gap:5px;align-items:center;cursor:pointer}
.onto{display:flex;flex-wrap:wrap;gap:5px 6px;align-items:center;font-size:12px;color:var(--muted);padding:8px 10px;background:var(--wash)}
.g-wrap{position:relative;background:var(--surface);border:1px solid var(--line);height:620px;overflow:hidden}
.g-wrap svg{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.g-empty{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted)}
.gn{cursor:pointer}
.gn rect{fill:color-mix(in srgb, var(--c) 9%, var(--surface));stroke:var(--c);stroke-width:1.5}
.gn.st-new rect{stroke-dasharray:5 4}
.gn .gid{fill:var(--c);font-family:var(--f-num);font-size:12px;font-weight:600}
.gn .glab{fill:var(--text);font-size:14px;font-weight:600}
.gn.ctx rect{fill:var(--wash);stroke:var(--line-2);stroke-width:1}
.gn.ctx .glab{fill:var(--muted);font-size:12px;font-weight:500}
.gn.sel rect{stroke-width:3;stroke-dasharray:none}
.gn.ctx.sel rect{stroke:var(--ink);stroke-width:2}
.faded{opacity:.2}
.edge{cursor:pointer}
.edge .hit{stroke:transparent;stroke-width:14;fill:none}
.edge .ln{stroke:var(--edge);stroke-width:1.4;fill:none}
.edge.ec .ln{stroke:var(--line-2);stroke-dasharray:2 3}
.edge.sym .ln{stroke-dasharray:6 4}
.edge.sel .ln{stroke:var(--ink);stroke-width:2.4;stroke-dasharray:none}
.elab{font-size:12px;fill:var(--muted);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round;text-anchor:middle}
.edge.ec .elab{font-size:11px}
.edge.ec:not(.near) .elab{display:none}
.arrow{fill:var(--edge)}
.detail blockquote{border-left:3px solid var(--c, var(--line-2));padding:4px 0 4px 12px;color:var(--text);overflow-wrap:anywhere}
.detail .tags{display:flex;flex-wrap:wrap;gap:5px}
.detail .acts{display:flex;flex-wrap:wrap;gap:6px}
.detail input[type=text],.detail textarea{width:100%;border:1px solid var(--line-2);background:var(--surface);border-radius:6px;padding:7px 9px}
.depth li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:4px;font-size:13px;padding:2px 0}
.depth li.no{color:var(--muted)}
.conn{display:flex;flex-direction:column}
.conn button{background:none;border:0;border-top:1px solid var(--line);padding:7px 0;text-align:left;cursor:pointer;font-size:13px;overflow-wrap:anywhere}
.conn button:first-child{border-top:0}
.conn button:hover{text-decoration:underline}

/* 원문 */
.tr-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ses{background:var(--surface);border:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.ses-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.utt{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.utt.ai .tx{color:var(--muted)}
.utt .tx{overflow-wrap:anywhere;max-width:78ch}
.utt.flash{background:color-mix(in srgb, var(--gold) 16%, transparent)}
mark.q{background:color-mix(in srgb, var(--c) 16%, transparent);color:inherit;border-bottom:2px solid var(--c);cursor:pointer;padding:0 1px}
.srcs{display:flex;flex-direction:column;gap:4px;font-size:13px} .srcs a{color:var(--ink)}
.foot{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;max-width:110ch}
.views{display:flex;flex-direction:column;gap:14px}

@media (max-width:1180px){ .lg{grid-template-columns:280px minmax(0,1fr)} .lg-right{grid-column:1 / -1} }
@media (max-width:860px){
  .iv,.lg{grid-template-columns:minmax(0,1fr)} .iv-rail{position:static}
  .tabs{margin-left:0;width:100%} .tabs a{flex:1;text-align:center}
  .steps li span{display:none}
  .ladder li{grid-template-columns:20px minmax(0,1fr)} .ladder .what,.ladder .ask{grid-column:2} .g-wrap{height:480px} .legacy{font-size:19px}
  .utt{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:no-preference){ .utt.flash{transition:background .6s} }

.note{background:var(--wash);border-left:3px solid var(--warn);padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.cn{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cn select{border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:6px;padding:6px 8px;font-size:13px;min-width:0;max-width:100%;width:100%}
/* 동의 화면 */
.consent{position:fixed;inset:0;z-index:30;background:color-mix(in srgb, var(--bg) 88%, transparent);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 16px}
.consent .sheet{background:var(--surface);border:1px solid var(--line-2);max-width:720px;width:100%;padding:26px 28px;display:flex;flex-direction:column;gap:14px}
.consent dl{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px 14px;margin:0}
.consent dt{font-weight:700;color:var(--ink)} .consent dd{margin:0}
.consent label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.err{color:var(--bad);font-size:13px}
/* 초대 안내·관리 화면 */
.plain{max-width:760px;margin-inline:auto;padding-block:48px;display:flex;flex-direction:column;gap:16px}
.plain h1{font-family:var(--f-display);font-size:28px;color:var(--ink)}
.adm table{width:100%;border-collapse:collapse;font-size:14px} .adm th,.adm td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.adm th{font-size:12px;color:var(--muted)} .adm input[type=text],.adm input[type=password]{border:1px solid var(--line-2);background:var(--surface);border-radius:6px;padding:7px 9px;min-width:0}
.adm .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .adm code{font-family:var(--f-num);font-size:13px;overflow-wrap:anywhere;user-select:all}
@media (max-width:860px){ .consent dl{grid-template-columns:minmax(0,1fr)} }