/* Seoul Ventures — site-wide responsive chrome.
 * Imports tokens.css separately; this file is layout + chrome + components. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text-primary);
}

/* Full-width modern layout — chrome stretches edge-to-edge,
 * content stays within 1240px via responsive --px. */
.page {
  width: 100%;
  margin: 0 auto;
  background: var(--color-bg);
}

/* Responsive section padding — clamps to 20–80px on small screens,
 * grows on wide screens so inner content caps at 1240px. */
:root { --px: max(clamp(20px, 5vw, 80px), calc((100vw - 1240px) / 2)); }
section, footer, .hdr, .famBar { padding-left: var(--px); padding-right: var(--px); }

/* ───────── Top family bar ───────── */
.famBar {
  background: var(--color-dark);
  padding-top: 10px; padding-bottom: 10px;
  display: flex; justify-content: center; align-items: center;
  overflow-x: auto;
  position: sticky; top: 0; z-index: 50;
}
.famBar nav {
  display: flex; gap: clamp(10px, 2vw, 24px); align-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  white-space: nowrap;
}
.famBar a { color: var(--color-text-tertiary); text-decoration: none; }
.famBar a:hover { color: var(--color-bg); }
.famBar a.active { color: var(--color-bg); font-weight: 800; }
.famBar .sep { color: var(--color-dark-muted); }

/* ───────── Header ───────── */
.hdr {
  padding-top: 20px; padding-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky; top: 38px; z-index: 49;
}
.hdrLogo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; color: inherit; gap: 4px; }
.hdrLogo .ko { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 2.4vw, 22px); letter-spacing: -0.02em; }
.hdrLogo .en { font-family: var(--font-display); font-weight: 600; font-size: 10px; color: var(--color-text-secondary); letter-spacing: 0.14em; }
.hdrLogo.mcp { flex-direction: row; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 24px); letter-spacing: -0.02em; }
.hdrLogo.mcp .accent { color: var(--color-accent); }

.hdrNav { display: flex; gap: clamp(16px, 2.5vw, 32px); }
.hdrNav a {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--color-text-primary); text-decoration: none;
}
.hdrNav a:hover { color: var(--color-accent); }
.hdrNav a.active { color: var(--color-accent); font-weight: 800; }

/* Mobile menu toggle */
.menuBtn {
  display: none; background: none; border: 1px solid var(--color-border);
  border-radius: 999px; padding: 8px 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  cursor: pointer;
}
.hdrNav a { white-space: nowrap; }

/* ───────── Sections ───────── */
section { padding-top: clamp(60px, 9vw, 100px); padding-bottom: clamp(60px, 9vw, 100px); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--color-text-secondary); letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.sectionTitle {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.15; letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.sectionLead {
  font-family: var(--font-body); font-size: clamp(15px, 1.6vw, 17px);
  color: var(--color-text-secondary); max-width: 780px;
  line-height: 1.7; margin: 0;
}

/* ───────── Hero ───────── */
.hero { padding-top: clamp(60px, 8vw, 96px); padding-bottom: clamp(60px, 8vw, 88px); }
.heroBadge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--color-accent-soft); color: var(--color-accent);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  margin-bottom: 24px;
}
.heroTitle {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 5.6vw, 56px);
  line-height: 1.12; letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.heroSub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.7; color: var(--color-text-secondary);
  white-space: pre-line; margin: 0 0 32px; max-width: 820px;
}
.heroCtas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.heroMeta { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--color-text-tertiary); }

