@font-face {
  font-family: "GeekbleMalrangiche";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/GeekbleMalang2WOFF2.woff2")
    format("woff2");
  font-weight: normal;
  font-display: swap;
}

:root {
  --padding-top: 2rem;
  --padding-bottom: 5rem;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --header-height: 8em;
  --footer-height: 0;
  --content-bottom-space: 4rem;
  --common-width: 720px;
  --brand-color: #2D5A27;
  --brand-color2: #4F7942;
  --brand-color3: #EAF0E9;
  --color-brown: #A67C52;
  --color-red: #E5443A;
}
.color {
  color: var(--brand-color);
}

/* 모달 열릴 때 body 스크롤 방지 */
.not_scroll {
  overflow: hidden !important;
}

/* 클릭시 파란박스 방지 */
* {
  -webkit-tap-highlight-color: transparent;
}

body::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
body::-webkit-scrollbar-thumb {
  height: 30%;
  background: rgba(128, 117, 105, 0.5);
  border-radius: 0.3rem;
}
body::-webkit-scrollbar-track {
  background: rgba(128, 117, 105, 0.3);
}

#wrap {
  height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: #fff;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
}
main {
  width: 100%;
  min-height: 0;
}
main > .container {
  padding-bottom: var(--content-bottom-space);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.home-wrap main > .container,
#wrap:has(#footer) main > .container {
  padding-bottom: calc(var(--content-bottom-space));
}

.container {
  width: 100%;
  padding: 0 2rem 3rem;
  margin: 0 auto;
  /* margin-top: 1rem; */
}
header {
  position: sticky;
  top: var(--safe-area-top);
  left: 0;
  z-index: 999;
  min-height: var(--header-height);
  background: #fff;
  display: flex;
  align-items: center;
  transition: border-color 0.25s ease;
}

/* gnb 열렸을 때 header 상태 */
.home-wrap header.is-gnb-open {
  border-bottom: 1px solid #1A2F19
}

header .container {
  width: 100%;
}

header .hd-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 100%;
}

header .hd-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

header .hd-title img {
  width: 15rem;
}

/* 햄버거 버튼 */
#navBtn {
  position: relative;
  z-index: 1003;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#navBtn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background: #24572a;
  border-radius: 999px;
  transform-origin: center;
  transition:
    top 0.25s ease,
    transform 0.25s ease,
    opacity 0.2s ease;
}

#navBtn span:nth-child(1) {
  top: 0.2rem;
}

#navBtn span:nth-child(2) {
  top: 0.7rem;
}

#navBtn span:nth-child(3) {
  top: 1.2rem;
}

#navBtn span:nth-child(4) {
  top: 1.7rem;
}

/* 햄버거 → X */
#navBtn.is-active span:nth-child(1) {
  top: 0.9rem;
  transform: rotate(45deg);
}

#navBtn.is-active span:nth-child(2),
#navBtn.is-active span:nth-child(3) {
  opacity: 0;
  transform: translateX(0.8rem);
}

#navBtn.is-active span:nth-child(4) {
  top: 0.9rem;
  transform: rotate(-45deg);
}

/* dim */
#gnbDim {
  position: fixed;
  top: calc(var(--header-height) + var(--safe-area-top));
  bottom: var(--safe-area-bottom);
  left: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#gnbDim.is-active {
  opacity: 1;
  visibility: visible;
}

/* 우측 슬라이드 메뉴 */
#gnb {
  position: fixed;
  top: calc(var(--header-height) + var(--safe-area-top));
  right: var(--safe-area-right);
  bottom: var(--safe-area-bottom);
  z-index: 1002;
  width: 70%;
  max-width: 300px;
  background: #FDFBF7;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#gnb.is-active {
  transform: translateX(0);
}

#gnb ul {
  margin: 0;
  list-style: none;
}

#gnb li {
  border-bottom: 1px solid #1A2F19;
  margin-left: 1rem;
  margin-right: 4rem;
}

#gnb li:first-child {
  border-top: 0;
}

#gnb a {
  display: block;
  padding: 1rem 0;
  color: #333;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

#gnb a.is-current {
  /* color: #24572a; */
  /* font-weight: 700; */
}
header {
}
.headline_box .headline {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
}
.headline_box .headline b {
  color: #074acb;
}
.headline_box .sub_headline {
  font-size: 2rem;
  font-weight: 700;
}

/* 광고는 부모 flex 정렬(align-items:flex-start 등)과 무관하게 항상 전체 폭 확보
   → 빈 <ins> 폭 0으로 인한 push 스킵/미노출 방지 */
.ads_infeed {
  width: 100%;
}
.ads_infeed .adsbygoogle {
  width: 100%;
}

.ad-item .ads_infeed {
  margin: 0 !important;
}

.ads_infeed:first-child {
  margin-top: 0 !important;
}

.ads_infeed {
  width: 100%;
  min-height: 10rem;
  border: 1px solid tomato
}

