/* =========================================================================
   izd_ui.css — 입주데이즈 공통 디자인 시스템 (Toss-style)
   2026-06-26. 모든 페이지가 include 해서 통일감 확보.
   기존 페이지 레이아웃을 깨지 않도록 .izd- 네임스페이스 + CSS변수만 노출.
   브랜드: 틸 #34A798 (Primary) / Pretendard
   ========================================================================= */

:root {
  /* ---- Color: Brand ---- */
  --izd-primary:        #34A798;   /* 메인 틸 */
  --izd-primary-dark:   #2D8F83;   /* 버튼 hover/press */
  --izd-primary-light:  #E8F5F3;   /* 옅은 배경 */
  --izd-primary-tint:   rgba(52,167,152,0.08);

  /* ---- Color: Neutral (Toss gray scale) ---- */
  --izd-gray-900: #191F28;  /* 제목 텍스트 */
  --izd-gray-800: #333D4B;
  --izd-gray-700: #4E5968;  /* 본문 텍스트 */
  --izd-gray-600: #6B7684;  /* 보조 텍스트 */
  --izd-gray-500: #8B95A1;  /* placeholder */
  --izd-gray-400: #B0B8C1;
  --izd-gray-300: #D1D6DB;  /* 보더 */
  --izd-gray-200: #E5E8EB;  /* 옅은 보더/구분선 */
  --izd-gray-100: #F2F4F6;  /* 카드 배경 */
  --izd-gray-50:  #F9FAFB;  /* 페이지 배경 */
  --izd-white:    #FFFFFF;

  /* ---- Color: Semantic ---- */
  --izd-blue:    #3182F6;  /* 정보/링크 (Toss blue) */
  --izd-red:     #F04452;  /* 경고/삭제 */
  --izd-green:   #00C73C;  /* 성공 */
  --izd-yellow:  #FFB800;  /* 주의 */

  /* ---- Radius ---- */
  --izd-r-sm: 8px;
  --izd-r-md: 12px;
  --izd-r-lg: 16px;
  --izd-r-xl: 20px;
  --izd-r-full: 999px;

  /* ---- Shadow ---- */
  --izd-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --izd-shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --izd-shadow-lg: 0 4px 16px rgba(0,0,0,0.08);

  /* ---- Spacing scale ---- */
  --izd-sp-1: 4px;
  --izd-sp-2: 8px;
  --izd-sp-3: 12px;
  --izd-sp-4: 16px;
  --izd-sp-5: 20px;
  --izd-sp-6: 24px;
  --izd-sp-8: 32px;

  /* ---- Layout ---- */
  --izd-maxw: 480px;        /* 모바일 우선 폭 */
  --izd-font: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =========================================================================
   Typography helpers
   ========================================================================= */
.izd-title    { font-family: var(--izd-font); font-weight: 800; font-size: 22px; line-height: 1.35; color: var(--izd-gray-900); letter-spacing: -0.4px; }
.izd-subtitle { font-family: var(--izd-font); font-weight: 700; font-size: 17px; line-height: 1.4;  color: var(--izd-gray-900); letter-spacing: -0.3px; }
.izd-body     { font-family: var(--izd-font); font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--izd-gray-700); }
.izd-caption  { font-family: var(--izd-font); font-weight: 400; font-size: 13px; line-height: 1.5;  color: var(--izd-gray-600); }
.izd-accent   { color: var(--izd-primary); }

/* =========================================================================
   Button — Toss style (큰 풀폭 CTA)
   ========================================================================= */
