/*=================================================================================================
  [1] 기본셋업
==================================================================================================*/
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
	overflow: auto;								/* ★ 전역 스크롤 ON */
	overscroll-behavior-y: auto;	/* 체인 허용 (모바일 주소창 숨김 동작에 유리) */
  /*overflow: hidden;							/* 전역 스크롤 잠금 */
  /*overscroll-behavior: none;		 스크롤 체인/바운스 방지 */
}

body {
	font-family:"Pretendard Variable","Noto Sans KR", "Dinpro", "Lato", "Nano Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size:12px;
}

body {
  margin: 0;
  color: #0f172a;

/*배경*/
  content: "";
  position: fixed;
  inset: 0;                         /* top:0; right:0; bottom:0; left:0; 와 동일 */
  background: url("/img/allbg.png") center center / cover no-repeat;

  will-change: transform;           /* 스크롤 성능 힌트 */  
}

/* 모바일: 루트 스크롤/체인 허용 → 네이티브 PTR 동작 */
@media (max-width: 767.98px) {
  html, body {
    overflow: auto;              /* ★ 루트 스크롤 되살림 */
    overscroll-behavior-y: auto; /* ★ 체인 허용 */
  }
  .con-r .app-main {
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/*=================================================================================================
  [2] 외부 래퍼 · 컨테이너
==================================================================================================*/
/* 화면을 항상 세로 100%로 채우고, 가로만 가운데 정렬 */
.wrap-index {
  /* 단계적 대비 + 최종 오버라이드 */
  height: 100vh;    /* fallback */
  height: 100svh;   /* iOS stable viewport */
  height: 100dvh;   /* dynamic viewport */
  min-height: 100dvh;
  height: min(100svh, 100dvh); /* 최신 브라우저 기준 최종값 */

  display: grid;
  justify-items: center;  /* 가로 중앙 */
  /*align-items: stretch;    세로 꽉 채움 */
	align-items: start;           /* 그리드 수직 가운데 → 상단 정렬(임의) */

  /* 위/아래 여백 뜨는 현상 방지 */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: max(0, env(safe-area-inset-left));
  padding-right: max(0, env(safe-area-inset-right));
}

/* 1024 기준 좌/우 분할, 외곽 카드 느낌 제거(배경/그림자/라운드 없음) */
.container {
  width: 100%;
  max-width: 1024px;
  height: 100%;
  min-height: 0;

  display: grid;
  grid-template-columns: 1fr 1fr; /* 좌/우 동일 폭 */
  gap: 0;

  background: transparent;
  box-shadow: none;
  border-radius: 0;
  /*overflow: visible;*/
}

/*=================================================================================================
  [3] 좌/우 컬럼
==================================================================================================*/
.con-l,
.con-r {
  height: 100%;
  min-height: 0;      /* 그리드/플렉스 자식 스크롤 막힘 방지 */
  padding: 0;
  overflow: hidden;   /* 전역 스크롤 off 환경에서 바깥으로 새지 않도록 */
}

/* 필요 시만 사용
.con-l { border-right: 1px solid #e5e7eb; }
*/
.con-l { background: transparent; }
.con-r { background-color:#fafafa; }

/*=================================================================================================
  [4] 오른쪽 모바일 레이아웃
==================================================================================================*/
/* 헤더/푸터는 wrap 100% 풀블리드 */
.con-r .mobile-wrap {
  width: 100%;
  height: 100%;   /* ★ 부모(.con-r) 높이를 물려받아 .mobile-app 100%가 유효해짐 */
  max-width: none;
  margin: 0;
}

/* 내부 앱 프레임: 항상 부모 높이 100% 채움 + 3행 그리드(헤더/본문/푸터) */
.con-r .mobile-app {
  width: 100%;
  height: 100%;
  min-height: 0;

  display: grid;                      /* ★ flex → grid 전환 */
  grid-template-rows: 56px 1fr 64px;  /* 헤더 56, 본문 유동, 푸터 64 */
  grid-template-columns: 100%;

  background: linear-gradient(to bottom, #FFFFFF 0%, #f1f1f1 100%);
  border: 0;            /* 외곽 테두리 제거 */
  border-radius: 0;     /* 외곽 라운드 제거 */
  overflow: hidden;     /* 스크롤은 가운데만 */
}

/* 상/하단 고정바: 항상 보이도록 고정 높이(그리드의 1행/3행) */
.con-r .app-header,
.con-r .app-footer {
  width: 100%;
  min-inline-size: 100%;
  align-self: stretch;
  box-sizing: border-box;
  background: #fff;
  z-index: 2;
}

/* 구분선이 필요 없으면 border:0 */
.con-r .app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid #e5e7eb;
}
.con-r .app-footer {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 8px 12px;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.04); /* 이전: 0 -6px 12px rgba(15,23,42,0.06) */
}

/* 자연스러운 페이드 섀도우 */
.con-r .app-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -12px;                         /* 푸터 바로 위 */
  height: 12px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(15,23,42,0.04),
    rgba(15,23,42,0)
  );
}

