/* ============================================================
   온마당 공통 스타일 — common.css
   모든 표준 페이지가 공유하는 디자인 토큰·리셋·헤더·푸터·모바일 메뉴
   ============================================================ */

/* ── 디자인 토큰 ── */
:root{
  --bg:#DAF2FC; --brand:#4F6EBE; --brand-d:#3a539b; --brand-l:#6d8ad6;
  --accent:#7BCE7C; --accent-d:#5fb260; --online:#7EC8E3; --online-d:#2a8db5;
  --plum:#b59ddb;
  --ink:#1f2b44; --ink-soft:#51607d; --ink-faint:#8597ad;
  --line:#c5dcef; --surface:#fff; --soft:#eef7fc;
  --radius:18px; --radius-sm:12px; --radius-pill:999px;
  --shadow:0 6px 24px rgba(79,110,190,.13);
  --shadow-sm:0 2px 10px rgba(79,110,190,.10);
  --shadow-lg:0 14px 40px rgba(79,110,190,.18);
  --maxw:860px;
}

/* ── 리셋 ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.clover{display:inline-block;vertical-align:middle}

/* ── 리뉴얼 안내 배너 ── */
.renewal-banner{
  background:#e8edf8;border-bottom:1px solid #c0cce8;
  color:var(--brand-d);text-align:center;
  font-size:13.5px;font-weight:600;padding:11px 20px;line-height:1.6;
}

/* ── 헤더 ── */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;gap:16px;height:68px;
  max-width:1180px;margin:0 auto;padding:0 24px;
}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-txt b{font-size:18px;color:var(--brand);font-weight:800;display:block;letter-spacing:-.4px;line-height:1.1}
.brand-txt span{font-size:10.5px;color:var(--ink-soft);font-weight:500}

/* GNB */
.nav-links{display:flex;gap:4px;margin-left:20px;flex:1;flex-wrap:wrap}
.gnb-item{position:relative}
.nav-links .gnb-top{
  font-size:14px;font-weight:600;color:var(--ink-soft);
  padding:8px 14px;border-radius:var(--radius-pill);transition:.18s;
  display:block;
}
.nav-links .gnb-top:hover{background:var(--soft);color:var(--brand)}
.nav-links .gnb-top.active{background:var(--brand);color:#fff}
.nav-disabled{
  font-size:14px;font-weight:600;color:#bbc5d4;
  padding:8px 13px;border-radius:var(--radius-pill);
  cursor:default;pointer-events:none;user-select:none;
}

/* GNB 드롭다운 */
.gnb-dd{
  display:none;position:absolute;top:100%;left:0;
  min-width:170px;background:#fff;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:6px 0;z-index:110;
}
.gnb-item:hover .gnb-dd{display:block}
.gnb-dd a{
  display:block;font-size:13.5px;font-weight:500;color:var(--ink-soft);
  padding:9px 18px;transition:.15s;white-space:nowrap;
}
.gnb-dd a:hover{background:var(--soft);color:var(--brand)}

/* 헤더 우측 도구 */
.head-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.head-link{
  display:flex;align-items:center;gap:5px;flex-shrink:0;
  background:#fff;color:var(--brand);font-weight:700;font-size:13.5px;
  padding:9px 16px;border-radius:var(--radius-pill);
  border:1.5px solid var(--brand);transition:.18s;
}
.head-link:hover{background:var(--soft)}
.head-cta{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  background:var(--accent);color:#1c3d1d;font-weight:700;font-size:13.5px;
  padding:9px 16px;border-radius:var(--radius-pill);transition:.18s;
}
.head-cta:hover{background:var(--accent-d)}

/* ── 햄버거 ── */
.hamburger{
  display:none;background:none;border:none;font-size:26px;
  color:var(--brand);cursor:pointer;margin-left:auto;padding:4px;
}

/* ── 모바일 메뉴 ── */
.mobile-menu{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;
  background:rgba(0,0,0,.4);opacity:0;transition:opacity .25s;
}
.mobile-menu.open{display:block;opacity:1}
.mobile-menu-panel{
  position:absolute;top:0;right:0;width:min(320px,85vw);height:100%;
  background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);
  padding:24px;overflow-y:auto;
  transform:translateX(100%);transition:transform .25s;
}
.mobile-menu.open .mobile-menu-panel{transform:translateX(0)}
.mobile-menu-close{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:none;background:var(--soft);
  border-radius:50%;font-size:20px;cursor:pointer;margin-left:auto;margin-bottom:20px;
}
.mobile-menu-nav{display:flex;flex-direction:column;gap:4px}
.mobile-menu-nav a{
  display:block;font-size:15px;font-weight:600;color:var(--ink-soft);
  padding:12px 16px;border-radius:var(--radius-sm);transition:.15s;
}
.mobile-menu-nav a:hover{background:var(--soft);color:var(--brand)}
.mobile-menu-nav a.active{background:var(--brand);color:#fff}
.mobile-menu-nav .disabled{color:#bbc5d4;padding:12px 16px;font-size:15px;font-weight:600}
.mob-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font-size:15px;font-weight:600;color:var(--ink-soft);
  padding:12px 16px;border-radius:var(--radius-sm);
  border:none;background:none;cursor:pointer;transition:.15s;text-align:left;
}
.mob-toggle:hover{background:var(--soft);color:var(--brand)}
.mob-toggle.active{background:var(--brand);color:#fff}
.mob-toggle::after{content:"▸";font-size:12px;transition:transform .2s}
.mob-toggle.open::after{transform:rotate(90deg)}
.mob-sub{display:none;padding-left:16px}
.mob-sub.open{display:block}
.mob-sub a{
  display:block;font-size:14px;font-weight:500;color:var(--ink-soft);
  padding:9px 16px;border-radius:var(--radius-sm);transition:.15s;
}
.mob-sub a:hover{background:var(--soft);color:var(--brand)}
.mobile-menu-divider{height:1px;background:var(--line);margin:12px 0}
.mobile-menu-shortcuts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.mobile-menu-shortcuts a{
  display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--brand);padding:10px 14px;background:var(--soft);
  border-radius:var(--radius-sm);transition:.15s;
}
.mobile-menu-shortcuts a:hover{background:var(--line)}

/* ── 페이지 헤더 (히어로) ── */
.page-hero{background:linear-gradient(135deg,var(--brand),var(--brand-l));color:#fff;padding:52px 0 44px}
.page-hero .breadcrumb{font-size:13px;opacity:.75;margin-bottom:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-hero .breadcrumb a{color:#fff;opacity:.75}
.page-hero .breadcrumb a:hover{opacity:1}
.page-hero h1{font-size:clamp(24px,3.5vw,34px);font-weight:800;letter-spacing:-.8px;margin-bottom:8px}
.page-hero p{font-size:14.5px;opacity:.85}

/* ── 푸터 ── */
footer{background:var(--brand-d);color:rgba(255,255,255,.7);padding:32px 0;text-align:center;font-size:13px}
footer a{color:rgba(255,255,255,.7)}
footer a:hover{color:#fff}

/* ── 반응형 ── */
@media(max-width:900px){
  .head-link span{display:none}
}
@media(max-width:680px){
  .nav-links,.head-tools{display:none}
  .hamburger{display:block}
}