/* ═══════════════════════════════════════════════════════════════
   K-CELL SDL 포털 · 스타일
   팔레트: K-CELL 네이비 #0C2D63 · 셀 시안 #2AB2DE · 민트 #35B58F · 앰버(오늘) #F0932B
   서체: Pretendard Variable (단일 패밀리) · 숫자는 tabular
   ═══════════════════════════════════════════════════════════════ */
:root {
  --navy: #0C2D63; --navy-2: #143C7C; --navy-3: #1F4E9A;
  --blue: #1F5FCF; --blue-soft: #E6EEFB;
  --cyan: #2AB2DE; --cyan-soft: #DFF3FA;
  --mint: #35B58F; --mint-soft: #DDF4EC;
  --amber: #F0932B; --amber-soft: #FDEEDC;
  --red: #D9443C; --red-soft: #FBE3E1;
  --violet: #6C4FD6; --violet-soft: #ECE7FA;

  --core1: #12967F; --core1-soft: #DCF2EC;
  --core2: #1F5FCF; --core2-soft: #E6EEFB;
  --core3: #6C4FD6; --core3-soft: #ECE7FA;
  --all: #34496B;   --all-soft: #E8ECF2;

  --done: var(--mint); --done-soft: var(--mint-soft);
  --ongoing: var(--amber); --ongoing-soft: var(--amber-soft);
  --planned: #7B8798; --planned-soft: #EEF1F5;
  --late: var(--red); --late-soft: var(--red-soft);

  --bg: #F4F6F9; --paper: #FFFFFF; --paper-2: #EEF2F7;
  --ink: #131F36; --ink-2: #475569; --ink-3: #7B8798;
  --line: #E1E6EE; --line-2: #CBD3DE;

  --r: 12px; --r-s: 8px;
  --shadow: 0 1px 2px rgba(19,31,54,.05), 0 10px 30px -18px rgba(19,31,54,.25);
  --maxw: 1200px; --top-h: 60px; --bnav-h: 62px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 15.5px; line-height: 1.6; letter-spacing: -0.01em; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; word-break: keep-all; }
