@charset "utf-8";
/* =========================================================================
   components.css — 반복해서 쓰이는 부품들
   수치는 모두 원본 computed style 실측값 (뷰포트 1280px 기준).
   ========================================================================= */

/* =========================================================================
   1. 카드 공통 (우측 컬럼용 흰 카드)
   ========================================================================= */
.card {
  padding: 20px 24px;
  border-radius: var(--r-card);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card);
}
.card--blue { background: var(--c-bg-blue); }

/* 카드 제목 줄 */
/* 원본은 높이가 28.5px 로 고정된 블록이고, 안의 32px 컨트롤은 위아래로 살짝 넘친다.
   min-height 로 두면 컨트롤 높이(32)에 끌려가 3px 커지고 아래 내용이 전부 밀린다. */
.tit-area {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28.5px;                     /* 원본 실측 : 19px × 1.5 (29 로 박으면 아래가 0.5px 밀린다) */
  margin-bottom: 16px;
  font-size: var(--fs-base);          /* h2~h4 브라우저 기본 크기를 지운다.
                                         flex 일 땐 티가 안 나지만 block 인 공지 제목줄에서는
                                         이 크기가 줄 높이(strut)를 정해 글자를 8px 밀어낸다. */
}
.tit-area .tit {
  font-size: var(--fs-tit);           /* 19px */
  font-weight: 700;
  line-height: 1.5;
}
.tit-area .tit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;                           /* 원본 실측 : 화살표가 제목 오른쪽 4px */
  padding: 3px 4px 2px;               /* 원본 실측 : 제목 글자가 x+4, y+3 */
}
.tit-area .tit-link .ico-arr-right { width: 24px; height: 24px; }   /* 원본 실측 */
.tit-area .tit-link:hover { text-decoration: none; color: var(--c-primary-strong); }
.tit-area .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* 좌측 3카드는 제목 아래 간격을 .cont-wrap 의 gap 이 맡는다 (원본과 동일).
   원본 h4 는 block 이라 제목이 위쪽에 붙는다 — center 로 두면 .tit-link 의
   위쪽 패딩(3px)이 상쇄돼 제목이 3px 위로 올라간다. */
.sch-fld-cont .tit-area {
  flex: none;
  height: auto;
  margin-bottom: 0;
  padding-right: 60px;                /* 원본 실측 : 오른쪽 버튼 자리를 비워 둔다 */
  align-items: center;
  gap: 0;
}

/* 이전/다음 버튼은 제목 줄 안이 아니라 '카드 오른쪽 위 모서리'에 얹힌다.
   원본 실측 : position absolute, top 0, prev right 40 / next right 0 —
   카드 안쪽 패딩(20px)을 무시하고 카드 테두리에 걸쳐 있다. */
.sch-fld-cont { position: relative; }
.sch-fld-cont .tit-area .right {
  position: absolute;
  top: 0;
  right: 0;
  gap: 8px;
}

/* 더 보기 / 텍스트 버튼 — 제목 줄 안에 있어도 굵기를 물려받지 않게 400 고정 */
.btn-txt {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px 2px;               /* 원본 실측 : 박스 높이 28 */
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text);               /* 원본 실측 */
}
/* 원본 '펼쳐보기'·'더 보기' 는 마우스를 올려도 색이 바뀌지 않는다 (실측) */
.btn-txt:hover { color: var(--c-text); text-decoration: none; }
/* 원본 공통 규칙 : 글자버튼 안의 아이콘에는 아래쪽 여백 2px 이 붙는다.
   가운데 정렬(align-items:center)에서 이 2px 이 아이콘을 1px 위로 밀어 올린다.
   빼먹으면 아이콘만 1px 내려앉아 글자와 눈에 띄게 어긋난다. */
.btn-txt:not(.tit-link) > .ico,
.btn-util > .ico-new-window,
.onestop-links a > .ico { margin-bottom: 2px; }
/* 제목 옆 화살표(.tit-link)는 예외 — 원본에서 이건 btn-txt 의 가상요소 아이콘이 아니라
   따로 놓인 요소라 아래 여백이 없다. 같이 묶으면 화살표만 1px 올라간다. */

