/* ══ v2 · 팩 판매 (모듈판매전략_설계서 v2.0) ══════════════════════════ */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pack { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: transform .25s, border-color .25s, box-shadow .25s; }
.pack:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.pack.flag { border-color: var(--token); background: linear-gradient(170deg, rgba(255,196,61,.14), rgba(91,91,214,.08)); box-shadow: 0 20px 60px rgba(255,196,61,.12); }
.pack.layer { border-color: rgba(34,211,238,.5); }
.pack .badge { position: absolute; top: -12px; left: 20px; padding: 4px 10px; border-radius: 999px; background: var(--token); color: #1a1400; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.pack .badge.alt { background: var(--cyan); color: #04202a; }
.pk-top { display: flex; align-items: center; gap: 10px; } .pk-top .em { font-size: 28px; } .pk-top h3 { font-size: 20px; }
.pack .problem { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.4; }
.pack .mods { display: flex; flex-wrap: wrap; gap: 6px; } .pack .mods span { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); color: #d5dbf0; }
.pk-price { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; } .pk-price b { color: #fff; } .pk-price small { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.pk-meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } .pk-meta b { color: #fff; }
.pack .pitch { font-size: 14px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 10px; margin-top: auto; }
.build { display: grid; gap: 10px; margin-top: 18px; } .build div { padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 14px; color: var(--muted); } .build b { display: inline-block; min-width: 56px; color: var(--cyan); }
.seam { padding: 24px; border-radius: var(--radius); background: #0b1020; border: 1px solid rgba(34,211,238,.35); box-shadow: 0 0 40px rgba(34,211,238,.08); }
.seam-h { font-size: 15px; color: var(--cyan); margin-bottom: 14px; } .seam-h b { color: #fff; font-size: 22px; }
.seam ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .seam li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 14px; } .seam li b { color: #fff; } .seam li span { color: #c9d1ea; }
.seam-f { margin-top: 14px; font-size: 13px; color: var(--muted); } .seam-f s { color: var(--bad); }
.ladder-wrap { overflow-x: auto; } .ladder { width: 100%; border-collapse: collapse; font-size: 14px; }
.ladder th, .ladder td { padding: 12px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ladder th:nth-child(-n+3), .ladder td:nth-child(-n+3) { text-align: left; } .ladder th { color: var(--muted); font-size: 12px; font-weight: 600; }
.ladder .ded { color: var(--bad); } .ladder .pay { color: #fff; font-weight: 800; font-size: 15px; } .ladder .save { color: var(--ok); font-weight: 800; }
.calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; margin-top: 40px; padding: 26px; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--line); }
.owned { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .owned.small { grid-template-columns: repeat(2, 1fr); }
.owned label { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; font-size: 13.5px; }
.owned label:has(input:checked) { border-color: var(--violet); background: rgba(139,92,246,.15); } .owned input { accent-color: var(--violet); }
.quote-card { padding: 22px; border-radius: 16px; background: #fff; color: #1f2352; }
.q-title { font-size: 12px; letter-spacing: .1em; color: #6b7395; font-weight: 700; margin-bottom: 10px; }
.q-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e6e8f2; font-size: 14px; color: #4a5170; } .q-row b { color: #1f2352; font-variant-numeric: tabular-nums; text-align: right; }
.q-row.first { background: #fff7e0; margin: 0 -22px; padding: 10px 22px; color: #a3330f; font-weight: 700; } .q-row.first b { color: #a3330f; }
.q-row.total { font-size: 16px; } .q-row.total b { font-size: 20px; color: #5b5bd6; } .q-note { font-size: 12.5px; color: #6b7395; margin-top: 10px; }
.card .quote-card, .card .q-row, .card .q-note, .card .q-title { color: inherit; }
.card #bill-preview .q-row { border-color: var(--line); color: var(--muted); } .card #bill-preview .q-row b { color: #fff; } .card #bill-preview .q-row.first { background: rgba(255,196,61,.1); margin: 0 -26px; padding: 10px 26px; color: var(--token); } .card #bill-preview .q-row.first b { color: var(--token); } .card #bill-preview .q-row.total b { color: var(--cyan); } .card #bill-preview .q-note { color: var(--muted); }
.gov { display: grid; gap: 10px; margin-top: 16px; } .gov div { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 14px; } .gov b { color: #fff; } .gov span { color: var(--muted); } .gov em { font-style: normal; color: var(--token); font-weight: 800; white-space: nowrap; }
.entry { display: grid; gap: 12px; margin-top: 12px; } .entry > div { padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .entry .who { font-size: 12px; letter-spacing: .08em; color: var(--cyan); font-weight: 700; } .entry h3 { font-size: 17px; margin: 6px 0 8px; } .entry p { font-size: 14px; color: var(--muted); }
.problem-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .problem-pick label { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; font-size: 13.5px; }
.problem-pick label b { display: block; color: #fff; line-height: 1.4; } .problem-pick label span { color: var(--muted); font-size: 12.5px; } .problem-pick input { display: none; } .problem-pick label.on { border-color: var(--violet); background: rgba(139,92,246,.15); }
.rep-list { padding-left: 18px; color: var(--muted); font-size: 14px; display: grid; gap: 8px; margin: 0 0 12px; } .rep-list b { color: #fff; }
.rep-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.report { display: grid; gap: 12px; } .rp { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.rp .n { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; }
.rp h3 { font-size: 15px; color: var(--muted); margin-bottom: 8px; letter-spacing: .02em; } .rp .big { font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; color: #fff; line-height: 1.35; }
.cost { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; } .cost div { display: grid; } .cost span { font-size: 12.5px; color: var(--muted); } .cost b { font-size: 26px; font-weight: 800; } .cost b.hi { color: var(--token); }
.qt { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; } .qt td { padding: 8px 0; border-bottom: 1px solid var(--line); } .qt td:first-child { color: var(--muted); width: 38%; } .qt .ded { color: var(--bad); font-weight: 800; }
@media print { .nav, .footer, .rep-bar .btn, .ladder-wrap, .scroll-hint { display: none !important; } body { background: #fff; color: #111; } .rp, .card { border-color: #ddd; background: #fff; } .rp h3, .muted { color: #555; } .rp .big, .cost b, .qt td { color: #111; } .form-page { padding-top: 0; } }

/* ── 홈 v2 ── */
.hero-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.hero-tabs a { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(16,21,42,.6); backdrop-filter: blur(8px); font-size: 13px; color: #d5dbf0; }
.hero-tabs a:hover { border-color: var(--cyan); color: #fff; }
.trace { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: stretch; }
.trace div { position: relative; padding: 16px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: center; font-size: 13.5px; color: #d5dbf0; }
.trace div b { display: block; font-size: 24px; margin-bottom: 4px; } .trace div + div::before { content: "→"; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); color: var(--cyan); font-weight: 800; }
.trace-note { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; } .trace-note div { padding: 12px 16px; border-radius: 12px; font-size: 14px; } .trace-note .bad { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.35); } .trace-note .good { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.35); }
.tiers3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .tier3 { padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); } .tier3 .k { font-size: 12px; letter-spacing: .1em; color: var(--cyan); font-weight: 700; } .tier3 h3 { margin: 8px 0 6px; } .tier3 .pr { font-size: 22px; font-weight: 800; margin: 8px 0; } .tier3 p { font-size: 14px; color: var(--muted); } .tier3.paid { border-color: var(--token); }

/* ── 요금제 카드 선택 ── */
.plan { cursor: pointer; }
.plan.selected { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(34,211,238,.5), 0 24px 60px rgba(34,211,238,.15); transform: translateY(-4px); }
.plan.selected::after { content: "✓ 선택됨"; position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; background: var(--cyan); color: #04202a; }
.plan.hot.selected .badge { display: none; }
.plan-bar { position: sticky; bottom: 14px; z-index: 30; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; background: rgba(16,21,42,.9); border: 1px solid rgba(34,211,238,.4); backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.plan-bar .sel { font-size: 15px; } .plan-bar .sel b { color: var(--cyan); } .plan-bar .sel small { color: var(--muted); margin-left: 8px; }
.plan-bar .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.plan .alt-link { display: block; text-align: center; font-size: 13px; color: var(--cyan); margin-top: 8px; }
@media (max-width: 1100px) { .pack-grid { grid-template-columns: repeat(2, 1fr); } .trace { grid-template-columns: repeat(3, 1fr); } .trace div + div::before { display: none; } }
@media (max-width: 860px) { .pack-grid, .calc, .problem-pick, .owned, .owned.small, .tiers3 { grid-template-columns: 1fr; } .gov div { grid-template-columns: 1fr; } .seam li { grid-template-columns: 1fr; } .trace { grid-template-columns: repeat(2, 1fr); } }

/* ── 언어 메뉴 (게임 픽커와 같은 모양) ── */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; font: 700 13px/1 inherit; cursor: pointer; backdrop-filter: blur(8px); transition: background .15s, border-color .15s; white-space: nowrap; }
.lang-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.lang-btn svg { width: 16px; height: 16px; } .lang-btn svg.chev { width: 11px; height: 11px; transition: transform .18s; } .lang.open .lang-btn svg.chev { transform: rotate(180deg); }
.lang-code { font: 800 10px/1 inherit; letter-spacing: .06em; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.22); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; max-height: min(70vh, 440px); overflow: auto; margin: 0; padding: 6px; list-style: none; background: #fff; color: #1f2352; border-radius: 14px; box-shadow: 0 18px 50px rgba(15,19,40,.35), 0 0 0 1px rgba(91,91,214,.15); z-index: 60; animation: fgLangPop .16s cubic-bezier(.2,.7,.2,1); }
@keyframes fgLangPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.lang-menu li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font: 600 13px/1.3 inherit; color: #1f2352; transition: background .12s; }
.lang-menu li:hover { background: #eef0ff; color: #3b3fb8; } .lang-menu li.on { background: var(--grad); color: #fff; }
.lang-menu li .lang-code { background: rgba(91,91,214,.12); color: #3b3fb8; } .lang-menu li.on .lang-code { background: rgba(255,255,255,.22); color: #fff; }
.lang-menu li i { margin-left: auto; font-style: normal; font-weight: 800; opacity: 0; } .lang-menu li.on i { opacity: 1; }
.lang-menu .head { padding: 6px 10px 8px; font: 700 10.5px/1 inherit; letter-spacing: .1em; color: #8b93ad; text-transform: uppercase; }
.lang-menu .note { padding: 8px 10px 4px; font: 500 11px/1.4 inherit; color: #8b93ad; border-top: 1px solid #eef0f6; margin-top: 4px; }
@media (max-width: 860px) { .lang-btn .lang-name { display: none; } .lang-btn { padding: 8px 8px 8px 10px; } }

/* ── 팩 가격 월/연 ── */
.pk-prices { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.pk-prices .pk-price { margin-top: 0; } .pk-prices .pk-price.yr { font-size: 18px; color: var(--muted); } .pk-prices .pk-price.yr b { color: #d5dbf0; }

/* ── 모듈 목업 모달 ── */
.mock-card { cursor: pointer; } .mock-card .peek { position: absolute; right: 18px; bottom: 16px; font-size: 12px; color: var(--cyan); font-weight: 700; opacity: 0; transition: opacity .2s; } .mock-card:hover .peek { opacity: 1; }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal-veil { position: absolute; inset: 0; background: rgba(5,8,18,.78); backdrop-filter: blur(6px); }
.modal-box { position: relative; width: min(1100px, 100%); max-height: 92vh; overflow: auto; display: grid; grid-template-columns: 1.55fr 1fr; border-radius: 22px; background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 40px 120px rgba(0,0,0,.6); animation: fgLangPop .2s cubic-bezier(.2,.7,.2,1); }
.modal-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(11,15,30,.8); color: #fff; cursor: pointer; font-size: 15px; }
.mm-img { background: #050812; display: grid; place-items: center; padding: 18px; } .mm-img img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.mm-body { padding: 28px 26px; display: grid; align-content: start; gap: 10px; } .mm-body h3 { font-size: 22px; } .mm-body ul { padding-left: 18px; color: #d5dbf0; font-size: 14.5px; display: grid; gap: 6px; margin: 6px 0 10px; }
.mm-cta { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .modal-box { grid-template-columns: 1fr; } .mm-img { padding: 12px; } }

/* ── 언어별 최적화 ── */
body.lang-ja { font-family: "Noto Sans JP", "Pretendard Variable", sans-serif; word-break: normal; line-break: strict; }
body.lang-zh { font-family: "Noto Sans SC", "Pretendard Variable", sans-serif; word-break: normal; }
body.lang-th { font-family: "Noto Sans Thai", "Pretendard Variable", sans-serif; line-height: 1.8; word-break: normal; }
body.lang-th h1, body.lang-th h2, body.lang-th h3 { line-height: 1.4; }
body.lang-vi { font-family: "Noto Sans", "Pretendard Variable", sans-serif; word-break: normal; }
body.lang-ar { font-family: "Noto Sans Arabic", "Pretendard Variable", sans-serif; word-break: normal; letter-spacing: 0; }
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar .eyebrow { letter-spacing: 0; }
body.lang-en, body.lang-de, body.lang-es, body.lang-id, body.lang-vi { word-break: normal; overflow-wrap: break-word; hyphens: auto; }
body.lang-de h1, body.lang-vi h1, body.lang-es h1, body.lang-id h1 { font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -.015em; }
body.lang-de h2, body.lang-vi h2, body.lang-es h2, body.lang-id h2 { font-size: clamp(24px, 3.2vw, 38px); }
body.lang-de .btn, body.lang-vi .btn, body.lang-es .btn, body.lang-id .btn, body.lang-en .btn { white-space: normal; text-align: center; }
body.lang-de .links a, body.lang-es .links a, body.lang-vi .links a, body.lang-id .links a { padding: 8px 9px; font-size: 13.5px; }
body.lang-th .btn.lg, body.lang-ar .btn.lg { padding: 16px 28px; }
[dir="rtl"] .eyebrow::before { order: 2; } [dir="rtl"] .trust span::before { content: "✓ "; }
[dir="rtl"] .nav-in, [dir="rtl"] .links, [dir="rtl"] .nav-cta, [dir="rtl"] .hero-cta, [dir="rtl"] .pk-meta, [dir="rtl"] .q-row { flex-direction: row-reverse; }
[dir="rtl"] .chip.c1 { left: auto; right: 2%; } [dir="rtl"] .chip.c2 { right: auto; left: 0; } [dir="rtl"] .chip.c3 { left: auto; right: 8%; } [dir="rtl"] .chip.c4 { right: auto; left: 10%; }
[dir="rtl"] .lang-menu { right: auto; left: 0; } [dir="rtl"] .plan.selected::after { right: auto; left: 14px; } [dir="rtl"] .card .tag { right: auto; left: 18px; }
[dir="rtl"] .ladder th, [dir="rtl"] .ladder td { text-align: left; } [dir="rtl"] .ladder th:nth-child(-n+3), [dir="rtl"] .ladder td:nth-child(-n+3) { text-align: right; }
[dir="rtl"] .trace div + div::before { content: "←"; left: auto; right: -12px; }
@media (max-width: 860px) { body.lang-de .lang-btn .lang-name, body.lang-es .lang-btn .lang-name { display: none; } }