/* ============================================================
   KM캠퍼스 현대 테마 레이어 (디자인 토큰 + 공통 컴포넌트 리프레시)
   레거시 userStyle.css 이후에 로드되어 시각적 톤을 갱신한다.
   구조/마크업은 유지하고 색·타이포·버튼·카드 등 표면을 현대화한다.
   ============================================================ */

:root {
  /* 브랜드 팔레트 — 파인사이버 로고 컬러(#00489c) 기준 */
  --km-primary:        #00489c;   /* 로고 메인 네이비블루 */
  --km-primary-dark:   #00386f;
  --km-primary-light:  #e3edf9;
  --km-accent:         #2f7fd6;   /* 밝은 블루 포인트 */
  --km-success:        #16a34a;
  --km-danger:         #dc2626;
  --km-warning:        #f59e0b;

  /* 중립 */
  --km-ink:            #1f2937;   /* 본문 텍스트 */
  --km-ink-soft:       #4b5563;
  --km-muted:          #9ca3af;
  --km-line:           #e5e7eb;   /* 경계선 */
  --km-bg:             #f8fafc;   /* 페이지 배경 */
  --km-surface:        #ffffff;   /* 카드 표면 */

  /* 형태 */
  --km-radius:         10px;
  --km-radius-sm:      6px;
  --km-shadow-sm:      0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --km-shadow:         0 4px 12px rgba(16,24,40,.08);
  --km-shadow-lg:      0 12px 32px rgba(16,24,40,.12);

  /* 타이포 */
  --km-font: 'Pretendard Variable','Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

/* ---- 기본 타이포/배경 톤 ---- */
body {
  font-family: var(--km-font);
  color: var(--km-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 링크 ---- */
a { transition: color .15s ease; }
a:hover { color: var(--km-primary-dark); }

/* ---- 버튼 계열(레거시 클래스 + 신규 km-btn) ---- */
.km-btn,
button.btn, .btn, input[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--km-font);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--km-radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.km-btn:active, .btn:active { transform: translateY(1px); }

.km-btn-primary,
.btn-primary {
  background: var(--km-primary);
  border-color: var(--km-primary);
  color: #fff;
  box-shadow: var(--km-shadow-sm);
}
.km-btn-primary:hover,
.btn-primary:hover { background: var(--km-primary-dark); border-color: var(--km-primary-dark); color:#fff; }

.km-btn-ghost {
  background: var(--km-surface);
  border-color: var(--km-line);
  color: var(--km-ink);
}
.km-btn-ghost:hover { border-color: var(--km-primary); color: var(--km-primary); }

/* ---- 카드 ---- */
.km-card {
  background: var(--km-surface);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  box-shadow: var(--km-shadow-sm);
  padding: 20px;
}
.km-card:hover { box-shadow: var(--km-shadow); }

/* ---- 배지 ---- */
.km-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--km-primary-light);
  color: var(--km-primary-dark);
}
.km-badge-archive { background: #ecfeff; color: #0e7490; }   /* 아카이브 훈련 표식 */

/* ---- 입력 폼 톤 ---- */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"],
select, textarea {
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-sm);
  padding: 9px 12px;
  font-family: var(--km-font);
  color: var(--km-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--km-primary);
  box-shadow: 0 0 0 3px var(--km-primary-light);
}

/* ---- 테이블 톤(레거시 게시판/목록 가독성 향상) ---- */
table.km-table { border-collapse: collapse; width: 100%; }
table.km-table th {
  background: #f1f5f9;
  color: var(--km-ink);
  font-weight: 700;
  border-bottom: 2px solid var(--km-line);
  padding: 12px;
}
table.km-table td {
  border-bottom: 1px solid var(--km-line);
  padding: 12px;
}
table.km-table tr:hover td { background: #f8fafc; }

/* ---- 스크롤바(웹킷) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--km-muted); }

/* ---- 품질 디테일(디자인 시스템 페이지 한정 — body.kmHome 스코프, 레거시 무영향) ---- */
body.kmHome{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body.kmHome ::selection{ background:var(--km-primary); color:#fff; }
/* 키보드 포커스 링(마우스 클릭엔 미표시) */
body.kmHome a:focus-visible, body.kmHome button:focus-visible,
body.kmHome input:focus-visible, body.kmHome select:focus-visible, body.kmHome textarea:focus-visible{
  outline:2px solid var(--km-primary); outline-offset:2px; border-radius:4px; }
/* 카드/버튼 인터랙션 일관화 */
body.kmHome .kmCourseCard, body.kmHome .kmArchiveCard, body.kmHome .kmRoadCard{ transition:transform .16s ease, box-shadow .16s ease; }
body.kmHome .kmCourseCard:hover, body.kmHome .kmArchiveCard:hover, body.kmHome .kmRoadCard:hover{
  transform:translateY(-3px); box-shadow:0 10px 28px rgba(20,40,80,.10); }
/* 모션 최소화 선호 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  body.kmHome *{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   사이트 소개 페이지(about/*) 공용 컴포넌트 — 2026 리뉴얼
   ============================================================ */
.kmAboutPage{ background:#FFFFFF; }
.kmAboutHero{
  padding:96px 0 120px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0E2A5E 0%,#00489c 60%,#0B1220 100%);
}
.kmAboutHero::after{ content:""; position:absolute; right:-100px; top:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(248,199,64,.22),transparent 60%); }
.kmAboutHero .kmWrap{ position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:0 24px; }
.kmAboutHero .ek{ display:inline-flex; gap:8px; align-items:center; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.14); color:#FBD96B; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; backdrop-filter:blur(8px); }
.kmAboutHero h1{ font-size:clamp(36px,5vw,56px); line-height:1.1; letter-spacing:-.035em; font-weight:800; margin:18px 0 16px; color:#fff; }
.kmAboutHero h1 .hl{ background:linear-gradient(90deg,#A9F5DA,#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kmAboutHero p{ color:rgba(255,255,255,.86); font-size:17px; max-width:680px; line-height:1.6; }
.kmAboutHero .cta{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.kmAboutHero--archive{ background:linear-gradient(160deg,#2C1F88 0%,#5A4BFF 50%,#1A1233 100%); }
.kmAboutHero--archive::after{ background:radial-gradient(circle,rgba(169,245,218,.22),transparent 60%); right:auto;left:-100px;bottom:-100px;top:auto; }
.kmAboutHero--b2b{ background:radial-gradient(60% 60% at 90% 0%,rgba(248,199,64,.18),transparent 60%),linear-gradient(135deg,#0E2A5E 0%,#00489c 60%,#0B1220 100%); }

.kmSection{ padding:80px 0; }
.kmSection--soft{ background:#FAFAFC; }
.kmAboutSecHead{ text-align:center; margin-bottom:40px; }
.kmAboutSecHead .ek{ display:inline-flex; gap:8px; align-items:center; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--km-primary); }
.kmAboutSecHead h2{ font-size:clamp(26px,3.2vw,36px); letter-spacing:-.03em; line-height:1.15; font-weight:800; margin:12px 0 6px; color:var(--km-ink); }
.kmAboutSecHead p.lead{ color:var(--km-ink-soft); font-size:16px; margin:14px auto 0; max-width:640px; }

/* 환급률 박스 */
.kmRateBox{ padding-top:0; margin-top:-72px; position:relative; z-index:5; }
.kmRateBox .rates{ background:#fff; border-radius:22px; padding:32px; box-shadow:0 24px 60px -16px rgba(11,18,32,.18); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1240px; margin:0 auto; padding:32px; }
.kmRateBox .it{ text-align:center; padding:22px; border-radius:16px; background:#FAFAFC; }
.kmRateBox .it.hot{ background:linear-gradient(135deg,#FFF6DA,#FFE6A3); color:#6B4E00; }
.kmRateBox .it .lbl{ font-size:13px; color:var(--km-ink-soft); font-weight:700; margin-bottom:8px; }
.kmRateBox .it.hot .lbl{ color:#6B4E00; }
.kmRateBox .it .big{ font-size:46px; font-weight:900; letter-spacing:-.04em; color:var(--km-primary); line-height:1; }
.kmRateBox .it.hot .big{ color:#6B4E00; }
.kmRateBox .it .desc{ font-size:13px; color:var(--km-ink-soft); margin-top:8px; }
.kmRateBox .it.hot .desc{ color:#6B4E00; }
@media(max-width:900px){ .kmRateBox .rates{ grid-template-columns:1fr; margin-top:-24px; padding:20px; } }

/* 자격조건 */
.kmReqGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.kmReqGrid .req{ background:#fff; border:1px solid var(--km-line); border-radius:18px; padding:28px; }
.kmReqGrid .req .ic{ width:44px; height:44px; border-radius:12px; background:var(--km-primary-light); color:var(--km-primary); display:grid; place-items:center; margin-bottom:12px; font-weight:900; font-size:18px; }
.kmReqGrid .req h3{ font-weight:800; font-size:18px; letter-spacing:-.02em; margin:0 0 10px; color:var(--km-ink); }
.kmReqGrid .req ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.kmReqGrid .req ul li{ position:relative; padding-left:16px; color:var(--km-ink-soft); font-size:14.5px; }
.kmReqGrid .req ul li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--km-primary); }
@media(max-width:760px){ .kmReqGrid{ grid-template-columns:1fr; } }

/* 타임라인 */
.kmTimeline{ position:relative; padding:0 0 0 24px; margin:0; list-style:none; }
.kmTimeline::before{ content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--km-line); }
.kmTimeline li{ position:relative; padding-bottom:32px; }
.kmTimeline li::before{ content:""; position:absolute; left:-22px; top:6px; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--km-primary); }
.kmTimeline small{ display:inline-block; padding:3px 10px; border-radius:999px; background:var(--km-primary-light); color:var(--km-primary); font-weight:700; font-size:11.5px; letter-spacing:.04em; margin-bottom:8px; }
.kmTimeline b{ font-weight:800; font-size:17px; display:block; margin-bottom:6px; color:var(--km-ink); letter-spacing:-.02em; }
.kmTimeline p{ color:var(--km-ink-soft); font-size:14.5px; line-height:1.65; margin:0; }

/* 계산기 */
.kmCalcBox{ background:linear-gradient(135deg,#FFF6DA 0%,#FFFBEE 100%); border-radius:24px; padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.kmCalcBox h2{ font-size:30px; line-height:1.15; letter-spacing:-.03em; font-weight:800; margin:14px 0 12px; color:#3D2A00; }
.kmCalcBox p{ color:#6B4E00; font-size:15px; margin:0 0 18px; }
.kmCalcBox .chip{ display:inline-block; padding:5px 11px; border-radius:999px; background:#fff; color:#6B4E00; font-size:12px; font-weight:800; letter-spacing:.06em; }
.kmCalcForm{ background:#fff; border-radius:18px; padding:24px; box-shadow:0 12px 32px rgba(16,24,40,.08); }
.kmCalcForm label{ display:block; font-size:12.5px; font-weight:700; color:var(--km-ink-soft); margin-bottom:6px; }
.kmCalcForm input,.kmCalcForm select{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--km-line); font-size:14.5px; font-family:inherit; }
.kmCalcForm .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.kmCalcForm .result{ margin-top:14px; padding:16px; background:#FFF6DA; border-radius:12px; display:flex; justify-content:space-between; align-items:center; }
.kmCalcForm .result span{ font-size:13px; font-weight:700; color:#6B4E00; }
.kmCalcForm .result b{ font-size:22px; font-weight:900; letter-spacing:-.03em; color:#3D2A00; }
.kmCalcForm button{ width:100%; margin-top:14px; }
@media(max-width:900px){ .kmCalcBox{ grid-template-columns:1fr; padding:28px; } }

/* FAQ */
.kmFaq{ display:flex; flex-direction:column; gap:10px; }
.kmFaq details{ background:#fff; border:1px solid var(--km-line); border-radius:14px; padding:18px 22px; transition:.15s; }
.kmFaq details[open]{ box-shadow:0 6px 18px rgba(16,24,40,.06); border-color:transparent; }
.kmFaq summary{ list-style:none; cursor:pointer; font-weight:800; font-size:15.5px; color:var(--km-ink); display:flex; gap:10px; align-items:flex-start; }
.kmFaq summary::-webkit-details-marker{ display:none; }
.kmFaq summary::before{ content:"Q"; color:var(--km-primary); font-weight:900; }
.kmFaq summary::after{ content:"▾"; margin-left:auto; color:var(--km-muted); transition:.15s; }
.kmFaq details[open] summary::after{ transform:rotate(180deg); }
.kmFaq details > div{ color:var(--km-ink-soft); font-size:14.5px; line-height:1.7; margin-top:10px; padding-left:24px; }

/* 비교표 */
table.kmCompare{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--km-line); border-radius:18px; overflow:hidden; }
table.kmCompare th,table.kmCompare td{ padding:18px 22px; text-align:left; border-bottom:1px solid var(--km-line); font-size:15px; }
table.kmCompare th{ background:#FAFAFC; font-weight:800; color:var(--km-ink); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
table.kmCompare td.km{ color:var(--km-primary); font-weight:800; background:var(--km-primary-light); }
table.kmCompare tr:last-child td{ border-bottom:none; }

/* 카테고리 그리드 */
.kmCatGrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kmCatGrid .catCard{ background:#fff; border:1px solid var(--km-line); border-radius:18px; padding:20px; display:flex; gap:14px; align-items:center; transition:.18s; }
.kmCatGrid .catCard:hover{ border-color:var(--km-primary); transform:translateY(-3px); box-shadow:0 14px 28px rgba(16,24,40,.08); }
.kmCatGrid .catCard .ic{
  width:64px; height:64px; border-radius:14px;
  background:linear-gradient(135deg,#FAFAFC,#F1F5F9);
  display:grid; place-items:center; flex-shrink:0; overflow:hidden;
  color:var(--km-primary); font-weight:900;
}
.kmCatGrid .catCard .ic img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.kmCatGrid .catCard b{ display:block; font-weight:800; font-size:15px; letter-spacing:-.02em; }
.kmCatGrid .catCard span{ font-size:12.5px; color:var(--km-muted); }
@media(max-width:900px){ .kmCatGrid{ grid-template-columns:repeat(2,1fr); } }

/* 플랜 */
.kmPlans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1100px; margin:0 auto; }
.kmPlans .plan{ background:#fff; border:1px solid var(--km-line); border-radius:20px; padding:30px; display:flex; flex-direction:column; gap:14px; position:relative; transition:.15s; }
.kmPlans .plan:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(16,24,40,.08); }
.kmPlans .plan.feat{ border:2px solid var(--km-primary); background:linear-gradient(180deg,var(--km-primary-light) 0%,#fff 30%); }
.kmPlans .plan .pop{ position:absolute; top:-11px; right:22px; background:#F8C740; color:#6B4E00; padding:5px 11px; border-radius:8px; font-weight:800; font-size:11.5px; letter-spacing:.04em; }
.kmPlans .plan .name{ font-weight:800; font-size:17px; letter-spacing:-.02em; }
.kmPlans .plan .price{ display:flex; align-items:baseline; gap:6px; }
.kmPlans .plan .price b{ font-size:36px; font-weight:900; letter-spacing:-.03em; color:var(--km-ink); }
.kmPlans .plan .price span{ color:var(--km-ink-soft); font-size:13px; }
.kmPlans .plan p.desc{ color:var(--km-ink-soft); font-size:14px; margin:0; }
.kmPlans .plan ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.kmPlans .plan ul li{ display:flex; gap:8px; align-items:flex-start; font-size:14px; color:var(--km-ink); }
.kmPlans .plan ul li::before{ content:"✓"; color:var(--km-primary); font-weight:900; flex-shrink:0; }
.kmPlans .plan .km-btn{ margin-top:auto; justify-content:center; }
@media(max-width:960px){ .kmPlans{ grid-template-columns:1fr; } }

/* B2B Why */
.kmB2bWhy{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.kmB2bWhy .card{ background:#fff; border:1px solid var(--km-line); border-radius:18px; padding:24px; transition:.15s; }
.kmB2bWhy .card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,24,40,.08); }
.kmB2bWhy .card .ic{ width:40px; height:40px; border-radius:11px; background:var(--km-primary-light); color:var(--km-primary); display:grid; place-items:center; font-weight:900; margin-bottom:12px; }
.kmB2bWhy .card b{ font-weight:800; font-size:16px; letter-spacing:-.02em; display:block; margin-bottom:6px; }
.kmB2bWhy .card p{ color:var(--km-ink-soft); font-size:13.5px; margin:0; line-height:1.6; }
@media(max-width:900px){ .kmB2bWhy{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .kmB2bWhy{ grid-template-columns:1fr; } }

/* B2B Form */
.kmB2bForm{ background:#fff; border:1px solid var(--km-line); border-radius:18px; padding:32px; }
.kmB2bForm .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-bottom:14px; }
.kmB2bForm .row.full{ grid-template-columns:1fr; }
.kmB2bForm label{ display:block; font-size:12.5px; font-weight:700; color:var(--km-ink-soft); margin-bottom:6px; }
.kmB2bForm input,.kmB2bForm select,.kmB2bForm textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--km-line); font-size:14.5px; font-family:inherit; background:#fff; }
.kmB2bForm textarea{ resize:vertical; min-height:100px; }
.kmB2bForm button{ width:100%; margin-top:8px; }
.kmFlash{ background:#ECFDF5; border:1px solid #10B981; color:#065F46; padding:14px 18px; border-radius:10px; margin-bottom:14px; font-size:14px; }
@media(max-width:760px){ .kmB2bForm .row{ grid-template-columns:1fr; } }

/* Flow 3-step (아카이브) */
.kmFlow3{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; align-items:center; }
.kmFlow3 .fl{ background:#fff; border:1px solid var(--km-line); border-radius:18px; padding:24px; text-align:center; }
.kmFlow3 .fl .ic{ width:54px; height:54px; border-radius:15px; margin:0 auto 12px; display:grid; place-items:center; font-size:24px; color:#fff; background:var(--km-primary); }
.kmFlow3 .fl.b1 .ic{ background:linear-gradient(135deg,#5A4BFF,#3D31C7); }
.kmFlow3 .fl.b2 .ic{ background:linear-gradient(135deg,#F59E0B,#EC4899); }
.kmFlow3 .fl.b3 .ic{ background:linear-gradient(135deg,#16B79E,#0D8A77); }
.kmFlow3 .fl b{ display:block; font-weight:800; font-size:16px; margin-bottom:6px; letter-spacing:-.02em; }
.kmFlow3 .fl p{ font-size:13.5px; color:var(--km-ink-soft); margin:0; line-height:1.55; }
.kmFlow3 .arr{ font-size:22px; color:var(--km-muted); font-weight:900; }
@media(max-width:900px){ .kmFlow3{ grid-template-columns:1fr; } .kmFlow3 .arr{ display:none; } }

/* CMS area */
.kmCmsArea{ font-size:15.5px; line-height:1.8; color:var(--km-ink); max-width:880px; margin:0 auto; }
.kmCmsArea h2{ font-size:24px; letter-spacing:-.02em; margin:24px 0 12px; }
.kmCmsArea p{ margin:0 0 14px; }

/* ============================================================
   GNB · 패밀리 사이트 전환 강조 링크 (아카이브/사업주 상호 진입)
   ============================================================ */
.kmMenu .kmMenuArchiveLink{ margin-left:auto; }
.kmMenu .kmMenuArchiveLink > a{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:10px;
  background:linear-gradient(135deg,#5A4BFF,#3D31C7);
  color:#fff !important; font-weight:800; font-size:14px;
  box-shadow:0 4px 14px rgba(90,75,255,.32);
  transition:.18s;
}
.kmMenu .kmMenuArchiveLink > a:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(90,75,255,.42); }
.kmMenu .kmMenuArchiveLink .badge{
  display:inline-block; background:#16B79E; color:#fff;
  font-size:10px; font-weight:900; letter-spacing:.06em;
  padding:2px 6px; border-radius:5px; margin-right:2px;
}
.kmMenu .kmMenuArchiveLink .arr{ font-size:13px; opacity:.9; }

/* 아카이브 사이트일 때는 톤 반전(네이비, 사업주 환급으로 돌아가는 링크) */
body.kmArchiveHome .kmMenu .kmMenuArchiveLink > a{
  background:linear-gradient(135deg,#00489c,#0E2A5E);
  box-shadow:0 4px 14px rgba(0,72,156,.32);
}
body.kmArchiveHome .kmMenu .kmMenuArchiveLink > a:hover{
  box-shadow:0 8px 22px rgba(0,72,156,.42);
}

/* 패밀리바 자체도 좀 더 두드러지게 */
.kmTopBar .kmFamily a{ font-weight:700; }
.kmTopBar .kmFamily a.on{ color:var(--km-primary); }
.kmTopBar .kmFamily a:not(.on){ position:relative; padding-right:14px; }
.kmTopBar .kmFamily a:not(.on)::after{
  content:"↗"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:11px; opacity:.7;
}

/* 모바일에서는 GNB 강조 링크 숨김(드로어 안에서 따로 노출) */
@media(max-width: 900px){
  .kmMenu .kmMenuArchiveLink{ display:none; }
}

/* ============================================================
   모바일 햄버거 메뉴 — 우측 드로어 스타일 (시안 이식)
   GNB(.kmNav .kmMenu)는 데스크탑에서 가로 메뉴,
   모바일에서는 우측에서 슬라이드 인 하는 드로어.
   ============================================================ */
@media (max-width: 900px){
  body.kmNavOpen{ overflow:hidden; }

  /* 햄버거 버튼 — 명확한 X 변환 */
  .kmNav .kmNavToggle{
    display:flex; flex-direction:column; gap:5px; justify-content:center; align-items:center;
    width:42px; height:42px; border-radius:11px; border:1px solid var(--km-line);
    background:#fff; padding:0; cursor:pointer;
  }
  .kmNav .kmNavToggle span{
    display:block; width:18px; height:2px; background:var(--km-ink-2);
    border-radius:2px; transition:.2s;
  }
  body.kmNavOpen .kmNav .kmNavToggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.kmNavOpen .kmNav .kmNavToggle span:nth-child(2){ opacity:0; }
  body.kmNavOpen .kmNav .kmNavToggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* 메뉴 → 우측 드로어 */
  .kmNav .kmMenu{
    position:fixed; top:0; right:0; bottom:0;
    width:min(86vw, 360px); height:100dvh; background:#fff;
    flex-direction:column !important; display:flex; align-items:stretch !important;
    padding:80px 18px 32px; z-index:51;
    transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow:-24px 0 60px -20px rgba(11,18,32,.3);
    overflow-y:auto; gap:0 !important;
    list-style:none; margin:0;
  }
  body.kmNavOpen .kmNav .kmMenu{ transform:translateX(0); }
  .kmNav .kmMenu::before{
    content:"메뉴"; display:block; font-size:11px; font-weight:800; color:var(--km-muted);
    letter-spacing:.18em; margin-bottom:8px; padding-left:12px;
  }
  .kmNav .kmMenu li{
    list-style:none; margin:0;
  }
  .kmNav .kmMenu li a{
    display:block; padding:16px 14px; border-radius:12px;
    font-size:15.5px; font-weight:700; color:var(--km-ink) !important;
    border-bottom:1px solid var(--km-line);
    background:transparent !important;
  }
  .kmNav .kmMenu li:last-child a{ border-bottom:none; }
  .kmNav .kmMenu li a:hover{ background:var(--km-primary-light) !important; }

  /* 모바일에서 패밀리 사이트 전환 — 메뉴 최상단에 별도 강조 카드 */
  .kmNav .kmMenu .kmMenuArchiveLink{
    display:block !important;
    order:-1;   /* 최상단 위치(메뉴 헤더 다음) */
    margin-bottom:12px;
  }
  .kmNav .kmMenu .kmMenuArchiveLink > a{
    background:linear-gradient(135deg,#5A4BFF,#3D31C7) !important;
    color:#fff !important;
    border-radius:14px !important;
    padding:18px 18px !important;
    border:none !important;
    font-size:15.5px !important;
    font-weight:800 !important;
    display:flex !important;
    align-items:center; justify-content:space-between;
    box-shadow:0 6px 18px rgba(90,75,255,.36);
  }
  body.kmArchiveHome .kmNav .kmMenu .kmMenuArchiveLink > a{
    background:linear-gradient(135deg,#00489c,#0E2A5E) !important;
    box-shadow:0 6px 18px rgba(0,72,156,.36);
  }
  .kmNav .kmMenu .kmMenuArchiveLink > a:hover{ background:linear-gradient(135deg,#3D31C7,#2D2295) !important; }

  /* 백드롭 */
  .kmNavBackdrop{
    position:fixed; inset:0; background:rgba(11,18,32,.5); z-index:50;
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  body.kmNavOpen .kmNavBackdrop{ opacity:1; pointer-events:auto; }

  /* 상단바 검색/마이 등 모바일 정리 */
  .kmNav .kmSearchTop{ display:none; }
  .kmNav .kmIconBtn{ display:none; }
  .kmNav .kmMy{ padding:6px 10px; border-radius:10px; }
  .kmNav .kmMy .av{ width:30px; height:30px; }

  /* topbar 모바일 정리 — 패밀리바는 보이게, 유틸은 숨김 */
  .kmTopBar{ padding:0; }
  .kmTopBar .kmWrap{ min-height:36px; }
  .kmTopBar .kmTopUtil{ display:none; }
  .kmTopBar .kmFamily{ font-size:11.5px; }
}