/* collabo 앱 레이아웃 — 키트 치수 준수(사이드바 248·톱바 60·본문패딩 28). */
.hidden{display:none!important}
.space-floorplan{display:block;width:100%;height:auto}
/* 공식 배정 원장: 시설별 단위를 분리하고 긴 상세는 우측 드로어에서 확인한다. */
.space-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.space-heading h2{margin:0 0 8px;font-size:var(--au-fs-section)}
.space-heading p{margin:0;color:var(--sub);font-size:var(--au-fs-sm)}
.space-source{font-size:var(--au-fs-sm);color:var(--sub);line-height:1.7;max-width:440px;overflow-wrap:anywhere}
.space-programs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.space-program{border-top:2px solid var(--brand);padding:20px;background:var(--surface);border-bottom:1px solid var(--line)}
.space-program h3{margin:0 0 8px;font-size:var(--au-fs-section)}
.space-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0 0}
.space-metrics dt{font-size:var(--au-fs-sm);color:var(--sub);margin-bottom:8px}
.space-metrics dd{margin:0;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3}
.space-filters{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.center-news-page .center-news-toolbar{display:flex;align-items:center;flex-wrap:nowrap;gap:8px}
.center-news-toolbar .dt-q{flex:1 1 180px;min-width:140px;width:auto;max-width:none}
.news-filters{display:flex;align-items:center;flex:0 1 auto;min-width:0;gap:8px;margin:0}
.news-filters select,.news-filters input,.center-news-toolbar .dt-q,.news-filters .btn{box-sizing:border-box;height:40px;min-height:40px;margin:0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--au-radius-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--au-fs-sm);line-height:1.3}
.news-filters select{width:124px;max-width:100%}
.news-date-range{display:flex;align-items:center;gap:8px;min-width:0}
.news-date-range input{width:144px;min-width:0;font-variant-numeric:tabular-nums}
.center-news-toolbar .dt-n,.news-filters .btn{white-space:nowrap}
.news-title-line{display:flex;align-items:center;gap:8px;min-width:0}
.news-title-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news-group-button{flex:none;white-space:nowrap;padding:4px 8px;font-size:var(--au-fs-sm)}
.news-related-row td{background:var(--surface);font-size:var(--au-fs-sm);white-space:nowrap}
.news-related-row td:first-child{border-left:4px solid var(--brand)}
@media(max-width:1100px){.center-news-page .center-news-toolbar{flex-wrap:wrap}.center-news-toolbar .dt-q{flex:1 1 200px}.news-filters{flex-wrap:wrap}.news-filters select{width:120px}}
@media(max-width:700px){.center-news-toolbar .dt-q{flex:1 1 100%;width:100%}.news-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:1 1 100%;width:100%}.news-filters select{width:100%}.news-date-range{grid-column:1/-1}.news-date-range input{flex:1 1 0;width:0}.news-filters .btn{justify-self:start}.center-news-toolbar .dt-n{margin-left:auto}}
.space-filters label{display:flex;align-items:center;gap:8px;font-size:var(--au-fs-sm);color:var(--ink2)}
.space-filters select{max-width:240px;min-width:100px}
.space-company{border:0;border-bottom:1px solid var(--line2);background:transparent;color:var(--brand-d);font:inherit;padding:4px 0;cursor:pointer}
.space-company:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.space-notes{border:1px solid var(--line);padding:12px 16px;margin:16px 0;font-size:var(--au-fs-sm);color:var(--ink2);line-height:1.7}
.space-notes summary{cursor:pointer;font-weight:700}.space-page .card{margin-top:20px}
@media(max-width:1100px){.space-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.space-heading{display:block}.space-source{margin-top:16px}.space-programs{grid-template-columns:1fr}.space-program{padding:16px}.space-metrics{gap:16px}.space-metrics dd{font-size:24px}.space-filters label{flex:1 1 120px;display:block}.space-filters select{display:block;width:100%;max-width:none;margin-top:8px}}
/* Public introduction: corpus §8 label/head, inline facts, and hairline feature rows.
   Only the anonymous home opts in. Authenticated workspaces retain their original shell. */
#app.public-landing-mode{display:block;background:var(--surface);min-height:100dvh}
.public-landing-mode>.side,.public-landing-mode>.side-scrim,.public-landing-mode .topbar{display:none!important}
.public-landing-mode>.main{display:block;min-height:100dvh}
.public-landing-mode #view{padding:0;max-width:none;overflow:visible}
.public-landing{max-width:1360px;margin:0 auto;padding:0 48px;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.public-landing button{font:inherit;cursor:pointer}
.public-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px;border-bottom:1px solid var(--line)}
.public-wordmark{font-size:22px;font-weight:700;color:var(--brand-d)}
.public-header nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.public-header nav>button:not(.btn),.public-footer>button{border:0;background:none;padding:8px 0;color:var(--ink2);font-size:var(--au-fs-sm)}
.public-header button:focus-visible,.public-landing a:focus-visible,.public-text-action:focus-visible,.public-carousel-controls button:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.public-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:64px 0 48px}
.public-label{margin:0 0 16px;font-size:var(--au-fs-sm);font-weight:700;color:var(--brand-d);letter-spacing:normal;line-height:1.4}
.public-hero h1{font-size:clamp(32px,3.5vw,48px);font-weight:700;line-height:1.35;letter-spacing:normal;margin:0 0 24px;max-width:12em}
.public-intro{font-size:16px;line-height:1.8;color:var(--ink2);margin:0 0 28px;max-width:32em}
.public-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.public-text-action{border:0;border-bottom:1px solid var(--line2);padding:8px 0;background:none;color:var(--brand-d);font-size:var(--au-fs-sm);font-weight:700;line-height:1.5}
.public-access-note,.public-carousel-note{font-size:var(--au-fs-sm);line-height:1.7;color:var(--sub);margin:20px 0 0}
.public-carousel{min-width:0;border-top:2px solid var(--brand);padding-top:16px}
.public-slide{margin:0}.public-image-frame{position:relative;background:var(--surface2);min-width:0}
.public-slide-image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.public-landing [hidden]{display:none!important}
.public-image-fallback{padding:32px;color:var(--ink2);line-height:1.7}
.public-workflow{background:var(--surface2);border:1px solid var(--line);padding:32px}
.public-workflow h2{font-size:28px;line-height:1.4;margin:0 0 28px;font-weight:700}
.public-workflow-actors{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);font-size:16px;font-weight:700}
.public-workflow-actors>span:nth-child(2){color:var(--brand)}
.public-workflow dl{margin:16px 0 0}.public-workflow dl>div{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.public-workflow dt{font-size:var(--au-fs-sm);color:var(--sub)}.public-workflow dd{margin:0;font-size:var(--au-fs-sm);color:var(--ink2)}
.public-workflow-note{font-size:var(--au-fs-sm);color:var(--sub);line-height:1.7;margin:24px 0 0}
.public-slide-caption{padding:20px 0 0}.public-slide-caption .public-label{margin-bottom:8px}
.public-slide-caption h2{font-size:22px;line-height:1.4;margin:0 0 8px}.public-slide-caption p{font-size:var(--au-fs-sm);line-height:1.7;color:var(--ink2);margin:8px 0}
.public-slide-caption .public-image-credit{color:var(--sub)}.public-image-credit a{color:var(--brand-d)}
.public-carousel-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.public-slide-count{margin-right:auto;font-size:var(--au-fs-sm);font-variant-numeric:tabular-nums}
.public-carousel-controls button{border:1px solid var(--line2);background:var(--surface);color:var(--ink2);padding:8px 12px;font-size:var(--au-fs-sm)}
.public-carousel-controls button:disabled{cursor:default;color:var(--sub)}
.public-facts{display:flex;gap:24px;flex-wrap:wrap;padding:24px 0;margin:0;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:var(--au-fs-sm);color:var(--ink2)}
.public-facts>li+li{padding-left:24px;border-left:1px solid var(--line2)}
.public-features{padding:64px 0 48px;scroll-margin-top:24px}.public-section-head{margin-bottom:28px}
.public-section-head .public-label{margin-bottom:8px}.public-section-head h2{font-size:28px;line-height:1.4;margin:0;font-weight:700}
.public-feature-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr) auto;gap:32px;padding:28px 0;border-top:1px solid var(--line);align-items:start}
.public-feature-row h3{margin:0;font-size:21px;line-height:1.5}.public-feature-row p{margin:0;font-size:var(--au-fs-body);line-height:1.8;color:var(--ink2)}
.public-feature-row .public-audience{font-size:var(--au-fs-sm);color:var(--sub);margin-top:12px}
.public-updates{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;padding:40px 0 64px;border-top:1px solid var(--line)}
.public-update{padding:16px 0;margin:0;border-top:1px solid var(--line);font-size:var(--au-fs-body);line-height:1.6}
.public-update>b,.public-update>span{display:block}.public-update>span{color:var(--sub);font-size:var(--au-fs-sm);margin-top:8px}
.public-updates>div>div>p{color:var(--ink2);line-height:1.7}.public-footer{display:flex;align-items:start;justify-content:space-between;gap:32px;padding:32px 0;border-top:1px solid var(--line);font-size:var(--au-fs-sm)}
.public-footer>span{font-weight:700;flex-shrink:0}.public-footer p{margin:0;max-width:44em;line-height:1.8;color:var(--sub)}
.public-loading{padding:48px;max-width:720px;line-height:1.8}.public-loading button{margin:16px 16px 0 0}
@media(max-width:900px){.public-landing{padding:0 28px}.public-header{align-items:start;flex-direction:column;gap:12px;padding:24px 0}.public-header nav{gap:20px}.public-hero{gap:28px;padding:40px 0;grid-template-columns:minmax(0,1fr)}.public-hero h1{max-width:18em}.public-feature-row{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}.public-feature-row>.public-text-action{grid-column:2;justify-self:start}.public-updates{gap:32px}.public-footer{flex-wrap:wrap}}
@media(max-width:520px){.public-landing{padding:0 20px}.public-header nav{gap:12px;width:100%;justify-content:space-between}.public-header nav>button:not(.btn){font-size:var(--au-fs-sm)}.public-header .btn.sm{padding:8px 12px}.public-hero{padding:32px 0;gap:28px}.public-hero h1{font-size:32px}.public-intro{font-size:var(--au-fs-body)}.public-workflow{padding:24px}.public-workflow h2{font-size:26px}.public-workflow dl>div{grid-template-columns:88px 1fr;gap:12px}.public-facts{display:block;padding:12px 0}.public-facts>li,.public-facts>li+li{padding:8px 0;border:0}.public-features{padding:40px 0 32px}.public-feature-row{display:block;padding:24px 0}.public-feature-row h3{margin-bottom:12px}.public-feature-row>.public-text-action{margin-top:12px}.public-updates{grid-template-columns:1fr;gap:40px;padding-bottom:40px}.public-section-head h2{font-size:25px}.public-footer{display:block;padding:24px 0}.public-footer p{margin:12px 0}.public-loading{padding:24px}}
.mono{font-family:var(--mono);font-feature-settings:'tnum' 1}
.ey{font-family:var(--au-font);font-size:var(--au-fs-xs);letter-spacing:normal;text-transform:none;color:var(--sub)}
.boot{position:fixed;inset:0;display:grid;place-items:center;color:var(--sub);font-size:var(--au-fs-sm)}