/* =========================================================================
   2. 버튼
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 16px;                      /* 원본 실측 : 사방 16 (높이는 48 고정이라 결과는 같다) */
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-text-inv);
}
.btn--primary:hover { background: var(--c-primary-strong); border-color: var(--c-primary-strong); }
.btn--line { background: #fff; border-color: var(--c-border-gray); color: var(--c-text); }
.btn--line:hover { border-color: var(--c-primary-strong); color: var(--c-primary-strong); }
.btn--block { width: 100%; }
/* 세로 flex 안에서는 남는 높이가 모자랄 때 버튼이 눌린다 → 48px 를 지킨다 */
.login-before .btn { flex: 0 0 auto; }

/* =========================================================================
   3. 통합검색 바
   바깥 .search-area 가 초록→파랑 그라디언트, 안쪽 .input-fn 이 흰 입력창.
   ========================================================================= */
.main-search-ai { display: flex; justify-content: center; }

.search-area {
  position: relative;
  width: 588px;
  height: 64px;
  padding: 2px;
  border-radius: 32px;
  background: linear-gradient(102deg, #0fb87d 10.14%, #256ef4 79.73%);
  box-shadow: 0 6px 8px rgba(37, 110, 244, .1);
}

.input-fn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 8px 24px;
  border-radius: 32px;
  background: #fff;
}

/* 마스코트 : 입력창 왼쪽에 겹쳐 놓는다 (원본 img-main-serach-ai.png) */
.main-search-ai .input-fn::before {
  content: "";
  position: absolute;
  left: 20px;
  top: -10px;
  width: 72px; height: 72px;
  background: url("../assets/main/img-main-serach-ai.png") no-repeat 50% 50% / contain;
  pointer-events: none;
}

.input-fn .input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 0 0 70px;               /* 마스코트 자리 */
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--fs-tit);          /* 19px */
}
.input-fn .input::placeholder { color: var(--c-text-placeholder); }   /* 원본 실측 : #8a949e */

/* 통합검색 레이어용 — 원본 실측 : 792x80, 1px 테두리(#58616a), radius 6, 글자 24px */
.search-area--plain {
  width: 100%;
  height: 80px;
  margin-top: 12px;
  padding: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
}
.search-area--plain .input-fn {
  height: 80px;
  gap: 0 8px;
  padding: 0 16px 0 0;
  border: 1px solid #58616a;
  border-radius: 6px;
}
.search-area--plain .input-fn::before { content: none; }
.search-area--plain .input {
  height: 78px;
  padding: 0 0 0 16px;
  font-size: 24px;
}
.search-area--plain .btn-send { flex: 0 0 auto; width: 40px; height: 40px; }

/* =========================================================================
   4. 자주 찾는 서비스
   원본은 Swiper 의 grid 모드 : 한 페이지가 4열 × 2행 이고,
   페이지 안에서는 "가로로 먼저" 채운 뒤 다음 페이지로 넘어간다.
       페이지1          페이지2
     ┌──┬──┬──┬──┐   ┌──┬──┬──┬──┐
     │ 1│ 2│ 3│ 4│   │ 9│10│11│12│
     ├──┼──┼──┼──┤   ├──┼──┼──┼──┤
     │ 5│ 6│ 7│ 8│   │13│14│15│16│
     └──┴──┴──┴──┘   └──┴──┴──┴──┘
   ========================================================================= */
.main-favorite { height: 200px; position: relative; }
.main-favorite .tit-area {
  display: block;                     /* 원본과 같이 '블록'. flex 로 두면 안의 .tit 이
                                         flex 항목이 되어 inline 이 block 으로 바뀌고,
                                         align-items:center 에 걸려 제목이 2px 내려간다. */
  margin-bottom: 16px;
}
/* 원본 실측 : 제목은 inline 이고 위로 4px 밀려 있다 */
.main-favorite .tit-area .tit { display: inline; padding-top: 4px; font-size: var(--fs-tit); }
/* 이전/다음/펼쳐보기는 제목줄이 아니라 '카드'를 기준으로 놓인다 (원본 실측).
   원본 좌표 : prev 638 / next 678 / 펼쳐보기 722~800, 셋 다 아래끝이 346 으로 맞춰져 있다.
   그래서 세로는 flex-end 로 바닥을 맞춘다 (버튼 32px, 펼쳐보기 28px). */
