/* =====================================================================
   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:20px; --fs-2xl:28px;
       /* 간격 눈금(4의 배수) · 모서리 3단계 — 모든 화면이 같은 리듬을 쓴다(2026-11-11) */
       --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
       --r-lg:14px; --r-md:12px; --r-sm:10px;
       --ui-gap:16px; --ui-radius:var(--r-lg); --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:var(--sp-4);flex-wrap:wrap;margin:var(--sp-1) 0 var(--sp-5)}
.ph-txt{flex:1;min-width:260px}
/* 눈썹 = 메뉴 묶음 이름(app.js syncEyebrow). 한글에는 대문자 변환 · 넓은 자간을 쓰지 않는다 */
.ph-k{font:700 13px var(--sans);letter-spacing:.02em;text-transform:none;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:var(--sp-6) 0 var(--sp-3)}
.sec-h h2,.sec-h h3{margin:0;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;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:var(--r-lg);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:var(--r-md);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) — 마우스를 올리거나 눌러(모바일) 설명 보기
   사용: <span class="help" tabindex="0" data-tip="설명 문장">?</span> */
.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) — <label class="switch"><input type="checkbox"><i></i><span>문구</span></label> */
.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}}
/* 저장소 기능 안내(2026-11-11) */
.rp-feat{margin:0 0 20px}.rp-feat h2{margin:0 0 12px;font-size:18px;font-weight:800;color:var(--text)}
.rp-feat>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px}
.rp-feat a{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:inherit;text-decoration:none}
.rp-feat a:hover{border-color:var(--brand)}.rp-feat a.dis{opacity:.55;pointer-events:none}
.rp-fi{grid-row:span 2;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line-2);color:var(--brand)}
.rp-feat b{font-size:15.5px;color:var(--text)}.rp-feat em{font-style:normal;font-size:12.5px;color:var(--muted)}
.rp-feat p{grid-column:1/-1;margin:6px 0 0;font-size:14px;line-height:1.65;color:var(--text-2)}
/* 사이드바 단계형 메뉴(2026-11-11): 번호 · 제목 · 한 줄 설명 */
.side-step h6::after{display:none}
.side-step h6{display:flex!important;align-items:flex-start!important;gap:10px!important;margin:14px 10px 6px!important;letter-spacing:.02em!important}
.side-step h6 i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:800;color:#fff;background:color-mix(in srgb,var(--brand) 75%,transparent);margin-top:1px}
.side-step h6 span{display:grid;gap:2px;font-size:13px;font-weight:800;color:#c9cee0}
.side-step h6 small{font-size:11.5px;font-weight:500;color:#7d849b;letter-spacing:0}
.side-fold>summary{list-style:none;cursor:pointer}.side-fold>summary::-webkit-details-marker{display:none}
.side-fold>summary h6{position:relative;padding-right:18px}
.side-fold>summary h6 small{font-size:11px;font-weight:500;color:#6c7288;letter-spacing:0;margin-left:4px}
.side-fold>summary h6::after{display:none}
.side-fold>summary h6::before{content:"▸";position:absolute;right:0;top:0;font-size:11px;color:#7d849b;transition:transform .15s}
.side-fold[open]>summary h6::before{transform:rotate(90deg)}
.side-fold>summary h6{display:block!important;letter-spacing:.02em!important;font-size:13px!important;font-weight:800!important;color:#c9cee0!important;margin:16px 10px 6px!important}
.side-fold>summary h6 small{display:block;margin:2px 0 0!important;font-size:11.5px!important}
.side-fold>summary h6::before{content:"▸"!important;top:2px!important;font-size:12px!important}
.side-fold>summary h6::before{content:""!important;width:7px;height:7px;border-right:1.6px solid #9aa1b8;border-bottom:1.6px solid #9aa1b8;top:5px!important;right:4px!important;transform:rotate(-45deg)}
.side-fold[open]>summary h6::before{transform:rotate(45deg)}

/* ---------- 6. 시각 리듬 통일(2026-11-11): 큰 판 = --r-lg 모서리(v3 에서 16px) · 1px 테두리 · 판 사이 16px */
.w,.pp,.sck,.gd2-sec,.panel-x,.empty-x,.card{border-radius:var(--r-lg)}
.gd2-term,.gal-c,.al li,.sg-flow li,.sg-mg{border-radius:var(--r-md)}
.noc-grid{gap:var(--ui-gap)}
.pp,.sck,.sck-host{margin-bottom:var(--ui-gap)}
.w .wt,.pp-h h2,.sck-ht h2{font-size:17px;font-weight:800;letter-spacing:-.01em}
/* 위쪽 알림(확인할 일) — 노란 점 · 한국어 */
.mtop .statpill{font-family:var(--sans)!important;letter-spacing:0!important;text-transform:none!important;font-weight:700}
.mtop .statpill .led.warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 25%,transparent)}
/* 지금 할 일 카드(공통 부품): 노란 왼쪽 띠 · 제목 18px · 주 버튼 하나 */
.now-x{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin:0 0 var(--ui-gap);padding:var(--sp-4) 20px;
  border-radius:var(--r-lg);border:1px solid var(--line);border-left:4px solid var(--warn);background:color-mix(in srgb,var(--warn) 6%,var(--panel))}
.now-x>div{display:grid;gap:2px;min-width:0;flex:1 1 320px}
.now-k{font-size:13px;font-weight:800;color:var(--warn)}
.now-x b{font-size:18px;font-weight:800;color:var(--text)}
.now-x p{margin:0;font-size:14.5px;color:var(--text-2);line-height:1.6}
.now-x .btn{min-height:44px;font-size:15px}
/* 대시보드 '화면 설정' 접이식 메뉴 */
.vx-menu{position:relative}
.vx-menu>summary{list-style:none;cursor:pointer}.vx-menu>summary::-webkit-details-marker{display:none}
.vx-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;display:grid;min-width:200px;padding:6px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--panel);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.vx-pop button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--text);font:600 14px var(--sans);text-align:left;cursor:pointer}
.vx-pop button:hover{background:var(--bg-2)}
/* 승인 대기: 프로젝트에서 확인할 일 */
.ez-todo{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--sp-3)}
.ez-ti{display:grid;gap:4px;padding:var(--sp-4) 18px;border-radius:var(--r-lg);border:1px solid var(--line);border-left:4px solid var(--warn);background:var(--panel);color:inherit;text-decoration:none}
.ez-ti:hover{border-color:var(--warn)}
.ez-tk{font-size:13px;font-weight:800;color:var(--warn)}.ez-ti b{font-size:17px;color:var(--text)}.ez-ti small{font-size:14px;color:var(--text-2)}
.ez-ti em{font-style:normal;font-weight:800;color:var(--brand);font-size:14.5px;margin-top:4px}
@media (max-width:900px){.now-x .btn{flex:1 1 100%;justify-content:center}}
/* =====================================================================
   SYNAPSE 디자인 시스템 v3 (2026-11-11) — 차분하고 정돈된 화면
   원칙: 중립 검정 배경 + 은은한 높이 차이 · 강조색 하나(파랑) · 넉넉한 여백
         글자 3단계(32 / 20 / 15) · 굵기로 위계 · 12~16px 둥근 모서리 · 1px 옅은 선
         그림자는 떠 있는 것(메뉴 · 창)에만 · 150~200ms 부드러운 전환 · 또렷한 포커스 테두리
   index.html 에서 이 파일을 가장 마지막에 불러온다. 색은 아래 변수만 바꾸면 전체에 반영된다.
   글꼴: 웹 글꼴은 보안 정책(CSP font-src 'self')상 외부에서 받지 않는다 → 기기 글꼴(애플 SD 고딕 Neo 등) 사용
   ===================================================================== */