/* ── 버튼 ── */
/* ⚠ white-space:nowrap 은 선택이 아니다 — 한글은 기본(word-break:normal)에서 **글자 사이 어디서나** 줄바꿈된다.
   버튼이 좁은 칸(드로어 등)에 들어가면 '회사 검색' 이 '회사 검 / 색' 으로 쪼개진다. 라벨은 통째로 유지하고,
   넘치는 것은 컨테이너가 flex-wrap 으로 다음 줄에 내린다.
   ⚠ display 를 반드시 준다 — .btn 은 <button>(기본 inline-block)뿐 아니라 <a> 에도 붙는다.
      <a> 는 인라인이라 상하 padding 이 줄 높이를 못 밀어 윗줄과 겹치고, width:100% 도 먹지 않는다.
      (그래서 예전엔 호출부에서 style="display:inline-block" 으로 땜질하고 있었다.) */
.btn{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:100%;padding:12px;border:0;border-radius:var(--au-radius-sm);font-weight:700;font-size:var(--au-fs-body);
  background:var(--au-primary);color:var(--au-primary-ink);white-space:nowrap}
.btn:hover{background:var(--brand-d)}
.btn.line{background:var(--surface);border:1px solid var(--line2);color:var(--ink)}
.btn.line:hover{background:var(--surface2)}
.btn.sm{width:auto;padding:8px 14px;font-size:var(--au-fs-sm)}

/* ── 로그인 게이트 ── */
#auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.auth-brand{background:var(--au-primary);color:var(--on-brand);padding:56px 52px;
  display:flex;flex-direction:column;justify-content:space-between}
.auth-brand .wm{font-size:26px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center}
/* ⚠ .wm 에 gap 을 주면 안 된다 — 텍스트노드('콜라보')와 <b>스테이션</b> 이 각각 flex 아이템이 되어
   상호명이 '콜라보 스테이션' 으로 벌어진다. 간격은 마크와 글자 사이에만 margin 으로 준다. */
/* 로고 마크 — 오렌지 라운드 사각 + 두 점(favicon·og 카드와 같은 형태로 통일) */
.mark{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--au-accent);margin-right:11px;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.mark>i{width:10px;height:10px;border-radius:50%;background:#fff;font-style:normal;
  box-shadow:15px 0 0 -1px rgba(255,255,255,.6)}
.side .wm .mark{width:26px;height:26px;border-radius:8px;margin-right:9px}
.side .wm .mark>i{width:8px;height:8px;box-shadow:11px 0 0 -1px rgba(255,255,255,.6)}
.auth-brand .wm b{border-bottom:3px solid var(--au-accent);padding-bottom:2px}
/* ⚠ max-width 에 ch 를 쓰지 않는다 — ch 는 '숫자 0 의 폭'(Pretendard ≈0.55em)이라 한글 기준으로 한참 좁다.
   15ch ≈ 247px 인데 '게임기업과 허브센터를' 은 30px×10자 ≈ 300px → 모두가 처음 보는 문장이 글자 중간에서 접혔다.
   줄바꿈은 마크업의 <br> 이 이미 지정한다. */
.auth-brand .lead{font-size:30px;line-height:1.28;font-weight:700;max-width:none;margin:0}
.auth-brand .lead span{color:var(--au-accent)}
.auth-brand .foot{font-family:var(--mono);font-size:var(--au-fs-xs);letter-spacing:.08em;color:var(--on-brand-soft);text-transform:uppercase;overflow-wrap:anywhere}
.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px;min-width:0}
.auth-form{width:100%;max-width:360px;min-width:0}
.auth-form .ey{margin-bottom:14px}
.auth-form h1{font-size:23px;font-weight:800;margin:0 0 4px}
.auth-form .sub{color:var(--sub);font-size:var(--au-fs-sm);margin:0 0 24px}
.auth-remember{display:flex;gap:8px;align-items:flex-start;font-size:var(--au-fs-sm);line-height:1.7;margin:16px 0}
.auth-remember input{width:16px;height:16px;flex:none;accent-color:var(--au-primary);margin-top:4px}
#passwordAuthControls .tabs{margin:16px 0}
#passwordAuthControls [hidden]{display:none!important}
#passwordMessage{font-size:var(--au-fs-sm);line-height:1.7;overflow-wrap:anywhere}
#passwordMessage:empty{display:none}
.auth-sent{outline:none}
.auth-sent-email{display:block;overflow-wrap:anywhere;font-size:var(--au-fs-body);margin:20px 0 8px}
.auth-sent-steps{padding-left:24px;margin:24px 0;line-height:1.7}
.auth-sent-steps li+li{margin-top:12px}
.auth-sent .btn+.btn{margin-top:12px}
.auth-sent .btn{white-space:normal}
.auth-error{padding:12px;border:1px solid var(--au-danger);border-radius:var(--au-radius-sm);color:var(--ink);outline:none;overflow-wrap:anywhere}
.auth-error:empty{display:none}
.auth-recovery{margin-top:16px;overflow-wrap:anywhere}
.auth-recovery-actions{display:flex;flex-wrap:wrap;gap:8px}
.auth-recovery-actions .btn{width:auto;white-space:normal}
.orline{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:var(--au-fs-xs);margin:18px 0;
  font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.orline::before,.orline::after{content:'';flex:1;height:1px;background:var(--line)}
.f{margin-bottom:16px;min-width:0}
.f label{display:block;font-family:var(--au-font);font-size:var(--au-fs-sm);letter-spacing:normal;text-transform:none;color:var(--sub);margin-bottom:8px}
/* ⚠ input 만 꾸미면 안 된다 — 같은 폼 안의 select·textarea 가 브라우저 기본 위젯으로 남아
   바로 옆 칸과 높이·테두리·라운드가 전부 다르게 보인다(폼 19곳에서 발생하고 있었다). */
.f input,.f select,.f textarea{width:100%;min-height:40px;padding:8px 12px;line-height:1.5;border:1px solid var(--line2);
  border-radius:var(--au-radius-sm);font-size:var(--au-fs-body);background:var(--surface);outline:none}
.f textarea{line-height:1.7;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--au-primary)}
/* Forms and filters share controls even when they do not use the .f helper. */
:where(.content,.p-body) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]),select,textarea){
  max-width:100%;min-width:0;min-height:40px;padding:8px 12px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);background:var(--surface);color:var(--ink);font:inherit;line-height:1.5}
:where(.content,.p-body) :where(input,select,textarea):disabled{background:var(--surface2);color:var(--sub);cursor:not-allowed}
:where(.content,.p-body) :where(input,textarea)[readonly]{background:var(--surface2)}
:where(.content,.p-body) :where(input[type=checkbox],input[type=radio]){width:16px;height:16px;min-height:0;flex:none;padding:0;margin:4px 8px 0 0;accent-color:var(--au-primary);vertical-align:top}
:where(.content,.p-body) label:has(>input[type=checkbox]),:where(.content,.p-body) label:has(>input[type=radio]){display:flex;align-items:flex-start;gap:8px;font-family:var(--au-font);font-size:var(--au-fs-sm);letter-spacing:normal;line-height:1.7}
:where(.content,.p-body) label>input[type=checkbox],:where(.content,.p-body) label>input[type=radio]{margin-inline-end:0}
.f input[type=checkbox],.f input[type=radio]{width:16px;height:16px;min-height:0;padding:0;flex:none}
.row-act>.btn{width:auto;min-height:40px}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--au-primary);outline-offset:4px}
.detail-list{display:grid;grid-template-columns:minmax(100px,32%) minmax(0,1fr);margin:16px 0;font-size:var(--au-fs-sm);line-height:1.7}
.detail-list>dt,.detail-list>dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;min-width:0}
.detail-list>dt{padding-right:16px;color:var(--sub)}
.detail-list>dd{font-weight:600}
.ui-dialog-scrim{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--ink) 28%,transparent)}
.ui-dialog{width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--au-radius);box-shadow:var(--au-shadow-lg);overflow-wrap:anywhere}
.ui-dialog h2{margin:0 0 16px;font-size:var(--au-fs-section)}
.ui-dialog p{line-height:1.7;white-space:pre-wrap;margin:0 0 20px}
.ui-dialog textarea{width:100%;font:inherit;padding:8px 12px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);background:var(--surface);color:var(--ink)}
/* §4: 읽는 텍스트는 dim(--sub) 이상. faint 는 라벨 전용 — 본문을 faint 로 깔면 안 읽힌다. */
.fine{color:var(--sub);font-size:var(--au-fs-sm);line-height:1.7;margin-top:20px}
/* 계정 버튼 — 로그아웃 바로 위. 누르면 '내 계정'(계정 설정) */
.acct{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:1px solid transparent;border-radius:var(--au-radius-sm);padding:7px 9px}
.acct:hover{background:var(--surface);border-color:var(--line)}
.acct-ic{flex:0 0 auto;font-size:var(--au-fs-xs);font-weight:700;color:var(--brand-d);
  background:var(--au-primary-weak);border-radius:var(--au-radius-pill);padding:2px 7px}