/* layout */
.grid1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
.gap0 {
  gap: 0 !important;
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.gap12 {
  gap: 1.2rem
}
.gap16 {
  gap: 1.6rem
}
.pd0 {
  padding-top: 0 !important
}
.mt0 {
  margin-top: 0 !important
}


.box {
  width: 100%;
  position: relative;
  padding: 2rem;
  overflow: hidden;
  border-radius: 1.1rem;
  background: #fff;
  position: relative;
  z-index: 1;
}

.box .desc {
  font-size: 1.3rem;
  text-align: left;
  color: #666;
  line-height: 1.6;
  width: 100%;
}
.shadow {
  box-shadow: 0px 4px 10px 0px #0000000D;
}
.box.has-lb {
  padding-left: 2.3rem;
  border: 1px solid #dedede;
  /* padding-bottom: 3rem !important; */
}
.box.has-lb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 100%;
  background: var(--brand-color)
}
.icon-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem
}
.icon-bg {
  position: absolute;
  right: 1rem;
  z-index: 1;
  bottom: 1rem;
}
.icon-h47 {
  height: 3.6rem;
  width: 3.6rem;
}
.icon-h47 img {
  height: 100%
}
.icon-h70 {
  height: 5.8rem;
}
.icon-h70 img {
  height: 100%
}
.w-full {
  width: 100%;
}
.flex {
  display: flex;
}
.column {
  flex-direction: column;
}
.a-center {
  align-items: center;
}
.a-start {
  align-items: flex-start;
}
.a-end {
  align-items: flex-end;
}
.j-center {
  justify-content: center;
}
.j-between {
  justify-content: space-between;
}
.icon-box .left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4rem;
  flex: 1;
}
.icon-box b {
  color: #333;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.4;
  flex: 1
}
.icon-box .left span {
  font-weight: 400;
  line-height: 2;
  color: #333;
  font-size: 1.4rem;
  flex: 1;
}
.icon-arr {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}
.icon-arr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.icon-img {
  width: 1.8rem;
  flex-shrink: 0;
}
.icon-img img {
  width: 100%;
}
.icon-30 {
  width: 3rem;
}
.title {
  width: 100%;
  margin: 3rem auto 2rem;
}
.title h3 {
  font-size: 1.8rem;
  font-weight: 600;
  width: 100%;
  text-align: left
}
.radius-8 {
  border-radius: 0.8rem !important
}
.has-border {
  border: 1px solid var(--brand-color) !important;
}
.has-border-2 {
  border: 1px solid var(--brand-color2) !important;
}
.has-border-gray {
  border: 1px solid #dedede !important;
}
.no-border {
  border: 0 !important;
}
.no-bg {
  background: transparent !important;
}
.b-1 {
  background: var(--brand-color) !important;
}
.b-2 {
  background: var(--brand-color2) !important;
}
.b-3 {
  background: var(--brand-color3) !important;
}
.b-white {
  background: #fff !important;
}
.c-white {
  color: #fff !important;
}
.c-brown {
  color: var(--color-brown)
}
.c-red {
  color: var(--color-red) !important;
}
.c-b1 {
  color: var(--brand-color) !important
}
.c-b2 {
  color: var(--brand-color2) !important
}
.c-dark {
  color: #333 !important
}
.c-b3
.pd14 {
  padding: 1.4rem 1rem
}
.pb40 {
  padding-bottom: 3rem !important;
}
.pb90 {
  padding-bottom: 9rem !important;
}

.link-group-depth2 li {
  position: relative;
}

.link-group .title {
  margin-top: 0
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.6rem 1rem;
}

.btn span {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 0;
}

/* font */
.f-20 {
  font-size: 2rem !important;
}
.f-18 {
  font-size: 1.8rem !important;
}
.f-16 {
  font-size: 1.6rem !important;
}
.f-14 {
  font-size: 1.4rem !important;
}
.f-12 {
  font-size: 1.2rem !important;
}
.f-10 {
  font-size: 1rem !important;
}

#footer {
  width: 100%;
  border-top: 1px solid #1A2F19;
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  transform: translateX(-50%);
  background: #FDFBF7;
  z-index: 999;
  min-height: calc(var(--footer-height) + var(--safe-area-bottom));
  padding-right: var(--safe-area-right);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
}
#footer ul {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}
#footer li {
  flex: 1;
  flex-shrink: 0;
}
#footer a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 4rem;
}
#footer .icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem
}
#footer .icon img {

}
#footer b {
  font-weight: 400;
  color: var(--brand-color);
  font-size: 1.2rem;
}

/*********************
     sub common
*********************/
.sub-section {
  /* padding: 1.4rem; */
}

.sub-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
}

.sub-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.sub-title .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.sub-title .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sub-title span {
  font-size: inherit;
  font-weight: inherit;
}

.sub-desc p {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.4;
  /* margin-bottom: 1.4rem; */
}

.sub-con {
  width: 100%;
}

.sub-header--center {
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  gap: 0;
  text-align: center;
}

.sub-header--center .sub-title {
  width: 100%;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
}

.sub-header__back {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-header__back img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}