.main-favorite .tit-area .right {
  position: absolute;
  right: 24px;                        /* 카드의 padding 상자 기준 (테두리 1px 안쪽) */
  top: 20px;
  display: flex;
  align-items: flex-start;            /* 원본 실측 : 버튼은 314, 펼쳐보기는 318 */
  gap: 8px;
}
.main-favorite .tit-area .right .ico-gather { margin-left: 4px; margin-top: 4px; }

.chip-viewport { overflow: hidden; }

.chip-track {
  display: flex;
  gap: 0;                             /* 페이지끼리는 붙어 있다 (원본 실측) */
  transition: transform .35s ease;
}
/* 한 페이지 = 742 × 108 (원본 .swiper-slide 실측) */
.chip-page {
  flex: 0 0 742px;
  width: 742px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 48px);
  gap: 12px;
}
.chip-page > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--r-chip);       /* 8px */
  background: #fff;
  font-size: var(--fs-sm);            /* 15px */
  font-weight: 700;
}
/* 원본은 칩에 마우스를 올려도 **아무것도 바뀌지 않는다.**
   (원본에서도 전역 a:hover 가 있지만 `.main-favorite-swiper a { color:... }` 가
    나중 시트라 같은 우선순위 싸움에서 이겨 색이 그대로 유지된다) */
.chip-page > a:hover { color: var(--c-text); text-decoration: none; }
/* 원본은 글자 상자의 최대 폭을 '칸 안쪽 - 24px' 로 잡아 아이콘 자리를 비운다 */
.chip-page > a .ellipsis { min-width: 0; max-width: calc(100% - 24px); }
/* 상자·글꼴·줄높이·자간이 원본과 소수점까지 똑같은데도 글자만 1px 어긋나던 자리.
   원인은 CSS 값이 아니라 '그릴 때' 생긴다 — 원본은 이 글자를 슬라이드(변형이 걸린
   상자) 안에서 그리기 때문에 글자 밑선을 그 상자 기준으로 반올림하고, 여기는
   페이지 기준으로 반올림해서 한 픽셀이 갈렸다(밑선이 387.25 처럼 소수일 때만 생긴다).
   그래서 상자는 그대로 두고(높이 고정 + border-box) 글자만 반 픽셀 내려 맞춘다. */
.chip-page > a .ellipsis { height: 22.5px; padding-top: .5px; }

/* 글자를 '회색 계단'으로 그리게 만드는 보정.
   ---------------------------------------------------------------------
   크롬은 글자 가장자리를 두 가지 방법으로 부드럽게 만든다.
     · 서브픽셀(LCD) : 화면 화소의 R/G/B 를 따로 써서 더 또렷하다. 대신 가장자리에
       주황·청록 같은 **색이 낀다.**
     · 회색(grayscale) : 색 없이 회색 농담으로만 처리한다.
   어느 쪽을 쓸지는 CSS 로 고르는 게 아니라 크롬이 알아서 정한다
   (글자 뒤가 '확실히 불투명한지'를 따진다. -webkit-font-smoothing 은 맥 전용이라 윈도우에선 무시된다).

   원본을 확대해 보면 **첫 칩만 색이 끼고 나머지 7개는 회색**이다.
   구조·배경·투명도를 똑같이 맞춰도 클론에서는 8개 모두 색이 꼈다.
   크롬 내부 판단이라 CSS 값으로는 따라갈 수가 없어서, 결과만 맞춘다.

   opacity 를 1 미만으로 주면 그 요소는 별도 레이어에 그려지고, 크롬은 그런 레이어에서는
   서브픽셀을 포기하고 회색으로 그린다. 0.999 는 눈으로는 구별할 수 없다.
   (이 한 줄로 카드 구역의 다른 픽셀이 2,962개 → 0개가 됐다) */
.chip-page > a:not(:first-child) .ellipsis { opacity: .999; }

/* '펼쳐보기' */
.btn-txt.ico-gather { gap: 2px; }

/* =========================================================================
   5. 생활·가족가이드  (원본 구조를 그대로 재현)
   -------------------------------------------------------------------------
   카드 안쪽(260px)보다 넓은 298px 영역을 쓴다. 그래서 .cont-area 가
   좌우로 19px 씩 삐져나오고(margin: 0 -19px), 그만큼 패널 안쪽에서
   다시 19px 을 밀어 넣어 항목이 제자리(60px)에 오게 한다.

     카드 40 ┃  60 ── 항목 256 ── 316  ┃ 340
     cont-area 41 ─────────────────────── 339   (298)
   ========================================================================= */