.acct-mail{flex:1;min-width:0;font-family:var(--mono);font-size:var(--au-fs-sm);color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 사이드바 섹션 — 우측 최상위 레이어 메뉴. 항목 수가 늘어도 nav 높이는 변하지 않는다. */
.nav-group{margin-top:4px}
.nav-sec-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:8px 12px;background:none;border:0;border-radius:var(--au-radius-sm);
  font-size:var(--au-fs-body);font-weight:700;letter-spacing:normal;color:var(--ink2);text-align:left}
.nav-sec-btn:hover{background:var(--surface);color:var(--ink2)}
.nav-sec-btn .caret{transition:transform .15s;font-size:var(--au-fs-body);line-height:1}
.nav-group.active .nav-sec-btn,.nav-sec-btn[aria-expanded="true"]{color:var(--brand-d);background:var(--au-primary-weak)}
.nav-flyout{position:fixed;inset:auto;margin:0;box-sizing:border-box;
  width:min(280px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow-y:auto;
  padding:8px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);
  background:var(--surface);color:var(--ink);box-shadow:var(--nav-flyout-shadow,0 8px 24px var(--line2))}
.nav-flyout-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:var(--au-fs-sm)}
.nav-flyout-head button{border:0;background:var(--surface2);color:var(--ink2);padding:4px 8px;border-radius:var(--au-radius-sm)}
.nav-flyout a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px;border-radius:var(--au-radius-sm);font-size:var(--au-fs-body);color:var(--ink2);text-decoration:none;word-break:keep-all}
.nav-flyout a:hover,.nav-flyout a:focus-visible{background:var(--au-primary-weak);color:var(--brand-d)}

/* 키-값 줄
   ⚠ 라벨 칸이 flex:0 0 110px 이면 grow·shrink 가 둘 다 꺼진다. 한글은 min-content 바닥이 낮아서
      (글자 사이 어디서나 끊긴다) **넘치지 않고 조용히 두 줄로 접힌다** — 그래서 더 눈에 안 띈다.
      값 <b> 에는 min-width:0 이 없어 반대로 긴 URL·마스킹 메일이 칸을 밀어냈다.
   ⚠ .kv 는 '라벨:값' 전용이다. '회사명:금액' 같은 **데이터 행**에 쓰면 회사명이 라벨 칸에 갇힌다
      → 그런 행은 .kv.pair 를 쓴다(왼쪽이 늘어나고 값이 오른쪽에 붙는다). */
.kv{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--au-fs-sm)}
.kv:last-child{border-bottom:0}
.kv>span{flex:0 0 110px;min-width:0;color:var(--sub)}
.kv>b{min-width:0;overflow-wrap:anywhere}
.kv.pair>span{flex:1 1 auto;color:var(--ink)}
.kv.pair>b{flex:0 0 auto;text-align:right;color:var(--ink2)}

/* 구성원 행의 승인/거절 버튼 */
.row-act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--ui-control-gap);flex:0 0 auto}

