@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');

  :root {
    --navy: #0c1d4a;
    --navy-light: #1a3478;
    --navy-bg: #e9eef6;
    --red: #e31b23;
    --black: #111111;
    --bg: #f4f4f0;
    --white: #ffffff;
    --gray: #888;
    --light: #f0f0f0;
    --link: #1a3478;
    --font-paperozi: 'Paperozi', 'Paperlogy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --home-text: #333333;
    --home-muted: #666666;
    --home-muted-light: #999999;
    --home-accent: #0c1d4a;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Noto Sans KR', sans-serif; background: var(--bg); color: var(--black); }

  /* ── 홈 메인 타이포 (Paperozi / 참고 시안) ── */
  #page-home {
    font-family: var(--font-paperozi);
    color: var(--home-text);
    -webkit-font-smoothing: antialiased;
  }
  /* 홈 타이포(#333)가 상단 네비(검정 바)까지 물들지 않도록 */
  #page-home .top-nav {
    color: #fff;
    font-family: 'Noto Sans KR', sans-serif;
  }
  #page-home h2.section-title {
    margin: 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.35;
    color: #444444;
    letter-spacing: -0.02em;
  }
  #page-home h2.section-title span {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
  }
  #page-home .more-link {
    font-size: 14px;
    font-weight: 400;
    color: var(--home-muted);
    border-bottom-color: #ccc;
  }
  #page-home .more-link:hover {
    color: var(--home-text);
    border-bottom-color: var(--home-text);
  }
  #page-home .hip-badge {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 14px;
    background: linear-gradient(90deg, #c41820 0%, #e31b23 55%, #ff6b4a 100%);
    color: #fff;
  }
  #page-home .section-desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--home-muted-light);
  }
  #page-home .section-desc strong {
    font-weight: 700;
    color: var(--red);
  }
  #page-home .product-name {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--home-text);
    padding: 18px 18px 4px;
  }
  #page-home .product-plan {
    font-size: 14px;
    font-weight: 400;
    color: var(--home-muted);
    padding: 0 18px 10px;
  }
  #page-home .price-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--home-muted);
  }
  #page-home .price-original {
    font-size: 15px;
    font-weight: 400;
    color: var(--home-muted-light);
  }
  #page-home .product-price {
    padding: 12px 18px 18px;
  }
  #page-home .price-row {
    margin-bottom: 6px;
  }
  #page-home .price-row--installment {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 0;
  }
  #page-home .price-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--home-text);
  }
  #page-home .price-value.red {
    color: var(--home-text);
  }
  #page-home .review-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--home-text);
  }
  #page-home .review-date {
    font-size: 12px;
    font-weight: 400;
    color: var(--home-muted-light);
  }
  #page-home .review-content {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--home-muted);
  }
  /* 홈 메인 배너 (이미지 전체) */
  #page-home .main-banner {
    margin: 0 40px 24px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--navy);
    position: relative;
  }
  #page-home .main-banner__inner,
  #page-home .main-banner__carousel {
    position: relative;
    width: 100%;
  }
  #page-home .main-banner__track {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
    min-height: 160px;
    max-height: 420px;
    background: #1a1a1a;
  }
  #page-home .main-banner__slide {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease, visibility 0.55s ease;
    text-decoration: none;
    color: inherit;
  }
  #page-home .main-banner__slide.is-active {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 1;
  }
  #page-home .main-banner__slide:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: -3px;
  }
  #page-home .main-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #page-home .main-banner__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 14px;
    background: var(--navy);
  }
  #page-home .main-banner__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    font: inherit;
  }
  #page-home .main-banner__dot.is-active {
    background: var(--red);
    transform: scale(1.15);
  }

  /* ── TOP NAV ── */
  .top-nav {
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 40px;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  /* 홈: 로고 | 검색(가운데) | 버튼 — 뷰포트 기준 균형 */
  .top-nav--home {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 0 40px;
  }
  .top-nav--home .top-nav-left {
    justify-self: start;
    gap: 32px;
  }
  .top-nav--home .search-bar {
    justify-self: center;
    margin-left: 0;
    margin-right: 0;
  }
  .top-nav--home .top-nav-right {
    margin-left: 0;
    justify-self: end;
  }
  .top-nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .logo-wrap {
    display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none;
  }
  .logo-img {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
  }

  .top-nav-links { display: flex; gap: 18px; }
  .top-nav-links a { text-decoration: none; color: #aaa; font-size: 13px; font-weight: 500; transition: color 0.2s; }
  .top-nav-links a:hover { color: #fff; }

  .search-bar {
    display: flex; align-items: center;
    border: 1.5px solid #333;
    border-radius: 999px;
    padding: 7px 18px;
    gap: 8px;
    width: 100%;
    min-width: 300px;
    max-width: 540px;
    background: #1a1a1a;
  }
  .search-bar input { border: none; outline: none; font-size: 13px; width: 100%; font-family: inherit; color: #eee; background: transparent; }
  .search-bar input::placeholder { color: #555; }
  .search-bar svg { width: 16px; height: 16px; stroke: #666; fill: none; flex-shrink: 0; }

  .top-nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
  .pg-nav-auth {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .pg-nav-user {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }
  .top-nav-flexfill { flex: 1; min-width: 0; }
  .btn-join {
    padding: 8px 20px; border-radius: 999px; border: 1.5px solid #444;
    cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
    background: transparent; color: #ccc; transition: all 0.2s;
  }
  .btn-join:hover { border-color: var(--red); color: var(--red); }
  .btn-login {
    padding: 8px 20px; border-radius: 999px; border: none;
    cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit;
    background: var(--red); color: white;
  }

  /* ── AUTH (회원가입·로그인·찾기) ── */
  .auth-page {
    min-height: 100vh;
    background: #f0f0f0;
    padding: 28px 20px 56px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .auth-inner { width: 100%; max-width: 440px; }
  .auth-back {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    font-family: inherit;
    padding: 0 0 14px;
    margin-bottom: 4px;
  }
  .auth-back:hover { color: var(--black); }
  .auth-card {
    background: var(--white);
    border-radius: 16px;
    padding: 32px 28px 36px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  }
  .auth-logo {
    display: block;
    height: 48px;
    width: auto;
    margin: 0 auto 18px;
    object-fit: contain;
  }
  .auth-h1 {
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    color: var(--black);
    margin-bottom: 26px;
  }
  .auth-field { display: block; margin-bottom: 12px; }
  .auth-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .auth-label em {
    font-style: normal;
    color: var(--red);
    font-weight: 900;
    margin-right: 2px;
  }
  .auth-label .auth-hint { font-weight: 400; color: #888; font-size: 11px; }
  .auth-input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
  }
  .auth-input:focus { border-color: #bbb; }
  .auth-input::placeholder { color: #aaa; }
  .auth-note-blue {
    font-size: 12px;
    color: var(--link);
    font-weight: 500;
    margin-top: 6px;
    margin-bottom: 4px;
  }
  .auth-row-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 6px 0 22px;
    flex-wrap: wrap;
  }
  .auth-row-links a {
    color: var(--black);
    text-decoration: none;
    font-weight: 500;
  }
  .auth-row-links a:hover { text-decoration: underline; }
  .auth-row-links .bar { color: #ccc; user-select: none; }
  .auth-submit {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: var(--navy);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    margin-top: 8px;
  }
  .auth-submit:hover { background: #222; }
  /* 카카오 공식 로그인 버튼 스타일 */
  .auth-kakao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 45px;
    margin-bottom: 14px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: #fee500;
    color: rgba(0, 0, 0, 0.85);
    font-size: 15px;
    font-weight: 600;
    font-family: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background 0.15s, filter 0.15s;
    box-sizing: border-box;
  }
  .auth-kakao:hover {
    background: #f5dc00;
    filter: brightness(0.98);
  }
  .auth-kakao:active {
    background: #ebd300;
  }
  .auth-kakao-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
  }
  .auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 18px;
    color: #aaa;
    font-size: 13px;
  }
  .auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e5e5;
  }
  .auth-divider span { flex-shrink: 0; }
  .auth-bottom {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
    color: #666;
  }
  .auth-bottom a {
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
  }
  .auth-bottom a:hover { text-decoration: underline; }
  .auth-terms {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fafafa;
  }
  .auth-terms-all {
    width: 100%;
    padding: 11px;
    margin-bottom: 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .auth-terms-all:hover { border-color: #bbb; }
  .auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: #444;
    line-height: 1.45;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .auth-check input { margin-top: 3px; flex-shrink: 0; }
  .auth-check .auth-check-txt { flex: 1; min-width: 0; }
  .auth-check .auth-view { flex-shrink: 0; color: #888; font-size: 11px; text-decoration: underline; cursor: pointer; }
  .auth-find-desc {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
  }

  /* ── 법적 고지 (이용약관·개인정보처리방침) ── */
  .legal-page {
    min-height: 100vh;
    background: #fff;
    color: #222;
  }
  .legal-head {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 48px;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  .legal-back {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    font-family: inherit;
    border-radius: 10px;
  }
  .legal-back:hover { background: #f5f5f5; }
  .legal-h1 {
    font-size: 17px;
    font-weight: 900;
    margin: 0;
  }
  .legal-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 22px 20px 56px;
    font-size: 13px;
    line-height: 1.75;
  }
  .legal-block { margin-bottom: 22px; }
  .legal-block h2 {
    font-size: 14px;
    font-weight: 900;
    margin: 0 0 10px;
    color: #111;
  }
  .legal-block p { margin: 0 0 8px; color: #444; }
  .legal-block ul { margin: 0 0 8px 1.1em; padding: 0; color: #444; }
  .legal-block li { margin-bottom: 4px; }

  /* ── GNB ── */
  .gnb-bar {
    background: var(--bg);
    padding: 16px 0;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 64px;
    z-index: 99;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  }
  .gnb {
    display: inline-flex;
    background: var(--white);
    border-radius: 999px;
    padding: 6px 10px;
    gap: 2px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  }
  .gnb a {
    text-decoration: none;
    color: #777;
    font-size: 15px;
    font-weight: 600;
    padding: 9px 32px;
    border-radius: 999px;
    transition: all 0.2s;
    position: relative;
  }
  .gnb a:hover { color: var(--black); background: #f5f5f5; }
  .gnb a.active { color: var(--navy); font-weight: 700; background: var(--navy-bg); }
  .gnb a .badge {
    display: inline-block;
    background: var(--red); color: white;
    font-size: 9px; font-weight: 700;
    border-radius: 999px; padding: 1px 5px;
    margin-left: 3px; vertical-align: middle;
  }

  /* ── HERO ── */
  .hero {
    background: linear-gradient(120deg, var(--navy) 60%, #1a0a14 100%);
    margin: 0 40px 0;
    border-radius: 28px;
    padding: 60px 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 300px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
      -45deg, transparent, transparent 40px,
      rgba(227,27,35,0.03) 40px, rgba(227,27,35,0.03) 41px
    );
  }
  .hero-text { z-index: 2; }
  .hero-tags { font-size: 13px; color: var(--red); margin-bottom: 12px; font-weight: 600; letter-spacing: 1px; }
  .hero-title {
    font-size: 48px; font-weight: 900; line-height: 1.15;
    color: #fff; margin-bottom: 12px;
  }
  .hero-title .accent { color: var(--red); }
  .hero-sub { font-size: 15px; color: #888; }
  .hero-cta {
    margin-top: 28px; display: inline-block;
    background: var(--red); color: white;
    padding: 14px 32px; border-radius: 999px;
    font-size: 15px; font-weight: 700; text-decoration: none;
    cursor: pointer; border: none; font-family: inherit;
  }
  .hero-phones {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    width: auto;
    max-width: min(580px, 58vw);
  }
  .hero-carousel {
    position: relative;
    width: 100%;
    max-width: min(580px, 58vw);
    min-height: clamp(200px, 30vw, 320px);
  }
  .hero-carousel__track {
    position: relative;
    width: 100%;
    min-height: inherit;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .hero-carousel__slide {
    margin: 0;
    padding: 0;
    background: transparent;
    line-height: 0;
    flex-shrink: 0;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    inset: 0;
    transition: opacity 0.55s ease, visibility 0.55s ease;
    pointer-events: none;
  }
  .hero-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
    position: relative;
    pointer-events: auto;
  }
  .hero-carousel__slide .hero-example-img {
    height: clamp(225px, 33vw, 305px);
    max-width: min(48vw, 400px);
    width: auto;
    margin: 0 auto;
  }
  .hero-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 3;
  }
  .hero-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    font: inherit;
  }
  .hero-carousel__dot.is-active {
    background: var(--red);
    transform: scale(1.15);
  }
  .hero-carousel__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  .hero-example {
    margin: 0;
    padding: 0;
    background: transparent;
    line-height: 0;
    flex-shrink: 0;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
  }
  .hero-example:first-child {
    position: relative;
    z-index: 1;
  }
  .hero-example--overlap {
    margin-left: clamp(-120px, -15vw, -80px);
    position: relative;
    z-index: 2;
  }
  .hero-example--single {
    margin: 0 auto;
  }
  .hero-example-img {
    display: block;
    height: clamp(200px, 26vw, 270px);
    width: auto;
    max-width: min(42vw, 200px);
    object-fit: contain;
    background: transparent;
  }
  .hero-example-img--galaxy {
    height: clamp(225px, 33vw, 305px);
    max-width: min(44vw, 280px);
  }
  .hero-example-img--banner {
    height: clamp(230px, 32vw, 300px);
    max-width: min(42vw, 240px);
  }
  .hero-example-img--front {
    height: clamp(225px, 33vw, 305px);
    max-width: min(42vw, 240px);
  }

  /* ── 우측 상담 플로팅 (카카오 + 전화) ── */
  .contact-float-stack {
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    font-family: var(--font-paperozi);
    -webkit-font-smoothing: antialiased;
  }
  .contact-float-stack .kakao-float,
  .contact-float-stack .phone-float {
    position: static;
    right: auto;
    bottom: auto;
    width: 88px;
    min-height: 96px;
    padding: 12px 10px 14px;
    border-radius: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .contact-float-stack .kakao-float:hover,
  .contact-float-stack .phone-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  }
  .kakao-float {
    background: #fee500;
    color: inherit;
    cursor: pointer;
  }
  .kakao-bubble {
    width: 36px;
    height: 32px;
    background: #3c1e1e;
    border-radius: 50% 50% 50% 10%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .kakao-bubble svg {
    width: 20px;
    height: 20px;
    fill: #fee500;
  }
  .kakao-float .talk-label {
    font-size: 16px;
    font-weight: 900;
    color: #3c1e1e;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .kakao-float .talk-sub {
    font-size: 11px;
    color: #3c1e1e;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 3px;
  }
  .phone-float {
    background: #fff;
    border: 2px solid var(--red);
    color: var(--red);
    cursor: pointer;
  }
  .phone-float__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    margin: 0 auto 6px;
    color: #333;
    flex-shrink: 0;
  }
  .phone-float__icon svg {
    width: 26px;
    height: 26px;
  }
  .phone-float__lbl {
    display: block;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--red);
  }
  .phone-float__sub {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 3px;
    color: #222;
  }

  body.page-detail .detail-mobile-top,
  body.page-detail .detail-mobile-dock {
    display: none;
  }
  body.page-detail .contact-float-stack {
    display: none !important;
  }

  /* ── SECTION ── */
  .section { padding: 48px 40px; }
  .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
  .section-title { font-size: 22px; font-weight: 800; color: var(--black); }
  .section-title span { color: var(--red); }
  .more-link { font-size: 13px; color: #aaa; text-decoration: none; border-bottom: 1px solid #ddd; }
  .more-link:hover { color: var(--black); border-color: var(--black); }
  .hip-badge {
    display: inline-block;
    background: var(--black); color: white;
    font-size: 11px; font-weight: 700; border-radius: 999px;
    padding: 4px 14px; margin-bottom: 6px; letter-spacing: 1px;
  }
  .section-desc { font-size: 12px; color: #aaa; margin-bottom: 0; }
  .section-desc strong { color: var(--red); }

  /* ── PRODUCT GRID ── */
  .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .product-card {
    background: var(--white); border-radius: 20px; overflow: hidden;
    cursor: pointer; transition: transform 0.18s, box-shadow 0.18s;
    border: 1.5px solid transparent;
  }
  .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-color: #eee; }
  .product-name { font-size: 17px; font-weight: 800; color: var(--black); padding: 16px 16px 2px; }
  .product-plan { font-size: 12px; color: #aaa; padding: 0 16px 12px; }
  .product-img-wrap {
    background: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    margin: 0 14px;
    border-radius: 16px;
    overflow: hidden;
  }
  .product-img-wrap .product-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
  }
  .product-price { padding: 14px 16px; }
  .price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
  .price-label { font-size: 12px; color: #aaa; }
  .price-original { font-size: 12px; color: #ccc; text-decoration: line-through; }
  .price-value { font-size: 18px; font-weight: 800; color: var(--black); }
  .price-value.red { color: var(--red); }

  /* ── REVIEWS ── */
  .review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .review-card {
    background: var(--white); border-radius: 18px; overflow: hidden;
    cursor: pointer; transition: box-shadow 0.2s;
  }
  .review-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
  .review-img { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #888; }
  .review-img--photo { padding: 0; overflow: hidden; background: #eee; }
  .review-img--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .review-grid-empty {
    grid-column: 1 / -1;
    padding: 32px 16px;
    text-align: center;
    color: #888;
    font-size: 14px;
  }
  a.review-card { text-decoration: none; color: inherit; display: block; }
  .review-info { padding: 12px; }
  .review-meta { display: flex; justify-content: space-between; margin-bottom: 6px; }
  .review-author { font-size: 13px; font-weight: 700; }
  .review-date { font-size: 11px; color: #aaa; }
  .review-content { font-size: 12px; color: #666; line-height: 1.5; }

  /* ── REVIEW DETAIL (후기 상세) ── */
  #page-review-detail .rv-detail-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 40px 56px;
  }
  .rv-detail-photo {
    width: 100%;
    min-height: 240px;
    max-height: 400px;
    border-radius: 20px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    margin-bottom: 24px;
    overflow: hidden;
  }
  .rv-detail-kicker {
    font-size: 12px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }
  .rv-detail-title {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    color: var(--black);
  }
  .rv-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 14px;
    color: #666;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eee;
  }
  .rv-detail-meta span strong {
    color: var(--black);
    font-weight: 700;
  }
  .rv-detail-body {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
  }
  .rv-detail-body p {
    margin: 0 0 1.1em;
  }
  .rv-detail-body p:last-child {
    margin-bottom: 0;
  }
  .rv-detail-actions {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .rv-detail-btn {
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid #ddd;
    background: var(--white);
    color: var(--black);
    transition: border-color 0.2s, color 0.2s;
  }
  .rv-detail-btn:hover {
    border-color: var(--red);
    color: var(--red);
  }
  .rv-detail-btn--primary {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
  .rv-detail-btn--primary:hover {
    opacity: 0.92;
    color: #fff;
  }
  .rv-detail-actions a.rv-detail-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .rv-detail-empty {
    text-align: center;
    padding: 48px 24px 32px;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
  }
  .rv-detail-empty h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 10px;
  }

  /* ── PAGE SYSTEM ── */
  /* ── PHONE LIST ── */
  .sub-header {
    background: var(--white); border-bottom: 1px solid #eee;
    display: flex; align-items: center; justify-content: center;
    position: relative; padding: 20px 40px;
  }
  .back-btn { position: absolute; left: 40px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--black); }
  .sub-title { font-size: 22px; font-weight: 800; }

  .cat-tabs { display: flex; gap: 12px; padding: 20px 40px; background: var(--white); border-bottom: 1px solid #eee; }
  .cat-tab {
    flex: 1; border: 1.5px solid #ddd; background: var(--white);
    border-radius: 16px; padding: 14px; text-align: center;
    font-size: 15px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: all 0.2s; color: #888;
  }
  .cat-tab.active { border-color: var(--red); color: var(--red); background: #fff0f0; }

  .phone-list { padding: 20px 40px; }
  .phone-list-item {
    background: var(--white); border-radius: 20px;
    display: flex; align-items: center; padding: 20px;
    margin-bottom: 12px; gap: 20px; cursor: pointer;
    transition: box-shadow 0.2s; border: 1.5px solid transparent;
  }
  .phone-list-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); border-color: #eee; }
  .phone-list-img {
    width: 110px; height: 110px; background: var(--light); border-radius: 16px;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .phone-list-info { flex: 1; }
  .item-badges { display: flex; gap: 5px; margin-bottom: 6px; }
  .badge-popular { background: var(--black); color: white; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
  .badge-sale { background: var(--red); color: white; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
  .item-name { font-size: 20px; font-weight: 800; color: var(--black); margin-bottom: 3px; }
  .item-plan { font-size: 13px; color: #aaa; }
  .item-prices { text-align: right; }
  .item-prices .lbl { font-size: 12px; color: #aaa; }
  .item-prices .orig { font-size: 12px; color: #ccc; text-decoration: line-through; }
  .item-prices .main { font-size: 22px; font-weight: 900; color: var(--black); }
  .btn-detail {
    background: var(--red); color: white; border: none; border-radius: 999px;
    padding: 14px 24px; font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: inherit; white-space: nowrap;
  }

  /* ── INTERNET ── */
  .internet-wrap { padding: 40px; max-width: 720px; margin: 0 auto; }
  .internet-wrap--pick {
    max-width: 960px;
    padding: 24px 20px 16px;
  }
  .inet-pick {
    background: var(--white);
    border-radius: 24px;
    padding: 36px 32px 32px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
  }
  .internet-title {
    font-size: 26px;
    font-weight: 900;
    text-align: center;
    margin: 0 0 36px;
    letter-spacing: -0.02em;
  }
  .inet-section { margin-bottom: 36px; }
  .inet-section:last-of-type { margin-bottom: 28px; }
  .inet-section-label {
    font-size: 15px;
    font-weight: 800;
    color: var(--black);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
  }
  .inet-carrier-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 0;
  }
  #page-internet .telecom-tab {
    border: 1.5px solid #e2e2e2;
    background: var(--white);
    border-radius: 18px;
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
    appearance: none;
    -webkit-appearance: none;
  }
  #page-internet .telecom-tab:not(.active) {
    opacity: 0.88;
  }
  #page-internet .telecom-tab:not(.active) .telecom-logo {
    opacity: 0.65;
  }
  #page-internet .telecom-tab.active {
    border: 2px solid var(--black);
    opacity: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  }
  #page-internet .telecom-tab.active .telecom-logo {
    opacity: 1;
  }
  #page-internet .telecom-tab.active .telecom-name {
    color: var(--black);
    font-weight: 800;
  }
  .telecom-logo { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
  .telecom-name { font-size: 14px; font-weight: 700; color: #888; }

  .inet-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .inet-option-card {
    position: relative;
    border: 1.5px solid #e2e2e2;
    border-radius: 18px;
    padding: 20px 14px 18px;
    background: var(--white);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
    min-height: 118px;
  }
  .inet-option-card:hover:not(:disabled) {
    border-color: #ccc;
  }
  .inet-option-card.active {
    border: 2px solid var(--black);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  }
  .inet-option-card:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }
  .inet-select-row.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .inet-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    line-height: 1.2;
  }
  .inet-badge--red {
    background: var(--red);
  }
  .inet-badge--navy {
    background: #0c1d4a;
  }
  .inet-badge--blue {
    background: #333;
  }
  .inet-card-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--black);
    padding-right: 56px;
    line-height: 1.35;
  }
  .inet-card-meta {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    font-weight: 600;
  }
  .inet-card-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--red);
    margin-top: 10px;
  }
  .inet-ck-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    user-select: none;
  }
  .inet-ck-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--black);
    cursor: pointer;
  }
  .inet-mvno-note {
    font-size: 14px;
    line-height: 1.65;
    color: #555;
    padding: 18px 16px;
    background: #f7f7f7;
    border-radius: 16px;
    border: 1px solid #eee;
  }
  .inet-pick-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
  }
  .btn-kakao {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
  }
  .btn-quick {
    flex: 1;
    padding: 16px;
    background: var(--red);
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    font-family: inherit;
  }

  /* 인터넷 하단 고정 액션 바 */
  body.page-internet #page-internet {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }
  body.page-internet .contact-float-stack {
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }
  .inet-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.07);
  }
  .inet-dock__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    padding: 12px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .inet-dock__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  .inet-dock__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color 0.2s, filter 0.15s;
  }
  .inet-dock__btn--line {
    background: #fff;
    border: 1.5px solid #d5d5d5;
    color: #111;
  }
  .inet-dock__btn--line:hover {
    border-color: #999;
  }
  .inet-dock__btn--primary {
    background: var(--red);
    border: 1.5px solid var(--red);
    color: #fff;
  }
  .inet-dock__btn--primary:hover {
    filter: brightness(1.05);
  }
  .inet-dock__price {
    text-align: right;
    min-width: 0;
    flex: 1;
    max-width: 320px;
  }
  .inet-dock__row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 18px;
    font-size: 13px;
  }
  .inet-dock__row--muted {
    color: #999;
    font-weight: 500;
    margin-bottom: 2px;
  }
  .inet-dock__row--muted span:last-child {
    font-weight: 600;
    color: #b0b0b0;
  }
  .inet-dock__row--strong {
    font-weight: 800;
    color: #111;
    font-size: 15px;
    margin-bottom: 6px;
  }
  .inet-dock__row--discount {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
  }
  .inet-dock__row--discount span:last-child {
    color: var(--red);
    font-weight: 600;
  }
  .inet-dock__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px 12px;
    font-size: 11px;
  }
  .inet-dock__fine {
    color: #999;
    font-weight: 500;
    line-height: 1.4;
  }
  .inet-dock__gift {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--red);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
  }
  .inet-dock__gift-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
  }

  /* 레거시 인터넷 블록(분리 전) — 필요 시 유지 */
  .telecom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
  }
  .telecom-tab {
    border: 2px solid #ddd;
    background: var(--white);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
  }
  .telecom-tab.active {
    border-color: var(--red);
  }
  .telecom-tab.active .telecom-name {
    color: var(--black);
  }
  .price-box {
    background: var(--white);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 16px;
  }
  .price-box-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
  }
  .price-box-row:last-child {
    border-bottom: none;
  }
  .price-box-row .val {
    font-size: 18px;
    font-weight: 800;
  }
  .price-box-row .val.red {
    color: var(--red);
  }
  .gift-box {
    background: #fff8f0;
    border-radius: 16px;
    padding: 14px 20px;
    font-size: 13px;
    color: #885500;
    margin-bottom: 20px;
  }
  .gift-box strong {
    font-size: 18px;
    color: var(--red);
  }
  .order-row {
    display: flex;
    gap: 10px;
  }

  /* ── INTERNET 하단 스토리 (브랜드 톤) ── */
  .inet-below {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 40px 64px;
  }
  .inet-spotlight {
    background: linear-gradient(145deg, var(--navy) 0%, #152a52 100%);
    border-radius: 24px;
    padding: 36px 28px 40px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  }
  .inet-spot-inner { position: relative; z-index: 1; }
  .inet-spot-badge {
    display: inline-block;
    border: 2px solid var(--red);
    color: #ffc8c8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    border-radius: 8px;
    transform: rotate(-3deg);
    margin-bottom: 18px;
    background: rgba(227,27,35,0.12);
  }
  .inet-spot-kicker { font-size: 13px; color: #a8a8a8; margin-bottom: 10px; font-weight: 500; }
  .inet-spot-title {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.45;
    margin-bottom: 12px;
  }
  .inet-spot-title .hl { color: #ffe566; font-weight: 900; }
  .inet-spot-sub { font-size: 14px; color: #c4c4c4; line-height: 1.65; font-weight: 500; max-width: 34em; margin: 0 auto; }
  .inet-spot-icon {
    width: 56px; height: 56px; margin: 22px auto 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
  }

  .inet-bridge {
    margin-top: 20px;
    background: #ececec;
    border-radius: 22px;
    padding: 28px 24px 30px;
    text-align: center;
  }
  .inet-bridge h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--black);
    line-height: 1.45;
    margin-bottom: 10px;
  }
  .inet-bridge h3 em {
    font-style: normal;
    color: var(--red);
  }
  .inet-bridge p { font-size: 13px; color: #666; line-height: 1.65; font-weight: 500; max-width: 36em; margin: 0 auto; }
  .inet-pill {
    display: inline-block;
    margin-top: 16px;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    background: #ddd;
    padding: 6px 14px;
    border-radius: 999px;
  }

  .inet-val-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 28px;
  }
  .inet-val-card {
    background: var(--white);
    border-radius: 20px;
    padding: 22px 18px;
    border: 1.5px solid #eee;
    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  }
  .inet-val-card .tag {
    font-size: 11px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }
  .inet-val-card h4 { font-size: 16px; font-weight: 800; margin-bottom: 8px; color: var(--black); }
  .inet-val-card p { font-size: 12px; color: #777; line-height: 1.55; font-weight: 500; }

  .inet-chat-wrap { margin-top: 40px; }
  .inet-chat-headline {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    color: var(--black);
    margin-bottom: 6px;
  }
  .inet-chat-headline span { color: var(--red); }
  .inet-chat-board {
    margin-top: 18px;
    background: linear-gradient(180deg, #eef0f4 0%, #e4e7ec 100%);
    border-radius: 22px;
    padding: 22px 18px 18px;
    border: 1px solid #dde1e8;
  }
  .inet-chat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .inet-chat-card {
    background: #fff;
    border-radius: 16px;
    padding: 12px 12px 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .inet-chat-card .ch-top {
    font-size: 10px;
    font-weight: 800;
    color: #999;
    letter-spacing: 0.02em;
  }
  .inet-msg { max-width: 100%; }
  .inet-msg span {
    display: inline-block;
    padding: 8px 11px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 500;
  }
  .inet-msg--guest span {
    background: #ebebeb;
    color: #333;
    border-bottom-left-radius: 4px;
  }
  .inet-msg--get {
    text-align: right;
  }
  .inet-msg--get span {
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    color: #4a1515;
    border-bottom-right-radius: 4px;
    text-align: left;
  }
  .inet-chat-note {
    text-align: center;
    font-size: 11px;
    color: var(--red);
    font-weight: 600;
    margin-top: 14px;
  }

  /* ── DETAIL ── */
  .carrier-bar { background: var(--light); padding: 14px 40px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
  .carrier-bar .cname { color: var(--navy-light); font-weight: 800; }
  .btn-reset { background: #888; color: white; border: none; border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer; font-family: inherit; }
  /* 상세: 본문 2열 + 오른쪽 요약(뷰포트에 붙는 sticky, 내부 스크롤 + 하단 CTA) */
  body.page-detail .detail-body {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 28px 40px 40px;
    max-width: 1320px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  body.page-detail .detail-main {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 28px;
    align-items: start;
  }
  body.page-detail .detail-product-col {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  body.page-detail .detail-options-col {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  body.page-detail .detail-tabs-block {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    margin-top: 4px;
    padding-top: 8px;
  }
  body.page-detail .detail-tabs {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
  }
  body.page-detail .detail-tab {
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 700;
    color: #aaa;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: var(--font-paperozi, inherit);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s, border-color 0.2s;
  }
  body.page-detail .detail-tab:hover {
    color: #555;
  }
  body.page-detail .detail-tab.active {
    color: var(--black);
    border-bottom-color: var(--black);
  }
  body.page-detail .detail-tab-badge {
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 8px;
    padding: 2px 6px;
    line-height: 1.2;
  }
  body.page-detail .detail-panel {
    display: none;
  }
  body.page-detail .detail-panel.is-active {
    display: block;
  }
  body.page-detail .detail-tabs-block .detail-panel {
    padding-top: 24px;
  }
  body.page-detail .det-spec-intro {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  body.page-detail .det-spec-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 10px;
  }
  body.page-detail .det-spec-lead {
    font-size: 14px;
    line-height: 1.65;
    color: #666;
    margin-bottom: 18px;
  }
  body.page-detail .det-spec-table {
    margin: 0 0 20px;
  }
  body.page-detail .det-spec-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    line-height: 1.5;
  }
  body.page-detail .det-spec-row dt {
    font-weight: 700;
    color: #444;
  }
  body.page-detail .det-spec-row dd {
    margin: 0;
    color: #555;
  }
  body.page-detail .det-spec-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  body.page-detail .det-spec-gallery img {
    width: 100%;
    border-radius: 12px;
    background: #f5f5f5;
    object-fit: contain;
    aspect-ratio: 4/5;
  }
  body.page-detail .det-benefit-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 40px 36px 32px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 50%, #2a4a8a 100%);
    color: #fff;
    min-height: 320px;
  }
  body.page-detail .det-benefit-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  body.page-detail .det-benefit-shape--cube {
    position: absolute;
    right: 18%;
    top: 18%;
    width: 72px;
    height: 72px;
    background: #ffd54a;
    border-radius: 10px;
    transform: rotate(18deg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  }
  body.page-detail .det-benefit-shape--sphere {
    position: absolute;
    right: 8%;
    top: 42%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff8c4, #ffc107);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  body.page-detail .det-benefit-copy {
    position: relative;
    z-index: 1;
    max-width: 420px;
  }
  body.page-detail .det-benefit-kicker {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.9;
    margin-bottom: 12px;
  }
  body.page-detail .det-benefit-title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 16px;
    color: #ffe566;
  }
  body.page-detail .det-benefit-title span {
    color: #fff;
  }
  body.page-detail .det-benefit-sub {
    font-size: 15px;
    line-height: 1.65;
    opacity: 0.95;
    margin-bottom: 22px;
  }
  body.page-detail .det-benefit-cta {
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    background: var(--navy);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  body.page-detail .det-benefit-cta:hover {
    opacity: 0.9;
  }
  body.page-detail .det-benefit-conds {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 28px 0 0;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    display: grid;
    gap: 10px;
  }
  body.page-detail .det-benefit-conds li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
  }
  body.page-detail .det-benefit-conds em {
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    color: #b8d4ff;
  }
  body.page-detail .detail-review-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
  body.page-detail .detail-review-more {
    font-size: 14px;
    font-weight: 700;
    color: var(--red);
    text-decoration: none;
  }
  body.page-detail .detail-review-more:hover {
    text-decoration: underline;
  }
  body.page-detail .detail-review-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 14px;
    overflow: hidden;
  }
  body.page-detail .detail-review-list .rv-card--list {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #efefef;
    background: #fff;
    transition: background 0.15s;
  }
  body.page-detail .detail-review-list .rv-card--list:last-child {
    border-bottom: none;
  }
  body.page-detail .detail-review-list .rv-card--list:hover {
    background: #fafafa;
  }
  body.page-detail .detail-review-list .rv-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: block;
    object-fit: cover;
    background: #eee;
  }
  body.page-detail .detail-review-list .rv-body {
    flex: 1;
    min-width: 0;
    padding: 0;
  }
  body.page-detail .detail-review-list .rv-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
  }
  body.page-detail .detail-review-list .rv-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
  }
  body.page-detail .detail-review-list .rv-date {
    font-size: 12px;
    color: #aaa;
    flex-shrink: 0;
  }
  body.page-detail .detail-review-list .rv-product {
    font-size: 12px;
    color: #777;
    font-weight: 600;
    margin-bottom: 8px;
  }
  body.page-detail .detail-review-list .rv-text {
    margin: 0;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.page-detail .detail-review-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    padding-bottom: 8px;
  }
  body.page-detail .detail-review-pagination .rv-page-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: #555;
  }
  body.page-detail .detail-review-pagination .rv-page-btn.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
  body.page-detail .detail-summary-dock {
    width: 360px;
    flex-shrink: 0;
    position: sticky;
    top: 72px;
    align-self: flex-start;
    z-index: 15;
    max-height: calc(100vh - 80px);
  }
  body.page-detail .price-summary.price-summary--dock {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 88px);
    min-height: 0;
    padding: 0;
    overflow: hidden;
    position: static;
    top: auto;
  }
  body.page-detail .price-summary__scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px 22px 12px;
    -webkit-overflow-scrolling: touch;
  }
  body.page-detail .price-summary__foot {
    flex-shrink: 0;
    padding: 16px 22px 22px;
    border-top: 1px solid #e0e0e0;
    background: var(--light);
  }
  /* 상세 — 요약 패널 타이포 (선명·크게) */
  body.page-detail .price-summary--dock {
    font-family: var(--font-paperozi);
    -webkit-font-smoothing: antialiased;
    color: #333;
  }
  body.page-detail .ps-cond-label {
    font-size: 16px;
    font-weight: 700;
    color: #222;
  }
  body.page-detail .ps-cond-status {
    font-size: 14px;
    padding: 6px 12px;
    color: #444;
    background: #e4e4e4;
    border-color: #c8c8c8;
  }
  body.page-detail .ps-cond-status.is-none {
    color: #444;
    background: #e4e4e4;
  }
  body.page-detail .ps-cond-status.is-pending {
    color: var(--red);
    background: #fff0f0;
    border-color: #f5a8b8;
  }
  body.page-detail .ps-cond-more {
    font-size: 15px;
    font-weight: 700;
  }
  body.page-detail .ps-row {
    font-size: 15px;
    color: #333;
    padding: 11px 0;
  }
  body.page-detail .ps-row--principal {
    border: none;
    padding-top: 16px;
    padding-bottom: 4px;
  }
  body.page-detail .ps-row-principal-label {
    font-size: 16px;
    font-weight: 800;
    color: #111;
  }
  body.page-detail .ps-highlight {
    font-size: 18px;
    font-weight: 800;
    color: #111;
  }
  body.page-detail .notice {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    line-height: 1.65;
    padding: 14px;
  }
  body.page-detail .total-lbl {
    font-size: 15px;
    font-weight: 600;
    color: #555;
  }
  body.page-detail .total-price {
    font-size: 34px;
    font-weight: 900;
    color: #111;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }
  body.page-detail .ps-detail-row {
    font-size: 14px;
    color: #555;
    padding: 6px 0;
  }
  body.page-detail .ps-detail-row .v {
    font-size: 14px;
    font-weight: 800;
    color: #111;
  }
  body.page-detail .ps-detail-row--accent span,
  body.page-detail .ps-detail-row--accent .v {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
  }
  body.page-detail .ps-note-red {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
  }
  body.page-detail .ps-plan-title {
    font-size: 16px;
    font-weight: 800;
  }
  body.page-detail .ps-plan-name {
    font-size: 14px;
    font-weight: 500;
    color: #555;
  }
  body.page-detail .ps-plan-price {
    font-size: 26px;
    font-weight: 900;
    color: #111;
  }
  body.page-detail .orderform-sum-note {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
  }
  body.page-detail .orderform-sum-note .orderform-sum-note-title {
    font-size: 14px;
    font-weight: 800;
    color: #222;
  }
  body.page-detail .price-summary__foot .discount-note {
    font-size: 14px;
    font-weight: 700;
  }
  body.page-detail .btn-apply--detail {
    font-size: 17px;
    font-weight: 800;
  }
  .det-img-box {
    background: var(--light);
    border-radius: 22px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 16px 20px;
    overflow: hidden;
  }
  .det-main-photo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .det-phone-name {
    font-size: 39px;
    font-weight: 800;
    margin-bottom: 21px;
    letter-spacing: -0.02em;
  }
  .det-opts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }
  .det-opt {
    min-width: 0;
    width: 100%;
    padding: 10px 6px 12px;
    border-radius: 14px;
    background: #eee;
    border: 2px solid #ddd;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-family: inherit;
    color: inherit;
    transition: border-color 0.2s, background 0.2s;
  }
  .det-opt-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .det-opt img {
    width: 56px;
    height: 72px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    pointer-events: none;
  }
  .det-opt-placeholder {
    width: 56px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0.35;
    pointer-events: none;
  }
  .det-opt-lbl {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-align: center;
    line-height: 1.3;
    pointer-events: none;
    word-break: keep-all;
  }
  .det-opt.active {
    border-color: var(--red);
    background: #fff0f0;
  }
  .form-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
  }
  .form-label-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .form-label-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
  }
  .form-required-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: -0.02em;
  }
  .form-hint {
    font-size: 12px;
    color: #888;
    font-weight: 400;
    margin-left: 0;
    line-height: 1.45;
  }
  .form-section { margin-bottom: 20px; }
  /* 상세 — 필수 선택 구역 (용량·통신사·요금제) — 연한 톤 구분 */
  body.page-detail .form-section--capacity,
  body.page-detail .form-section--carrier,
  body.page-detail .form-section--plan {
    border-radius: 18px;
    padding: 18px 16px 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s;
  }
  body.page-detail .form-section--capacity {
    --fs-tint: #7a7a82;
    --fs-bg: #f4f4f5;
    --fs-border: #e8e8ea;
    --fs-opt-bg: #fff;
    --fs-opt-border: #e0e0e4;
    --fs-active-bg: #fff;
    --fs-active-border: #1a1a1a;
    --fs-badge-bg: #e4e4e7;
    --fs-badge-text: #55555c;
    background: var(--fs-bg);
    border-color: var(--fs-border);
  }
  body.page-detail .form-section--carrier {
    --fs-tint: #6e6e76;
    --fs-bg: #f4f4f5;
    --fs-border: #e8e8ea;
    --fs-opt-bg: #fff;
    --fs-opt-border: #e0e0e4;
    --fs-active-bg: #fff;
    --fs-active-border: #1a1a1a;
    --fs-badge-bg: #dcdce0;
    --fs-badge-text: #4e4e56;
    background: var(--fs-bg);
    border-color: var(--fs-border);
  }
  body.page-detail .form-section--plan {
    --fs-tint: #62626a;
    --fs-bg: #e8e8ea;
    --fs-border: #ccced2;
    --fs-opt-bg: #f4f4f5;
    --fs-opt-border: #c0c2c8;
    --fs-active-bg: #d6d6da;
    --fs-active-border: #45454d;
    --fs-badge-bg: #d4d4d8;
    --fs-badge-text: #45454d;
    background: var(--fs-bg);
    border-color: var(--fs-border);
  }
  body.page-detail .form-section--capacity .form-label-title,
  body.page-detail .form-section--carrier .form-label-title,
  body.page-detail .form-section--plan .form-label-title {
    color: #333;
  }
  body.page-detail .form-section--capacity .form-required-badge {
    color: var(--fs-badge-text);
    background: var(--fs-badge-bg);
    border: 1px solid color-mix(in srgb, var(--fs-tint) 35%, #fff);
  }
  body.page-detail .form-section--carrier .form-required-badge {
    color: var(--fs-badge-text);
    background: var(--fs-badge-bg);
    border: 1px solid color-mix(in srgb, var(--fs-tint) 35%, #fff);
  }
  body.page-detail .form-section--plan .form-required-badge {
    color: var(--fs-badge-text);
    background: var(--fs-badge-bg);
    border: 1px solid color-mix(in srgb, var(--fs-tint) 35%, #fff);
  }
  body.page-detail .form-section--capacity .form-opt,
  body.page-detail .form-section--carrier .form-opt {
    background: var(--fs-opt-bg);
    border-color: var(--fs-opt-border);
  }
  body.page-detail .form-section--capacity .form-opt:hover,
  body.page-detail .form-section--carrier .form-opt:hover {
    background: color-mix(in srgb, var(--fs-active-bg) 55%, #fff);
    border-color: color-mix(in srgb, var(--fs-active-border) 70%, #fff);
  }
  body.page-detail .form-section--capacity .form-opt.active,
  body.page-detail .form-section--carrier .form-opt.active {
    border: 2.5px solid var(--fs-active-border);
    background: var(--fs-active-bg);
    box-shadow: none;
  }
  body.page-detail .form-section--capacity .form-opt:not(.active),
  body.page-detail .form-section--carrier .form-opt:not(.active) {
    border: 1.5px solid var(--fs-opt-border);
    background: var(--fs-opt-bg);
  }
  body.page-detail .form-section--capacity .form-opt:not(.active) .form-opt-name,
  body.page-detail .form-section--carrier .form-opt:not(.active) .form-opt-name {
    color: #b0b0b5;
    font-weight: 500;
  }
  body.page-detail .form-section--capacity .form-opt.active .form-opt-name,
  body.page-detail .form-section--carrier .form-opt.active .form-opt-name {
    color: #1a1a1a;
    font-weight: 700;
  }
  body.page-detail .form-opt-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body.page-detail .form-opt-stack .form-opt {
    margin-bottom: 0;
    padding: 16px 18px;
    border-radius: 14px;
    min-height: 56px;
  }
  .form-carrier-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  .form-carrier-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .form-carrier-logo--skt img {
    width: 36px;
    height: 36px;
  }
  .form-carrier-logo--kt img {
    width: 40px;
    height: 40px;
  }
  .form-carrier-logo--lgu img {
    width: 44px;
    height: 44px;
  }
  body.page-detail .form-section--plan .form-label-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  body.page-detail .form-section--plan .plan-compare-trigger {
    color: var(--fs-badge-text);
    border-color: color-mix(in srgb, var(--fs-tint) 40%, #fff);
    background: color-mix(in srgb, var(--fs-badge-bg) 80%, #fff);
  }
  body.page-detail .form-section--plan .plan-compare-trigger:hover {
    color: #333;
    background: var(--fs-active-bg);
  }
  body.page-detail .form-section--plan .plan-picker {
    border: 1.5px solid var(--fs-opt-border);
    background: var(--fs-opt-bg);
  }
  body.page-detail .form-section--plan .plan-picker__item {
    background: var(--fs-opt-bg);
    border-bottom-color: color-mix(in srgb, var(--fs-opt-border) 80%, #fff);
  }
  body.page-detail .form-section--plan .plan-picker__item:hover {
    background: color-mix(in srgb, var(--fs-active-bg) 45%, #fff);
  }
  body.page-detail .form-section--plan .plan-picker__item.is-active {
    background: var(--fs-active-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-active-border) 50%, transparent);
  }
  body.page-detail .form-section--plan .plan-picker__item.is-active .plan-picker__name,
  body.page-detail .form-section--plan .plan-picker__item.is-active .plan-picker__price {
    font-weight: 700;
    color: #2a2a2e;
  }
  body.page-detail .form-section--plan .plan-picker__desc {
    color: #666;
  }
  body.page-detail .form-section--plan .plan-footnote {
    color: var(--fs-badge-text);
  }
  .form-opt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .form-opt-row--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .form-opt-row .form-opt { margin-bottom: 0; justify-content: center; text-align: center; }
  .form-opt {
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }
  .form-opt:not(.active) .form-opt-name { color: #9a9a9a; font-weight: 500; }
  .form-opt.active {
    border-color: rgba(232, 0, 28, 0.55);
    background: #fff;
    box-shadow: none;
  }
  .form-opt.active .form-opt-name { color: var(--black); font-weight: 700; }
  .form-opt-name { font-size: 15px; font-weight: 600; }
  .form-opt-desc { font-size: 12px; color: #aaa; margin-top: 2px; }
  .price-summary { background: var(--light); border-radius: 22px; padding: 22px; position: sticky; top: 80px; }
  .ps-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #e8e8e8; font-size: 13px; }
  .ps-row:last-of-type { border: none; }
  .ps-tag { background: #e0e0e0; color: #666; font-size: 10px; border-radius: 4px; padding: 2px 7px; font-weight: 700; }
  /* 요약 — 추가 할인 조건 (없음 / 더보기) */
  .ps-cond-list {
    background: #f0f0f0;
    border-radius: 14px;
    padding: 4px 12px;
    margin-bottom: 4px;
  }
  .ps-cond-item {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
  }
  .ps-cond-item:last-child { border-bottom: none; }
  .ps-cond-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }
  .ps-cond-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.35;
  }
  .ps-cond-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #d8d8d8;
    background: #e8e8e8;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .ps-cond-status.is-none {
    background: #e8e8e8;
    border-color: #d0d0d0;
    color: #666;
  }
  .ps-cond-status.is-pending {
    background: #fff0f0;
    border-color: #f5a8b8;
    color: var(--red);
    animation: ps-cond-pulse 1.6s ease-in-out infinite;
  }
  @keyframes ps-cond-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 0, 28, 0); }
    50% { box-shadow: 0 0 0 3px rgba(232, 0, 28, 0.12); }
  }
  .ps-cond-status.is-selected {
    background: #fff;
    border-color: var(--red);
    color: var(--red);
  }
  .ps-cond-required-hint {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff8f8;
    border: 1px solid #ffd4dc;
    font-size: 12px;
    font-weight: 600;
    color: #b91c3c;
    line-height: 1.5;
  }
  .ps-cond-req-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
  }
  .ps-cond-item--required .ps-cond-label { color: #222; }
  .ps-cond-item--required.is-highlight {
    background: rgba(232, 0, 28, 0.06);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 10px;
  }
  .ps-cond-status .ps-cond-x {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.75;
  }
  .ps-cond-more {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    line-height: 1.4;
  }
  .ps-cond-more:hover { color: var(--navy); }
  .ps-cond-item--simple .ps-cond-head { margin-bottom: 0; }
  .ps-cond-option-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ps-cond-option {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    background: #fafafa;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .ps-cond-option:hover {
    border-color: #ccc;
    background: #fff;
  }
  .ps-cond-option.is-active {
    border-color: var(--red);
    background: #fff0f0;
    box-shadow: inset 0 0 0 1px var(--red);
  }
  .ps-cond-modal-note--top {
    margin: 0 0 12px;
    padding: 0 4px;
    font-size: 13px;
    color: #666;
  }
  .ps-cond-option__name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 4px;
  }
  .ps-cond-option__desc {
    display: block;
    font-size: 12px;
    color: #666;
    line-height: 1.45;
  }
  .ps-cond-option__amt {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--link);
  }
  .ps-cond-modal-note {
    margin-top: 14px;
    font-size: 12px;
    color: #888;
    line-height: 1.55;
  }
  .ps-cond-modal--inet .plan-modal__panel {
    max-width: min(96vw, 720px);
  }
  .ps-cond-inet-wrap { margin-bottom: 4px; }
  .ps-cond-inet-heading {
    font-size: 15px;
    font-weight: 800;
    color: #222;
    margin: 0 0 12px;
  }
  .ps-cond-inet-heading--sub {
    margin-top: 20px;
  }
  .ps-cond-inet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .ps-cond-inet-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
    padding: 14px 8px 12px;
    border: 1.5px solid #e2e2e2;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .ps-cond-inet-card:hover {
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .ps-cond-inet-card.is-active {
    border: 2px solid #111;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  .ps-cond-inet-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    word-break: keep-all;
  }
  .ps-cond-inet-card__name {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    text-align: center;
    line-height: 1.25;
  }
  .ps-cond-inet-card.is-active .ps-cond-inet-card__name {
    color: #111;
    font-weight: 800;
  }
  .ps-inet-logo--kt { color: #111; letter-spacing: -0.04em; }
  .ps-inet-logo--kt::first-letter { color: var(--red); }
  .ps-inet-logo--lg { color: var(--navy-light); font-size: 14px; }
  .ps-inet-logo--lg .ps-inet-u { font-weight: 800; }
  .ps-inet-logo--skt { color: var(--red); font-size: 18px; }
  .ps-inet-logo--skylife { font-size: 13px; font-weight: 800; color: #333; }
  .ps-inet-logo--skylife .ps-inet-kt { color: #111; }
  .ps-inet-logo--skylife .ps-inet-kt::after { content: ""; }
  .ps-inet-logo--hello { font-size: 11px; font-weight: 800; color: var(--navy-light); line-height: 1.2; }
  .ps-inet-logo--hello .ps-inet-hello-sub { color: #888; font-weight: 700; font-size: 10px; }
  .ps-inet-logo--skb { color: #1a5fd4; font-size: 28px; font-weight: 900; line-height: 1; }
  .ps-inet-logo--dlive { color: #00c4e8; font-size: 16px; font-weight: 900; letter-spacing: -0.03em; }
  .ps-inet-logo--hcn { font-size: 14px; font-weight: 900; color: var(--red); }
  .ps-inet-logo--hcn .ps-inet-kt { color: #111; font-size: 12px; }
  .ps-highlight { font-size: 15px; font-weight: 800; }
  .notice { background: #eef2ff; border-radius: 14px; padding: 12px; font-size: 11px; color: #556; line-height: 1.6; margin: 14px 0; }
  .total-lbl { font-size: 13px; color: #888; margin-top: 14px; }
  .total-lbl span { color: var(--red); }
  .total-price { font-size: 30px; font-weight: 900; }
  .ps-detail { margin-top: 14px; }
  .ps-detail-row { display: flex; justify-content: space-between; font-size: 12px; color: #888; padding: 5px 0; }
  .ps-detail-row .v { font-weight: 700; color: var(--black); }
  .ps-detail-row--accent span,
  .ps-detail-row--accent .v {
    color: var(--link);
    font-weight: 600;
  }
  .ps-note-red {
    margin: 10px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--red);
    line-height: 1.55;
  }
  .ps-plan-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #ccc;
  }
  .ps-plan-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
  }
  .ps-plan-title { font-size: 14px; font-weight: 800; color: var(--black); line-height: 1.3; }
  .ps-plan-name { font-size: 12px; color: #666; margin-top: 4px; font-weight: 500; line-height: 1.35; }
  .ps-plan-price { font-size: 22px; font-weight: 900; color: var(--black); flex-shrink: 0; line-height: 1.1; }
  body.page-detail .btn-apply--detail {
    background: var(--red);
    margin-top: 0;
  }
  body.page-detail .btn-apply--detail:hover { background: #a8161c; }
  body.page-detail .price-summary__foot .discount-note { margin-top: 10px; }
  .btn-apply { width: 100%; margin-top: 14px; background: var(--red); color: white; border: none; border-radius: 999px; padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; }
  .discount-note { text-align: center; font-size: 12px; color: var(--red); margin-top: 8px; font-weight: 600; }

  /* 요금제 — 스크롤 목록 / 드롭다운형 */
  .form-section--plan .form-hint { color: #888; }
  .form-label--plan-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 14px;
    margin-bottom: 8px;
  }
  .form-label--plan-row .form-label-main { flex: 1; min-width: 0; }
  .form-label--plan-row .form-label-head { margin-bottom: 0; }
  .plan-compare-trigger {
    background: none;
    border: none;
    padding: 2px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .plan-compare-trigger:hover { color: var(--navy); }
  .plan-picker {
    background: #fff;
    border: 1px solid var(--black);
    border-radius: 14px;
    overflow: hidden;
  }
  .plan-picker__scroll {
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b8b8b8 #ececec;
  }
  .plan-picker__scroll::-webkit-scrollbar { width: 10px; }
  .plan-picker__scroll::-webkit-scrollbar-track {
    background: #ececec;
    border-radius: 999px;
    margin: 6px 0;
  }
  .plan-picker__scroll::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 999px;
    border: 2px solid #ececec;
  }
  .plan-picker__item {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px dashed #ddd;
    background: #fff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--black);
    transition: background 0.15s;
  }
  .plan-picker__item:last-child { border-bottom: none; }
  .plan-picker__item:hover { background: #fafafa; }
  .plan-picker__item:focus-visible {
    outline: 2px solid rgba(74, 122, 255, 0.5);
    outline-offset: -2px;
  }
  .plan-picker__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }
  .plan-picker__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.35;
  }
  .plan-picker__price-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .plan-picker__price {
    font-size: 15px;
    font-weight: 600;
    color: var(--black);
    white-space: nowrap;
  }
  .plan-picker__chev {
    font-size: 11px;
    font-weight: 600;
    color: var(--black);
    width: 1em;
    text-align: center;
  }
  .plan-picker__empty {
    padding: 20px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #888;
    text-align: center;
  }
  .plan-picker__desc {
    display: block;
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: #4a7aff;
  }
  .plan-footnote {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
  }

  /* 요금제 비교 모달 */
  .plan-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .plan-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .plan-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    cursor: pointer;
  }
  .plan-modal__panel {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    max-width: 760px;
    width: 100%;
    max-height: min(90vh, 680px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  }
  .plan-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
  }
  .plan-modal__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--black);
    margin: 0;
    line-height: 1.35;
  }
  .plan-modal__close {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #f3f3f3;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #444;
    font-family: inherit;
    flex-shrink: 0;
  }
  .plan-modal__close:hover { background: #e8e8e8; }
  .plan-modal__body {
    overflow: auto;
    padding: 14px 18px 20px;
    -webkit-overflow-scrolling: touch;
  }

  /* 현재 통신사 선택 모달 */
  .carrier-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
  }
  .carrier-modal .plan-modal__backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .carrier-modal .plan-modal__panel {
    position: relative;
    z-index: 1;
    margin: 0;
    flex-shrink: 0;
    width: min(100%, 420px);
    max-height: min(90vh, 560px);
  }
  .carrier-modal__panel {
    max-width: 420px;
  }
  .carrier-modal__lead {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.55;
    color: #444;
  }
  .carrier-modal__hint {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.5;
    color: #888;
  }
  .carrier-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .carrier-modal__opt {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e4e4e4;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
  }
  .carrier-modal__opt:hover {
    border-color: #ccc;
    background: #fafafa;
  }
  .carrier-modal__opt.is-active {
    border-color: #1a1a1a;
    border-width: 2.5px;
    background: #fff;
  }
  .carrier-modal__opt-name {
    font-size: 16px;
    font-weight: 700;
    color: #222;
  }
  .carrier-modal__opt-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .carrier-modal__opt-logo--text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f0f0f0;
    font-size: 11px;
    font-weight: 800;
    color: #666;
  }
  .carrier-modal--required .plan-modal__close {
    display: none;
  }
  body.page-detail .form-carrier-change-btn {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid #c8c8c8;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
  }
  body.page-detail .form-carrier-change-btn:hover {
    color: var(--red);
    border-color: var(--red);
  }
  body.page-detail .form-section--carrier .form-label-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    width: 100%;
  }

  .plan-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #333;
  }
  .plan-compare-table th,
  .plan-compare-table td {
    border: 1px solid #e5e5e5;
    padding: 10px 10px;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
  }
  .plan-compare-table th {
    background: #f6f6f6;
    font-weight: 700;
    white-space: nowrap;
  }
  .plan-compare-table td:first-child { font-weight: 600; color: var(--black); }
  .plan-compare-note {
    margin-top: 12px;
    font-size: 11px;
    color: #777;
    line-height: 1.55;
  }

  /* ── 주문서 작성 ── */
  body.page-order { background: #fff; min-height: 100vh; }
  .orderform-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 40px 56px;
  }
  .orderform-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
  }
  .orderform-back:hover { color: var(--black); text-decoration: underline; }
  .orderform-title {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    color: var(--black);
    margin-bottom: 28px;
    letter-spacing: -0.02em;
  }
  .orderform-grid {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) 340px;
    gap: 28px 36px;
    align-items: start;
  }
  .orderform-guide {
    font-size: 13px;
    line-height: 1.65;
    color: #444;
  }
  .orderform-guide-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 12px;
    line-height: 1.45;
  }
  .orderform-illu {
    text-align: center;
    font-size: 52px;
    margin: 4px 0 16px;
    line-height: 1;
  }
  .orderform-steps {
    list-style: none;
    counter-reset: ostep;
    padding: 0;
    margin: 0;
  }
  .orderform-steps li {
    counter-increment: ostep;
    position: relative;
    padding-left: 34px;
    margin-bottom: 16px;
    font-weight: 500;
  }
  .orderform-steps li::before {
    content: counter(ostep);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--link);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .orderform-steps strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 4px;
  }
  .orderform-form .auth-input { margin-bottom: 10px; }
  .orderform-addr-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: stretch;
  }
  .orderform-addr-row .auth-input { flex: 1; margin-bottom: 0; min-width: 0; }
  .orderform-regbtn {
    flex-shrink: 0;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: var(--black);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  .orderform-regbtn:hover { background: #333; }
  .orderform-mile-hint {
    font-size: 12px;
    color: var(--link);
    font-weight: 600;
    margin: -4px 0 10px;
  }
  body.page-order .price-summary { top: 72px; }
  body.page-order .ps-pill {
    background: var(--black);
    color: #fff;
    font-size: 10px;
    border-radius: 6px;
    padding: 4px 10px;
    font-weight: 700;
  }
  .orderform-sum-extra {
    border-top: 1px solid #e8e8e8;
    margin-top: 10px;
    padding-top: 6px;
  }
  .orderform-sum-note {
    font-size: 11px;
    color: #556;
    line-height: 1.55;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
  }
  .orderform-sum-note .orderform-sum-note-title {
    font-weight: 800;
    color: var(--black);
    margin-bottom: 6px;
    font-size: 12px;
  }
  .orderform-sum-note ul {
    margin: 4px 0 0;
    padding-left: 16px;
  }
  .orderform-sum-note li { margin-bottom: 5px; }

  /* ── 마이페이지 (홈 오늘의 핫딜과 동일 Paperozi/Paperlogy) ── */
  body.page-applist,
  body.page-applist #page-applist,
  #page-applist.page {
    font-family: var(--font-paperozi);
    color: var(--home-text);
    -webkit-font-smoothing: antialiased;
  }
  body.page-applist .top-nav {
    font-family: 'Noto Sans KR', sans-serif;
  }
  body.page-applist { background: #f0f1f4; min-height: 100vh; }
  .mypage-root { padding-bottom: 56px; }
  .mypage-hero {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
    padding: 28px 24px 32px;
  }
  .mypage-hero__bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 120% at 100% 0%, rgba(232, 0, 28, 0.45) 0%, transparent 55%),
      radial-gradient(ellipse 60% 80% at 0% 100%, rgba(232, 0, 28, 0.2) 0%, transparent 50%);
    pointer-events: none;
  }
  .mypage-hero__content { position: relative; max-width: 960px; margin: 0 auto; }
  .mypage-hero__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 0 12px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
  }
  .mypage-hero__back:hover { background: rgba(255, 255, 255, 0.16); }
  .mypage-hero__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--red);
    margin: 0 0 8px;
  }
  .mypage-hero__title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.03em;
  }
  .mypage-hero__sub { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); font-weight: 500; }
  .mypage-body {
    max-width: 960px;
    margin: -18px auto 0;
    padding: 0 20px 40px;
    position: relative;
    z-index: 1;
  }
  .mypage-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
  .mypage-summary__item {
    background: #fff;
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
  }
  .mypage-summary__val {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: var(--black);
    line-height: 1.1;
  }
  .mypage-summary__lbl { font-size: 12px; color: #888; font-weight: 600; margin-top: 4px; display: block; }
  .mypage-summary__item--accent .mypage-summary__val { color: var(--red); }
  .mypage-summary__item--ok .mypage-summary__val { color: #2e7d32; }
  .mypage-panel {
    background: #fff;
    border-radius: 18px;
    padding: 32px 24px 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
    text-align: center;
  }
  .mypage-panel--empty,
  .mypage-panel--guest { margin-top: 0; }
  .mypage-empty__illus {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff0f0, #ffe8eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
  }
  .mypage-empty__title { margin: 0 0 10px; font-size: 20px; font-weight: 900; color: var(--black); }
  .mypage-empty__text { margin: 0 0 20px; font-size: 14px; color: #666; line-height: 1.65; }
  .mypage-empty__guide {
    text-align: left;
    background: #f8f9fb;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 22px;
  }
  .mypage-empty__guide h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--black); }
  .mypage-empty__guide ol { margin: 0; padding-left: 18px; color: #555; font-size: 13px; line-height: 1.8; }
  .mypage-empty__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 280px;
    margin: 0 auto;
  }
  .mypage-btn {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
  }
  .mypage-btn--primary { background: var(--red); color: #fff; }
  .mypage-btn--primary:hover { filter: brightness(1.05); }
  .mypage-btn--ghost { background: #fff; color: var(--black); border: 1px solid #ddd; }
  .mypage-btn--kakao { background: #fee500; color: rgba(0, 0, 0, 0.85); }
  .mypage-loading { text-align: center; padding: 48px 20px; color: #888; font-size: 14px; }
  .mypage-order-list { display: flex; flex-direction: column; gap: 14px; }
  .mypage-order {
    background: #fff;
    border-radius: 18px;
    padding: 20px 20px 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    border: 1px solid #ebebeb;
  }
  .mypage-order__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
  }
  .mypage-order__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(145deg, #1a1a1e 0%, #333 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
  }
  .mypage-order__titles { flex: 1; min-width: 0; }
  .mypage-order__title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.35;
    color: var(--black);
  }
  .mypage-order__no { margin: 0; font-size: 12px; color: #888; }
  .mypage-order__no strong { color: #444; font-weight: 700; }
  .mypage-badge {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }
  .mypage-badge--new { background: #e3f2fd; color: #1565c0; }
  .mypage-badge--talk { background: #fff3e0; color: #e65100; }
  .mypage-badge--form { background: #f3e5f5; color: #7b1fa2; }
  .mypage-badge--ship { background: #e8f5e9; color: #2e7d32; }
  .mypage-badge--done { background: #1b5e20; color: #fff; }
  .mypage-badge--cancel { background: #ffebee; color: #c62828; }
  .mypage-order__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 14px;
    background: #f8f9fb;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
  }
  .mypage-order__meta-lbl {
    display: block;
    font-size: 10px;
    color: #999;
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .mypage-order__chips { margin-bottom: 12px; }
  .mypage-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #ddd;
    color: #444;
  }
  .mypage-order__progress-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--black);
  }
  .mypage-stepper {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .mypage-stepper__item {
    flex: 1;
    min-width: 64px;
    text-align: center;
    padding: 10px 6px 8px;
    border-radius: 10px;
    background: #f0f0f0;
    opacity: 0.55;
    position: relative;
  }
  .mypage-stepper__item.is-done { background: #e8f5e9; opacity: 1; }
  .mypage-stepper__item.is-current {
    background: linear-gradient(180deg, #fff0f1, #ffe0e3);
    opacity: 1;
    box-shadow: 0 0 0 2px var(--red);
  }
  .mypage-stepper__num {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 22px;
  }
  .mypage-stepper__item.is-done .mypage-stepper__num { background: #43a047; }
  .mypage-stepper__item.is-current .mypage-stepper__num { background: var(--red); }
  .mypage-stepper__lbl {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #444;
    line-height: 1.25;
  }
  .mypage-progress-cancel {
    margin: 0;
    padding: 12px;
    background: #ffebee;
    border-radius: 10px;
    color: #c62828;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
  }
  .mypage-order__foot {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
  }
  .mypage-order__link,
  .mypage-order__btn {
    flex: 1;
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .mypage-order__link {
    background: #fee500;
    color: rgba(0, 0, 0, 0.85);
    border: none;
  }
  .mypage-order__btn { background: var(--black); color: #fff; border: none; }
  .applylist-wrap {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .apply-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    margin-bottom: 14px;
  }
  .apply-card-thumb {
    width: 86px;
    height: 98px;
    border-radius: 14px;
    background: linear-gradient(160deg, #dbeafe 0%, #bfdbfe 45%, #93c5fd 100%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .apply-card-thumb svg { display: block; }
  .apply-card-body { flex: 1; min-width: 0; }
  .apply-card-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 10px;
    line-height: 1.35;
  }
  .apply-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
  }
  .apply-tag {
    font-size: 11px;
    font-weight: 600;
    color: #444;
    padding: 4px 9px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    background: #fff;
    line-height: 1.2;
  }
  .apply-card-meta {
    font-size: 12px;
    color: #888;
    line-height: 1.65;
    font-weight: 500;
  }
  .apply-card-cta {
    flex-shrink: 0;
    align-self: center;
    background: var(--black);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 14px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    max-width: 118px;
  }
  .apply-card-cta:hover { background: #333; }

  .apply-card { flex-wrap: wrap; }
  .apply-progress {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    width: 100%;
    flex: 1 1 100%;
  }
  .apply-progress__step {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    opacity: 0.45;
  }
  .apply-progress__step.is-done,
  .apply-progress__step.is-current { opacity: 1; }
  .apply-progress__step.is-current .apply-progress__dot {
    background: var(--red);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.2);
  }
  .apply-progress__step.is-done .apply-progress__dot { background: #2e7d32; }
  .apply-progress__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    margin-top: 5px;
    flex-shrink: 0;
  }
  .apply-progress__body { display: flex; flex-direction: column; gap: 2px; }
  .apply-progress__body strong { font-size: 13px; font-weight: 800; }
  .apply-progress__body span { font-size: 11px; color: #888; }
  .apply-progress--cancel {
    margin-top: 12px;
    color: #c62828;
    font-size: 13px;
    font-weight: 700;
  }
  .apply-empty {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border-radius: 12px;
    margin: 0 20px;
  }
  .apply-empty .auth-submit { max-width: 240px; margin: 16px auto 0; }
  .apply-loading { text-align: center; padding: 40px; color: #888; }
  .apply-tag--status { background: #fff3e0; color: #e65100; }

  .auth-result {
    margin-top: 14px;
    padding: 14px;
    background: #f4f8ff;
    border: 1px solid #c5d9f5;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1565c0;
    line-height: 1.6;
  }

  /* ── FOOTER ── */
  footer {
    background: var(--black);
    color: #555;
    padding: 36px 40px;
    font-size: 12px;
    line-height: 2;
    margin-top: 48px;
  }
  footer .f-logo { margin-bottom: 12px; }
  footer .f-logo-img { height: 36px; width: auto; display: block; object-fit: contain; }
  footer .f-legal-links {
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
  }
  footer .f-legal-links a {
    color: #999;
    text-decoration: underline;
  }
  footer .f-legal-links a:hover { color: #ccc; }
  footer .f-legal-links .bar { color: #555; margin: 0 12px; user-select: none; }
  footer strong { color: #888; }
  footer a { color: #555; text-decoration: none; }
  footer a:hover { color: #888; }
  footer .f-divider { border: none; border-top: 1px solid #222; margin: 16px 0; }

  /* ── CARRIER GATE (진입 전 통신사 선택) ── */
  #page-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #e8e9eb;
    padding: 28px 20px 36px;
  }
  .gate-wrap {
    width: 100%;
    max-width: 400px;
    text-align: center;
  }
  .gate-brand {
    margin: 0 auto 26px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 26px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
      0 6px 28px rgba(0, 0, 0, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  .gate-logo-img {
    height: 48px;
    width: auto;
    max-width: min(220px, 82vw);
    object-fit: contain;
    display: block;
    border-radius: 14px;
  }
  .gate-title {
    font-size: 20px; font-weight: 800; color: var(--black);
    line-height: 1.45; margin-bottom: 10px;
  }
  .gate-lead {
    font-size: 13px; font-weight: 600; color: var(--link);
    margin-bottom: 18px; line-height: 1.5;
  }
  .gate-hint {
    background: #dcdde0; color: #555; font-size: 11px; font-weight: 500;
    line-height: 1.55; padding: 12px 14px; border-radius: 12px;
    margin-bottom: 22px; text-align: left;
  }
  .gate-list { text-align: left; }
  .gate-opt {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: var(--white); border: none; border-radius: 14px;
    padding: 17px 18px; margin-bottom: 11px; cursor: pointer; font-family: inherit;
    font-size: 16px; font-weight: 700; color: var(--black);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .gate-opt:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }
  .gate-opt .gate-chev { color: #bbb; font-size: 18px; font-weight: 400; }
  .gate-foot {
    margin-top: 22px; font-size: 11px; color: #888; line-height: 1.55;
    font-weight: 500;
  }
  body.phoneget--gate .contact-float-stack,
  body.phoneget--login .contact-float-stack,
  body.phoneget--signup .contact-float-stack,
  body.phoneget--findid .contact-float-stack,
  body.phoneget--findpw .contact-float-stack,
  body.phoneget--terms .contact-float-stack,
  body.phoneget--privacy .contact-float-stack { visibility: hidden; pointer-events: none; }

  /* ══════════════════════════════════════
     반응형 - 태블릿 (768px 이하) — phoneget_3.html 과 동일
  ══════════════════════════════════════ */
  @media (max-width: 768px) {
    .top-nav { padding: 0 16px; height: 56px; }
    .top-nav-links { display: none; }
    .search-bar { display: none; }
    .btn-join { display: none; }
    .btn-login { padding: 7px 16px; font-size: 12px; }

    .gnb-bar { padding: 10px 0; top: 56px; }
    .gnb { padding: 4px 6px; }
    .gnb a { padding: 8px 18px; font-size: 13px; }

    #page-home .main-banner { margin: 0 16px 20px; border-radius: 16px; }
    #page-home .main-banner__track { aspect-ratio: 2.2 / 1; min-height: 140px; max-height: 280px; }

    .section { padding: 28px 16px; }

    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-name { font-size: 15px; }
    #page-home h2.section-title { font-size: 26px; }
    #page-home .product-name { font-size: 18px; }
    #page-home .product-plan { font-size: 13px; }
    #page-home .price-label,
    #page-home .price-original { font-size: 13px; }
    #page-home .price-value { font-size: 22px; }
    .product-img-wrap { height: 150px; }
    .price-value { font-size: 15px; }

    .review-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .sub-header { padding: 16px; }
    .back-btn { left: 16px; }
    .cat-tabs { padding: 14px 16px; gap: 8px; }
    .cat-tab { padding: 10px 6px; font-size: 13px; }
    .phone-list { padding: 14px 16px; }
    .phone-list-item { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .phone-list-img { width: 80px; height: 80px; }
    .item-name { font-size: 17px; }
    .item-prices { text-align: left; width: 100%; }
    .btn-detail { width: 100%; text-align: center; padding: 12px; }

    .internet-wrap { padding: 20px 16px; }
    #page-review-detail .rv-detail-wrap { padding: 20px 16px 40px; }
    .rv-detail-title { font-size: 20px; }
    .rv-detail-photo { min-height: 200px; font-size: 56px; border-radius: 16px; }
    .internet-wrap--pick { padding: 16px 12px 12px; }
    .inet-pick { padding: 24px 16px 22px; border-radius: 20px; }
    .inet-section { margin-bottom: 26px; }
    .inet-section-label { font-size: 14px; }
    .inet-carrier-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ps-cond-inet-grid { grid-template-columns: repeat(2, 1fr); }
    .inet-card-row { grid-template-columns: 1fr; gap: 10px; }
    .inet-option-card { min-height: 0; padding: 16px 14px; }
    .inet-card-title { padding-right: 52px; font-size: 14px; }

    body.page-internet #page-internet {
      padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px));
    }
    .inet-dock__inner {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding-left: 16px;
      padding-right: 16px;
    }
    .inet-dock__actions {
      width: 100%;
    }
    .inet-dock__btn {
      flex: 1;
      min-width: 0;
      padding: 12px 10px;
      font-size: 13px;
    }
    .inet-dock__price {
      max-width: none;
      width: 100%;
      text-align: left;
    }
    .inet-dock__row {
      justify-content: space-between;
    }
    .inet-dock__meta {
      justify-content: space-between;
      width: 100%;
    }
    .inet-dock__gift {
      white-space: normal;
    }

    .carrier-bar { padding: 12px 16px; font-size: 13px; }
    body.page-detail .detail-body {
      display: grid;
      grid-template-areas:
        "top"
        "product"
        "options"
        "summary"
        "tabs";
      padding: 16px 16px calc(168px + env(safe-area-inset-bottom, 0px));
      gap: 16px;
    }
    body.page-detail .detail-main { display: contents; }
    body.page-detail .detail-mobile-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      grid-area: top;
      padding: 14px 16px;
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }
    body.page-detail .detail-mobile-top__lbl {
      font-size: 14px;
      font-weight: 700;
      color: #444;
    }
    body.page-detail .detail-mobile-top__val {
      font-size: 22px;
      font-weight: 900;
      color: var(--red);
    }
    body.page-detail .detail-product-col { grid-area: product; }
    body.page-detail .detail-options-col { grid-area: options; }
    body.page-detail .detail-summary-dock {
      grid-area: summary;
      position: static;
      width: 100%;
      max-height: none;
      top: auto;
    }
    body.page-detail .detail-tabs-block { grid-area: tabs; }
    body.page-detail .price-summary__foot { display: none; }
    body.page-detail .detail-mobile-dock {
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 180;
      background: #fff;
      border-top: 1px solid #e5e5e5;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }
    body.page-detail .detail-mobile-dock__rows {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 10px;
    }
    body.page-detail .detail-mobile-dock__row {
      text-align: center;
      padding: 8px 4px;
      background: #f7f7f7;
      border-radius: 8px;
    }
    body.page-detail .detail-mobile-dock__row--total {
      background: #fff3f3;
    }
    body.page-detail .detail-mobile-dock__lbl {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: #666;
      margin-bottom: 4px;
    }
    body.page-detail .detail-mobile-dock__val {
      display: block;
      font-size: 14px;
      font-weight: 800;
      color: #222;
    }
    body.page-detail .detail-mobile-dock__row--total .detail-mobile-dock__val {
      color: var(--red);
      font-size: 15px;
    }
    body.page-detail .detail-mobile-dock__actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    body.page-detail .detail-mobile-dock__kakao,
    body.page-detail .detail-mobile-dock__apply {
      border: none;
      border-radius: 10px;
      padding: 14px 10px;
      font-size: 15px;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
    }
    body.page-detail .detail-mobile-dock__kakao {
      background: #fee500;
      color: #3c1e1e;
    }
    body.page-detail .detail-mobile-dock__apply {
      background: var(--red);
      color: #fff;
    }
    body.page-detail .detail-tabs { justify-content: flex-start; }
    body.page-detail .price-summary.price-summary--dock { max-height: none; }
    body.page-detail .price-summary__scroll { overflow-y: visible; }
    .contact-float-stack {
      right: 10px;
      bottom: 18px;
      gap: 6px;
    }
    .contact-float-stack .kakao-float,
    .contact-float-stack .phone-float {
      width: 68px;
      min-height: 82px;
      padding: 8px 8px 10px;
      border-radius: 12px;
    }
    .kakao-float .talk-label { font-size: 12px; }
    .kakao-float .talk-sub { font-size: 9px; line-height: 1.35; margin-top: 2px; }
    .kakao-bubble { width: 28px; height: 24px; margin-bottom: 4px; }
    .kakao-bubble svg { width: 16px; height: 16px; }
    .phone-float__icon { width: 28px; height: 24px; margin-bottom: 4px; }
    .phone-float__icon svg { width: 22px; height: 22px; }
    .phone-float__lbl { font-size: 12px; }
    .phone-float__sub { font-size: 9px; margin-top: 2px; }
    body.page-detail .detail-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.page-detail .detail-tab { padding: 12px 16px; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
    body.page-detail .det-benefit-title { font-size: 32px; }
    body.page-detail .det-benefit-hero { padding: 28px 22px 24px; min-height: 260px; }
    body.page-detail .det-spec-gallery { grid-template-columns: 1fr; }
    body.page-detail .detail-review-list .rv-card--list {
      padding: 14px 14px;
      gap: 12px;
    }
    body.page-detail .detail-review-list .rv-thumb {
      width: 48px;
      height: 48px;
    }
    .det-img-box { height: 220px; }
    .price-summary { position: static; }

    footer { padding: 28px 16px; }
    body.page-internet .contact-float-stack {
      bottom: calc(152px + env(safe-area-inset-bottom, 0px));
    }

    /* home.html 전용 (3번 파일에 없는 화면·레이아웃) */
    .top-nav--home {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo-img { height: 32px; }
    .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .section-header .more-link { align-self: flex-end; margin-top: -4px; }
    .internet-title { font-size: 20px; margin-bottom: 26px; }
    .order-row { flex-direction: column; }
    .inet-val-grid { grid-template-columns: 1fr; }
    .inet-chat-grid { grid-template-columns: 1fr; }
    .inet-below { padding-left: 16px; padding-right: 16px; padding-bottom: 40px; }
    .inet-spotlight { padding: 28px 20px 32px; border-radius: 20px; }
    .inet-spot-title { font-size: 18px; }
    .inet-bridge { padding: 22px 18px 24px; }
    #page-gate { padding: 20px 16px 28px; }
    .gate-title { font-size: 17px; }
    .gate-opt { padding: 14px 14px; font-size: 15px; }
    .auth-page { padding: 16px 14px 40px; }
    .auth-card { padding: 22px 16px 28px; }
    .auth-h1 { font-size: 19px; }
    .legal-body { padding: 18px 16px 44px; }
    .legal-head { padding: 10px 44px; }
    .orderform-wrap { padding: 14px 16px 40px; }
    .orderform-grid { grid-template-columns: 1fr; }
    .orderform-title { font-size: 21px; margin-bottom: 20px; }
    body.page-order .price-summary { position: static; }
    .mypage-hero { padding: 22px 16px 28px; }
    .mypage-hero__title { font-size: 22px; }
    .mypage-body { padding: 0 16px 32px; }
    .mypage-summary__val { font-size: 24px; }
    .mypage-order__meta { grid-template-columns: 1fr; gap: 10px; }
    .mypage-order__head { flex-wrap: wrap; }
    .mypage-badge { margin-left: auto; }
    .mypage-order__foot { flex-direction: column; }
    .apply-card {
      flex-wrap: wrap;
      gap: 16px;
      padding: 16px;
    }
    .apply-card-cta {
      width: 100%;
      max-width: none;
      padding: 14px;
    }
    .rv-modal__panel {
      max-height: min(92vh, 720px);
    }
  }

  /* ── 구매후기 등록 모달 ── */
  .rv-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
  }
  .rv-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .rv-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .rv-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    max-height: min(90vh, 680px);
    display: flex;
    flex-direction: column;
    background: #e8e8e8;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  }
  .rv-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--black);
    flex-shrink: 0;
  }
  .rv-modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
  }
  .rv-modal__head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .rv-modal__iconbtn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: background 0.15s, opacity 0.15s;
  }
  .rv-modal__iconbtn:hover {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
  }
  .rv-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .rv-modal__select {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    color: var(--black);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
  }
  .rv-modal__stars {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .rv-modal__star {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #ccc;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s, transform 0.12s;
  }
  .rv-modal__star.is-on {
    color: var(--red);
  }
  .rv-modal__star:hover {
    transform: scale(1.08);
  }
  .rv-modal__upload {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s;
  }
  .rv-modal__upload:hover {
    filter: brightness(1.06);
  }
  .rv-modal__preview {
    display: none;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #fff;
  }
  .rv-modal__preview.is-visible {
    display: block;
  }
  .rv-modal__preview img {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: contain;
  }
  .rv-modal__editor-wrap {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 200px;
  }
  .rv-modal__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
  }
  .rv-modal__tool {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    color: var(--black);
    transition: border-color 0.15s, background 0.15s;
  }
  .rv-modal__tool:hover {
    border-color: rgba(232, 0, 28, 0.35);
    background: #fff8f8;
  }
  .rv-modal__tool--color {
    font-weight: 900;
    text-decoration: underline;
    text-decoration-color: var(--red);
    text-underline-offset: 2px;
    color: var(--red);
  }
  .rv-modal__fontsize {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: #fff;
  }
  .rv-modal__rte {
    flex: 1;
    min-height: 160px;
    max-height: 280px;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.65;
    outline: none;
    color: #333;
  }
  .rv-modal__rte:empty:before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
  }
  .rv-modal__foot {
    flex-shrink: 0;
    padding: 14px 18px 18px;
    background: #e8e8e8;
  }
  .rv-modal__submit {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: var(--red);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s;
  }
  .rv-modal__submit:hover {
    filter: brightness(1.06);
  }
  .rv-modal__panel--wide {
    max-width: min(96vw, 920px) !important;
  }
  .rv-modal__resize-hint {
    text-align: center;
    padding: 4px 0 2px;
    font-size: 10px;
    color: #aaa;
    letter-spacing: 0.15em;
    user-select: none;
  }
  .rv-modal .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ══════════════════════════════════════
     반응형 - 모바일 (480px 이하) — phoneget_3.html 과 동일
  ══════════════════════════════════════ */
  @media (max-width: 480px) {
    .gnb a { padding: 7px 11px; font-size: 11px; }

    #page-home .main-banner { margin: 0 12px 16px; border-radius: 14px; }
    #page-home .main-banner__track { aspect-ratio: 16 / 9; min-height: 120px; max-height: 220px; }
    .hero-phones { max-width: 100%; }
    .hero-carousel { max-width: 100%; }
    .hero-example--overlap { margin-left: clamp(-80px, -22vw, -52px); }
    .hero-example-img--galaxy {
      height: clamp(165px, 42vw, 200px);
      max-width: min(42vw, 170px);
    }
    .hero-example-img--banner.hero-example-img--front {
      height: clamp(165px, 42vw, 200px);
      max-width: min(40vw, 160px);
    }

    .product-grid { gap: 10px; }
    .product-name { font-size: 13px; padding: 12px 12px 2px; }
    .product-plan { font-size: 11px; padding: 0 12px 8px; }
    #page-home h2.section-title { font-size: 24px; }
    #page-home .product-name { font-size: 17px; padding: 14px 14px 4px; }
    #page-home .product-plan { font-size: 13px; padding: 0 14px 8px; }
    #page-home .price-label { font-size: 13px; }
    #page-home .price-original { font-size: 14px; }
    #page-home .price-value { font-size: 22px; }
    #page-home .product-price { padding: 10px 14px 14px; }
    .product-img-wrap { height: 120px; margin: 0 10px; border-radius: 12px; }
    .product-price { padding: 10px 12px; }
    .price-value { font-size: 13px; }
    .price-original { font-size: 11px; }

    .review-grid { grid-template-columns: 1fr; }

    .section-title { font-size: 18px; }

    .rv-grid { grid-template-columns: 1fr !important; padding: 16px !important; }

    .phone-list-item { flex-direction: column; align-items: flex-start; }
    .phone-list-img { width: 100%; height: 130px; border-radius: 14px; }
    .item-prices { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
    .item-prices .main { font-size: 20px; }

    .telecom-tab { padding: 14px 6px; }
    .telecom-logo { font-size: 17px; }
    .telecom-name { font-size: 11px; }

    footer { font-size: 11px; line-height: 1.9; }
    footer .f-logo { font-size: 16px; }

    /* home.html 전용 */
    .gate-title { font-size: 16px; }
    .gate-lead { font-size: 12px; }
    .inet-spot-title { font-size: 16px; }
    .inet-spot-sub { font-size: 12px; }
    .inet-chat-board { padding: 16px 12px 14px; }
    footer .f-logo-img { height: 30px; }
    .orderform-addr-row { flex-direction: column; }
    .orderform-regbtn { width: 100%; padding: 12px; }
  }

/* 홈 긴급 공지 (admin 2차) */
.pg-notice-bar {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #1a1a1e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.pg-notice-bar__item {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pg-notice-bar__item--urgent {
  background: linear-gradient(90deg, #a8161c, var(--red));
}
.pg-notice-bar a.pg-notice-bar__item {
  color: inherit;
  text-decoration: none;
}
.pg-notice-bar a.pg-notice-bar__item:hover {
  text-decoration: underline;
}

/* 상단 네비 회원 영역 (전 페이지 — 상속·캐시 이슈 방지) */
.top-nav .top-nav-right,
.top-nav .pg-nav-auth {
  display: flex;
  align-items: center;
  color: #fff;
}
.top-nav .pg-nav-auth {
  display: inline-flex;
  gap: 10px;
}
.top-nav .pg-nav-user {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}