/* ============================================================
   Apostille Korea — Media/About header. 컨테이너는 class="nav mc-gnb".
   히어로(index.html .nav)의 상단바 CSS를 그대로 복제(값 동일). 언어/병기는 공용 js/i18n.js·about-bi.js가
   .nav 컨텍스트로 인식해 히어로와 동일하게 처리(about-bi.js는 .nav 내부 [data-i18n] 중복병기 제외).
   ============================================================ */

.mc-gnb{
  background:#fff; border-bottom:1px solid #eef1f6;
  padding:14px 80px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:200;
  -webkit-font-smoothing:antialiased;
}

/* 로고 — about.css의 .logo(고객사 로고 카드: 흰카드·138px·세로배치) 무력화 */
.mc-gnb .logo{ display:flex; flex-direction:row; align-items:center; gap:10px;
  background:none; border:none; border-radius:0; min-height:0; padding:0; box-shadow:none; }
.mc-gnb .logo:hover{ border-color:transparent; box-shadow:none; transform:none; }
.mc-gnb .logo img{ max-height:none; max-width:none; object-fit:initial; transition:transform .18s ease, filter .18s ease; }
.mc-gnb .logo-home:hover img{ transform:translateY(-2px); filter:drop-shadow(0 6px 12px rgba(10,42,94,.22)); }