.sc-main-lifeguide .cont-area {
  margin: 0 -19px;                    /* 원본 실측 : 298px 로 넓힌다 */
  overflow: hidden;                   /* 옆 패널이 카드 밖으로 보이지 않게 */
}
/* 이전/다음 버튼은 흐름에서 빼서 카드 오른쪽 '위 모서리'에 얹는다
   (기준은 position:relative 인 .sch-fld-cont) */
.sc-main-lifeguide .btn-control { position: absolute; top: 0; }
.sc-main-lifeguide .btn-control.prev { right: 40px; }
.sc-main-lifeguide .btn-control.next { right: 0; }

/* 아이콘 탭 : 카드와 별개로 자체 가로 스크롤 */
.sc-main-lifeguide .hor-scroll-wrap {
  margin-left: 23px;                  /* 원본 실측 : 64px 에서 시작 */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.sc-main-lifeguide .hor-scroll-wrap::-webkit-scrollbar { display: none; }

.sc-main-lifeguide .btn-tab {
  display: flex;
  gap: 8px;
  /* 높이를 박지 않는다 : 탭 79.5 + 아래여백 8 = 87.5px.
     88 로 박으면 flex 의 stretch 때문에 탭이 80 으로 늘어나 0.5px 이 어긋난다. */
  padding: 0 24px 8px;                /* 원본 실측 */
  width: max-content;
}
.sc-main-lifeguide .tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  /* 높이를 박지 않는다 : 원본은 56(그림) + 4(간격) + 19.5(글자) = 79.5px 다.
     80 으로 박으면 탭 줄이 0.5px 두꺼워지고 그 아래 목록이 통째로 밀린다. */
  font-size: var(--fs-xs);            /* 13px */
  font-weight: 400;
  color: var(--c-text-sub);
  white-space: nowrap;
  line-height: 1.5;
}
/* 선택 표시는 파란 테두리가 아니라 '초록→파랑 그라디언트 링' 이다 */
.sc-main-lifeguide .tab .img-wrap {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  padding: 2px;
  border-radius: 20px;
}
.sc-main-lifeguide .tab[aria-selected="true"] {
  color: var(--c-primary-strong);     /* #0b50d0 */
  font-weight: 700;
}
.sc-main-lifeguide .tab .img-wrap::before {
  content: "";
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 18px;
  background: transparent;
}
.sc-main-lifeguide .tab[aria-selected="true"] .img-wrap {
  background-image: linear-gradient(to top, #256ef4, #0fb87d);
}
/* 링 안쪽을 흰색으로 덮어야 '테두리 2px' 로 보인다.
   이게 없으면 아이콘 뒤가 그라디언트로 꽉 찬다. */
.sc-main-lifeguide .tab[aria-selected="true"] .img-wrap::before { background: #fff; }
.sc-main-lifeguide .tab .img-wrap .ico-main-life { position: relative; z-index: 1; }

/* 패널 트랙 : 7개 목록이 한 줄에 놓인다 */
.guide-wrapper {
  display: flex;
  height: 340px;
  margin-top: -0.5px;                 /* 원본 실측 : 항목이 660.00 에 오도록 */
  transition: transform .35s ease;
}
.guide-panel {
  flex: 0 0 298px;
  width: 298px;
  margin-right: 1px;                  /* 원본 실측 : 간격 299 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 19px;                  /* 안쪽으로 다시 19px */
  overflow-y: auto;                   /* 원본 실측 : 항목이 넘치면 세로 스크롤된다 */
  overflow-x: hidden;
}
/* 원본 스크롤바는 4px. 기본(15px)으로 두면 항목이 245px 까지 좁아진다 */
.guide-panel::-webkit-scrollbar { width: 4px; }
.guide-panel::-webkit-scrollbar-thumb {
  border-right: 2px solid transparent;   /* 원본과 동일 (background-clip 은 주지 않는다) */
  background: rgba(0, 0, 0, .4);
  border-radius: 2px;
}
.guide-panel::-webkit-scrollbar-track { background: transparent; }
.guide-panel a {
  flex: 0 0 61px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;                        /* 스크롤바 유무에 따라 260 ↔ 256 으로 자동 조정 */
  height: 61px;
  padding: 8px 16px;
  border-radius: var(--r-inner);      /* 12px */
  background: var(--c-bg-banner);     /* #eef2f7 */
  position: relative;                 /* 원본 실측 */
  overflow: hidden;
}
.guide-panel a:hover { background: var(--c-bg-banner); color: var(--c-primary-strong); text-decoration: none; }   /* 원본 실측 : #eef2f7 + #0b50d0 */
/* 폭을 208 로 박으면 스크롤바가 없는 패널(카드 260)에서 4px 모자란다.
   남는 자리를 flex 로 다 쓰게 하면 256/260 양쪽에서 원본과 같아진다. */
.guide-panel .txt {
  flex: 0 1 auto;                     /* 늘리지 않는다 — 짧은 글은 글자 폭 그대로(원본 186/203/199) */
  min-width: 0;
  font-size: var(--fs-sm);            /* 15px */
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================
   6. 원스톱 서비스
   원본은 15개 카드가 한 줄에 늘어서 있고, 필터 탭은 해당 그룹으로 스크롤한다.
   ========================================================================= */
/* 원본과 같은 구조 : cont-wrap 의 자식은 제목과 .cont-area 둘뿐이다.
   버튼·카드·링크를 cont-wrap 직계로 두면 flex gap 이 모든 사이에 들어가
   전체 높이가 넘치고, 고정 높이 카드 안에서 항목들이 눌려 버린다(flex shrink). */
.sc-main-onestop .cont-area {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sc-main-onestop .btn-tab {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-bottom: 12px;                /* 원본 실측 1.2rem */
  overflow-x: auto;
  scrollbar-width: none;
}
.sc-main-onestop .btn-tab::-webkit-scrollbar { display: none; }
.sc-main-onestop .tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                          /* 원본 실측 */
  height: auto;
  padding: 8px 12px;
  border-radius: 18px;
  border: 1px solid var(--c-border-soft);   /* 원본 실측 #e6e8ea */
  background: #fff;
  font-size: var(--fs-xs);            /* 13px */
  font-weight: 400;                   /* 원본 : 미선택은 400 */
  color: var(--c-text);               /* 원본 실측 */
  white-space: nowrap;
}
.sc-main-onestop .tab[aria-selected="true"] {
  background: var(--c-primary-navy);
  border-color: var(--c-primary-navy);
  color: #fff;
  font-weight: 700;                   /* 원본 : 선택만 700 */
}

/* 카드 트랙 : 141 + gap 8 = pitch 149 */
.onestop-viewport { overflow: hidden; }
.onestop-track {
  display: flex;
  gap: 8px;
  transition: transform .35s ease;
}
/* 141.333px : 3장 + gap 8 두 개가 440 에 딱 맞는 값. 정수로 박으면 뒤로 갈수록 어긋난다 */
.onestop-card {
  flex: 0 0 calc((440px - 16px) / 3);
  width: calc((440px - 16px) / 3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 69px;
  padding: 12px 16px;
  border-radius: var(--r-inner);      /* 12px */
  background: var(--c-bg-gray);
}
.onestop-card:hover { background: var(--c-bg-gray); color: var(--c-primary-strong); text-decoration: none; }   /* 원본 실측 : #f4f5f6 + #0b50d0 */
/* 제목은 원본처럼 말줄임 없이 그대로 둔다 (원본 white-space: normal) */
.onestop-card .tit { display: flex; align-items: center; gap: 0 2px; font-size: var(--fs-sm); font-weight: 700; }

/* 원본 CSS 는 여기만 rem 이 아니라 px 로 박아 뒀다 (width: 119px).
   카드 안쪽 폭은 109px 이라 10px 넘치는데, overflow 로 잘리므로 그만큼 글자가 더 보인다. */
.onestop-card .txt {
  width: 119px;
  font-size: var(--fs-xs);            /* 13px */
  letter-spacing: -.13px;             /* 원본 실측 : 여기만 자간이 있다 */
  color: var(--c-text-sub);
  line-height: 1.5;                   /* 원본과 동일 (19.5px) */
}

/* 원본의 '그리기 단계' 차이를 결과만 맞추는 보정 — 자세한 배경은 칩 라벨 쪽 주석 참고.
   원본을 확대해 재 보면 설명글 3줄이 제각각이다.
       1번째 : 657-667 줄, 색 낌      2번째 : 658-668 줄, 색 낌      3번째 : 658-668 줄, 회색
   상자 좌표·글꼴·줄높이는 셋 다 원본과 소수점까지 같은데도 이렇게 갈린다.
   크롬이 '글자 뒤가 확실히 불투명한가'를 그릴 때 따로 판단하기 때문이고, 칠하는 차례(DOM 순서)를
   타므로 카드 번호로 집어서 맞춘다.
     · 1번째 : 줄높이를 눌린 높이(18.5)에 맞춰 글자를 반 픽셀 올린다 (상자 크기는 그대로 18.5px)
     · 3번째 : opacity 로 별도 레이어를 만들어 회색으로 그리게 한다
   이 두 줄로 원스톱 카드줄의 다른 픽셀이 1,007개 → 0개가 된다. */
.onestop-card:nth-child(1) .txt { line-height: 18.5px; }
.onestop-card:nth-child(3) .txt { opacity: .999; }

/* 하단 외부링크 2개 (216 × 37) */
.onestop-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;                    /* 원본 실측 */
}
.onestop-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-height: 37px;
  padding: 8.5px;                     /* 원본 실측 */
  border-radius: var(--r-inner);
  background: var(--c-bg-gray);       /* #f4f5f6 — 원본은 테두리가 없다 */
  font-size: var(--fs-xs);            /* 13px */
  text-align: center;
}
.onestop-links a:hover { color: var(--c-primary-strong); text-decoration: none; }

/* =========================================================================
   7. 혜택알리미 (2열 × 2행, 카드 216×81)
   ========================================================================= */
.benefit-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  /* 원본 실측 : 세로 간격도 8px 이다 (카드 높이 80.75 + 간격 8 + 80.75 = 169.5).
     7px 로 두면 총합은 같지만 카드가 81.25 로 커지면서 2행이 0.5px 위로 올라간다. */
  gap: 8px;
}
.benefit-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: var(--r-inner);      /* 12px */
  background: var(--c-bg-gray);
}
.benefit-card:hover { background: var(--c-bg-gray); color: var(--c-text); text-decoration: none; }   /* 원본 실측 : #f4f5f6, 글자색은 그대로 */
/* 원본은 여러 줄이 아니라 '한 줄 말줄임'이다 (실측 : 184×23, white-space nowrap) */
.benefit-card .tit {
  width: 100%;
  font-size: var(--fs-sm);            /* 15px */
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================================
   8. 우측 : 마이 정부24 (로그인 전)
   ========================================================================= */
.main-mygov { padding: 0; height: 288px; }
.login-before {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;                      /* 원본 실측 */
}
.login-before .txt {
  font-size: var(--fs-tit);           /* 19px */
  font-weight: 700;
  line-height: 1.5;
}
/* 원본은 '회원가입'이 밑줄 있는 링크다 (색만 바꾼 강조 글씨가 아니다) */
.login-before .txt a { color: var(--c-primary-strong); text-decoration: underline; }

.mygov-service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  padding: 16px 0 20px;
}
.mygov-service a {
  display: flex;
  align-items: center;
  gap: 8px;                           /* 원본 실측 */
  width: calc(50% - 4px);
  font-size: var(--fs-sm);            /* 15px */
  font-weight: 700;                   /* 원본 실측 */
}
.mygov-service a:hover { color: var(--c-primary-strong); text-decoration: none; }

