/* ceo-brain 전용 규칙 — blueprint.css(디자인 시스템 원본) 다음에 읽는다.
   원칙 그대로: 검정 판 · 흰 선 · 직각 · 라벨은 대문자 모노 · 상태는 색이 아니라 선의 종류로.
   이 사이트의 상태 대응: 게이트 통과 = 반전 / 영상·개별 예외 = 점선 / 발언자 추정 = 회색 외곽 / 긴장 관계 = 겹줄 */

/* ── 공통 ── */
:root:not(#_){ --hair:#2e2e2e }
.sec-head h2{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.005em}
.sec-head h2::before{font-family:var(--mono);font-size:14px;letter-spacing:.06em}
.head h1{font-family:var(--mono)}
.foot{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#aaaaaa;border-top:3px double #fff;padding-top:12px}

/* ── 전략 문서: 한눈에 보기 ── */
.core{gap:18px}
.core-fig{gap:0;width:100%}
.core-fig .cell{flex:1 1 120px;padding:4px 16px;border-left:1px solid var(--hair)}
.core-fig .cell:first-child{border-left:0;padding-left:0}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rank li{display:flex;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--hair);min-width:0}
.rank li:first-child{border-top:0}
.rank .rk,.rank .rk-ev{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:#aaaaaa;flex:0 0 auto}
.rank .rk-ev{width:52px;text-align:right;color:#fff}
.rank .rk-name{flex:1 1 auto;min-width:0;font-size:14px}
.rank .meter{flex:0 0 140px}
.rank li>span:last-child{flex:0 0 auto}  /* blueprint .panel li>span:last-child{flex:1} 덮기 */

/* ── 전략 문서: 원칙 ── */
.prs{display:flex;flex-direction:column;border:1px solid #fff}
.pr{padding:14px 16px 12px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:6px;min-width:0;scroll-margin-top:56px}
.pr:first-child{border-top:0}
.pr:target{box-shadow:inset 0 0 0 1px #fff,inset 0 0 0 3px #000,inset 0 0 0 4px #fff}
.pr.synth{background:repeating-linear-gradient(135deg,transparent 0 7px,#0b0b0b 7px 8px)}
.pr-head{display:flex;align-items:baseline;gap:12px;min-width:0}
.pr-code{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#000;background:#fff;padding:1px 6px;flex:0 0 auto}
.pr.synth .pr-code{background:#000;color:#9a9a9a;border:1px dashed #9a9a9a}
.pr-head h3{font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.45;flex:1 1 auto;min-width:0;letter-spacing:-.005em}
.pr-ev{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:#fff;flex:0 0 auto}
.pr-tags{display:flex;gap:6px;flex-wrap:wrap}
.pr-body{color:#cfcfcf;font-size:14.5px;line-height:1.75;max-width:72ch}
.pr-more>summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#aaaaaa;display:inline-flex;gap:6px;align-items:center;padding:2px 0}
.pr-more>summary::-webkit-details-marker{display:none}
.pr-more>summary::before{content:"▸";transition:transform .15s}
.pr-more[open]>summary::before{transform:rotate(90deg)}
.pr-more>summary:hover{color:#fff}
.pr-more dl{margin:8px 0 2px;display:flex;flex-direction:column;gap:6px;border-left:1px dashed #6a6a6a;padding-left:14px}
.pr-d{display:flex;gap:12px;min-width:0}
.pr-d dt{flex:0 0 64px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:#aaaaaa;padding-top:3px}
.pr-d dd{margin:0;flex:1;min-width:0;font-size:13.5px;color:#cfcfcf;line-height:1.7}

/* ── 전략 문서: 체크리스트 · 긴장 ── */
.rows .row{gap:16px;align-items:baseline}
.rows .q{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#aaaaaa;flex:0 0 auto}
.tension{border:1px solid #fff;box-shadow:inset 0 0 0 3px #000,inset 0 0 0 4px #fff;padding:16px 18px;font-size:14.5px;line-height:1.75;color:#e6e6e6}

@media (max-width:640px){
  .core-fig .cell{flex-basis:45%;border-left:0;padding-left:0}
  .rank .meter{display:none}
  .pr-head{flex-wrap:wrap;gap:6px 10px}
  .pr-d{flex-direction:column;gap:2px}
}

/* ── 그래프 뷰 ── */
body.graph{overflow:hidden;padding:0;font-size:14px}
.graph #app{display:flex;height:100vh;height:100dvh}
.graph #stage{position:relative;overflow:hidden;flex:1 1 auto;min-width:0;border-right:1px solid #fff}
.graph canvas{display:block;cursor:grab;touch-action:none}
.graph #hud{position:absolute;top:16px;left:18px;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:calc(100% - 90px)}
.graph #hud .eyebrow{font-size:10.5px}
.graph #hud h1{font-size:18px;padding-bottom:6px;pointer-events:none}
.graph #stats{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#cfcfcf}
.graph #hud a{pointer-events:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;align-self:flex-start;border:1px solid #fff;padding:3px 8px;text-decoration:none;background:#000}
.graph #hud a:hover{background:#fff;color:#000}
.graph #controls{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:6px}
.graph #controls button{width:34px;height:34px;border:1px solid #fff;background:#000;color:#fff;font-family:var(--mono);font-size:15px;cursor:pointer;border-radius:0}
.graph #controls button:hover{background:#fff;color:#000}
.graph #controls label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#cfcfcf;background:#000;border:1px solid #6a6a6a;padding:5px 6px;cursor:pointer;display:flex;gap:5px;align-items:center;text-transform:uppercase}
.graph #legend{position:absolute;left:18px;bottom:14px;right:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#cfcfcf;display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;pointer-events:none;text-transform:uppercase}
.graph #legend span{display:inline-flex;align-items:center;gap:6px}
.graph #legend svg{flex:0 0 auto}
.graph #legend .hint{color:#8a8a8a;text-transform:none;letter-spacing:.02em}
.graph #panel{flex:0 0 360px;background:#000;padding:16px 18px 40px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.graph #search{width:100%;padding:8px 10px;background:#000;border:1px solid #fff;border-radius:0;color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.graph #search::placeholder{color:#8a8a8a}
.graph #search:focus{outline:none;box-shadow:inset 0 0 0 1px #fff}
.graph .p-hint{font-size:13px;color:#aaaaaa;line-height:1.7}
.graph .d-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#aaaaaa;text-transform:uppercase;margin:16px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--hair)}
.graph #detail h2{font-family:var(--sans);font-size:17px;line-height:1.45;font-weight:600}
.graph #detail .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#cfcfcf}
.graph #detail .rule{font-size:13.5px;color:#e6e6e6;line-height:1.75}
.graph #detail .rule.sm{color:#cfcfcf;font-size:13px;margin:3px 0}
.graph .ev{border-top:1px solid var(--hair);padding:8px 0;font-size:12.5px;display:flex;flex-direction:column;gap:3px}
.graph .ev .claim{color:#e6e6e6;line-height:1.6}
.graph .ev a{color:#cfcfcf;word-break:break-all;font-family:var(--mono);font-size:11px}
.graph .ev a:hover{color:#fff}
.graph .ev .src{color:#8a8a8a;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
.graph .ev.tension{border-top:3px double #fff}
.graph #plist{display:flex;flex-direction:column;border-top:1px solid #fff}
.graph .plist{display:flex;gap:10px;align-items:baseline;font-size:13px;padding:7px 4px;border-bottom:1px solid var(--hair);cursor:pointer;color:#cfcfcf;min-width:0}
.graph .plist:hover{background:#fff;color:#000}
.graph .plist:hover .pc,.graph .plist:hover .pe{color:#000}
.graph .plist .pc{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#8a8a8a;flex:0 0 auto}
.graph .plist .pn{flex:1;min-width:0}
.graph .plist .pe{font-family:var(--mono);font-size:11px;color:#fff;flex:0 0 auto}
@media (max-width:760px){
  .graph #app{flex-direction:column}
  .graph #stage{border-right:0;border-bottom:1px solid #fff;flex:1 1 55%}
  .graph #panel{flex:1 1 45%}
  .graph #legend .hint{display:none}
}