/* ────────────────────────────────────────────
   index2026-a.css  |  A안 전용 스타일
   - Flex 기반 레이아웃
   - 반응형: 1920 → 1200px
   ──────────────────────────────────────────── */
@import "webfont.css";
@import "remixicon.css";

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{overflow-y:scroll;overflow-x:auto;}
html,body{height:100%;}
body{font-family:'Pretendard',sans-serif;background:#fff;color:#222;min-width:1200px;word-break:keep-all;}
/* 내용이 짧아도 바닥글이 화면 아래에 붙게 */
body{display:flex;flex-direction:column;height:auto;min-height:100vh;}
.page-main{flex:1 0 auto;}
.footer-wrap{flex-shrink:0;}

/* ── SKIP NAV ──────────────────────────────── */
#skip a{position:absolute;top:-999px;left:-999px;}
#skip a:focus{top:0;left:0;z-index:9999;background:#222;color:#fff;padding:8px 16px;font-size:14px;}

/* ── HEADER ────────────────────────────────── */
#site-header{position:sticky;top:0;z-index:100;background:#fff;}

.sh-gov-bar{width:100%;background:#edf1f5;height:34px;display:flex;align-items:center;}
.sh-gov-inner{width:100%;max-width:1920px;margin:0 auto;padding:0 200px;display:flex;align-items:center;}
.sh-gov-text{display:flex;align-items:center;gap:10px;font-weight:400;font-size:15px;color:#444;letter-spacing:-0.45px;white-space:nowrap;}
.sh-gov-text img{width:25.5px;height:17px;object-fit:cover;display:block;flex-shrink:0;}

.sh-nav{width:100%;height:70px;background:#fff;border-bottom:1px solid #ddd;}
.sh-nav-inner{width:100%;max-width:1920px;margin:0 auto;height:100%;padding:0 200px;display:flex;align-items:center;justify-content:space-between;}
.sh-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.sh-logo-img{height:40px;width:auto;display:block;}
.sh-links{display:flex;gap:8px;align-items:center;}
.sh-link{display:flex;gap:8px;align-items:center;font-family:sans-serif;font-weight:700;font-size:16px;color:#222;line-height:1.5;white-space:nowrap;text-decoration:none;padding:6px 14px;border-radius:500px;background:transparent;transition:background 0.2s ease;}
.sh-link:hover{background:#edf1f5;}
/* 아이콘은 글자보다 1px 아래 - 상자 기준은 가운데지만 눈으로는 위로 떠 보임 */
.sh-link i,
.sh-link svg{position:relative;top:1px;font-size:16px;line-height:1;transition:transform 0.2s ease;}
.sh-link:hover i,
.sh-link:hover svg{transform:translateX(-2px);}
.sh-link.member-only{display:none;}
#site-header.member-mode .guest-only{display:none;}
#site-header.member-mode .member-only{display:flex;}

/* ── PAGE STRUCTURE ─────────────────────────── */
.page-main{width:100%;background:#fff;}
.page-inner{max-width:1920px;margin:0 auto;padding:0 200px;}

/* ── HERO ──────────────────────────────────── */
.hero-sec{padding-top:110px;}
.hero-title{font-weight:700;font-size:54px;color:#222;line-height:1.4;letter-spacing:-0.162px;}

/* ── CARDS SECTION ─────────────────────────── */
.cards-sec{padding-top:90px;padding-bottom:100px;}

.cards-wrap{
  display:flex;
  align-items:flex-start;
  /* 카드 간 살짝 겹침 */
}

/* 카드 슬롯 */
.card-slot{
  flex:1;
  min-width:0;
  position:relative;
  margin-right:-47px;
  /* 배지가 슬롯 밖으로 나와야 하므로 overflow:visible 유지 */
}
.card-slot:last-child{margin-right:0;}

/* 앞쪽 카드가 뒤쪽 카드 위로 오도록 순서대로 쌓기 */
.card-slot:nth-child(1){z-index:4;}
.card-slot:nth-child(2){z-index:3;}
.card-slot:nth-child(3){z-index:2;}
.card-slot:nth-child(4){z-index:1;}

/* 호버 시 z-index 올림 */
.card-slot:hover{z-index:10;}
.card-slot{transition:transform 0.4s cubic-bezier(.4,0,.2,1);}

/* ── DICT CARD (외부 래퍼 — 회전 담당) ────── */
.dict-card{
  width:100%;
  max-width:390px;
  aspect-ratio:390/380;
  border-radius:40px;
  position:relative;
  /* overflow:visible — 배지가 위로 삐져나와야 함 */
  overflow:visible;
  /* 카드 자체는 눌리지 않으므로 손가락 표시 없음 (버튼에서만 나온다) */
  transform-origin:center center;
  transition:transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s ease;
}

/* 교차 회전: 홀수(1,3)=+4deg, 짝수(2,4)=-4deg */
.card-slot:nth-child(odd) .dict-card{transform:rotate(-4deg);}
.card-slot:nth-child(even) .dict-card{transform:rotate(4deg);}

/* 호버: 회전 풀고 위로
   회전을 준 규칙이 .card-slot:nth-child() .dict-card 라 같은 세기로 눌러야 풀린다 */
.card-slot:nth-child(odd):hover .dict-card,
.card-slot:nth-child(even):hover .dict-card{
  transform:rotate(0deg);
  box-shadow:0 20px 60px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.08);
}

/* ── DICT CARD INNER (실제 bg + overflow:hidden 담당) ── */
.dict-card__inner{
  position:absolute;
  inset:0;
  border-radius:40px;
  overflow:hidden;
  transition:overflow 0s;
}
/* 호버 시 마스코트 이미지 overflow 허용 */
.dict-card:hover .dict-card__inner{overflow:visible;}

/* 카드별 배경색 */
.dict-card--std .dict-card__inner{background:#6d564c;}
.dict-card--woo .dict-card__inner{background:#f58841;}
.dict-card--his .dict-card__inner{background:#3b5ca7;}
.dict-card--mod .dict-card__inner{background:#038374;}

/* ── 배지 (10주년 / 개통) ──────────────────── */
.dict-card__badge{
  position:absolute;
  top:-9px;
  left:44px;
  z-index:4;
  pointer-events:none;
  width:75px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 아래 꼬리만큼 빼서 가운데를 잡는다 - 값이 클수록 글씨가 위로 */
  padding-bottom:6px;
}
.dict-card__badge-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
}
.dict-card__badge span{
  font-weight:700;
  font-size:17px;
  line-height:1;
  position:relative;
  z-index:1;
}
.dict-card__badge--woo span{color:#9d5c36;}
.dict-card__badge--his span{color:#214aa3;}

/* ── 카드 본문 텍스트 영역 ──────────────────── */
.dict-card__body{
  position:relative;
  z-index:2;
  padding:64px 42px 42px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.dict-card__name{
  font-weight:800;
  font-size:38px;
  color:#fff;
  letter-spacing:-0.12px;
  line-height:1.4;
  display:block;
}
/* 이름에 건 링크가 카드 전체를 덮는다.
   덮개의 기준은 .dict-card__body 인데, body 가 inner 를 꽉 채우므로 카드 전체와 같다.
   글씨 끌어 고르기는 막히지만, 카드 어디를 눌러도 사전으로 간다. */
.dict-card__link{
  color:inherit;
  text-decoration:none;
}
.dict-card__link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
/* 키보드로 탭해서 왔을 때 카드 전체에 테두리가 보이게 */
.dict-card__link:focus-visible::after{
  outline:3px solid #fff;
  outline-offset:-6px;
  border-radius:34px;
}

.dict-card__desc{
  margin-top:8px;
  font-weight:500;
  font-size:20px;
  color:rgba(255,255,255,0.8);
  letter-spacing:-0.066px;
  line-height:1.4;
}

/* ── 호버 버튼 ──────────────────────────────── */
.dict-card__btns{
  /* 링크 덮개(z-index:1) 위에 올려야 소개 자료 버튼이 눌린다 */
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:8px;
  /* 소개 자료 버튼 비공개 동안 '바로 가기' 하나만 남으므로 카드 아래쪽에 붙이되
     바닥에서 15px 띄운다. 소개 자료 버튼을 되살릴 때 margin-top:28px / margin-bottom:0 으로 되돌릴 것 */
  margin-top:auto;
  margin-bottom:15px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.25s ease, transform 0.25s ease;
  pointer-events:none;
}
.dict-card:hover .dict-card__btns{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.dict-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:45px;
  padding:0 16px 0 20px;
  border-radius:500px;
  font-weight:600;
  font-size:16px;
  letter-spacing:-0.05px;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  width:fit-content;
  transition:opacity 0.2s ease, gap 0.2s ease;
}
.dict-btn:hover{opacity:0.85;gap:14px;}
.dict-btn i{font-size:18px;flex-shrink:0;margin-left:auto;transition:transform 0.25s ease;}
.dict-btn:hover i{transform:rotate(45deg);}

.dict-btn--fill{background:#fff;color:#6d564c;border:1px solid transparent;}
.dict-btn--fill-woo{color:#e4762e;}
.dict-btn--fill-his{color:#3b5ca7;}
.dict-btn--fill-mod{color:#038374;}
.dict-btn--outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.4);}
button.dict-btn{font-family:inherit;cursor:pointer;}

/* ── 마스코트 이미지 ─────────────────────────── */
.dict-card__img{
  position:absolute;
  pointer-events:none;
  transition:transform 0.35s cubic-bezier(.4,0,.2,1);
}

.dict-card__img--std{width:40%;bottom:26px;right:26px;}
.dict-card--std:hover .dict-card__img--std{transform:translateY(4px) translateX(4px);}

.dict-card__img--woo{width:40%;bottom:26px;right:26px;}
.dict-card--woo:hover .dict-card__img--woo{transform:translateY(4px);}

.dict-card__img--his{width:40%;bottom:26px;right:26px;}
.dict-card--his:hover .dict-card__img--his{transform:translateY(4px) translateX(4px);}

.dict-card__img--mod{width:40%;bottom:26px;right:26px;}
.dict-card--mod:hover .dict-card__img--mod{transform:translateY(4px) translateX(4px);}

/* ── FOOTER ─────────────────────────────────── */
.footer-wrap{background:#faf8f8;border-top:1px solid #e6e6e6;letter-spacing:-0.2px;}
.footer-inner{max-width:1920px;margin:0 auto;padding:0 200px;}

.footer-top{border-bottom:1px solid #e6e6e6;}
.footer-top .footer-inner{height:100px;display:flex;align-items:center;justify-content:space-between;gap:40px;}
.footer-logo{display:flex;align-items:center;flex-shrink:0;}
.footer-logo img{height:40px;width:auto;display:block;}

.footer-bot .footer-inner{height:80px;display:flex;align-items:center;}

.footer-links{display:flex;gap:40px;align-items:center;}
.footer-links a{font-size:18px;color:#222;line-height:1.5;text-decoration:none;white-space:nowrap;font-weight:400;}
.footer-links a.bold{font-weight:700;}
.footer-links a:hover{text-decoration:underline;}
.footer-right{display:flex;gap:8px;align-items:center;flex-shrink:0;position:relative;}
.footer-select-wrap{width:260px;height:48px;background:#fff;border:1px solid #e6e6e6;box-sizing:border-box;border-radius:8px;flex-shrink:0;display:flex;align-items:center;}
.footer-select-wrap:focus-within{box-shadow:0 0 0 2px #444;}
.footer-select{width:260px;height:100%;padding:0 0 0 19px;border:none;outline:none;background:transparent;appearance:none;-webkit-appearance:none;font-family:inherit;font-size:18px;color:#222;cursor:pointer;}
.footer-chevron{width:40px;height:48px;position:absolute;top:0;right:75px;flex-shrink:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.footer-chevron i{font-size:22px;color:#222;line-height:1;}
.footer-btn-wrap{width:67px;height:48px;background:#444;border:none;border-radius:8px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:inherit;}
.footer-btn-wrap p{font-weight:700;font-size:18px;color:#fff;line-height:1.5;letter-spacing:-0.54px;}

/* ── 소개자료 팝업 ──────────────────────────── */
.popup_container{
  display:none;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:200;
}
.popup_container.active{display:block;}
.popup_container .dim{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,0.6);
}
.layer_box{
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:201;
  width:1440px;
  height:700px;
  max-width:95vw;
  max-height:90vh;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  flex-direction:column;
}
.popup_container.active .layer_box{
  display:flex;
  animation:modalIn 0.45s cubic-bezier(.2,0,.2,1) forwards;
}
.layer_box.type_border{
  box-shadow:0 24px 80px rgba(0,0,0,0.18);
}
@keyframes modalIn{
  from{opacity:0;transform:translate(-50%,calc(-50% + 40px));}
  to{opacity:1;transform:translate(-50%,-50%);}
}

.layer_box .pop_head{
  min-height:55px;
  padding:6px 60px 4px 30px;
  line-height:55px;
  background:#292f38;
  box-sizing:border-box;
  flex-shrink:0;
}
.layer_box .pop_head h2{font-size:19px;color:#fff;line-height:40px;font-weight:400;}

/* overscroll-behavior:contain - 팝업 안에서 끝까지 스크롤해도 뒤 화면으로 번지지 않게 */
.layer_box .pop_cont{flex:1;padding:40px;overflow:auto;overscroll-behavior:contain;display:flex;align-items:center;justify-content:center;}
.layer_box .pop_cont img{max-width:100%;max-height:100%;height:auto;display:block;}

/* 소개자료 팝업 - 리플릿을 세로로 쌓는다.
   높이를 못 박지 않고 최대값만 둔다. 그래서
     한 장일 때  - 그림 높이에 맞게 줄어든다 (아래가 비지 않는다)
     두 장일 때  - 94vh 까지 자라고 그 다음부터 스크롤된다
   장수가 바뀌어도 이 규칙 하나로 둘 다 된다. 고칠 것 없다. */
/* 위 56px은 제목 상자 색, 그 아래는 내용 배경색
   소수점 픽셀로 실낱이 생겨도 같은 색이라 보이지 않음 */
.layer_box.type_leaflet{width:1440px;height:auto;max-height:94vh;background:linear-gradient(#292f38 56px,#eceef1 56px);}
/* 94vh 라 소수점 픽셀이 생겨 경계가 1px 어긋남
   내용을 1px 끌어올려 겹치고, 제목 상자가 그 위를 덮게 함 */
.layer_box.type_leaflet .pop_head{position:relative;z-index:1;}
.layer_box.type_leaflet .pop_cont{flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;margin-top:-1px;padding:21px 20px 20px;background:#eceef1;}
/* 가로를 고정하지 않아야 화면이 낮을 때 비율이 깨지지 않고 작아진다 */
.layer_box.type_leaflet .pop_cont img{width:auto;max-width:100%;max-height:100%;flex-shrink:0;}
/* 스크롤 막대 - 아래 둥근 모서리에 닿기 전에 끝나게 함 (화살표 없음) */
.layer_box.type_leaflet .pop_cont::-webkit-scrollbar{width:12px;}
.layer_box.type_leaflet .pop_cont::-webkit-scrollbar-track{background:transparent;margin-bottom:20px;}
/* 투명 테두리 2px + content-box 로 막대를 좌우에서 2px씩 띄움 (막대 자체는 8px) */
.layer_box.type_leaflet .pop_cont::-webkit-scrollbar-thumb{background:#b6bbc3;border-radius:500px;border:2px solid transparent;background-clip:content-box;}
.layer_box.type_leaflet .pop_cont::-webkit-scrollbar-thumb:hover{background:#9aa0aa;background-clip:content-box;}

.layer_box .btn_close{
  position:absolute;
  top:0;
  right:14px;
  width:32px;
  height:55px;
  padding:0;
  border:none;
  background:transparent;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.layer_box .btn_close i{font-size:22px;line-height:1;}
.blind{position:absolute;top:-999px;width:1px;height:1px;text-indent:-999em;font-size:0;line-height:0;overflow:hidden;}

/* ══════════════════════════════════════════════
   RESPONSIVE — 1600px
══════════════════════════════════════════════ */
@media(max-width:1600px){
  .sh-gov-inner,.sh-nav-inner,.page-inner,.footer-inner{padding-left:120px;padding-right:120px;}
  .hero-title{font-size:46px;}
  .dict-card__name{font-size:34px;}
  .dict-card__desc{font-size:19px;}
  .dict-btn{font-size:15px;height:40px;}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — 1400px
══════════════════════════════════════════════ */
@media(max-width:1400px){
  .sh-gov-inner,.sh-nav-inner,.page-inner,.footer-inner{padding-left:60px;padding-right:60px;}
  .hero-sec{padding-top:100px;}
  .hero-title{font-size:40px;}
  .cards-sec{padding-top:60px;padding-bottom:60px;}
  .card-slot{margin-right:-16px;}
  .dict-card{border-radius:30px;}
  .dict-card__inner{border-radius:30px;}
  .dict-card__name{font-size:30px;}
  .dict-card__desc{font-size:17px;}
  .dict-card__body{padding:50px 32px 32px;}
  .dict-btn{font-size:14px;height:38px;padding:0 12px 0 16px;}
  .footer-top .footer-inner{height:auto;padding-top:24px;padding-bottom:24px;flex-wrap:wrap;gap:20px;}
  .footer-bot .footer-inner{height:auto;padding-top:16px;padding-bottom:16px;}
  .footer-links{flex-wrap:wrap;gap:20px;}
  .footer-links a{font-size:16px;}
}