/* ================================================
   위너넷 HRD 아카이브 — 메인 시안 C (포켓에듀풍, 독립형 · 조화 미디엄 다크)
   /intro2 전용. 공유 archive.css/variables.css를 쓰지 않는 self-contained 스타일.
   2026-06-17: 라이트↔다크 교차(튐)를 버리고 '하나의 네이비 슬레이트 패밀리'로 통일.
   리듬은 ①카드 입체감 ②섹션 미세 명도 밴딩 ③인디고 그라데이션 밴드(히어로·통계·CTA)로만.
   톤 토큰만 바꾸면 전체 반영(메모리 intro2-tone-palettes 참조). prefix: pk-
   ================================================ */

.pk, .pk * { box-sizing: border-box; }
.pk {
    /* ── 팔레트 (조화 미디엄 다크 네이비 슬레이트) ── */
    --pk-primary:      #6B7BFF;
    --pk-primary-dk:   #5667F0;
    --pk-primary-text: #BCC6FF;   /* surface 위 인디고 액센트 텍스트 */
    --pk-primary-soft: rgba(107,123,255,0.18);
    --pk-primary-soft2:#3A4672;   /* 히어로/KPI 인디고 surface */
    --pk-accent:       #FF7A66;
    --pk-amber:        #FFB020;
    --pk-amber-ink:    #FFC974;    /* 다크 위 앰버 텍스트 */
    --pk-yellow:       #FFC53D;
    --pk-green:        #2FCB87;

    --pk-page:         #3A4458;    /* 페이지 배경(세 단계 lift한 라이트 슬레이트) */
    --pk-surface:      #4A5670;    /* 카드 surface — 배경보다 또렷이 밝게(입체) */
    --pk-surface-2:    #58647F;    /* hover/elevated */
    --pk-bg:           #313B4D;    /* soft 섹션 — 페이지보다 살짝 어둡게(은은한 밴딩) */
    --pk-track:        #535F78;

    --pk-ink:          #F3F5F9;
    --pk-ink-2:        #D6DBE4;
    --pk-gray:         #B0B7C5;
    --pk-gray-2:       #8B93A4;
    --pk-line:         rgba(255,255,255,0.14);
    --pk-white:        #FFFFFF;
    /* 섹션 점 네비 비활성 점 — 고정 네비가 밝은·어두운 섹션 위를 모두 지나므로
       테마와 무관한 중간 회색으로 고정(밝은 배경에서도 보이게). .pk-light 에서 재정의하지 않음. */
    --pk-dot:          #98A0B0;

    --pk-radius:       24px;
    --pk-radius-sm:    16px;
    --pk-shadow:       0 14px 44px rgba(0,0,0,0.40);
    --pk-shadow-lg:    0 26px 70px rgba(0,0,0,0.52);

    /* 요금제 섹션 공통 폭 — 환급배너·카드그리드·안내가 같은 폭으로 정렬되도록 단일 토큰화 */
    --pk-maxw-plans:   800px;

    margin: 0; /* 브라우저 기본 body 여백 제거 — 히어로 좌·우·상단 흰 프레임 원인 */
    font-family: 'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'돋움',sans-serif;
    color: var(--pk-ink);
    background: var(--pk-page);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;       /* 한글: 어절(단어) 중간에서 끊지 않음 — 어정쩡한 줄바꿈 방지 */
    overflow-wrap: break-word;  /* 단, 너무 긴 URL/영문은 넘침 방지 */
}
.pk a { text-decoration: none; color: inherit; }
.pk img { max-width: 100%; display: block; }
.pk .pk-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.pk .reveal { opacity: 0; -webkit-transform: translateY(22px); transform: translateY(22px); -webkit-transition: opacity .7s cubic-bezier(.76,0,.24,1), -webkit-transform .7s cubic-bezier(.76,0,.24,1); transition: opacity .7s cubic-bezier(.76,0,.24,1), transform .7s cubic-bezier(.76,0,.24,1); }
.pk .reveal.in { opacity: 1; -webkit-transform: none; transform: none; }

/* 스크롤 스냅 제거 — 스냅 지점이 자석처럼 가둬 두어 번 더 굴려야 하는 부작용.
   대신 자유 스크롤 + 우측 점 네비(클릭 이동)로 섹션 접근성 확보. (헤더 가림 방지 scroll-padding) */
html { scroll-padding-top: 74px; }

/* ── 우측 섹션 점 네비 ── */
.pk-dotnav {
    position: fixed; right: 22px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
    z-index: 60; display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px;
}
.pk-dotnav a {
    display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 10px; text-decoration: none; cursor: pointer;
}
.pk-dotnav .dot {
    width: 10px; height: 10px; border-radius: 50%; -ms-flex-negative: 0; flex-shrink: 0;
    background: var(--pk-dot);
    -webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1);
}
.pk-dotnav a:hover .dot { background: var(--pk-primary-text); -webkit-transform: scale(1.25); transform: scale(1.25); }
.pk-dotnav a.active .dot {
    background: var(--pk-primary); -webkit-transform: scale(1.45); transform: scale(1.45);
    box-shadow: 0 0 0 4px rgba(107,123,255,0.22);
}
.pk-dotnav .lbl {
    font-size: 12px; font-weight: 700; color: var(--pk-ink); white-space: nowrap;
    background: var(--pk-surface); border: 1px solid var(--pk-line); padding: 4px 11px; border-radius: 999px;
    box-shadow: var(--pk-shadow); pointer-events: none;
    opacity: 0; -webkit-transform: translateX(8px); transform: translateX(8px);
    -webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1);
}
.pk-dotnav a:hover .lbl { opacity: 1; -webkit-transform: none; transform: none; }
@media (max-width: 991px) { .pk-dotnav { display: none; } }

