/* ============================================================
   BTS Membership
   Public landing styles: design tokens, reused graciasvc header,
   hero, plans, EID, benefits, steps. Mobile-first.
   ============================================================ */

/* ---- design tokens (mirrors graciasvc) ---- */
:root {
  --color-white-rgb: 255, 255, 255;
  --color-primary-rgb: 16, 16, 16;
  --text-primary: #101010;
  --bg: #ffffff;
  --bg-alt: #faf7f8;
  --fg: #111111;
  --fg-soft: #6b6b6b;
  --line: #e6e6e6;
  --line-strong: #111111;
  --accent: #111111;
  --brand: rgb(240, 25, 65);
  --font-family-teko: 'Teko', 'Pretendard', sans-serif;
  --header-height: 120px;
  --maxw: 1440px;
  --pad: 1.25rem;
}

/* ---- alternative (dark) color mode ---- */
[data-theme="dark"] {
  --text-primary: #f5f5f5;
  --bg: #121212;
  --bg-alt: #1a1a1a;
  --fg: #e8e8e8;
  --fg-soft: #9a9a9a;
  --line: #2c2c2c;
  --line-strong: #f5f5f5;
  --accent: #f5f5f5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }

.container { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--pad); }

/* =================== HEADER (mirrors graciasvc menu label/button style) =================== */
.Header_header {
  position: sticky; top: 0; z-index: 1000;
  background: transparent;
  min-height: var(--header-height);
  transition: background .2s ease, transform .3s ease;
}
.Header_header.menu-open { background: var(--bg); border-bottom: 1px solid var(--line); }
.Header_header.hide { transform: translateY(-100%); }
.Header_container {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: .625rem var(--pad);
  position: relative;
}
.Header_logo img { height: 100px; width: auto; }
/* logo color swap by theme */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: inline; }

/* theme toggle in footer */
.Footer_theme {
  display: inline-flex; align-items: center; gap: .5rem; background: none; border: 1px solid rgba(255,255,255,.4);
  color: #fff; border-radius: 2px; padding: .4rem .8rem; cursor: pointer; margin-top: .25rem;
  font-family: var(--font-family-teko); font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase;
}
.Footer_theme::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1px solid var(--brand); }
.Header_menu__item--theme .Header_menu__btn { display: flex; align-items: center; gap: .5rem; }
.Header_menu__item--theme .Header_menu__btn::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--text-primary); border: 1px solid var(--brand); flex: 0 0 auto;
}
.Header_menu__item--theme .Header_menu__btn span { color: var(--brand); }

/* desktop nav */
.Header_nav { display: none; }
.Header_menu { display: flex; gap: 1.4rem; align-items: center; }
.Header_menu__item { position: relative; }
.Header_menu__btn {
  display: none; /* mobile: button only */
  font-family: var(--font-family-teko); font-size: 1.5rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-primary); background: none; border: none; padding: 0;
}
.Header_menu__link {
  font-family: var(--font-family-teko); font-size: 1.4rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-primary);
}
.Header_sub-menu {
  position: absolute; top: 100%; left: 0; background: var(--bg);
  border: 1px solid var(--line); border-top: 2px solid var(--brand);
  min-width: 200px; padding: .5rem 0; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 50;
}
.Header_menu__item:hover .Header_sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.Header_sub-menu__item a {
  display: block; padding: .6rem 1.25rem; font-family: var(--font-family-teko);
  font-size: 1.1rem; text-transform: uppercase; color: var(--text-primary);
}
.Header_sub-menu__item a:hover { background: rgba(240,25,65,.08); }

