/* ── 디자인 규칙 (redesign 감사 후 재정의) ──
   위계 4단: display(44/36) · title(22/18) · body(15) · caption(13/12). 그 사이 크기는 안 쓴다.
   강조색은 화면당 채운 면 하나(홈=육각형, 리포트=AI 클릭 타일). 나머지는 글자·선으로만.
   라운드 2단: 바깥 카드 20, 안쪽 요소 10. 카드 안에 카드 금지 — 안쪽은 구분선으로.
   그림자는 잉크색 틴트로 아주 얇게. 간격 4px 그리드.
   언제 무엇을 쓰는지(여섯 원칙·글자 단계·부품·검수)는 docs/디자인_규칙.md — 새 화면은 그 문서부터. */
:root{
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:48px;--s10:64px;
--r-card:20px;--r-el:10px;--rf:999px;
--t-cap:13px;--t-label:14px;--t-body:16px;--t-title:19px;--t-h:22px;--t-n:32px;--t-d1:36px;--t-d2:44px;
--g50:#f9f8fb;--g100:#f3f1f6;--g200:#e6e1ee;--g300:#d3cddd;--g400:#b7b0c4;--g500:#6f6880;--g600:#6b6479;--g700:#4b4557;--g800:#2a2433;--g900:#17141d;
--brand:#ff5a3c;--brand-bg:#fff0ec;--brand-ink:#c4361b;--violet:#b23cff;
--on:#0f7b4f;--on-bg:#e8f8f0;--wip:#9a5b00;--wip-bg:#fff5e5;--off:var(--g600);--off-bg:var(--g100);--bad:#d7333e;--bad-bg:#fdecee;
--shadow:0 1px 2px rgba(26,28,34,.04),0 8px 24px rgba(26,28,34,.05);
--grad-brand:linear-gradient(135deg,#cf3e22 0%,#c4361b 55%,#b8321a 100%);
--grad-brand-soft:linear-gradient(135deg,#fff3f1 0%,#ffffff 60%);
--grad-bar:linear-gradient(90deg,#ff8a5b,#ff5a3c);
--grad-card:linear-gradient(160deg,#ffffff 0%,#fbfbfc 100%);
--nav:264px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 8% -10%,#fff0ea 0%,rgba(255,240,234,0) 60%),radial-gradient(900px 500px at 100% 0%,#efe8f8 0%,rgba(239,232,248,0) 60%),var(--g100);background-attachment:fixed;color:var(--g900);font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;font-size:var(--t-body);line-height:1.65}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--g900);outline-offset:2px;border-radius:var(--r-el)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.layout{display:flex;min-height:100dvh}
/* 사이드바 — 대표님 프로토타입 스타일: 어두운 바탕, S.A.G 마크, WORKSPACE 메뉴, 운영센터 박스 */
.side{width:var(--nav);flex:0 0 var(--nav);background:linear-gradient(180deg,#130e1a 0%,#0b0810 100%);color:#cfc8dc;padding:var(--s6) var(--s4);position:sticky;top:0;height:100dvh;overflow:auto;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s2);margin-bottom:var(--s7)}
.brand b{display:block;color:#fff;font-size:var(--t-title);font-weight:800;letter-spacing:-.01em;line-height:1.1}
/* 관리자 마크 — 실제 NC 로고(흰색판) + '관리자'. 글자로 흉내 낸 마크(N 네모·자간 벌린 영문)는 쓰지 않는다(2026-10-26 "밤티") */
.brand-nc{display:flex;align-items:center;gap:var(--s3);padding:var(--s1) var(--s2) 0;margin-bottom:var(--s7)}
.brand-nc img{display:block;height:26px;width:auto}
.brand-nc span{padding-left:var(--s3);border-left:1px solid rgba(255,255,255,.2);color:#e6e1ee;font-size:var(--t-body);font-weight:600;letter-spacing:-.01em;line-height:20px}
/* S.A.G 워드마크 — Geist, 이름과 Solution 을 한 줄 같은 기준선에. 심볼은 육각형에 물이 지수만큼 차오른다(로고 C) */
.brand .wm{display:flex;align-items:baseline;gap:6px;font-family:"Geist","Pretendard",sans-serif;white-space:nowrap}
.brand .wm b{display:inline;font-family:inherit;font-size:20px;font-weight:600;letter-spacing:-.04em;line-height:1}
.brand .wm span{color:#b7b0c4;font-size:15px;font-weight:400;letter-spacing:-.01em}
.brand .mk{flex:0 0 38px;width:38px;height:38px;filter:drop-shadow(0 6px 14px rgba(255,90,60,.28))}
.mk .water{transform:translateY(36px);transition:transform 1.8s cubic-bezier(.23,1,.32,1) .2s}
.mk.in .water{transform:translateY(var(--rise))}
.mk .wave{animation:mk-wave 3.2s linear infinite}
@keyframes mk-wave{to{transform:translateX(-40px)}}
.mk .dot{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.mk.in .dot{animation:mk-pop .5s cubic-bezier(.23,1,.32,1) 1.7s both}
@keyframes mk-pop{0%{transform:scale(0)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
.nav-g{margin:var(--s6) 0 var(--s2);padding:0 var(--s3);font-size:12px;color:#8a8299;font-weight:700;letter-spacing:.16em}
.nav-g:first-child{margin-top:0}
.nav a{display:flex;align-items:center;gap:var(--s3);height:42px;padding:0 var(--s3);border-radius:var(--r-el);color:#cfc8dc;font-size:var(--t-body);font-weight:500;transition:background .2s ease,color .2s ease;position:relative}
.nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav a:active{transform:translateY(1px)}
.nav a.on{background:rgba(255,255,255,.09);color:#fff;font-weight:700}
.nav a.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav a svg{flex:0 0 18px;color:#8b90a0;transition:color .2s ease}
.nav a.on svg,.nav a:hover svg{color:#fff}
.dot{width:8px;height:8px;border-radius:50%;margin-left:auto;flex:0 0 8px;border:2px solid}
.nd{width:7px;height:7px;border-radius:50%;background:#ff5a3c;flex:0 0 7px;margin-left:-4px;align-self:flex-start;margin-top:12px;box-shadow:0 0 0 2px rgba(255,90,60,.25)}.nd[hidden]{display:none}
.btn .nd{margin:0 0 0 2px;align-self:center}.stp .nd{margin:0 0 0 4px;align-self:center;display:inline-block}
.d-on{background:var(--grad-brand);border-color:transparent}
.d-wip{background:transparent;border-color:var(--brand)}
.d-off{background:transparent;border-color:#4a4f5c}
.nav-lg{display:flex;gap:var(--s3);flex-wrap:wrap;padding:var(--s2) var(--s3) 0;font-size:12px;color:#8a8299}.nav-lg span{display:inline-flex;align-items:center;gap:5px}.nav-lg .dot{margin:0;width:7px;height:7px;flex:none;animation:none;transform:none}
.help{margin-top:auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-card);padding:var(--s5)}
.help small{display:block;color:#f5a79e;font-size:var(--t-cap);font-weight:700;letter-spacing:.02em}
.help b{display:block;color:#fff;font-size:var(--t-body);margin:var(--s1) 0 var(--s3)}
.help a{display:flex;align-items:center;justify-content:center;height:40px;border-radius:var(--r-el);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:var(--t-label);transition:background .2s ease}
.help a:hover{background:rgba(255,255,255,.08)}
.nav-end{margin-top:auto;padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.08)}
.help+.nav-end{margin-top:var(--s4)}
.nav-end a{display:flex;align-items:center;gap:var(--s3);height:42px;padding:0 var(--s3);border-radius:var(--r-el);color:#cfc8dc;font-size:var(--t-body);font-weight:500;transition:background .2s ease,color .2s ease}
.nav-end a:hover{background:rgba(255,255,255,.05);color:#fff}.nav-end a svg{flex:0 0 18px;color:#8b90a0}.nav-end a:hover svg{color:#fff}
.side .foot{margin-top:var(--s5);padding:var(--s4) var(--s2) 0;border-top:1px solid rgba(255,255,255,.08);font-size:var(--t-cap);color:#8b90a0;line-height:1.6;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.side .foot-admin{margin-left:auto;flex:none;white-space:nowrap;padding:2px 8px;border:1px solid rgba(255,255,255,.16);border-radius:6px;color:#c4c8d4;text-decoration:none}.side .foot-admin:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.side .foot img{display:block;opacity:.85}
/* 본문 — 상단 바(현재 병원 · 새 작업 요청) + 내용 */
.main{flex:1;min-width:0;padding:0;max-width:none;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s4);height:64px;padding:0 var(--s8);background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--g200)}
.topbar .cur small{display:block;font-size:var(--t-cap);color:var(--g500);font-weight:500}
.topbar .cur b{font-size:var(--t-body);font-weight:700}
.topbar .right{display:flex;align-items:center;gap:var(--s3)}
.tb-back{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--s3) 0 var(--s2);margin-left:calc(-1 * var(--s2));border-radius:var(--r-el);color:var(--g700);font-size:var(--t-label);font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s ease}
.tb-back:hover{background:var(--g100);color:var(--g900)}.tb-back:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tb-sep{width:1px;height:24px;background:var(--g200);flex:none}
.content{padding:var(--s7) var(--s8) var(--s10);max-width:1680px;width:100%}
.content>*+*{margin-top:var(--s6)}
.head{padding:0 0 var(--s2);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap}
.head:has(>h1){display:block;margin-bottom:var(--s5)}   /* 관리자 화면 — 라벨·제목·설명을 왼쪽에 세로로(2026-10-21 대표 "타이틀 위치") */
.eyebrow{font-size:12px;color:var(--g500);font-weight:700;letter-spacing:.18em;margin-bottom:var(--s2)}
.crumb{font-size:var(--t-label);color:var(--g500);margin-bottom:var(--s2);font-weight:600;letter-spacing:.02em}
h1{margin:0;font-size:var(--t-h);font-weight:800;letter-spacing:-.03em;line-height:1.2;word-break:keep-all;text-wrap:balance}
h1 em{font-style:normal;color:var(--brand)}
h2{margin:0;font-size:var(--t-h);font-weight:800;letter-spacing:-.02em;line-height:1.25;word-break:keep-all}
.head.grp{padding:var(--s7) 0 var(--s4)}
.lead{margin:var(--s2) 0 0;color:var(--g600);font-size:var(--t-body);line-height:1.65;word-break:keep-all;text-wrap:pretty}
.stamp{font-size:var(--t-label);color:var(--g500);white-space:nowrap}
/* KPI 타일 4개 */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.kpi{background:var(--grad-card);border-radius:var(--r-card);padding:var(--s5) var(--s6);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);display:flex;flex-direction:column;gap:var(--s2);min-height:150px;position:relative}
.kpi .kl{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-label);font-weight:600;color:var(--g600)}
.kpi .kl i{width:32px;height:32px;border-radius:var(--r-el);background:var(--brand-bg);color:var(--brand);display:grid;place-items:center;font-style:normal}
.kpi .kv{font-size:var(--t-n);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin-top:var(--s1)}
.kpi .kv small{font-size:var(--t-body);font-weight:500;color:var(--g500);margin-left:var(--s1);letter-spacing:0}
.kpi .kd{font-size:var(--t-label);color:var(--g600);margin-top:auto}
.kpi .kd.up{color:var(--on)}.kpi .kd.down{color:var(--bad)}
.kpi .hexmini{position:absolute;right:var(--s4);top:var(--s3)}
/* 업무별 진행 현황 + 최근 활동 */
.two{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.two.eq{align-items:stretch}.two.eq>.sec{display:flex;flex-direction:column}.two.eq .empty-box{flex:1;display:grid;place-items:center}
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.work{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border-radius:var(--r-el);background:var(--g50);transition:background .2s ease;min-height:150px}
.work:hover{background:var(--g100)}
.work .wh{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.work .wi{width:36px;height:36px;border-radius:var(--r-el);background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:var(--shadow)}
.work b{display:block;font-size:var(--t-body);font-weight:700;margin-top:var(--s2)}
.work .wq{font-size:var(--t-cap);color:var(--g500)}
.work .wv{margin-top:auto;font-size:var(--t-title);font-weight:800;letter-spacing:-.02em;color:var(--g900);font-variant-numeric:tabular-nums}
.work .wf{display:flex;justify-content:space-between;font-size:var(--t-cap);color:var(--g500);font-variant-numeric:tabular-nums}
.act{display:flex;flex-direction:column}
.act .ai{display:flex;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--g100);font-size:var(--t-label)}
.act .ai:last-child{border-bottom:0}
.act .ai i{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:0 0 8px;background:var(--on)}
.act .ai i.w{background:var(--wip)}.act .ai i.b{background:var(--brand)}
.act .ai b{display:block;font-weight:600;color:var(--g900)}
.act .ai small{color:var(--g500)}
/* 유입 추이 · 검색어 순위 */
.trend{display:flex;flex-direction:column}
.trend .tr{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:var(--s4);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--g100)}
.trend .tr:last-child{border-bottom:0}
.trend .trl b{display:block;font-size:var(--t-label);font-weight:600;color:var(--g700)}
.trend .trl span{font-size:var(--t-title);font-weight:700;color:var(--g900);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.trend .trd{font-size:var(--t-cap);color:var(--g500);white-space:nowrap;font-variant-numeric:tabular-nums}
.sov{display:flex;flex-direction:column;gap:var(--s4)}
.sov .svl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-label);color:var(--g600)}
.sov .svl b{font-weight:600;color:var(--g700)}
.sov .svl span{font-variant-numeric:tabular-nums;font-weight:700;color:var(--g900)}
.sov .mine .svl b,.sov .mine .svl span{color:var(--brand-ink)}
.sov .svb{height:8px;border-radius:4px;background:var(--g100);margin-top:var(--s2);overflow:hidden}
.sov .svb i{display:block;height:100%;border-radius:4px;background:var(--g300)}
.sov .mine .svb i{background:var(--grad-bar)}
.qt{width:100%;border-collapse:collapse;font-size:var(--t-label)}
.qt th{text-align:right;font-weight:600;color:var(--g500);font-size:var(--t-cap);padding:0 0 var(--s2);border-bottom:1px solid var(--g200)}
.qt th:first-child{text-align:left}
.qt td{text-align:right;padding:var(--s3) 0;border-bottom:1px solid var(--g100);font-variant-numeric:tabular-nums;color:var(--g700)}
.qt td:first-child{text-align:left;color:var(--g900);font-weight:600;max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qt tr:last-child td{border-bottom:0}
/* 갤러리(지식문서·칼럼·기사) */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}.gcard[hidden]{display:none}
.wg-c{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s4)}.wg-s{margin:calc(-1 * var(--s2)) 0 var(--s4) var(--s3);padding-left:var(--s3);border-left:2px solid var(--g200)}.wg-s[hidden]{display:none}.wg-c button{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;border:1px solid var(--g200);background:#fff;font-size:var(--t-label);font-weight:600;color:var(--g700)}.wg-c button:hover{background:var(--g50)}.wg-c button:focus-visible{outline:2px solid var(--g900);outline-offset:2px}.wg-c button[aria-pressed="true"]{background:var(--g900);border-color:var(--g900);color:#fff}.wg-more{display:block;margin:var(--s4) auto 0}.wg-more[hidden]{display:none}
.gcard{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);border-radius:var(--r-el);background:var(--g50);min-height:150px;transition:background .2s ease,transform .2s ease}
.gcard:hover{background:var(--g100);transform:translateY(-2px)}
.gcard .gk{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-cap);color:var(--g500);font-weight:600}
.gcard .gk em{font-style:normal;color:var(--brand-ink);background:var(--brand-bg);padding:2px var(--s2);border-radius:var(--rf)}
.gcard b{font-size:var(--t-body);font-weight:700;line-height:1.45;word-break:keep-all}
.gcard p{margin:0;font-size:var(--t-label);color:var(--g600);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mikc .gcard{padding:var(--s3) var(--s3) var(--s4)}.mikc .gcard img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:8px;background:var(--g100);margin-bottom:var(--s2)}.mikc .gcard .gk,.mikc .gcard b,.mikc .gcard p,.mikc .gcard .gd{padding:0 var(--s2)}
.gcard .gd{margin-top:auto;font-size:var(--t-cap);color:var(--g500);font-variant-numeric:tabular-nums}
.hd-r{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);flex:0 0 auto}
/* 개선 실행 리스트 */
.todos{display:flex;flex-direction:column}
.todo{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--g100);font-size:var(--t-body)}
.todo:last-child{border-bottom:0}
.todo i{width:20px;height:20px;border-radius:6px;border:2px solid var(--g300);display:grid;place-items:center;flex:0 0 20px;font-style:normal;font-size:13px;color:#fff}
.todo.done i{background:var(--on);border-color:var(--on)}
.todo.done span{color:var(--g500);text-decoration:line-through}
.todo .tt{margin-left:auto;font-size:var(--t-cap);color:var(--g500);white-space:nowrap}
/* 유튜브 영상 목록 */
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
.vids.clip>.vc:nth-child(n+13){display:none}
.vmore{margin-top:var(--s4)}
/* 기간 고르기 — GA·구글 애즈 방식: 왼쪽 빠른 선택 | 오른쪽 두 달 달력, 아래 취소·적용 */
.rp{position:relative;display:inline-block}
.rp-btn{list-style:none;display:inline-flex;align-items:center;gap:var(--s2);height:40px;padding:0 var(--s3) 0 var(--s4);border-radius:8px;background:#fff;border:1px solid var(--g300);
  color:var(--g900);font-size:var(--t-label);cursor:pointer;user-select:none;transition:border-color .2s ease,box-shadow .2s ease,transform .16s var(--ease-out)}
.rp-btn::-webkit-details-marker{display:none}
.rp-btn b{font-weight:600}.rp-btn svg{color:var(--g600)}.rp-chev{transition:transform .2s var(--ease-out)}
.rp[open] .rp-chev{transform:rotate(180deg)}.rp-btn:active{transform:scale(.98)}
.rp[open] .rp-btn,.rp-btn:hover{border-color:#1a73e8;box-shadow:0 1px 3px rgba(26,115,232,.2)}
.rp-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:40;display:grid;grid-template-columns:168px minmax(0,1fr);width:min(720px,calc(100vw - 32px));background:#fff;border-radius:8px;
  box-shadow:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);transform-origin:top left;animation:rpIn .16s var(--ease-out);overflow:hidden}
@keyframes rpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.rp-list{display:flex;flex-direction:column;padding:8px 0;border-right:1px solid #e8eaed}
.rp-list a,.rp-cus{display:flex;align-items:center;min-height:36px;padding:0 var(--s4);font-size:14px;color:#3c4043;transition:background .15s ease}
.rp-list a:hover{background:#f1f3f4}.rp-list a.on,.rp-cus.on{background:#e8f0fe;color:#1967d2;font-weight:600}
.rp-cus{color:#80868b}.rp-cus.on{color:#1967d2}
.rp-main{display:flex;flex-direction:column;min-width:0}
.rp-sel{display:flex;align-items:flex-end;gap:var(--s3);padding:var(--s4) var(--s5) var(--s2)}
.rp-f{flex:1;display:flex;flex-direction:column;gap:2px;border-bottom:2px solid #1a73e8;padding-bottom:4px}
.rp-f span{font-size:13px;color:#1a73e8}.rp-f b{font-size:15px;font-weight:500;color:#202124;font-variant-numeric:tabular-nums}
.rp-cals{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);padding:var(--s2) var(--s5) var(--s3)}
.rp-nav{position:absolute;top:8px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#5f6368;cursor:pointer;display:grid;place-items:center}
.rp-nav:hover{background:#f1f3f4}.rp-nav.prev{left:12px}.rp-nav.next{right:12px}
.rp-mh{text-align:center;font-size:14px;font-weight:500;color:#3c4043;height:36px;line-height:36px}
.rp-g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.rp-g i{font-style:normal;text-align:center;font-size:12px;color:#70757a;height:24px;line-height:24px}
.rp-g button{height:32px;border:0;background:transparent;font:inherit;font-size:14px;color:#3c4043;cursor:pointer;border-radius:16px;font-variant-numeric:tabular-nums}
.rp-g button:hover:not(:disabled){background:#f1f3f4}
.rp-g button.in{background:#e8f0fe;border-radius:0;color:#1967d2}
.rp-g button.end,.rp-g button.end:hover{background:#1a73e8;color:#fff;font-weight:600}.rp-g button.in:hover{background:#d2e3fc}
.rp-g button.today:not(.end){box-shadow:inset 0 0 0 1px #1a73e8}
.rp-g button.off{color:#dadce0;cursor:default}
.rp-foot{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s5);border-top:1px solid #e8eaed}
.rp-cmp{flex:1;font-size:13px;color:#5f6368}
.rp-foot .btn{height:36px;border-radius:4px}
.rp-foot .btn.rp-cancel{background:transparent;color:#1a73e8;box-shadow:none}.rp-foot .btn.rp-cancel:hover{background:#f1f8fe}
.rp-foot .btn.rp-apply{background:#1a73e8;box-shadow:none;color:#fff}.rp-foot .btn.rp-apply:hover{background:#1765cc;filter:none}.rp-foot .btn.rp-apply:disabled{background:#dadce0;cursor:default}
@media(max-width:760px){.rp-pop{grid-template-columns:1fr}.rp-list{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #e8eaed;padding:4px}.rp-list a,.rp-cus{white-space:nowrap;border-radius:16px}
  .rp-cals{grid-template-columns:1fr}.rp-cal[data-i="1"]{display:none}}
.ytchs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s2) var(--s5);margin-top:var(--s4);font-size:var(--t-label);color:var(--g600)}.ytchs b{display:block;color:var(--g900);font-size:var(--t-body)}
.yt-top{margin-bottom:var(--s7)}.yt-top .rtiles{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ytbar{height:12px;border-radius:6px}.ytbar i{border-radius:6px}
/* 영상 카드는 블록이 들어올 때 한 장씩(--k) 떠오른다 */
.mw:not(.in) .vc{opacity:0;transform:translateY(8px)}
.mw .vc{transition:opacity .35s ease,transform .45s cubic-bezier(.23,1,.32,1),box-shadow .2s ease,background .2s ease;transition-delay:calc(var(--k,0)*40ms + .1s),calc(var(--k,0)*40ms + .1s),0s,0s}
.mw.done .vc{transition-delay:0s}
.vc{display:flex;gap:var(--s3);padding:var(--s3);border-radius:var(--r-el);background:var(--g50);transition:transform .2s var(--ease-out,cubic-bezier(.23,1,.32,1)),box-shadow .2s ease,background .2s ease}
.vc .vt img{transition:transform .3s cubic-bezier(.23,1,.32,1)}
.todo,.qt tbody tr,.tablebox tr{transition:background .15s ease}
@media (hover:hover) and (pointer:fine){
  .vc:hover{background:#fff;transform:translateY(-3px);box-shadow:0 2px 4px rgba(26,28,34,.05),0 14px 32px rgba(26,28,34,.10)}
  .vc:hover .vt img{transform:scale(1.04)}
  .todo:hover,.qt tbody tr:hover,.tablebox tr:hover td{background:var(--g50)}
}
.vc.on{opacity:.8}
.vc .vt{flex:0 0 108px;width:108px;height:61px;border-radius:8px;overflow:hidden;background:var(--g200);display:block}
.vc .vt img{width:100%;height:100%;object-fit:cover;display:block}
.vc .vb{min-width:0;display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.vc .vb b{font-size:var(--t-label);font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc .vm{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-cap)}
.vc details summary{cursor:pointer}
details>summary{cursor:pointer;font-size:var(--t-body)}
.jb{font-size:var(--t-cap);font-weight:600;padding:3px var(--s2);border-radius:var(--rf);background:var(--g100);color:var(--g600)}
.jb.j-queued{background:var(--g100);color:var(--g600)}
.jb.j-running{background:#fff5e8;color:#8a5a10}
.jb.j-done{background:#e8f6ee;color:#186a3b}
.jb.j-failed{background:#fdeceb;color:#9a2b22}
/* 작업 요청·제안 수락 모달 */
.am{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--s5)}
.am[hidden]{display:none}.am-back{position:absolute;inset:0;background:rgba(25,31,40,.45)}
.am-box{position:relative;width:min(460px,100%);background:#fff;border-radius:var(--r-card);padding:var(--s7) var(--s7) var(--s6);display:flex;flex-direction:column;gap:var(--s3);box-shadow:0 30px 80px rgba(25,31,40,.25)}
.am-close{position:absolute;right:var(--s4);top:var(--s3);font:inherit;font-size:22px;line-height:1;border:0;background:none;color:var(--g500);cursor:pointer}
.am-k{font-size:var(--t-cap);letter-spacing:.04em;color:var(--g500);font-weight:600}.am-title{font-size:var(--t-title);font-weight:700;line-height:1.35}.am-effect{font-size:var(--t-label);color:var(--g600)}
.am-box form{display:flex;flex-direction:column;gap:var(--s3)}.am-box label{font-size:var(--t-label);color:var(--g600)}.am-err{font-size:var(--t-label);color:var(--bad);min-height:1em}.am-note{font-size:var(--t-cap);color:var(--g500);text-align:center}
/* 로그인(2026-10-26 개편) — 왼쪽 컬러 패널(SAG 주황·보라 블러 + 그레인 + 스크림) 위에 물 차오르는 육각형, 오른쪽 흰 칸에 입력.
   패널은 화면에 하나, 주 버튼(주황)도 하나. 휴대폰에선 패널이 위 띠로 줄어든다. */
.lfoot{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--g100);font-size:var(--t-label);color:var(--g500);line-height:1.5;word-break:keep-all}
.lg{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,1fr);background:#fff}
.lg{--lg-top:max(var(--s10),22vh)}
.lg-panel{position:relative;overflow:hidden;isolation:isolate;background:#130e1a;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;padding:var(--lg-top) var(--s9) var(--s10);
  --c1:#ff5a3c;--c2:#ff9a6b;--c3:#b23cff;--c4:#6a2bd9}
.lg-glow{position:absolute;inset:-30%;z-index:0;filter:blur(28px) saturate(1.1);opacity:1;
  background:repeating-linear-gradient(39deg,var(--c1) 0 6%,transparent 6% 20%),repeating-linear-gradient(16deg,var(--c2) 0 5%,transparent 5% 19%),
    repeating-linear-gradient(-39deg,var(--c3) 0 4%,transparent 4% 21%),repeating-linear-gradient(-16deg,var(--c4) 0 7%,transparent 7% 18%),
    radial-gradient(70% 70% at 50% 50%,#ffffff22,transparent 70%);
  background-size:220% 220%,200% 200%,240% 240%,210% 210%,100% 100%;animation:lg-sweep 18s linear infinite}
@keyframes lg-sweep{to{background-position:100% 0,0 100%,100% 100%,0 0,0 0}}
.lg-grain{position:absolute;inset:0;z-index:1;opacity:.12;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
.lg-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,9,18,.18) 0%,rgba(13,9,18,.34) 45%,rgba(13,9,18,.72) 100%),radial-gradient(90% 70% at 0% 100%,rgba(13,9,18,.45),transparent 70%)}
.lg-hero{position:relative;z-index:2}.lg-top,.lg-list{z-index:2}
.lg-top{position:absolute;left:var(--s9);top:var(--s8)}
.lg-top img{display:block;opacity:.9}
.lg-hero{max-width:560px;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.lg-hero .mk{width:112px;height:112px;margin-bottom:var(--s6);filter:drop-shadow(0 12px 28px rgba(255,90,60,.35))}
.lg-hero h2{font-size:var(--t-d1);font-weight:800;letter-spacing:-.04em;line-height:1.18;color:#fff;margin:0 0 var(--s4);text-wrap:balance;max-width:9em;word-break:keep-all}
.lg-hero p{margin:0;font-size:var(--t-title);line-height:1.6;color:rgba(255,255,255,.82);word-break:keep-all;text-wrap:pretty;max-width:34ch}
.lg-list{position:absolute;left:var(--s9);right:var(--s9);bottom:var(--s8);margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);font-size:var(--t-label);color:rgba(255,255,255,.72)}
.lg-list li:first-child{color:rgba(255,255,255,.5)}
.lg-side{display:flex;align-items:flex-start;justify-content:center;padding:var(--lg-top) var(--s7) var(--s10)}
.lg-box{width:min(400px,100%)}
.lg-box h1{font-size:var(--t-h);font-weight:800;letter-spacing:-.03em;margin:0 0 var(--s2)}
.lg-box .lead{margin:0;font-size:var(--t-body)}
.lg-box form{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s6)}
.lg-box label{margin:0;font-weight:600;color:var(--g700)}
.lg-box input{height:52px;margin-top:var(--s2);font-size:var(--t-body)}
.lg-pw{position:relative}.lg-pw input{padding-right:72px}
.lg-pw button{position:absolute;right:6px;bottom:6px;height:40px;padding:0 var(--s3);border:0;border-radius:8px;background:transparent;color:var(--g600);font:inherit;font-size:var(--t-label);font-weight:600;cursor:pointer}
.lg-pw button:hover{background:var(--g200);color:var(--g900)}
.lg-box .btn{height:52px;margin-top:var(--s2);font-size:var(--t-body)}
.lg-note{margin:0;font-size:var(--t-label);color:var(--g500);text-align:center}
.lg-note b{color:var(--g800);font-weight:700}
@media(max-width:960px){
.lg{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.lg-panel{padding:var(--s5) var(--s5) var(--s6);min-height:0;gap:var(--s6);justify-content:flex-start}
.lg-top{position:static}.lg-list{display:none}
.lg-hero{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s4);align-items:center}.lg-hero p{grid-column:1/-1;margin-top:var(--s3)}
.lg-hero .mk{width:56px;height:56px;margin:0}
.lg-hero h2{font-size:26px;margin:0}.lg-hero p{font-size:var(--t-body)}
.lg-side{padding:var(--s7) var(--s5) var(--s8)}
.lg-box h1{font-size:var(--t-h)}
}
@media (prefers-reduced-motion:reduce){.lg-glow{animation:none}}
/* 카드 공통 — 바깥 카드만 흰 면. 안쪽은 선으로 나눈다 */
.card,.panel,.strip,.sec,.hero{background:var(--grad-card);border-radius:var(--r-card);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9)}
.sec{padding:var(--s6)}
.sec+.sec{margin-top:var(--s4)}
/* 나란히 놓인 칸은 위 여백을 물려받지 않는다 — 시작선이 어긋나고 높이가 그만큼 짧아진다 */
.g2>.sec+.sec{margin-top:0}
.sec h3,.card h3{margin:0 0 var(--s4);font-size:var(--t-title);font-weight:700;letter-spacing:-.02em}
/* 박스 제목 한 가지 규칙(2026-10-20 대표 "대제목과 파트 구분이 애매, 어떤 건 구분선이 있고 어떤 건 없고"): 박스 맨 위 제목 줄 아래 구분선, 박스 안 소제목(.h4)은 작은 회색 글씨 + 위 구분선 */
.sec>.head{padding:0 0 var(--s3);margin-bottom:var(--s4);border-bottom:1px solid var(--g100)}
.sec>h3:first-child{padding-bottom:var(--s3);margin-bottom:var(--s4);border-bottom:1px solid var(--g100)}
.sec .h4{margin:0 0 var(--s3);font-size:var(--t-label);font-weight:700;color:var(--g600);letter-spacing:.01em}
.sec .h4:not(:first-child){margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--g100)}
/* 요약(히어로) */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;padding:var(--s7) var(--s7) var(--s7) var(--s8);gap:var(--s7);min-height:300px;position:relative;overflow:hidden;background:radial-gradient(420px 320px at 82% 50%,#fdeae7 0%,rgba(253,234,231,0) 70%),var(--grad-card)}
.hero .kicker{font-size:var(--t-label);color:var(--g500);font-weight:600;letter-spacing:.02em}
.hero .big{font-size:var(--t-d1);font-weight:800;letter-spacing:-.04em;line-height:1;margin:var(--s2) 0 var(--s4);font-variant-numeric:tabular-nums}
.hero .big small{font-size:var(--t-title);color:var(--g400);font-weight:500;margin-left:var(--s2);letter-spacing:-.01em}
.hero p{margin:0 0 var(--s6);color:var(--g600);line-height:1.65;word-break:keep-all;max-width:40ch;text-wrap:pretty}
.hero .art{display:grid;place-items:center}
/* 상태 줄 */
.strip{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) var(--s6)}
.strip .ico{width:44px;height:44px;border-radius:var(--r-el);background:var(--brand-bg);color:var(--brand);display:grid;place-items:center;flex:0 0 44px}
.strip b{font-size:var(--t-body);font-weight:700}
.strip .d{color:var(--g600);font-size:var(--t-label);margin-top:2px;line-height:1.5}
/* 버튼 — 주(주황)는 화면에 하나, 나머지는 회색 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:44px;padding:0 var(--s5);border-radius:var(--r-el);background:var(--g900);color:#fff;font-weight:700;font-size:var(--t-body);border:0;cursor:pointer;font-family:inherit;transition:background .2s ease,transform .12s ease,box-shadow .2s ease;white-space:nowrap}
.btn:hover{background:var(--g800)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--grad-brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(255,90,60,.25)}
.btn.primary:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px rgba(255,90,60,.3)}
.btn.ghost{background:var(--g100);color:var(--g800)}
.btn.ghost:hover{background:var(--g200)}
.btn.sm{height:36px;padding:0 var(--s4);font-size:var(--t-label)}
.right{margin-left:auto}
/* 조건 목록 — 카드 하나, 행은 선으로 */
.panel{padding:var(--s2) 0 var(--s3)}
.panel-h{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s5) var(--s6) var(--s2);font-size:var(--t-label);font-weight:700;color:var(--g900);letter-spacing:.01em}
.panel-h span{color:var(--g500);font-weight:400}
.rowitem{display:grid;grid-template-columns:28px minmax(0,220px) minmax(0,1fr) 84px 88px 12px;gap:var(--s4);align-items:center;min-height:68px;padding:var(--s3) var(--s6);transition:background .2s ease;border-top:1px solid var(--g100)}
.rowitem:hover{background:var(--g50)}
.rowitem:active{background:var(--g100)}
.rowitem .idx{font-size:var(--t-label);color:var(--g400);font-weight:600;font-variant-numeric:tabular-nums}
.rowitem b{display:block;font-size:var(--t-body);font-weight:700;letter-spacing:-.01em}
.rowitem .q{font-size:var(--t-cap);color:var(--g500);margin-top:2px}
.rowitem .value{font-size:var(--t-body);font-weight:600;font-variant-numeric:tabular-nums;word-break:keep-all}
.rowitem .value small{display:block;font-size:var(--t-cap);font-weight:400;color:var(--g500);margin-top:2px}
.rowitem .value.none{font-weight:400;color:var(--g400)}
.rowitem .chev{color:var(--g300);text-align:right}
.pts{font-size:var(--t-body);font-weight:700;color:var(--g900);font-variant-numeric:tabular-nums;text-align:right}
.pts.off{color:var(--g400);font-weight:500;font-size:var(--t-cap);white-space:nowrap}
/* 홈페이지 진단 4항목 — 카드 안 상자 없이 2×2, 가운데 선으로 */
.spg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s8);row-gap:0}
.sp{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) 0;border-top:1px solid var(--g100);min-height:132px}
.sp:nth-child(-n+2){border-top:0}
.sp-h{display:flex;align-items:baseline;gap:var(--s2)}
.sp-h b{font-size:var(--t-body);font-weight:700}
.sp-band{font-size:var(--t-cap);font-weight:600;padding:2px var(--s2);border-radius:var(--r-el)}
.sp-band.good{background:var(--on-bg);color:var(--on)}.sp-band.mid{background:var(--wip-bg);color:var(--wip)}.sp-band.bad{background:var(--bad-bg);color:var(--bad)}.sp-band.off{background:var(--g100);color:var(--g500)}
.sp-n{margin-left:auto;font-size:var(--t-h);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sp-bar{height:6px;border-radius:3px;background:var(--g100);overflow:hidden}
.sp-bar i{display:block;height:100%;border-radius:3px;background:var(--grad-bar);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.sp p{margin:auto 0 0;font-size:var(--t-label);color:var(--g600);line-height:1.55;word-break:keep-all;text-wrap:pretty}
/* 값·배지 */
@media(max-width:1180px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:1fr}.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);align-items:stretch}
/* 홈 12칸 격자 — 리포트와 같은 가로형 규칙 */
.dg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s5);align-items:stretch}
.dg>.c4{grid-column:span 4}.dg>.c6{grid-column:span 6}.dg>.c5{grid-column:span 5}.dg>.c7{grid-column:span 7}.dg>.c12{grid-column:span 12}
.dg>.sec{display:flex;flex-direction:column}
.dg .empty-box{flex:1;display:grid;place-items:center}
.dg .hero{grid-template-columns:minmax(0,1fr) 260px;min-height:0;padding:var(--s6);gap:var(--s5);background:radial-gradient(380px 320px at 84% 50%,#fdeae7 0%,rgba(253,234,231,0) 70%),var(--grad-card)}
.dg .hero>div:first-child{display:flex;flex-direction:column;align-self:stretch;justify-content:center}.dg .hero .kicker{font-size:var(--t-title);color:var(--g900);font-weight:700}.dg .hero .big{font-size:64px;margin:var(--s3) 0 var(--s5)}.dg .hero .big small{font-size:var(--t-h)}.dg .hero p{font-size:var(--t-body)}.dg .hero .btn{align-self:flex-start}
.dg .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.dg .works{grid-template-columns:repeat(3,minmax(0,1fr))}
.dg .spg{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1320px){.dg>.c4,.dg>.c5,.dg>.c6,.dg>.c7{grid-column:span 12}.dg .works{grid-template-columns:repeat(2,minmax(0,1fr))}}
.g2>.sec{margin-top:0}   /* 나란히 놓인 카드는 위 여백 규칙(.sec+.sec)을 안 받는다 */
.val{font-size:var(--t-d1);font-weight:800;letter-spacing:-.04em;margin:var(--s1) 0 var(--s2);line-height:1.1;font-variant-numeric:tabular-nums}
.val.empty{color:var(--g400);font-size:var(--t-h);font-weight:500}
.sub{color:var(--g600);font-size:var(--t-label);line-height:1.6}
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 var(--s3);border-radius:var(--rf);font-size:var(--t-cap);font-weight:600;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-on{color:var(--on);background:var(--on-bg)}
.b-wip{color:var(--wip);background:var(--wip-bg)}
.b-off{color:var(--off);background:var(--off-bg)}
.err{color:var(--bad);font-size:var(--t-label);background:var(--bad-bg);border-radius:var(--r-el);padding:var(--s3) var(--s4);margin-top:var(--s3);line-height:1.5}
/* 목록 */
.list{background:#fff;border-radius:var(--r-card);padding:var(--s2);box-shadow:var(--shadow)}
.list a,.list div.i{display:flex;gap:var(--s3);align-items:center;min-height:56px;padding:var(--s3) var(--s4);border-radius:var(--r-el);font-size:var(--t-body);transition:background .2s ease}
.list a:hover{background:var(--g50)}
.two.half{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:1180px){.two.half{grid-template-columns:1fr}}
.hb{display:flex;flex-direction:column;gap:var(--s2)}
.hr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:var(--s3);align-items:center;font-size:var(--t-label);min-height:32px}
.hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hl small{color:var(--g500)}.hl a:hover{text-decoration:underline}
.ht{height:8px;border-radius:4px;background:var(--g100);overflow:hidden}.ht i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--brand)}
.hr b{font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.list .dt{margin-left:auto;color:var(--g500);font-size:var(--t-label);font-variant-numeric:tabular-nums}
.empty-box{background:#fff;border-radius:var(--r-card);padding:var(--s8);text-align:center;color:var(--g500);font-size:var(--t-label);box-shadow:var(--shadow)}
.empty-ask{display:block;width:max-content;margin:var(--s3) auto 0;padding:7px 14px;border-radius:10px;border:1px solid var(--g200);color:var(--g800);font-weight:600;text-decoration:none}.empty-ask:hover{background:var(--g50)}
/* 표 */
.tablebox{background:#fff;border-radius:var(--r-card);padding:var(--s2) var(--s4);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{padding:var(--s4) var(--s3);text-align:left;font-size:var(--t-label);vertical-align:middle;border-bottom:1px solid var(--g100)}
tr:last-child td{border-bottom:0}
td{font-variant-numeric:tabular-nums;font-size:var(--t-body)}
th{color:var(--g500);font-size:var(--t-cap);font-weight:600;letter-spacing:.02em}
/* 폼 */
input,select,textarea{width:100%;background:var(--g100);color:var(--g900);border:1px solid transparent;border-radius:var(--r-el);height:44px;padding:0 var(--s4);font:inherit;font-size:var(--t-body);transition:background .2s ease,border-color .2s ease}
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;flex:none;accent-color:var(--brand)}   /* 위 칸 규칙이 체크박스까지 늘리던 것(2026-10-19) */
input:hover,select:hover,textarea:hover{background:var(--g200)}
input:focus,select:focus,textarea:focus{background:#fff;border-color:var(--g900);outline:0}
textarea{height:auto;min-height:96px;padding:var(--s3) var(--s4);resize:vertical}
label{display:block;font-size:var(--t-label);color:var(--g600);margin-bottom:var(--s1);font-weight:500}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.row+.row,.row+div{margin-top:var(--s4)}
.muted{color:var(--g500);font-size:var(--t-label)}
.ok{background:var(--on-bg);color:var(--on);box-shadow:none}
.actions{display:flex;gap:var(--s3);margin-top:var(--s5)}
@media(max-width:1080px){.g2{grid-template-columns:1fr}.hero,.dg .hero{grid-template-columns:1fr;padding:var(--s6)}.hero .art{order:-1}}
@media(max-width:900px){.rowitem{grid-template-columns:28px minmax(0,1fr) 84px 88px;row-gap:var(--s2)}.rowitem .value{grid-column:2/5}.rowitem .chev{display:none}}
@media(max-width:760px){
.layout{flex-direction:column}
.side{width:auto;flex:none;height:auto;position:static;padding:var(--s4)}
.brand,.brand-nc{margin-bottom:var(--s3)}
.help{display:none}
.nav-end{margin-top:var(--s2);padding-top:0;border-top:0}.nav-end a{display:inline-flex;background:rgba(255,255,255,.06)}
.nav{display:flex;gap:var(--s2);overflow-x:auto}
.nav-g{display:none}
.nav a{white-space:nowrap;background:rgba(255,255,255,.06)}
.side .foot{display:none}
.content{padding:var(--s5) var(--s4) var(--s9)}.topbar{padding:0 var(--s4)}.kpis,.works,.gal,.wikihero{grid-template-columns:1fr}
.spg{grid-template-columns:1fr}.sp:nth-child(2){border-top:1px solid var(--g100)}
.strip{flex-wrap:wrap}
.strip .btn{margin-left:0;width:100%}
h1{font-size:var(--t-h)}.hero .big,.val,.rh1 h2{font-size:28px}.kpi .kv,.rt .tv{font-size:26px}
}
/* ── 모션: html.mo(머리의 스크립트가 켠다)일 때만. 화면에 들어올 때 한 번 — 블록이 차례로 떠오르고, 숫자가 올라가고, 게이지·막대·선·점이 그려진다.
   블록은 스크립트가 .in 을 붙이면 보인다. 블록 안의 그림은 .mw(스크립트가 붙임) 아래에서만 숨겼다 그려서, 블록 밖에 놓인 같은 부품은 건드리지 않는다.
   transform·opacity·clip-path·stroke 만 움직인다(배치를 다시 계산하지 않는다). */
.mo :is(.hero,.kpi,.sec:not(.aix),.aix-top,.aix-box,.work,.gcard,.rhero,.rt,.rcard,.rmis){opacity:0;transform:translateY(10px)}
.mo :is(.hero,.kpi,.sec:not(.aix),.aix-top,.aix-box,.work,.gcard,.rhero,.rt,.rcard,.rmis).in{opacity:1;transform:none;transition:opacity .35s ease,transform .5s var(--ease-out),background .2s ease;transition-delay:calc(var(--i,0)*45ms),calc(var(--i,0)*45ms),0s}
/* 등장이 끝나면(.done) 등장용 느린 전환을 걷어 내고 손에 반응하는 짧은 전환으로 바꾼다 */
.mo :is(.hero,.kpi,.sec:not(.aix),.aix-top,.aix-box,.work,.gcard,.rhero,.rt,.rcard,.rmis).in.done{transition:transform .2s var(--ease-out),box-shadow .2s ease,background .2s ease}
.mw:not(.in) :is(.sp-bar,.svb,.aix-bar,.ht) i{clip-path:inset(0 100% 0 0)}
.mw .ht i{clip-path:inset(0);transition:clip-path 1s var(--ease-out,cubic-bezier(.23,1,.32,1)),filter .15s ease;transition-delay:calc(var(--k,0)*50ms + .2s),0s}
.mw:not(.in) .hr b{opacity:0}.mw .hr b{transition:opacity .4s ease;transition-delay:calc(var(--k,0)*50ms + .6s)}
.mw :is(.sp-bar,.svb,.aix-bar) i{clip-path:inset(0);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1) .3s}
.mw:not(.in) rect[fill="url(#barg)"]{transform:scaleY(0)}
.mw rect[fill="url(#barg)"]{transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s cubic-bezier(.34,1.3,.5,1),opacity .15s ease;transition-delay:calc(var(--k,0)*60ms + .2s),0s}
.mw:not(.in) .aix-g circle.v{stroke-dashoffset:var(--len)}
.mw .aix-g circle.v{transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .25s}
.mw:not(.in) .aix-dots i{transform:scale(0)}
.mw .aix-dots i{transition:transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--k,0)*16ms + .25s)}
.mw:not(.in) .aix-qr:not(.hd) .aix-p3{opacity:0;transform:translateX(-6px)}
.mw .aix-qr .aix-p3{transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--k,0)*50ms + .2s)}
.mw:not(.in) .ln{stroke-dasharray:1;stroke-dashoffset:1}
.mw .ln{stroke-dasharray:1;transition:stroke-dashoffset 1.5s ease .3s}
.mw:not(.in) :is(.ln2,.ln-end){opacity:0}
.mw :is(.ln2,.ln-end){transition:opacity .6s ease 1.3s}
.mw:not(.in) .hx-water{transform:translateY(var(--rise))}
.mw .hx-water{transition:transform 1.9s cubic-bezier(.2,.7,.2,1) .2s}
.mw:not(.in) .hx-wt{opacity:0}
.mw .hx-wt{transition:opacity .6s ease 1.2s}
@keyframes mo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero .art svg{animation:mo-float 6s ease-in-out infinite}
@keyframes mo-pulse{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(3.4);opacity:0}}
.pulse{transform-box:fill-box;transform-origin:center;animation:mo-pulse 2.4s ease-out infinite}
/* ── 손에 반응하는 모션 — 누르면 살짝 작아지고(0.16초), 마우스를 올리면 떠오르고, 그래프는 올린 곳만 진해지며 값이 바로 따라붙는다.
   올리기 효과는 마우스가 있는 기기에서만(터치에서 눌린 채 남지 않게). */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--shadow-up:0 2px 4px rgba(26,28,34,.05),0 14px 32px rgba(26,28,34,.10)}
:is(.btn,.work,.gcard,.list a,.help a,.nav a,summary,.rowitem){transition:transform .16s var(--ease-out),background .2s ease,box-shadow .2s ease,color .2s ease}
:is(.btn,.work,.gcard,.list a,.help a,summary):active,.mo .in.done:is(.work,.gcard):active{transform:scale(.97)}
.nav a:active{transform:scale(.98)}
.nav a svg{transition:transform .2s var(--ease-out),color .2s ease}
.hr{border-radius:6px;transition:background .15s ease}.ht i{transition:filter .15s ease}
.aix-dots i{transition:transform .15s var(--ease-out)}
rect[fill="url(#barg)"]{transition:opacity .15s ease}
@media (hover:hover) and (pointer:fine){
  :is(.work,.gcard):hover,.mo .in.done:is(.work,.gcard):hover{transform:translateY(-3px);box-shadow:var(--shadow-up)}
  .kpi:hover,.mo .in.done.kpi:hover{box-shadow:var(--shadow-up),inset 0 1px 0 rgba(255,255,255,.9)}
  .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,90,60,.22)}
  .btn.ghost:hover{box-shadow:0 4px 12px rgba(26,28,34,.08)}
  .btn:active{transform:scale(.97)}
  .nav a:hover svg{transform:translateX(2px)}
  .list a:hover{transform:translateX(2px)}
  svg[role=img]:hover rect[fill="url(#barg)"]{opacity:.4}
  svg[role=img] rect[fill="url(#barg)"]:hover{opacity:1}
  .hr:hover{background:var(--g50)}.hr:hover .ht i{filter:brightness(1.15) saturate(1.2)}
  .aix-dots i:hover{transform:scale(1.5)}
}
/* 그래프 값 툴팁 — 하나를 돌려 쓴다. 위치는 transform 으로만 옮긴다 */
.tip{position:fixed;left:0;top:0;z-index:80;pointer-events:none;padding:6px 10px;border-radius:8px;background:var(--g900);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.18);opacity:0;transition:opacity .12s ease;will-change:transform}
.tip.on{opacity:1}
@media print{.mo :is(.hero,.kpi,.sec,.aix-top,.aix-box,.work,.gcard,.rhero,.rt,.rcard,.rmis){opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}