:root{
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Pretendard Variable","SF Pro Text","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic","Segoe UI",system-ui,sans-serif;
  --fs-1:32px; --fs-2:20px; --fs-3:15px; --fs-cap:13px;
  --r-lg:16px; --r-md:12px; --r-sm:10px;
  --ease:cubic-bezier(.25,.1,.25,1); --dur:.18s;
  --ui-radius:16px;
}
:root[data-theme=tidark]{
  --bg:#0b0b0d; --bg-2:#111114; --panel:#161619; --panel-2:#1c1c20; --line:#26262b; --line-2:#323238;
  --text:#f5f5f7; --text-2:#c7c7cc; --muted:#9a9aa1; --faint:#6e6e75;
  --brand:#2f86ff; --brand-2:#4d97ff; --brand-ink:#ffffff; --brand-soft:#14243d;
  --gold:#9a9aa1; --gold-2:#9a9aa1; --gold-soft:#1c1c20;
  --ok:#32d176; --ok-soft:#10261a; --bad:#ff5a4f; --bad-soft:#2c1514; --warn:#ffa31a; --warn-soft:#2b2010;
  --info:#2f86ff; --info-soft:#14243d; --merged:#a78bfa; --merged-soft:#1f1a33;
  --code-bg:#111114; --shadow:none; --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  --radius:14px; --radius-sm:10px;
  --side:#0e0e10; --side-2:#0e0e10; --side-line:rgba(255,255,255,.07); --side-text:#a1a1a8; --side-hi:#f5f5f7;
  --syn-grad:linear-gradient(var(--brand),var(--brand)); --syn-glow:none;
}
:root[data-theme=ti]{
  --bg:#f5f5f7; --bg-2:#ececf0; --panel:#ffffff; --panel-2:#f7f7f9; --line:#e6e6eb; --line-2:#d2d2d7;
  --text:#1d1d1f; --text-2:#424245; --muted:#6e6e73; --faint:#a1a1a6;
  --brand:#0071e3; --brand-2:#0077ed; --brand-ink:#ffffff; --brand-soft:#e8f1fc;
  --gold:#6e6e73; --gold-2:#6e6e73; --gold-soft:#f2f2f5;
  --ok:#1f9d55; --ok-soft:#e7f6ed; --bad:#d70015; --bad-soft:#fdebec; --warn:#b25e00; --warn-soft:#fdf3e4;
  --info:#0071e3; --info-soft:#e8f1fc; --merged:#6e4bd8; --merged-soft:#f0ecfc;
  --code-bg:#f5f5f7; --shadow:none; --shadow-lg:0 20px 50px rgba(0,0,0,.14);
  --radius:14px; --radius-sm:10px;
  --side:#0e0e10; --side-2:#0e0e10; --side-line:rgba(255,255,255,.07); --side-text:#a1a1a8; --side-hi:#f5f5f7;
  --syn-grad:linear-gradient(var(--brand),var(--brand)); --syn-glow:none;
}
/* 배경: 무늬 · 빛 번짐 없이 한 가지 색 */
:root:is([data-theme=ti],[data-theme=tidark]) body{background:var(--bg);letter-spacing:-.01em;font-feature-settings:normal}
html,body{font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:root:is([data-theme=ti],[data-theme=tidark]) ::selection{background:color-mix(in srgb,var(--brand) 30%,transparent)}

/* 포커스: 키보드로 옮길 때만 또렷하게 */
:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 80%,transparent);outline-offset:2px}