/* ── 인력관리 ── */
.tabs{display:flex;gap:var(--ui-control-gap);margin-bottom:16px;flex-wrap:wrap}
.tabs.sub{margin:8px 0 0}
.section-tabs{gap:var(--ui-control-gap);padding:8px;background:var(--surface2);border-radius:var(--au-radius-sm);max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scroll-padding:8px;scrollbar-gutter:stable}
.section-tabs .tab{border-radius:var(--au-radius-sm);flex:none;min-height:40px;padding:8px 16px;white-space:nowrap}
.section-tabs .tab:focus-visible{outline:2px solid var(--au-primary);outline-offset:-4px}
.section-tab-panel{min-width:0}
.section-tab-panel[hidden]{display:none!important}
.section-tab-panel:focus-visible{outline:2px solid var(--au-primary);outline-offset:4px}
.news-category-tabs button{padding:8px 16px;border:1px solid var(--line);border-radius:var(--au-radius-sm);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.news-category-tabs button[aria-selected="true"]{background:var(--au-primary);color:var(--au-surface);border-color:var(--au-primary)}
.news-filters [hidden]{display:none!important}
.tab{padding:8px 14px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--au-radius-pill);font-size:var(--au-fs-sm);font-weight:700;color:var(--ink2)}
.tab:hover{border-color:var(--line2)}
.tab.on{background:var(--au-primary);border-color:var(--au-primary);color:#fff}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--au-radius);padding:14px 16px}
.stat>span{display:block;font-size:var(--au-fs-xs);color:var(--sub);margin-bottom:4px}
.stat>b{font-size:20px;font-weight:800}
.ops-board{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ops-board .stat{display:flex;flex-direction:column;gap:12px;min-height:160px;text-decoration:none;color:var(--ink);padding:20px}
.ops-board .stat>b{font-size:clamp(32px,4vw,48px);font-variant-numeric:tabular-nums;line-height:1.2}
.ops-board .stat:hover,.ops-board .stat:focus-visible{border-color:var(--au-primary);background:var(--au-primary-weak)}
.ops-work-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0 0 16px}
.ops-year-picker{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ops-year-picker[hidden]{display:none}
.ops-year-picker label{margin:0;font-size:var(--au-fs-sm)}
.ops-year-picker input{width:88px;min-width:0;padding:8px;text-align:center;font-size:var(--au-fs-body);border:1px solid var(--line2);border-radius:var(--au-radius-sm);background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums}
.ops-year-picker .btn{min-width:36px;min-height:36px;padding:4px 8px;font-size:20px;line-height:1.2}
.ops-work-meta{margin:0;flex:1 1 240px}
.ops-doc-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.ops-doc-counts>span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--au-radius-sm);font-size:var(--au-fs-sm)}
.ops-doc-counts b{font-size:20px;font-variant-numeric:tabular-nums}
@media(max-width:800px){.ops-doc-counts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Yearly business performance: entire metric tile is an accessible detail opener. */
.ops-performance-drill{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  min-width:0;width:100%;height:100%;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.ops-performance-drill>b{font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ops-performance-drill>span{max-width:100%;overflow-wrap:anywhere}
.ops-performance-drill .ops-performance-more{margin-top:auto;font-weight:700;color:var(--brand-d);font-size:var(--au-fs-xs)}
.ops-performance-drill:hover{border-color:var(--au-primary);background:var(--au-primary-weak)}
.ops-performance-drill:focus-visible{outline:3px solid var(--au-primary);outline-offset:2px}
@media (hover:none){.ops-performance-drill{min-height:132px}}
.ops-summary-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
/* Dashboard summary must remain within phone viewport, not a two-column desktop canvas. */
@media(max-width:800px){
  .ops-summary-panels{grid-template-columns:minmax(0,1fr)}
  .ops-summary-panels > .card{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .ops-summary-panels .ops-performance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-summary-panels .stat{min-width:0}
  .ops-summary-panels .stat>b{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
}
@media(max-width:390px){
  .ops-summary-panels .ops-performance{grid-template-columns:minmax(0,1fr)}
}
.ops-summary-panels.is-sparse{grid-template-columns:1fr;gap:0}
.ops-summary-panels.is-sparse .ops-performance{grid-template-columns:repeat(4,minmax(0,1fr))}
.ops-summary-panels.is-sparse .ops-kpi-categories{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1024px){.ops-summary-panels.is-sparse .ops-performance,.ops-summary-panels.is-sparse .ops-kpi-categories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ops-summary-panels.is-sparse .ops-kpi-categories{grid-template-columns:1fr}}
.ops-shortcuts{display:flex;flex-wrap:wrap;gap:12px}
.ops-shortcuts a{padding:12px;border:1px solid var(--line);border-radius:var(--au-radius-sm);color:var(--brand-d)}
.ops-empty-performance{margin:12px 0;padding:12px;background:var(--surface2);border-radius:var(--au-radius-sm);font-size:var(--au-fs-sm)}
.ops-method{font-size:var(--au-fs-sm);color:var(--ink2)}
.ops-method summary{cursor:pointer;padding:8px 0}
.ops-performance-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.ops-performance-tools .fine{margin:0}
.ops-performance-tools details[open]{flex-basis:100%}
.dt-sort{display:inline-flex;align-items:center;gap:4px;border:0;padding:4px 0;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left;white-space:nowrap}
.dt-sort:focus-visible{outline:2px solid var(--au-primary);outline-offset:4px}
#navAux{display:flex;flex-direction:column;gap:var(--ui-control-gap)}
#navAux .nav-sec-btn{padding:8px 12px;font-size:var(--au-fs-sm)}
@media(max-width:600px){.topbar-right{display:none}.topbar h2{white-space:normal;overflow:visible}.topbar{min-height:60px;height:auto}}
.ops-summary-panels>.card{min-width:0}
.ops-summary-panels h3{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}
.ops-summary-more{font-size:var(--au-fs-sm);color:var(--brand-d)}
.ops-summary-panels .fine{margin:12px 0}
.ops-performance{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.ops-performance .stat{padding:12px;min-width:0}
.ops-performance .stat>b{display:block;font-size:28px;line-height:1.2;margin:8px 0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ops-kpi-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.ops-kpi-categories a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--au-fs-sm);color:var(--ink2);text-decoration:none}
.ops-kpi-categories a:hover{color:var(--brand-d)}
.ops-board-heading{margin:8px 0 16px;font-size:var(--au-fs-section)}
@media(max-width:1024px){.ops-summary-panels{grid-template-columns:1fr}}
@media(max-width:600px){.ops-kpi-categories{grid-template-columns:1fr}}
.topbar h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:8px;min-width:0;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right #orgTag{min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar-right .approval-notice{flex:none}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0 16px}

/* ⚠ `.tbl`/`.thead`/`.trow`(손으로 짠 격자 표)는 제거했다 — 인력 명부가 마지막 사용처였고,
   그 표에는 §9-1 필수 3종(검색·정렬·헤더고정)이 없었다. 공용 dataTable() 로 옮겼다.
   새 표를 만들 때 이 격자를 되살리지 말 것. 표는 dataTable() 하나로 통일한다. */

/* ⚠ .tag 를 `.trow .tag` 로 가둬두면 안 된다 — hr.js 연차 탭은 다른 조상 아래에서 <i class="tag">법정</i> 을 쓴다.
   조상이 없으면 <i> 기본값이 살아나 배경 없는 **기울임꼴 평문**이 된다(같은 화면의 다른 '법정'과 달라 보인다). */
.tag{font-style:normal;font-size:var(--au-fs-xs);font-weight:700;color:var(--brand-d);
  background:var(--au-primary-weak);border-radius:var(--au-radius-pill);padding:1px 6px;white-space:nowrap}

/* 데이터 표 — 필드가 많으면 뭉치지 말고 컬럼으로 편다. 넓으면 가로 스크롤(본문은 절대 안 밀린다).
   ⚠ UI-SPEC §9-1: 표는 **검색·정렬·헤더고정**이 필수다. 셋 다 없으면 100건 넘는 순간 못 쓴다.
   ⚠ §3 타이포: 본문은 14px(body). 표라고 12px 로 줄이지 않는다 — 읽으라고 만든 표다. */
.dt-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.dt-bar .dt-filter{min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--au-radius-sm);background:var(--surface);font-size:var(--au-fs-body)}
.dt-q{flex:1 1 auto;max-width:340px;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--au-radius-sm);background:var(--surface);font-size:var(--au-fs-body)}
.dt-q:focus{outline:0;border-color:var(--au-primary);box-shadow:0 0 0 3px var(--au-primary-weak)}
.dt-n{font-size:var(--au-fs-sm);color:var(--sub);font-weight:700;white-space:nowrap}
.dt-wrap{border:1px solid var(--line);border-radius:var(--au-radius-sm);overflow:auto;margin-top:10px;
  max-height:min(620px,68vh)}   /* 헤더고정이 의미를 가지려면 표 자체가 스크롤 컨테이너여야 한다 */
table.dt{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:var(--au-fs-body)}
table.dt th,table.dt td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.dt thead th{position:sticky;top:0;z-index:1;background:var(--surface2);font-weight:800;
  font-size:var(--au-fs-sm);color:var(--ink2);white-space:nowrap;border-bottom:1px solid var(--line2)}
table.dt thead th.srt{cursor:pointer;user-select:none}
table.dt thead th.srt:hover{background:var(--au-primary-weak)}
table.dt thead th.srt>i{font-style:normal;margin-left:4px;color:var(--faint);font-size:var(--au-fs-xs)}
table.dt thead th.srt.on{color:var(--au-primary)}
table.dt thead th.srt.on>i{color:var(--au-primary)}
table.dt tbody tr:last-child td{border-bottom:0}
table.dt tbody tr:hover{background:var(--surface2)}
/* ★ PC 는 가로가 남는다 — 한 행은 **한 줄**로 끝낸다. 줄바꿈으로 행 높이가 들쭉날쭉하면
   눈이 행을 따라가지 못한다. 넘치는 칸만 …로 자르고, 전체는 드로어에서 본다. */
table.dt th,table.dt td{white-space:nowrap;vertical-align:middle}
table.dt td.cut{max-width:280px;overflow:hidden;text-overflow:ellipsis}
table.dt td.nm{font-weight:700}
table.dt td.sm{color:var(--ink2);font-size:var(--au-fs-sm)}   /* §4: 읽는 텍스트에 faint 금지 */
/* ⚠ .tg 는 표 전용이 아니다 — 카드 뷰(.cards .c-t)도 같은 태그를 그린다.
   `table.dt .tg` 로 가둬두면 카드에선 배경·패딩이 전부 사라져 '인디초기투자모바일' 처럼 평문이 이어 붙는다. */
.tg{display:inline-block;font-size:var(--au-fs-xs);color:var(--brand-d);background:var(--au-primary-weak);
  border-radius:var(--au-radius-pill);padding:2px 7px;margin:1px 2px 1px 0;white-space:nowrap}

/* ── 우측 드로어 / 팝업 모달 ──
   표는 좁게 유지하고 상세는 여기서. 관제탑 규약(§0-1): 팝업은 드래그·핀·리사이즈 3동작 필수. */
/* 등장·퇴장을 애니메이션한다. 뚝 나타나는 패널은 '떴다'가 아니라 '튀었다'로 느껴진다.
   cubic-bezier(.2,.8,.2,1) = 빠르게 나가서 부드럽게 안착(감속). */
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes fadeOut  { from{opacity:1} to{opacity:0} }
@keyframes slideIn  { from{transform:translateX(100%)} to{transform:none} }
@keyframes slideOut { from{transform:none} to{transform:translateX(100%)} }
@keyframes popIn    { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:none} }
@keyframes popOut   { from{opacity:1;transform:none} to{opacity:0;transform:translateY(8px) scale(.98)} }

.drawer,.modal{position:fixed;inset:0;z-index:50;background:rgba(22,18,26,.28);
  animation:fadeIn .18s ease both}
.drawer.closing,.modal.closing{animation:fadeOut .18s ease both}
.drawer .p-box{animation:slideIn .24s cubic-bezier(.2,.8,.2,1) both}
.drawer.closing .p-box{animation:slideOut .2s cubic-bezier(.4,0,1,1) both}
.modal .p-box{animation:popIn .2s cubic-bezier(.2,.8,.2,1) both}
.modal.closing .p-box{animation:popOut .16s ease both}
@media (prefers-reduced-motion:reduce){
  .drawer,.modal,.drawer .p-box,.modal .p-box,
  .drawer.closing,.modal.closing,.drawer.closing .p-box,.modal.closing .p-box{animation:none}
}
/* ⚠ 드로어는 오른쪽에 붙어 있어서 CSS `resize:horizontal` 이 무효다(핸들이 오른쪽 = 화면 밖으로만 늘어난다).
   왼쪽 모서리 그립(.p-grip)을 직접 잡아 끌게 한다 — 더블클릭하면 넓게. */
.drawer .p-box{position:absolute;top:0;right:0;height:100%;width:min(460px,92vw);
  background:var(--surface);border-left:1px solid var(--line2);box-shadow:-8px 0 28px rgba(22,18,26,.14);
  display:flex;flex-direction:column;overflow:hidden;min-width:320px}
.p-grip{position:absolute;left:0;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:2;
  background:transparent;touch-action:none}
.p-grip:hover,.p-grip:active{background:var(--au-primary-weak)}
.p-grip::after{content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:2px;height:36px;border-radius:2px;background:var(--line2)}
.modal .p-box{position:relative;margin:6vh auto;width:min(560px,92vw);max-height:88vh;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--au-radius);
  box-shadow:0 18px 48px rgba(22,18,26,.22);display:flex;flex-direction:column;
  resize:both;overflow:auto;min-width:320px;min-height:260px}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--line);cursor:move;flex:0 0 auto;
  background:var(--surface2);position:sticky;top:0;z-index:1}
.p-head>b{font-size:var(--au-fs-section);min-width:0;overflow-wrap:anywhere}
.p-act{display:flex;gap:var(--ui-control-gap);align-items:center;flex:none}
.p-act button{border:0;background:none;padding:5px 8px;border-radius:6px;font-size:var(--au-fs-sm);line-height:1;
  color:var(--ink2);font-weight:700}