.login-before .btn { margin-top: auto; }

/* =========================================================================
   9. 우측 : 공지사항
   ========================================================================= */
.main-notice { position: relative; height: 243px; display: flex; flex-direction: column; }
/* 원본 공지 제목줄은 flex 가 아니라 block 이고, 제목 글자는 inline 이다.
   flex 로 두면 제목 span 이 줄 높이(29)만큼 늘어나 원본(23)과 달라진다. */
/* position 을 주면 안 된다 — '더 보기'의 기준이 제목줄로 바뀌어 24px 왼쪽·20px 아래로 간다.
   원본은 카드(.main-notice)가 기준이다. */
.main-notice .tit-area { display: block; margin-bottom: 4px; }
.main-notice .tit-area .tit { display: inline; }
/* 원본 .more-area : 카드 기준 right 2.4rem / top 1.8rem */
.main-notice .tit-area .right { position: absolute; top: 18px; right: 24px; }
.main-notice .cont-area { flex: none; min-height: 0; }   /* 원본 실측 : 목록 높이 그대로 */

/* 원본은 목록 전체(168px)를 5등분해 33.6px 씩 쓴다. 34 로 박으면 아래로 갈수록 밀린다.
   그리고 배지(📌/N)는 오른쪽 끝이 아니라 '글자 바로 뒤'에 붙는다. */