/* ---------- 머리말: 32 / 15 */
.ph{margin:4px 0 28px;gap:20px;align-items:flex-end}
.ph-k{font:600 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:6px}
.ph-t{font-size:var(--fs-1);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.ph-d{margin-top:10px;font-size:var(--fs-3);color:var(--muted);line-height:1.65;max-width:680px}
.sec-h h2,.sec-h h3{font-size:var(--fs-2);font-weight:650;letter-spacing:-.015em}
.sec-h p{color:var(--muted)}
.kicker{letter-spacing:.02em!important;text-transform:none;color:var(--muted)!important;font-weight:600}

/* ---------- 버튼: 주(채움) · 보조(옅은 면) · 글자(배경 없음) */
:root:is([data-theme=ti],[data-theme=tidark]) .btn{min-height:36px;height:auto;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  font-weight:600;font-size:14px;letter-spacing:-.01em;box-shadow:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur)}
:root:is([data-theme=ti],[data-theme=tidark]) .btn:hover{background:color-mix(in srgb,var(--text) 8%,var(--panel));border-color:var(--line-2);filter:none;text-decoration:none}
:root:is([data-theme=ti],[data-theme=tidark]) .btn:active{transform:none;opacity:.86}
:root:is([data-theme=ti],[data-theme=tidark]) .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
:root:is([data-theme=ti],[data-theme=tidark]) .btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2);filter:none}
:root:is([data-theme=ti],[data-theme=tidark]) .btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
:root:is([data-theme=ti],[data-theme=tidark]) .btn.ghost:hover{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
:root:is([data-theme=ti],[data-theme=tidark]) .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
:root:is([data-theme=ti],[data-theme=tidark]) .btn.danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
:root:is([data-theme=ti],[data-theme=tidark]) .btn.sm{min-height:30px;padding:0 12px;font-size:13px;border-radius:9px}
:root:is([data-theme=ti],[data-theme=tidark]) .btn.lg{min-height:46px;padding:0 22px;font-size:15.5px;border-radius:12px}
.btn svg{flex:none}

/* ---------- 입력칸 */
:root:is([data-theme=ti],[data-theme=tidark]) .input{border-radius:var(--r-sm);border-color:var(--line-2);background:var(--panel);transition:border-color var(--dur),box-shadow var(--dur)}
:root:is([data-theme=ti],[data-theme=tidark]) .input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}

/* ---------- 면(카드): 옅은 선 하나 · 그림자 없음 · 16px */
:root:is([data-theme=ti],[data-theme=tidark]) :is(.card,.list){border-radius:var(--r-lg);box-shadow:none;border-color:var(--line);background:var(--panel)}
:root:is([data-theme=ti],[data-theme=tidark]) :is(.card-h,.list-h){background:transparent;font-size:13px}
.panel-x{background:var(--panel);border-color:var(--line)}
.empty-x{border:1px solid var(--line);background:transparent;padding:48px 24px}
.empty-x b{font-size:17px;font-weight:650}
.empty-x p{color:var(--muted)}
.note-x{border-radius:var(--r-md)}

/* ---------- 위쪽 바: 반투명 · 옅은 선 · 조용한 상태 표시 */
.mtop{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid var(--line)}
.statpill{height:30px;padding:0 10px;border:0;background:transparent;font:500 13px var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)}
.mtop a.statpill:hover{color:var(--text)}
.statpill .led{width:7px;height:7px;box-shadow:none!important;animation:none!important}
.statpill .led.warn{background:var(--warn)}
.mtop .statpill:has(.led.warn){color:var(--text)}
.iconbtn{width:34px;height:34px;border:0;border-radius:999px;background:transparent;color:var(--text-2);transition:background var(--dur)}
.iconbtn:hover{background:var(--panel-2);border-color:transparent;color:var(--text)}
.mode-sw{background:color-mix(in srgb,var(--text) 6%,transparent);border:0;border-radius:10px;padding:2px}
.mode-sw button{min-height:28px;border-radius:8px;font:500 13px var(--sans);color:var(--muted);transition:background var(--dur),color var(--dur)}
.mode-sw button.on,.mode-sw button[data-mode=easy].on{background:var(--panel);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.18)}
:root[data-theme=ti] .mode-sw button.on{box-shadow:0 1px 3px rgba(0,0,0,.1)}
.wordmark b{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--side-hi)!important;font-weight:650!important;letter-spacing:.16em!important}
.side-logo svg,.tn-logo svg{filter:none!important}

/* 계정 메뉴 · 떠 있는 메뉴 */
:root:is([data-theme=ti],[data-theme=tidark]) .menu{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px}
.menu a,.menu button{padding:9px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text);transition:background var(--dur)}
.menu a svg{color:var(--muted)}
.menu a:hover,.menu button:hover{background:color-mix(in srgb,var(--text) 7%,transparent);text-decoration:none}
.menu a.on{color:var(--brand)}
.menu hr{margin:6px 4px;border-top-color:var(--line)}
.menu .tn-logout{color:var(--text-2)}

