/* =====================================================================
SYNAPSE UI 기본틀 v2 — 모든 화면 공통(가장 마지막에 불러와 앞의 스타일을 정리)
원칙: 1) 글자는 12px 미만 금지 · 본문 15px 2) 흐린 글씨 대비를 올려 읽히게
3) 공통 부품(.ph 머리말 · .help 도움말 · .switch 토글 · .kpi · .empty-x)
4) 900px 이하 = 모바일: 왼쪽 메뉴는 서랍(☰), 여러 칸 배치는 한 칸으로
===================================================================== */
/* ---------- 1. 읽기 좋은 대비·글자 크기 */
:root[data-theme=tidark]{ --muted:#a3abc4; --faint:#7d87a8; --text-2:#cfd5e6; }
:root[data-theme=ti]{ --muted:#565e7a; --faint:#858ca4; --text-2:#2f3654; }
:root{ --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:28px;
--ui-gap:18px; --ui-radius:16px; --ui-pad:20px; }
html,body{font-size:15px;line-height:1.62}
small,.small{font-size:max(12px,.86em)}
.hint,.field small,.dark-modal .hint{font-size:13px;line-height:1.6;color:var(--muted)}
.kicker{font-size:12px!important;letter-spacing:.14em!important;font-weight:700}
.side-sec h6{font-size:12px!important;letter-spacing:.08em!important;color:#8790ad!important;font-family:var(--sans)!important;font-weight:700!important;text-transform:none!important}
.side a.nav{font-size:14.5px!important;padding:9px 12px!important}
.wordmark small{font-size:12px!important;letter-spacing:.06em!important;color:#8f9ac0!important}
.me-card small,.sys-mini,.tag,.badge,.sc-chip,.n,.tm-st,.prov-tag,.wm,.kl,.lk,.sev em{font-size:max(12px,1em)!important}
table th{font-size:12.5px} table td{font-size:14px}
/* ---------- 2. 페이지 머리말(.ph) — 모든 화면 맨 위에 같은 모양 */
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 0 22px}
.ph-txt{flex:1;min-width:260px}
.ph-k{font:700 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2,var(--gold));margin-bottom:6px}
.ph-t{margin:0;font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--text)}
.ph-d{margin:8px 0 0;font-size:15px;color:var(--text-2);max-width:760px;line-height:1.65}
.ph-a{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* 섹션 제목 */
.sec-h{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.sec-h h2,.sec-h h3{margin:0;font-size:var(--fs-lg);font-weight:750;color:var(--text)}
.sec-h p{margin:0;color:var(--muted);font-size:13.5px}
.sec-h .grow{flex:1}
/* 공통 패널 */
.panel-x{background:linear-gradient(180deg,rgba(255,255,255,.018),transparent),var(--panel);border:1px solid var(--line);border-radius:var(--ui-radius);padding:var(--ui-pad)}
.panel-x>h3{margin:0 0 12px;font-size:16px;font-weight:750}
.grid-x{display:grid;gap:var(--ui-gap)}
.grid-x.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-x.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-x.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 숫자 카드(KPI) */
.kpi-x{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi-x .k-l{font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi-x .k-v{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.kpi-x .k-v small{font-size:14px;color:var(--muted);font-weight:600;margin-left:3px}
.kpi-x .k-s{font-size:13px;color:var(--text-2)}
.kpi-x.ok .k-v{color:var(--ok)} .kpi-x.warn .k-v{color:var(--warn)} .kpi-x.bad .k-v{color:var(--bad)}
/* 빈 화면 안내 */
.empty-x{text-align:center;padding:42px 20px;border:1px dashed var(--line-2);border-radius:var(--ui-radius);color:var(--text-2)}
.empty-x b{display:block;font-size:17px;color:var(--text);margin-bottom:6px}
.empty-x p{margin:0 auto 16px;max-width:520px;font-size:14.5px}
/* 알림 띠(설명·주의) */
.note-x{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);font-size:14px;line-height:1.65;color:var(--text-2)}
.note-x b{color:var(--text)}
.note-x.info{border-color:color-mix(in srgb,var(--info) 40%,transparent);background:color-mix(in srgb,var(--info) 8%,var(--panel))}
.note-x.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 8%,var(--panel))}
.note-x.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 8%,var(--panel))}
.note-x .ico{flex:none;width:22px;height:22px;display:grid;place-items:center}
/* ---------- 3. 도움말 물음표(.help) — 마우스를 올리거나 눌러(모바일) 설명 보기
사용: ? */
.help{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;flex:none;
font:800 11.5px var(--sans);color:var(--text-2);background:color-mix(in srgb,var(--text) 10%,transparent);border:1px solid var(--line-2);cursor:help;vertical-align:middle}
.help:hover,.help:focus{color:#fff;background:var(--brand);border-color:var(--brand);outline:none}
.help::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:300px;
white-space:normal;text-align:left;padding:10px 12px;border-radius:10px;background:#0b1022;color:#eef1fb;border:1px solid rgba(120,140,255,.35);
box-shadow:0 14px 40px rgba(0,0,0,.45);font:500 13px/1.55 var(--sans);letter-spacing:0;opacity:0;pointer-events:none;transition:.15s;z-index:90}
.help:hover::after,.help:focus::after{opacity:1;transform:translateX(-50%) translateY(0)}
.help.r::after{left:auto;right:-6px;transform:none} .help.r:hover::after,.help.r:focus::after{transform:none}
.help.b::after{bottom:auto;top:calc(100% + 10px)}
/* ---------- 4. 켜기/끄기 스위치(.switch) — */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-weight:650;font-size:14px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{position:relative;width:44px;height:24px;border-radius:24px;background:color-mix(in srgb,var(--text) 18%,transparent);border:1px solid var(--line-2);transition:.18s;flex:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:.18s}
.switch input:checked+i{background:var(--syn-grad,var(--brand));border-color:transparent}
.switch input:checked+i::after{left:22px}
.switch input:focus-visible+i{outline:2px solid var(--brand);outline-offset:2px}
.switch input:disabled+i{opacity:.5}
/* 상태 점 */
.dot-x{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
.dot-x.ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.dot-x.warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.dot-x.bad{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 22%,transparent)}
.dot-x.live{background:var(--ok);animation:dotx 1.6s infinite}
@keyframes dotx{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
/* 단계 표시(1→2→3) */
.steps-x{display:flex;gap:8px;flex-wrap:wrap;counter-reset:sx}
.steps-x>*{counter-increment:sx;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:13.5px;color:var(--text-2)}
.steps-x>*::before{content:counter(sx);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:800 11.5px var(--sans);background:var(--panel-2);border:1px solid var(--line-2)}
.steps-x>.on{color:var(--text);border-color:var(--brand)} .steps-x>.on::before{background:var(--brand);color:#fff;border-color:var(--brand)}
/* 버튼 크기 통일 */
.btn{min-height:36px;font-weight:650}
.btn.sm{min-height:30px}
.btn.lg{min-height:46px;font-size:15.5px;padding:0 20px}
/* 모달 안 글씨 */
.modal .mb,.modal .modal-b{font-size:14.5px}
/* ---------- 5. 모바일 · 태블릿(900px 이하) */
.hamb{display:none}
.side-scrim{display:none}
@media (max-width:900px){
.app{grid-template-columns:1fr!important}
aside.side{position:fixed!important;left:0;top:0;bottom:0;width:min(84vw,300px);height:100dvh!important;z-index:70;transform:translateX(-102%);
transition:transform .22s ease;box-shadow:0 0 60px rgba(0,0,0,.6);padding-bottom:env(safe-area-inset-bottom)}
body.side-open aside.side{transform:none}
.side-scrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(3,6,16,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s}
body.side-open .side-scrim{opacity:1;pointer-events:auto}
.hamb{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;padding:0 10px;border-radius:10px;
border:1px solid var(--line-2);background:var(--panel);cursor:pointer;flex:none}
.hamb i{display:block;height:2px;border-radius:2px;background:var(--text)}
.mtop{padding:0 12px!important;gap:10px!important;padding-top:env(safe-area-inset-top)!important}
.mtop .clock,.mtop .statpill,.mtop .live-ind{display:none!important}
.mtop .path{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.page,.page.wide,.page.narrow,.op,.noc,.studio,.us,.council-page{padding-left:14px!important;padding-right:14px!important;max-width:100%!important}
.ph-t{font-size:23px} .ph-d{font-size:14.5px}
.grid-x.c2,.grid-x.c3,.grid-x.c4{grid-template-columns:1fr}
/* 기존 화면들의 여러 칸 배치를 한 칸으로 */
.pj-grid,.mt-grid,.council-panels,.wz2,.st-hero,.td-head,.ops-grid,.noc-grid,.us-row,.us-cards,.op-grid,.dec-grid,.repo-grid,.issue-grid,.run-grid,.layout-2{grid-template-columns:1fr!important}
.us-kpi,.st-hero-k,.pj-k,.kpis,.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
pre{max-width:100%;overflow-x:auto}
.modal{width:100%!important;max-width:100%!important;max-height:92dvh;border-radius:18px 18px 0 0!important;margin-top:auto}
.modal-bg{align-items:flex-end!important;padding:0!important}
.tm-cards,.prov-grid,.tpls,.pick,.modes{grid-template-columns:1fr!important}
.help::after{max-width:min(78vw,300px)}
input,select,textarea{font-size:16px!important} /* iOS 확대 방지 */
}
@media (max-width:520px){
.us-kpi,.st-hero-k,.pj-k,.kpis,.kpi-row{grid-template-columns:1fr!important}
.ph-a{width:100%} .ph-a .btn{flex:1}
}
/* 상단 바: 좁아지면 덜 중요한 것부터 숨겨 '쉬운 화면 | 전문가 화면' 전환이 줄바꿈되지 않게 */
.mtop{flex-wrap:nowrap}
.mtop .mode-sw{flex:none}
@media (max-width:1280px){ .mtop .clock{display:none!important} }
@media (max-width:1100px){ .mtop .statpill{display:none!important} }
.top-logout{margin-left:6px}
@media (max-width:600px){.top-logout{padding:4px 9px!important;font-size:12px!important;min-height:0}.mtop .path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* ---------- 가이드 개편(2026-11-10): 역할 카드 · 지시문 복사 */
.gd-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.gd-roles>div{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel)}
.gd-roles b{font-size:16px}.gd-roles span{margin-left:6px;font:600 12px var(--mono,monospace);color:var(--muted)}
.gd-roles p{margin:6px 0;font-size:13.5px;color:var(--text-2);line-height:1.6}.gd-roles small{color:var(--brand)}
.gd-say{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2,rgba(0,0,0,.2))}
.gd-say code{flex:1;white-space:normal;font-size:13px;line-height:1.55;background:none;color:var(--text-2)}
@media (max-width:900px){.gd-roles{grid-template-columns:1fr}}
/* ---------- 따라 하며 만들기(2026-11-10) — 어르신도 읽기 편하게: 본문 17px · 큰 버튼 · 높은 대비 */
.lr{max-width:1040px;font-size:17px;line-height:1.75}
.lr-hero{padding:28px 30px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(77,163,255,.10),transparent 60%),var(--panel);margin:6px 0 26px}
.lr-hero h1{margin:6px 0 10px;font-size:30px;font-weight:800;letter-spacing:-.02em}
.lr-hero p{margin:0;color:var(--text-2);font-size:17px}
.lr-path{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0}
.lr-path li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:30px;border:1px solid var(--line);font-size:15px;color:var(--muted)}
.lr-path li span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--line);color:var(--text);font-weight:800;font-size:14px}
.lr-path li.on{border-color:var(--brand);color:var(--text)}.lr-path li.on span{background:var(--brand);color:#fff}
.lr-path li.done span{background:var(--ok,#3ecf8e);color:#fff}
.lr-sec{margin:0 0 30px}
.lr-sec h2{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:800;margin:0 0 10px}
.lr-sec h2>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-size:17px}
.lr-d{margin:0 0 14px;color:var(--text-2)}
.lr-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lr-pick{text-align:left;display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:18px;border:2px solid var(--line);background:var(--panel);color:var(--text);font:inherit;cursor:pointer}
.lr-pick:hover{border-color:var(--line-2)}.lr-pick.on{border-color:var(--brand);background:var(--brand-soft)}
.lr-pick i{font-style:normal;font-size:34px}.lr-pick b{font-size:19px}.lr-pick p{margin:0;font-size:15.5px;color:var(--text-2);line-height:1.6}.lr-pick small{font-size:14px;color:var(--muted)}
.lr-parts{display:grid;gap:12px}
.lr-part{display:grid;grid-template-columns:180px 1fr;gap:6px 18px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.lr-ph{display:flex;align-items:center;gap:8px;grid-row:span 2}.lr-ph em{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--brand-soft);color:var(--brand);font-weight:800}
.lr-ph b{font-size:17px}
.lr-part pre{margin:0;white-space:pre-wrap;font:600 17px/1.7 var(--sans);color:var(--text)}
.lr-part p{margin:0;font-size:15px;color:var(--muted);line-height:1.6}
.lr-list{margin:0;padding-left:22px;display:grid;gap:8px}
.lr .btn.lg{font-size:17px;padding:13px 22px;border-radius:14px}
.lr-mine{padding:22px 24px;border-radius:18px;border:2px dashed var(--brand);background:var(--brand-soft)}
.lr-ideas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.lr-ideas>div{padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.lr-ideas b{font-size:17.5px}.lr-ideas p{margin:4px 0;font-size:16px}.lr-ideas small{font-size:14.5px;color:var(--muted);line-height:1.6;display:block}
.lr-rules{display:grid;gap:12px}
.lr-rule{padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.lr-rule>b{font-size:17.5px}
.lr-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.lr-cmp p{margin:0;padding:10px 14px;border-radius:12px;font-size:16px;line-height:1.6}
.lr-cmp em{display:block;font-style:normal;font-size:13px;font-weight:800;margin-bottom:2px}
.lr-cmp .bad{background:rgba(240,120,90,.08);border:1px solid rgba(240,120,90,.3)}.lr-cmp .bad em{color:#f08a6a}
.lr-cmp .good{background:rgba(62,207,142,.08);border:1px solid rgba(62,207,142,.35)}.lr-cmp .good em{color:#3ecf8e}
/* 요구사항 도우미 창 */
.lr-modal .modal{width:min(1000px,96vw)}
.lr-lead{margin:0 0 14px;font-size:16px;color:var(--text-2)}
.lr-b{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}
.lr-qs{display:grid;gap:12px}
.lr-q{display:grid;gap:6px}.lr-q b{font-size:16px}.lr-q .input{font-size:16px;padding:11px 13px}
.lr-chips{display:flex;gap:8px;flex-wrap:wrap}
.lr-chips button{font:600 15px var(--sans);padding:9px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
.lr-chips button.on{border-color:var(--brand);background:var(--brand-soft)}
.lr-out{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--bg-2,rgba(0,0,0,.2))}
.lr-out pre{flex:1;margin:0;min-height:200px;white-space:pre-wrap;font:16px/1.7 var(--sans);color:var(--text)}
.wz-help{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--brand-soft);font-size:14px}
.gd-learn{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px}.gd-learn span{font-size:14px;color:var(--text-2)}
@media (max-width:900px){.lr-picks,.lr-b,.lr-cmp{grid-template-columns:1fr}.lr-part{grid-template-columns:1fr}.lr-ph{grid-row:auto}.lr-hero h1{font-size:25px}}
/* 휴대폰 위쪽 줄: 화면 이름이 잘리지 않게(2026-11-10 잘림 점검) */
@media (max-width:600px){
.mtop{gap:6px!important}.mtop .grow{display:none}
.mtop .path{flex:1 1 0;min-width:72px;font-size:14px}
.mode-sw{padding:2px}.mode-sw button{padding:0 8px;min-height:28px;font-size:12px}
}
@media (max-width:420px){ .mtop .help{display:none} }
/* 숨은 말풍선 · 넓은 요소가 가로 스크롤을 만들지 않게 */
html{overflow-x:clip}
.help::after{max-width:min(300px,calc(100vw - 32px))!important;white-space:normal}
.mtop .hamb{flex:none}.mtop .hamb i{width:100%}
/* 쉬운 화면: 개발자용 상태 표시 숨김 · 한국어 상태(2026-11-10 초보자 검토) */
body.easy-on .mtop .clock,body.easy-on .mtop .live-ind,body.easy-on #sys-mini{display:none!important}
.mtop a.statpill{text-decoration:none;color:inherit}
body.easy-on .mtop .statpill{font-family:var(--sans)!important;letter-spacing:0!important;text-transform:none!important}
/* 로그인(공간 주소): 휴대폰에서는 소개 영역을 줄이고 로그인 칸을 바로 보이게 */
@media (max-width:760px){
.ti-login{display:flex!important;flex-direction:column}
.ti-login-art{min-height:0!important;padding:28px 20px 8px!important}
.ti-login-art .seal-xl,.ti-login-art p,.ti-login-art .ti-login-meta{display:none!important}
.ti-login-art h1{font-size:26px!important;line-height:1.3!important;margin:6px 0 0!important}
.ti-login-form{padding:20px!important}
}
.side a.repo-chip{display:block!important;height:auto!important;min-height:0!important;text-decoration:none;overflow:hidden}.side .repo-chip b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side .repo-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans)!important}
@media (max-width:600px){.mtop .path>*:not(:last-child),.mtop .path .sep{display:none}}