/* sapor_firebase/public/css/landing.css */
/* Design system: light/dark tokens + base typography + components */

/* ── Tokens: light (default) ── */
:root{
  --bg:#FFFFFF; --surface:#F7F4FF; --surface-2:#EFE9FF;
  --text:#1A1A2E; --text-sub:#7C7C7C; --text-mut:#767676;
  --primary:#8610FF; --on-primary:#FFFFFF; --primary-container:#EDDCFF;
  --accent:#FFFF70; --on-accent:#1A1A2E;
  --outline:#CBC4CF; --shadow:rgba(20,16,40,.10);
  --hero-bg:#FFFFFF;
  --font-display:'TheJamsil','NotoSansKR',sans-serif;
  --font-body:'NotoSansKR',sans-serif;
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px;
  --container:1200px;
}

/* ── Tokens: dark (system preference, unless overridden to light) ── */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#1A1A2E; --surface:#221F3A; --surface-2:#2D1B69;
  --text:#FFFFFF; --text-sub:#CBC4CF; --text-mut:#958E99;
  --primary:#B062FF; --on-primary:#1A1A2E; --primary-container:#2D1B69;
  --accent:#FFFF70; --on-accent:#1A1A2E;
  --outline:rgba(203,196,207,.28); --shadow:rgba(0,0,0,.5);
  --hero-bg:radial-gradient(130% 110% at 78% -10%,#3A1A86 0%,#1A1A2E 58%);
}}

/* ── Tokens: dark (explicit override via data-theme) ── */
[data-theme="dark"]{
  --bg:#1A1A2E; --surface:#221F3A; --surface-2:#2D1B69;
  --text:#FFFFFF; --text-sub:#CBC4CF; --text-mut:#958E99;
  --primary:#B062FF; --on-primary:#1A1A2E; --primary-container:#2D1B69;
  --accent:#FFFF70; --on-accent:#1A1A2E;
  --outline:rgba(203,196,207,.28); --shadow:rgba(0,0,0,.5);
  --hero-bg:radial-gradient(130% 110% at 78% -10%,#3A1A86 0%,#1A1A2E 58%);
}

/* ── Reset + base ── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ── Layout ── */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;letter-spacing:-.01em;color:var(--text)}
.section{padding:clamp(56px,9vw,128px) 0}
.section-label{font-size:13px;font-weight:700;color:var(--primary);letter-spacing:.04em;text-transform:uppercase}
.section-title{font-size:clamp(26px,4vw,36px);font-weight:800;margin:.4em 0}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);
  font-weight:700;font-size:15px;padding:12px 22px;border-radius:var(--radius-pill);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:.2s}
.btn--primary{background:var(--primary);color:var(--on-primary)}
.btn--ghost{background:transparent;color:var(--primary);border-color:var(--primary)}

/* ── Card ── */
.card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius-lg);
  padding:24px;box-shadow:0 4px 16px var(--shadow)}

/* ── Coming-soon badge ── */
.coming-soon{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;
  border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent)}

/* ── Site header ── */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--outline)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}

/* ── Header nav ── */
.header-nav{display:flex;align-items:center;gap:24px;list-style:none}
.header-nav a{font-size:15px;font-weight:500;color:var(--text-sub);transition:color .2s}
.header-nav a:hover{color:var(--text)}

/* ── Header controls (theme toggle + lang switch) ── */
.theme-toggle,.lang-switch{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--outline);border-radius:var(--radius-pill);padding:6px 10px;cursor:pointer;color:var(--text)}

/* ── Site footer ── */
.site-footer{background:var(--surface);border-top:1px solid var(--outline);padding:48px 0;text-align:center;color:var(--text-sub)}

/* ── Scroll reveal ── */
/* feature-row, social grid, hero, reveal 등은 마크업 태스크에서 함께 확장 */
.reveal{opacity:0;transform:translateY(16px);transition:.6s}
.reveal.in{opacity:1;transform:none}

/* ── Mobile: collapse header nav ── */
@media (max-width:767px){
  .header-nav{display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg);border-bottom:1px solid var(--outline);padding:8px 0}
  .header-nav.open{display:flex}
  .header-nav a{padding:12px 24px;width:100%}
}

/* ── Section alternates ── */
.section--alt{background:var(--surface)}

/* ── Header controls (right cluster) ── */
.header-controls{display:flex;align-items:center;gap:8px}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:8px}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:.2s}