/* ── 버튼 ── */
.pk-btn {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    gap: 7px; height: 56px; padding: 0 30px;
    border-radius: 999px; font-size: 16px; font-weight: 700; border: 0; cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1); white-space: nowrap;
}
.pk-btn.sm { height: 46px; padding: 0 22px; font-size: 15px; }
.pk-btn.primary { background: var(--pk-primary); color: #fff; box-shadow: 0 8px 24px rgba(107,123,255,0.40); }
.pk-btn.primary:hover { background: #7E8DFF; -webkit-transform: translateY(-2px); transform: translateY(-2px); color:#fff; }
.pk-btn.ghost { background: var(--pk-surface); color: var(--pk-ink); box-shadow: inset 0 0 0 1px var(--pk-line); }
.pk-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--pk-primary); color: var(--pk-primary-text); }
.pk-btn.white { background: #fff; color: #1B2550; }
.pk-btn.white:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.pk-btn.line-white { background: transparent; color:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.pk-btn.line-white:hover { background: rgba(255,255,255,.12); color:#fff; }

/* ── 헤더 (고급 딥 네이비) ── */
.pk-header {
    position: -webkit-sticky; position: sticky; top: 0; z-index: 50;
    background: -webkit-linear-gradient(top, rgba(17,22,40,0.92) 0%, rgba(23,30,52,0.84) 100%);
    background: linear-gradient(180deg, rgba(17,22,40,0.92) 0%, rgba(23,30,52,0.84) 100%);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.pk-header .pk-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 72px; gap: 28px; }
/* 로고: `.pk a { color:inherit }`(0,1,1)에 지지 않도록 클래스 2개로 명시(0,2,0) */
.pk .pk-logo { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: #FFFFFF; }
.pk .pk-logo b { color: #A9B6FF; font-weight: 800; }
.pk-logo .tag { font-size: 11px; font-weight: 800; color: var(--pk-primary-text); background: var(--pk-primary-soft); padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: 2px; }
.pk-nav { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 26px; margin-left: 6px; }
.pk-nav a { font-size: 15px; font-weight: 600; color: var(--pk-ink-2); }
.pk-nav a:hover { color: var(--pk-primary-text); }
.pk-header-util { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; }
.pk-header-util .login { font-size: 15px; font-weight: 700; color: var(--pk-ink-2); }
.pk-burger { display: none; background: none; border: 0; font-size: 24px; color: var(--pk-ink); cursor: pointer; }

/* ── 히어로 (인디고 그라데이션 밴드) ── */
.pk-hero {
    position: relative; overflow: hidden;
    background:
      radial-gradient(1400px 640px at 50% -18%, rgba(107,123,255,0.22) 0%, rgba(107,123,255,0) 64%),
      -webkit-linear-gradient(top, var(--pk-primary-soft2) 0%, var(--pk-page) 74%);
    background:
      radial-gradient(1400px 640px at 50% -18%, rgba(107,123,255,0.22) 0%, rgba(107,123,255,0) 64%),
      linear-gradient(to bottom, var(--pk-primary-soft2) 0%, var(--pk-page) 74%);
}
.pk-hero .pk-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; padding-top: 70px; padding-bottom: 88px; }
.pk-hero-copy { -webkit-box-flex: 1; -ms-flex: 1 1 54%; flex: 1 1 54%; }
.pk-pill {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items: center; gap: 7px;
    background: var(--pk-surface); box-shadow: var(--pk-shadow); border: 1px solid var(--pk-line);
    font-size: 13px; font-weight: 700; color: var(--pk-ink-2); padding: 7px 15px; border-radius: 999px; margin-bottom: 24px;
}
.pk-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pk-accent); }
.pk-hero h1 { font-size: 50px; line-height: 1.18; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 20px; color: var(--pk-ink); }
.pk-hero h1 .u { background: -webkit-linear-gradient(left, #8DA0FF, #B79BFF); background: linear-gradient(90deg, #8DA0FF, #B79BFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pk-hero h1 mark { background: var(--pk-yellow); color: #15171E; padding: 0 6px; border-radius: 6px; }
.pk-hero-sub { font-size: 19px; line-height: 1.7; color: var(--pk-gray); margin: 0 0 30px; max-width: 540px; }
.pk-hero-cta { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.pk-hero-note { margin-top: 14px; font-size: 14px; color: var(--pk-gray); }
/* 히어로 무료 체험 이벤트 — 작은 노트 대신 눈에 띄는 코랄 배너 */
.pk-hero-event {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 11px;
    margin-top: 24px; padding: 8px 18px 8px 9px;
    background: rgba(255,122,102,0.13); border: 1px solid rgba(255,122,102,0.50);
    border-radius: 999px; box-shadow: 0 8px 26px rgba(255,122,102,0.18);
    -webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1);
}
.pk-hero-event:hover { background: rgba(255,122,102,0.20); -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,122,102,0.26); }
.pk-hero-event .he-tag {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px;
    background: var(--pk-accent); color: #fff; font-size: 12px; font-weight: 800;
    padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}
.pk-hero-event .he-tx { font-size: 15px; font-weight: 700; color: var(--pk-ink); }
.pk-hero-event .he-tx b { color: #FF9C8B; }
.pk-hero-event .he-go { font-size: 14px; font-weight: 800; color: #FF9C8B; white-space: nowrap; }
@media (max-width: 600px) {
    .pk-hero-event { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; border-radius: 18px; gap: 8px; }
    .pk-hero-event .he-tx { font-size: 14px; }
}

/* 히어로 비주얼 (앱 목업) */
.pk-hero-visual { -webkit-box-flex: 1; -ms-flex: 1 1 46%; flex: 1 1 46%; position: relative; }
.pk-mock {
    background: var(--pk-surface); border-radius: 26px; box-shadow: var(--pk-shadow-lg);
    border: 1px solid var(--pk-line); overflow: hidden; position: relative; z-index: 2;
}
.pk-mock-top { background: -webkit-linear-gradient(left, var(--pk-primary), #9A7BFF); background: linear-gradient(90deg, var(--pk-primary), #9A7BFF); padding: 18px 22px; color: #fff; }
.pk-mock-top .t1 { font-size: 13px; opacity: .85; }
.pk-mock-top .t2 { font-size: 18px; font-weight: 800; margin-top: 2px; }
.pk-mock-body { padding: 20px 22px 24px; }
.pk-mock-kpi { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; margin-bottom: 18px; }
.pk-mock-kpi .k { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: var(--pk-primary-soft); border-radius: 14px; padding: 13px 10px; text-align: center; }
.pk-mock-kpi .k b { display: block; font-size: 22px; font-weight: 800; color: var(--pk-primary-text); }
.pk-mock-kpi .k span { font-size: 11px; color: var(--pk-gray); }
.pk-mock-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; padding: 9px 0; }
.pk-mock-row .th { width: 38px; height: 38px; border-radius: 11px; background: var(--pk-primary-soft); -ms-flex-negative: 0; flex-shrink: 0; }
.pk-mock-row .th.a { background: rgba(47,203,135,0.18); } .pk-mock-row .th.b { background: rgba(255,176,32,0.18); } .pk-mock-row .th.c { background: rgba(107,123,255,0.20); }
.pk-mock-row .info { -webkit-box-flex:1; -ms-flex:1; flex:1; min-width: 0; }
.pk-mock-row .info .nm { font-size: 13px; font-weight: 700; color: var(--pk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-mock-row .info .bar { height: 6px; border-radius: 999px; background: var(--pk-track); margin-top: 6px; overflow: hidden; }
.pk-mock-row .info .bar i { display: block; height: 100%; width: 0; background: var(--pk-primary); border-radius: 999px; -webkit-transition: width 1.1s cubic-bezier(.76,0,.24,1); transition: width 1.1s cubic-bezier(.76,0,.24,1); }
.pk-mock-row .pct { font-size: 12px; font-weight: 800; color: var(--pk-primary-text); }
.pk-float { position: absolute; background: var(--pk-surface-2); color: var(--pk-ink); border: 1px solid var(--pk-line); border-radius: 16px; box-shadow: var(--pk-shadow-lg); padding: 12px 16px; font-size: 13px; font-weight: 700; z-index: 3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 9px; }
.pk-float .ic { width: 30px; height: 30px; border-radius: 9px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #fff; font-size: 14px; }
.pk-float.f1 { top: -22px; left: -26px; } .pk-float.f1 .ic { background: var(--pk-accent); }
.pk-float.f2 { bottom: -20px; right: -18px; } .pk-float.f2 .ic { background: var(--pk-green); }

/* ── 섹션 공통 (한 패밀리 안 미세 밴딩) ── */
.pk-sec { padding: 92px 0; }
.pk-sec.soft { background: var(--pk-bg); }
.pk-sec.indigo { background: var(--pk-primary-soft2); }
.pk-sec-head { text-align: center; max-width: 660px; margin: 0 auto 52px; }
.pk-eyebrow { display: inline-block; font-size: 18px; font-weight: 800; letter-spacing: .12em; color: var(--pk-primary-text); margin-bottom: 14px; }
.pk-sec-head h2 { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 14px; color: var(--pk-ink); }
.pk-sec-head p { font-size: 19px; color: var(--pk-gray); line-height: 1.65; }

/* ── 고민(pain) 카드 ── */
.pk-pain-grid { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 22px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.pk-pain { -webkit-box-flex: 1; -ms-flex: 1 1 240px; flex: 1 1 240px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); padding: 30px 26px; -webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1); }
.pk-pain:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: var(--pk-shadow); border-color: rgba(107,123,255,0.45); }
/* 고민 카드 아이콘 — 장난스러운 이모지 대신 라인아이콘을 둥근 소프트 배지에(고급감) */
.pk-pain .emo {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 15px;
    background: var(--pk-primary-soft); color: var(--pk-primary-text);
    font-size: 24px; line-height: 1; margin-bottom: 16px;
}
.pk-pain h4 { font-size: 18px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; color: var(--pk-ink); }
.pk-pain p { font-size: 14px; color: var(--pk-gray); line-height: 1.6; }

/* ── 이벤트 배너 (카드 + 절제된 인디고/앰버 틴트) ── */
.pk-events { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 22px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.pk-event { -webkit-box-flex: 1; -ms-flex: 1 1 380px; flex: 1 1 380px; border-radius: var(--pk-radius); padding: 28px 30px; color: var(--pk-ink); position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 18px; border: 1px solid var(--pk-line); -webkit-transition: -webkit-transform .3s cubic-bezier(.76,0,.24,1); transition: transform .3s cubic-bezier(.76,0,.24,1); }
.pk-event:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--pk-shadow); }
.pk-event.a { background: radial-gradient(130% 150% at 0% 0%, rgba(107,123,255,0.26), rgba(107,123,255,0) 58%), var(--pk-surface); border-color: rgba(107,123,255,0.38); }
.pk-event.b { background: radial-gradient(130% 150% at 0% 0%, rgba(255,176,32,0.20), rgba(255,176,32,0) 58%), var(--pk-surface); border-color: rgba(255,176,32,0.32); }
.pk-event .ev-emo { font-size: 38px; -ms-flex-negative: 0; flex-shrink: 0; }
.pk-event .ev-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.pk-event .ev-badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 11px; border-radius: 999px; margin-bottom: 8px; }
.pk-event.a .ev-badge { background: rgba(107,123,255,0.22); color: var(--pk-primary-text); }
.pk-event.b .ev-badge { background: rgba(255,176,32,0.18); color: var(--pk-amber-ink); }
.pk-event h4 { font-size: 20px; font-weight: 800; margin: 0 0 5px; letter-spacing: -0.02em; color: var(--pk-ink); }
.pk-event p { font-size: 14px; color: var(--pk-gray); margin: 0; }
.pk-event .ev-go { -ms-flex-negative: 0; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.07); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 18px; color: var(--pk-ink); }
.pk-event.a:hover .ev-go { background: rgba(107,123,255,0.30); } .pk-event.b:hover .ev-go { background: rgba(255,176,32,0.26); }

/* ── 로고 마퀴 ── */
.pk-logos { padding: 36px 0; border-top: 1px solid var(--pk-line); border-bottom: 1px solid var(--pk-line); background: var(--pk-page); }
.pk-logos .lbl { text-align: center; font-size: 18px; font-weight: 700; color: var(--pk-ink-2); margin-bottom: 20px; }
.pk-marquee { overflow: hidden; -webkit-mask-image: -webkit-linear-gradient(left, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.pk-marquee ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 56px; list-style: none; margin: 0; padding: 0; width: -webkit-max-content; width: max-content; -webkit-animation: pk-scroll 26s linear infinite; animation: pk-scroll 26s linear infinite; }
.pk-marquee li { font-size: 19px; font-weight: 800; color: var(--pk-gray-2); white-space: nowrap; }
@-webkit-keyframes pk-scroll { from { -webkit-transform: translateX(0);} to { -webkit-transform: translateX(-50%);} }
@keyframes pk-scroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ── 기능 ── */
.pk-feat-grid { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.pk-feat { -webkit-box-flex: 1; -ms-flex: 1 1 300px; flex: 1 1 300px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); padding: 34px 30px; }
.pk-feat .ic { width: 56px; height: 56px; border-radius: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 26px; margin-bottom: 20px; }
/* 색은 배지 톤에 맞춰 아이콘(currentColor)도 같이 — 인디고/앰버/그린 */
.pk-feat .ic.i1 { background: rgba(107,123,255,0.18); color: var(--pk-primary-text); }
.pk-feat .ic.i2 { background: rgba(255,176,32,0.16); color: #C77F0A; }
.pk-feat .ic.i3 { background: rgba(47,203,135,0.16); color: var(--pk-green); }
.pk-feat h4 { font-size: 20px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.02em; color: var(--pk-ink); }
.pk-feat p { font-size: 15px; color: var(--pk-gray); line-height: 1.65; }

/* ── 콘텐츠 라이브러리 ── */
.pk-lib-stat { text-align: center; margin-bottom: 34px; }
.pk-lib-stat .big { font-size: 60px; font-weight: 800; letter-spacing: -0.03em; color: var(--pk-primary-text); line-height: 1; }
.pk-lib-stat .big small { font-size: 26px; }
.pk-lib-stat .cap { font-size: 15px; color: var(--pk-gray); margin-top: 10px; }
.pk-chips { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.pk-chip { font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 999px; background: var(--pk-surface); border: 1px solid var(--pk-line); color: var(--pk-ink-2); cursor: pointer; -webkit-transition: all .18s ease; transition: all .18s ease; }
.pk-chip:hover { border-color: var(--pk-primary); color: var(--pk-primary-text); }
.pk-chip.on { background: var(--pk-primary); color: #fff; border-color: var(--pk-primary); }
.pk-chip.on:hover { color: #fff; }
/* minmax(0,1fr) — 1fr 기본 최소값(min-content)이 칼럼을 못 줄여 좁은 폭에서 카드가 그리드 밖으로 넘쳐(오른쪽 박스 잘림) → 0으로 줄일 수 있게 */
.pk-cat-grid { display: -ms-grid; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.pk-cat { min-width: 0; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius-sm); padding: 24px 22px; -webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1); }
.pk-cat:hover { box-shadow: var(--pk-shadow); -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: rgba(107,123,255,0.45); }
.pk-cat.special { background: -webkit-linear-gradient(135deg, var(--pk-primary), #9A7BFF); background: linear-gradient(135deg, var(--pk-primary), #9A7BFF); color: #fff; border: 0; }
.pk-cat .top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-bottom: 14px; }
.pk-cat .top .name { font-size: 16px; font-weight: 800; }
.pk-cat .top .cnt { font-size: 22px; font-weight: 800; color: var(--pk-primary-text); }
.pk-cat.special .top .cnt { color: #fff; }
.pk-cat .top .cnt small { font-size: 12px; }
.pk-cat ul { margin: 0; padding: 0; list-style: none; }
.pk-cat li { font-size: 13px; padding: 4px 0; color: var(--pk-ink-2); }
.pk-cat.special li { color: #fff; opacity: .92; }
.pk-cat li:before { content: '#'; margin-right: 4px; opacity: .55; }

/* ── 요금제 ── */
.pk-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-max-content; width: max-content; margin: 0 auto 14px; padding: 5px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 999px; }
.pk-toggle button { border: 0; background: transparent; cursor: pointer; padding: 11px 30px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--pk-gray); -webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1); }
.pk-toggle button.on { background: var(--pk-primary); color: #fff; box-shadow: 0 4px 14px rgba(107,123,255,0.38); }
.pk-panel { display: none; } .pk-panel.on { display: block; }
.pk-panel-desc { text-align: center; color: var(--pk-gray); font-size: 14px; margin: 4px 0 30px; }
.pk-plan-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 24px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; max-width: var(--pk-maxw-plans); margin-left: auto; margin-right: auto; }
/* 요금제 섹션 요소 공통 폭(환급배너·안내) — 카드 그리드와 좌우 끝을 맞춤 */
.pk-mw-plans { max-width: var(--pk-maxw-plans); margin-left: auto; margin-right: auto; }
.pk-plan { -webkit-box-flex: 1; -ms-flex: 1 1 320px; flex: 1 1 320px; max-width: 380px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); padding: 32px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; -webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1); }
.pk-plan:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: var(--pk-shadow); }
.pk-plan.featured { border: 1.5px solid var(--pk-primary); box-shadow: 0 18px 50px rgba(107,123,255,0.24); }
.pk-plan .ribbon { position: absolute; top: -13px; left: 30px; background: var(--pk-primary); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 14px; border-radius: 999px; }
.pk-plan .ptarget { font-size: 13px; font-weight: 700; color: var(--pk-primary-text); }
.pk-plan .pname { font-size: 24px; font-weight: 800; margin: 4px 0 2px; letter-spacing: -0.02em; color: var(--pk-ink); }
.pk-plan .pscope { font-size: 13px; color: var(--pk-gray); margin-bottom: 18px; }
.pk-plan .pprice { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed var(--pk-line); }
.pk-plan .pprice .list { display: block; font-size: 14px; color: var(--pk-gray-2); text-decoration: line-through; }
.pk-plan .pprice .amt { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--pk-ink); }
.pk-plan .pprice .amt small { font-size: 16px; font-weight: 700; }
/* 1인당 단위(/인) 강조 — 좌석 단가 오해 방지(예: 5좌석=69,000 으로 읽지 않게) */
.pk-plan .pprice .amt .unit { font-style: normal; font-size: 17px; font-weight: 800; color: var(--pk-primary-text); margin-left: 3px; letter-spacing: -0.01em; }
.pk-plan .pprice .pprice-note { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--pk-primary-text); }
.pk-plan .pprice .pprice-note .ico { width: 14px; height: 14px; -ms-flex-negative: 0; flex-shrink: 0; }
.pk-plan .pprice .amt.custom { color: var(--pk-primary-text); }
.pk-plan ul { margin: 0 0 24px; padding: 0; list-style: none; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.pk-plan ul li { font-size: 14px; color: var(--pk-ink-2); padding: 7px 0 7px 26px; position: relative; }
.pk-plan ul li:before { content: '✓'; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--pk-primary-soft); color: var(--pk-primary-text); font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; }
.pk-plan .pcta { display: block; text-align: center; height: 52px; line-height: 52px; border-radius: 999px; font-size: 15px; font-weight: 700; background: var(--pk-primary-soft); color: var(--pk-primary-text); -webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1); }
.pk-plan .pcta:hover { background: var(--pk-primary); color: #fff; }
.pk-plan.featured .pcta { background: var(--pk-primary); color: #fff; }
.pk-plan.featured .pcta:hover { background: #7E8DFF; }
/* ── PREMIUM tease 카드 — 부가서비스를 살짝 가려 문의 유도 ── */
.pk-plan.tease .pdesc { font-size: 13.5px; line-height: 1.6; color: var(--pk-gray); margin: 2px 0 18px; }
.pk-plan.tease .ptease { position: relative; max-height: 128px; overflow: hidden; }
.pk-plan.tease .ptease ul { margin: 0; }
.pk-plan.tease .ptease::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; pointer-events: none;
    background: -webkit-linear-gradient(top, rgba(74,86,112,0), var(--pk-surface) 88%);
    background: linear-gradient(to bottom, rgba(74,86,112,0), var(--pk-surface) 88%);
}
.pk-plan.tease .ptease-cap { font-size: 13px; font-weight: 700; color: var(--pk-primary-text); margin: auto 0 22px; }
/* strong 강조색 — 라이트/다크 모두 보이도록 토큰화(흰 카드에서 #fff 흰글씨가 안 보이던 버그 수정) */
.pk-plan.tease .ptease-cap strong { color: var(--pk-ink); }
/* tease CTA는 솔리드(인디고)로 문의 강조 */
.pk-plan .pcta.solid { background: var(--pk-primary); color: #fff; }
.pk-plan .pcta.solid:hover { background: #7E8DFF; }

.pk-refund { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; max-width: var(--pk-maxw-plans); margin: 0 auto 32px; padding: 16px 22px; background: var(--pk-surface); border: 1px solid rgba(47,203,135,0.42); border-radius: var(--pk-radius-sm); }
.pk-refund .ic { -ms-flex-negative: 0; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(47,203,135,0.18); color: var(--pk-green); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 18px; font-weight: 800; }
.pk-refund .bd { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 16px; line-height: 1.6; color: var(--pk-ink-2); }
.pk-refund .bd strong { color: var(--pk-ink); }
.pk-refund .go { font-size: 16px; font-weight: 800; color: var(--pk-primary-text); white-space: nowrap; }
/* 모바일: 본문 글씨가 좁게 눌리지 않게 — 'CTA(환급 과정 문의 →)'를 본문 아래 줄로 내림 */
@media (max-width: 600px){
    .pk-refund { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; padding: 16px 18px; }
    .pk-refund .go { -ms-flex-preferred-size: 100%; flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--pk-line); }
}

/* ── 통계 (인디고 그라데이션 밴드) ── */
.pk-stats { background: -webkit-linear-gradient(135deg, #2A3360, #5667F0); background: linear-gradient(135deg, #2A3360, #5667F0); color: #fff; }
.pk-stats .pk-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 56px 24px; }
.pk-stat { -webkit-box-flex: 1; -ms-flex: 1 1 25%; flex: 1 1 25%; text-align: center; }
.pk-stat .n { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.pk-stat .n small { font-size: 22px; }
.pk-stat .l { font-size: 14px; opacity: .85; margin-top: 8px; }

/* ── 후기 ── */
.pk-quote-grid { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 22px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.pk-quote { -webkit-box-flex: 1; -ms-flex: 1 1 300px; flex: 1 1 300px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); padding: 28px 26px; }
.pk-quote .stars { color: var(--pk-yellow); font-size: 15px; margin-bottom: 12px; letter-spacing: 2px; }
.pk-quote blockquote { margin: 0 0 18px; padding: 0; border: 0; font-size: 15px; line-height: 1.7; color: var(--pk-ink-2); }
.pk-quote .who { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 11px; }
.pk-quote .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--pk-primary-soft); color: var(--pk-primary-text); font-weight: 800; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.pk-quote .who .nm { font-size: 14px; font-weight: 800; color: var(--pk-ink); } .pk-quote .who .og { font-size: 12px; color: var(--pk-gray-2); }

/* ── FAQ ── */
.pk-faq { max-width: 820px; margin: 0 auto; }
.pk-faq-item { background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius-sm); margin-bottom: 12px; overflow: hidden; }
.pk-faq-item.open { border-color: rgba(107,123,255,0.5); box-shadow: var(--pk-shadow); }
.pk-faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 24px; font-size: 16px; font-weight: 700; color: var(--pk-ink); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 14px; }
.pk-faq-q .tg { -ms-flex-negative: 0; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--pk-primary-soft); color: var(--pk-primary-text); font-size: 18px; line-height: 26px; text-align: center; -webkit-transition: -webkit-transform .5s cubic-bezier(.76,0,.24,1), background .3s ease, color .3s ease; transition: transform .5s cubic-bezier(.76,0,.24,1), background .3s ease, color .3s ease; }
.pk-faq-item.open .pk-faq-q .tg { -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--pk-primary); color: #fff; }
/* 부드러운 자동 높이 — grid-template-rows 0fr→1fr.
   easeInOutQuart(시작·끝 느리게)로 차분하게 가속/감속 → 고급스러운 펼침. */
.pk-faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.76,0,.24,1), opacity .42s cubic-bezier(.76,0,.24,1); }
.pk-faq-item.open .pk-faq-a { grid-template-rows: 1fr; opacity: 1; }
.pk-faq-a > p { overflow: hidden; min-height: 0; margin: 0; padding: 0 24px 22px; font-size: 15px; line-height: 1.7; color: var(--pk-gray); }

/* ── 최종 CTA (인디고 그라데이션 밴드) ── */
.pk-cta { text-align: center; background: -webkit-linear-gradient(135deg, #222B52 0%, #4456E0 100%); background: linear-gradient(135deg, #222B52 0%, #4456E0 100%); color: #fff; padding: 92px 0; }
.pk-cta h2 { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 14px; }
.pk-cta p { font-size: 18px; opacity: .9; margin: 0 0 30px; }
.pk-cta .pk-hero-cta { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

/* ── 푸터 ── */
.pk-footer { background: #232B3A; color: #C4C9D6; padding: 52px 0 40px; border-top: 1px solid var(--pk-line); }
.pk-footer .top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 24px; }
.pk-footer .flogo { font-size: 19px; font-weight: 800; color: #fff; }
.pk-footer .flinks { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 22px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.pk-footer .flinks a { font-size: 14px; color: #C4C9D6; } .pk-footer .flinks a:hover { color: #fff; }
.pk-footer .finfo { font-size: 13px; line-height: 1.8; color: #8990A3; }
.pk-footer .fcopy { font-size: 12px; color: #6A7187; margin-top: 16px; }

/* ══════════════════════════════════
   애니메이션 (모던 · 절제)
══════════════════════════════════ */
/* stagger: 자식들이 시차 페이드업 */
.pk .stagger > * {
    opacity: 0; -webkit-transform: translateY(22px); transform: translateY(22px);
    -webkit-transition: opacity .6s cubic-bezier(.76,0,.24,1), -webkit-transform .6s cubic-bezier(.76,0,.24,1);
    transition: opacity .6s cubic-bezier(.76,0,.24,1), transform .6s cubic-bezier(.76,0,.24,1);
}
.pk .stagger.in > * { opacity: 1; -webkit-transform: none; transform: none; }
.pk .stagger.in > *:nth-child(1){ -webkit-transition-delay:.05s; transition-delay:.05s; }
.pk .stagger.in > *:nth-child(2){ -webkit-transition-delay:.12s; transition-delay:.12s; }
.pk .stagger.in > *:nth-child(3){ -webkit-transition-delay:.19s; transition-delay:.19s; }
.pk .stagger.in > *:nth-child(4){ -webkit-transition-delay:.26s; transition-delay:.26s; }
.pk .stagger.in > *:nth-child(5){ -webkit-transition-delay:.33s; transition-delay:.33s; }
.pk .stagger.in > *:nth-child(6){ -webkit-transition-delay:.40s; transition-delay:.40s; }
.pk .stagger.in > *:nth-child(7){ -webkit-transition-delay:.47s; transition-delay:.47s; }
.pk .stagger.in > *:nth-child(8){ -webkit-transition-delay:.54s; transition-delay:.54s; }

/* 히어로 목업 둥실 플로트 + 칩 보빙 */
@-webkit-keyframes pk-floaty { 0%,100%{ -webkit-transform: translateY(0);} 50%{ -webkit-transform: translateY(-12px);} }
@keyframes pk-floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
@-webkit-keyframes pk-bob { 0%,100%{ -webkit-transform: translateY(0);} 50%{ -webkit-transform: translateY(-7px);} }
@keyframes pk-bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-7px);} }
.pk-mock { -webkit-animation: pk-floaty 6s ease-in-out infinite; animation: pk-floaty 6s ease-in-out infinite; }
.pk-float.f1 { -webkit-animation: pk-bob 4s ease-in-out infinite; animation: pk-bob 4s ease-in-out infinite; }
.pk-float.f2 { -webkit-animation: pk-bob 4.6s ease-in-out infinite .6s; animation: pk-bob 4.6s ease-in-out infinite .6s; }

/* 무료 체험 배너 은은한 펄스 글로우 */
@-webkit-keyframes pk-pulse { 0%,100%{ box-shadow: 0 8px 26px rgba(255,122,102,0.16);} 50%{ box-shadow: 0 10px 30px rgba(255,122,102,0.40);} }
@keyframes pk-pulse { 0%,100%{ box-shadow: 0 8px 26px rgba(255,122,102,0.16);} 50%{ box-shadow: 0 10px 30px rgba(255,122,102,0.40);} }
.pk-hero-event { -webkit-animation: pk-pulse 2.4s ease-in-out infinite; animation: pk-pulse 2.4s ease-in-out infinite; }
.pk-hero-event:hover { -webkit-animation: none; animation: none; }

/* 모션 최소화 선호 시 모두 정지 */
@media (prefers-reduced-motion: reduce) {
    .pk .reveal, .pk .stagger > * { opacity: 1 !important; -webkit-transform: none !important; transform: none !important; -webkit-transition: none !important; transition: none !important; }
    .pk-mock, .pk-float.f1, .pk-float.f2, .pk-hero-event { -webkit-animation: none !important; animation: none !important; }
    .pk-mock-row .info .bar i { -webkit-transition: none !important; transition: none !important; }
    .pk-faq-a, .pk-faq-q .tg { -webkit-transition: none !important; transition: none !important; }
}

/* ── 반응형 ── */
@media (max-width: 991px) {
    .pk-nav, .pk-header-util .login { display: none; }
    .pk-burger { display: block; }
    .pk-hero .pk-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 48px; padding-top: 48px; padding-bottom: 64px; }
    .pk-hero-copy, .pk-hero-visual { -ms-flex: 1 1 100%; flex: 1 1 100%; }
    .pk-hero-visual { max-width: 460px; width: 100%; margin: 0 auto; }
    .pk-hero h1 { font-size: 38px; }
    .pk-cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pk-stat { -ms-flex: 1 1 50%; flex: 1 1 50%; margin-bottom: 20px; }
}
@media (max-width: 600px) {
    .pk-sec { padding: 60px 0; }
    .pk-hero h1 { font-size: 31px; }
    .pk-hero-sub { font-size: 16px; }
    .pk-sec-head h2 { font-size: 30px; }
    .pk-lib-stat .big { font-size: 46px; }
    .pk-float { display: none; }
    .pk-cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
    /* 좁은 카드에서 '이름+개수'가 한 줄에 안 들어가 개수(개)가 잘리던 문제 → 세로로 쌓고 폰트/패딩 축소 */
    .pk-cat { padding: 18px 16px; }
    .pk-cat .top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 2px; margin-bottom: 12px; }
    .pk-cat .top .name { font-size: 15px; }
    .pk-cat .top .cnt { font-size: 19px; }
    .pk-cat li { font-size: 12.5px; }
}

/* ══════════════════════════════════
   .pk-light (intro3) — 본문 섹션만 라이트 톤.
   헤더·히어로는 다크 토큰 재선언으로 그대로 유지. 푸터·CTA·통계는 리터럴이라 자동 다크 유지.
══════════════════════════════════ */
.pk.pk-light {
    /* 2026-06-23 모던 리프레시 — 푸른끼 회색 → 거의 흰색 뉴트럴, 그림자/보더 더 은은하게 */
    --pk-page:         #F6F7FB;   /* 본문 배경: 거의 흰색에 가까운 라이트 뉴트럴 */
    --pk-surface:      #FFFFFF;
    --pk-surface-2:    #F2F4F8;
    --pk-bg:           #EEF1F6;
    --pk-track:        #ECEFF4;
    --pk-ink:          #14171F;   /* 더 또렷한 본문 잉크 */
    --pk-ink-2:        #4A5260;
    --pk-gray:         #6A7282;
    --pk-gray-2:       #9AA1AE;
    --pk-line:         rgba(18,28,55,0.08);   /* 더 은은한 보더 */
    --pk-primary-text: #3D5AFE;
    --pk-primary-soft: rgba(61,90,254,0.08);
    --pk-primary-soft2:#EDF1FE;
    --pk-amber-ink:    #B5760A;
    --pk-radius:       20px;
    --pk-radius-sm:    14px;
    --pk-shadow:       0 4px 16px rgba(20,30,70,0.06);          /* 카드 기본 — 가볍게 */
    --pk-shadow-lg:    0 18px 50px rgba(20,30,70,0.12);
    background: var(--pk-page); color: var(--pk-ink);
}
.pk-light .pk-header,
.pk-light .pk-hero {
    --pk-page:         #3A4458;
    --pk-surface:      #4A5670;
    --pk-surface-2:    #58647F;
    --pk-bg:           #313B4D;
    --pk-track:        #535F78;
    --pk-ink:          #F3F5F9;
    --pk-ink-2:        #D6DBE4;
    --pk-gray:         #B0B7C5;
    --pk-gray-2:       #8B93A4;
    --pk-line:         rgba(255,255,255,0.14);
    --pk-primary-text: #BCC6FF;
    --pk-primary-soft: rgba(107,123,255,0.18);
    --pk-primary-soft2:#3A4672;
    --pk-shadow:       0 14px 44px rgba(0,0,0,0.40);
    --pk-shadow-lg:    0 26px 70px rgba(0,0,0,0.52);
}

/* ══════════════════════════════════
   다크 모드 (data-theme=dark) — 사용자단 전용.
   라이트 본문 토큰(.pk-light)을 딥 슬레이트 다크로 재정의.
   색은 전부 var(--pk-*) 토큰이라 카드·표·폼·배지가 자동으로 다크 반영된다.
   헤더·히어로(.pk-light .pk-header/.pk-hero)는 기존 슬레이트 유지 → 딥다크 본문 위 앱바처럼 보임.
══════════════════════════════════ */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

html[data-theme="dark"] .pk.pk-light {
    --pk-page:         #1A2130;   /* 본문 배경 — 살짝 연한 슬레이트(눈에 편하게) */
    --pk-surface:      #26303F;   /* 카드 surface — 배경보다 또렷이 밝게(카드 입체) */
    --pk-surface-2:    #313C4D;   /* hover / elevated */
    --pk-bg:           #151B27;   /* soft 섹션 — 배경보다 살짝 어둡게(은은한 밴딩) */
    --pk-track:        #3A4557;   /* 진행바 트랙 */
    --pk-ink:          #F0F2F7;   /* 본문 잉크 (밝게) */
    --pk-ink-2:        #C9CFDA;
    --pk-gray:         #A2AAB8;
    --pk-gray-2:       #838C9B;
    --pk-line:         rgba(255,255,255,0.18);   /* 테두리·구분선 — 다크에서 또렷하게 */
    --pk-primary-text: #AEB9FF;   /* 다크 위 인디고 액센트 */
    --pk-primary-soft: rgba(107,123,255,0.22);
    --pk-primary-soft2:#2C3654;
    --pk-amber-ink:    #FFC974;
    --pk-radius:       20px;
    --pk-radius-sm:    14px;
    --pk-shadow:       0 8px 26px rgba(0,0,0,0.42);
    --pk-shadow-lg:    0 22px 60px rgba(0,0,0,0.56);
    background: var(--pk-page);
    color: var(--pk-ink);
}
/* 카드 박스는 일반 구분선보다 한 단계 더 또렷한 테두리로(특히 모바일 가독) */
html[data-theme="dark"] .pk.pk-light .pk-card,
html[data-theme="dark"] .pk.pk-light .content-card { border-color: rgba(255,255,255,0.22); }