/* =====================================================================
   LINKONFIT 메인/이용방법 페이지 전용 디자인 시스템 (v2, 2026-08-29 전면 개편)
   style.css(전 페이지 공용)와 함께 로드됨 — 로그인 상태 토글(.nav-menu,
   .hamburger, #loginBtn/#userInfo/#userName)과 푸터(.footer-*, 사업자 정보 등)는
   기존 style.css 것을 그대로 재사용하고, 그 외 이 페이지 전용 컴포넌트만 여기서 정의.
   원본: outputs/개발자-전달용-링크온핏-공란시안-v2/02-반응형-소스/style.css
   ===================================================================== */
:root {
  --ink:#0b1830; --muted:#63728a; --line:#d7dfeb; --blue:#195bd7;
  --sky:#29b7e8; --cream:#f6f0e7; --paper:#fffdf9; --navy:#0c1e3a;
  --mint:#dff4ef; --peach:#f8e6d7; --v2-radius:28px; --v2-shadow:0 18px 50px rgba(20,45,85,.08);
}
.v2-page { color: var(--ink); font-family: Pretendard, "Noto Sans KR", Arial, sans-serif; background: var(--paper); line-height: 1.55; }
.v2-page .wrap { width: min(1180px, calc(100% - 48px)); margin: auto; }
.v2-page .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; }
.v2-page .muted { color: var(--muted); }
/* 데스크톱에서는 한 줄, 좁은 화면에서만 줄바꿈을 넣고 싶을 때 쓰는 헬퍼(예: owner-head 제목) */
.v2-page br.mobile-break { display: none; }

