/* Pretendard 웹폰트 — 가변 다이나믹 서브셋 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Roboto 웹폰트 (영문·숫자 우선) */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* ============================================
   common.css — 모든 페이지 공통
   색상 변수 · 리셋 · 원스크롤 · 헤더 · 메가메뉴 · 푸터
============================================ */

/* ===== CSS 변수 ===== */
:root{
  --orange:#2A8BCC;          /* 본문 포인트(헤더와 통일된 파랑) */
  --orange-soft:#5aa6dd;
  --sky:#2A8BCC;             /* 헤더 포인트 하늘색 */
  --ink:#1a1a1a;             /* 본문 검정 */
  --ink-soft:#555;
  --beige:#f6f4ef;           /* 히어로 우측 (실제 사이트 색) */
  --section-bg:#f8f8f8;      /* M.C.M·블로그 (실제 사이트 색) */
  --line:#e6e2da;
  --bg:#ffffff;
  --font:'Roboto','Pretendard Variable','Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  --max:1280px;
  --header-h:84px;
}

/* ===== Reset ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}

/* ===== 원스크롤 (JS 풀페이지 제어 — common.js) ===== */
html{scroll-behavior:smooth;overflow-x:hidden;}
/* 풀페이지 섹션: 한 화면 꽉 (영상·M.C.M) */
/* 풀페이지 섹션: 영상과 동일하게 '정확히' 한 화면 높이로 고정 (투스크롤 방지) */
.vh-full{height:calc(100vh - var(--header-h));min-height:0;
  display:flex;flex-direction:column;justify-content:center;}
.section.vh-full{padding-top:40px;padding-bottom:40px;}
.vh-half{min-height:50vh;display:flex;flex-direction:column;justify-content:center;}
.section.vh-half{padding-top:40px;padding-bottom:40px;}
@media(max-width:860px){
  .vh-full,.vh-half{height:auto;min-height:auto;overflow:visible;display:block;}
}

/* ===== 공통 헬퍼 ===== */
.is-hidden{display:none !important;}
/* 전체폭 배경 (가운데 정렬 .section에서도 양옆까지 채움) */
.bg-beige{position:relative;}
.bg-beige::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;background:var(--section-bg);z-index:0;}
.bg-beige > *{position:relative;z-index:1;}

/* ===== HEADER ===== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;justify-content:flex-start;padding:0 max(50px, 9%);
  background:#fff;border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;}
.logo img{height:34px;width:auto;display:block;}
.logo-mark{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:17px;color:#fff;background:linear-gradient(135deg,var(--orange) 0%,#4a3aff 100%);
  box-shadow:0 4px 16px rgba(74,58,255,.3);}
.nav{display:flex;gap:50px;justify-content:center;
  position:absolute;top:0;height:100%;align-items:center;
  left:0;right:0;pointer-events:none;}
.nav-item{pointer-events:auto;}
.nav-item{}
.nav-item > a{font-size:18px;font-weight:500;color:var(--ink);position:relative;
  padding:30px 0;letter-spacing:-.3px;display:inline-block;}
.nav-item > a::after{content:"";position:absolute;left:-14px;right:-14px;bottom:0;height:4px;background:var(--sky);
  border-radius:3px 3px 0 0;z-index:120;transform:scaleX(0);transform-origin:center;transition:transform .26s ease;}
.nav-item:hover > a::after{transform:scaleX(1);}
.nav-item:hover > a{color:var(--sky);}

/* ===== 메가 패널 (전체폭 펼침 · 항목 가로 배치) ===== */
.mega{
  position:fixed; top:calc(var(--header-h) - 1px); left:0; right:0;
  background:#fff;
  box-shadow:0 24px 40px -22px rgba(0,0,0,.18);
  padding:30px 50px;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .26s ease, transform .26s ease, visibility .26s;
  z-index:90;
}
.nav-item:hover .mega{opacity:1; visibility:visible; transform:translateY(0);}
.mega-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:center; align-items:center;
  gap:18px; flex-wrap:wrap;
}
.mega a{
  font-size:16px; font-weight:500; color:var(--ink);
  padding:12px 26px; border-radius:10px; white-space:nowrap;
  transition:background .18s, color .18s;
}
.mega a::after{display:none;}
.mega a:hover{color:var(--sky);}

