@charset "utf-8";
/* =====================================================================
   BABY SCENE STUDIO · package.css  (성장앨범 패키지 구매)
   ===================================================================== */

/* ---------- 인트로 ---------- */
.pkg-intro{ max-width:1200px; margin:0 auto; padding:56px 24px 44px; }
.pkg-label{ display:inline-block; background:#E8F6EF; color:#2f9e6e; font-size:13px; font-weight:800; letter-spacing:1px; padding:6px 13px; border-radius:999px; }
.pkg-title{ font-size:34px; font-weight:800; color:#2b2f37; margin:12px 0; letter-spacing:-1px; }
.pkg-desc{ color:#7c8088; font-size:15px; line-height:1.7; max-width:560px; }

.pkg-intro-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:24px; margin-top:32px; }
.pkg-steps{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; }
.pkg-step{ display:flex; gap:13px; align-items:flex-start; background:#F5F7FA; border:1px solid #E9ECF1; border-radius:14px; padding:17px 18px; }
.pkg-step .n{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:#1c2230; color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(28,34,48,.22); }
.pkg-step b{ display:block; font-size:15px; color:#2b2f37; }
.pkg-step em{ display:block; font-style:normal; font-size:13px; color:#9aa0a8; margin-top:5px; line-height:1.5; }

/* 구매 전 필수 확인 (다크 카드) */
.pkg-must{ background:#1c2230; color:#fff; border-radius:18px; padding:26px 26px; }
.pkg-must h3{ font-size:17px; font-weight:800; margin:0 0 18px; display:flex; align-items:center; gap:8px; }
.pkg-must ul{ display:flex; flex-direction:column; gap:14px; }
/* flex로 두면 텍스트와 <b>가 각각 별도 아이템이 되어 따로 줄바꿈됨(모바일에서 문장 깨짐)
   → 체크는 절대배치, 본문은 일반 인라인 흐름으로 자연스럽게 줄바꿈 */
.pkg-must li{ position:relative; padding-left:20px; font-size:14px; color:#cfd4dc; line-height:1.5; }
.pkg-must li::before{ content:"✓"; position:absolute; left:0; top:0; color:#7fd3a8; font-weight:800; }
.pkg-must b{ white-space:nowrap; }   /* '최종 승인 후' 같은 강조구가 중간에 안 끊기게 */
.pkg-must b{ color:#fff; }

/* ---------- 패키지 선택 ---------- */
.pkg-select{ background:#F4F5F7; padding:50px 24px 72px; margin-top:18px; }
.pkg-select-head{ text-align:center; margin-bottom:34px; }
.pkg-select-head h2{ font-size:27px; font-weight:800; color:#2b2f37; }
.pkg-select-head p{ color:#9aa0a8; font-size:15px; margin-top:12px; }
.pkg-list{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:26px; }

/* ---------- 한눈에 비교 표 ---------- */
.pkg-compare{ max-width:1100px; margin:0 auto 44px; }
.pkg-compare-title{ text-align:center; font-size:24px; font-weight:800; color:#2b2f37; margin:0 0 26px; }
.pkg-compare-wrap{ position:relative; background:#fff; border:1px solid #E7E9ED; border-radius:18px; overflow:hidden; }
.cmp-scroll{ overflow-x:auto; }

/* 가로 스크롤 안내 : 표 우측 끝에 오른쪽 화살표만 표시(넘칠 때만) · 스크롤 시작하면 사라짐 */
.cmp-drag{
  display:none; position:absolute; top:50%; right:10px; transform:translateY(-50%);
  z-index:3; pointer-events:none; align-items:center;
  padding:8px 11px; border-radius:999px; background:rgba(28,34,48,.6); transition:opacity .3s;
}
.pkg-compare-wrap.is-scrollable .cmp-drag{ display:flex; }
.pkg-compare-wrap.dragged .cmp-drag{ opacity:0; }
.cmp-drag svg{ display:block; animation:cmpArrR 1.1s ease-in-out infinite; }
@keyframes cmpArrR{ 0%,100%{ transform:translateX(0); opacity:.5 } 50%{ transform:translateX(4px); opacity:1 } }
.cmp-table{ width:100%; border-collapse:collapse; min-width:700px; }
.cmp-table th, .cmp-table td{ text-align:left; padding:19px 24px; font-size:15px; white-space:nowrap; }
.cmp-table thead th{ background:#F4FAF7; color:#5a6068; font-weight:700; font-size:14px; }
.cmp-table tbody tr{ border-top:1px solid #F0F0F2; }
.cmp-table tbody td{ color:#7c8088; }
.cmp-table .pk-name{ font-weight:800; }
.cmp-table .pk-name.lite{ color:#59b892; }
.cmp-table .pk-name.liteplus{ color:#3aa6a0; }
.cmp-table .pk-name.a{ color:#2f9e6e; }
.cmp-table .pk-name.b{ color:#4d7def; }
.cmp-table .pk-name.c{ color:#7c5cfc; }
.cmp-table .pk-name.p{ color:#b58f2e; }
/* BEST(인기) 행 강조 */
.cmp-table tr.row-best{ background:#EDF2FE; }
.cmp-table tr.row-best td{ color:#2b2f37; font-weight:600; }
.best-badge{ display:inline-block; margin-left:8px; background:#4d7def; color:#fff; font-size:11px; font-weight:800; padding:3px 8px; border-radius:6px; vertical-align:middle; }

/* ---------- 패키지 카드 ---------- */
.pkg-card{
  --accent:#2f9e6e;
  /* 구성 | 앨범 | 매트보드(UHD) 액자 | 탁상용 액자 */
  position:relative; display:grid; grid-template-columns:minmax(0,330px) 1fr 1.05fr 1.05fr;
  background:#fff; border:1px solid #E7E9ED; border-radius:18px; overflow:hidden;
}
.pkg-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accent); z-index:1; }

.pkg-config{ padding:30px 28px; border-right:1px solid #F0F0F2; }
.pkg-config h3{ font-size:20px; font-weight:800; color:#2b2f37; margin:0 0 6px; }
/* 가격 */
.pkg-price{ margin:0 0 16px; display:flex; align-items:baseline; gap:9px; }
.pkg-price .was{ font-size:14px; color:#aab0b8; text-decoration:line-through; }
.pkg-price .now{ font-size:25px; font-weight:800; color:var(--accent); }
.pkg-feat{ display:flex; align-items:center; gap:9px; font-size:14px; color:#3a3f47; margin:11px 0; }
.pkg-feat .chk{ flex:0 0 18px; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pkg-feat b{ font-weight:800; color:#2b2f37; }
.pkg-table{ display:grid; grid-template-columns:auto 1fr auto 1fr; gap:9px 14px; background:var(--accent-soft,#F7F8FA); border-radius:10px; padding:14px 16px; margin:4px 0 12px; }
.pkg-table .t-k{ color:#9aa0a8; font-size:13px; }
.pkg-table .t-v{ color:#2b2f37; font-size:13px; font-weight:800; }
.pkg-buy{
  display:block; width:100%; margin-top:18px; height:52px; line-height:52px; text-align:center; text-decoration:none;
  background:#1c2230; color:#fff; border-radius:10px; font-size:15px; font-weight:700; transition:.18s;
}
.pkg-buy:hover{ background:#11151f; }

.pkg-album, .pkg-frames{ padding:30px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid #F0F0F2; }
.pkg-card > .pkg-frames:last-child{ border-right:0; }
.pkg-col-label{ font-size:13px; font-weight:700; color:#6b7280; margin-bottom:22px; text-align:center; }

/* 앨범 목업 */
.album-book{
  width:158px; aspect-ratio:158/198;
  background:#fff; border:1px solid #e6e6e6; border-left:6px solid #e0e0e0; border-radius:3px 8px 8px 3px;
  box-shadow:7px 9px 24px rgba(0,0,0,.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.album-book .ab-brand{ font-size:9px; letter-spacing:1.5px; color:#b8b8b8; }
.album-book .ab-size{ font-size:19px; font-weight:800; color:#2b2f37; }
.album-book .ab-size i{ font-size:11px; font-style:normal; font-weight:700; color:#9aa0a8; margin-left:2px; }  /* 단위(in) */
.album-book .ab-pages{ font-size:16px; font-weight:800; color:var(--accent); }
/* 미니앨범 (Premium) : 기본 앨범 아래에 작게 */
.album-book.mini{ width:112px; margin-top:18px; }
.album-book.mini .ab-size{ font-size:15px; }
.album-book.mini .ab-pages{ font-size:13px; }
.album-note{ font-size:12px; color:#9aa0a8; margin-top:14px; text-align:center; line-height:1.5; }

/* 액자 */
.frames{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; justify-content:center; }
/* fph(고정폭 박스)는 블록이라 text-align 만으론 중앙이 안 됨 → flex 컬럼 중앙 정렬 */
.frame{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.frame .fph{ background:#edf0f3; border:3px solid #cfd4da; border-radius:2px; }
.frame .fsz{ font-size:12px; color:#7c8088; margin-top:8px; }

/* ===== 티어별 강조 (각각 다른 느낌) ===== */
.tier-lite{ --accent:#7ecd02; --accent-soft:#EDF7F2; }
.tier-liteplus{ --accent:#59b892; --accent-soft:#E7F5F3; }
.tier-a{ --accent:#009497; --accent-soft:#EAF6F0; }
.tier-b{ --accent:#4d7def; --accent-soft:#EDF2FE; border-color:#cdd9fb; box-shadow:0 16px 44px rgba(77,125,239,.15); }
.tier-c{ --accent:#7c5cfc; --accent-soft:#F1ECFE; border-color:#ddd5fb; }
.tier-premium{ --accent:#b58f2e; --accent-soft:#F7EFD6; border:2px solid #e4cd86; background:linear-gradient(180deg,#FFFDF6,#FBF6E9); }
.tier-premium .pkg-config{ border-right-color:#EFE6CC; }
/* C·Premium 액자는 우드 톤 테두리 */
/*.tier-c .frame .fph, .tier-premium .frame .fph{ border-color:#b3895a; }*/

/* 뱃지 */
.pkg-badge{ position:absolute; top:18px; right:20px; z-index:2; font-size:12px; font-weight:800; padding:5px 12px; border-radius:999px; }
.tier-lite .pkg-badge{ background:#EDF7F2; color:#3d9c78; }
.tier-liteplus .pkg-badge{ background:#E7F5F3; color:#2e8f89; }
.tier-a .pkg-badge{ background:#E8F6EF; color:#2f9e6e; }
.tier-b .pkg-badge{ background:#4d7def; color:#fff; box-shadow:0 6px 14px rgba(77,125,239,.35); }
.tier-c .pkg-badge{ background:#EFEAFE; color:#7c5cfc; }
.tier-premium .pkg-badge{ background:linear-gradient(90deg,#c9a84b,#e6cf8f); color:#4a3a00; }

/* 기본구성 더보기 토글 (데스크탑에선 숨김 = 3단 항상 표시) */
.pkg-toggle{ display:none; }

/* ---------- 반응형 ---------- */
@media (max-width:980px){
  .pkg-intro-grid{ grid-template-columns:1fr; }
  .pkg-card{ grid-template-columns:1fr; }
  /* 단일 컬럼에서 badge(좌상단 고정)와 제목이 겹치므로 본문을 아래로 내려 세로 간격 확보 */
  .pkg-config{ border-right:0; padding-top:58px; }
  /* 모바일에서는 badge 를 좌상단으로 */
  .pkg-badge{ left:20px; right:auto; }
  .pkg-album, .pkg-frames{ border-right:0; border-bottom:1px solid #F0F0F2; }
  .pkg-card > .pkg-frames:last-child{ border-bottom:0; }

  /* 앨범·액자는 기본 접힘 → "기본구성 더보기"로 펼침 */
  .pkg-card .pkg-album, .pkg-card .pkg-frames{ display:none; }
  .pkg-card.is-open .pkg-album, .pkg-card.is-open .pkg-frames{ display:flex; }
  .pkg-toggle{
    display:block; width:100%; border:0; border-top:1px solid #EDEFF2;
    background:#F7F8FA; color:#3a3f47; font-size:14px; font-weight:700; font-family:inherit;
    padding:15px; cursor:pointer; text-align:center;
  }
  .pkg-toggle:hover{ background:#F0F2F5; }
}
@media (max-width:560px){
  .pkg-steps{ grid-template-columns:1fr; }
  /* 컨셉 표는 모바일에서도 2열(2쌍/행) 유지 → 세로로 안 길어짐 */
  .pkg-table{ gap:8px 10px; padding:13px 12px; }
  .pkg-title{ font-size:27px; }
  .pkg-intro{ padding:40px 18px 30px; }
}