/* 가운데 본문만 스크롤(스크롤바는 숨김), 컨텐츠 폭 480px 제한 — 그리드의 2행 */
.con-r .app-main {
  min-height: 0 !important;      /* ★ 스크롤 살아나게 핵심 */
  overflow: auto !important;      /* 여기만 스크롤 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* ← 기본은 contain, 모바일에서 auto로 재오버라이드 */

  /* 스크롤바 숨김 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.con-r .app-main::-webkit-scrollbar { width: 0; height: 0; display: none; }

.con-r .app-main .content {
  width: 100%;
  max-width: 98%;              /* 본문만 폭 제한 */
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}

/*=================================================================================================
  [5] 기본 컴포넌트
==================================================================================================*/
.con-r .icon-btn {
  inline-size: 36px; block-size: 36px;
  display: grid; place-items: center;
  border-radius: 10px; border: 1px solid #e5e7eb; background: #fff;
  font-size: 14px; cursor: pointer;
}
.con-r .icon-btn_img {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border-radius: 10px; border: 0px; background: #fff;
  font-size: 14px; cursor: pointer;
}
.con-r .tab-btn {
  border: 1px solid #e5e7eb; background: #f8fafc;
  border-radius: 12px; padding: 10px 12px; font-weight: 600; cursor: pointer;
}
.con-r .primary { background: #2563eb; color: #fff; border-color: transparent; }

/*=================================================================================================
  [6] 반응형
==================================================================================================*/
@media (max-width: 767.98px) {
  .container { grid-template-columns: 1fr; }
  .con-l { display: none; }
  .con-r { padding: 0; }  /* 모바일에선 패딩 0이 헤더/푸터 고정에 가장 안정적 */

  /* 노치/홈 인디케이터 안전영역 보정 */
  .con-r .app-header { padding-top: max(0px, env(safe-area-inset-top)); }
  .con-r .app-footer { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/*=================================================================================================
  [-] 하단메뉴
==================================================================================================*/
/* ===== 3분할 푸터 + 중앙 둥근 버튼 (정렬/간격/클릭 최종본) ===== */
.con-r {
  --footer-h: 68px;         /* 푸터 높이 */
  --footer-lift: 1px;       /* 메뉴를 약간 위로 */

  --fab-gap: 6px;           /* 아이콘-라벨 기본 간격 */
  --fab-size: 65px;         /* 중앙 둥근버튼 지름 */
  --fab-pop: 40%;           /* 푸터 위로 튀어나오는 비율(%) */

  /* 하단 메뉴: 아이콘/라벨 규격 + 간격 */
  --nav-icon-box: 32px;     /* 아이콘 박스(정사각) */
  --nav-icon-size: 24px;    /* 아이콘 글리프 크기 */
  --nav-label-size: 12px;   /* FAB 라벨 크기 */
  --nav-gap: 0px;           /* 아이콘 ↔ 라벨 간격 */
  --nav-bottom-pad: 32px;   /* 라벨 하단 여백 */
}

/* 모바일 앱은 변수 기반 푸터 높이 사용 */
.con-r .mobile-app {
  grid-template-rows: 56px 1fr var(--footer-h) !important;
}

/* 레이어 정리(본문 < 푸터 < FAB) */
.con-r .app-main { position: relative; z-index: auto; }

/* 푸터: 3분할(좌/중앙/우), 중앙 칸은 FAB 너비만큼 확보 */
.con-r .app-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--fab-size) 1fr;   /* 좌 / FAB / 우 */
  align-items: stretch;
  height: var(--footer-h);
  padding: calc(8px + var(--footer-lift)) 12px 6px;
  border-top: 1px solid #eaeef3;
  box-shadow: 0 -2px 6px rgba(15,23,42,0.04);
  z-index: 3;
}

/* 아주 얕은 그라데이션 페이드 섀도우(클릭 방해 X) */
.con-r .app-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -8px;
  height: 8px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(15,23,42,0.06), rgba(15,23,42,0));
}