/* MENU / CLOSE buttons (mobile) */
.Header_btn-menu {
  display: inline-flex; align-items: center; background: none; border: none;
  font-family: var(--font-family-teko); font-size: 1.4rem; letter-spacing: .05em; color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.Header_header.menu-open .Header_btn-menu { text-shadow: none; }
.Header_logo img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.Header_header.menu-open .Header_logo img { filter: none; }
.Header_btn-menu span { border-bottom: 2px solid var(--text-primary); }
.Header_btn-close {
  display: none; background: none; border: none; color: var(--text-primary);
  font-family: var(--font-family-teko); font-size: 1.4rem; letter-spacing: .05em; margin-bottom: 1rem;
}

/* mobile full-screen drawer */
.Header_drawer {
  position: fixed; inset: var(--header-height) 0 0 0; background: var(--bg);
  transform: translateX(100%); transition: transform .25s ease; z-index: 999; padding: 2rem var(--pad);
  overflow-y: auto;
}
.Header_drawer.open { transform: translateX(0); }
.Header_drawer .Header_menu__item { border-bottom: 1px solid var(--line); }
.Header_drawer .Header_menu__btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: .85rem 0;
  font-size: 2rem; background: none; border: none; color: var(--text-primary);
}
.drawer-acc-chev { font-family: var(--font-family-teko); color: var(--brand); font-size: 1.8rem; line-height: 1; }
.Header_drawer .Header_menu__link { display: none; }
.Header_drawer .Header_sub-menu {
  position: static; opacity: 1; visibility: visible; transform: none;
  border: none; padding: 0 0 0 1rem; max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.Header_drawer .Header_sub-menu.open { max-height: 400px; }
.Header_drawer .Header_sub-menu__item {
  display: block; font-family: var(--font-family-teko); font-size: 1.3rem; text-transform: uppercase;
  color: var(--fg-soft); padding: .55rem 0; letter-spacing: .03em;
}
.Header_drawer .Header_sub-menu__item:hover { color: var(--brand); }

@media (min-width: 900px) {
  .Header_nav { display: block; }
  .Header_btn-menu { display: none; }
  .Header_drawer { display: none; }
  .Header_menu__link { display: inline; }
  .Header_menu__btn { display: none; }
}

/* =================== PAGE =================== */
main { display: block; }
.section { padding: 3.5rem 0; border-bottom: 1px solid var(--line); }
.section:last-of-type { border-bottom: none; }
.section--alt { background: var(--bg-alt); }
.section-eyebrow {
  font-family: var(--font-family-teko); font-size: 1.4rem; color: var(--brand);
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .5rem;
}
.section-title {
  font-family: var(--font-family-teko); font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 4.5rem); line-height: .95; text-transform: uppercase;
  margin: 0 0 1.5rem; color: var(--text-primary);
}
.lead { font-size: 1.05rem; line-height: 1.6; color: var(--fg); max-width: 60ch; }
.note { color: var(--fg-soft); font-size: .95rem; margin-top: .75rem; }