/* ───────── Final CTA ───────── */
.fcSec { background: var(--color-dark); color: var(--color-text-on-dark); text-align: center; }
.fcSec .eyebrow { color: var(--color-text-tertiary); }
.fcTitle {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 5vw, 48px); line-height: 1.2; letter-spacing: -0.03em;
  color: var(--color-text-on-dark); max-width: 900px; margin: 0 auto 16px;
  white-space: pre-line;
}
.fcSub { font-size: clamp(14px, 1.6vw, 17px); color: var(--color-text-tertiary); margin: 0 0 32px; }
.fcCtaRow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ───────── Footer ───────── */
footer { padding-top: 72px; padding-bottom: 32px; background: var(--color-bg); border-top: 1px solid var(--color-border); }
.footerTop { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.fbrand .lg { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; }
.fbrand .lg .accent { color: var(--color-accent); }
.fbrand .en { font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--color-text-secondary); letter-spacing: 0.14em; margin-top: 6px; }
.fbrand p { font-family: var(--font-body); font-size: 13px; color: var(--color-text-secondary); margin: 16px 0 0; line-height: 1.65; white-space: pre-line; }
.fcol h5 { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; margin: 0 0 14px; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fcol a { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; }
.fcol a:hover { color: var(--color-text-primary); }
.footerDivider { height: 1px; background: var(--color-border); }
.footerBottom { padding-top: 24px; font-family: var(--font-body); font-size: 12px; color: var(--color-text-tertiary); line-height: 1.8; }
.footerBottom .copy { margin-top: 12px; font-weight: 600; }

/* Short product footer (used on product pages) */
.pfTop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.pfLogo { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; }
.pfLogo .accent { color: var(--color-accent); }
.pfTag { font-family: var(--font-body); font-size: 13px; color: var(--color-text-secondary); }
.pfDiv { height: 1px; background: var(--color-border); }
.pfBot { padding-top: 20px; font-family: var(--font-body); font-size: 12px; color: var(--color-text-tertiary); line-height: 1.8; }
.pfBot .copy { margin-top: 10px; font-weight: 600; }

/* ───────── Shared components ───────── */
.chipRow { display: flex; flex-wrap: wrap; gap: 8px; }

/* Feature card (generic) */
.feat { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 20px; padding: clamp(20px, 3vw, 32px); }
.feat .step { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--color-accent); letter-spacing: 0.06em; margin-bottom: 12px; }
.feat .t { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.02em; margin: 0 0 6px; }
.feat .s { font-family: var(--font-body); font-size: 14px; color: var(--color-text-secondary); margin: 0 0 20px; white-space: pre-line; }
.feat .vis { background: var(--color-surface); border-radius: 14px; padding: 20px; }

.matchBar { display: flex; align-items: center; gap: 10px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 14px; font-family: var(--font-body); font-size: 14px; font-weight: 500; }
.matchBar .em { font-size: 18px; }
.matchBar .check { color: var(--color-accent); font-weight: 800; }

/* ───────── Button overrides for inline sizing ───────── */
.btn { white-space: nowrap; }

/* ───────── Responsive breakpoints ───────── */
@media (max-width: 1040px) {
  .hdrNav { display: none; }
  .menuBtn { display: inline-flex; }
}
@media (max-width: 900px) {
  .footerTop { grid-template-columns: 1fr 1fr; }
  .fbrand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footerTop { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hdr .btn { display: none; }
}

/* Mobile nav drawer — sits under sticky famBar+hdr */
.mobileNav {
  display: none;
  padding: 16px var(--px) 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.mobileNav.open {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 112px; z-index: 48;
}
.mobileNav a { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-text-primary); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.mobileNav a:last-child { border: 0; }

/* ───────── Corporate header (home/templates) ───────── */
.hdrLogo .co { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 2.4vw, 22px); letter-spacing: -0.02em; }

/* ───────── Template page (press/help/contact/notice/terms/privacy/refund) ───────── */
.tplHero { padding-top: clamp(60px, 8vw, 80px); padding-bottom: clamp(40px, 6vw, 56px); border-bottom: 1px solid var(--color-border); }
.tplEyebrow { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--color-accent); letter-spacing: 0.12em; margin-bottom: 14px; }
.tplTitle { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.8vw, 48px); line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 12px; }
.tplLead { font-family: var(--font-body); font-size: clamp(15px, 1.6vw, 17px); color: var(--color-text-secondary); line-height: 1.7; margin: 0; max-width: 720px; }
.tplBody { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(60px, 9vw, 100px); }

/* Templated article layout */
.tplArticle { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 900px) { .tplArticle { grid-template-columns: 1fr; } }
.tplToc { position: sticky; top: 24px; align-self: start; font-family: var(--font-body); }
.tplToc h4 { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; color: var(--color-text-secondary); margin: 0 0 16px; }
.tplToc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--color-border); padding-left: 14px; }
.tplToc a { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; line-height: 1.5; }
.tplToc a:hover { color: var(--color-text-primary); }
@media (max-width: 900px) { .tplToc { position: static; } }