.notice-list { display: flex; flex-direction: column; }
.notice-list li {
  display: flex;
  justify-content: space-between;     /* 원본 실측 */
  gap: 0 16px;
  min-height: 0;
  padding: 4px 0;                     /* 원본 실측 : li = 4 + 25.5 + 4 = 33.5 */
}
/* 배지는 글자 뒤 '고정 폭'을 비워 두고 그 자리에 얹는다 (원본 실측).
   📌 는 24px, N 은 36px 를 비운다 — 그래서 같은 길이 글자라도 N 쪽이 더 일찍 잘린다. */
.notice-list .ico-pin-black,
.notice-list .ico-new {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;                   /* 원본 실측 */
}
.notice-list .ico-pin-black { padding-right: 24px; }
.notice-list .ico-new       { padding-right: 36px; }
.notice-list .ico-pin-black::after,
.notice-list .ico-new::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  width: 20px; height: 20px;
  background: no-repeat 50% 50% / contain;
}
.notice-list .ico-pin-black::after { background-image: url("../assets/ico/ico-pin-black.svg"); }
.notice-list .ico-new::after       { background-image: url("../assets/ico/ico-new.svg"); }

.notice-list a {
  display: inline-block;
  vertical-align: middle;             /* overflow:hidden 인 inline-block 은 '아래 끝'이 기준선이 되어
                                         글자가 4px 위로 뜬다. middle 로 되돌린다. */
  max-width: 100%;
  min-width: 0;
  font-size: var(--fs-sm);            /* 15px */
  font-weight: 700;
}
.notice-list a:hover { color: var(--c-text); text-decoration: underline; }   /* 원본 실측 : 색은 그대로, 밑줄만 생긴다 */
.notice-list .weak a { font-weight: 400; color: var(--c-text-sub); }