/* 메뉴 — 자연폭으로 가운데 그룹, 간격 약간 좁힘(가운데로 모음) */
.mc-gnb .menu{ display:flex; justify-content:center; align-items:center; gap:32px; }
.mc-gnb .menu .menu-item{ flex:0 0 auto; }
/* 외국어 토글 시 GNB-LANG-LOCK이 .menu gap을 60px로 키우는 것을 미디어/About 헤더에선 톤다운 */
html:not(.ak-enko):not([lang="en"]) .mc-gnb .menu{ gap:34px !important; }
.mc-gnb .menu-item{
  font-size:15px; font-weight:600; color:#1a2e4a;
  display:flex; align-items:center; gap:5px; padding:8px 0;
  text-decoration:none; cursor:pointer;
}
.mc-gnb .menu-item:hover{ color:#1E5BBA; }
.mc-gnb .menu-item .caret{ font-size:10px; opacity:.6; }
.mc-gnb .nav-bi{ display:inline-flex; flex-direction:column; line-height:1.15; }
.mc-gnb .nav-bi .nav-en{ font-size:15px; font-weight:700; }
.mc-gnb .nav-bi .nav-ko{ font-size:10.5px; font-weight:600; color:#7da3d6; letter-spacing:-.2px; margin-top:4px; }
.mc-gnb .nav-sec .nav-en{ color:#7c8aa0; }
.mc-gnb .nav-sec .nav-ko{ color:#9aa6bd; }
.mc-gnb .nav-sec:hover .nav-en{ color:#5b6a82; }
.mc-gnb .menu-item:hover .nav-bi .nav-ko{ color:#7da3d6; }

/* 우측 클러스터 */
.mc-gnb .nav-right{ display:flex; align-items:center; gap:14px; }
.mc-gnb .contact-btn{
  padding:10px 20px; border-radius:8px;
  background:#0A3A8C; color:#fff; text-decoration:none;
  font-size:13px; font-weight:700;
  box-shadow:0 4px 12px rgba(10,58,140,.3);
  transition:all .18s ease;
}
.mc-gnb .contact-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(10,58,140,.36); }
.mc-gnb .contact-btn.bi-btn{ display:inline-flex; flex-direction:column; align-items:center; line-height:1.12; gap:3px; }
.mc-gnb .contact-btn.bi-btn .nav-ko{ font-size:10px; font-weight:600; opacity:.85; }

.mc-gnb .icon-btn, .mc-gnb .user-btn{
  width:40px; height:40px; border-radius:10px;
  background:#f1f5fb; color:#1a2e4a;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; border:none; cursor:pointer; transition:all .18s ease;
}
.mc-gnb .icon-btn:hover, .mc-gnb .user-btn:hover{
  background:#e8f0fb; color:#0A3A8C;
  transform:translateY(-3px) scale(1.05); box-shadow:0 8px 18px rgba(10,58,140,.25);
}

/* Information(두 사람) · My Info(한 사람) 드롭다운 — CSS 호버, JS 불필요 */
.mc-gnb .about-icon, .mc-gnb .user-menu{ position:relative; }
.mc-gnb .ak-dd{
  position:absolute; top:calc(100% + 12px); right:0;
  background:#fff; border-radius:14px; border:1px solid #e8edf4;
  box-shadow:0 18px 44px rgba(26,46,74,.20);
  padding:8px; min-width:212px; max-height:74vh; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:300;
}
.mc-gnb .ak-dd::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.mc-gnb .about-icon:hover .ak-dd, .mc-gnb .user-menu:hover .ak-dd{ opacity:1; visibility:visible; transform:translateY(0); }
.mc-gnb .ak-dd-h{ padding:7px 12px 9px; font-size:12.5px; font-weight:800; color:#0A2A5E; letter-spacing:.01em; border-bottom:1px solid #eef1f6; margin-bottom:4px; }
.mc-gnb .ak-dd-sec{ padding:9px 12px 3px; font-size:10.5px; font-weight:800; color:#9aa6bd; letter-spacing:.06em; text-transform:uppercase; }
.mc-gnb .ak-dd a{ display:block; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:#1a2e4a; text-decoration:none; transition:background .15s ease, color .15s ease, transform .15s ease; }
.mc-gnb .ak-dd a:hover{ background:#f1f5fb; color:#1E5BBA; transform:translateY(-1px); }
.mc-gnb .ak-dd a .ico{ margin-right:8px; }
.mc-gnb .ak-dd .kosub{ font-size:.82em; color:#7da3d6; font-weight:600; margin-top:1px; letter-spacing:-.2px; }
.mc-gnb .ak-dd-sec .kosub{ color:#b3bccb; }

/* 헤더 하단 브레드크럼 네비게이터 (Information › 미디어 센터 › 현재) */
.mc-bc{ background:#f7f9fc; border-bottom:1px solid #eef1f6; }
.mc-bc .mc-bc-in{ max-width:none; padding:9px 80px; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; font-size:12.5px; font-weight:600; color:#7a869c; }
.mc-bc a{ color:#5b6a82; text-decoration:none; transition:color .15s ease; }
.mc-bc a:hover{ color:#1E5BBA; }
.mc-bc .mc-bc-sep{ color:#c2cbd9; }
.mc-bc .mc-bc-root{ color:#0A2A5E; font-weight:800; }
.mc-bc .mc-bc-here{ color:#0A2A5E; font-weight:800; }
.mc-bc .i18n-sub{ color:#9aa6bd; font-weight:600; margin-left:.3em; }
.mc-bc.nav{ display:block; }   /* about-bi.js 스킵용 nav 클래스가 mc-gnb flex와 무관하도록 */
.mc-bc .k{ display:inline; margin-left:.3em; font-size:.92em; color:#9aa6bd; font-weight:600; }  /* 브레드크럼 한글 병기 인라인 */
.mc-bc .mc-bc-here .k{ color:#5b6a82; }

/* 블로그 목록 카드 제목 한글 병기(enko) — blog-list-i18n.js가 .bt-ko 주입 */
.bt-ko{ display:block; font-size:.82em; font-weight:600; color:#7da3d6; margin-top:5px; line-height:1.4; letter-spacing:-.2px; word-break:keep-all; }
@media(max-width:1180px){ .mc-bc .mc-bc-in{ padding:9px 40px; } }
@media(max-width:1024px){ .mc-bc .mc-bc-in{ padding:8px 24px; } }
@media(max-width:560px){ .mc-bc .mc-bc-in{ padding:7px 16px; font-size:11.5px; } }

/* 언어 메뉴 (i18n.js가 #langBtn 라벨 갱신 · floating 주입 생략) */
.mc-gnb .lang-menu{ position:relative; }
.mc-gnb .lang-btn{
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:8px; border:none; cursor:pointer;
  background:#f1f5fb; color:#1a2e4a; font-size:13px; font-weight:600;
  font-family:inherit; white-space:nowrap; transition:all .18s ease;
}
.mc-gnb .lang-btn:hover{ background:#e8f0fb; color:#0A3A8C; }
.mc-gnb .lang-dropdown{
  position:absolute; top:calc(100% + 12px); right:0;
  background:#fff; border-radius:14px; border:1px solid #e8edf4;
  box-shadow:0 18px 44px rgba(26,46,74,.20);
  padding:8px; min-width:184px; max-height:70vh; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .2s ease; z-index:300;
}
.mc-gnb .lang-dropdown::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.mc-gnb .lang-menu:hover .lang-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.mc-gnb .lang-dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:9px 13px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:#1a2e4a;
  text-decoration:none; white-space:nowrap; cursor:pointer; transition:all .15s ease;
}
.mc-gnb .lang-dropdown a:hover{ background:#f1f5fb; color:#1E5BBA; transform:translateY(-2px); }
.mc-gnb .lang-dropdown a .flag-em{ font-size:16px; }

/* 반응형 — 히어로 .nav와 동일 라인에서 좁힘 */
@media(max-width:1180px){ .mc-gnb{ padding:14px 40px; } .mc-gnb .menu{ gap:28px; } }
@media(max-width:1024px){
  .mc-gnb .menu{ display:none; }                    /* 섹션 이동은 하단 네이비 서브탭(.ak-subnav)이 담당 */
  .mc-gnb{ padding:12px 24px; }
}
@media(max-width:560px){
  .mc-gnb{ padding:10px 16px; }
  .mc-gnb .logo img{ height:40px !important; }
  .mc-gnb .logo-ko{ display:none !important; }
  .mc-gnb .icon-btn, .mc-gnb .user-btn{ display:none; }
  .mc-gnb .nav-right{ gap:10px; }
}

/* ============================================================
   세부 용도(Use-Case) 카드 — theme/용도별 신청 페이지 STEP 1
   3D 볼륨: 카드 입체 리프트 + 광택 앱아이콘 타일 + 컬러 글로우
   ============================================================ */
.uc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-left:33px; perspective:1200px; }
.uc-card{
  --acc:#1E5BBA; --accbg:#eaf1fb; --acc2:#4f8ae8;
  position:relative; display:block; text-align:left;
  background:linear-gradient(180deg,#ffffff 0%, #f4f7fc 100%);
  border:1px solid #e3e8f1; border-radius:20px;
  padding:20px 17px 17px; cursor:pointer; overflow:hidden;
  transform:translateZ(0);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(16,32,64,.05), 0 10px 22px -10px rgba(16,32,64,.20);
  transition:transform .24s cubic-bezier(.2,.85,.25,1), box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
/* 상단 컬러 띠 */
.uc-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px; z-index:2;
  background:linear-gradient(90deg,var(--acc),var(--acc2)); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
/* 우상단 컬러 시인(sheen) */
.uc-card::after{
  content:""; position:absolute; top:-46%; right:-32%; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%);
  opacity:0; transition:opacity .28s ease; pointer-events:none;
}
.uc-card:hover{
  border-color:var(--acc);
  transform:translateY(-7px) rotateX(2.5deg);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 3px 5px rgba(16,32,64,.06), 0 26px 42px -14px color-mix(in srgb, var(--acc) 38%, rgba(16,32,64,.32));
}
.uc-card:hover::before{ transform:scaleX(1); }
.uc-card:hover::after{ opacity:1; }
.uc-card.on{
  border-color:var(--acc);
  background:linear-gradient(180deg,#ffffff 0%, var(--accbg) 120%);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 3px 5px rgba(16,32,64,.05), 0 20px 38px -14px color-mix(in srgb, var(--acc) 46%, transparent);
}
.uc-card.on::before{ transform:scaleX(1); }
.uc-card.on::after{ opacity:1; }
/* 3D 광택 앱아이콘 타일 */
.uc-card .uc-ic{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:17px; font-size:28px; line-height:1;
  background:linear-gradient(155deg, #ffffff 0%, var(--accbg) 52%, color-mix(in srgb, var(--acc) 24%, var(--accbg)) 100%);
  margin-bottom:13px;
  box-shadow:
    0 1px 1px rgba(255,255,255,.95) inset,
    0 -3px 7px color-mix(in srgb, var(--acc) 18%, transparent) inset,
    0 7px 15px -5px color-mix(in srgb, var(--acc) 42%, transparent),
    0 2px 4px rgba(16,32,64,.14);
  transition:transform .24s cubic-bezier(.2,.85,.25,1), box-shadow .24s ease;
}
/* 타일 상단 글로스 하이라이트 */
.uc-card .uc-ic::after{
  content:""; position:absolute; top:3px; left:5px; right:5px; height:44%;
  border-radius:13px 13px 18px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  pointer-events:none;
}
.uc-card:hover .uc-ic{
  transform:translateY(-3px) scale(1.07) rotate(-4deg);
  box-shadow:
    0 1px 1px rgba(255,255,255,.95) inset,
    0 -3px 7px color-mix(in srgb, var(--acc) 20%, transparent) inset,
    0 14px 24px -7px color-mix(in srgb, var(--acc) 52%, transparent),
    0 3px 6px rgba(16,32,64,.18);
}
.uc-card.on .uc-ic{ transform:scale(1.05); }
/* 제목 */
.uc-card .uc-tt{ position:relative; z-index:1; font-size:15.5px; font-weight:800; color:#1a2233; line-height:1.3; letter-spacing:-.2px; }
.uc-card.on .uc-tt{ color:var(--acc); }
.uc-card .uc-tt .k{ display:block; font-size:.76em; color:#7da3d6; font-weight:600; margin-top:3px; }
/* 설명 */
.uc-card .uc-ds{ position:relative; z-index:1; font-size:11.5px; color:#6b7689; margin-top:9px; line-height:1.45; word-break:keep-all; }
.uc-card.on .uc-ds{ color:#41506b; }
.uc-card .uc-ds .k{ display:block; color:#9aa6bd; font-size:.95em; margin-top:1px; }
/* 3D 선택 체크 배지 */
.uc-card .uc-chk{
  position:absolute; top:14px; right:14px; z-index:3; width:25px; height:25px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--acc) 55%, #fff) 0%, var(--acc) 62%);
  color:#fff; font-size:13px; font-weight:900;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 1px 1px rgba(255,255,255,.6) inset, 0 4px 9px color-mix(in srgb, var(--acc) 46%, transparent), 0 1px 2px rgba(16,32,64,.18);
  animation:uc-pop .28s cubic-bezier(.3,1.5,.5,1);
}
.uc-card.on .uc-chk{ display:flex; }
@keyframes uc-pop{ from{ transform:scale(0) translateY(-4px); } to{ transform:scale(1) translateY(0); } }
@media(max-width:760px){
  .uc-grid{ grid-template-columns:1fr; margin-left:0; perspective:none; }
  .uc-card:hover{ transform:translateY(-4px); }
}


/* ============================================================
   P2 · 미디어 모바일 햄버거 (≤1024) — 숨겨진 .menu(메인 디렉토리)+신청 노출
   데스크톱(≥1025)은 .mc-nav-toggle 숨김 → 기존 hover 메뉴 그대로
   ============================================================ */
.mc-nav-toggle{display:none;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:#0A2A5E;padding:4px 8px;order:1;}
@media(max-width:1024px){
  .mc-gnb{flex-wrap:wrap;}
  .mc-nav-toggle{display:flex;margin-left:auto;}
  .mc-gnb .nav-right{order:2;}
  .mc-gnb.mc-open .menu{display:flex !important;flex-direction:column;flex-basis:100%;width:100%;order:10;gap:0;margin-top:10px;padding-top:6px;border-top:1px solid #eef1f6;}
  .mc-gnb.mc-open .menu .menu-item{display:flex;align-items:center;width:100%;padding:13px 6px;border-bottom:1px solid #f3f5fa;font-size:15px;}
  .mc-gnb.mc-open .menu .menu-item .caret{margin-left:auto;}
}