.p-act button:hover{background:var(--au-primary-weak)}
.p-pin.on{background:var(--au-primary);color:#fff}
.p-pin.on:hover{background:var(--brand-d)}
.p-x{font-size:var(--au-fs-body)!important}
.p-body{padding:16px;overflow:auto;flex:1 1 auto;min-height:0;min-width:0;overflow-wrap:anywhere}
.p-body .kv>span{flex:0 0 130px}
.p-body .kv.pair>span{flex:1 1 auto}   /* 데이터 행은 고정폭을 다시 풀어준다 */
@media(max-width:480px){.drawer .p-box{width:100%;min-width:0}.p-body .kv>span{flex-basis:104px}.kv{gap:8px}.p-head{padding:12px 16px}}
.p-body h3{margin:20px 0 10px;font-size:var(--au-fs-section);font-weight:800;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.p-body h3:first-child{margin-top:0}

/* 여러 줄 안내문(프로그램 상세 등) — 줄바꿈 보존. 좁은 드로어에서 긴 URL 이 넘치지 않게 끊는다. */
.pre{margin-top:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}

/* 투자 이력 한 건 — 투자사 / 투자일 / 라운드·금액·출처.
   ⚠ .kv 로는 못 담는다: 값이 3층(투자사·날짜·상세)인데 .kv 는 라벨:값 2칸짜리다.
      좁은 드로어에서 3개를 한 줄에 밀어넣으면 반드시 접힌다. */
.rnd{padding:10px 0;border-bottom:1px solid var(--line)}
.rnd:last-child{border-bottom:0}
.rnd-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rnd-h>b{min-width:0;overflow-wrap:anywhere}
/* 투자사 미공개 — '없다'가 아니라 '안 밝혔다'. 이름 자리를 비우면 투자 자체가 없는 걸로 읽힌다. */
.rnd-h>b.unk{font-weight:400;color:var(--sub);font-style:normal}
.rnd-d{flex:0 0 auto;font-family:var(--mono);font-size:var(--au-fs-sm);color:var(--ink2)}
.rnd-m{margin-top:3px;font-size:var(--au-fs-sm);color:var(--sub);line-height:1.6;overflow-wrap:anywhere}

/* 기사 목록 */
.news{padding:10px 0;border-bottom:1px solid var(--line)}
.news:last-child{border-bottom:0}
.news a{font-size:var(--au-fs-body);line-height:1.5}
.news>i{display:block;font-style:normal;font-size:var(--au-fs-sm);color:var(--sub);margin-top:2px}
.news>p{margin:5px 0 0;font-size:var(--au-fs-sm);color:var(--sub);line-height:1.6}

/* 클릭 가능한 행·카드 */
tr.clk{cursor:pointer}
.cards .c.clk{cursor:pointer}

/* 사이드바 접기 (햄버거)
   ⚠ 접기 버튼은 **접히는 것 위에** 있어야 한다. 본문 제목 옆에 두면 무엇이 접히는지 안 보인다.
      → 평소엔 사이드바 헤더(.wm)에, 접힌 뒤엔 다시 펼 수 있게 톱바에. */
.hamb{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--au-radius-sm);
  color:var(--ink2);flex:0 0 auto;transition:background .14s,border-color .14s}
.hamb:hover{background:var(--au-primary-weak);border-color:var(--au-primary)}
.hamb svg{width:17px;height:17px}
.side .wm .hamb{margin-left:auto}
.hamb-out{display:none;margin-right:12px}
#app.side-off .hamb-out{display:inline-flex}

/* display:none 은 전환되지 않는다 — 폭을 줄여서 부드럽게 접는다. */
#app{transition:grid-template-columns .24s cubic-bezier(.2,.8,.2,1)}
#app.side-off{grid-template-columns:0 1fr}
.side{overflow:hidden}
#app.side-off .side{padding-left:0;padding-right:0;border-right:0}
@media (prefers-reduced-motion:reduce){ #app{transition:none} }

/* 표 ↔ 카드 전환 */
.viewsw{display:inline-flex;gap:var(--ui-control-gap);margin-left:8px}
.viewsw .btn.on{background:var(--au-primary);border-color:var(--au-primary);color:#fff}

/* 카드 뷰 — 훑어보기용(표는 비교용) */
/* ★ 카드는 높이를 맞춘다 — 들쭉날쭉하면 격자가 아니라 잔해로 보인다.
   grid-auto-rows:1fr 로 같은 줄의 카드를 같은 높이로, 내부는 flex 로 아래를 채운다.
   마우스가 지나가는 것이 **손끝에 느껴져야 한다** — 살짝 뜨고, 테두리가 브랜드색으로 물들고,
   '상세 보기' 가 나타난다. 클릭 가능하다는 걸 커서 모양 하나로만 알리지 않는다. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:10px;
  grid-auto-rows:1fr}
.cards .c{border:1px solid var(--line);border-radius:var(--au-radius);padding:16px 18px;background:var(--surface);
  display:flex;flex-direction:column;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s,border-color .16s}
.cards .c .c-t{margin-top:auto;padding-top:10px}   /* 태그를 바닥에 붙여 카드 높이를 맞춘다 */
.cards .c.clk:hover{transform:translateY(-3px);border-color:var(--au-primary);
  box-shadow:0 10px 24px rgba(105,29,114,.14)}
.cards .c.clk:active{transform:translateY(-1px)}
.c-more{margin-top:10px;font-size:var(--au-fs-sm);font-weight:700;color:var(--au-primary);
  opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s}
.cards .c.clk:hover .c-more{opacity:1;transform:none}
/* ⚠ hover 로만 나타나면 터치 기기에선 영영 안 보인다 — 마우스가 없는 환경에선 항상 보인다. */
@media (hover:none){ .c-more{opacity:1;transform:none} }
.c-more::after{content:' →'}
@media (prefers-reduced-motion:reduce){
  .cards .c,.c-more{transition:none}
  .cards .c.clk:hover{transform:none}
}
.cards .c-h{font-size:var(--au-fs-body);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cards .c-s{margin-top:4px;font-size:var(--au-fs-sm);color:var(--ink2)}
.cards .c-r{margin-top:8px;font-size:var(--au-fs-sm);color:var(--ink2);line-height:1.55}
.cards .c-r>span{display:block;font-size:var(--au-fs-xs);font-weight:800;color:var(--sub);letter-spacing:.03em}
.cards .c-n{margin:10px 0 0;font-size:var(--au-fs-sm);color:var(--sub);line-height:1.6}
.cards .c-t{margin-top:10px}
/* ⚠ .c-a 는 카드 전용이 아니다 — 드로어 '바로 가기' 도 이 클래스를 쓴다.
   `.cards .c-a` 로만 정의해 두면 드로어에선 flex 가 안 잡혀 버튼이 인라인으로 흘러 잘린다. */
.c-a{margin-top:12px;display:flex;flex-wrap:wrap;gap:var(--ui-control-gap)}

/* IR 공개 페이지 (투자자 — 로그인 없음) */
.ir-wrap{max-width:640px;margin:0 auto;padding:40px 20px}
.ir-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.ir-head .wm{font-size:20px;font-weight:800;letter-spacing:-.02em}
.ir-head .wm b{color:var(--au-primary)}

/* 동의 체크박스 — 큰 결정이라 눈에 띄게 */
.chk{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;
  border:1px solid var(--line2);border-radius:var(--au-radius-sm);background:var(--surface2);cursor:pointer}
.chk input{margin-top:2px;width:16px;height:16px;accent-color:var(--au-primary)}
.chk span{font-size:var(--au-fs-sm);line-height:1.6}

/* 발송 방식별 설정 박스 */
.mode-box{margin:12px 0;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--au-radius-sm);background:var(--surface2)}
.mode-box>p{margin:0 0 10px;font-size:var(--au-fs-sm);line-height:1.6}

/* 운영 가이드 — 산출물 / 놓치면 안 되는 것.
   ⚠ '주의'는 회색으로 죽이지 않는다(§4). 놓치면 사고나는 항목이라 눈에 걸려야 한다. */
.ops-box{margin-top:12px;padding:12px 14px;border-radius:var(--au-radius-sm);
  border:1px solid var(--line);background:var(--surface2);
  font-size:var(--au-fs-body);line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.ops-box>span{display:block;font-size:var(--au-fs-xs);font-weight:800;letter-spacing:.04em;
  color:var(--sub);margin-bottom:5px}
.ops-box.warn{border-color:var(--au-warn);background:#fdf6e8}
.ops-box.warn>span{color:var(--au-warn)}

/* 설정 안내(접이식) */
.guide{margin:12px 0;border:1px solid var(--line);border-radius:var(--au-radius-sm);
  background:var(--surface2);padding:10px 14px}
.guide>summary{cursor:pointer;font-weight:700;font-size:var(--au-fs-sm);color:var(--brand-d)}
.guide ol{margin:12px 0 4px;padding-left:20px}
.guide li{margin:8px 0;font-size:var(--au-fs-sm);line-height:1.6}
.guide code{font-family:var(--mono);font-size:var(--au-fs-xs);background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* 급여대장 — 행마다 독립 grid 였을 때는 마지막 auto 칸이 저장 전(버튼 1개)·후(버튼 5개)로 달라져서
   **행마다 급여 입력칸의 x 위치가 어긋났다.** 격자를 부모에 한 번만 얹는다. */
.pay-tbl{display:grid;grid-template-columns:1.2fr 150px 130px auto;column-gap:10px}
.pay-row{display:contents}
.pay-row>span{padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--au-fs-body);
  min-width:0;display:flex;align-items:center;gap:6px}
.pay-row:last-child>span{border-bottom:0}
.pay-row>.row-act{flex-wrap:wrap;justify-content:flex-end}
.pay-tbl>p{grid-column:1/-1}   /* '불러오는 중…' 같은 안내문은 격자를 가로지른다 */
.pay-row input{width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);
  background:var(--surface);font:inherit;font-family:var(--mono);font-size:var(--au-fs-sm)}
.pay-row input:disabled{background:var(--surface2);color:var(--sub)}
.f-narrow{max-width:200px}

/* 쿼터 관리 표 */
.qtable{margin-top:12px;border:1px solid var(--line);border-radius:var(--au-radius-sm);overflow-x:auto}
.qhead,.qline{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(3,minmax(90px,1fr));
  gap:10px;align-items:center;padding:10px 12px}
.qhead{background:var(--surface2);border-bottom:1px solid var(--line);font-size:var(--au-fs-xs);font-weight:800;color:var(--ink2)}
.qline{border-bottom:1px solid var(--line)}
.qline:last-child{border-bottom:0}
.qname{display:flex;flex-direction:column;font-size:var(--au-fs-sm);font-weight:700}
.qname>i{font-style:normal;font-family:var(--mono);font-size:var(--au-fs-xs);color:var(--sub);font-weight:400}
.qline input{width:100%;padding:6px 8px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);
  background:var(--surface);font:inherit;font-family:var(--mono);font-size:var(--au-fs-xs)}

/* ── 앱 셸 (키트 치수) ── */
#app{display:grid;grid-template-columns:var(--au-sidebar-w) 1fr;min-height:100vh}
#app:not(.public-landing-mode){height:100dvh;min-height:0;overflow:hidden}
#app:not(.public-landing-mode)>.main{min-height:0}
#app:not(.public-landing-mode) .content{min-height:0}
.side{background:var(--surface2);border-right:1px solid var(--line);padding:20px 0;
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.side .wm{font-size:18px;font-weight:800;padding:0 22px 18px;display:flex;align-items:center}
.side .wm b{color:var(--au-primary)}
#nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 12px}
#nav a{padding:9px 12px;border-radius:var(--au-radius-sm);color:var(--ink2);font-size:var(--au-fs-body);margin:2px 0}
#nav a:hover{background:var(--surface)}
#nav a.on{background:var(--au-primary-weak);color:var(--brand-d);font-weight:700}
/* 잠긴 기능(준비 중·권한 없음)도 메뉴에는 보인다.
   ⚠ 흐린 회색으로 죽이지 않는다 — 글자는 본문과 같은 대비로 읽히게 두고, '상태'는 태그가 말한다.
      (UI-SPEC §4: 읽는 텍스트는 dim 이상, faint 는 라벨 전용. 회색조로 상태를 표현하지 않는다.) */
#nav a{display:flex;align-items:center;justify-content:space-between;gap:8px}
#nav a.muted{color:var(--ink2)}
#nav a.muted:hover{background:var(--surface)}
#nav a .tag{flex:0 0 auto;font-style:normal;font-size:var(--au-fs-xs);font-weight:700;letter-spacing:.02em;
  color:var(--brand-d);background:var(--au-primary-weak);border:1px solid transparent;
  border-radius:var(--au-radius-pill);padding:2px 7px;white-space:nowrap}
#nav a[data-k="admin"] .tag{color:#8a4a10;background:var(--accent-t)}  /* 사무국 전용 = 보조색 계열 */
.side-foot{flex:0 0 auto;padding:14px 16px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:var(--au-topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:0 var(--au-content-pad);border-bottom:1px solid var(--line);background:var(--surface)}
.topbar h2{margin:0;font-size:20px;font-weight:800}   /* §3: 페이지 제목 전 페이지 동일 20 */
.topbar-right{margin-left:auto;color:var(--sub)}
.content{flex:1 1 auto;overflow-y:auto;padding:var(--au-content-pad);max-width:var(--au-content-max);
  width:100%;margin:0 auto}   /* max-width 만 주면 초광폭에서 본문이 왼쪽에 쏠린다 */
/* 뉴스레터 편집기처럼 그 자체가 완결된 2단 도구(폼+미리보기)를 iframe 으로 끼워 넣는 라우트용 —
   일반 관리자 콘텐츠의 패딩·최대폭을 씌우면 도구 내부 레이아웃이 좁아져 우겨넣은 것처럼 보인다
   (2026-07-28 지적). #view 에 이 클래스가 붙으면 패딩·최대폭을 제거해 실제 뷰포트 전체를 준다. */
.content.full-bleed{padding:0;max-width:none}

/* ── 상태 배지 (§4 의미색) ── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--au-fs-xs);font-weight:700;
  padding:3px 9px;border-radius:var(--au-radius-pill);white-space:nowrap;flex:0 0 auto}
.badge.ok{background:#e4f1ea;color:var(--au-ok)}
.badge.warn{background:#f6ecd7;color:var(--au-warn)}
.badge.danger{background:#f6e3e0;color:var(--au-danger)}
.badge.info{background:#e3ecf7;color:var(--au-info)}
.badge.muted{background:var(--surface2);color:var(--sub)}

/* ── 카드·쿼터 미터 ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--au-radius);padding:16px 18px;margin:0 0 var(--au-gap,20px)}
.card h3{margin:0 0 12px;font-size:var(--au-fs-section);font-weight:800;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px}   /* 제목 옆 배지·버튼이 넘치면 다음 줄로 */
.card h3:not(:first-child){margin-top:18px}
.qrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:0}
.qrow .qlabel{flex:0 0 140px;font-size:var(--au-fs-sm)}
.qrow .qbar{flex:1;height:8px;background:var(--surface2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.qrow .qbar>i{display:block;height:100%;background:var(--au-primary)}
.qrow .qbar>i.over{background:var(--au-danger)}
.qrow .qnum{flex:0 0 auto;font-family:var(--mono);font-size:var(--au-fs-xs);color:var(--sub)}

/* ── 블러 미리보기 (잠긴 기능·미합류) ──
   안쪽은 전부 클라이언트가 만든 '예시' 데이터다. 실데이터를 가리는 용도가 아니다
   (권한 없는 사용자에겐 서버가 애초에 데이터를 주지 않는다 — 블러는 보안장치가 아님). */
.peek{position:relative;margin-top:14px;border:1px solid var(--line);border-radius:var(--au-radius-sm);overflow:hidden}
.peek-body{filter:blur(4px);opacity:.55;pointer-events:none;user-select:none;padding:6px 14px;min-height:120px}
.peek-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.85))}
.peek-note{text-align:center;padding:14px 18px}
.peek-note p{margin:8px 0 12px;font-size:var(--au-fs-sm);color:var(--ink);max-width:44em;line-height:1.6}

/* ── 데이터 행 (.row) vs 블러 미리보기 행 (.mock-row) ──
   ⚠ 둘을 같은 클래스로 쓰면 안 된다. .mock-row 는 '흐릿한 예시'로 보이라고 12px·mono·dim 이다.
      그런데 실데이터(잔여 연차·발송 건수·가입일·초대코드 상태)를 여기에 그리고 있었다 —
      그 화면에서 제일 중요한 값이 제일 작고 흐리게 나왔다(§3 본문 14px · §4 회색조로 상태표현 금지 위반). */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--au-fs-body)}