/* ---------- 도움말 물음표 · 말풍선(가장자리에서는 안쪽으로 — topnav.js synTipPlace) */
.help{width:17px;height:17px;font:600 11px var(--sans);color:var(--muted);background:transparent;border:1px solid var(--line-2);transition:color var(--dur),border-color var(--dur)}
.help:hover,.help:focus{color:var(--text);background:transparent;border-color:var(--text-2)}
.help::after{background:#1d1d1f;color:#f5f5f7;border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35);font:400 13px/1.55 var(--sans);padding:10px 13px;max-width:min(300px,calc(100vw - 32px))!important;width:max-content}
.help.tip-l::after{left:-6px;right:auto;transform:translateY(4px)}
.help.tip-l:hover::after,.help.tip-l:focus::after{transform:none}
.help.tip-r::after{left:auto;right:-6px;transform:translateY(4px)}
.help.tip-r:hover::after,.help.tip-r:focus::after{transform:none}
.help.tip-b::after{bottom:auto;top:calc(100% + 10px)}

/* ---------- 작은 표시(칩): 색 면 대신 글자색 위주로 */
.tag{border:0;background:color-mix(in srgb,var(--text) 7%,transparent);border-radius:7px;font-weight:600;letter-spacing:0}
.tag.ok,.tag.warn,.tag.bad{border:0}
.dot-x.ok,.dot-x.warn,.dot-x.bad{box-shadow:none}

/* ---------- 404 */
.nf{max-width:560px;margin:12vh auto 0;text-align:center;padding:0 20px}
.nf-k{display:block;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.08em;margin-bottom:10px}
.nf h1{margin:0 0 12px;font-size:var(--fs-1);font-weight:700;letter-spacing:-.025em;color:var(--text)}
.nf p{margin:0 auto 26px;color:var(--muted);font-size:15px;line-height:1.7}
.nf-a{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* =====================================================================
   대시보드 v3 — 인사말 → 지금 할 일(하나) → 시작 체크리스트 → 진행 상황 → 확인할 일 · 최근 활동
   ===================================================================== */
.noc{background:var(--bg)!important;padding:36px 40px 80px;max-width:1360px;margin:0 auto;--tint:transparent}
.noc.dash{display:flex;flex-direction:column;gap:20px}
.noc.dash>*{margin-top:0;margin-bottom:0}
.noc.dash>.ph{order:-3;margin-bottom:8px}
.noc.dash>.dash-now{order:-2}
.noc.dash>.sck-host{order:-1}
.live-big{height:28px;padding:0 4px;border:0!important;background:transparent;font-size:13px;color:var(--muted)}
.live-big b{font-weight:600;color:var(--text-2)!important}
.live-big.on i{animation:none;background:var(--ok)}
body.easy-on .noc .live-big,body.easy-on #w-tv{display:none}

/* 지금 할 일 */
.dash-now{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:32px 36px;border-radius:20px;border:1px solid var(--line);background:var(--panel)}
.dash-now-t{flex:1 1 420px;min-width:0}
.dash-now-k{display:block;font-size:13px;font-weight:600;color:var(--brand);margin-bottom:8px}
.dash-now h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--text);text-wrap:balance}
.dash-now p{margin:8px 0 0;font-size:15px;line-height:1.7;color:var(--muted);max-width:640px}
.dash-now-a{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dash-now-alt{font-size:14px;font-weight:600;color:var(--text-2)!important;text-decoration:none}
.dash-now-alt::after{content:" ›"}
/* 사람이 볼 일(AI 질문 · 확인할 변경 요청)이 있을 때: 눈썹만 주황으로 — 색 면이나 빛은 쓰지 않는다 */
.dash-now.warn .dash-now-k{color:var(--warn)}
.dash-now-alt:hover{color:var(--text)!important;text-decoration:none}

/* 시작 체크리스트(onboard.js) — 조용한 목록. 체크리스트가 보이는 동안에는 위 '지금 할 일' 카드를 숨기고(onboard.js)
   현재 단계 하나만 강조한다 → 화면 전체에서 강조는 언제나 하나 */
.sck{padding:24px 28px;border:1px solid var(--line)!important;border-radius:var(--r-lg);background:var(--panel);box-shadow:none}
.sck-h{margin-bottom:10px}
.sck-ht h2{font-size:17px;font-weight:650;letter-spacing:-.01em}
.sck-ht p{font-size:14px;color:var(--muted)}
.sck-prog{font-size:13px;font-weight:600;color:var(--muted)}
.sck-prog i{width:80px;height:4px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.sck-prog i em{background:var(--brand)}
.sck-list{gap:0}
.sck-list>li{grid-template-columns:28px minmax(0,1fr) auto;gap:14px;padding:14px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.sck-list>li:first-child{border-top:0}
.sck-list>li.now{background:transparent;border-color:var(--line);box-shadow:none}
.sck-list>li.now .sck-t b{color:var(--text)}
.sck-n{width:22px;height:22px;font-size:0;border:1.5px solid var(--line-2);background:transparent}
li.now .sck-n{background:transparent;border-color:var(--brand)}
li.done .sck-n{background:var(--ok);border-color:var(--ok)}
.sck-n svg{width:13px;height:13px}
.sck-t b{font-size:15px;font-weight:600}
li.done .sck-t b{text-decoration:none;color:var(--muted)}
.sck-t em{border:0;padding:0;font-weight:500;font-size:13px}
.sck-badge{border:0;padding:0;background:none;color:var(--brand);font-size:12.5px;font-weight:600;letter-spacing:0}
.sck-b p{font-size:14px;color:var(--muted);margin-top:2px}
.noc li.done .sck-b p{display:none}
.sck-a{flex-direction:row;align-items:center;gap:6px}
.sck-a .btn{min-height:32px!important;font-size:13px!important}
.sck-foot{font-size:13px}

/* 진행 상황(pipeline.js) */
.pp{padding:24px 28px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);box-shadow:none}
.pp-h{margin-bottom:18px}
.pp-h h2{font-size:var(--fs-2);font-weight:650;letter-spacing:-.015em}
.pp-h p{font-size:14px;color:var(--muted)}
.pp-live{height:auto;padding:0;border:0;font-size:12.5px;font-weight:500}
.pp-live i{animation:none}
.pp-kpi{border:0;border-radius:0;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
.pp-kt{padding:2px 18px}
.pp-kt:first-child{padding-left:0}
@media (max-width:1100px){.pp-kt{padding:12px 16px}.pp-kt:nth-child(3n+1){padding-left:0}}   /* 3칸 배치: 왼쪽 칸만 여백 0 */
@media (max-width:820px){.pp-kt:nth-child(3n+1){padding-left:16px}.pp-kt:nth-child(1),.pp-kt:nth-child(3),.pp-kt:nth-child(4){padding-left:0}}   /* 2칸 + 넓은 칸 배치 */
.pp-kt>span{font-size:13px;font-weight:500}
.pp-kt>b{font-size:26px;font-weight:650}
.pp-kt>small{color:var(--muted)}
.pp-kt.ok::after,.pp-kt.bad::after{display:none}
.pp-src{background:transparent;border:0;padding:0}
.pp-src::after{display:none}
.pp-ai{border:1px solid var(--line);background:transparent;border-radius:var(--r-md)}
.pp-ai.off{border-style:solid}
.pp-ai.on>i{box-shadow:none}
.pp-ai.hot>i,.pp-lane.hot .pp-pd,.pp-lane.hot .pp-stub{animation:none}
.pp-lanes{padding-left:0}
.pp-lanes::before,.pp-stub{display:none}
.pp-lane{border-radius:var(--r-md);border-color:var(--line);background:transparent}
.pp-lane.ghost{border-style:solid}
.pp-pd{box-shadow:none;width:8px;height:8px}
.pp-sl{border:0;padding:0;font-weight:500}
.pp-st{border:0;background:transparent}
.pp-st:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.pp-lab b{font-size:14px;font-weight:600;letter-spacing:0}

/* 위젯(확인이 필요한 일 · 최근 활동 등) */
.noc-grid{gap:20px}
.w{background:var(--panel);border-radius:var(--r-lg);box-shadow:none;border-color:var(--line)}
.w>header{border-bottom:0;padding:20px 24px 6px;min-height:0}
.w .wt{font-size:17px;font-weight:650}
.w .wt::before{display:none}
.w .wb{padding:12px 24px 22px}
.w>header .wm{display:inline;padding:0;border:0;border-radius:0;background:none;font-size:13px;color:var(--muted);cursor:default}   /* studio.css 의 .wm(방식 카드)과 이름이 겹쳐 생기던 상자 없앰 */
.lf .lk{border:0;background:none;padding:0;color:var(--muted);font-weight:500}
.wm-n{font-size:13px;font-weight:600;color:var(--muted)}
.wm-n.warn{color:var(--warn)}.wm-n.bad{color:var(--bad)}.wm-n.ok{color:var(--ok)}
.wm-n.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:2px}
.al li{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0;grid-template-columns:8px minmax(0,1fr) auto}
.al li:first-child{border-top:0}
.al li>i{align-self:center;width:8px;height:8px;border-radius:50%}
.lf li{border-top-color:var(--line)}
.lf .lt{color:var(--faint)}

@media (max-width:900px){
  .noc{padding:22px 16px 60px!important}
  .dash-now{padding:22px 20px;border-radius:16px}
  .dash-now h2{font-size:21px}
  .dash-now-a{width:100%}.dash-now-a .btn{flex:1}
  .ph-t{font-size:26px}
  .pp{padding:18px 16px}
  .sck{padding:18px 16px}
  .sck-list>li{grid-template-columns:24px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* 2026-11-11 QA: 숨어 있는 말풍선(.help::after)이 화면 오른쪽 밖까지 자리를 차지해 휴대폰에서 문서 폭이 넓어지던 문제 — 보일 때만 그린다 */
.help:not(:hover):not(:focus)::after{display:none}
/* 대시보드 AI 연결 칸: Claude · ChatGPT · Grok · Gemini 네 개가 한 줄(좁으면 자동 줄바꿈) */
.pp-ais{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
/* 로그인 화면: 한글 문구에는 고정폭 · 넓은 자간을 쓰지 않는다 */
.ti-login-art .kicker,.ti-login-meta span{font-family:var(--sans);letter-spacing:0;text-transform:none}
/* =====================================================================
   다듬기 v4 (2026-11-12) — 한 틀 · 적은 상자 · 같은 섹션 제목
   ===================================================================== */
/* 대시보드: 프로젝트가 없으면 빈 숫자판 · 빈 위젯을 숨기고 체크리스트 하나만 */
.noc.dash-fresh #pl-host,.noc.dash-fresh .noc-grid{display:none}
.noc .w.w-empty{display:none}
.sck-a .sck-skip{text-decoration:none;font-weight:500;color:var(--muted);margin-left:6px}
.sck-a .sck-skip:hover{color:var(--text)}
.dash-later{margin:4px 0 0;text-align:center;font-size:14px;color:var(--muted)}

/* ---------- 도움말 센터: 상자 띠 대신 밑줄 탭 하나 · 본문 16px · 섹션은 선으로만 나눈다 */
#view > .hc-wrap{max-width:1360px;margin:0 auto;padding:24px 32px 0;display:block}
.hc-h{display:none}
.hc-tabs{display:flex!important;gap:2px;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;overflow-x:auto;scrollbar-width:none}
.hc-tabs::-webkit-scrollbar{display:none}
.hc-tabs a{flex:none;display:flex;align-items:center;min-height:44px;padding:0 14px;margin-bottom:-1px;border-radius:0;border-bottom:2px solid transparent;color:var(--muted)}
.hc-tabs a small{display:none}
.hc-tabs a b{font-size:14.5px;font-weight:600;color:inherit}
.hc-tabs a:hover{background:none;color:var(--text)}
.hc-tabs a.on{background:none;box-shadow:none;border-bottom-color:var(--text);color:var(--text)}
.hc-tabs a.on b{color:var(--text)}
#view:has(> .hc-wrap) .page{font-size:16px;padding-top:36px}
#view:has(> .hc-wrap) .ph-d{font-size:16px}
#view:has(> .hc-wrap) p,#view:has(> .hc-wrap) li,#view:has(> .hc-wrap) td,#view:has(> .hc-wrap) th{font-size:16px;line-height:1.7}
#view:has(> .hc-wrap) small{font-size:14px}
#view:has(> .hc-wrap) .btn{min-height:40px;font-size:14.5px}
@media (max-width:900px){#view > .hc-wrap{padding:12px 16px 0}#view:has(> .hc-wrap) .page{padding-top:24px}}

/* 섹션 제목 하나로: 20px · 650, 위 48px 여백. 섹션 상자(카드)는 없앤다 */
.sg-sec,.gd2-sec{margin:48px 0 0;padding:0;border:0;border-radius:0;background:none}
.sg-sec>h2,.gd2-sec>h2,.gd2-sec .sf-two h2,.gd2-tg>h2{margin:0 0 6px;font-size:var(--fs-2);font-weight:650;letter-spacing:-.015em;color:var(--text)}
.gd2-tg>h2{font-size:17px;margin-bottom:10px}
.sg-d,.gd2-sec>p{margin:0 0 18px;color:var(--muted)}
.gd2-sec h3{font-size:16px;font-weight:650;margin:28px 0 8px}

/* 흐름 목록(처음 시작 · 요청 잘 쓰는 법): 상자 없이 점 + 옅은 선 */
.sg-flow,.gd2-steps{list-style:none;margin:0;padding:0;display:block;border-top:1px solid var(--line)}
.sg-flow li,.gd2-steps li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:16px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.sg-flow i,.gd2-steps i{width:7px;height:7px;border:0;border-radius:50%;background:var(--brand);box-shadow:none;justify-self:start;align-self:start;margin-top:10px}
.sg-later i{background:var(--line-2)}
.sg-flow b,.gd2-steps b{font-size:16px;font-weight:650;color:var(--text)}
.sg-flow b small{font-size:13px!important;font-weight:500;color:var(--brand);margin-left:6px}
.sg-flow p,.gd2-steps p{margin:2px 0 0;color:var(--muted)}
.sg-go{font-size:14.5px;font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.sg-go::after{content:" ›"}
.sg-go:hover{text-decoration:underline}
.sg-menu{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}
.sg-menu li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sg-menu b{font-weight:600}
#sg > .more-x,#sg .sg-sec>.more-x{margin-top:24px}
@media (max-width:700px){.sg-flow li{grid-template-columns:16px minmax(0,1fr)}.sg-flow .sg-go{grid-column:2}.sg-menu li{grid-template-columns:1fr;gap:2px}}

/* 자주 묻는 질문: 한 목록 · 줄로 나눔 */
.gd2-faq{display:block;border-top:1px solid var(--line)}
.gd2-faq details{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.gd2-faq summary{padding:18px 0;min-height:0;font-size:16px!important;font-weight:600}
.gd2-faq summary::after{font-size:20px;font-weight:300}
.gd2-faq .a{padding:0 0 20px;color:var(--text-2);max-width:820px}
.gd2-search{border:1px solid var(--line-2);border-radius:12px;margin-bottom:20px}
.gd2-search .input{font-size:16px;min-height:48px}
.gd2-more{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.gd2-more b{font-size:16px;font-weight:650}
.gd2-term dt b{font-size:16px;font-weight:650}
.gd2-toc a{min-height:36px!important;font-weight:600!important;font-size:14px}

/* ---------- 설정(보안 · 접근 토큰 · 사용자 · 워크스페이스): 밑줄 탭 + 섹션 제목 + 조용한 면 하나 */
#view > .set-wrap{max-width:920px}
.page.set,#view:has(> .set-wrap) .page{max-width:920px;margin:0 auto;padding-top:36px}
.set-sec{margin:0 0 36px}
.set-sec>h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:var(--fs-2);font-weight:650;letter-spacing:-.015em}
.set-state{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted)}
.set-state.on{color:var(--ok)}
.set-box{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.set-p{margin:0 0 16px;color:var(--text-2);max-width:620px}
.set-form{max-width:420px}
.set-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.set-inline .input{flex:1 1 160px;max-width:220px}
.set-steps{margin:0 0 16px;padding-left:18px;display:grid;gap:6px;color:var(--text-2)}
.set-list{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.set-row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid var(--line)}
.set-row:first-child{border-top:0}
.set-main{flex:1;min-width:0;display:grid;gap:2px}
.set-main b{font-size:15px;font-weight:600}
.set-sub{font-size:13px;color:var(--text-2)}
.set-main small{font-size:13px;color:var(--muted)}
.page.set>.more-x{margin-top:8px}
/* ---------- SYNAPSE 소개(/about): 네모 카드 대신 위쪽 옅은 선 하나로 나눈 칸 · 번호 없음 · 섹션 사이 넉넉하게 */
.page.ab{gap:72px}
.ab-k,.ab-sh>span{font-size:13px;font-weight:600;letter-spacing:0;color:var(--muted)}
.ab-sh h2{font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.02em}
.ab-facts li,.ab-flow li,.ab-grid>div{padding:18px 0 0;border:0;border-top:1px solid var(--line-2);border-radius:0;background:none}
.ab-facts{gap:24px;margin-top:16px}
.ab-flow,.ab-grid{gap:28px}
.ab-flow li::before{display:none}
.ab-flow b,.ab-grid b,.ab-facts b{font-size:16px;font-weight:650}
.ab-flow p,.ab-grid p{color:var(--muted)}
/* ---------- 로그인(공간 · 2단계 인증): 첫 화면과 같은 얼굴 — 검은 배경 · 안드로이드 사진 · 흰 둥근 버튼 */
.ti-login.lg2{background:#000;grid-template-columns:1.15fr 1fr}
.lg2 .ti-login-art{background:#000!important;padding:40px 56px 64px;justify-content:space-between}
/* 사진은 가장자리를 마스크로 녹여 검은 배경에 이음매 없이 섞는다 */
.lg2 .ti-login-art::before{content:"";position:absolute;inset:0;z-index:0;background:url(/static/brand/portraits/hero.jpg) no-repeat right center/auto 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 65%),linear-gradient(0deg,transparent 0,#000 40%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 30%,#000 65%),linear-gradient(0deg,transparent 0,#000 40%);mask-composite:intersect;opacity:.9}
.lg2 .ti-login-art::after{display:none}
.lg2-brand{display:flex;align-items:center;gap:10px}
.lg2-brand svg{width:26px;height:26px}
.lg2-brand b{font-size:14px;font-weight:600;letter-spacing:.32em;color:#f5f5f7}
.lg2 .syn-tag{color:#9ab8ff!important;letter-spacing:0!important;font-weight:600}
.lg2 .ti-login-art h1{font-size:44px;line-height:1.2;font-weight:700;letter-spacing:-.035em;margin:12px 0 16px;color:#f5f5f7}
.lg2 .ti-login-art h1 span{background:linear-gradient(90deg,#fff,#9ab8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg2 .ti-login-art p{color:#a1a1a6;font-size:16px}
.lg2 .ti-login-form h2{font-weight:700}
.lg2 .ti-login-form .input{background:#111114;border-color:#2a2a30}
.lg2 #lbtn{background:#f5f5f7!important;border-color:#f5f5f7!important;color:#000!important;border-radius:999px!important}
.lg2 #lbtn:hover{background:#fff!important}
.lg2-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px!important}
.lg2-links a{color:var(--text-2)}
@media (max-width:900px){.lg2 .ti-login-art::before{background-position:right top}.lg2 .ti-login-art{min-height:220px!important;padding:24px 20px!important}.lg2 .ti-login-art h1{font-size:28px!important}}

/* 따라 하며 만들기: 준비물은 상자 대신 줄 목록 */
.tu-meta-line{margin:-6px 0 20px;font-size:14px!important;color:var(--muted)}
.tu-check{gap:0;border-top:1px solid var(--line)}
.tu-check li{padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
@media (max-width:900px){.page.set{padding-top:24px}.set-box{padding:18px 16px}.set-inline .input{max-width:none}}

/* ---------- 의견 보내기 · 알림(feedback.js) · 이번 달 AI 팀이 한 일(pipeline.js monthCard) */
.fb-modal .modal{max-width:480px}
.fb-lead{margin:0 0 16px;font-size:14px;color:var(--muted);line-height:1.6}
.fb-kinds{display:inline-flex;gap:0;margin-bottom:12px;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--bg-2)}
.fb-kinds button{border:0;background:none;color:var(--text-2);font:inherit;font-size:14px;font-weight:600;padding:6px 16px;border-radius:999px;cursor:pointer}
.fb-kinds button.on{background:var(--panel);color:var(--text);box-shadow:0 0 0 1px var(--line)}
.fb-modal textarea{width:100%;min-height:120px;resize:vertical}
.fb-note{margin:8px 0 0;font-size:12.5px;color:var(--muted);word-break:break-all}
.fb-acts{display:inline-flex;gap:10px;flex-wrap:wrap}
.toast.fb-toast{display:flex;align-items:center;gap:14px;max-width:440px;padding:12px 12px 12px 16px;background:var(--panel);color:var(--text);border:1px solid var(--line)}
.fb-toast>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fb-toast b{font-size:14px;font-weight:650}.fb-toast span{font-size:13px;color:var(--muted)}
.fb-toast a{font-size:13.5px;font-weight:600;color:var(--brand);white-space:nowrap;text-decoration:none}
.fb-toast button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px;padding:4px}
.mr{padding:22px 28px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.mr-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.mr-h h2{margin:0;font-size:15px;font-weight:600;color:var(--text-2)}
.mr-sw{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.mr-sw:hover{color:var(--text)}
.mr-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.mr-c{display:flex;flex-direction:column;gap:4px;min-width:0}
.mr-c b{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.mr-c span{font-size:13px;color:var(--muted)}
@media (max-width:900px){.mr{padding:18px 16px}.mr-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.mr-c b{font-size:22px}
  #toasts{left:12px;right:12px;bottom:12px}.toast.fb-toast{max-width:none}}
#mr-host:empty{display:none}
[data-noti][hidden],[data-fb][hidden]{display:none!important}

/* =====================================================================
   프로젝트 만들기(2026-11-12) — 홈 맨 위 · /requirements 같은 부품(auto.js createHero)
   제목 한 줄 · 부제 한 줄 · 큰 입력칸 · AI 시작 버튼 넷 · 조용한 대체 링크 하나
   ===================================================================== */
.noc.dash>.ch-host{order:-4}
.noc.dash>.sck-host:has(.sck.all){display:none}
.ch{max-width:820px;margin:0 auto;padding:48px 0 4px;text-align:center}
.ch-t{margin:0;font-size:clamp(30px,4.4vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--text);text-wrap:balance}
.ch-d{margin:12px 0 30px;font-size:17px;line-height:1.6;color:var(--muted)}
.ch-box{padding:16px 16px 14px;border:1px solid var(--line);border-radius:24px;background:var(--panel);text-align:left;transition:border-color .15s}
.ch-box:focus-within{border-color:var(--line-2)}
.ch-in{display:block;width:100%;min-height:86px;padding:6px 8px;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:17px;line-height:1.6;color:var(--text)}
.ch-in::placeholder{color:var(--faint)}
.ch-ais{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.ch-ai{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:border-color .15s,background .15s}
.ch-ai:hover{border-color:var(--line-2);background:var(--panel-2)}
.ch-ai:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ch-ai>svg,.ch-ai>img{flex:none;width:22px;height:22px}
.ch-ai>span{overflow:hidden;text-overflow:ellipsis}
.ch-sent{margin:16px auto 0;max-width:640px;font-size:14px;line-height:1.6;color:var(--text-2)}
.ch-sent b{font-weight:600;color:var(--text)}
.ch-fb{margin:18px 0 0;padding:4px;border:0;background:none;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;cursor:pointer}
.ch-fb:hover{color:var(--text)}
.ch-show{margin-top:44px}
.ch-show:empty{display:none}
.ch-page{max-width:1240px;margin:0 auto;padding:24px 28px 100px}
.dash-now.compact{padding:20px 26px;border-radius:16px}
.dash-now.compact h2{font-size:18px}
.dash-now.compact p{margin-top:4px;font-size:14px}
.dash-now.compact .btn.lg{height:40px;font-size:14px}
.ai-free{margin:20px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.ai-free a{font-weight:600;white-space:nowrap}
.wz-2c{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;margin-top:14px}
.wz-2c .field{margin:0}
.wz-2c .field>span{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}
@media (max-width:640px){
  .ch{padding:22px 0 0}
  .ch-d{margin-bottom:22px;font-size:15px}
  .ch-box{border-radius:20px;padding:12px 12px 12px}
  .ch-in{font-size:16px;min-height:76px}
  .ch-ais{grid-template-columns:1fr 1fr}
  .ch-page{padding:16px 16px 80px}
  .wz-2c{grid-template-columns:1fr}
}
.noc.dash>.ch-host+.ph{margin-top:28px}
.noc.dash>.ch-host+.ph .ph-t{font-size:24px}
@media (max-width:640px){.noc.dash>.ch-host+.ph{margin-top:16px}.noc.dash>.ch-host+.ph .ph-t{font-size:21px}}

/* 만들기(2026-11-13): 입력칸 없음 — AI 버튼 · 3단계 흐름 · 대화 예시 */
.ch .ch-ais{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto;max-width:960px}
.ch .ch-ai{height:52px;padding:0 22px;font-size:15px;flex:0 1 auto}
.ch .ch-ai.lead{background:var(--text);color:var(--bg);border-color:var(--text)}
.ch .ch-ai.lead:hover{opacity:.9;background:var(--text)}
.ch .ch-ai small{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:rgba(127,127,127,.22);color:inherit}
.ch-pre{margin:14px 0 0;font-size:13px;color:var(--muted)}
.ch-pre b{font-weight:600;color:var(--text-2)}
.ch-pre-x{border:0;background:none;padding:2px 4px;font:inherit;font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer}
.ch-flow{list-style:none;margin:32px auto 0;padding:0;display:flex;justify-content:center;gap:28px;flex-wrap:wrap;text-align:left}
.ch-flow li{display:flex;align-items:baseline;gap:8px;min-width:0}
.ch-fn{font-size:12px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.ch-flow b{font-size:14px;font-weight:500;color:var(--text-2)}
.ch-flow small{font-size:13px;line-height:1.55;color:var(--muted)}
.ch-acts{margin-top:22px;display:flex;justify-content:center;align-items:center;gap:10px;color:var(--faint);font-size:13px}
.ch-acts .ch-fb{margin:0}
.ch-ex-b{padding:4px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--brand);cursor:pointer}
.ch-ex-b:hover{text-decoration:underline;text-underline-offset:4px}
.ch-ex{margin:20px auto 0;max-width:980px;text-align:left}
@media (max-width:640px){
  .ch .ch-ais{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ch .ch-ai{height:48px;padding:0 12px;font-size:14px}
  .ch .ch-ai.lead{grid-column:1/-1}
  .ch-flow{flex-direction:column;align-items:flex-start;gap:8px;margin:24px auto 0;width:max-content;max-width:100%}
}