/* ── Lang switch active ── */
.lang-switch a{font-size:13px;font-weight:600;color:var(--text-sub);padding:0 4px;transition:color .2s}
.lang-switch a:hover,.lang-switch a.lang-active{color:var(--primary)}

/* ── Logo ── */
.site-logo img{display:block}

/* ── Hero-hl (highlighted word in h1) ── */
.hero-hl{background:var(--accent);color:var(--on-accent);border-radius:6px;
  padding:0 6px 2px;display:inline}
[data-theme="dark"] .hero-hl{background:transparent;color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-hl{background:transparent;color:var(--accent)}
}

/* ── Hero section ── */
.hero{background:var(--hero-bg);padding:clamp(64px,10vw,140px) 0 clamp(48px,7vw,100px)}
.hero__inner{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.hero__text{display:flex;flex-direction:column;gap:20px;max-width:520px}
.hero__text h1{font-size:clamp(36px,6vw,60px)}
.hero__subtitle{font-size:clamp(15px,2vw,17px);color:var(--text-sub);line-height:1.7}
.hero__mascot{flex-shrink:0}
.hero__mascot img{max-width:clamp(180px,30vw,400px);height:auto}

/* ── Store buttons ── */
.store-buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.store-btn img{height:48px;width:auto;border-radius:var(--radius-sm)}

/* ── QR block ── */
.qr-block{display:flex;gap:20px;align-items:flex-start}
.qr-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.qr-item img{border-radius:var(--radius-sm);border:1px solid var(--outline)}
.qr-item figcaption{font-size:12px;color:var(--text-mut);font-weight:600}

/* ── About section ── */
.about__inner{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.about__text{display:flex;flex-direction:column;gap:16px}
.about__para{font-size:clamp(15px,2vw,17px);color:var(--text-sub);line-height:1.8}
.about__emoji{flex-shrink:0}

/* ── Feature (post types) grid ── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;margin:32px 0}
.feature-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.feature-card__img{width:100%;height:160px;object-fit:cover;border-radius:var(--radius-md) var(--radius-md) 0 0}
.feature-card__body{padding:16px 20px 20px}
.feature-card__header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.feature-card__title{font-size:16px;font-weight:700}
.feature-card__desc{font-size:14px;color:var(--text-sub);line-height:1.6}
.feature-card--soon{opacity:.85}
.soon-note{font-size:14px;color:var(--text-mut);margin-top:8px;text-align:center}

/* ── What's New grid ── */
.whatsnew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:24px;margin:32px 0}
.whatsnew-card__icon{font-size:32px;margin-bottom:12px}
.whatsnew-card__title{font-size:16px;font-weight:700;margin-bottom:8px}
.whatsnew-card__desc{font-size:14px;color:var(--text-sub);line-height:1.6}

/* ── Social grid ── */
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:32px;margin:40px 0;text-align:center}
.social-item{display:flex;flex-direction:column;align-items:center;gap:12px}
.social-item__img{border-radius:var(--radius-md)}
.social-item__title{font-size:15px;font-weight:700}
.social-item__desc{font-size:13px;color:var(--text-sub);line-height:1.6}

/* ── Web editor section ── */
.web-editor__inner{max-width:600px}
.web-editor__text{display:flex;flex-direction:column;gap:16px}
.web-editor__body{font-size:clamp(15px,2vw,17px);color:var(--text-sub);line-height:1.7}

/* ── Download section ── */
.download{background:var(--surface-2);text-align:center}
.download__inner{display:flex;flex-direction:column;align-items:center;gap:24px}
.download__title{font-size:clamp(28px,5vw,44px);font-weight:800}
.download__subtitle{font-size:clamp(15px,2vw,18px);color:var(--text-sub);max-width:480px}
.download .store-buttons{justify-content:center}
.download .qr-block{justify-content:center}

/* ── Footer ── */
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.footer__mascot{border-radius:var(--radius-md)}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.footer-nav a{font-size:13px;color:var(--text-sub);transition:color .2s}
.footer-nav a:hover{color:var(--text)}
.footer__copy{font-size:13px;color:var(--text-mut)}

/* ── Mobile responsiveness ── */
@media (max-width:767px){
  .hamburger{display:flex}
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__mascot{display:none}
  .hero__text{align-items:center}
  .about__inner{grid-template-columns:1fr}
  .about__emoji{display:none}
  .qr-block{display:none}
}