.row:last-child{border-bottom:0}
.row>span{min-width:0}
.row b{color:var(--ink)}
/* 반복되는 보조 줄(소속·반려사유·발송건수 등) — 인라인 style 8곳을 대체. 12px+faint 로 죽이지 않는다. */
.sub-line{display:block;font-style:normal;font-size:var(--au-fs-sm);color:var(--ink2)}
.code-line{display:block;font-style:normal;font-family:var(--mono);font-size:var(--au-fs-sm);
  color:var(--ink2);word-break:break-all}

.mock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--au-fs-sm)}
.mock-row:last-child{border-bottom:0}
.peek .mock-row b{font-family:var(--mono);font-size:var(--au-fs-xs);color:var(--sub)}

/* 모바일(≤1024px) — 사이드바를 접어서 인라인으로 채우려 했던 예전 방식은 실패였다:
   .side 를 flex-row 로 눕히면 #nav(세로 목록 하나로 설계된)도 같이 눕는 게 아니라
   #nav 자체가 별도로 display:flex;flex-wrap:wrap 였어서 항목 전부가 알약처럼 줄바꿈되며
   화면 전체를 뒤덮었다 — 실제 콘텐츠를 보려면 그 전부를 스크롤해서 지나쳐야 했다(2026-07-24 발견).
   대신 사이드바를 **오프캔버스 드로어**로 만든다: 기본은 화면 밖(translateX)에 숨고,
   햄버거를 누르면 슬라이드 인 + 스크림. 데스크톱의 세로 목록 레이아웃은 그대로 유지된다
   (#nav 의 flex-wrap 오버라이드를 아예 없앤 것 — 그게 사고 원인이었다). */
/* ⚠⚠ .side-scrim 은 반드시 position:fixed 를 **뷰포트 폭과 무관하게 항상** 갖고 있어야 한다.
   #app 은 display:grid;grid-template-columns:2개 인데, .side-scrim 이 포지션 없는 평범한
   블록 자식으로 들어가면 그리드 자동배치가 그걸 2번째 그리드 아이템으로 먹어버리고
   .main 이 3번째 아이템이 되어 **암묵적 2번째 행, 1번째 열**(사이드바 폭·뷰포트 높이 아래)로
   밀려난다 — 데스크톱 포함 전 화면에서 본문이 통째로 사라지는 사고(2026-07-24, 배포 직후 발견).
   position:fixed/absolute 자식은 그리드 자동배치 대상에서 빠지므로, 이 규칙은 미디어 쿼리
   안에 두면 안 된다(그 폭에서만 그리드 흐름을 벗어난다 = 나머지 폭에서는 여전히 사고 남). */
.side-scrim{display:none; position:fixed; inset:0; background:rgba(22,18,26,.4); z-index:54}
#app.side-open .side-scrim{display:block}