/* =========================================================================
   10. 우측 : 이벤트 배너 (흰 카드 안에 이미지 2장)
   ========================================================================= */
.main-event-banner {
  position: relative;
  height: 255px;
  padding: 0;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.banner-viewport {
  position: relative;
  height: 253px;
  overflow: hidden;
  border-radius: var(--r-card);        /* 원본 실측 16px — 없으면 배너 모서리가 각진다 */
  background: var(--c-primary-weak);
}
.banner-track { display: flex; height: 100%; transition: transform .4s ease; }
.banner-slide { flex: 0 0 100%; height: 100%; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; }

/* 컨트롤은 카드 가운데 아래 (원본 실측 : 좌우 116px 로 정확히 가운데) */
.banner-control {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;                        /* 원본 실측 */
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;            /* 원본 실측 : 24px 자식들이 위에 붙는다 */
  gap: 0 8px;
  height: 24.4px;                     /* 원본 실측 (2.44rem) */
  font-size: var(--fs-sm);            /* 15px */
  color: var(--c-text);
}
/* 쪽번호도 좌우 버튼과 같은 '흰 알약'이다 (원본 실측). 폭은 내용에 맡긴다. */
.banner-control .count {
  display: flex;
  align-items: center;
  gap: 0 4px;
  height: 24px;
  padding: 0 12px;
  border: 1px solid var(--c-border-gray);
  border-radius: 24px;
  background: #fff;
  line-height: 1.5;                   /* 숫자 상자 높이 23 (24 로 두면 18 이 된다) */
  text-align: center;
}
.banner-control .count #bannerNow { color: var(--c-navy-deep); }   /* 원본 실측 */

/* =========================================================================
   11. 드롭다운 (헤더 유틸)
   ========================================================================= */
.dropdown { position: relative; }
/* 헤더 유틸 드롭다운 — 원본 실측
   패널 : padding 8 / radius 8 / 테두리 1px #d7d9db / 그림자 0 4px 12px rgba(0,0,0,.15)
   위치 : 유틸 줄 아래 y=80 에서 시작하고, 항목마다 폭이 다르다(127 / 158 / 178) */
.dropdown-panel {
  position: absolute;
  right: 0;
  top: 36px;                          /* 원본 실측 : 유틸 줄 아래 y=80 */
  z-index: 200;
  display: none;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #d7d9db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
/* 말풍선 꼬리 — 원본은 패널 위쪽에 22x12 삼각형을 붙인다 */
.dropdown-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 22px; height: 12px;
  margin-left: -11px;
  background: url("../assets/bg/bg-header-util-arr.svg") no-repeat 50% 50% / contain;
}
/* 폭·정렬은 항목마다 다르다 (원본 실측) */
.dropdown-panel.foreign-language { left: -5px; right: auto; width: 127px; padding: 16px; }
.dropdown-panel.support-list     { left: 50%; right: auto; width: 158px; transform: translateX(-50%); }
.dropdown-panel.screen-size      { right: 0; width: 178px; padding: 16px; }
.dropdown-panel.screen-size::after { left: auto; right: 28px; margin-left: 0; }
/* 여는 건 오직 이 한 줄이 맡는다.
   .dropdown-panel.screen-size 처럼 특이도가 더 높은 곳에서 display 를 건드리면
   기본값 display:none 을 이겨 버려서 '항상 열려 있는' 상태가 된다. */
.dropdown.is-open .dropdown-panel { display: block; }
.dropdown.is-open .dropdown-panel a,
.dropdown-panel button {
  display: block;
  width: 100%;
  padding: 10px;                      /* 원본 실측 : 항목 높이 45.5 */
  border-radius: 4px;
  text-align: left;
  font-size: var(--fs-base);          /* 17px — 원본은 본문 크기다 */
  white-space: nowrap;
}
/* 드롭다운 안의 '새 창' 링크는 아이콘을 글자 뒤(::after)에 붙인다.
   (헤더 유틸의 <i class="ico-new-window"> 규칙에 끌려가 20x20 상자가 되면 안 된다) */
.dropdown-panel .btn-txt.ico-new-window {
  width: 100%; height: auto;
  background: none;
}
.dropdown-panel .btn-txt.ico-new-window::after {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  margin-left: 2px;
  vertical-align: -3px;
  background: url("../assets/ico/ico-new-window.svg") no-repeat 50% 50% / contain;
}

/* 화면크기 : 48px 줄마다 '가' 배지가 붙고, 아래로 갈수록 배지가 커진다 (원본 실측) */
.dropdown-panel.screen-size .btn-size {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 6px;
  text-align: left;
  font-size: var(--fs-base);
}
.dropdown-panel.screen-size .btn-size::before {
  content: "가";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 23px; height: 23px;
  margin-right: 8px;
  border: 1px solid var(--c-border-gray);   /* 원본 실측 #cdd1d5 */
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  color: var(--c-text);
}
/* 선택된 단계는 배지 테두리가 남색이 된다 (원본 실측 #063a74) */
.dropdown-panel.screen-size .btn-size[aria-pressed="true"]::before { border-color: var(--c-primary-navy); }
.dropdown-panel.screen-size .btn-size.md::before   { width: 26px; height: 26px; font-size: 17px; }
.dropdown-panel.screen-size .btn-size.lg::before   { width: 29px; height: 29px; font-size: 19px; }
.dropdown-panel.screen-size .btn-size.xlg::before  { width: 32px; height: 32px; font-size: 21px; }
.dropdown-panel.screen-size .btn-size.xxlg::before { width: 35px; height: 35px; font-size: 23px; }
.dropdown-panel.screen-size .btn-size.reset { margin-top: 8px; }   /* 원본 실측 */
.dropdown-panel.screen-size .btn-size.reset::before {
  content: "";
  width: 20px; height: 20px;
  margin-right: 4px;
  border: 0;
  border-radius: 0;
  background: url("../assets/ico/ico-reset.svg") no-repeat 50% 50% / contain;
}
.dropdown-panel.screen-size .btn-size:hover { background: var(--c-bg-banner); }
.dropdown-panel a:hover,
.dropdown-panel button:hover { background: var(--c-primary-weak); color: var(--c-primary-strong); text-decoration: none; }
.dropdown-panel button[aria-pressed="true"] { color: var(--c-primary); font-weight: 700; }

.arrow { transition: transform .2s; }
.dropdown.is-open .arrow { transform: rotate(180deg); }