/* ===== UIRestyler 포털 진입 pill (검색 아이콘 옆) ===== */
.uir-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 20px;box-sizing:border-box;line-height:1;
  border-radius:999px;
  font-family:'Pretendard Variable','Pretendard','Roboto','Noto Sans KR',sans-serif;
  font-size:16px;font-weight:500;letter-spacing:-.2px;
  color:#256ef4;background:#fff;border:1.5px solid #256ef4;
  transition:background .18s, color .18s;
  white-space:nowrap;
}
.uir-cta:hover{background:#256ef4;color:#fff;}
/* .lang a:first-child 규칙이 pill 색을 덮는 것 방지 (강제 지정) */
.lang .uir-cta{color:#256ef4 !important;font-weight:500 !important;}
.lang .uir-cta:hover{color:#fff !important;}

/* ===== 언어 전환 ===== */
.lang{display:flex;gap:14px;align-items:center;font-size:14px;color:#999;margin-left:auto;}
.lang a:first-child{color:var(--ink);font-weight:600;}
.lang span{color:#ccc;}

@media(max-width:1024px){.header{padding:0 22px;}.nav{gap:24px;}.nav-item > a{font-size:15px;}.mega{padding:24px;}}
@media(max-width:860px){.nav,.lang{display:none;}.uir-cta{display:none;}}

/* ===== 공통 섹션 헤더 ===== */
.section{max-width:var(--max);margin:0 auto;padding:90px 50px;}
.sec-head{text-align:center;margin-bottom:50px;}
.sec-head .e{color:var(--orange);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;}
.sec-head h2{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-1px;color:var(--ink);}
@media(max-width:1024px){.section{padding:60px 22px;}}

/* ===== FOOTER ===== */
/* ===== 푸터 (리스타일러와 통일 · footer-v2 3단 구조) ===== */
.footer{background:#222222;color:#9a9a9a;}
.footer-v2{padding:56px clamp(24px,6vw,100px) 44px;background:#222222;}
.footer-brand{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px;}
.footer-social{max-width:var(--max);margin:0 auto 40px;display:flex;gap:14px;}
.footer-social a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#c7ccd4;background:rgba(255,255,255,.07);transition:background .2s ease,color .2s ease;}
.footer-social a svg{width:20px;height:20px;fill:currentColor;flex:none;}
.footer-social a:hover{background:rgba(255,255,255,.16);color:#fff;}
.footer-cols{max-width:var(--max);margin:0 auto 48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;}
.f-col{display:flex;flex-direction:column;gap:14px;}
.f-col-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px;}
.f-col a{font-size:15px;color:#b9bec7;transition:color .15s ease;width:fit-content;}
.f-col a:hover{color:#fff;}
.footer-bottom{max-width:var(--max);margin:0 auto;border-top:1px solid rgba(255,255,255,.12);padding-top:28px;}
.fb-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.fb-legal{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.fb-legal span,.fb-legal a{font-size:14px;color:#9aa0ab;}
.fb-legal span{cursor:default;}
.fb-legal .fb-strong{color:#e8eaee;font-weight:700;}
.fb-legal a{transition:color .15s ease;}
.fb-legal a:hover{color:#fff;}
.fb-lang{margin-left:auto;font-size:14px;font-weight:600;color:#d5d8de;
  border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:9px 18px;}
.footer-v2 .footer-info{margin-top:20px;font-size:13.5px;color:#7e8490;line-height:1.7;}
@media(max-width:768px){.footer-cols{grid-template-columns:1fr;gap:32px;}.fb-row{gap:16px;}}

/* ===== 등장 애니메이션 ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s;}
.reveal.in{opacity:1;transform:none;}

/* ============================================================
   [추가] 네이버/다음式 데스크탑 폭 고정 + 모바일 햄버거 (끝에 추가)
   ※ 거의 append-only. 단 가로스크롤 활성화 위해 html overflow-x를
     861~1024 구간에서만 auto로 재지정함(아래 1곳, 의도된 재정의).
============================================================ */

/* 데스크탑 최소 폭 고정 (1024 미만 → 다음式 가로 스크롤) */
body{min-width:1024px;}
/* 가로 스크롤 구간(861~1024)에서만 html 가로 오버플로 허용 */
@media(min-width:861px) and (max-width:1024px){ html{overflow-x:auto;} }

/* ===== 햄버거 버튼 (데스크탑 숨김 / ≤860 노출) ===== */
.nav-burger{
  display:none;width:36px;height:36px;flex-direction:column;justify-content:center;gap:6px;
  border:0;background:none;cursor:pointer;padding:0;margin-left:auto;
}
.nav-burger span{display:block;width:26px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;}
.nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ===== 모바일 슬라이드 패널 (common.js가 .nav/.lang을 복제해 생성) ===== */
.m-nav-backdrop{
  position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
  background:rgba(0,0,0,.4);z-index:94;opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.m-nav-backdrop.open{opacity:1;visibility:visible;}
.m-nav{
  position:fixed;top:var(--header-h);right:0;bottom:0;width:min(82vw,360px);
  background:#fff;z-index:95;transform:translateX(100%);
  transition:transform .3s ease;overflow-y:auto;
  box-shadow:-14px 0 40px -18px rgba(0,0,0,.35);padding:8px 0 30px;
}
.m-nav.open{transform:translateX(0);}
.m-nav-inner{display:flex;flex-direction:column;}
.m-nav .m-link,.m-nav .m-group-head{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 24px;font-size:17px;font-weight:600;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--line);
  text-align:left;font-family:inherit;cursor:pointer;
}
.m-nav .m-group-head i{
  width:9px;height:9px;border-right:2px solid #9a9a9a;border-bottom:2px solid #9a9a9a;
  transform:rotate(45deg);transition:transform .25s ease;flex:none;margin-right:3px;
}
.m-nav .m-group.open .m-group-head i{transform:rotate(-135deg);}
.m-nav .m-sub{max-height:0;overflow:hidden;background:#f7f7f7;transition:max-height .3s ease;}
.m-nav .m-group.open .m-sub{max-height:360px;}
.m-nav .m-cta{color:#256ef4;}
.m-nav .m-sub a{
  display:block;padding:13px 24px 13px 40px;font-size:15px;color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.m-nav .m-lang{display:flex;gap:20px;padding:20px 24px;}
.m-nav .m-lang a{font-size:14px;color:#999;}
.m-nav .m-lang a:first-child{color:var(--ink);font-weight:700;}

/* 패널 열림 시 배경 스크롤 잠금 */
html.m-nav-open{overflow:hidden;}

/* ===== 분기점 (≤860 = 모바일 햄버거) ===== */
@media(max-width:860px){
  body{min-width:0;}        /* ★ 폭 고정 해제 — 안 하면 폰에서도 1024 고정 */
  .nav-burger{display:flex;}
}
@media(min-width:861px){
  .m-nav,.m-nav-backdrop{display:none;}   /* 데스크탑은 패널 비활성 */
}

/* ===== 언어 전환 — 지구본 아이콘 + 드롭다운 (하이닉스식) ===== */
.lang{position:relative;margin-left:auto;display:flex;align-items:center;gap:6px;}
.lang-btn{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:0;background:none;cursor:pointer;
  color:#444;border-radius:50%;transition:background .15s,color .15s;}
.lang-btn:hover{background:#f2f4f7;color:var(--sky);}
.lang-btn svg{width:28px;height:28px;display:block;stroke-width:1.4;}
.lang-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:150px;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.24);padding:7px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:130;}
.lang.is-open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu a{font-size:14.5px;color:var(--ink);padding:10px 16px;border-radius:8px;
  white-space:nowrap;transition:background .15s,color .15s;}
.lang-menu a:hover{background:#f2f4f7;color:var(--sky);}
.lang-menu a.is-current{font-weight:700;color:var(--sky);}
/* 다국어 임시 비활성 (홈페이지 개편 중) — 아이콘만 노출, 드롭다운 미표시.
   en/jp 폴더·마크업은 보존. 다국어 복원 시 아래 한 줄만 삭제 */
.lang.is-open .lang-menu{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}

/* ===== 검색 (돋보기 버튼 + 상단 검색바 오버레이) ===== */
.search-btn{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:0;background:none;cursor:pointer;
  color:#444;border-radius:50%;transition:background .15s,color .15s;}
.search-btn:hover{background:#f2f4f7;color:var(--sky);}
.search-btn svg{width:26px;height:26px;display:block;stroke-width:1.4;}

.search-overlay{position:fixed;inset:0;z-index:200;
  background:rgba(255,255,255,.98);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;}
.search-overlay.open{opacity:1;visibility:visible;}
.search-bar{max-width:760px;margin:0 auto;padding:46px 24px 0;
  display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);}
.search-bar input{flex:1;border:0;outline:0;background:none;
  font-size:30px;font-weight:600;color:var(--ink);padding:8px 0;font-family:var(--font);}
.search-bar input::placeholder{color:#bbb;font-weight:500;}
.search-ico{width:28px;height:28px;color:var(--ink);flex:none;}
.search-close{width:40px;height:40px;border:0;background:none;cursor:pointer;
  color:#444;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;}
.search-close:hover{background:#f2f4f7;}
.search-close svg{width:26px;height:26px;}
.search-results{max-width:760px;margin:0 auto;padding:18px 24px 60px;
  max-height:calc(100vh - 160px);overflow:auto;}
.search-results .sr-item{display:block;padding:16px 12px;border-radius:10px;
  border-bottom:1px solid var(--line);transition:background .15s;}
.search-results .sr-item:hover{background:#f6f8fb;}
.search-results .sr-crumb{font-size:12.5px;color:#9aa1ab;margin-bottom:4px;}
.search-results .sr-title{font-size:17px;font-weight:700;color:var(--ink);}
.search-results .sr-snip{font-size:14px;color:#666;margin-top:5px;line-height:1.5;}
.search-results .sr-snip mark{background:#dcebf8;color:var(--sky);padding:0 2px;border-radius:3px;}
.search-results .sr-empty{padding:40px 12px;color:#999;font-size:15px;text-align:center;}
@media(max-width:860px){
  .search-bar{padding-top:30px;}
  .search-bar input{font-size:22px;}
}

/* ===== 검색 아이콘 = 지구본과 크기/색/두께 통일 ===== */
.search-btn{
  width:46px; height:46px;          /* 지구본 버튼과 동일 클릭영역 */
  padding:0; border:none; background:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--ink);                 /* 지구본과 동일 색 */
}
.search-btn svg{
  width:28px; height:28px;          /* 지구본 아이콘과 동일 28×28 */
  stroke-width:1.4;                 /* 인라인 2를 덮어 가는 선으로 */
}
.search-btn:hover{ color:var(--sky); }