@media(max-width:1024px){
  #app{grid-template-columns:1fr}
  .side{
    position:fixed; top:0; left:0; height:100vh; width:min(84vw,320px);
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    transform:translateX(-100%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
    z-index:55; box-shadow:2px 0 24px rgba(22,18,26,.18);
  }
  #app.side-open .side{transform:translateX(0)}
  .hamb-out{display:inline-flex}  /* 모바일은 항상 닫힌 채 시작 — '열기' 버튼이 늘 보여야 한다 */
  #auth{grid-template-columns:minmax(0,1fr)}
  .auth-brand{padding:32px 24px}
  .auth-form-wrap{padding:32px 24px}
}
@media(max-width:1024px) and (prefers-reduced-motion:reduce){ .side{transition:none} }

/* ── 보도자료: 스퀘어닷 js/pages/pr.js 구조 이식(작성·수정 좌우2컬럼 / 발송 / 발송성과 / 작성가이드) ──
   구조·동작은 그대로, 색만 KOCCA CI 토큰으로(신규 색상값 없음 — 기존 --au-primary 등만 사용). */
.pr-elabel{font-family:var(--mono);font-size:var(--au-fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.pr-tmpl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0}
.pr-tmpl-btn{padding:5px 14px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);background:var(--surface);
  color:var(--ink);font-size:var(--au-fs-xs);font-weight:600;cursor:pointer;font-family:inherit}
.pr-tmpl-btn:hover{border-color:var(--au-primary);color:var(--au-primary)}
.pr-edit{padding:16px 18px;border:1px solid var(--line);border-radius:var(--au-radius);background:var(--surface);margin-bottom:16px}
.pr-edit-head{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0 6px}
.pr-col-h{font-family:var(--au-font);font-size:var(--au-fs-sm);font-weight:700;color:var(--ink2)}
.pr-erow{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:12px}
.pr-ecell{display:flex;flex-direction:column;gap:var(--ui-control-gap);min-width:0}
.pr-rev-box{border:1px dashed var(--line2);border-radius:var(--au-radius-sm);padding:8px 12px;background:var(--surface2);box-sizing:border-box}
.pr-rev-body{min-height:340px}
.pr-col-empty{color:var(--sub);font-size:var(--au-fs-xs);line-height:1.6;padding:14px 8px;text-align:center}
.pr-col-empty b{color:var(--au-primary)}
.pr-actions-row{display:flex;align-items:center;gap:var(--ui-control-gap);flex-wrap:wrap;margin-top:var(--ui-control-gap)}
.pr-alt-titles{display:flex;flex-wrap:wrap;gap:var(--ui-control-gap)}
.pr-alt-title{padding:6px 12px;border:1px solid var(--au-primary);border-radius:var(--au-radius-pill);
  background:var(--au-primary-weak);color:var(--brand-d);font-size:var(--au-fs-xs);font-weight:600;cursor:pointer;font-family:inherit}
.pr-alt-title:hover{background:var(--brand-t)}
.pr-sub-h{font-size:var(--au-fs-xs);font-weight:700;color:var(--ink);margin:12px 0 5px}
.pr-issues{margin:0;padding-left:18px;font-size:var(--au-fs-xs);line-height:1.7}
.pr-issues li{margin-bottom:4px}
.pr-sev{display:inline-block;min-width:34px;padding:1px 7px;border-radius:var(--au-radius-pill);font-size:10.5px;margin-right:4px}
.pr-sev-높음{background:#f8d7d3;color:var(--au-danger)}
.pr-sev-중간{background:var(--accent-t);color:var(--au-warn)}
.pr-sev-낮음{background:var(--surface2);color:var(--sub)}
.pr-rev-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
.pr-revised-ta{min-height:250px;resize:vertical;font-family:inherit;width:100%;box-sizing:border-box;padding:11px 13px;
  border:1px solid var(--line2);border-radius:var(--au-radius-sm);line-height:1.7}
@media(max-width:900px){ .pr-edit-head,.pr-erow{grid-template-columns:1fr} .pr-rev-body{min-height:180px} }
/* 발송 페이지 */
.pr-send-panel .pre{border:1px dashed var(--line2);border-radius:var(--au-radius-sm);padding:10px 12px;background:var(--surface2);margin-top:8px}
/* 작성 가이드 페이지 */
.pr-guide{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.pr-guide .pr-g-cta{grid-column:1/-1}
@media(max-width:820px){ .pr-guide{grid-template-columns:1fr} }
.pr-g-sec{padding:14px 18px;border:1px solid var(--line);border-radius:var(--au-radius-sm);background:var(--surface)}
.pr-g-sec h4{font-size:var(--au-fs-sm);font-weight:700;color:var(--au-primary);margin:0 0 8px}
.pr-g-sec ul{margin:0;padding-left:18px;line-height:1.8;font-size:var(--au-fs-body);color:var(--ink)}
.pr-g-sec li{margin-bottom:3px}
.pr-g-cta{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}

/* 편집 폼의 '찾기' 링크 — 빈 칸을 채우려면 결국 찾아봐야 한다. 찾는 곳으로 가는 길을 옆에 둔다.
   ⚠ 값을 자동으로 넣지는 않는다. 검색 1위가 공식 사이트라는 보장이 없다(위키·채용공고가 흔하다). */
.fnd{float:right;font-family:var(--au-font);font-size:var(--au-fs-xs);font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--au-primary)}
.fnd:hover{text-decoration:underline}
.dt-bar{flex-wrap:wrap}
.dt-filter{max-width:100%;min-width:0}
.dt-wrap{max-height:560px;max-width:100%;overflow:auto}
.dt th{position:sticky;top:0;background:var(--surface);z-index:1}
.dt td.cut{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:768px){.dt-bar .dt-q,.dt-bar .dt-filter{width:100%;flex-basis:100%}}

/* ── 회의실 예약 (rooms.js) ──
   그리드 셀은 색+제목(title)으로 상태를 알린다. 색약 대비: 차단은 빗금, 내 예약은 브랜드색으로
   채도까지 달리한다 — 색상만으로 구분하지 않는다(§9 접근성). */
.rooms-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rooms-week{display:flex;align-items:center;gap:10px;white-space:nowrap}
.rooms-grid{table-layout:fixed}
.rooms-grid th{text-align:center}
.rooms-grid .rg-t{font-family:var(--au-font);font-weight:600;color:var(--sub);text-align:right;
  white-space:nowrap;width:52px;font-size:var(--au-fs-xs)}
td.rg{height:26px;border:1px solid var(--line);padding:0}
td.rg.free{background:var(--surface,#fff);cursor:pointer}
td.rg.free:hover{background:var(--brand-t);box-shadow:inset 0 0 0 1px var(--brand)}
td.rg.past{background:var(--surface2);cursor:default}
td.rg.busy{background:#d1cad6}
td.rg.mine{background:var(--brand);cursor:pointer}
td.rg.mine.pend{background:var(--brand-t);box-shadow:inset 0 0 0 1px var(--brand);cursor:pointer}
td.rg.blk{background:repeating-linear-gradient(45deg,var(--surface2),var(--surface2) 4px,#d1cad6 4px,#d1cad6 8px);cursor:default}
.rg-key{display:inline-block;width:14px;height:14px;vertical-align:-2px;border:1px solid var(--line);margin-left:8px}
.rg-key.free{background:var(--surface,#fff)}
.rg-key.mine{background:var(--brand)}
.rg-key.mine.pend{background:var(--brand-t);box-shadow:inset 0 0 0 1px var(--brand)}
.rg-key.busy{background:#d1cad6}
.rg-key.blk{background:repeating-linear-gradient(45deg,var(--surface2),var(--surface2) 4px,#d1cad6 4px,#d1cad6 8px)}
.book-form{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface2)}
.book-form h3{margin-bottom:10px}
/* 드래그 범위 선택 — 선택 중/선택된 칸. free 규칙보다 뒤에 두어 이긴다 */
.rooms-grid{user-select:none;-webkit-user-select:none}
td.rg.sel{background:var(--brand-t);box-shadow:inset 0 0 0 2px var(--brand)}
/* 층별 도면 오버레이 */
.plan-btn{margin-left:10px;vertical-align:1px}
.plan-ov{position:fixed;inset:0;background:rgba(22,12,26,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.plan-box{background:var(--surface,#fff);border-radius:14px;width:min(1080px,100%);max-height:92vh;overflow:auto;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.plan-ov{justify-content:flex-end;padding:0}
.plan-box{width:min(1400px,100%);height:100%;max-height:100%;border-radius:0;box-sizing:border-box}
.plan-scroll{overflow:auto;max-height:calc(100dvh - 240px);margin-top:16px;border:1px solid var(--line)}
.plan-scroll img{max-width:none;border:0;border-radius:0}
.plan-box img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px}
/* Tenant workspace reuses existing brand tokens and table/drawer components. */
.tenant-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.preview-notice{position:sticky;top:0;z-index:20000;padding:12px 20px;background:var(--au-primary);color:var(--au-primary-ink);font-weight:700;line-height:1.4;text-align:center}
.tenant-heading h2,.tenant-heading h3{margin:0}
.tenant-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;margin:20px 0}
.tenant-facts .kv{min-width:0;align-items:flex-start;gap:12px}
.tenant-facts b{overflow-wrap:anywhere}
.tenant-intake{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}
.tenant-intake textarea{width:100%;box-sizing:border-box}
.tenant-media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.tenant-media-grid figure{margin:0}.tenant-media-grid img{width:100%;height:180px;object-fit:contain}
.program-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--ui-control-gap);overflow-x:auto;min-width:0;padding-bottom:var(--ui-scroll-clearance)}
.program-calendar>div{min-height:80px;border:1px solid var(--line);padding:4px;min-width:0}
.program-calendar button{display:block;width:100%;white-space:normal;overflow-wrap:anywhere;padding:4px}
.demo-score input{max-width:120px}.demo-timer{font-size:var(--au-fs-display);font-variant-numeric:tabular-nums}
@media(max-width:680px){.tenant-facts{grid-template-columns:1fr}.tenant-summary .ops-shortcuts{display:flex;flex-wrap:wrap;gap:8px}}
/* Versioned operating/expense reader: compact controls, shared table, right drawer. */
.rule-toolbar{display:flex;gap:16px;align-items:end;flex-wrap:wrap}
.rule-expense-toolbar{padding:16px;gap:12px;margin-bottom:12px}
.rule-expense-toolbar select{font:inherit;padding:4px 8px;border:1px solid var(--au-border);border-radius:var(--au-radius-sm);background:var(--au-surface);color:var(--au-text)}
.rule-expense-table{padding:16px}
.rule-expense-table>p{margin:0 0 12px;font-size:var(--au-fs-sm)}
@media(max-width:768px){
 .rule-expense-table [data-rule-table] table.dt{min-width:0!important;table-layout:fixed;font-size:var(--au-fs-sm)}
 .rule-expense-table [data-rule-table] th:first-child,.rule-expense-table [data-rule-table] td:first-child{width:36%}
 .rule-expense-table [data-rule-table] th:nth-child(n+3),.rule-expense-table [data-rule-table] td:nth-child(n+3){display:none}
}
.rule-toolbar label,.rule-compare-tools label{display:grid;gap:4px;max-width:100%;font-size:var(--au-fs-sm)}
.rule-toolbar select{width:auto;max-width:100%;min-width:200px}
.rule-toolbar [data-rule-status]{display:grid;gap:8px;font-size:var(--au-fs-sm)}
.rule-notice{padding:12px 16px;background:var(--au-surface);border:1px solid var(--au-border);border-radius:var(--au-radius-sm);line-height:1.7}
.rule-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rule-tabs button[aria-pressed="true"]{background:var(--au-primary);color:var(--au-surface)}
.rule-detail{margin:16px 0;overflow-wrap:anywhere;line-height:1.7}
.rule-detail h4{margin:0 0 4px;font-size:var(--au-fs-body)}
.rule-detail p{margin:0}
.rule-records{margin-top:20px;border-top:1px solid var(--au-border);padding-top:12px}
.rule-records p,.rule-original{line-height:1.7;overflow-wrap:anywhere}
.support-section{padding:16px;min-width:0}
.support-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}
.support-options input,.support-options select,.support-question input,.support-question select{max-width:100%;box-sizing:border-box}
.support-message{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.support-question{border:1px solid var(--au-border);border-radius:var(--au-radius-sm);padding:12px;margin:12px 0;min-width:0}
.support-pdf{display:block;width:100%;height:64vh;border:1px solid var(--au-border);margin-top:12px}
.support-pdf-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}
.support-pdf-canvas{max-height:60vh;overflow:auto;border:1px solid var(--au-border)}
.support-pdf-canvas canvas{display:block;width:100%;height:auto}
.support-print-frame{position:fixed;width:1px;height:1px;left:0;bottom:0;border:0}
.support-file-editor{margin:16px 0;padding:12px;border:1px solid var(--au-border);border-radius:var(--au-radius-sm);min-width:0}
.support-file-editor h3{overflow-wrap:anywhere}
.support-file-editor input,.support-file-editor select{max-width:100%;box-sizing:border-box}
.rule-compare-tools{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:16px 0}
.rule-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.rule-comparison>section{min-width:0}
@media(max-width:768px){.rule-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.rule-toolbar select{width:100%;min-width:0}.rule-comparison{grid-template-columns:minmax(0,1fr)}}
/* Signup stays readable without stretching single fields across the workspace. */
.auth-return{border:1px solid var(--line);border-top:4px solid var(--au-primary);padding:16px;margin-bottom:24px;border-radius:var(--au-radius-sm);overflow-wrap:anywhere}
.auth-return p{font-size:var(--au-fs-sm);margin:8px 0;color:var(--au-text)}
.registration-card{max-width:760px;margin-inline:auto}
.registration-card summary{cursor:pointer;font-weight:700}
.registration-card form{margin-top:20px}
.registration-card .kv b{overflow-wrap:anywhere}
.registration-consent{min-width:0;padding:16px;border:1px solid var(--line);margin:24px 0}
.registration-consent legend{font-weight:700;padding-inline:8px}
.registration-notice dl{margin:8px 0 16px;font-size:var(--au-fs-sm);line-height:1.7}
.registration-notice dt{font-weight:700;margin-top:8px}
.registration-notice dd{margin:0;overflow-wrap:anywhere}
.registration-consent .check{display:flex;gap:8px;align-items:flex-start;line-height:1.7;margin:16px 0}
.registration-consent .check input{width:auto;flex:none;margin-top:4px}
.approval-count{margin-inline-start:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.approval-notice{white-space:nowrap;font-size:var(--au-fs-sm);font-weight:700;color:var(--brand-d)}
.approval-notice[hidden],.approval-count[hidden]{display:none!important}
#registrationReview .check{display:flex;align-items:flex-start;gap:8px;margin-block:16px}
#registrationReview .check input{width:auto;flex:none;margin-top:4px}
.company-overview{min-width:0}
.mail-preview-text{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.7}
.dashboard-sections>.section-tabs{margin-bottom:16px}
.dashboard-sections h3{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.dashboard-sections .ops-performance{grid-template-columns:repeat(4,minmax(0,1fr))}
.dashboard-sections .ops-kpi-categories{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:768px){
  .section-tabs{flex-wrap:wrap;overflow-x:visible}
  .section-tabs .tab{flex:1 1 auto;padding:8px 12px}
  .dashboard-sections .ops-performance,.dashboard-sections .ops-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-sections .ops-kpi-categories{grid-template-columns:1fr}
}
.company-distributions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.company-distributions>section{min-width:0}
.company-distributions ul,.company-overview-news{list-style:none;margin:0;padding:0}
.distribution-chart header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.distribution-chart header h4{margin:0}
.distribution-chart li{margin-bottom:var(--ui-control-gap)}
.distribution-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;width:100%;padding:4px 8px;border:1px solid transparent;border-radius:var(--au-radius-sm);background:var(--surface);text-align:left}
.distribution-item:hover,.distribution-item:focus-visible{background:var(--surface2);border-color:var(--brand);outline:none}
.distribution-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.distribution-count{display:flex;gap:8px;align-items:baseline;white-space:nowrap;font-variant-numeric:tabular-nums}
.distribution-count>span{color:var(--sub);font-size:var(--au-fs-xs);min-width:32px;text-align:right}
.distribution-track{grid-column:1/-1;display:block;height:4px;background:var(--brand-t);border-radius:var(--au-radius-sm);overflow:hidden}
.distribution-track>span{display:block;height:100%;background:var(--brand);border-radius:inherit}
.distribution-chart[data-distribution="genre"] .distribution-track{background:var(--accent-t)}
.distribution-chart[data-distribution="genre"] .distribution-track>span{background:var(--accent)}
.distribution-missing{margin-top:12px;background:none;border:0;padding:4px 8px;color:var(--sub);text-decoration:underline;font-size:var(--au-fs-sm)}
.distribution-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;font-variant-numeric:tabular-nums}
.distribution-result-summary{margin-bottom:16px}
.departure-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.departure-heading h3,.departure-heading p{margin:0}
.departure-months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.departure-month{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--au-radius);background:var(--surface2);text-align:left;min-width:0}
.departure-month>b{font-size:var(--au-fs-display);font-variant-numeric:tabular-nums}
.departure-month small{font-size:var(--au-fs-sm);margin-left:4px}
.departure-month.has-companies{border-color:var(--brand-t);background:var(--surface)}
.departure-month.has-companies>b{color:var(--brand)}
.departure-month:focus-visible,.departure-month:hover{outline:2px solid var(--brand);outline-offset:2px}
.resident-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.resident-news-card{min-width:0;border-bottom:1px solid var(--line);padding:8px 0}
.resident-news-card header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.resident-news-card header button{border:0;background:none;padding:0;color:var(--brand);font-weight:700;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resident-news-card header button:hover{text-decoration:underline}
.resident-news-card p{margin:4px 0 0}
.resident-news-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.news-page-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:768px){.departure-heading{align-items:flex-start;flex-direction:column}.departure-months{grid-template-columns:repeat(2,minmax(0,1fr))}.resident-news-grid{grid-template-columns:minmax(0,1fr)}}
.company-overview-news li{padding-block:12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.company-overview-news p{margin:4px 0 0}
@media(max-width:768px){.company-distributions{grid-template-columns:minmax(0,1fr);gap:16px}}

/* Shared action spacing: full-width actions stack; explicit action rows use gap. */
.ui-action-row,.tenant-heading>div:has(>button){display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-control-gap)}
.ui-action-row>.btn{width:auto;flex:0 1 auto}
:where(.content,.p-body) .btn.sm+.btn.sm{margin-inline-start:var(--ui-control-gap)}
:where(.content,.p-body) form>.btn+.btn{margin-block-start:var(--ui-control-gap)}
:where(.content,.p-body) .btn:not(.sm)+.btn:not(.sm){margin-block-start:var(--ui-control-gap)}
:where(.content,.p-body) :is(.ui-action-row,.row-act,.c-a,.nv-actions,.nv-editor-bar,.space-filters,.ops-work-toolbar,.news-filters,.pr-actions-row,.viewsw)>.btn+.btn{margin-block-start:0}
:where(.content,.p-body) :is(.row-act,.c-a,.nv-actions,.space-filters,.ops-work-toolbar,.news-filters,.pr-actions-row,.viewsw)>.btn.sm+.btn.sm{margin-inline-start:0}
.ui-action-row>.btn.sm+.btn.sm,.tenant-heading>div>.btn.sm+.btn.sm{margin-inline-start:0}
:where(.content,.p-body) :is(.btn.sm,button.tab)+:is(.btn.sm,button.tab){scroll-margin:var(--ui-scroll-clearance)}
.content,.p-body,.dt-wrap{scrollbar-gutter:stable;scroll-padding:var(--ui-scroll-clearance)}

/* System settings: catalog-driven controls; shared spacing and theme tokens. */
.system-settings{display:flex;flex-direction:column;gap:16px;min-width:0}
.system-settings>.tabs{order:-1;flex-wrap:wrap;gap:var(--ui-control-gap);margin:0}
.system-settings-group{border:1px solid var(--line);border-radius:8px;padding:16px;margin:0 0 16px;min-width:0}
.system-settings-group legend{font-weight:700;padding:0 8px}
.system-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.system-setting-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.system-setting-field>label{font-weight:700}
.system-setting-field p{margin:0;overflow-wrap:anywhere}
.system-setting-field input:not([type=checkbox]){width:100%;min-width:0}
.system-settings-toggle,.system-settings-confirm{display:flex;align-items:flex-start;gap:var(--ui-control-gap)}
.system-settings-confirm{margin:16px 0}
.system-settings-links{display:flex;flex-wrap:wrap;gap:var(--ui-control-gap)}
.system-settings-links>.btn{width:auto;margin:0!important}
.system-settings-notice{margin-top:0}
@media(max-width:700px){.system-settings-grid{grid-template-columns:minmax(0,1fr)}.system-settings-group{padding:12px}.system-settings>.tabs>.tab{flex:1 1 auto}.system-settings .ui-action-row>.btn{flex:1 1 auto}}
[data-role-permissions]{display:flex;flex-direction:column;gap:16px;min-width:0}
[data-role-permissions]>.tabs,[data-role-tabs]>.tabs{flex-wrap:wrap;gap:var(--ui-control-gap)}
[data-permission-table] .ui-action-row{flex-wrap:nowrap}
[data-permission-check]{margin:0}


/* Verified platform URLs are shown inside each resident-company drawer. */
.company-game-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:12px}
.company-game-item{border:1px solid var(--line);border-radius:var(--au-radius);padding:14px;min-width:0;background:var(--surface)}
.company-game-top{display:flex;gap:8px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.company-game-top>b{overflow-wrap:anywhere}
.company-game-item .fine{margin:6px 0;overflow-wrap:anywhere}
.company-game-item .btns{margin-top:10px}
@media(max-width:560px){.company-game-links{grid-template-columns:minmax(0,1fr)}}