/* 좌/우 그룹: 세로 전체 채우기 */
.con-r .app-footer .nav-group {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  align-self: stretch;
}

/* 공통 인터랙션(흔들림 최소화) */
.con-r .app-footer .nav-btn,
.con-r .app-footer .fab {
  transform-origin: center;
  will-change: transform;
  transition: transform 90ms ease-out, opacity 90ms ease-out;
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 하단 메뉴 버튼: 아이콘 위 / 라벨 아래, 라벨 하단선 맞춤 */
.con-r .app-footer .nav-btn {
  appearance: none;
  background: transparent;
  border: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;

  padding: 0 6px;
  min-width: 56px;
  height: 100%;
  color: #0f172a;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
}

/* 버튼의 맨 위 가변 채움 → 아이콘/라벨 블록을 아래로 밀기 */
.con-r .app-footer .nav-btn::before {
  content: "";
  flex: 1 1 auto;
}

/* 아이콘 균일화: 정사각 박스 중앙 + 아래 고정 간격 */
.con-r .app-footer .nav-btn i {
  width: var(--nav-icon-box);
  height: var(--nav-icon-box);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nav-icon-size);
  line-height: 1;
  vertical-align: middle;
  margin-bottom: var(--nav-gap);
}

/* 라벨: 항상 동일한 하단선 */
.con-r .app-footer .nav-btn span {
  margin-top: 0 !important;
  padding-bottom: var(--nav-bottom-pad);
  font-size: var(--nav-label-size);
  line-height: 1.1;
  display: block;
  opacity: .9;
}