.tplContent h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.8vw, 28px); letter-spacing: -0.02em; margin: 40px 0 16px; scroll-margin-top: 24px; }
.tplContent h2:first-child { margin-top: 0; }
.tplContent h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 2vw, 19px); margin: 28px 0 12px; letter-spacing: -0.01em; }
.tplContent p, .tplContent li { font-family: var(--font-body); font-size: 15px; line-height: 1.8; color: var(--color-text-primary); }
.tplContent p { margin: 0 0 14px; color: var(--color-text-secondary); }
.tplContent ul, .tplContent ol { margin: 0 0 16px; padding-left: 20px; color: var(--color-text-secondary); }
.tplContent li { margin-bottom: 8px; }
.tplContent strong { color: var(--color-text-primary); font-weight: 700; }
.tplContent a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.tplContent a:hover { text-decoration: underline; }

/* Meta row (for notice/press list items) */
.tplMeta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--color-text-tertiary); letter-spacing: 0.04em; }
.tplMeta .cat { padding: 3px 10px; border-radius: 999px; background: var(--color-surface); color: var(--color-text-primary); }

/* List-style template (press, notice) */
.tplList { display: flex; flex-direction: column; }
.tplList .row { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.tplList .row:first-child { padding-top: 0; }
.tplList .row a { color: var(--color-text-primary); text-decoration: none; display: block; }
.tplList .row a:hover .tt { color: var(--color-accent); }
.tplList .tt { font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 2vw, 20px); letter-spacing: -0.02em; margin: 8px 0 6px; transition: color 120ms ease; }
.tplList .excerpt { font-family: var(--font-body); font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; margin: 0; }
.tplList .date { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--color-text-tertiary); white-space: nowrap; padding-top: 8px; }

/* FAQ/Help accordion */
.helpCats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
@media (max-width: 900px) { .helpCats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .helpCats { grid-template-columns: 1fr; } }
.helpCat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 20px; text-decoration: none; color: inherit; transition: background 120ms ease; }
.helpCat:hover { background: var(--color-bg); }
.helpCat .em { font-size: 22px; margin-bottom: 12px; }
.helpCat .tt { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.helpCat .ct { font-family: var(--font-body); font-size: 13px; color: var(--color-text-secondary); }

.accordion details { border: 1px solid var(--color-border); border-radius: 14px; padding: 18px 22px; margin-bottom: 10px; background: var(--color-bg); }
.accordion summary { list-style: none; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--color-text-secondary); transition: transform 180ms ease; }
.accordion details[open] summary::after { content: "−"; }
.accordion .ans { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--color-border); font-family: var(--font-body); font-size: 14px; line-height: 1.75; color: var(--color-text-secondary); }
.accordion .ans p { margin: 0 0 10px; }
.accordion .ans p:last-child { margin: 0; }

/* Contact form */
.contactGrid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 4vw, 56px); }
@media (max-width: 900px) { .contactGrid { grid-template-columns: 1fr; } }
.contactSide h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin: 0 0 10px; letter-spacing: -0.01em; }
.contactSide p, .contactSide a { font-family: var(--font-body); font-size: 14px; color: var(--color-text-secondary); margin: 0 0 20px; line-height: 1.6; text-decoration: none; display: block; }
.contactSide a:hover { color: var(--color-text-primary); }
.contactForm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.contactForm .fld { display: flex; flex-direction: column; gap: 6px; }
.contactForm .fld.full { grid-column: 1 / -1; }
.contactForm label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.contactForm input, .contactForm select, .contactForm textarea { font-family: var(--font-body); font-size: 14px; border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; background: var(--color-bg); color: var(--color-text-primary); transition: border-color 120ms ease; }
.contactForm input:focus, .contactForm select:focus, .contactForm textarea:focus { outline: none; border-color: var(--color-dark); }
.contactForm input::placeholder, .contactForm textarea::placeholder { color: var(--color-text-tertiary); }
.contactForm textarea { resize: vertical; min-height: 120px; }
.contactForm .submitRow { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 560px) { .contactForm { grid-template-columns: 1fr; } }