h1 { font-size: clamp(26px, 3.4vw, 40px); }
h2 { font-size: clamp(21px, 2.4vw, 28px); }
h3 { font-size: 18px; } h4 { font-size: 15.5px; } h5 { font-size: 14px; }
p { margin: 0 0 1em; word-break: keep-all; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hidden, [hidden] { display: none !important; }
.small { font-size: 13.5px; } .muted { color: var(--ink-3); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: 48px 0; }
#view-overview .section { padding: 40px 0; }
#view-overview .section + .section { padding-top: 12px; }
.section.pt0 { padding-top: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head p { margin: 6px 0 0; color: var(--ink-2); max-width: 66ch; font-size: 14.5px; }
.head-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lead { font-size: 17px; color: var(--ink-2); max-width: 70ch; margin-top: 22px; }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.stamp { font-size: 12.5px; color: var(--ink-3); }

/* 회원 전용 표시 토글 */
.view { display: none; }
.view.active { display: block; animation: viewIn .25s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.member-only, .admin-only { display: none !important; }
body.is-member .member-only { display: revert !important; }
body.is-admin .admin-only { display: revert !important; }
body.is-member .guest-only { display: none !important; }
body.is-member aside.member-only, body.is-member div.member-only, body.is-member .activity-block.member-only { display: block !important; }
body.is-member button.member-only { display: inline-flex !important; }

/* ── 버튼 · 칩 ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 14.5px; line-height: 1.2; min-height: 42px; white-space: nowrap; transition: background .15s, transform .05s; }
.btn:hover { background: var(--navy-3); border-color: var(--navy-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 7px 14px; min-height: 36px; font-size: 13.5px; }
.btn.ghost { background: transparent; color: var(--blue); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--blue-soft); }
.btn.light { background: #fff; color: var(--navy); border-color: #fff; }
.btn.light:hover { background: #E8F1FF; }
.btn.ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn.ghost-light:hover { background: rgba(255,255,255,.1); }
.btn.danger { color: var(--red); border-color: var(--red-soft); }
.btn.danger:hover { background: var(--red-soft); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.icon-btn { background: transparent; border: 0; border-radius: 8px; width: 40px; height: 40px; font-size: 22px; line-height: 1; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--paper-2); }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; line-height: 1.6; background: var(--all-soft); color: var(--all); white-space: nowrap; }
.chip.done { background: var(--done-soft); color: #1E7F63; }
.chip.ongoing { background: var(--ongoing-soft); color: #A65E0C; }
.chip.planned { background: var(--planned-soft); color: #5B6675; }
.chip.late { background: var(--late-soft); color: #B22E27; }
.chip.new { background: var(--cyan-soft); color: #147EA3; }
.chip.core1 { background: var(--core1-soft); color: var(--core1); }
.chip.core2 { background: var(--core2-soft); color: var(--core2); }
.chip.core3 { background: var(--core3-soft); color: var(--core3); }
.chip.all { background: var(--all-soft); color: var(--all); }
.chip.ms { background: var(--navy); color: #fff; }
.orgchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.orgchip i { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.orgchip i img { width: 14px; height: 14px; object-fit: contain; }
.orgchip.lg { font-size: 13px; }
.orgchip.lg i { width: 24px; height: 24px; } .orgchip.lg i img { width: 18px; height: 18px; }
.fbtn { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); min-height: 34px; white-space: nowrap; flex: none; }
.fbtn[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.fbtn.core1[aria-pressed="true"] { background: var(--core1); border-color: var(--core1); }
.fbtn.core2[aria-pressed="true"] { background: var(--core2); border-color: var(--core2); }
.fbtn.core3[aria-pressed="true"] { background: var(--core3); border-color: var(--core3); }
.fbtn img { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 4px; border-radius: 3px; background: #fff; }

/* ── 상단바 ───────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: var(--top-h); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 36px; width: auto; }
.brand-sub { font-size: 12px; color: var(--ink-3); border-left: 1px solid var(--line-2); padding-left: 12px; line-height: 1.3; }
.tabs { display: flex; gap: 2px; margin-left: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { color: var(--ink-2); font-weight: 600; font-size: 14px; padding: 8px 11px; border-radius: 8px; white-space: nowrap; }
.tabs a:hover { background: var(--paper-2); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--navy); background: var(--blue-soft); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--planned); box-shadow: 0 0 0 3px rgba(123,135,152,.15); }
.sync.on i { background: var(--mint); box-shadow: 0 0 0 3px rgba(53,181,143,.2); animation: pulse 2.4s ease-in-out infinite; }
.sync.preview i { background: var(--amber); box-shadow: 0 0 0 3px rgba(240,147,43,.2); }
.sync.off i { background: var(--red); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(53,181,143,.2); } 50% { box-shadow: 0 0 0 6px rgba(53,181,143,.08); } }
.user { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.user .me { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; }
.user .me .av { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.user .me small { font-weight: 500; color: var(--ink-3); }
@media (max-width: 1280px) { .brand-sub { display: none; } .sync span { display: none; } .user .me small { display: none; } }

/* ── 히어로 ───────────────────────────────────────────── */
.hero { background: radial-gradient(1200px 500px at 85% -20%, #1E5AAE 0%, transparent 60%), linear-gradient(160deg, #0B2757 0%, var(--navy) 55%, #0F3A7A 100%); color: #fff; padding: 40px 0 26px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: center; position: relative; z-index: 1; }
.hero-kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: rgba(255,255,255,.72); margin-bottom: 14px; }
.hero-kicker span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); margin-right: 14px; vertical-align: 3px; }
.hero h1 { color: #fff; }
.hero-lead { color: rgba(255,255,255,.8); font-size: 15px; max-width: 54ch; margin: 14px 0 18px; }
.hero-dday { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-dday .d { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.hero-dday .l { font-size: 14px; color: rgba(255,255,255,.75); }
.hero-dday .l b { color: #fff; font-weight: 700; }
.hero-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 22px; justify-content: start; margin-bottom: 22px; }
.hero-stats .s { display: flex; flex-direction: column; }
.hero-stats .v { font-size: 22px; font-weight: 700; line-height: 1.1; }
.hero-stats .v small { font-size: 12px; font-weight: 500; margin-left: 2px; color: rgba(255,255,255,.7); }
.hero-stats .k { font-size: 12px; color: rgba(255,255,255,.65); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 자율실험실 애니메이션 */
.lab { margin: 0; }
.lab-svg { width: 100%; height: auto; display: block; font-family: var(--font); }
.lab-cap { font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 8px; text-align: center; }
.lab-cap .a1 { color: var(--cyan); font-weight: 700; }
.lab-svg .floor { stroke: rgba(255,255,255,.25); stroke-width: 2; }
.lab-svg .rail { fill: rgba(255,255,255,.18); }
.lab-svg .rail-leg rect { fill: rgba(255,255,255,.12); }
.lab-svg .cab { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.lab-svg .cab-line, .lab-svg .shelves line { stroke: rgba(255,255,255,.28); stroke-width: 1.2; }
.lab-svg .cab-text { fill: rgba(255,255,255,.55); font-size: 9px; text-anchor: middle; }
.lab-svg .label { fill: rgba(255,255,255,.62); font-size: 11.5px; font-weight: 600; text-anchor: middle; transition: fill .3s; }
.lab-svg .vials rect, .lab-svg .inc-plates rect, .lab-svg .deck, .lab-svg .stage { fill: rgba(255,255,255,.35); }
.lab-svg .deck-plate { fill: var(--cyan); opacity: .7; }
.lab-svg .door-light { fill: var(--cyan); }
.lab-svg .tips rect { fill: rgba(255,255,255,.75); }
.lab-svg .tip-row rect { fill: var(--cyan); }
.lab-svg .drops circle { fill: var(--cyan); opacity: 0; }
.lab-svg .glow { fill: url(#gGlow); opacity: 0; }
.lab-svg .inc-clock .face { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.lab-svg .inc-clock .hand { stroke: #fff; stroke-width: 1.5; stroke-linecap: round; transform-box: view-box; transform-origin: 446px 165px; }
.lab-svg .screen { fill: url(#gScreen); stroke: rgba(255,255,255,.5); stroke-width: 1.2; }
.lab-svg .cells circle { fill: var(--mint); opacity: 0; }
.lab-svg .scan { fill: var(--cyan); opacity: 0; }
.lab-svg .ai-box { stroke: var(--cyan); }
.lab-svg .ai-text { fill: var(--cyan); font-size: 10px; font-weight: 700; text-anchor: middle; letter-spacing: .04em; }
.lab-svg .bars rect { fill: var(--cyan); opacity: .85; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.15) rotate(180deg); }
.lab-svg .bars { transform: translateY(0); }
.lab-svg .go { fill: rgba(255,255,255,.3); }
.lab-svg .car-body { fill: #fff; }
.lab-svg .car-light { fill: var(--amber); }
.lab-svg .arm-bar { fill: rgba(255,255,255,.85); transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.45); }
.lab-svg .gripper rect { fill: #fff; }
.lab-svg .gripper { transform: translateY(-38.5px); }
.lab-svg .plate rect { fill: var(--cyan); }
.lab-svg .plate .wells circle { fill: var(--navy); }
.lab-svg .plate { opacity: 0; }
.lab-svg .loop-line { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 2; }
.lab-svg .loop-flow { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 6 12; opacity: .55; }
.lab-svg .loop-arrow { fill: var(--cyan); opacity: .7; }
.lab-svg .loop-label { fill: rgba(255,255,255,.45); font-size: 10px; text-anchor: middle; }
.lab-svg .data-line { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.5; stroke-dasharray: 3 4; }
.lab-svg .packet { fill: var(--amber); opacity: 0; }
.lab-svg .stg { fill: #fff; font-size: 12.5px; font-weight: 600; text-anchor: middle; opacity: 0; }

@keyframes carriage { 0%,12% { transform: translateX(90px); } 18%,32% { transform: translateX(250px); } 38%,54% { transform: translateX(410px); } 60%,92% { transform: translateX(570px); } 100% { transform: translateX(90px); } }
@keyframes armbar { 0%,3% { transform: scaleY(.45); } 6%,10% { transform: scaleY(1); } 13%,20% { transform: scaleY(.45); } 23%,29% { transform: scaleY(.9); } 32%,40% { transform: scaleY(.45); } 43%,50% { transform: scaleY(1); } 53%,62% { transform: scaleY(.45); } 65%,71% { transform: scaleY(.95); } 74%,100% { transform: scaleY(.45); } }
@keyframes gripper { 0%,3% { transform: translateY(-38.5px); } 6%,10% { transform: translateY(0); } 13%,20% { transform: translateY(-38.5px); } 23%,29% { transform: translateY(-7px); } 32%,40% { transform: translateY(-38.5px); } 43%,50% { transform: translateY(0); } 53%,62% { transform: translateY(-38.5px); } 65%,71% { transform: translateY(-3.5px); } 74%,100% { transform: translateY(-38.5px); } }
@keyframes plate { 0%,7% { opacity: 0; } 8%,43% { opacity: 1; } 44%,51% { opacity: 0; } 52%,100% { opacity: 1; } }
@keyframes carlight { 0%,12% { opacity: .35; } 13%,17% { opacity: 1; } 18%,32% { opacity: .35; } 33%,37% { opacity: 1; } 38%,54% { opacity: .35; } 55%,59% { opacity: 1; } 60%,92% { opacity: .35; } 93%,99% { opacity: 1; } 100% { opacity: .35; } }
@keyframes s1light { 0%,12% { opacity: 1; } 14%,100% { opacity: .2; } }
@keyframes tips { 0%,20% { transform: translateY(0); } 23% { transform: translateY(16px); } 25.5% { transform: translateY(0); } 28% { transform: translateY(16px); } 31%,100% { transform: translateY(0); } }
@keyframes drops { 0%,22% { opacity: 0; } 23.5% { opacity: 1; } 24.5% { opacity: 0; } 28.5% { opacity: 1; } 29.5%,100% { opacity: 0; } }
@keyframes glow { 0%,38% { opacity: 0; } 41%,52% { opacity: 1; } 55%,100% { opacity: 0; } }
@keyframes hand { 0%,40% { transform: rotate(0deg); } 53%,100% { transform: rotate(1080deg); } }
@keyframes scan { 0%,60% { transform: translateX(0); opacity: 0; } 60.5% { opacity: 1; } 67% { transform: translateX(67px); opacity: 1; } 67.1% { transform: translateX(0); } 74% { transform: translateX(67px); opacity: 1; } 74.5%,100% { transform: translateX(0); opacity: 0; } }
@keyframes cells { 0%,61% { opacity: 0; } 74%,92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bars { 0%,80% { transform: scaleY(.15); } 88%,100% { transform: scaleY(1); } }
@keyframes go { 0%,89% { fill: rgba(255,255,255,.3); } 90%,100% { fill: var(--mint); } }
@keyframes packet1 { 0%,73.5% { opacity: 0; } 74%,80% { opacity: 1; } 80.5%,100% { opacity: 0; } }
@keyframes packet2 { 0%,91.5% { opacity: 0; } 92%,99.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes loopflow { to { stroke-dashoffset: -180; } }
@keyframes stg1 { 0%,14% { opacity: 1; } 16%,100% { opacity: 0; } }
@keyframes stg2 { 0%,15% { opacity: 0; } 17%,34% { opacity: 1; } 36%,100% { opacity: 0; } }
@keyframes stg3 { 0%,35% { opacity: 0; } 37%,56% { opacity: 1; } 58%,100% { opacity: 0; } }
@keyframes stg4 { 0%,57% { opacity: 0; } 59%,77% { opacity: 1; } 79%,100% { opacity: 0; } }
@keyframes stg5 { 0%,78% { opacity: 0; } 80%,99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lbl1 { 0%,14% { fill: var(--cyan); } 16%,100% { fill: rgba(255,255,255,.62); } }
@keyframes lbl2 { 0%,15% { fill: rgba(255,255,255,.62); } 17%,34% { fill: var(--cyan); } 36%,100% { fill: rgba(255,255,255,.62); } }
@keyframes lbl3 { 0%,35% { fill: rgba(255,255,255,.62); } 37%,56% { fill: var(--cyan); } 58%,100% { fill: rgba(255,255,255,.62); } }
@keyframes lbl4 { 0%,57% { fill: rgba(255,255,255,.62); } 59%,77% { fill: var(--cyan); } 79%,100% { fill: rgba(255,255,255,.62); } }
@keyframes lbl5 { 0%,78% { fill: rgba(255,255,255,.62); } 80%,99% { fill: var(--cyan); } 100% { fill: rgba(255,255,255,.62); } }

.lab-svg .carriage { animation: carriage 24s ease-in-out infinite; }
.lab-svg .arm-bar { animation: armbar 24s ease-in-out infinite; }
.lab-svg .gripper { animation: gripper 24s ease-in-out infinite; }
.lab-svg .plate { animation: plate 24s linear infinite; }
.lab-svg .car-light { animation: carlight 24s linear infinite; }
.lab-svg .door-light { animation: s1light 24s linear infinite; }
.lab-svg .tips { animation: tips 24s ease-in-out infinite; }
.lab-svg .drops circle { animation: drops 24s linear infinite; }
.lab-svg .glow { animation: glow 24s linear infinite; }
.lab-svg .inc-clock .hand { animation: hand 24s linear infinite; }
.lab-svg .scan { animation: scan 24s linear infinite; }
.lab-svg .cells circle { animation: cells 24s linear infinite; }
.lab-svg .bars rect { animation: bars 24s ease-out infinite; }
.lab-svg .bars rect:nth-child(2) { animation-delay: .3s; } .lab-svg .bars rect:nth-child(3) { animation-delay: .6s; } .lab-svg .bars rect:nth-child(4) { animation-delay: .9s; } .lab-svg .bars rect:nth-child(5) { animation-delay: 1.2s; }
.lab-svg .go { animation: go 24s linear infinite; }
.lab-svg .packet:not(.loop-packet) { animation: packet1 24s linear infinite; }
.lab-svg .loop-packet { animation: packet2 24s linear infinite; }
.lab-svg .loop-flow { animation: loopflow 6s linear infinite; }
.lab-svg .stg1 { animation: stg1 24s linear infinite; } .lab-svg .stg2 { animation: stg2 24s linear infinite; } .lab-svg .stg3 { animation: stg3 24s linear infinite; } .lab-svg .stg4 { animation: stg4 24s linear infinite; } .lab-svg .stg5 { animation: stg5 24s linear infinite; }
.lab-svg .st1 .label { animation: lbl1 24s linear infinite; } .lab-svg .st2 .label { animation: lbl2 24s linear infinite; } .lab-svg .st3 .label { animation: lbl3 24s linear infinite; } .lab-svg .st4 .label { animation: lbl4 24s linear infinite; } .lab-svg .st5 .label { animation: lbl5 24s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .lab-svg * { animation: none !important; }
  .lab-svg .carriage { transform: translateX(410px); }
  .lab-svg .arm-bar { transform: scaleY(1); } .lab-svg .gripper { transform: translateY(0); }
  .lab-svg .plate, .lab-svg .cells circle, .lab-svg .stg3 { opacity: 1; } .lab-svg .glow { opacity: .8; }
  .lab-svg .bars rect { transform: scaleY(1); }
  .sync.on i { animation: none; }
  html { scroll-behavior: auto; }
}

/* 참여기관 띠 */
.org-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 26px; position: relative; z-index: 1; }
.org-strip a { background: #fff; border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; color: var(--ink); min-height: 58px; min-width: 0; }
.org-strip a:hover { text-decoration: none; box-shadow: 0 6px 20px -8px rgba(0,0,0,.4); }
.org-strip img { height: 24px; width: 64px; object-fit: contain; object-position: left center; flex: none; }
.org-strip .t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.org-strip .t b { font-size: 12.5px; line-height: 1.25; }
.org-strip .t small { font-size: 10.5px; color: var(--ink-3); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.org-strip .t small i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }

/* ── 지금 이 시각 카드 ───────────────────────────────── */
.now-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.now { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; }
.now .k { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.now .v { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.now .v small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.now .t { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.now.next { border-left: 4px solid var(--amber); }
.now.next .v { font-size: 17px; font-weight: 700; margin-top: 8px; }
.now.late .v { color: var(--red); } .now.ongoing .v { color: #A65E0C; } .now.done .v { color: #1E7F63; }
.now.late.zero .v { color: var(--ink); }

/* ── 필터 ─────────────────────────────────────────────── */
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 18px; }
.filters .sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; flex: none; }
.filters .grp { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── 타임라인 ─────────────────────────────────────────── */
.timeline-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.timeline-layout aside { position: sticky; top: calc(var(--top-h) + 12px); }
body:not(.is-member) .timeline-layout { grid-template-columns: 1fr; }
.tl-month { display: grid; grid-template-columns: 92px 1fr; gap: 0 18px; }
.tl-month + .tl-month { margin-top: 10px; }
.tl-month > h3 { font-size: 13px; color: var(--ink-3); font-weight: 600; position: sticky; top: calc(var(--top-h) + 8px); align-self: start; padding: 6px 0; }
.tl-month > h3 b { display: block; font-size: 22px; color: var(--ink); font-weight: 800; letter-spacing: -0.03em; }
.tl-items { position: relative; padding-left: 20px; border-left: 2px solid var(--line-2); }
.tl-item { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 12px; margin-bottom: 10px; transition: box-shadow .15s; }
.tl-item::before { content: ""; position: absolute; left: -27px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--planned); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--line-2); }
.tl-item.done::before { background: var(--done); } .tl-item.ongoing::before { background: var(--ongoing); } .tl-item.late::before { background: var(--late); }
.tl-item.milestone { border-color: var(--navy); }
.tl-item.milestone::before { border-radius: 2px; transform: rotate(45deg); background: var(--navy); }
.tl-item:hover { box-shadow: var(--shadow); }
.tl-item .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.tl-item .top b { color: var(--ink); font-weight: 700; font-size: 13.5px; }
.tl-item h4 { font-size: 16px; }
.tl-item h4 a { color: var(--ink); }
.tl-item .desc { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }
.tl-item .meta { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.tl-item .who { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.tl-item .who i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid var(--line); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.tl-item .who i img { width: 12px; height: 12px; object-fit: contain; }
.tl-item .acts { display: flex; gap: 6px; margin-top: 10px; }
.tl-item .acts button { border: 1px solid var(--line-2); background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-height: 32px; }
.tl-item .acts button:hover { background: var(--paper-2); }
.tl-item .acts button.next { color: #1E7F63; border-color: var(--done-soft); }
.tl-today { display: grid; grid-template-columns: 92px 1fr; gap: 0 18px; margin: 14px 0; }
.tl-today .line { position: relative; height: 2px; background: var(--amber); border-radius: 2px; }
.tl-today .line span { position: absolute; left: 0; top: -12px; background: var(--amber); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.tl-empty { padding: 32px; text-align: center; color: var(--ink-3); background: var(--paper); border: 1px dashed var(--line-2); border-radius: var(--r); }

/* 활동 */
.activity { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.activity h3, .activity-block h3 { font-size: 14.5px; margin-bottom: 10px; }
.act { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.act:first-of-type { border-top: 0; }
.act i { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid var(--line); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.act i img { width: 18px; height: 18px; object-fit: contain; }
.act .a { color: var(--ink); }
.act .a b { font-weight: 700; }
.act .a .what { color: var(--ink-2); }
.act .w { color: var(--ink-3); font-size: 12px; }
.act .tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; margin-right: 4px; }
.act .tag.insert { background: var(--done-soft); color: #1E7F63; } .act .tag.update { background: var(--blue-soft); color: var(--blue); } .act .tag.delete { background: var(--red-soft); color: var(--red); }
.activity-block { margin-top: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.act-empty { color: var(--ink-3); font-size: 13px; }

/* ── 일정관리 ─────────────────────────────────────────── */
.sched-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.seg { display: inline-flex; background: var(--paper-2); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; border-radius: 8px; padding: 7px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); min-height: 36px; }
.seg button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.search { flex: 1; min-width: 180px; max-width: 320px; margin-left: auto; }
.search input { width: 100%; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; min-height: 38px; background: #fff; }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.col { background: var(--paper-2); border-radius: var(--r); padding: 10px; }
.col > h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.col > h3 .n { margin-left: auto; font-size: 12px; background: #fff; border-radius: 999px; padding: 1px 8px; color: var(--ink-3); }
.col.late > h3 { color: var(--red); } .col.ongoing > h3 { color: #A65E0C; } .col.planned > h3 { color: var(--ink-2); } .col.done > h3 { color: #1E7F63; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 10px; margin-bottom: 8px; }
.card .d { font-size: 12px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card .d b { color: var(--ink); }
.card h4 { font-size: 14px; margin: 4px 0 6px; line-height: 1.35; }
.card .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .check { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--ink-2); min-height: 30px; }
.card .check:hover { border-color: var(--mint); color: #1E7F63; }
.card .check.done { background: var(--done-soft); border-color: var(--done-soft); color: #1E7F63; }
.card .who { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.card .who img { width: 14px; height: 14px; object-fit: contain; }
.col .empty { font-size: 13px; color: var(--ink-3); padding: 10px 6px; }

/* 달력 */
.cal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cal-head h3 { font-size: 17px; }
.cal-head .nav { display: flex; gap: 4px; }
.cal-head .nav button { border: 1px solid var(--line-2); background: #fff; border-radius: 8px; min-width: 36px; min-height: 36px; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid .dow { font-size: 12px; color: var(--ink-3); text-align: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.cal-grid .dow:first-child { color: var(--red); }
.cal-cell { min-height: 92px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; font-size: 12px; position: relative; cursor: pointer; min-width: 0; overflow: hidden; }
.cal-cell .bars { display: flex; flex-direction: column; gap: 2px; margin: 4px -6px 0; }
.cal-cell .bar { height: 5px; background: var(--all); opacity: .55; }
.cal-cell .bar.core1 { background: var(--core1); } .cal-cell .bar.core2 { background: var(--core2); } .cal-cell .bar.core3 { background: var(--core3); }
.cal-cell .bar.done { opacity: .25; }
.cal-cell .bar.end { border-radius: 0 4px 4px 0; margin-right: 4px; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.other { background: #FAFBFD; color: var(--ink-3); }
.cal-cell .dn { font-weight: 700; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; }
.cal-cell.today .dn { background: var(--amber); color: #fff; }
.cal-cell.sun .dn { color: var(--red); }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-cell .ev { display: block; margin-top: 3px; padding: 2px 6px; border-radius: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--all-soft); color: var(--all); border-left: 3px solid var(--all); }
.cal-cell .ev.core1 { background: var(--core1-soft); color: var(--core1); border-color: var(--core1); }
.cal-cell .ev.core2 { background: var(--core2-soft); color: var(--core2); border-color: var(--core2); }
.cal-cell .ev.core3 { background: var(--core3-soft); color: var(--core3); border-color: var(--core3); }
.cal-cell .ev.span { border-left-color: transparent; opacity: .85; margin-left: -6px; border-radius: 0 5px 5px 0; }
.cal-cell .ev.done { text-decoration: line-through; opacity: .7; }
.cal-cell .more { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.cal-day { padding: 14px; border-top: 1px solid var(--line); }
.cal-day h4 { font-size: 14.5px; margin-bottom: 8px; }
.cal-day .empty { color: var(--ink-3); font-size: 13px; }

/* 간트 */
.gantt { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: auto; position: relative; }
.gantt-inner { --orgw: 200px; min-width: 1500px; position: relative; }
.g-head { display: grid; grid-template-columns: var(--orgw) 1fr; position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--line); }
.g-head .corner { position: sticky; left: 0; background: #fff; z-index: 4; padding: 10px 12px; font-size: 12.5px; color: var(--ink-3); border-right: 1px solid var(--line); }
.g-months { display: grid; }
.g-months .y { grid-row: 1; font-size: 12px; font-weight: 700; color: var(--navy); padding: 4px 8px; border-left: 2px solid var(--line-2); }
.g-months .m { grid-row: 2; font-size: 11px; color: var(--ink-3); padding: 2px 0 6px; text-align: center; border-left: 1px solid var(--line); }
.g-months .m.cur { color: var(--amber); font-weight: 700; }
.g-row { display: grid; grid-template-columns: var(--orgw) 1fr; border-bottom: 1px solid var(--line); min-height: 64px; }
.g-row .org { position: sticky; left: 0; background: #fff; z-index: 2; padding: 10px 12px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.g-row .org img { width: 60px; height: 24px; object-fit: contain; object-position: left; }
.g-row .org b { font-size: 13px; display: block; } .g-row .org small { font-size: 11px; color: var(--ink-3); }
.g-row .org .kc { width: 24px; height: 24px; }
.g-lane { position: relative; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); }
.g-bar { position: absolute; height: 22px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: #fff; padding: 0 8px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.g-bar.core1 { background: var(--core1); } .g-bar.core2 { background: var(--core2); } .g-bar.core3 { background: var(--core3); } .g-bar.all { background: var(--all); }
.g-bar.st-done { opacity: .6; } .g-bar.st-late { box-shadow: inset 0 0 0 2px var(--red); }
.g-bar.point.st-done { opacity: .5; } .g-bar.point.st-late { background: var(--red); }
/* 과업별 보기: 상태 색 */
.gantt.task .g-bar { opacity: 1; box-shadow: none; }
.gantt.task .g-bar.st-done { background: var(--mint); } .gantt.task .g-bar.st-ongoing { background: var(--navy-3); }
.gantt.task .g-bar.st-planned { background: var(--planned); } .gantt.task .g-bar.st-late { background: var(--red); }
.gantt.task .g-bar.point.ms { background: var(--navy); } .gantt.task .g-bar.point.st-done { background: var(--mint); }
.gantt.task .gantt-inner { --orgw: 300px; }
.g-group { display: grid; grid-template-columns: var(--orgw) 1fr; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.g-group .org { position: sticky; left: 0; z-index: 2; background: var(--paper-2); padding: 8px 12px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 13px; }
.g-group .org img { width: 40px; height: 18px; object-fit: contain; object-position: left; } .g-group .org img.kc { width: 18px; }
.g-group .org .n { font-size: 11px; color: var(--ink-3); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.g-group .g-lane { min-height: 34px; }
.g-row.task { min-height: 40px; }
.g-row .org.task { display: block; padding: 6px 12px; cursor: pointer; }
.g-row .org.task b { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-row .org.task small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.g-row .org.task small .chip { font-size: 10px; padding: 0 6px; min-height: 16px; line-height: 16px; vertical-align: 1px; font-style: normal; }
.g-row .org.task:hover { background: var(--blue-soft); }
.gantt-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.seg.sm button { padding: 5px 11px; font-size: 12.5px; min-height: 32px; }
.tool-selects { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tool-selects .sel select { border: 1px solid var(--line-2); border-radius: 999px; background: #fff; padding: 7px 30px 7px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); min-height: 36px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7A90' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.g-bar.point { width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); padding: 0; }
.g-bar.point.ms { background: var(--navy); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--amber); z-index: 1; }
.g-today::after { content: "오늘"; position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 700; color: var(--amber); }
.g-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); padding: 10px 14px; border-top: 1px solid var(--line); }
.g-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }

/* 목록 */
.list-table { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; font-size: 13.5px; }
.list-table th, .list-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.list-table th { font-size: 12px; color: var(--ink-3); background: var(--paper-2); font-weight: 600; }
.list-table tr:hover td { background: #FAFBFD; }
.list-table .t { font-weight: 600; }
.list-table .w { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* ── 과제 개요 ─────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fact { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.fact span { display: block; font-size: 12.5px; color: var(--ink-3); }
.fact b { display: block; font-size: 17px; margin-top: 2px; letter-spacing: -0.02em; }
.fact small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.core-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.core-col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 14px; border-top: 5px solid var(--all); }
.core-col.core1 { border-top-color: var(--core1); } .core-col.core2 { border-top-color: var(--core2); } .core-col.core3 { border-top-color: var(--core3); }
.core-col h3 { font-size: 16px; }
.core-col .sub { font-size: 12px; color: var(--ink-3); margin: 2px 0 12px; }
.inst { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.inst .logo { background: #fff; border: 1px solid var(--line); border-radius: 8px; height: 56px; display: flex; align-items: center; justify-content: center; padding: 6px; }
.inst .logo img { max-height: 40px; max-width: 84px; object-fit: contain; }
.inst .name { font-weight: 700; font-size: 14.5px; }
.inst .name small { font-weight: 500; color: var(--ink-3); margin-left: 6px; font-size: 12.5px; }
.inst .what { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.assoc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.assoc div { background: var(--paper-2); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.assoc b { display: block; margin-bottom: 2px; } .assoc span { color: var(--ink-2); }
.roadmap { position: relative; padding-top: 26px; }
.roadmap .bar { height: 10px; background: var(--paper-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.roadmap .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--cyan)); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.roadmap .today { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 700; color: var(--amber); }
.roadmap .today i { width: 2px; height: 42px; background: var(--amber); order: 2; }
.roadmap .years { display: grid; grid-template-columns: 9fr 12fr 12fr; gap: 12px; margin-top: 12px; }
.year { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.year h4 { font-size: 15px; } .year .t { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 8px; }
.year ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.year li { margin: 3px 0; }
.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.lv { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.lv .k { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.lv .scale { display: flex; gap: 6px; margin: 8px 0 6px; }
.lv .scale i { flex: 1; text-align: center; font-style: normal; font-weight: 700; font-size: 13px; padding: 6px 0; border-radius: 8px; background: var(--paper-2); color: var(--ink-3); }
.lv .scale i.hit { background: var(--planned-soft); color: var(--ink-2); text-decoration: line-through; }
.lv .scale i.on { background: var(--navy); color: #fff; }
.lv .scale i.next { background: var(--cyan-soft); color: #147EA3; outline: 2px dashed var(--cyan); outline-offset: -2px; }
.lv small { font-size: 12.5px; color: var(--ink-2); }
.framed { border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 14px; }
.model { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.model .sub { font-size: 13px; color: var(--ink-3); margin: 2px 0 10px; }
.flow { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; counter-reset: f; }
.flow li { background: var(--paper-2); border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 600; position: relative; padding-left: 24px; }
.flow li::before { counter-increment: f; content: counter(f); position: absolute; left: 8px; top: 6px; font-size: 11px; color: var(--ink-3); font-weight: 700; }
.flow li.judge { background: var(--core3-soft); color: var(--core3); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trio-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.trio-item h3, .trio-item h4 { margin-bottom: 6px; }
.trio-item p { font-size: 14px; color: var(--ink-2); margin: 0; }
.trio-item a { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600; }
.axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.axis { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.axis .q { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 8px; }
.axis ol, .axis ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.axis li { margin: 3px 0; }
.formula { margin-top: 14px; background: var(--navy); color: #fff; border-radius: var(--r); padding: 14px 18px; font-size: 14px; line-height: 1.7; }
.formula b { color: var(--cyan); }
.formula span { display: block; font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 4px; }
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps4 li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; position: relative; }
.steps4 li::before { counter-increment: s; content: "STEP " counter(s); font-size: 11.5px; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.steps4 h4 { margin: 4px 0 6px; } .steps4 p { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.note { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; border-top: 4px solid var(--all); }
.note.core2 { border-top-color: var(--core2); } .note.core3 { border-top-color: var(--core3); }
.note h4 { margin-bottom: 6px; } .note p { font-size: 14px; color: var(--ink-2); margin: 0; }
.kpi { display: grid; gap: 8px; }
.kpi-row { display: grid; grid-template-columns: 1fr 240px 56px; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.kpi-row .n { font-weight: 600; font-size: 14.5px; } .kpi-row .n small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.kpi-row .bar { height: 10px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.kpi-row .bar i { display: block; height: 100%; background: var(--core1); }
.kpi-row .w { font-weight: 800; text-align: right; font-size: 17px; }
.tbl-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); }
.tbl ul { margin: 0; padding-left: 16px; } .tbl li { margin: 2px 0; }
.acc { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.acc summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before { content: "+"; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink-2); flex: none; }
.acc[open] summary::before { content: "−"; }
.acc .body { padding: 0 18px 14px 46px; font-size: 13.5px; color: var(--ink-2); }
.acc .body ul { margin: 4px 0 10px; padding-left: 18px; }
.lock { background: var(--paper); border: 1px dashed var(--line-2); border-radius: var(--r); padding: 22px; text-align: center; }
.lock h4 { margin-bottom: 4px; } .lock p { color: var(--ink-2); font-size: 14px; margin-bottom: 12px; }

/* ── 소식 · 공지 · 사진 · 동영상 · 자료 ─────────────────── */
.attrib { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.attrib img { width: 14px; height: 14px; object-fit: contain; }
.item-acts { display: inline-flex; gap: 4px; }
.item-acts button { border: 1px solid var(--line-2); background: #fff; border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--ink-2); min-height: 30px; }
.item-acts button:hover { background: var(--paper-2); }
.news-featured { display: grid; grid-template-columns: 5fr 7fr; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 14px; }
.news-featured img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; display: block; }
.news-featured .pic { display: block; background: linear-gradient(135deg, var(--navy), #1F5FCF 60%, #2AB2DE); min-height: 220px; position: relative; }
.news-featured .pic.noimg img { display: none; }
.news-featured .pic.noimg::after { content: ''; position: absolute; inset: 0; background: url(../img/logos/kcell-mark.png) center / 96px no-repeat; opacity: .5; }
.news-featured .body { padding: 22px; }
.news-featured h3 { font-size: 20px; margin: 4px 0 8px; } .news-featured p { color: var(--ink-2); font-size: 14.5px; }
.news-list { display: grid; gap: 8px; }
.news-item { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; align-items: start; }
.news-item .d { text-align: center; } .news-item .d b { display: block; font-size: 17px; letter-spacing: -0.02em; } .news-item .d span { font-size: 12px; color: var(--ink-3); }
.news-item h4 { font-size: 15px; } .news-item h4 a { color: var(--ink); }
.news-item p { color: var(--ink-2); font-size: 13.5px; margin: 4px 0 0; }
.news-item .src { font-size: 12px; color: var(--ink-3); margin-top: 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.auto-head { display: flex; align-items: center; gap: 12px; margin: 30px 0 10px; flex-wrap: wrap; }
.auto-status { font-size: 12.5px; color: var(--ink-3); flex: 1; }
.notice { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.notice.pinned { border-color: var(--navy); }
.notice summary { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.notice summary::-webkit-details-marker { display: none; }
.notice .d { font-size: 12.5px; color: var(--ink-3); } .notice h4 { font-size: 15px; } .notice .cat { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.notice .body { padding: 0 16px 16px 114px; font-size: 14.5px; color: var(--ink-2); }
.notice .body ul { padding-left: 18px; }
.notice .foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.albums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.album { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-align: left; padding: 0; position: relative; }
.album img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--paper-2); display: block; }
.photo.broken img { display: none; }
.photo.broken::before { content: '이미지를 불러오지 못했습니다'; display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; background: var(--paper-2); color: var(--ink-3); font-size: 12px; }
.album .body { padding: 12px 14px; }
.album h4 { font-size: 15px; } .album .m { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.album .edit { position: absolute; top: 8px; right: 8px; }
.album-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.photo { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.photo figcaption { font-size: 12px; color: var(--ink-2); padding: 8px 10px; }
.videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.video { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.video .frame { position: relative; aspect-ratio: 16/9; background: #0B1B3A; }
.video .frame iframe, .video .frame video, .video .frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.15)); color: #fff; }
.video .play span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 13.5px; backdrop-filter: blur(6px); }
.video .body { padding: 12px 14px; } .video h4 { font-size: 15px; } .video .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } .video .note { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; border: 0; padding: 0; }
.doc { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; align-items: center; margin-bottom: 8px; }
.doc .d { font-size: 12.5px; color: var(--ink-3); } .doc h4 { font-size: 15px; } .doc .m { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* ── 푸터 ─────────────────────────────────────────────── */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 30px 0 32px; margin-top: 30px; font-size: 13.5px; color: var(--ink-2); }
.foot-logos { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.foot-logos img { height: 30px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; }
.foot-logos img.kc { height: 34px; filter: none; opacity: 1; margin-right: 10px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1.2fr 1fr; gap: 24px; }
.site-footer h5 { margin-bottom: 6px; color: var(--ink); }
.legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ── 모바일 하단 내비 · 시트 ──────────────────────────── */
.bottom-nav { display: none; }
.sheet { position: fixed; inset: 0; z-index: 70; background: rgba(12,25,50,.45); display: flex; align-items: flex-end; }
.sheet[hidden] { display: none; }
.sheet-body { background: #fff; width: 100%; border-radius: 18px 18px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 6px auto 12px; }
.sheet-body > a { display: block; padding: 13px 6px; font-size: 16px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.sheet-user { padding: 12px 6px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.sheet-user .me { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-right: auto; }
.sheet-user .me .av { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.sheet-user .me small { color: var(--ink-3); font-weight: 500; margin-left: 2px; }

/* ── 편집 모달 · 폼 ───────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(12,25,50,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-box { background: #fff; width: min(680px, 100%); max-height: calc(100vh - 40px); border-radius: 14px; display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 17px; }
.modal-body { padding: 16px 18px; overflow: auto; display: grid; gap: 12px; }
.modal-foot { display: flex; gap: 8px; align-items: center; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.modal-foot .spacer { flex: 1; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-row.c3 { grid-template-columns: 1fr 1fr 1fr; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 11px; background: #fff; min-height: 40px; }
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cyan); outline-offset: 0; border-color: var(--cyan); }
.field .hint { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 0; }
.check input { width: 18px; height: 18px; }
.checks { display: flex; gap: 16px; flex-wrap: wrap; }
.upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.upload input[type=file] { font-size: 13px; max-width: 100%; }
.upload .prog { font-size: 12.5px; color: var(--ink-3); }
.photo-list { display: grid; gap: 8px; }
.photo-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; background: var(--paper-2); border-radius: 8px; padding: 6px; }
.photo-row img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: #fff; }
.photo-row input { border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 8px; width: 100%; font-size: 13px; }
.photo-row button { border: 0; background: transparent; color: var(--red); font-weight: 700; padding: 6px; }
.alert { border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.alert.err { background: var(--red-soft); color: #9F2B25; } .alert.ok { background: var(--done-soft); color: #1E7F63; } .alert.info { background: var(--blue-soft); color: var(--navy); }
.meta-line { font-size: 12.5px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 8px; }

/* 라이트박스 · 토스트 */
.lightbox { position: fixed; inset: 0; background: rgba(5,12,28,.92); z-index: 90; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 6px; }
.lightbox .close, .lightbox .nav { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 26px; }
.lightbox .close { top: 16px; right: 16px; } .lightbox .prev { left: 12px; } .lightbox .next { right: 12px; }
.lightbox .cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8); font-size: 13px; padding: 0 60px; }
#toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: .25s; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.toast.in { opacity: 1; transform: none; }
.toast.err { background: var(--red); } .toast.ok { background: #1E7F63; }

/* 로그인·가입·관리 페이지 */
.auth-wrap { max-width: 460px; margin: 40px auto; padding: 0 20px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 22px; margin-bottom: 4px; }
.auth-card > p { color: var(--ink-2); font-size: 14px; }
.auth-card form { display: grid; gap: 12px; margin-top: 16px; }
.auth-foot { text-align: center; font-size: 13.5px; color: var(--ink-3); margin-top: 16px; }
.auth-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 16px; font-size: 13.5px; }
.auth-card .check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.admin-wrap { max-width: var(--maxw); margin: 28px auto 60px; padding: 0 22px; }
.admin-wrap h1 { font-size: 24px; margin-bottom: 4px; }
.admin-wrap > p.lead { color: var(--ink-2); margin-bottom: 20px; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.status-pill.ok { background: var(--done-soft); color: #1E7F63; } .status-pill.wait { background: var(--amber-soft); color: #9A5A0A; }
.admin-tbl .who img { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 4px; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .setup-grid { grid-template-columns: 1fr; } .org-pick { grid-template-columns: repeat(2, 1fr); } }
.auth-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.auth-logo img { height: 44px; }
.org-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.org-pick label { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: #fff; font-size: 12px; font-weight: 600; }
.org-pick label img { height: 26px; width: 80px; object-fit: contain; }
.org-pick input { position: absolute; opacity: 0; }
.org-pick label:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.admin-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; }
.admin-tbl th, .admin-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.admin-tbl th { background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); }
.admin-tbl select { border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 6px; font-size: 13px; }
.tool { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; margin-bottom: 16px; }
.tool h3 { margin-bottom: 4px; } .tool > p { color: var(--ink-2); font-size: 14px; }
.out { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--navy); color: #DDE7F5; padding: 12px 14px; border-radius: 8px; white-space: pre-wrap; word-break: break-all; margin-top: 10px; min-height: 44px; }
code { background: var(--paper-2); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
ol.steps { padding-left: 20px; color: var(--ink-2); font-size: 14px; } ol.steps li { margin: 5px 0; }


/* ── 연차별 목표 · KPI ─────────────────────────────────── */
.year-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin-bottom: 18px; }
.year-tab { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.year-tab b { font-size: 16px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.year-tab b .cur-badge { font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--amber-soft); color: #9A5A0A; border-radius: 999px; padding: 1px 7px; }
.year-tab small { font-size: 12px; color: var(--ink-3); }
.year-tab:hover { box-shadow: var(--shadow); }
.year-tab.on { border-color: var(--navy); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--navy); }
.goal-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; margin-bottom: 16px; }
.goal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.goal-head h3 { font-size: 17px; } .goal-head h3 small { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 8px; }
.goal-list { padding-left: 22px; margin: 6px 0 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink); }
.goal-list li::marker { color: var(--blue); font-weight: 700; }
.goal-foot { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.kpi-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ks { flex: 1 1 150px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ks .k { display: block; font-size: 12px; color: var(--ink-3); }
.ks .v { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-top: 2px; display: block; }
.ks .v small { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.ks.avg { flex: 2 1 280px; }
.ks.done .v { color: #1E7F63; } .ks.ongoing .v { color: var(--amber); } .ks.late .v { color: var(--red); } .ks.avg .v { color: var(--navy); }
.ks .bar { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin-top: 8px; }
.ks .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--cyan)); border-radius: 4px; transition: width .4s; }
.kpi-block { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.kpi-head h3 { font-size: 17px; } .kpi-head h3 small { font-size: 12.5px; color: var(--ink-3); font-weight: 500; margin-left: 8px; }
.kpi-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13.5px; }
.kpi-table th:first-child, .kpi-table td:first-child { min-width: 240px; }
.kpi-table th { text-align: left; font-size: 12.5px; color: var(--ink-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.kpi-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.kpi-table td .kn { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.kpi-table td .who { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.kpi-table td.num { font-weight: 700; white-space: nowrap; } .kpi-table td.num .u { font-weight: 500; color: var(--ink-3); font-size: 12px; }
.kpi-table .ach { width: 88px; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; font-size: 14px; font-weight: 700; text-align: right; background: #fff; min-height: 38px; }
.kpi-table .ach:focus { outline: 2px solid var(--cyan); border-color: var(--cyan); }
.kpi-table .ach[disabled] { opacity: .5; }
.kpi-table .pbar { display: inline-block; vertical-align: middle; width: 110px; height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin-right: 8px; }
.kpi-table .pbar i { display: block; height: 100%; background: var(--mint); border-radius: 4px; transition: width .4s; }
.kpi-table tr.late .pbar i { background: var(--red); } .kpi-table tr.ongoing .pbar i { background: var(--amber); } .kpi-table tr.planned .pbar i { background: var(--planned); }
.kpi-table .pct { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.kpi-table td.acts { white-space: nowrap; text-align: right; }
.kpi-table .item-acts .del { color: var(--red); border-color: var(--red-soft); }
.chip.late { background: var(--red-soft); color: #9F2B25; }
.goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.goal-org { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; }
.goal-org .h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.goal-org .h img { width: 64px; height: 26px; object-fit: contain; object-position: left; flex: none; }
.goal-org .h > div { min-width: 0; flex: 1; } .goal-org .h b { display: block; font-size: 14px; } .goal-org .h small { font-size: 11.5px; color: var(--ink-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-org ul { padding-left: 18px; margin: 0; display: grid; gap: 5px; font-size: 13.5px; color: var(--ink-2); }
.goal-org .empty { font-size: 13px; color: var(--ink-3); }
.goal-org .goal-foot { margin-top: auto; padding-top: 10px; }
@media (max-width: 1100px) { .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .year-tabs { grid-template-columns: 1fr; gap: 8px; } .year-tab { padding: 10px 12px; } .goal-grid { grid-template-columns: 1fr; } .goal-card, .kpi-block { padding: 14px; } .goal-list { font-size: 14px; } }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .org-strip { grid-template-columns: repeat(3, 1fr); }
  .timeline-layout { grid-template-columns: 1fr; }
  .timeline-layout aside { position: static; }
  .board { grid-template-columns: repeat(2, 1fr); }
  .facts, .steps4 { grid-template-columns: repeat(2, 1fr); }
  .trio, .axes, .core-band, .albums { grid-template-columns: repeat(2, 1fr); }
  .core-band .core-col:last-child { grid-column: 1 / -1; }
  .photos { grid-template-columns: repeat(3, 1fr); }
  .kpi-row { grid-template-columns: 1fr 160px 48px; }
  .roadmap .years { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  :root { --top-h: 56px; }
  body { padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); font-size: 15px; }
  .wrap { padding: 0 16px; }
  .section { padding: 34px 0; }
  .tabs, .brand-sub, .sync span { display: none; }
  .brand img { height: 30px; }
  .user .me small { display: none; }
  .user .me { padding-right: 4px; gap: 0; font-size: 0; }
  .user .me .av { width: 30px; height: 30px; font-size: 13px; }
  .user .btn:not(.only-mobile) { display: none; }
  body:not(.is-member) .user .btn { display: inline-flex; }
  .hero { padding: 26px 0 20px; }
  .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero-grid .lab { order: -1; margin: 0 -16px; }
  .hero h1 { font-size: 24px; }
  .hero-lead { font-size: 14px; }
  .hero-dday .d { font-size: 38px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-stats .v { font-size: 19px; }
  .lab-cap { font-size: 12px; }
  .org-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
  .org-strip a { padding: 8px 10px; min-height: 52px; }
  .org-strip img { width: 68px; height: 22px; }
  .now-grid { grid-template-columns: 1fr 1fr; margin-top: 14px; }
  .now.next { grid-column: 1 / -1; }
  .now { min-height: 84px; padding: 12px 14px; }
  .now .v { font-size: 22px; }
  .section-head { margin-bottom: 14px; }
  .filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
  .filters .grp { flex-wrap: nowrap; }
  .tl-month, .tl-today { grid-template-columns: 1fr; gap: 6px; }
  .tl-month > h3 { position: static; display: flex; align-items: baseline; gap: 6px; }
  .tl-month > h3 b { font-size: 18px; display: inline; }
  .tl-items { padding-left: 16px; }
  .tl-item { padding: 12px 12px 10px; }
  .tl-item::before { left: -23px; }
  .tl-item h4 { font-size: 15px; }
  .tl-item .desc { font-size: 13.5px; }
  .tl-item .who { margin-left: 0; width: 100%; }
  .board { grid-template-columns: 1fr; }
  .sched-toolbar { gap: 8px; }
  .seg { width: 100%; overflow-x: auto; }
  .seg button { flex: 1; padding: 7px 8px; font-size: 13px; white-space: nowrap; }
  .search { max-width: none; margin-left: 0; }
  .cal-cell { min-height: 58px; padding: 4px; }
  .cal-cell .ev { display: none; }
  .cal-cell .dots { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 4px; }
  .cal-cell .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--all); }
  .cal-cell .dots i.core1 { background: var(--core1); } .cal-cell .dots i.core2 { background: var(--core2); } .cal-cell .dots i.core3 { background: var(--core3); }
  .cal-cell .more { display: none; }
  .gantt-inner { --orgw: 120px; }
  .gantt.task .gantt-inner { --orgw: 190px; }
  .g-row .org.task { padding: 5px 8px; }
  .g-row .org { padding: 8px; gap: 6px; } .g-row .org img { width: 44px; height: 20px; } .g-row .org small { display: none; }
  .facts, .steps4, .trio, .axes, .core-band, .albums, .levels, .assoc, .grid.c2, .grid.c3, .videos { grid-template-columns: 1fr; }
  .core-band .core-col:last-child { grid-column: auto; }
  .photos { grid-template-columns: repeat(2, 1fr); }
  .kpi-row { grid-template-columns: 1fr 44px; } .kpi-row .bar { grid-column: 1 / -1; order: 3; }
  .news-featured { grid-template-columns: 1fr; }
  .news-item { grid-template-columns: 50px 1fr; } .news-item .chip.kind { display: none; }
  .notice summary { grid-template-columns: 1fr auto; } .notice .d { grid-column: 1 / -1; order: -1; }
  .notice .body { padding-left: 16px; }
  .doc { grid-template-columns: 1fr; gap: 6px; }
  .foot-grid { grid-template-columns: 1fr; gap: 16px; }
  .foot-logos { gap: 8px 14px; } .foot-logos img { height: 22px; } .foot-logos img.kc { height: 28px; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); height: calc(var(--bnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-3); font-size: 11px; font-weight: 600; background: none; border: 0; text-decoration: none; }
  .bottom-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bottom-nav a[aria-current="page"] { color: var(--navy); }
  .bottom-nav a[aria-current="page"] svg { stroke-width: 2.3; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-box { width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; }
  .f-row, .f-row.c3 { grid-template-columns: 1fr; }
  .org-pick { grid-template-columns: repeat(2, 1fr); }
  .lightbox .cap { padding: 0 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .now-grid { grid-template-columns: 1fr 1fr; }
  .org-strip .t small { display: none; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .tabs a { padding: 8px 8px; font-size: 13px; }
  .brand-sub { display: none; }
}