/* ── 헤더(새 디자인 톤 + 기존 로그인/결제상품/이용약관 링크 병합) ── */
.v2-page header.v2-header {
    position: sticky; top: 0; z-index: 900;
    background: #fffdf9;
    border-bottom: 1px solid rgba(215,223,235,.8);
    padding: 0;
}
.v2-page .v2-nav { height: 76px; display: flex; align-items: center; gap: 34px; }
.v2-page .v2-brand { display: flex; align-items: center; margin-right: auto; }
.v2-page .v2-brand img { height: 34px; width: auto; display: block; }
.v2-page .v2-navlinks { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 700; }
.v2-page .v2-navlinks a:hover { color: var(--blue); }
.v2-page .v2-nav-actions { display: flex; align-items: center; gap: 14px; }
.v2-page .v2-admin-link { font-size: 13px; font-weight: 700; color: var(--muted); }
.v2-page .v2-admin-link:hover { color: var(--ink); }
.v2-page .nav-cta, .v2-page .btn {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-weight: 800; cursor: pointer; border: none;
    font-family: inherit;
}
.v2-page .nav-cta { padding: 11px 18px; background: var(--ink); color: #fff; font-size: 13px; }
.v2-page .btn { padding: 15px 24px; background: var(--blue); color: #fff; font-size: 15px; }
.v2-page .btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.v2-page .v2-user-info { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.v2-page .v2-user-info button { background: none; border: none; color: var(--muted); font-weight: 700; cursor: pointer; font-size: 13px; }

/* 모바일 드롭다운 메뉴 — style.css의 .nav-menu/.hamburger 토글 로직을 그대로 쓰되,
   이 페이지에서는 라이트 테마 색으로 다시 정의(캐스케이드상 이 파일이 나중에 로드되어 우선 적용) */
.v2-page .hamburger span { background: var(--ink); }
.v2-page .nav-menu {
    background: #fffdf9;
    border-bottom: 1px solid var(--line);
}
.v2-page .nav-menu a:not(.nav-cta), .v2-page .nav-menu .v2-admin-link { color: var(--ink) !important; }

.v2-page .slot {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 160px; border: 1.5px dashed #aab9cc; border-radius: 24px;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.9) 14px, rgba(232,238,246,.5) 14px, rgba(232,238,246,.5) 15px);
    overflow: hidden;
}
.v2-page .slot::before {
    content: attr(data-slot); position: absolute; left: 16px; top: 14px;
    padding: 5px 9px; border-radius: 999px; background: #edf3fb; color: #50627b;
    font-size: 10px; font-weight: 900; letter-spacing: .08em;
}
.v2-page .slot span { text-align: center; color: #7b899b; font-size: 12px; font-weight: 700; }
.v2-page .slot small { display: block; margin-top: 4px; font-weight: 500; }
.v2-page .slot.slot-filled { border: none; background: #fff; }
.v2-page .slot.slot-filled::before { display: none; }
.v2-page .slot-filled img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }

.v2-page .hero {
    padding: 160px 0 140px;
    background:
        linear-gradient(100deg, rgba(9,20,40,.95) 0%, rgba(9,20,40,.88) 34%, rgba(9,20,40,.5) 60%, rgba(9,20,40,.12) 82%),
        url('/image/main_img.png') center right / cover no-repeat;
}
.v2-page .hero-copy { max-width: 620px; }
.v2-page .hero .eyebrow { color: var(--sky); }
.v2-page .hero h1 { font-size: clamp(50px, 5vw, 76px); line-height: 1.04; letter-spacing: -.055em; margin: 18px 0 26px; max-width: 660px; color: #fff; }
.v2-page .hero p { font-size: 20px; color: rgba(255,255,255,.82); max-width: 560px; margin: 0 0 34px; }
.v2-page .hero-actions { display: flex; gap: 12px; }

.v2-page section { padding: 104px 0; }
.v2-page .section-head { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 48px; }
.v2-page .section-head h2 { font-size: clamp(20px, 6.4vw, 46px); line-height: 1.13; letter-spacing: -.045em; margin: 10px 0 0; max-width: 700px; }
.v2-page .section-head p { max-width: 400px; margin: 0; color: var(--muted); }

.v2-page .market { background: #fff; }
.v2-page .market-head { margin-bottom: 48px; }
.v2-page .market-head h2 { font-size: clamp(20px, 6.4vw, 40px); line-height: 1.25; letter-spacing: -.03em; margin: 0 0 16px; }
.v2-page .market-dash { display: block; width: 32px; height: 4px; border-radius: 2px; background: var(--blue); }

.v2-page .market-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v2-page .market-panel {
    padding: 32px 28px; border-radius: var(--v2-radius); background: var(--paper);
    box-shadow: var(--v2-shadow); text-align: center;
}
.v2-page .market-panel b { display: block; font-size: 34px; color: var(--blue); letter-spacing: -.03em; margin-bottom: 10px; }
.v2-page .market-panel p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.v2-page .market-divider { width: 100%; height: 1px; background: var(--line); margin: 24px 0; }

.v2-page .donut-chart {
    width: 112px; height: 112px; margin: 0 auto; border-radius: 50%; position: relative;
    background: conic-gradient(var(--blue) calc(var(--pct) * 1%), var(--line) 0);
    display: flex; align-items: center; justify-content: center;
}
.v2-page .donut-chart::before { content: ''; position: absolute; inset: 12px; background: var(--paper); border-radius: 50%; }
.v2-page .donut-chart span { position: relative; font-weight: 800; font-size: 19px; color: var(--ink); }

.v2-page .mini-linechart { width: 100%; height: 80px; overflow: visible; }
.v2-page .mini-linechart polyline { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v2-page .mini-linechart circle { fill: var(--blue); }

.v2-page .mini-barchart { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 80px; padding: 0 6px; }
.v2-page .mini-barchart .bar { flex: 1; max-width: 30px; border-radius: 5px 5px 0 0; background: var(--line); }
.v2-page .mini-barchart .bar-active { background: var(--blue); }

.v2-page .chart-labels { display: flex; justify-content: space-between; margin-top: 10px; }
.v2-page .chart-labels span { font-size: 11px; color: var(--muted); }

.v2-page .market-source { margin: 24px 0 0; text-align: right; font-size: 12px; color: var(--muted); }

.v2-page .problem { background: var(--cream); }
.v2-page .cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.v2-page .cycle-step { position: relative; padding: 28px 24px; border-radius: 24px; background: #fff; box-shadow: var(--v2-shadow); }
.v2-page .cycle-step:not(:last-child)::after {
    content: "→"; position: absolute; right: -18px; top: 50%; z-index: 2;
    width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff;
    text-align: center; line-height: 23px; font-weight: 900;
}
.v2-page .cycle-step i { font-style: normal; font-size: 12px; font-weight: 900; color: var(--blue); }
.v2-page .cycle-step strong { display: block; font-size: 20px; margin-top: 14px; }
.v2-page .problem-note { margin-top: 24px; padding: 20px 24px; border-left: 4px solid var(--blue); background: rgba(255,255,255,.55); font-weight: 700; }

.v2-page .service-intro { text-align: center; }
.v2-page .service-intro h2 { font-size: clamp(20px, 6.4vw, 48px); letter-spacing: -.045em; margin: 10px auto 14px; max-width: 850px; }
.v2-page .service-intro p { color: var(--muted); }
.v2-page .wellness-orbit { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.v2-page .wellness-card { padding: 28px 22px; border-radius: 26px; text-align: left; border: 1px solid var(--line); background: #fff; }
.v2-page .wellness-card:nth-child(1) { background: #eaf2ff; }
.v2-page .wellness-card:nth-child(2) { background: var(--mint); }
.v2-page .wellness-card:nth-child(3) { background: var(--peach); }
.v2-page .wellness-card:nth-child(4) { background: #f1eafd; }
.v2-page .wellness-card b { display: block; font-size: 19px; margin-top: 30px; }
.v2-page .wellness-card span { font-size: 13px; color: var(--muted); }
.v2-page .wellness-shot {
    margin-top: 18px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 20px rgba(20,45,85,.08);
}
.v2-page .wellness-shot img { width: 100%; height: auto; display: block; }

.v2-page .screens { background: #f5f8fc; }
.v2-page .screen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.v2-page .screen-card { padding: 18px; border-radius: 30px; background: #fff; border: 1px solid var(--line); }
.v2-page .screen-slot { min-height: 390px; border-radius: 22px; }
.v2-page .screen-card h3 { margin: 20px 4px 4px; }
.v2-page .screen-card p { font-size: 13px; color: var(--muted); margin: 0 4px 8px; }

.v2-page .owner { background: linear-gradient(145deg, #0a1a33, #122e53); color: #fff; }

.v2-page .owner-head { max-width: 640px; margin-bottom: 48px; }
.v2-page .owner-badge {
    display: inline-block; padding: 7px 16px; border-radius: 999px;
    background: rgba(41,183,232,.15); color: #7fd4f2;
    font-size: 12px; font-weight: 800; letter-spacing: .08em; margin-bottom: 18px;
}
.v2-page .owner-head h2 { font-size: clamp(20px, 6.4vw, 42px); line-height: 1.2; letter-spacing: -.03em; margin: 0 0 16px; }
.v2-page .owner-head h2 em { font-style: normal; color: var(--sky); }
.v2-page .owner-head p { color: #b9c7da; font-size: 17px; margin: 0; }

.v2-page .owner-flow-wrap { margin-bottom: 44px; }
.v2-page .owner-eyebrow {
    font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #7fd4f2; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 28px;
}
.v2-page .owner-flow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.v2-page .flow-step { text-align: center; }
.v2-page .flow-circle {
    width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; color: #cbd8ea;
}
.v2-page .flow-step.active .flow-circle { background: var(--blue); border-color: var(--blue); color: #fff; }
.v2-page .flow-step b { display: block; font-size: 14px; margin-bottom: 4px; }
.v2-page .flow-step small { display: block; color: #8fa0ba; font-size: 12px; }
.v2-page .flow-arrow { color: #4a86c4; font-size: 16px; }

.v2-page .owner-revenue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
.v2-page .revenue-card { padding: 30px 28px; border-radius: 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.v2-page .revenue-icon {
    width: 44px; height: 44px; border-radius: 12px; background: rgba(41,183,232,.15);
    display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px;
}
.v2-page .revenue-icon-num { font-weight: 900; color: var(--sky); font-size: 16px; }
.v2-page .revenue-tag { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #7fd4f2; margin-bottom: 8px; }
.v2-page .revenue-card h3 { font-size: 24px; margin: 0 0 18px; }
.v2-page .revenue-divider { width: 32px; height: 3px; border-radius: 2px; background: var(--sky); margin-bottom: 18px; }
.v2-page .revenue-card p { color: #c2cee0; font-size: 14px; line-height: 1.6; }
.v2-page .revenue-card p strong { display: block; color: #fff; font-size: 16px; margin-bottom: 8px; }

.v2-page .owner-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 20px 28px; border-radius: 16px; background: rgba(41,183,232,.1);
}
.v2-page .owner-banner span:first-child { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; }
.v2-page .owner-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 6px; }
.v2-page .owner-banner-tag { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #7fd4f2; }

.v2-page .admin-slot {
    min-height: 420px;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 14px, rgba(255,255,255,.1) 14px, rgba(255,255,255,.1) 15px);
    border-color: #61748e;
}
.v2-page .admin-slot span { color: #c6d2e1; }

.v2-page .v2-cta { background: var(--cream); text-align: center; }
.v2-page .v2-cta h2 { font-size: clamp(20px, 6.4vw, 48px); letter-spacing: -.045em; margin: 10px 0; }
.v2-page .v2-cta p { color: var(--muted); margin-bottom: 30px; }

/* ── how-to (이용 방법) 전용 ── */
.v2-page .how-hero { padding: 72px 0 54px; background: linear-gradient(180deg, #eef5ff, #fffdf9); }
.v2-page .how-hero h1 { font-size: clamp(20px, 6.4vw, 58px); letter-spacing: -.05em; margin: 12px 0 14px; }
.v2-page .role-nav { position: sticky; top: 76px; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.v2-page .role-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 0; gap: 10px; }
.v2-page .role-tabs a { padding: 14px; border-radius: 14px; text-align: center; font-weight: 800; background: #f4f6f9; }
.v2-page .role-tabs a:nth-child(1) { color: #185bd7; background: #eaf2ff; }
.v2-page .role-tabs a:nth-child(2) { color: #08766a; background: #e3f5ef; }
.v2-page .role-tabs a:nth-child(3) { color: #95500d; background: #fbebdc; }
.v2-page .role { padding: 90px 0; }
.v2-page .role.member { background: #f6f9ff; }
.v2-page .role.staff { background: #f1faf7; }
.v2-page .role.owner-role { background: #fff8f0; }
.v2-page .role-title { display: grid; grid-template-columns: 170px 1fr; gap: 38px; align-items: start; margin-bottom: 42px; }
.v2-page .role-badge { padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.v2-page .role-badge small { display: block; font-weight: 900; letter-spacing: .12em; color: var(--blue); }
.v2-page .role-badge b { font-size: 32px; }
.v2-page .role-title h2 { font-size: clamp(20px, 6.4vw, 42px); margin: 0 0 10px; letter-spacing: -.04em; }
.v2-page .role-title p { margin: 0; color: var(--muted); }
.v2-page .v2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v2-page .v2-step { padding: 22px; border-radius: 28px; background: #fff; border: 1px solid rgba(160,180,205,.45); }
.v2-page .v2-step-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.v2-page .v2-step-num { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 12px; font-weight: 900; }
.v2-page .staff .v2-step-num { background: #168977; }
.v2-page .owner-role .v2-step-num { background: #b86b24; }
.v2-page .v2-step h3 { margin: 0; font-size: 19px; }
.v2-page .v2-step .slot { min-height: 320px; }
.v2-page .v2-step p { font-size: 13px; color: var(--muted); }
.v2-page .owner-panel { display: grid; grid-template-columns: .75fr 1.25fr; gap: 22px; }
.v2-page .owner-flow { padding: 30px; border-radius: 28px; background: #fff; }
.v2-page .owner-flow div { padding: 16px; border-bottom: 1px solid var(--line); font-weight: 800; }
.v2-page .owner-flow div:last-child { border: 0; }
.v2-page .owner-flow small { display: block; color: var(--muted); font-weight: 500; }
.v2-page .owner-role .admin-slot { background: repeating-linear-gradient(135deg, #fff, #fff 14px, #f3eadf 14px, #f3eadf 15px); border-color: #c5ad95; }
.v2-page .owner-role .admin-slot span { color: #846b54; }
/* 관리자 대시보드 캡처(1846×852)가 기존 고정 min-height(420px)보다 가로로 훨씬 넓은 비율이라
   contain을 쓰면 위아래 여백이 남고, cover를 쓰면 양옆 사이드바/카드 내용이 크게 잘렸음 —
   박스 자체를 이미지와 같은 비율로 맞춰서(aspect-ratio) 어느 화면 폭에서도 잘림·여백 없이
   꽉 채워지도록 함. */
.v2-page .owner-role .admin-slot.slot-filled {
    background: #fff;
    border-color: var(--line);
    min-height: 0;
    aspect-ratio: 1846 / 852;
}

@media (max-width: 980px) {
    /* .v2-navlinks가 곧 .nav-menu(모바일 드롭다운, main.js가 hamburger 클릭 시 .open을
       토글)라서 여기서 무조건 display:none을 걸면 안 되고, .open이 아닐 때만 숨겨야 함.
       .v2-nav-actions는 .v2-navlinks 안에 중첩돼 있어 부모가 숨겨지면 같이 숨겨지므로
       별도 규칙 불필요 — 부모에 종속되게 둬서 열렸을 때 로그인 버튼도 함께 보이게 함. */
    .v2-page .v2-navlinks:not(.open) { display: none; }
    .v2-page .v2-navlinks.open {
        display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
        position: absolute; top: 100%; left: 0; right: 0;
        padding: 1.5rem 22px; background: #fffdf9; border-bottom: 1px solid var(--line);
    }
    .v2-page .v2-navlinks.open .v2-nav-actions { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .v2-page .market-panels, .v2-page .owner-panel { grid-template-columns: 1fr; }
    .v2-page .screen-grid, .v2-page .wellness-orbit { grid-template-columns: repeat(2, 1fr); }
    .v2-page .cycle { grid-template-columns: repeat(2, 1fr); }
    .v2-page .cycle-step:nth-child(2)::after { display: none; }
    .v2-page .owner-flow-steps { grid-template-columns: 1fr 1fr; row-gap: 24px; }
    .v2-page .flow-arrow { display: none; }
    .v2-page .owner-revenue-grid { grid-template-columns: 1fr; }
    .v2-page .v2-steps { grid-template-columns: 1fr 1fr; }
    .v2-page .role-title { grid-template-columns: 1fr; }
    .v2-page .role-badge { max-width: 180px; }
    .v2-page .hamburger { display: flex; }
}

@media (max-width: 767px) {
    .v2-page br.mobile-break { display: inline; }
    .v2-page .wrap { width: calc(100% - 44px); }
    .v2-page .v2-nav { height: 66px; }
    .v2-page .v2-brand img { height: 28px; }
    .v2-page .nav-cta { padding: 9px 14px; }
    .v2-page .hero {
        padding: 56px 0 58px;
        /* 앱모드(모바일 폭)에서는 배경 이미지를 완전히 빼고 텍스트만 보이도록 함 */
        background: linear-gradient(135deg, #10233f 0%, #0c1e3a 100%);
    }
    .v2-page .hero h1 { font-size: 44px; }
    .v2-page .hero p { font-size: 17px; }
    .v2-page .hero-actions { flex-direction: column; align-items: stretch; }
    .v2-page section { padding: 72px 0; }
    .v2-page .section-head { display: block; }
    .v2-page .section-head p { margin-top: 16px; }
    .v2-page .market-panels { gap: 16px; }
    .v2-page .screen-grid, .v2-page .wellness-orbit, .v2-page .cycle, .v2-page .v2-steps { grid-template-columns: 1fr; }
    .v2-page .cycle-step::after { display: none !important; }
    .v2-page .owner-flow-steps { grid-template-columns: 1fr; }
    .v2-page .owner-banner { flex-direction: column; align-items: flex-start; }
    .v2-page .screen-slot { min-height: 340px; }
    .v2-page .how-hero { padding: 52px 0 40px; }
    .v2-page .role-nav { top: 66px; }
    .v2-page .role-tabs a { font-size: 13px; padding: 12px 5px; }
    .v2-page .role { padding: 66px 0; }
    .v2-page .v2-step .slot { min-height: 300px; }
}

/* =====================================================================
   결제상품 페이지 (products.html, 2026-08-29 v2 테마 적용)
   기존 다크네온 카드 → v2 라이트 톤. 기능(구독 상태 버튼 전환, 결제 이동,
   로그인/구독중 모달)은 그대로, 색과 카드 스타일만 교체.
   ===================================================================== */
.v2-page .products-hero { text-align: center; padding: 64px 0 8px; }
.v2-page .products-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.03em; line-height: 1.3; margin-bottom: 14px; }
.v2-page .products-hero p { font-size: 15px; color: var(--muted); }
.v2-page .products-hero p strong { color: var(--ink); }

.v2-page .plans-section { padding: 40px 0 64px; }
.v2-page .plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.v2-page .plan-card {
    border-radius: 26px; padding: 32px 26px; position: relative;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--v2-shadow);
}
/* 라이트핏 */
.v2-page .plan-light { border-color: rgba(41,183,232,.4); }
.v2-page .plan-light .plan-name, .v2-page .plan-light .price-amount { color: var(--sky); }
.v2-page .badge-light { background: rgba(41,183,232,.14); color: #1481a3; }
.v2-page .icon-light, .v2-page .feat-icon.icon-light { background: rgba(41,183,232,.14); color: #1481a3; }
/* 레귤러핏 — "가장 인기" 강조 카드 */
.v2-page .plan-regular { background: var(--navy); border-color: var(--navy); color: #fff; transform: scale(1.03); }
.v2-page .plan-regular .plan-name, .v2-page .plan-regular .price-amount { color: #66d0ee; }
.v2-page .plan-regular .plan-sub { color: #b9c7da; }
.v2-page .plan-regular .plan-divider { background: rgba(255,255,255,.14); }
.v2-page .plan-regular .plan-features li { color: #dbe7f6; }
.v2-page .badge-regular { background: rgba(255,255,255,.14); color: #66d0ee; }
.v2-page .icon-regular, .v2-page .feat-icon.icon-regular { background: rgba(255,255,255,.12); color: #66d0ee; }
.v2-page .price-unit { color: var(--muted); }
.v2-page .plan-regular .price-unit { color: #9fb0c6; }
/* 인텐시브핏 */
.v2-page .plan-intensive { border-color: rgba(11,24,48,.25); }
.v2-page .plan-intensive .plan-name, .v2-page .plan-intensive .price-amount { color: var(--ink); }
.v2-page .badge-intensive { background: var(--peach); color: #95500d; }
.v2-page .icon-intensive, .v2-page .feat-icon.icon-intensive { background: var(--peach); color: #95500d; }

.v2-page .plan-badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 5px 14px; border-radius: 999px; margin-bottom: 20px; width: fit-content; }
.v2-page .plan-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.v2-page .plan-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.v2-page .plan-name { font-size: 21px; font-weight: 900; margin-bottom: 3px; }
.v2-page .plan-sub { font-size: 13px; color: var(--muted); }
.v2-page .plan-price { margin-bottom: 20px; }
.v2-page .price-amount { font-size: 36px; font-weight: 900; line-height: 1; }
.v2-page .plan-divider { height: 1px; background: var(--line); margin-bottom: 20px; }
.v2-page .plan-features { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; flex: 1; padding: 0; }
.v2-page .plan-features li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); }
.v2-page .feat-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; font-size: 14px; flex-shrink: 0; }
.v2-page .plan-btn {
    width: 100%; padding: 15px; border: none; border-radius: 999px; font-family: inherit;
    font-size: 15px; font-weight: 800; cursor: pointer; transition: opacity .2s, transform .2s; margin-top: auto;
}
.v2-page .plan-btn:hover { opacity: .88; transform: translateY(-2px); }
.v2-page .btn-light { background: var(--sky); color: #fff; }
.v2-page .btn-regular { background: var(--blue); color: #fff; }
.v2-page .btn-intensive { background: var(--ink); color: #fff; }
.v2-page .plan-btn.btn-current-sub { background: rgba(34,197,94,.1); border: 1.5px solid rgba(34,197,94,.4); color: #159049; cursor: not-allowed; }
.v2-page .plan-regular .plan-btn.btn-current-sub { background: rgba(34,197,94,.18); color: #6ee7a8; border-color: rgba(110,231,168,.4); }
.v2-page .plan-btn.btn-lower-sub { background: rgba(11,24,48,.05); border: 1px solid var(--line); color: #a3aebd; cursor: not-allowed; }
.v2-page .plan-btn.btn-upgrade { box-shadow: 0 0 18px rgba(25,91,215,.25); }
.v2-page .plan-btn.btn-current-sub:hover, .v2-page .plan-btn.btn-lower-sub:hover { opacity: 1; transform: none; }

.v2-page .singles-section { max-width: 720px; margin: 0 auto; padding: 0 0 72px; }
.v2-page .singles-title { font-size: 22px; font-weight: 900; margin-bottom: 18px; }
.v2-page .singles-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.v2-page .single-card { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px 26px; transition: border-color .2s; }
.v2-page .single-card:hover { border-color: var(--blue); }
.v2-page .single-icon-wrap { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v2-page .single-icon { font-size: 24px; }
.v2-page .single-info { flex: 1; min-width: 0; }
.v2-page .single-name { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.v2-page .single-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 6px; }
.v2-page .single-validity { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.v2-page .single-price { font-size: 15px; font-weight: 800; color: var(--ink); }
.v2-page .single-btn { padding: 10px 20px; border: none; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 800; color: #fff; cursor: pointer; flex-shrink: 0; transition: opacity .2s; }
.v2-page .single-btn:hover { opacity: .85; }
.v2-page .vat-note { font-size: 13px; color: var(--muted); text-align: center; }

.v2-page .purchase-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(11,24,48,.45); backdrop-filter: blur(4px); z-index: 2000; align-items: center; justify-content: center; }
.v2-page .purchase-modal-overlay.active { display: flex; }
.v2-page .purchase-modal { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 40px 32px; max-width: 360px; width: 90%; text-align: center; box-shadow: var(--v2-shadow); }
.v2-page .purchase-modal-icon { font-size: 40px; margin-bottom: 16px; }
.v2-page .purchase-modal-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.v2-page .purchase-modal-desc { font-size: 14px; color: var(--muted); margin-bottom: 28px; line-height: 1.6; }
.v2-page .purchase-modal-actions { display: flex; flex-direction: column; gap: 12px; }
.v2-page .purchase-modal-btn { width: 100%; padding: 14px; border: none; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: opacity .2s; }
.v2-page .purchase-modal-btn:hover { opacity: .85; }
.v2-page .btn-login { background: var(--blue); color: #fff; }
.v2-page .btn-cancel { background: rgba(11,24,48,.06); color: var(--muted); }
.v2-page .subscribed-plan-badge { display: inline-block; background: rgba(34,197,94,.12); border: 1.5px solid rgba(34,197,94,.4); color: #159049; font-size: 15px; font-weight: 900; padding: 7px 22px; border-radius: 999px; margin: 0 auto 18px; }

@media (max-width: 900px) {
    .v2-page .plans-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .v2-page .plan-regular { transform: none; }
}

/* =====================================================================
   약관/정책 페이지 (terms.html, 2026-08-29 v2 테마 적용)
   본문(법적 조항)은 그대로 두고 색/카드 스타일만 교체.
   ===================================================================== */
.v2-page .terms-hero { padding: 96px 0 40px; background: linear-gradient(180deg, #eef5ff, var(--paper)); text-align: center; }
.v2-page .terms-hero-content { max-width: 640px; margin: 0 auto; }
.v2-page .terms-hero-title { font-size: clamp(30px, 4vw, 44px); font-weight: 900; letter-spacing: -.03em; margin: 14px 0 12px; }
.v2-page .terms-hero-desc { font-size: 15px; color: var(--muted); line-height: 1.7; }
.v2-page .terms-layout { background: var(--paper); padding: 56px 0 88px; }
.v2-page .terms-container { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: start; }
.v2-page .terms-sidebar { position: sticky; top: 96px; }
.v2-page .terms-nav { display: flex; flex-direction: column; gap: 6px; }
.v2-page .terms-nav-item {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px;
    background: transparent; border: 1px solid transparent; border-radius: 18px;
    color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: left; transition: all .2s;
}
.v2-page .terms-nav-item:hover { background: #fff; border-color: var(--line); color: var(--ink); }
.v2-page .terms-nav-item.active { background: #eaf2ff; border-color: rgba(25,91,215,.3); color: var(--ink); }
.v2-page .terms-nav-num { font-size: 15px; font-weight: 900; color: var(--blue); opacity: .55; flex-shrink: 0; }
.v2-page .terms-nav-item.active .terms-nav-num { opacity: 1; }
.v2-page .terms-nav-label { font-weight: 700; }
.v2-page .terms-content { min-height: 60vh; }
.v2-page .terms-section { display: none; }
.v2-page .terms-section.active { display: block; }
.v2-page .terms-section-header { margin-bottom: 40px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.v2-page .terms-section-num { font-size: 46px; font-weight: 900; color: var(--blue); opacity: .18; line-height: 1; display: block; margin-bottom: 6px; }
.v2-page .terms-section-title { font-size: 26px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 6px; }
.v2-page .terms-section-date { font-size: 13px; color: var(--muted); }
.v2-page .terms-body { display: flex; flex-direction: column; gap: 34px; }
.v2-page .terms-article { padding-bottom: 34px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.v2-page .terms-article:last-child { border-bottom: none; padding-bottom: 0; }
.v2-page .terms-article-title { font-size: 15px; font-weight: 800; color: var(--blue); margin-bottom: 14px; }
.v2-page .terms-article p { font-size: 14px; color: var(--muted); line-height: 1.85; margin-bottom: 10px; }
.v2-page .terms-article p:last-child { margin-bottom: 0; }
.v2-page .terms-list { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.v2-page .terms-list li { font-size: 14px; color: var(--muted); line-height: 1.7; padding-left: 16px; position: relative; }
.v2-page .terms-list li::before { content: '–'; position: absolute; left: 0; color: var(--blue); }
.v2-page .terms-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.v2-page .terms-table th, .v2-page .terms-table td { padding: 11px 16px; border: 1px solid var(--line); text-align: left; line-height: 1.6; vertical-align: top; }
.v2-page .terms-table tbody th { background: #f4f8fd; color: var(--ink); font-weight: 700; white-space: nowrap; width: 28%; }
.v2-page .terms-table thead th { background: var(--blue); color: #fff; font-weight: 800; text-align: center; }
.v2-page .terms-table td { color: var(--muted); }
.v2-page .terms-note { background: #eaf2ff; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; padding: 16px 20px; margin-top: 14px; font-size: 13px; color: var(--ink); line-height: 1.8; }
.v2-page .terms-note--lead { margin-top: 0; margin-bottom: 32px; }
.v2-page .terms-sub { margin-top: 18px; }
.v2-page .terms-sub-title { font-size: 14px !important; font-weight: 800 !important; color: var(--ink) !important; margin-bottom: 4px !important; }
.v2-page .terms-highlight { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
    .v2-page .terms-container { grid-template-columns: 1fr; }
    .v2-page .terms-sidebar { position: static; }
    .v2-page .terms-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .v2-page .terms-nav-item { flex: 1; min-width: 140px; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
}
@media (max-width: 600px) {
    .v2-page .terms-nav-item { min-width: calc(50% - 4px); }
}