.izd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--izd-font); font-weight: 700; font-size: 16px;
  padding: 15px 20px; border: none; border-radius: var(--izd-r-md);
  cursor: pointer; transition: background-color .15s, transform .05s, opacity .15s;
  width: 100%; box-sizing: border-box; text-decoration: none; line-height: 1.2;
}
.izd-btn:active { transform: scale(0.985); }
.izd-btn-primary   { background: var(--izd-primary); color: #fff; }
.izd-btn-primary:hover  { background: var(--izd-primary-dark); }
.izd-btn-secondary { background: var(--izd-gray-100); color: var(--izd-gray-700); }
.izd-btn-secondary:hover { background: var(--izd-gray-200); }
.izd-btn-ghost     { background: transparent; color: var(--izd-primary); border: 1.5px solid var(--izd-primary); }
.izd-btn-danger    { background: var(--izd-red); color: #fff; }
.izd-btn:disabled, .izd-btn.is-disabled { background: var(--izd-gray-200); color: var(--izd-gray-400); cursor: not-allowed; }
.izd-btn-sm { padding: 9px 14px; font-size: 14px; width: auto; border-radius: var(--izd-r-sm); }

/* =========================================================================
   Card / Surface
   ========================================================================= */
.izd-card {
  background: var(--izd-white); border: 1px solid var(--izd-gray-200);
  border-radius: var(--izd-r-lg); padding: var(--izd-sp-5);
  box-shadow: var(--izd-shadow-sm);
}
.izd-card-flat { background: var(--izd-gray-50); border: none; border-radius: var(--izd-r-lg); padding: var(--izd-sp-5); }
.izd-card-tint { background: var(--izd-primary-tint); border: none; border-radius: var(--izd-r-md); padding: var(--izd-sp-4); }
.izd-divider   { height: 1px; background: var(--izd-gray-200); border: none; margin: var(--izd-sp-5) 0; }
.izd-divider-thick { height: 8px; background: var(--izd-gray-100); border: none; margin: 0; }

/* =========================================================================
   Input
   ========================================================================= */
.izd-input, .izd-textarea {
  width: 100%; box-sizing: border-box; font-family: var(--izd-font); font-size: 15px;
  color: var(--izd-gray-900); background: var(--izd-gray-50);
  border: 1.5px solid var(--izd-gray-200); border-radius: var(--izd-r-md);
  padding: 14px 16px; transition: border-color .15s, background .15s;
}
.izd-input:focus, .izd-textarea:focus {
  outline: none; border-color: var(--izd-primary); background: #fff;
}
.izd-input::placeholder, .izd-textarea::placeholder { color: var(--izd-gray-500); }
.izd-textarea { resize: none; min-height: 96px; line-height: 1.55; }

/* =========================================================================
   Chip / Badge / Tag
   ========================================================================= */
.izd-chip {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--izd-font);
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--izd-r-full);
  background: var(--izd-gray-100); color: var(--izd-gray-700);
}
.izd-chip.is-on   { background: var(--izd-primary); color: #fff; }
.izd-badge {
  display: inline-flex; align-items: center; font-family: var(--izd-font);
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--izd-r-full);
  background: var(--izd-primary-light); color: var(--izd-primary-dark);
}

/* =========================================================================
   Progress steps (옵션매니저 단계 표시 1·2·3)
   ========================================================================= */
.izd-steps { display: flex; align-items: center; gap: 6px; }
.izd-step-dot {
  flex: 1; height: 4px; border-radius: var(--izd-r-full); background: var(--izd-gray-200);
}
.izd-step-dot.is-on { background: var(--izd-primary); }

/* =========================================================================
   List row (옵션 항목 등)
   ========================================================================= */
.izd-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--izd-gray-100);
}
.izd-row:last-child { border-bottom: none; }
.izd-row-title { font-family: var(--izd-font); font-weight: 600; font-size: 15px; color: var(--izd-gray-900); }
.izd-row-sub   { font-family: var(--izd-font); font-weight: 400; font-size: 13px; color: var(--izd-gray-600); margin-top: 2px; }
.izd-row-price { font-family: var(--izd-font); font-weight: 700; font-size: 15px; color: var(--izd-primary); white-space: nowrap; }

/* =========================================================================
   Fixed footer CTA (하단 고정 버튼)
   ========================================================================= */
.izd-footer {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: var(--izd-maxw); box-sizing: border-box;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0));
  z-index: 100;
}

/* =========================================================================
   Page scaffold (모바일 우선 컨테이너)
   ========================================================================= */
