:root{
    /* ── 기관 스타일 (Navy/Teal) · 라이트 ── */
    --ink:#14202e; --ink2:#46586a; --ink3:#8295a6; --line:#dce4ec; --line2:#c6d2dd;
    --paper:#eef2f6; --card:#ffffff; --cardhead:#f6f9fb;
    --blue:#0d8a8a; --blueD:#0a6f6f; --blueBg:#e2f4f4;
    --ok:#1b9e7a; --okBg:#e5f5ef; --amber:#d4880f; --amberBg:#fbf0db; --red:#e23d4b;
    --navy:#0f2a4a; --navInk:#eaf1f8; --navMut:#9fb6cb; --navLine:rgba(255,255,255,.10);
    --navActive:#2bd1d1; --navActiveBg:rgba(43,209,209,.12);
    --shadow:0 1px 2px rgba(16,40,64,.04), 0 4px 16px -10px rgba(16,40,64,.12);
  }
  html[data-theme="dark"]{
    /* ── 애플 다크 (검정 배경 · iOS 블루) ── */
    --ink:#f5f5f7; --ink2:#d1d1d6; --ink3:#8e8e93; --line:#2c2c2e; --line2:#3a3a3c;
    --paper:#000000; --card:#1c1c1e; --cardhead:#2c2c2e;
    --blue:#0a84ff; --blueD:#409cff; --blueBg:rgba(10,132,255,.18);
    --ok:#30d158; --okBg:rgba(48,209,88,.16); --amber:#ff9f0a; --amberBg:#2a2009; --red:#ff453a;
    --navy:#1c1c1e; --navInk:#f5f5f7; --navMut:#8e8e93; --navLine:#2c2c2e;
    --navActive:#0a84ff; --navActiveBg:rgba(10,132,255,.20);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.7);
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:'Toss Product Sans','Pretendard','Apple SD Gothic Neo','Malgun Gothic',-apple-system,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;letter-spacing:-0.02em;padding:0;}
  .wrap{max-width:520px;margin:0 auto;background:var(--paper);min-height:100vh;padding-bottom:40px}
  button{font-family:inherit;letter-spacing:-0.02em}

  /* ── 앱 레이아웃: 사이드바 + 메인 ── */
  .app{display:flex;min-height:100vh}
  .sidebar{width:248px;flex-shrink:0;background:var(--card);border-right:1px solid var(--line);
    display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30}
  .sbhead{display:flex;align-items:center;gap:11px;padding:22px 20px 16px}
  .sbhead .logo{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--blue)}
  .sbtitle{font-size:17px;font-weight:800;letter-spacing:-0.03em;margin-top:1px}
  .sbhead .kicker{font-size:11px;color:var(--ink3);font-weight:600}
  .tabs{display:flex;flex-direction:column;gap:3px;padding:6px 12px;flex:1}
  .tab{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:11px;font-size:14.5px;font-weight:700;
    color:var(--ink2);background:transparent;border:none;border-radius:12px;padding:11px 14px;cursor:pointer;
    text-align:left;width:100%;transition:background .12s}
  .tab:hover{background:var(--paper)}
  .tab.on{background:var(--blueBg);color:var(--blue)}
  .tab .tlabel2{font-size:14px;font-weight:700;grid-column:2;line-height:1.25}
  .tab .tdesc{font-size:11px;color:var(--ink3);font-weight:500;grid-column:2;line-height:1.2}
  .tab.on .tdesc{color:var(--blue);opacity:.7}
  .tab svg{grid-row:1 / span 2;grid-column:1;width:21px;height:21px;color:var(--ink3)}
  .tab.on svg{color:var(--blue)}
  /* 대항목/소항목 트리 메뉴 */
  .navgrp{margin-bottom:1px}
  .navhd{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;cursor:pointer;font-family:inherit;
    padding:12px 12px;border-radius:11px;font-size:14px;font-weight:800;color:var(--ink2)}
  .navhd:hover{background:var(--paper)}
  .navgrp.act>.navhd{color:var(--blue)}
  .navhd .ngico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none}
  .navhd .ngico svg{width:20px;height:20px}
  .navhd .ngttl{flex:1;text-align:left;letter-spacing:-0.02em}
  .navhd .ngchev{font-size:11px;color:var(--ink3)}
  .navsub{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px 4px}
  .navgrp:not(.open) .navsub{display:none}
  .sbfoot{display:flex;flex-direction:column;gap:7px;padding:14px 14px 18px;border-top:1px solid var(--line)}
  .sbfoot .dlbtn{display:flex;align-items:center;gap:8px;justify-content:flex-start;padding:11px 13px;
    font-size:12.5px;border-radius:11px;background:var(--paper);color:var(--ink2);width:100%}
  .sboverlay{display:none}

  /* 위쪽 대항목(목차) 탭바 */
  .topnav{display:flex;gap:4px;align-items:center;padding:10px 16px;background:var(--card);
    border-bottom:1px solid var(--line);overflow-x:auto}
  .topnav::-webkit-scrollbar{height:6px}
  .topgrp{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:none;background:transparent;
    font-family:inherit;font-size:14px;font-weight:700;color:var(--ink2);padding:9px 14px;border-radius:10px;cursor:pointer}
  .topgrp .tgico{width:18px;height:18px;display:inline-flex;color:var(--ink3)}
  .topgrp .tgico svg{width:18px;height:18px}
  .topgrp:hover{background:var(--paper)}
  .topgrp.on{background:var(--blueBg);color:var(--blue)}
  .topgrp.on .tgico{color:var(--blue)}
  /* 왼쪽 바: 대항목 라벨(크게) + 소항목(작게) */
  .navsec{display:flex;align-items:center;gap:9px;padding:16px 14px 11px;margin-bottom:6px;border-bottom:1px solid var(--navLine)}
  .navsec .nsico{width:21px;height:21px;color:var(--navActive)}
  .navsec .nsico svg{width:21px;height:21px}
  .navsec .nstitle{font-size:16.5px;font-weight:800;color:#fff;letter-spacing:-0.02em}
  /* 이모지 대체 라인 아이콘 */
  .eico{display:inline-flex;align-items:center;justify-content:center;width:1.15em;height:1.15em;vertical-align:-0.2em}
  .eico svg{width:100%;height:100%}
  /* 학습용 현장 영상 캡처 사진 */
  .learnpix{margin:2px 0 4px}
  .lpcap{font-size:12px;font-weight:700;color:var(--ink3);margin-bottom:8px}
  .lpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
  .lpic{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
  .lpic img{display:block;width:100%;height:160px;object-fit:cover;background:var(--paper);cursor:zoom-in}
  .lpic figcaption{font-size:12px;font-weight:600;color:var(--ink2);padding:8px 10px;text-align:center}
  img.zoomable{cursor:zoom-in}
  /* 공사 매뉴얼 목차(TOC) */
  .sitetoc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:14px}
  .tocttl{font-size:13px;font-weight:800;color:var(--ink2);margin-bottom:8px}
  .tocgrp{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:7px 0}
  .tocglabel{font-size:12px;font-weight:700;color:var(--ink3);flex:0 0 104px}
  .tocchips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto}
  .tocchip{font-size:12.5px;font-weight:600;color:var(--blue);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer;line-height:1.2}
  .tocchip:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
  @media(max-width:560px){.tocglabel{flex-basis:100%}}
  /* 사진 파일이 없으면(404) 그 사진 영역을 통째로 숨김 */
  .learnpix:has(.lpgrid:empty){display:none}
  /* 사진 확대 보기(라이트박스) */
  .lb{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.9);display:none;
    flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px}
  .lb.show{display:flex}
  .lb img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.6)}
  .lbclose{position:fixed;top:16px;right:16px;font-family:inherit;font-size:14px;font-weight:700;color:#fff;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:10px 18px;cursor:pointer}
  .lbclose:hover{background:rgba(255,255,255,.3)}
  .lbcap{color:#fff;font-size:13.5px;font-weight:600;text-align:center;max-width:90vw}

  /* 메인 */
  .main{flex:1;min-width:0;max-width:1100px;margin:0 auto;padding:0 0 48px;width:100%}
  header{display:flex;align-items:center;gap:14px;padding:26px 28px 16px}
  .menubtn{display:none;font-size:22px;background:none;border:none;color:var(--ink);cursor:pointer;padding:4px 8px}
  .htitle{flex:1}
  .htitle .kicker{font-size:12px;color:var(--ink3);font-weight:600}
  h1{font-size:21px;font-weight:800;margin:1px 0 0;letter-spacing:-0.03em}
  .gauge{text-align:right}
  .gnum{font-size:28px;font-weight:800;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
  .gnum small{font-size:14px;font-weight:700}
  .glabel{font-size:11.5px;color:var(--ink3);margin-top:3px;font-weight:600}

  /* 프로젝트 바 */
  .projbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 28px 12px;padding:14px 16px;
    background:var(--card);border-radius:18px}
  .projbar .plabel{font-size:12px;font-weight:700;color:var(--ink2)}
  .projsel{flex:1;min-width:150px;font-size:14.5px;font-weight:700;color:var(--ink);padding:11px 13px;
    border:none;border-radius:12px;background:var(--paper);font-family:inherit;cursor:pointer;letter-spacing:-0.02em}
  .projsel:focus{outline:2px solid var(--blue)}
  .pbtn{font-size:12.5px;font-weight:700;border-radius:11px;padding:9px 13px;cursor:pointer;border:none;
    background:var(--paper);color:var(--ink2)}
  .pbtn:active{transform:scale(.96)}
  .pbtn.primary{background:var(--blueBg);color:var(--blue)}
  .pbtn.danger{color:var(--red)}
  .projmeta{font-size:11.5px;color:var(--ink3);width:100%;margin-top:2px}

  /* 검색 */
  .searchbar{display:flex;gap:8px;margin:0 28px 14px}
  .searchin{flex:1;font-size:14.5px;padding:13px 16px;border:none;border-radius:14px;
    background:var(--card);font-family:inherit;color:var(--ink);letter-spacing:-0.02em}
  .searchin::placeholder{color:var(--ink3)}
  .searchin:focus{outline:2px solid var(--blue)}
  .searchbtn{font-size:14px;font-weight:700;color:#fff;background:var(--blue);border:none;
    border-radius:14px;padding:13px 18px;cursor:pointer;white-space:nowrap}
  .searchbtn:active{transform:scale(.97)}

  .ptrack{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin:0 28px 22px}
  .pfill{height:100%;background:var(--blue);border-radius:99px;transition:width .45s cubic-bezier(.4,0,.2,1)}

  /* 본문 컨테이너 */
  #view{padding:0 28px}
  #searchResult{padding:0 28px}

  /* 단계 요약 칩 (2열 그리드) */
  .chiprow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
  .chip{display:flex;align-items:center;gap:10px;padding:16px 15px;background:var(--card);border:none;
    border-radius:16px;cursor:pointer;transition:transform .12s;text-align:left}
  .chip:active{transform:scale(.97)}
  .chip.done{background:var(--okBg)}
  .chip .code{font-size:12px;font-weight:800;color:var(--ink3);background:var(--paper);border-radius:8px;
    width:26px;height:26px;display:grid;place-items:center;flex-shrink:0}
  .chip.done .code{background:#fff;color:var(--ok)}
  .chip .ct{font-size:14px;font-weight:700;flex:1;color:var(--ink)}
  .chip .cc{font-size:12.5px;font-weight:700;color:var(--ink3);font-variant-numeric:tabular-nums}
  .chip.done .cc{color:var(--ok)}

  .grid{display:flex;flex-direction:column;gap:28px}
  .slabel{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:14px;letter-spacing:-0.03em}
  .slabel .rule{display:none}

  /* 카드(섹션) */
  .phase{background:var(--card);border:none;border-radius:18px;margin-bottom:12px;overflow:hidden}
  .phase.hit{box-shadow:0 0 0 2px var(--amber)}
  .phead{width:100%;display:flex;align-items:center;gap:13px;padding:18px 18px;background:transparent;border:none;cursor:pointer;text-align:left}
  .phead:active{background:var(--paper)}
  .pcode{font-size:15px;font-weight:800;color:var(--blue);width:24px;flex-shrink:0}
  .ptw{flex:1;display:flex;flex-direction:column;gap:2px}
  .ptitle{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.03em}
  .psub{font-size:12.5px;color:var(--ink3)}
  .pmini{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink3);font-variant-numeric:tabular-nums}
  .mtrack{width:40px;height:5px;background:var(--line);border-radius:99px;overflow:hidden}
  .mfill{height:100%;background:var(--ok);border-radius:99px;transition:width .35s}
  .chev{color:var(--ink3);font-size:13px}
  ul.items{list-style:none;margin:0;padding:0 8px 8px}
  .item{width:100%;display:flex;align-items:flex-start;gap:12px;padding:13px 11px;background:transparent;
    border:none;border-radius:12px;cursor:pointer;text-align:left}
  .item:active{background:var(--paper)}
  .item.markhit{background:var(--amberBg)}
  .ibox{width:22px;height:22px;flex-shrink:0;margin-top:0}
  .itext{font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:500}
  .item.on .itext{color:var(--ink3);text-decoration:line-through}

  .riskbox{display:flex;flex-direction:column;gap:10px}
  .risk{display:flex;gap:13px;background:var(--card);border:none;border-radius:16px;padding:16px 17px}
  .rbar{width:4px;border-radius:99px;background:var(--amber);flex-shrink:0}
  .rt{font-size:14.5px;font-weight:700;margin-bottom:4px;color:var(--ink)}
  .rd{font-size:13px;line-height:1.55;color:var(--ink2)}

  .formbox{display:flex;flex-direction:column;gap:12px}
  .form{background:var(--card);border:none;border-radius:16px;overflow:hidden}
  .fhead{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;gap:8px}
  .ftitle{font-size:14.5px;font-weight:700;color:var(--ink)}
  .fbtns{display:flex;gap:6px}
  .copybtn,.exbtn,.dlbtn{font-size:12.5px;font-weight:700;color:var(--blue);background:var(--blueBg);
    border:none;border-radius:10px;padding:7px 12px;cursor:pointer}
  .copybtn:active,.dlbtn:active,.exbtn:active{transform:scale(.95)}
  pre{margin:0;padding:0 16px 16px;font-size:12.8px;line-height:1.7;color:var(--ink2);
    white-space:pre-wrap;font-family:'Pretendard',monospace}
  .docrow{margin-top:2px}
  .docrow.hit{background:var(--amberBg);border-radius:12px}
  .dhead{display:flex;align-items:flex-start;gap:10px;padding:14px 11px}
  .dname{font-size:14.5px;font-weight:700;color:var(--ink)}
  .dname.on{color:var(--ink3);text-decoration:line-through}
  .dto{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--blue);margin-top:4px}
  .dtip{font-size:12.5px;color:var(--ink3);margin-top:4px;line-height:1.5}
  .exbtn{color:var(--ink2);background:var(--paper)}
  .finline{padding:0 11px 14px}

  .cintro{font-size:13.5px;color:var(--ink2);line-height:1.6;margin-bottom:20px;padding:16px 17px;
    background:var(--blueBg);border-radius:16px}
  .ctablewrap{overflow-x:auto;border-radius:16px;background:var(--card)}
  table.calc{width:100%;border-collapse:collapse;min-width:880px}
  table.calc th{font-size:11.5px;font-weight:700;color:var(--ink3);background:var(--card);padding:14px 8px;
    border-bottom:1px solid var(--line);white-space:nowrap}
  table.calc td{padding:9px 8px;border-bottom:1px solid var(--paper);text-align:center;font-size:13px}
  table.calc select,table.calc input{font-size:13px;padding:9px 10px;border:1.5px solid var(--line);
    border-radius:10px;font-family:inherit;color:var(--ink);letter-spacing:-0.02em}
  table.calc input{width:72px;text-align:center;background:var(--card)}
  table.calc input.layer{width:92px;text-align:left}
  table.calc input.price{width:88px;text-align:right}
  table.calc select{background:var(--card)}
  table.calc input:focus,table.calc select:focus{outline:none;border-color:var(--blue)}
  .ccell{font-weight:700;color:var(--ink2);background:var(--paper);font-variant-numeric:tabular-nums}
  .toncell{font-weight:800;color:var(--blue);background:var(--blueBg);font-variant-numeric:tabular-nums;font-size:13.5px}
  .costcell{font-weight:800;color:var(--ok);background:var(--paper);font-variant-numeric:tabular-nums;font-size:13.5px;white-space:nowrap}
  .tcard.cost .tnum{color:var(--ok)}
  .delbtn{width:34px;height:34px;border:none;border-radius:10px;background:var(--paper);
    color:var(--ink3);cursor:pointer;display:grid;place-items:center;font-size:14px}
  .delbtn:active{background:#ffe5e8;color:var(--red)}
  .actbtns{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 26px}
  .addbtn{font-size:14px;font-weight:700;color:var(--blue);background:var(--blueBg);border:none;
    border-radius:14px;padding:14px 18px;cursor:pointer;flex:1;min-width:140px}
  .addbtn:active{transform:scale(.98)}
  .xlsxbtn{font-size:14px;font-weight:700;color:#fff;background:var(--ok);border:none;
    border-radius:14px;padding:14px 20px;cursor:pointer;flex:1;min-width:140px}
  .xlsxbtn:active{transform:scale(.98)}
  .totalrow{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
  .tcard{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:var(--card);border:none;border-radius:16px}
  .tcard.main{background:var(--blue)}
  .tlabel{font-size:13.5px;font-weight:700;color:var(--ink2)}
  .tcard.main .tlabel{color:#cfe2ff}
  .tnum{font-size:21px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
  .tcard.main .tnum{color:#fff}
  .tnum small{font-size:13px;font-weight:700}
  .cnote{font-size:12.8px;color:var(--ink2);line-height:1.6;padding:16px 17px;background:var(--card);border-radius:16px}
  /* 톤 계산 개념·예시 펼침 박스 */
  .cexp{margin-bottom:20px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
  .cexp>summary{cursor:pointer;padding:14px 17px;font-weight:700;font-size:14px;color:var(--ink);list-style:none;display:flex;align-items:center;gap:8px}
  .cexp>summary::-webkit-details-marker{display:none}
  .cexp>summary::after{content:"펼치기 ▾";margin-left:auto;font-size:12px;font-weight:600;color:var(--ink3)}
  .cexp[open]>summary{border-bottom:1px solid var(--line)}
  .cexp[open]>summary::after{content:"접기 ▴"}
  .cexpbody{padding:16px 17px;font-size:13.3px;line-height:1.75;color:var(--ink2)}
  .cexpbody b{color:var(--ink)}
  .cexpbody .formula{background:var(--blueBg);color:var(--ink);border-radius:12px;padding:13px 15px;margin:10px 0;font-weight:600;line-height:1.7}
  .cexpbody .ex{background:var(--paper);border-radius:12px;padding:12px 15px;margin:12px 0;font-variant-numeric:tabular-nums;line-height:1.8}
  .cexpbody .warn{background:#fff4d6;color:#7a5f00;border-radius:12px;padding:12px 15px;margin-top:12px;line-height:1.7}
  .cexpbody .warn b{color:#6a5200}
  /* 여유분 포함 준비 권장 */
  .prepbox{margin-top:16px;background:var(--blueBg);border:1px solid var(--blue);border-radius:16px;padding:15px 17px;font-size:13.3px;line-height:1.7;color:var(--ink)}
  .prepbox .ph{font-weight:800;color:var(--blue);margin-bottom:8px;display:flex;align-items:center;gap:7px}
  .prepbox .pr{font-variant-numeric:tabular-nums;margin:3px 0}
  .prepbox .pr b{color:var(--blue);font-size:15px}
  .prepbox .pcaution{margin-top:9px;font-size:12.5px;color:var(--ink2)}
  .rmcbox{margin-top:14px;background:var(--okBg);border:1px solid var(--ok);border-radius:16px;padding:15px 17px;font-size:13.3px;line-height:1.7;color:var(--ink)}
  .rmcbox .ph{font-weight:800;color:var(--ok);margin-bottom:8px;display:flex;align-items:center;gap:7px}
  .rmcbox .pr{font-variant-numeric:tabular-nums;margin:3px 0}
  .rmcbox .pr b{color:var(--ok)}
  .rmcbox .pcaution{margin-top:6px;font-size:12.5px;color:var(--ink2)}
  .ascbox{margin-top:14px;background:var(--amberBg);border:1px solid var(--amber);border-radius:16px;padding:15px 17px;font-size:13.3px;line-height:1.7;color:var(--ink)}
  .ascbox .ph{font-weight:800;color:#b9791a;margin-bottom:8px;display:flex;align-items:center;gap:7px}
  .ascbox .pr{font-variant-numeric:tabular-nums;margin:3px 0}
  .ascbox .pr b{color:#b9791a}
  .ascbox .pcaution{margin-top:6px;font-size:12.5px;color:var(--ink2)}
  /* 참고표(관 규격·소재 등) */
  .refwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 18px;border:1px solid var(--line);border-radius:14px}
  table.reftable{width:100%;border-collapse:collapse;min-width:420px;font-size:13px}
  table.reftable th{font-size:12px;font-weight:700;color:#fff;background:var(--blue);padding:11px 12px;text-align:left;white-space:nowrap}
  table.reftable td{padding:10px 12px;border-top:1px solid var(--line);color:var(--ink2);vertical-align:top}
  table.reftable td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
  table.reftable tr.hl td{background:var(--blueBg)}
  table.reftable tr.hl td:first-child{color:var(--blue)}
  table.reftable .tag{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
  .tag.water{background:#e3f0fb;color:#0f6fa8}.tag.sewer{background:#e7f8f1;color:#1c8c6b}
  /* 안전관리(Si SAFER) 탭 */
  .saflink{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;background:var(--blue);color:#fff;font-weight:800;font-size:15px;padding:16px;border-radius:16px;text-decoration:none;margin-bottom:20px}
  .saflink:active{transform:scale(.99)}
  .safcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
  .safcol{border:1px solid var(--line);border-radius:16px;padding:15px 17px;background:var(--card)}
  .safcol h4{margin:0 0 9px;font-size:14px;font-weight:800}
  .safcol.here h4{color:var(--blue)} .safcol.there h4{color:#b9791a}
  .safcol ul{margin:0;padding-left:18px;font-size:13px;line-height:1.85;color:var(--ink2)}
  .safcard{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:10px;background:var(--card)}
  .safcard .sc1{flex:1;min-width:0}
  .safcard .scname{font-weight:700;color:var(--ink);font-size:14px}
  .safcard .scpath{font-size:12px;color:var(--ink3);margin-top:3px}
  .safcard .scdesc{font-size:12.8px;color:var(--ink2);margin-top:5px;line-height:1.55}
  .safcard a.scgo{flex:none;align-self:center;background:var(--paper);border:1px solid var(--line);color:var(--blue);font-weight:700;font-size:12.5px;border-radius:10px;padding:9px 13px;text-decoration:none;white-space:nowrap}
  .safcard a.scgo:active{transform:scale(.97)}
  @media(max-width:560px){.safcols{grid-template-columns:1fr}}
  /* 공사 안내문 작성 */
  .nform{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
  .nfield{display:flex;flex-direction:column;gap:5px}
  .nfield.wide{grid-column:1 / -1}
  .nfield>span{font-size:12.5px;font-weight:700;color:var(--ink2)}
  .nfield input,.nfield select,.nfield textarea{font-family:inherit;font-size:14px;padding:11px 12px;border:1.5px solid var(--line);border-radius:11px;color:var(--ink);background:var(--card);width:100%;box-sizing:border-box}
  .nfield textarea{resize:vertical;line-height:1.6}
  .nfield input:focus,.nfield select:focus,.nfield textarea:focus{outline:none;border-color:var(--blue)}
  @media(max-width:560px){.nform{grid-template-columns:1fr}}
  #noticePreview{margin-top:4px}
  .noticedoc{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 34px 34px;max-width:720px;margin:0 auto;color:#111;font-family:'Malgun Gothic','맑은 고딕',sans-serif}
  .noticedoc .ndemblem{position:absolute;right:30px;top:26px;width:48px;height:auto}
  .noticedoc .ndchar{position:absolute;right:26px;top:90px;width:78px;height:auto}
  .noticedoc .ndtitle{text-align:center;font-size:26px;font-weight:800;letter-spacing:4px;color:#111;margin:0 0 22px}
  .noticedoc .ndtitle .ndttype{font-size:22px}
  .noticedoc .ndlist{margin:0 90px 14px 6px}
  .noticedoc .ndrow{display:flex;align-items:baseline;font-size:15px;line-height:2.0;color:#111}
  .noticedoc .ndlabel{flex:none;width:130px;font-weight:700;white-space:nowrap}
  .noticedoc .ndval{font-weight:700}
  .noticedoc .ndtel{margin-left:26px;color:#111}
  .noticedoc .ndexpl{text-align:center;font-weight:800;color:#e7352c;font-size:15px;margin:14px 0 10px}
  .noticedoc .ndbody{font-size:14px;line-height:1.95;color:#111}
  .noticedoc .ndbody p{margin:7px 0}
  .noticedoc .ndbody .r{color:#e7352c;font-weight:700}
  .noticedoc .nmapwrap{margin-top:16px;text-align:center}
  .noticedoc .nmapinner{position:relative;display:inline-block;max-width:100%}
  .noticedoc .nmap{max-width:100%;border:1px solid #777;display:block}
  .noticedoc .nlegendbox{position:absolute;right:0;bottom:0;background:#fff;border:1px solid #333;font-size:12px;text-align:center;min-width:120px}
  .noticedoc .nlegendbox .lgt{font-weight:700;border-bottom:1px solid #333;padding:2px 6px}
  .noticedoc .nlegendbox .lgrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 8px}
  .noticedoc .nlegendbox .lgtypetx{font-weight:600}
  .lgsw{display:inline-block;flex:none}
  .lgsw.lgline{width:34px;border-top:4px solid #e7352c}
  .lgsw.lghatch{width:30px;height:14px;background:repeating-linear-gradient(45deg,#111 0 3px,#fff 3px 6px);border:1px solid #333}
  .lgsw.lgcirc{width:16px;height:16px;border-radius:50%;border:2.5px solid #e7352c}
  .lgsw.lgmh{width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #1f2d3d}
  .lgsw.lgpin{width:12px;height:12px;border-radius:50% 50% 50% 0;background:#2f6fed;transform:rotate(-45deg)}
  .lgsw.lgarr{width:30px;border-top:3px solid #e7352c}
  /* 지도 위 핀·라벨 아이콘 */
  .ncpin{width:18px;height:18px;background:#2f6fed;border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 1px 3px rgba(0,0,0,.4)}
  .nclbl{background:#2f6fed;color:#fff;font-size:12px;font-weight:700;padding:3px 7px;border-radius:5px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.3)}
  .nctools .addbtn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
  /* 위치도 편집기 */
  .ncsearch{display:flex;gap:8px;margin-bottom:10px}
  .ncsearch input{flex:1;min-width:0;font-family:inherit;font-size:14px;padding:11px 12px;border:1.5px solid var(--line);border-radius:11px;color:var(--ink)}
  .ncsearch input:focus{outline:none;border-color:var(--blue)}
  .ncmap{height:380px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#e8eef2;z-index:0}
  .nctools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
  .nccanvaswrap{position:relative;border:2px dashed var(--line2);border-radius:12px;background:var(--paper);padding:6px;margin-bottom:6px;text-align:center}
  .nccanvaswrap.drag{border-color:var(--blue);background:var(--blueBg)}
  #ncCanvas{max-width:100%;height:auto;border-radius:8px;background:#fff;display:inline-block;vertical-align:top}
  .ncdrop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:13.5px;font-weight:600;pointer-events:none;text-align:center;padding:20px}
  /* 공통 버튼 (정갈한 스타일) */
  .btnp{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;background:var(--blue);color:#fff;border:none;border-radius:12px;padding:13px 16px}
  .btnp:active{transform:scale(.98)}
  .btng{display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;background:var(--card);color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:9px 13px}
  .btng:active{transform:scale(.98)}
  /* 현장 사진 */
  .phcardbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
  .phpick{width:100%;box-sizing:border-box;margin-bottom:10px;font-size:15.5px;padding:15px}
  .phrow2{display:flex;gap:8px;align-items:center}
  .fld{font-family:inherit;font-size:14px;padding:11px 12px;border:1.5px solid var(--line);border-radius:11px;color:var(--ink);background:var(--card);min-width:0}
  .phrow2 #phDate{flex:0 0 auto;width:140px}
  .phrow2 #phMemo{flex:1}
  .phrow2 #phUpload{flex:0 0 auto}
  .phactions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .phstatus{font-size:12.5px;color:var(--ink2);margin-top:8px}
  .phstatus:empty{display:none}
  /* 관로 표기 해석기 */
  .rdwrap{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
  .rdbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .rdout{margin-top:12px}
  .rdcalc{margin-top:10px;background:var(--blueBg);border-radius:12px;padding:11px 14px;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
  .rdsum{margin-top:10px;background:var(--okBg);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.7;color:var(--ink)}
  /* 사고경위서 */
  .accdoc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px;max-width:720px;margin:0 auto;color:#111}
  .accdoc h2{text-align:center;font-size:23px;font-weight:800;letter-spacing:6px;margin:0 0 20px;color:#0a2540}
  .accdoc .acctab{width:100%;border-collapse:collapse;margin-bottom:12px;font-size:13px}
  .accdoc .acctab th,.accdoc .acctab td{border:1px solid #9aa3ad;padding:7px 9px;text-align:left;vertical-align:top}
  .accdoc .acctab th{background:#eef2f6;width:96px;white-space:nowrap;font-weight:700;color:#222}
  .accdoc .acch{font-weight:700;font-size:14px;margin:12px 0 5px;color:#0a2540}
  .accdoc .accbox{border:1px solid #9aa3ad;min-height:46px;padding:9px 11px;font-size:13px;line-height:1.7;white-space:pre-wrap;color:#222}
  .accdoc .accstmt{text-align:center;font-weight:700;margin:20px 0 8px;font-size:14px}
  .accdoc .accsign{text-align:center;font-size:13px;line-height:1.9;color:#222}
  .phgal{display:flex;flex-direction:column;gap:18px}
  .phloading{padding:30px;text-align:center;color:var(--ink3);font-size:13.5px}
  .phusage{margin:2px 0 12px}
  .pubar{height:8px;background:var(--paper);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
  .pufill{height:100%;border-radius:99px;transition:width .3s}
  .putx{font-size:12px;color:var(--ink2);margin-top:5px}
  .phgh{font-size:14px;color:var(--ink2);margin-bottom:8px;display:flex;align-items:center;gap:10px}
  .phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .phcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
  .phcard img{width:100%;height:130px;object-fit:cover;display:block;background:var(--paper)}
  .phcard video{width:100%;height:130px;object-fit:cover;display:block;background:#000}
  .schbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;margin-bottom:14px}
  .schhead{display:flex;align-items:center;gap:6px;margin:12px 4px 4px}
  .schhead:first-child{margin-top:4px}
  .schhin{flex:1;border:none;background:transparent;font-weight:800;font-size:15px;color:var(--ink);padding:6px 4px;border-bottom:2px solid var(--line)}
  .schhin:focus{outline:none;border-bottom-color:var(--blue)}
  .schrow{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:10px}
  .schrow+.schrow{border-top:1px solid var(--line)}
  .schrow.on .schin{color:var(--ink3);text-decoration:line-through}
  .schchk{flex:none;background:none;border:none;padding:2px;cursor:pointer;line-height:0}
  .schchk .ibox{width:24px;height:24px}
  .schin{flex:1;min-width:0;border:none;background:transparent;font-size:14.5px;color:var(--ink);padding:6px 4px;border-radius:6px}
  .schin:focus{outline:none;background:var(--paper)}
  .schdel{flex:none;background:none;border:none;color:var(--ink3);font-size:15px;cursor:pointer;padding:4px 8px;border-radius:6px}
  .schdel:hover{background:var(--paper);color:var(--red)}
  .schadd{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
  .phmeta{font-size:11.5px;color:var(--ink2);padding:6px 8px 2px;line-height:1.4;word-break:break-all}
  .phbtns{display:flex;justify-content:space-between;padding:4px 8px 8px;font-size:12px}
  .phbtns a{color:var(--blue);font-weight:700;text-decoration:none}
  .phbtns button{border:none;background:none;color:var(--red);font-weight:700;cursor:pointer;font-family:inherit;font-size:12px}
  /* 공개 공유 뷰 */
  #shareView{position:fixed;inset:0;z-index:9998;background:var(--paper);overflow:auto}
  .shwrap{max-width:900px;margin:0 auto;padding:20px 16px 40px}
  .shhd{font-size:18px;font-weight:800;color:var(--ink);padding:8px 0 16px}
  .shfoot{margin-top:24px;text-align:center;font-size:12px;color:var(--ink3)}
  #shareView .phgroup{margin-bottom:18px}
  .micon{font-size:18px;width:26px;text-align:center}
  .mbody{padding:4px 18px 18px;display:flex;flex-direction:column;gap:16px}
  .mblock{display:flex;flex-direction:column;gap:5px;padding:14px 16px;background:var(--paper);border-radius:13px}
  .mblock.hit{background:var(--amberBg)}
  .mh{font-size:14.5px;font-weight:700;color:var(--ink)}
  .mp{font-size:13.5px;line-height:1.65;color:var(--ink2);white-space:pre-line}
  .chkbadge{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:var(--amber);
    border-radius:99px;padding:2px 8px;margin-left:6px;vertical-align:middle;letter-spacing:0}
  .chkbox{margin-top:8px;background:var(--amberBg);border:1px solid var(--amber);border-radius:11px;padding:11px 12px}
  .chkq{font-size:12.5px;line-height:1.55;color:var(--ink);margin-bottom:8px}
  .chkq b{color:var(--amber)}
  .chknote{width:100%;box-sizing:border-box;font-family:inherit;font-size:13.5px;line-height:1.5;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 11px;resize:vertical}
  .chknote:focus{outline:none;border-color:var(--blue)}
  .chkdone{font-size:11.5px;font-weight:700;color:var(--ok);margin-top:6px}
  .diawrap{background:var(--paper);border-radius:14px;padding:12px;margin-bottom:8px;overflow-x:auto}
  .diagram{width:100%;height:auto;display:block;min-width:480px}
  .keygrid{display:flex;flex-direction:column;gap:12px}
  .keycard{background:var(--card);border:none;border-radius:16px;overflow:hidden}
  .keycat{font-size:13px;font-weight:800;color:#fff;background:var(--blue);padding:13px 17px}
  .keytable{width:100%;border-collapse:collapse}
  .keytable td{padding:11px 14px;border-bottom:1px solid var(--paper);font-size:13.5px;vertical-align:top}
  .keytable tr:last-child td{border-bottom:none}
  .kk{font-family:'Pretendard',monospace;font-weight:800;color:var(--blue);background:var(--blueBg);border-radius:8px;
    white-space:nowrap;width:1%;text-align:center}
  .kd{color:var(--ink2);font-weight:500}
  .vcard{display:flex;flex-direction:column;gap:7px;padding:18px 20px;background:var(--card);border:none;border-radius:16px}
  .vlabel{font-size:12px;font-weight:700;color:var(--ink3)}
  .vname{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3}
  .vtel{font-size:15px;font-weight:700;color:var(--blue);text-decoration:none;margin-top:2px}
  .vtel:active{opacity:.6}
  .vsub{font-size:12px;color:var(--ink3)}
  .unitrow{font-size:14px;color:var(--ink2);font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .unitrow input{font-size:14px;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);font-family:inherit;text-align:center;color:var(--ink)}
  .unitrow input:focus{outline:none;border-color:var(--blue)}

  /* 검색 결과 */
  .srbox{background:var(--card);border-radius:18px;margin-bottom:20px;overflow:hidden}
  .srhead{display:flex;justify-content:space-between;align-items:center;padding:16px 18px}
  .srtitle{font-size:14px;font-weight:800;color:var(--ink)}
  .srclose{font-size:13px;color:var(--ink3);background:none;border:none;cursor:pointer;font-weight:600}
  .srlist{max-height:360px;overflow-y:auto}
  .sritem{display:flex;align-items:flex-start;gap:11px;width:100%;padding:14px 18px;border:none;border-top:1px solid var(--paper);
    background:transparent;text-align:left;cursor:pointer}
  .sritem:active{background:var(--paper)}
  .srtag{font-size:10.5px;font-weight:800;color:#fff;background:var(--blue);border-radius:7px;padding:4px 8px;white-space:nowrap;margin-top:1px}
  .srtag.doc{background:var(--ok)}.srtag.term{background:var(--amber)}.srtag.manual{background:#8a5cf6}.srtag.site{background:var(--red)}.srtag.cad{background:#12b5b5}.srtag.mat{background:#a67c3d}
  .srtext{flex:1;min-width:0}
  .srt1{font-size:14px;font-weight:700;color:var(--ink)}
  .srt2{font-size:12.5px;color:var(--ink3);margin-top:3px;line-height:1.4}
  .srempty{padding:28px 18px;text-align:center;color:var(--ink3);font-size:14px}
  mark{background:#ffeaa7;color:inherit;border-radius:4px;padding:0 3px}
  footer{margin-top:32px;padding:24px 20px 12px;font-size:12px;color:var(--ink3);text-align:center}
  .footbtns{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
  .footbtns .dlbtn{padding:14px;font-size:14px;border-radius:14px;background:var(--card);color:var(--ink2)}
  .resetbtn{font-size:12px;color:var(--ink3);background:none;border:none;cursor:pointer;font-weight:600}
  .hide{display:none}
  /* 재료 도감 */
  .matcard{background:var(--card);border-radius:18px;margin-bottom:12px;overflow:hidden}
  .matcard.hit{box-shadow:0 0 0 2px var(--amber)}
  .mathead{width:100%;display:flex;align-items:center;gap:15px;padding:14px 16px;background:transparent;border:none;cursor:pointer;text-align:left}
  .mathead:active{background:var(--paper)}
  .matimg{width:84px;height:64px;flex-shrink:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .matheadtx{flex:1;min-width:0}
  .matname{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.03em}
  .matsub{font-size:12.5px;color:var(--ink3);margin-top:3px}
  .matbody{padding:4px 18px 18px}
  .matdesc{font-size:14px;line-height:1.65;color:var(--ink2);margin:0 0 14px}
  .matrow{display:flex;gap:10px;padding:12px 14px;background:var(--paper);border-radius:12px;margin-bottom:10px}
  .matlabel{font-size:12.5px;font-weight:800;color:var(--blue);flex-shrink:0}
  .matval{font-size:13.5px;color:var(--ink2);line-height:1.5}
  .mattip{font-size:13px;line-height:1.6;color:var(--ink2);padding:13px 15px;background:var(--amberBg);border-radius:12px}
  .mattip b{color:var(--amber);font-weight:800}
  /* 자체 제작 아이콘 */
  .logo svg{width:26px;height:26px;color:#fff}
  .tic{width:18px;height:18px;flex-shrink:0}
  .tic.sm{width:16px;height:16px}
  .tab svg{margin-right:-1px}
  .plabel{display:inline-flex;align-items:center;gap:5px;color:var(--blue)}
  .plabel svg{color:var(--blue)}
  .searchbtn{display:inline-flex;align-items:center;gap:5px}
  .searchbtn svg{color:#fff;width:17px;height:17px}
  #searchIco{display:inline-flex}
  .footbtns .dlbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
  .dlico{display:inline-flex;color:var(--ink3)}
  .dlico svg{width:17px;height:17px}

  /* ── 태블릿 이상 (768px+) ── */
  /* ── 넓은 화면: 본문 다단 배치 (기본=PC) ── */
  .chiprow{grid-template-columns:repeat(4,1fr)}
  .grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
  .totalrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .keygrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .mbody{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .mbody .diawrap{grid-column:1 / -1}

  /* ── 좁은 화면 (≤900px): 사이드바를 슬라이드 메뉴로 ── */
  @media(max-width:900px){
    .sidebar{position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);
      transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:2px 0 24px rgba(0,0,0,.12)}
    .app.navopen .sidebar{transform:translateX(0)}
    .sboverlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;
      transition:opacity .25s;z-index:25}
    .app.navopen .sboverlay{opacity:1;pointer-events:auto}
    .menubtn{display:block}
    header{padding:18px 18px 14px}
    h1{font-size:19px}
    .gnum{font-size:24px}
    .projbar{margin:0 18px 12px}
    .searchbar{margin:0 18px 14px}
    .ptrack{margin:0 18px 22px}
    #view,#searchResult{padding:0 18px}
    .chiprow{grid-template-columns:1fr 1fr}
    .grid{grid-template-columns:1fr}
    .totalrow{grid-template-columns:1fr}
    .keygrid{grid-template-columns:1fr}
    .mbody{grid-template-columns:1fr}
  }
  @media(max-width:560px){
    .chiprow{grid-template-columns:1fr 1fr;gap:9px}
    header{padding:16px 16px 12px}
    .projbar{margin:0 16px 12px}.searchbar{margin:0 16px 14px}
    .ptrack{margin:0 16px 20px}#view,#searchResult{padding:0 16px}
  }
  /* 잠금 화면 */
  #lockScreen{position:fixed;inset:0;z-index:9999;background:var(--paper);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px}
  .lockcard{background:var(--card);border-radius:22px;padding:36px 30px;width:100%;max-width:360px;
    box-shadow:0 12px 40px -16px rgba(0,0,0,.2);text-align:center}
  .locklogo{width:56px;height:56px;border-radius:17px;background:var(--blue);display:grid;place-items:center;margin:0 auto 18px}
  .locklogo svg{width:34px;height:34px;color:#fff}
  .locktitle{font-size:21px;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
  .locksub{font-size:13.5px;color:var(--ink3);margin-top:6px;margin-bottom:22px}
  .lockinput{width:100%;font-size:15px;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;
    font-family:inherit;color:var(--ink);text-align:center;letter-spacing:0.05em;margin-bottom:10px}
  .lockinput:focus{outline:none;border-color:var(--blue)}
  .lockbtn{width:100%;font-size:15px;font-weight:700;color:#fff;background:var(--blue);border:none;
    border-radius:14px;padding:14px;cursor:pointer;font-family:inherit}
  .lockbtn:active{transform:scale(.98)}
  .lockerr{font-size:13px;color:var(--red);font-weight:600;margin-top:12px;min-height:18px}
  .lockfoot{font-size:12px;color:var(--ink3)}
  .lockinput.id{letter-spacing:0.02em;text-align:left}
  /* 계정 바 (우상단) */
  #acctBar{position:fixed;top:10px;right:12px;z-index:500;display:flex;align-items:center;gap:8px;
    background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 10px 6px 14px;
    box-shadow:0 6px 20px -10px rgba(0,0,0,.25);font-size:13px;color:var(--ink2)}
  #acctBar.hide{display:none}
  #acctBar b{color:var(--ink);font-weight:700}
  #acctBar .abtn{font-size:12.5px;font-weight:700;border:none;border-radius:999px;padding:7px 12px;cursor:pointer;font-family:inherit}
  #acctBar .abtn.ghost{background:var(--paper);color:var(--ink2);border:1px solid var(--line)}
  #acctBar .abtn.blue{background:var(--blue);color:#fff}
  #acctBar select{font-family:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--ink);background:var(--card)}
  @media(max-width:560px){
    #acctBar{top:8px;right:8px;gap:5px;padding:5px 7px 5px 9px;font-size:11px;max-width:calc(100vw - 16px);flex-wrap:wrap;justify-content:flex-end}
    #acctBar .abtn{padding:6px 9px;font-size:11px}
    #acctBar select{font-size:11px;padding:5px 7px;max-width:120px}
    .phrow2{flex-wrap:wrap}
    .phrow2 #phDate{flex:1 1 120px;width:auto}
    .phrow2 #phMemo{flex:1 1 100%;order:3}
  }
  /* 읽기 전용 배너 */
  #viewBanner{position:fixed;top:0;left:0;right:0;z-index:480;background:#fff4d6;color:#8a6d00;
    font-size:13px;font-weight:700;text-align:center;padding:8px 12px;border-bottom:1px solid #f0dca0}
  #viewBanner.hide{display:none}
  /* 관리자 모달 */
  .modalmask{position:fixed;inset:0;z-index:900;background:rgba(15,30,45,.45);display:flex;align-items:center;justify-content:center;padding:20px}
  .modalmask.hide{display:none}
  .modalcard{background:var(--card);border-radius:20px;width:100%;max-width:460px;max-height:86vh;overflow:auto;
    padding:24px 22px;box-shadow:0 20px 60px -20px rgba(0,0,0,.4)}
  .modalcard h3{font-size:18px;font-weight:800;letter-spacing:-0.02em;margin:0 0 4px;color:var(--ink)}
  .modalcard .msub{font-size:13px;color:var(--ink3);margin-bottom:16px}
  .pwrow{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--line)}
  .pwrow .pwname{font-weight:700;color:var(--ink);width:74px;flex:none}
  .pwrow .pwstat{font-size:11.5px;flex:none;width:54px}
  .pwrow .pwstat.set{color:var(--blue)}.pwrow .pwstat.unset{color:var(--ink3)}
  .pwrow input{flex:1;min-width:0;font-family:inherit;font-size:13.5px;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;color:var(--ink)}
  .pwrow input:focus{outline:none;border-color:var(--blue)}
  .pwrow button{flex:none;font-family:inherit;font-size:12.5px;font-weight:700;border:none;border-radius:10px;padding:8px 12px;background:var(--blue);color:#fff;cursor:pointer}
  .modalclose{margin-top:18px;width:100%;font-family:inherit;font-size:14px;font-weight:700;border:1px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:12px;padding:11px;cursor:pointer}
  /* 동기화 표시 */
  #syncTag{position:fixed;bottom:12px;right:12px;z-index:400;font-size:12px;font-weight:600;color:var(--ink3);
    background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;opacity:0;transition:opacity .25s;pointer-events:none}
  #syncTag.show{opacity:1}
  #syncTag.err{color:var(--red);border-color:var(--red)}

  /* ══════════ 기관 스타일(Navy/Teal) · 사이드바 + 무게감 ══════════ */
  .sidebar{background:var(--navy);border-right:1px solid var(--navy)}
  .sbhead .logo{background:var(--navActive);color:#08303a}
  .sbhead .logo svg,.logo svg{color:#08303a}
  .sbhead .kicker{color:var(--navMut)}
  .sbtitle{color:#fff}
  .tab{color:var(--navMut)}
  .tab .tlabel2{color:var(--navInk)}
  .tab .tdesc{color:#7b91a6}
  .tab svg{color:var(--navMut)}
  .tab:hover{background:rgba(255,255,255,.05)}
  .tab.on{background:var(--navActiveBg);border-left:3px solid var(--navActive);padding-left:11px}
  .tab.on .tlabel2{color:#fff}
  .tab.on .tdesc{color:var(--navActive);opacity:.85}
  .tab.on svg{color:var(--navActive)}
  .navhd{color:var(--navInk)}
  .navhd .ngico{color:var(--navMut)}
  .navgrp.act>.navhd .ngico{color:var(--navActive)}
  .navhd .ngttl{color:var(--navInk)}
  .navhd .ngchev{color:var(--navMut)}
  .navhd:hover{background:rgba(255,255,255,.05)}
  .navgrp.act>.navhd{color:#fff}
  .navgrp.act>.navhd .ngttl{color:var(--navActive)}
  .sbfoot{border-top:1px solid var(--navLine)}
  .sbfoot .dlbtn{background:rgba(255,255,255,.06);color:var(--navInk)}
  .sbfoot .dlbtn:hover{background:rgba(255,255,255,.11)}
  .dlico{color:var(--navMut)}
  #themeToggle{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;
    font-size:13px;font-weight:600;border:none;border-radius:11px;cursor:pointer;font-family:inherit;
    background:transparent;color:var(--navInk);width:100%}
  #themeToggle:hover{background:rgba(255,255,255,.06)}
  #themeToggle .tsw{position:relative;width:42px;height:25px;border-radius:99px;flex:none;
    background:rgba(255,255,255,.22);transition:background .2s}
  #themeToggle .tknob{position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:99px;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .2s}
  #themeToggle.on .tsw{background:#34c759}
  #themeToggle.on .tknob{left:19.5px}

  /* 상단 헤더(제목 영역) */
  .main>header{background:transparent}
  h1{color:var(--ink)}
  .htitle .kicker{color:var(--blue);font-weight:700}

  /* 카드 무게감(테두리·헤더·그림자) */
  .phase,.matcard,.form,.risk,.tcard:not(.main),.projbar,.cexp,.ctablewrap,.cnote,.searchin,#acctBar{
    border:1px solid var(--line);box-shadow:var(--shadow)}
  /* 모바일: 계정바를 떠다니지 않게 — 맨 위 한 줄로 내려 상단 탭을 가리지 않도록 */
  @media(max-width:900px){
    #acctBar{position:static;width:100%;top:auto;right:auto;max-width:none;border:none;
      border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;
      padding:7px 14px;gap:8px;justify-content:flex-end;background:var(--card)}
    #acctBar.hide{display:none}
  }
  .phead{background:var(--cardhead)}
  ul.items{border-top:1px solid var(--line);padding-top:4px;margin-top:0}
  .mathead{background:var(--cardhead)}
  .chip{border:1px solid var(--line);border-left:3px solid var(--line2);box-shadow:var(--shadow)}
  .chip.done{border-left-color:var(--ok);background:var(--okBg)}
  .tcard.main .tlabel{color:#bfeaea}
  .schbox,.phcardbox,.phactions .btng{box-shadow:var(--shadow)}

  /* ══════════ 애플 다크 전용 디테일(다크모드일 때만) ══════════ */
  html[data-theme="dark"] .sidebar{border-right-color:var(--line);backdrop-filter:saturate(160%) blur(18px)}
  html[data-theme="dark"] .tab.on{border-left:none;padding-left:14px;border-radius:10px}
  html[data-theme="dark"] .phase,html[data-theme="dark"] .matcard,html[data-theme="dark"] .form,
  html[data-theme="dark"] .chip,html[data-theme="dark"] .projbar,html[data-theme="dark"] .tcard:not(.main),
  html[data-theme="dark"] .cnote,html[data-theme="dark"] .ctablewrap,html[data-theme="dark"] .cexp,
  html[data-theme="dark"] .risk,html[data-theme="dark"] .schbox{border-radius:16px}
  html[data-theme="dark"] .chip{border-left-width:1px;border-left-color:var(--line)}
  html[data-theme="dark"] .chip.done{border-color:var(--line);background:var(--okBg)}
  html[data-theme="dark"] .phead{background:var(--cardhead)}
  html[data-theme="dark"] h1{font-weight:700}
  html[data-theme="dark"] .htitle .kicker{color:var(--blue)}