/* ===========================================================================
   으랏차차 패키지 페이지 전용 (business/package.html 만 싣는다) — 2026-10-06 재작성
   - 2026-10-06 2차(session/package-redesign): 시안의 「내 조합 만들기」(#builder) 등 반영.
   - 틀·색·간격은 하이오더 리디자인(/css/highorder.css)과 같다. 그 파일을 같이 싣지 않고
     필요한 규칙만 .pk 접두어로 옮겨 왔다 — 하이오더 쪽을 고쳐도 이 페이지가 따라 움직이지 않게.
   - 공통 CSS(style.css · business.css · common-header.css)는 고치지 않고 여기서 덮는다.
   - 본문은 전부 .pk 범위 안이다. 범위 밖에 쓰는 것은 아래 「페이지 전역」 블록뿐이다.
   - 빨강은 사이트 톤 #E60012(공통 헤더 CTA 와 같은 값).
   =========================================================================== */
.pk {
  --pk-red: #E60012;      --pk-red-hover: #C00010;   --pk-red-on-dark: #FF4D5A;
  --pk-red-tint: #FDE8E9; --pk-red-tint-2: #FFF6F6;
  --pk-ink: #111;         --pk-body: #555;           --pk-body-2: #444;
  --pk-muted: #888;       --pk-faint: #AAA;
  --pk-bg-gray: #F6F6F6;  --pk-chip: #F4F4F4;        --pk-line: #EEE;  --pk-line-2: #E8E8E8;
  --pk-dark: #111;        --pk-dark-card: #1E1E1E;   --pk-dark-line: #333;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
  color: var(--pk-ink);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.pk [hidden] { display: none !important; }
.pk img { display: block; max-width: 100%; }
.pk h1, .pk h2 { text-wrap: balance; }
.pk p { text-wrap: pretty; }

/* ---- 공통 틀 ---- */
.pk-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pk-sec { padding: 96px 0; }
.pk-sec--gray { background: var(--pk-bg-gray); }
.pk-sec--dark { background: var(--pk-dark); color: #fff; }
.pk-stack { display: flex; flex-direction: column; gap: 48px; }
.pk-head { display: flex; flex-direction: column; gap: 12px; }
.pk-head--center { align-items: center; text-align: center; }
.pk-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--pk-body); max-width: 640px; }
.pk-sec--dark .pk-head p { color: #CFCFCF; }
.pk-eyebrow { font-size: 14px; font-weight: 700; color: var(--pk-red); }
.pk-sec--dark .pk-eyebrow { color: var(--pk-red-on-dark); }
.pk-h2 { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.2; letter-spacing: -.03em; font-weight: 800; }
.pk-grid { display: grid; gap: 20px; }
.pk-num { font-size: 13px; font-weight: 700; color: var(--pk-red); }

/* ---- 버튼 ---- */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 28px; border-radius: 12px; border: 0;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3;
  cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s;
}
.pk-btn--red { background: var(--pk-red); color: #fff; }
.pk-btn--red:hover { background: var(--pk-red-hover); color: #fff; }
.pk-btn--gray { background: var(--pk-chip); color: var(--pk-ink); }
.pk-btn--gray:hover { background: #E9E9E9; }
.pk-btn--white { background: #fff; color: var(--pk-red); font-weight: 800; }
.pk-btn--white:hover { background: #F6F6F6; color: var(--pk-red-hover); }
.pk-btn--black { background: #111; color: #fff; }
.pk-btn--black:hover { background: #2A2A2A; }
.pk-btn--ghost { background: rgba(255,255,255,.18); color: #fff; }
.pk-btn--ghost:hover { background: rgba(255,255,255,.28); }
.pk-btn:focus-visible { outline: 3px solid var(--pk-ink); outline-offset: 2px; }
.pk-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ① 히어로 — 이미지 package/hero.webp(package_bg.png 의 WebP 사본)는 가로로 긴 배경용(인물이 오른쪽)이라 오른쪽 기준으로 자른다 */
.pk-hero { padding: 72px 0 56px; }
.pk-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; align-items: center; }
.pk-hero-text { display: flex; flex-direction: column; gap: 24px; }
.pk-chip-outline { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--pk-red); border: 1px solid var(--pk-red); padding: 6px 12px; border-radius: 999px; line-height: 1.3; }
.pk-h1 { margin: 0; font-size: clamp(34px, 6vw, 64px); line-height: 1.1; letter-spacing: -.04em; font-weight: 800; }
.pk-h1 em { color: var(--pk-red); font-style: normal; }
.pk-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--pk-body-2); max-width: 460px; }
.pk-hero-media { aspect-ratio: 4 / 3.4; border-radius: 28px; overflow: hidden; background: #1A1410; }
.pk-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }

/* ② 으랏차차 패키지란 — 번호 리스트 */
.pk-about-head { max-width: 680px; }
.pk-about-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
.pk-about-item { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--pk-ink); }
.pk-about-item h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.pk-about-item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pk-body); }

/* ③ 내 조합 만들기 (#builder) */
.pk-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pk-head-row .pk-head { max-width: 640px; }
.pk-head-sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pk-body); max-width: 380px; }
.pk-builder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 32px; align-items: start; }
.pk-pick { display: flex; flex-direction: column; gap: 24px; }
.pk-pick-group { display: flex; flex-direction: column; gap: 12px; }
.pk-pick-label { margin: 0; font-size: 15px; font-weight: 700; color: var(--pk-body-2); }
.pk-pick-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.pk-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 18px 18px 18px 52px; text-align: left; background: #fff; border: 2px solid #fff; border-radius: 16px; font-family: inherit; color: var(--pk-ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.pk-item::before { content: ''; position: absolute; left: 18px; top: 19px; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #BBB; background: #fff center / 16px no-repeat; }
.pk-item[aria-pressed="true"] { border-color: var(--pk-red); background: var(--pk-red-tint-2); }
.pk-item[aria-pressed="true"]::before { border-color: var(--pk-red); background-color: var(--pk-red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pk-item:hover { border-color: #E2E2E2; }
.pk-item[aria-pressed="true"]:hover { border-color: var(--pk-red); }
.pk-item:focus-visible { outline: 3px solid var(--pk-ink); outline-offset: 2px; }
.pk-item-name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.pk-item-desc { font-size: 14px; line-height: 1.5; color: #666; }
.pk-detail-links { margin: 0; font-size: 14px; color: var(--pk-body); line-height: 1.8; }
.pk-detail-links strong { margin-right: 6px; color: var(--pk-body-2); }
.pk-detail-links a { color: var(--pk-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #BBB; }
.pk-detail-links a:hover { color: var(--pk-red); text-decoration-color: currentColor; }
.pk-detail-links .pk-dot { margin: 0 6px; color: #BBB; }
.pk-result { position: sticky; top: 16px; background: var(--pk-dark); color: #fff; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.pk-result-label { font-size: 14px; font-weight: 700; color: var(--pk-red-on-dark); }
.pk-result-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pk-result-chips li { font-size: 14px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: #2A2A2A; }
.pk-result-empty { margin: 0; font-size: 15px; color: #9A9A9A; }
.pk-result-out { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: 1px solid var(--pk-dark-line); }
.pk-result-out-label { font-size: 15px; color: #CFCFCF; }
.pk-result-value { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; color: #888; }
.pk-result-value.is-on { color: var(--pk-red-on-dark); }
.pk-result-ex { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--pk-dark-line); color: #CFCFCF; }
.pk-result-note { font-size: 14px; line-height: 1.55; color: #9A9A9A; }
.pk-result .pk-btn { width: 100%; }
.pk-result-foot { margin: 0; font-size: 12px; line-height: 1.6; color: #777; }

/* ④ 할인 예시 (#price) */
.pk-ex-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.pk-ex { border: 2px solid var(--pk-red); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.pk-ex-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.pk-ex-detail { font-size: 14px; color: #666; }
.pk-ex-amount { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--pk-line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 16px; color: var(--pk-body); }
.pk-ex-tag { align-self: center; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--pk-chip); color: var(--pk-body); }
.pk-ex-amount b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--pk-red); }
.pk-pick-btn { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--pk-red); cursor: pointer; }
.pk-pick-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.pk-pick-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.pk-ex-note { margin: 0; font-size: 13px; color: var(--pk-muted); line-height: 1.6; }

/* ⑤ 업종별 추천 (검정) */
.pk-ind-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pk-ind { background: var(--pk-dark-card); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.pk-ind h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.pk-ind-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pk-ind-chips li { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: rgba(230,0,18,.16); color: #FF8095; }
.pk-ind .pk-pick-btn { margin-top: auto; color: #fff; }
.pk-ind-foot { margin: 0; font-size: 15px; color: #CFCFCF; }

/* ⑥ 메가텔레콤 특전 + 진행 과정 */
.pk-perk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; align-items: start; }
.pk-perk-left { display: flex; flex-direction: column; gap: 24px; }
.pk-perk-cards { display: flex; flex-direction: column; gap: 12px; }
.pk-perk { background: var(--pk-red); color: #fff; border-radius: 20px; padding: 24px 28px; display: flex; flex-direction: column; gap: 6px; }
.pk-perk h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.pk-perk p { margin: 0; font-size: 15px; line-height: 1.6; opacity: .92; }
.pk-step-label { font-size: 15px; font-weight: 700; color: var(--pk-body-2); }
.pk-step-list { display: flex; flex-direction: column; margin: 12px 0 0; padding: 0; list-style: none; }
.pk-step { display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--pk-line); }
.pk-step-no { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--pk-ink); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pk-step h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.pk-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pk-body); }

/* ⑦ 상담 신청서 — 하이오더 폼과 같은 겉모습 */
.pk-consult { position: relative; }
.pk-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.pk-consult-inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
/* 상담 신청서 — 공통 /css/biz-form.css 로 옮김(2026-10-09 · 8개 페이지 같은 규칙이었다) */
.pk-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0; }
.pk-contact > div { background: #fff; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.pk-contact dt { font-size: 13px; font-weight: 700; color: var(--pk-muted); }
.pk-contact dd { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; }
.pk-contact dd a { color: var(--pk-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #CCC; }
.pk-contact dd a:hover { color: var(--pk-red); }
.pk-contact dd small { font-size: 14px; font-weight: 600; color: var(--pk-body); }

/* ---- 고정 상담: 데스크톱 카드·접힌 버튼·플로팅 버튼 자리는 공통 css/biz-float.css(이 파일 뒤에 싣는다) · 여기는 1024px 미만 하단 바만 ---- */
.pk-mbar { display: none; }
.pk-mbar-spacer { display: none; }

/* ---- 페이지 전역 (이 파일은 이 페이지에만 실린다) ---- */
html { scroll-padding-top: 16px; }

@media (max-width: 767.98px) {
  .pk-sec { padding: 64px 0; }
  .pk-wrap { padding: 0 20px; }
  .pk-hero { padding: 40px 0 48px; }
  .pk-hero-grid { gap: 32px; }
  .pk-lead { font-size: 17px; }
  .pk-btns .pk-btn { flex: 1 1 auto; }
  .pk-ind, .pk-ex { padding: 24px; }
  .pk-perk { padding: 22px 24px; }
  /* 결과 패널: 모바일은 sticky 해제 — 상품 카드 아래에 그대로 쌓인다 */
  .pk-result { position: static; padding: 24px; }
  .pk-ex-amount b { font-size: 30px; }
}
@media (max-width: 1023.98px) {
  .pk-mbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 890; gap: 8px;
    background: #fff; border-top: 1px solid var(--pk-line); box-shadow: 0 -6px 20px rgba(0,0,0,.08);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .pk-mbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; text-decoration: none; line-height: 1.25; }
  .pk-mbar-tel { background: #111; color: #fff; }
  .pk-mbar-tel span { font-size: 12px; opacity: .8; }
  .pk-mbar-tel strong { font-size: 16px; font-weight: 800; }
  .pk-mbar-consult { background: var(--pk-red); color: #fff; font-size: 17px; font-weight: 800; }
  .pk-mbar-spacer { display: block; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-btn, .pk-item { transition: none; }
}