.izd-page { max-width: var(--izd-maxw); margin: 0 auto; background: #fff; min-height: 100vh; }
.izd-pad  { padding: var(--izd-sp-5); }
.izd-section-gap { height: var(--izd-sp-6); }

/* =========================================================================
   데스크탑 중앙 정렬 (2026-06-27, v2) — 모바일 페이지를 데스크탑서 가운데로.
   ⚠️ max-width 고정 프레임 금지: 옵션매니저 상세(좌 카테고리트리+우 목록)처럼
      480px보다 넓은 2단 페이지가 잘리는 사고가 있었음.
   해결: body를 콘텐츠 폭에 맞춰(fit-content) 가운데 정렬만 함 → 좁은 페이지는
      폰처럼, 넓은 2단 페이지는 그 폭대로, 어떤 경우도 잘리지 않음(overflow visible).
   고정헤더(.header-gradient)는 sticky로 바꿔 body 폭에 맞게 가운데로 따라옴.
   ========================================================================= */
@media (min-width: 520px) {
  html:has(.header-gradient) { background: #eef1f4; }
  body:has(.header-gradient) {
    width: fit-content;
    min-width: 480px;
    max-width: 100vw;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 10px 44px rgba(0,0,0,.10);
    overflow-x: visible;     /* 절대 클리핑하지 않음 */
  }
  /* 전체폭 고정 틸헤더 → sticky로: body(콘텐츠) 폭에 정확히 맞고 가운데 정렬됨 */
  body:has(.header-gradient) .header-gradient {
    position: sticky !important;
    top: 0 !important;
    left: auto !important; right: auto !important;
    transform: none !important;
    width: 100% !important; max-width: none !important;
    box-sizing: border-box !important;   /* padding 포함 → 우측으로 삐져나가지 않음(2026-07-03) */
    margin-top: 0 !important;   /* 데스크탑 상단 빈 공백 제거(모바일 상태바용 65px 마진 불필요) */
  }
  /* 헤더가 fixed였을 때 본문을 띄우던 margin-top 제거(sticky라 불필요) → 헤더-본문 갭 제거 */
  body:has(.header-gradient) .header-gradient + * {
    margin-top: 0 !important;
  }
  /* 하단 고정 액션바(이전/다음 등)도 sticky로: 프레임(body) 폭에 맞게 가운데 따라옴 */
  body:has(.header-gradient) .fixed-footer,
  body:has(.header-gradient) .izd-footer {
    position: sticky !important;
    bottom: 0 !important;
    left: auto !important; right: auto !important;
    transform: none !important;
    width: 100% !important; max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
}

/* =========================================================================
   데스크탑 웹앱 셸 (≥1024px) — 홈처럼 좌측 히어로 + 우측 폰폭 앱.
   izd_motion.js가 앱형 페이지에 .izd-shell-hero를 주입하고 body에 .izd-has-hero 부여.
   그룹폭 920(히어로 420 + 간격 40 + 앱 460)을 화면 중앙에 배치.
   ========================================================================= */
.izd-shell-hero { display: none; }   /* 모바일/태블릿: 숨김 */

@media (min-width: 1024px) {
  /* FOUC 방지: JS 클래스(.izd-has-hero) 대신 :has()로 첫 페인트부터 프레임 적용.
     홈/우리집(#webLeftBack 자체 히어로)은 제외. */
  html:has(body.izd-has-hero),
  html:has(.main-home):not(:has(#webLeftBack)),
  html:has(.header-gradient):not(:has(#webLeftBack)),
  html:has(.izd-app):not(:has(#webLeftBack)) { background: #eef1f4; }
  /* 본문(body)을 폰폭으로 그룹 우측에 배치.
     .izd-has-hero(JS·전브라우저) + :has(최신브라우저·JS전 FOUC방지) 둘 다 매칭 */
  body.izd-has-hero,
  body:has(.main-home):not(:has(#webLeftBack)),
  body:has(.header-gradient):not(:has(#webLeftBack)),
  body:has(.izd-app):not(:has(#webLeftBack)) {
    width: 460px !important;
    min-width: 0 !important;
    max-width: 460px !important;
    min-height: 100vh !important;       /* 우측 앱 프레임을 항상 위→아래 꽉 채움(짧은 내용도 흰색 유지) */
    margin: 0 0 0 50vw !important;     /* (100vw-920)/2 + 420 + 40 = 50vw */
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 12px 48px rgba(0,0,0,.12) !important;
    overflow-x: visible !important;
    /* ★ body의 identity transform(일부 Figma export 페이지) 무력화 → fixed 하단바/헤더가
       body(50vw) 기준으로 두 배 밀려 화면 밖으로 나가던 버그 방지. viewport 기준으로 고정. */
    transform: none !important;
    filter: none !important;
    perspective: none !important;
  }
  /* 좌측 히어로 — 그룹 좌측에 fixed */
  .izd-shell-hero {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0;
    left: calc((100vw - 920px) / 2);
    width: 420px;
    padding: 40px 14px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1;
    background: #eef1f4;   /* 로고 mix-blend-mode(흰배경 제거)가 먹히도록 불투명 배경 부여 */
    animation: izdHeroFade .6s cubic-bezier(.16,1,.3,1) both;
  }
  .izd-shell-hero::-webkit-scrollbar { width: 0; }

  .izd-h-logo img { width: 76px; height: auto; mix-blend-mode: multiply; }
  .izd-h-body { margin: auto 0; display: flex; flex-direction: column; gap: 22px; }

  .izd-h-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font-size: 13.5px; font-weight: 700; color: #34A798;
    background: #E8F5F3; padding: 7px 13px; border-radius: 999px; letter-spacing: -.2px;
  }
  .izd-h-title { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.32; color: #191F28; letter-spacing: -1px; }
  .izd-h-title .ac { color: #34A798; }
  .izd-h-sub { margin: -6px 0 0; font-size: 16px; font-weight: 500; line-height: 1.6; color: #6B7684; letter-spacing: -.3px; }

  .izd-h-cards { display: flex; flex-direction: column; gap: 10px; }
  .izd-h-card {
    display: flex; align-items: center; gap: 14px; padding: 15px 16px;
    background: #fff; border: 1px solid #EDF1F2; border-radius: 16px;
    box-shadow: 0 4px 16px rgba(17,31,40,.05); text-decoration: none;
    transition: transform .14s ease, box-shadow .18s ease;
  }
  .izd-h-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(17,31,40,.10); }
  .izd-h-card .ic { font-size: 26px; flex: 0 0 auto; }
  .izd-h-card .tx { display: flex; flex-direction: column; }
  .izd-h-card .tx b { font-size: 15.5px; font-weight: 700; color: #191F28; letter-spacing: -.3px; }
  .izd-h-card .tx i { font-size: 13px; font-style: normal; color: #8B95A1; margin-top: 2px; letter-spacing: -.2px; }

  .izd-h-trust { display: flex; gap: 18px; padding-top: 2px; }
  .izd-h-trust .it .n { font-size: 20px; font-weight: 800; color: #191F28; letter-spacing: -.5px; }
  .izd-h-trust .it .l { font-size: 12.5px; font-weight: 600; color: #8B95A1; margin-top: 2px; }
  .izd-h-trust .dv { width: 1px; background: #E5E8EB; align-self: stretch; margin: 2px 0; }

  .izd-h-affil {
    margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-radius: 16px; background: #F9FAFB; border: 1px solid #EDF1F2;
    text-decoration: none; transition: background .15s, transform .12s, box-shadow .15s;
  }
  .izd-h-affil:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(17,31,40,.07); }
  .izd-h-affil .t1 { font-size: 13.5px; font-weight: 500; color: #8B95A1; letter-spacing: -.2px; }
  .izd-h-affil .t2 { font-size: 16px; font-weight: 700; color: #191F28; letter-spacing: -.3px; margin-top: 3px; }
  .izd-h-affil .env { font-size: 34px; line-height: 1; }

  /* 플래너 등 우하단 floating 버튼(fixed)을 앱 프레임 우하단에 정렬 */
  body:has(.izd-app):not(:has(#webLeftBack)) .add-button,
  body.izd-has-hero .add-button {
    right: calc(50vw - 436px) !important;   /* 프레임 우측끝(50vw+460) 안쪽 24px */
  }

  @keyframes izdHeroFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* =========================================================================
   옵션매니저 '총 금액' 하단 고정바 (2026-06-30) — position:fixed 인데 left 미지정이라
   데스크탑서 뷰포트 좌측(앱 밖)으로 삐져나오던 문제. 우측 앱 컬럼(50vw~+460)에 가둠.
   ========================================================================= */
@media (min-width: 1024px) {
  body.izd-has-hero .price-summary-section,
  body:has(.izd-app):not(:has(#webLeftBack)) .price-summary-section,
  body:has(.header-gradient):not(:has(#webLeftBack)) .price-summary-section,
  body:has(.main-home):not(:has(#webLeftBack)) .price-summary-section,
  body.izd-has-hero .fixed-footer,
  body:has(.izd-app):not(:has(#webLeftBack)) .fixed-footer,
  body:has(.header-gradient):not(:has(#webLeftBack)) .fixed-footer,
  body:has(.main-home):not(:has(#webLeftBack)) .fixed-footer,
  body.izd-has-hero .sg-foot,
  body:has(.izd-app):not(:has(#webLeftBack)) .sg-foot,
  body:has(.main-home):not(:has(#webLeftBack)) .sg-foot {
    left: 50vw !important;
    right: auto !important;
    transform: none !important;   /* translateX(-50%) 취소 안 하면 다시 왼쪽으로 밀려 앱 밖으로 나감 */
    width: 460px !important;
    max-width: 460px !important;
  }
}

/* =========================================================================
   커스텀 모달(등록완료·삭제확인 등, .custom-modal) — position:fixed 전체 뷰포트라
   데스크탑서 히어로+앱 경계 한가운데 떠서 어색하던 문제. 우측 앱 컬럼(50vw~+460)에 가둠.
   ========================================================================= */
@media (min-width: 1024px) {
  body:has(.header-gradient):not(:has(#webLeftBack)) .custom-modal,
  body:has(.izd-app):not(:has(#webLeftBack)) .custom-modal,
  body:has(.main-home):not(:has(#webLeftBack)) .custom-modal {
    left: 50vw !important;
    right: auto !important;
    width: 460px !important;
  }
}

/* =========================================================================
   옵션매니저 컨테이너 반응형 (2026-06-30) — 카드/바가 350px 고정폭이라 앱 컬럼을
   못 채워 우측 공백 낭비 + 금액이 삐져나오던 문제. 컬럼 폭에 맞춰 100%로.
   ========================================================================= */
.header-nav, .apt-info, .option-card, .total-section, .category2-section,
.category-card, .category-summary-card, .total-summary {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================================
   재사용 일러스트 (2026-06-27) — 계산기 인트로 등 구식 PNG 대체용 토스풍 모션 일러스트.
   사용: <div class="izd-illust"><span class="ill-glow"></span>
          <span class="ill-main">🏢</span>
          <span class="ill-s ill-a">💰</span><span class="ill-s ill-b">📈</span><span class="ill-s ill-c">🧮</span>
          <i class="ill-dot d1"></i><i class="ill-dot d2"></i><i class="ill-dot d3"></i></div>
   ========================================================================= */
.izd-illust { position: relative; width: 230px; height: 188px; margin: 6px auto 2px; place-self: center; }
.izd-illust .ill-glow { position: absolute; inset: 14px 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(52,167,152,.20), rgba(52,167,152,0)); }
.izd-illust .ill-main { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); font-size: 92px; filter: drop-shadow(0 8px 14px rgba(17,31,40,.12)); animation: izdIllBob 3.4s ease-in-out infinite; }
.izd-illust .ill-s { position: absolute; font-size: 38px; filter: drop-shadow(0 6px 12px rgba(17,31,40,.12)); }
.izd-illust .ill-a { left: 11%; top: 20%; animation: izdIllFloat 3s ease-in-out infinite; }
.izd-illust .ill-b { right: 10%; top: 23%; animation: izdIllFloat 3.5s ease-in-out .4s infinite; }
.izd-illust .ill-c { right: 15%; bottom: 12%; animation: izdIllFloat 3.2s ease-in-out .2s infinite; }
.izd-illust .ill-dot { position: absolute; width: 8px; height: 8px; background: #34A798; border-radius: 50%; opacity: 0; animation: izdIllTwinkle 2.4s ease-in-out infinite; }
.izd-illust .ill-dot.d1 { left: 20%; top: 62%; }
.izd-illust .ill-dot.d2 { right: 22%; top: 54%; animation-delay: .8s; }
.izd-illust .ill-dot.d3 { left: 56%; top: 14%; animation-delay: 1.4s; }
@keyframes izdIllBob { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } }
@keyframes izdIllFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes izdIllTwinkle { 0%,100% { opacity: 0; transform: scale(.4); } 50% { opacity: .85; transform: scale(1); } }

/* =========================================================================
   앱 페이지 헤더 통일 (2026-06-28) — 계산기/옵션 등은 자체 상단헤더(X+제목)가 있는데
   include된 ipzudays_header의 고정 로고바(#header)가 겹쳐 페이지마다 들쭉날쭉했음.
   앱 컨테이너가 있는 페이지에선 중복 #header/사이드메뉴를 숨겨 일관되게 통일.
   ========================================================================= */
body:has(.frame-parent76) #header,  body:has(.frame-parent76) .side-menu-bar,
body:has(.header-gradient) #header, body:has(.header-gradient) .side-menu-bar,
body:has(.izd-app) #header,         body:has(.izd-app) .side-menu-bar,
body:has(.main-home) #header,       body:has(.main-home) .side-menu-bar { display: none !important; }

/* =========================================================================
   공통 모달 (2026-06-28) — 레거시 '수정→별도페이지'를 인라인 모달로 대체.
   사용: izdOpenModal('id') / izdCloseModal('id') (izd_motion.js). 토스풍 바텀시트.
   ========================================================================= */
.izd-modal-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(17,31,40,.45);
  display: none; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s ease;
}
.izd-modal-overlay.is-open { display: flex; opacity: 1; }
.izd-modal {
  width: 100%; max-width: 460px; box-sizing: border-box;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(24px); transition: transform .26s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
}
.izd-modal-overlay.is-open .izd-modal { transform: translateY(0); }
.izd-modal-grip { width: 40px; height: 4px; border-radius: 999px; background: #E5E8EB; margin: -8px auto 16px; }
.izd-modal-title { font-family: var(--izd-font); font-size: 19px; font-weight: 800; color: var(--izd-gray-900); letter-spacing: -.4px; margin-bottom: 4px; }
.izd-modal-desc  { font-family: var(--izd-font); font-size: 14px; color: var(--izd-gray-600); margin-bottom: 18px; letter-spacing: -.2px; }
.izd-field { margin-bottom: 14px; }
.izd-field > label { display: block; font-family: var(--izd-font); font-size: 13.5px; font-weight: 600; color: var(--izd-gray-700); margin-bottom: 7px; }
.izd-modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.izd-modal-actions .izd-btn { flex: 1; }
/* 데스크탑(≥1024px)에선 중앙 카드형으로 */
@media (min-width: 1024px) {
  .izd-modal-overlay { align-items: center; }
  .izd-modal { border-radius: 20px; max-width: 400px; padding: 26px 24px; }
  .izd-modal-grip { display: none; }
}

/* =========================================================================
   데스크탑 모달 정렬 교정 (2026-06-30) — 풀스크린 fixed 오버레이가 뷰포트 중앙
   (=우측 앱 프레임의 좌측 경계)에 떠서 앱 밖으로 삐져나오던 문제.
   ≥1024px에선 오버레이를 우측 앱 컬럼(50vw ~ +460px)에 가둬 모달이 앱 중앙에 뜨게 함.
   ========================================================================= */
@media (min-width: 1024px) {
  body.izd-has-hero :is(.custom-modal-overlay, .izd-modal-overlay, .izdcm-overlay, .image-modal, .no-access-overlay, .loading-overlay),
  body:has(.izd-app):not(:has(#webLeftBack)) :is(.custom-modal-overlay, .izd-modal-overlay, .izdcm-overlay, .image-modal, .no-access-overlay, .loading-overlay),
  body:has(.header-gradient):not(:has(#webLeftBack)) :is(.custom-modal-overlay, .izd-modal-overlay, .izdcm-overlay, .image-modal, .no-access-overlay, .loading-overlay),
  body:has(.frame-parent76):not(:has(#webLeftBack)) :is(.custom-modal-overlay, .izd-modal-overlay, .izdcm-overlay, .image-modal, .no-access-overlay, .loading-overlay),
  body:has(.main-home):not(:has(#webLeftBack)) :is(.custom-modal-overlay, .izd-modal-overlay, .izdcm-overlay, .image-modal, .no-access-overlay, .loading-overlay) {
    left: 50vw !important;
    right: auto !important;
    width: 460px !important;
  }
}

/* =========================================================================
   아파트 상세 — 요약카드 + 일관 테이블 (2026-06-28)
   ========================================================================= */
.izd-apt-summary { background: #F9FAFB; border: 1px solid #EDF1F2; border-radius: 16px; padding: 6px 16px; margin: 14px 0 4px; }
.izd-apt-summary .izd-sumrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #EFF1F4; }
.izd-apt-summary .izd-sumrow:last-child { border-bottom: none; }
.izd-apt-summary .k { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: #6B7684; letter-spacing: -.2px; }
.izd-apt-summary .v { text-align: right; font-size: 14.5px; font-weight: 700; color: #191F28; letter-spacing: -.3px; line-height: 1.45; }
.izd-apt-summary .v.accent { color: #34A798; }

/* 상세 공통 테이블 */
.izd-dtable { width: 100%; border-collapse: collapse; margin-top: 12px; font-family: var(--izd-font); }
.izd-dtable th { font-size: 12.5px; font-weight: 600; color: #8B95A1; padding: 10px 8px; border-bottom: 1.5px solid #EDF1F2; text-align: right; letter-spacing: -.2px; white-space: nowrap; }
.izd-dtable th:first-child { text-align: left; }
.izd-dtable td { font-size: 13.5px; color: #4E5968; padding: 13px 8px; border-bottom: 1px solid #F2F4F6; text-align: right; letter-spacing: -.2px; white-space: nowrap; }
.izd-dtable td:first-child { text-align: left; font-weight: 700; color: #191F28; }
.izd-dtable tr:last-child td { border-bottom: none; }
.izd-dtable .price { font-weight: 700; color: #34A798; }
.izd-dtable .pyeong { font-size: 12px; color: #8B95A1; font-weight: 500; }

/* =========================================================================
   계산기 결과페이지 상단바 통일 (2026-06-28) — X+제목 일관 헤더 (헤더 없던 결과페이지용)
   ========================================================================= */
.izd-calc-topbar { display:flex; align-items:center; min-height:56px; padding:14px 16px; position:relative; background:#fff; width:100%; box-sizing:border-box; align-self:stretch; }
.izd-calc-topbar .x { font-size:22px; color:#333D4B; cursor:pointer; line-height:1; width:28px; flex:0 0 auto; z-index:1; }
.izd-calc-topbar b { position:absolute; left:50%; transform:translateX(-50%); font-family:var(--izd-font); font-size:17px; font-weight:700; color:#191F28; letter-spacing:-.4px; white-space:nowrap; }
/* 최종 결과 상단바 다음 콘텐츠의 과한 상단 마진(모바일 상태바 잔재 65px) 제거 → 상단 빈공간 정리 */
.izd-calc-topbar + * { margin-top: 10px !important; }

/* 입주노트(콘텐츠) 서비스 전역 숨김 (2026-06-28) — 계산기 집중. 하단 nav의 입주노트 항목 숨김 */
#nav-notebook { display: none !important; }