.sub-header__back::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  border-left: 0.2rem solid #1A2F19;
  border-bottom: 0.2rem solid #1A2F19;
  transform: translateY(-50%) rotate(45deg);
}

.page-ready__body .box {
  padding: 2rem;
}

.page-ready__body h2 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.page-ready__body p {
  font-size: 1.4rem;
  color: #666;
  line-height: 1.7;
}

.diagnosis-header .sub-header__back {
  top: -0.6rem;
  left: -0.7rem;
  transform: none;
}

.diagnosis-progress {
  width: 100%;
  height: 1.3rem;
  overflow: hidden;
  border-radius: 10rem;
  background: #DEDEDE;
}

.diagnosis-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-color);
  transition: width 0.25s ease;
}

.diagnosis-question-text {
  width: 100%;
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 1.4rem;
}

.diagnosis-con {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.diagnosis-choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.diagnosis-choice {
  min-height: 5.6rem;
}

.diagnosis-result {
  padding: 2rem;
}

.diagnosis-result h3 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.diagnosis-result p {
  font-size: 1.4rem;
  color: #666;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.diagnosis-section.is-result .sub-title span {
  cursor: pointer;
}

/* 타이틀 녹색 */
.diagnosis-header .sub-title span {
  color: var(--brand-color);
}

/* back 버튼: 이미지 사용 → 기존 CSS 화살표 숨김 */
.diagnosis-header .sub-header__back::before {
  content: none;
}

/* 프로그레스바: 중앙 헤더(gap:0)에서 타이틀과 붙는 문제 → 간격 추가 */
.diagnosis-header .diagnosis-progress {
  margin-top: 1.6rem;
}

/* 단계 화면 레이아웃 */
#stepView,
#resultView {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* hidden 속성이 id 선택자(display:flex)에 묻히지 않도록 명시적으로 숨김 */
#stepView[hidden],
#resultView[hidden] {
  display: none;
}

/* 질문 ↔ 설명 사이 구분선 + 설명 */
.diagnosis-desc-wrap {
  border-top: 1px solid var(--brand-color);
  padding-top: 1.6rem;
}
.diagnosis-desc {
  font-size: 1.4rem;
  color: #666;
  line-height: 1.6;
  font-weight: 300;
}
.diagnosis-question-text {
  margin-bottom: 0;
}

/* 2줄 선택 버튼 — 전역 .btn span(line-height:0) 덮어쓰기 */
.diagnosis-choice {
  min-height: 6.4rem;
  padding: 1.2rem 1rem;
}
.diagnosis-choice span {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

/* 하단 개인정보 안내문 */
.diagnosis-privacy {
  font-size: 1.4rem;
  color: #8e8e8e;
  line-height: 1.6;
  text-align: center;
}

/* 결과 서브문구 */
.diagnosis-result-sub {
  font-size: 1.4rem;
  color: #8e8e8e;
  line-height: 1.5;
}

/* 결과 배너 */
.diagnosis-banner {
  background: var(--brand-color);
  border-radius: 1.4rem;
  padding: 2rem 1.2rem;
  color: #fff;
}
.diagnosis-banner__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.diagnosis-banner__icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.diagnosis-banner__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.diagnosis-banner__head b {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
}
.diagnosis-banner p {
  font-size: 1.35rem;
  line-height: 1.6;
  color: #fff;
  padding-left: 3.2rem;
}

/* 결과 화면에서 link-group 상단 여백 제거 (gap으로 처리) */
#resultView .link-group {
  margin-top: 0;
}

/* 자유로운 일반 통장: bb-con 안 서브문구↔배너 간격 */
.diagnosis-result-head {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}


/*********************
   정치24 header (메인/서브 분기)
*********************/
/* 메인 헤더 */
.main-header .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.6rem 2rem;
}
.main-header .hd-logo-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  text-decoration: none;
}
.main-header .hd-logo {
  max-width: 16.9rem;
  max-height: 5.2rem;
  object-fit: contain;
  width: 38vw;
}
.main-header .hd-sub-text {
  display: inline-block;
  line-height: 1.2;
}

/* 서브 헤더 */
.sub-header-bar .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding: 1.6rem 2rem;
}
.sub-header-bar .hd-back {
  position: absolute;
  left: 0.8rem;            /* 박스 확대분(4rem) 보정 → 화살표 시각 위치 유지 */
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;             /* 탭 영역 확대 (기존 1rem은 모바일에서 너무 작음) */
  height: 4rem;            /* 기존 2rem → 4rem */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;              /* 타이틀/액션 슬롯보다 위로 (혹시 모를 겹침 방지) */
}
.sub-header-bar .hd-back img {
  width: 1rem;             /* 화살표 자체 크기는 기존(10×20)과 동일하게 고정 */
  height: 2rem;
  object-fit: contain;
}
.sub-header-bar .hd-title {
  margin: 0;
  text-align: center;
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 8rem);
}
/* noTit: 뒤로가기만 노출 */
.sub-header-bar.no-tit .container {
  justify-content: flex-start;
}