/* HERO */
.hero { background: linear-gradient(160deg, #141414 0%, #1d1d1d 100%); color: #fff; padding: 5rem 0 4rem; text-align: center; }
.hero-eyebrow { font-family: var(--font-family-teko); font-size: 1.4rem; letter-spacing: .12em; color: var(--brand); text-transform: uppercase; margin: 0 0 1rem; }
.hero-title { font-family: var(--font-family-teko); font-weight: 400; font-size: clamp(2.8rem, 9vw, 5.5rem); line-height: .95; text-transform: uppercase; margin: 0 0 1.25rem; }
.hero-sub { max-width: 52ch; margin: 0 auto 2rem; font-size: 1.1rem; line-height: 1.6; color: #d8d8d8; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* buttons / links */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem;
  background: var(--text-primary); color: #fff; padding: .85rem 1.5rem;
  font-family: var(--font-family-teko); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em;
  border: none; border-radius: 2px; text-decoration: none;
}
.btn--brand { background: var(--brand); }
.btn--ghost { background: transparent; border: 1px solid #fff; color: #fff; }
.btn--lg { padding: 1rem 2rem; font-size: 1.35rem; }

/* BENEFITS accordion */
.benefits-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }
.benefit-item { border: 1px solid var(--line); border-radius: 4px; background: var(--bg); overflow: hidden; }
.benefit-head {
  width: 100%; display: flex; align-items: center; gap: .75rem; text-align: left;
  background: none; border: none; cursor: pointer; padding: 1rem 1.1rem; color: var(--text-primary);
}
.benefit-title { font-family: var(--font-family-teko); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; flex: 0 0 auto; }
.benefit-sum { flex: 1 1 auto; color: var(--fg-soft); font-size: .95rem; }
.benefit-chevron { flex: 0 0 auto; font-family: var(--font-family-teko); font-size: 1.6rem; color: var(--brand); transition: transform .2s ease; line-height: 1; }
.benefit-item.open .benefit-chevron { transform: rotate(45deg); }
.benefit-detail { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.benefit-detail p { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--fg); line-height: 1.6; }
.benefit-item.open .benefit-detail { max-height: 400px; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }
.faq-item { border: 1px solid var(--line); border-radius: 4px; background: var(--bg); overflow: hidden; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; background: none; border: none; cursor: pointer; padding: 1rem 1.1rem; color: var(--text-primary); font-family: var(--font-family-teko); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; }
.faq-chev { flex: 0 0 auto; font-family: var(--font-family-teko); font-size: 1.6rem; color: var(--brand); transition: transform .2s ease; line-height: 1; }
.faq-item.open .faq-chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-a p { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--fg); line-height: 1.6; }
.faq-item.open .faq-a { max-height: 400px; }

/* PLANS */
.plans { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
.plan-card { border: 1px solid var(--line); border-radius: 6px; padding: 2rem 1.75rem; background: var(--bg); }
.plan-card--feature { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.plan-flag { font-family: var(--font-family-teko); letter-spacing: .05em; text-transform: uppercase; color: var(--brand); margin: 0 0 .5rem; font-size: 1.1rem; }
.plan-card h3 { font-family: var(--font-family-teko); font-size: 2.4rem; text-transform: uppercase; margin: 0 0 .25rem; }
.plan-price { font-family: var(--font-family-teko); font-size: 3rem; color: var(--brand); margin: 0; }
.plan-price span { font-size: 1.1rem; color: var(--fg-soft); }
.plan-tag { color: var(--fg-soft); margin: .25rem 0 1rem; }
.plan-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.plan-list li { padding: .5rem 0; border-top: 1px solid var(--line); color: var(--fg); }
.plan-list li:first-child { border-top: none; }

/* EID */
.eid-wrap { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; align-items: center; perspective: 1200px; }
/* flip card */
.eid-flip { position: relative; width: 100%; max-width: 360px; height: 300px; cursor: pointer; transition: transform .2s ease; transform-style: preserve-3d; }
.eid-flip:hover { transform: translateY(-4px); }
.eid-flip.flipped { transform: rotateY(180deg); }
.eid-flip:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.eid-card { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(150deg, rgba(8,8,10,.78), rgba(20,8,12,.82)), url("/images/eid-bg.png") center/cover no-repeat; color: #fff; border-radius: 10px; padding: 1.75rem; border: 1px solid rgba(240,25,65,.45); box-shadow: 0 10px 30px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.eid-back { transform: rotateY(180deg); }
.eid-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.eid-logo { height: 38px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.eid-brand { font-family: var(--font-family-teko); font-size: 2.2rem; color: var(--brand); letter-spacing: .05em; }
.eid-label { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; text-align: right; max-width: 55%; }
.eid-name { font-family: var(--font-family-teko); font-size: 1.8rem; letter-spacing: .05em; margin: 1.2rem 0 .8rem; }
.eid-row { display: flex; justify-content: space-between; font-size: .85rem; padding: .4rem 0; border-top: 1px solid rgba(255,255,255,.15); }
.eid-row span:first-child { opacity: .6; text-transform: uppercase; letter-spacing: .05em; }
.eid-val { font-weight: 600; }
.eid-bars { display: flex; gap: .35rem; margin-top: auto; }
.eid-bars span { height: 6px; flex: 1; background: rgba(255,255,255,.25); border-radius: 2px; }
.eid-flip-hint { margin-top: 1rem; align-self: flex-start; background: rgba(240,25,65,.15); border: 1px solid rgba(240,25,65,.5); color: #fff; font-family: var(--font-family-teko); font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 3px; cursor: pointer; }
/* passport */
.passport { display: flex; gap: 1rem; margin-top: .5rem; }
.passport-photo { width: 78px; height: 96px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); font-size: .7rem; letter-spacing: .1em; opacity: .8; }
.passport-fields { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.passport-row { display: flex; justify-content: space-between; font-size: .8rem; padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.passport-row span:first-child { opacity: .6; text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }
.eid-points { list-style: none; padding: 0; margin: 1rem 0 0; }
.eid-points li { padding: .4rem 0 .4rem 1.2rem; position: relative; color: var(--fg); border-top: 1px solid var(--line); }
.eid-points li:first-child { border-top: none; }
.eid-points li::before { content: "›"; position: absolute; left: 0; color: var(--brand); }

/* STEPS */
.steps { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.step { border: 1px solid var(--line); border-radius: 4px; padding: 1.5rem; background: var(--bg); }
.step-num { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--font-family-teko); font-size: 1.4rem; margin-bottom: 1rem; }
.step h3 { font-family: var(--font-family-teko); font-size: 1.5rem; text-transform: uppercase; margin: 0 0 .35rem; }
.step p { margin: 0; color: var(--fg-soft); line-height: 1.55; }

/* APPLY form */
.apply-form { max-width: 520px; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: flex; flex-direction: column; gap: .35rem; }
.form-row label { font-family: var(--font-family-teko); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-primary); }
.form-row input, .form-row select, .form-row textarea {
  font-family: inherit; font-size: 1rem; padding: .7rem .8rem; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--text-primary); border-radius: 3px; width: 100%;
}
.form-row textarea { resize: vertical; }
.form-error { color: var(--brand); font-size: .95rem; margin: 0; }
.form-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--fg); line-height: 1.5; }
.form-check input { width: 18px; height: 18px; margin-top: .2rem; flex: 0 0 auto; }
.form-check a { color: var(--brand); }
.apply-form .btn { align-self: flex-start; }

/* FOOTER */
.footer { background: #101010; color: #f2f2f2; padding: 3rem 0; margin-top: auto; }
.footer .container { display: flex; flex-direction: column; gap: 1rem; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.footer-brand img { height: 110px; width: auto; }
.footer-brand span { font-family: var(--font-family-teko); font-size: 2.6rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: #f2f2f2; opacity: .85; font-family: var(--font-family-teko); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.footer-links a:hover { opacity: 1; color: var(--brand); }
.footer-copy { font-size: .85rem; opacity: .5; margin: 0; }

/* COOKIE POLICY */
.cookie-policy { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
.cookie-cat { border: 1px solid var(--line); border-radius: 6px; padding: 1.25rem; background: var(--bg-alt); }
.cookie-cat h3 { font-family: var(--font-family-teko); font-size: 1.5rem; text-transform: uppercase; margin: 0 0 .5rem; color: var(--brand); }
.cookie-cat p { margin: 0; color: var(--fg-soft); line-height: 1.6; }

/* CONSENT BANNER */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; background: #101010; color: #f2f2f2; padding: 1rem var(--pad); box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
.consent-banner.hidden { display: none; }
.consent-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.consent-text { margin: 0; font-size: .95rem; line-height: 1.5; opacity: .9; }
.consent-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn--ghost-dark { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; }
.consent-banner .btn { padding: .6rem 1.1rem; font-size: 1.1rem; }

/* CONSENT MANAGE PANEL */
.consent-manage { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: var(--pad); }
.consent-manage[hidden] { display: none; }
.consent-manage-inner { background: var(--bg); color: var(--text-primary); border-radius: 8px; padding: 1.5rem; max-width: 420px; width: 100%; border: 1px solid var(--line); }
.consent-manage-inner h3 { font-family: var(--font-family-teko); font-size: 1.6rem; text-transform: uppercase; margin: 0 0 1rem; }
.consent-toggle { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; font-size: .95rem; }
.consent-toggle input { width: 18px; height: 18px; }
.consent-toggle span { opacity: .6; font-size: .8rem; }
.consent-manage .consent-actions { margin-top: 1rem; }

/* CONSENT TICKER */
.consent-ticker { position: fixed; right: 14px; bottom: 14px; z-index: 1500; background: var(--brand); color: #fff; border: none; border-radius: 999px; padding: .55rem .9rem; font-family: var(--font-family-teko); font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.consent-ticker:hover { filter: brightness(1.08); }

/* desktop layout */
@media (min-width: 760px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(5, 1fr); }
  .eid-wrap { grid-template-columns: 360px 1fr; }
}
@media (min-width: 900px) {
  .Header_nav { display: block; }
  .Header_btn-menu { display: none; }
  .Header_drawer { display: none; }
  .Header_menu__link { display: inline; }
  .Header_menu__btn { display: none; }
}