/* 중앙 둥근 버튼(FAB): 항상 최상단 레이어 + 클릭 보장 */
.con-r .app-footer .fab {
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  justify-self: center;
  align-self: start;
  transform: translateY(calc(-1 * var(--fab-pop)));
  background: radial-gradient(circle at 30% 30%, #ff4da6, #ff1a75 60%, #e6005c);
  box-shadow: 0 5px 14px rgba(52, 64, 84, 0.25), 0 2px 0 rgba(255,255,255,0.22) inset;
  z-index: 4;
  pointer-events: auto;
}

.con-r .app-footer .fab i {
  font-size: 30px;
  margin-top: -6px;
  margin-bottom: -28px;
  vertical-align: middle;
}

.con-r .app-footer .fab span {
  font-size: 12px;
  white-space: nowrap;
  margin: 0;
  opacity: .95;
}

/* 터치 디바이스에서만 스케일 눌림감 */
@media (pointer: coarse) {
  .con-r .app-footer .nav-btn:active { transform: scale(.9) !important; }
  .con-r .app-footer .fab:active {
    transform: translateY(calc(-1 * var(--fab-pop))) scale(.9) !important;
  }
  .con-r .app-footer .fab:active .fab-inner {
    transform: scale(.86); /* 눌림감만 */
  }
}

/* 데스크톱(마우스)에서는 스케일 비활성화 */
@media (pointer: fine) and (hover:hover) {
  .con-r .app-footer .nav-btn:active { transform: none !important; }
  .con-r .app-footer .fab:active {
    transform: translateY(calc(-1 * var(--fab-pop))) !important;
  }
  .con-r .app-footer .fab:active .fab-inner {
    transform: scale(.86) !important;
  }
}



/* 왼쪽 태그 스타일 */
.hoons_tags { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; /* 간격 줄임 */ }
.hoons_tag { background: rgba(255, 255, 255, 0.9); border: 1px solid #d1d1d1; color: #ff4757; padding: 8px 16px; border-radius: 25px; font-size: 0.9rem; font-weight: 400; transition: all 0.3s ease; cursor: pointer; }
.hoons_tag:hover { background: #ff4757; color: white; transform: translateY(-2px); }

/* 제목 스타일 */
.hoons_main-title-top { font-size: 2.2rem; color: #333; font-weight: 300; letter-spacing: -1px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

.hoons_main-title {	font-size: 3rem; font-weight: 900; color: #000000; letter-spacing: -2px;	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

.hoons_subtitle { color: #666; font-size: 1rem; line-height: 1.6; margin-bottom: 40px; font-weight: 300; }

/* ========== Right Drawer ========== */
body.x-no-scroll { overflow: hidden; }

.x-dim { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1000; }

.x-drawer { position: fixed; top: 0; right: 0; width: min(360px, 90vw); height: 100vh; background: #fff; box-shadow: -8px 0 20px rgba(0,0,0,.1); transform: translateX(100%); transition: transform .28s ease; z-index: 1001; display: flex; flex-direction: column; }



/*=================================================================================================
   클릭시 오른쪽 메뉴
==================================================================================================*/
/* ========== Right Drawer (fixed off-canvas) ========== */
body.x-no-scroll { overflow: hidden; }

.x-dim {
  position: fixed; inset: 0;
  /*background: rgba(0,0,0,.4);*/
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1000;
}

.x-drawer {
  position: fixed; top: 0; right: 0;                  /* 필요하면 right:-1px; 로 미세 seam 제거 */
  width: min(360px, 90vw); height: 100vh;
  background: #fff;
  box-shadow: -8px 0 20px rgba(0,0,0,.1);
  transform: translate3d(100%, 0, 0);                 /* 화면 밖으로 완전히 */
  transition: transform .28s ease;
  z-index: 1001;
  display: flex; flex-direction: column;

  /* 닫힌 상태에서 아예 상호작용/페인트를 막아 가로 스크롤 & 가장자리 노출 방지 */
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}

.x-drawer.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;             /* 열릴 때만 보이기 */
  pointer-events: auto;
}

.x-dim.is-show { opacity: 1; pointer-events: auto; }

.x-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #f1f1f1;
  font-size: 16px;
}

.x-drawer-close {
  appearance: none; border: 0; background: transparent;
  font-size: 20px; line-height: 1; cursor: pointer; color: #555;
}

.x-drawer-nav {
  padding: 10px 8px 20px; overflow-y: auto; flex: 1;
}

.x-drawer-nav a {
  display: block; padding: 12px 12px; border-radius: 10px;
  color: #111; text-decoration: none; font-size: 15px;
}

.x-drawer-nav a:hover { background: #f6f7f9; }

.x-drawer-nav hr {
  border: 0; border-top: 1px solid #eee; margin: 10px 6px;
}

html, body { overflow-x: hidden; }
/* ========== /Right Drawer ========== */


/*=================================================================================================
   모바일 전용: 푸터 뷰포트 고정 & 패딩/세이프에어리어/체인 정리
==================================================================================================
@media (max-width: 767.98px){
  /* 그리드의 3번째 행은 사실상 비움 
  .con-r .mobile-app{
    grid-template-rows: 56px 1fr 0px !important;
  }

  /* 푸터를 뷰포트 하단에 고정 (width:100vw 제거) 
  .con-r .app-footer{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    transform: none;
    z-index: 9999;

    /* 안전영역 보정 + 좌우 패딩 
    padding-left:  max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* 본문 가려짐 방지(모바일에서만 적용) 
  .con-r .app-main{
    padding-bottom: calc(
      var(--footer-h)
      + (var(--fab-size) * (var(--fab-pop) / 100))
      + max(16px, env(safe-area-inset-bottom))
    ) !important;

    /* 네이티브 PTR/체인 살리기 
    overscroll-behavior-y: auto !important;
  }
}

/*=================================================================================================
   모달
==================================================================================================*/
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9998; }
.modal.show { display:flex; }
.modal .backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.modal .sheet {
	position:relative;
	width:calc(100% - 24px);
	max-width:768px;
	max-height:60vh;
	display:flex;
	flex-direction:column;
	background:#fff;
	border-radius:1rem;
	box-shadow:0 20px 40px rgba(0,0,0,.18);
	overflow:hidden;
}
.sheet-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee; }
.sheet-title { font-weight:800; color:#171717; }
.sheet-close { width:36px; height:36px; border-radius:9999px; }
.sheet-close:hover { background:#f5f5f5; }
.sheet-body { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:12px; }
.note { margin:8px 4px 14px; padding:10px 12px; border-radius:12px; background:#ffe8ee; color:#e11d48; font-weight:700; text-align:center; font-size:14px; }
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}

@media(min-width:768px){
	.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

.cat-item { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #eee; border-radius:14px; background:#fff; }
.cat-item i { font-size:26px;}
.cat-text { display:flex; flex-direction:column; text-align:left; }
.cat-title { font-size:16px; font-weight:800; color:#171717; }
.cat-sub { font-size:12px; color:#737373; margin-top:2px; }


/*=================================================================================================
   가이드
==================================================================================================*/
.guide_step			{background:#ff4d7e;color:#fff;height:22px;line-height:22px;}
.guide_right_txt	{padding:6px 10px;border:1px solid #ffd6e3;background:#fff1f2;color:#e11d48;line-height:1;}


.btn-none-bg-border  {background: none; border: none;}