/* ══ 앱 토큰 그대로 (src/constants/birdieup-theme.ts) ══════════════
   단일 테마다. 앱에 다크 팔레트가 없고(`useColorScheme` 을 쓰는 곳이 한 군데도 없다)
   화면은 언제나 웜페이퍼 위에 그려진다 — 로그인 화면이 어두운 것은 테마가 아니라
   그 화면의 디자인이다. 소개 사이트가 없는 테마를 만들어 붙이면 앱과 달라진다.
   배경과 글자색은 전부 명시한다(투명하게 두면 뷰어의 바탕을 물려받는다).

   ⚠ 이 파일은 **계약이다.** privacy.html · terms.html 이 여기 기대어 산다 —
   본문용 클래스(.wrap · .sec · .shead · .eyebrow · .prose)는 지우거나 이름을 바꾸지 마라. */
:root{
  --paper:#F2EFE6; --card:#FBF9F3; --ink:#12301F; --green:#1F6B45;
  --lime:#C8E85F; --lime-hi:#D6F275; --red:#B23A2A; --muted:#8A9A8F; --mid:#3E5C4B;

  --ground:var(--paper); --surface:var(--card);
  --text:var(--ink); --text-2:var(--mid); --text-3:var(--muted);
  --line:rgba(18,48,31,.12); --line-soft:rgba(18,48,31,.07);
  --pill-line:rgba(18,48,31,.18); --chip:rgba(18,48,31,.07);
  --pos:var(--green); --neg:var(--red);
  --cta-bg:var(--ink); --cta-text:var(--lime); --cta-hi:#1B3F2A;
  --seg-on:var(--ink); --seg-on-text:var(--paper);

  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --shell:1160px; --pad:clamp(20px,5vw,44px);
  /* 앱의 반경: 카드 20 · 잉크카드 22 · 버튼 16 · 알약 999 */
  --r-card:20px; --r-ink:22px; --r-btn:16px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);
     font-family:var(--body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
h1,h2,h3{text-wrap:balance;margin:0} p{margin:0} a{color:inherit}

/* ── 앱의 알약 (screen-header.tsx HeaderButton) ─────────────────── */
.pill{display:inline-flex;align-items:center;height:34px;padding:0 16px;
      border:1px solid var(--pill-line);border-radius:999px;
      font-family:var(--display);font-weight:700;font-size:13px;
      color:var(--text);text-decoration:none;white-space:nowrap;
      transition:background-color .12s ease}
.pill:hover{background:var(--line-soft)}
.pill--on{background:var(--seg-on);color:var(--seg-on-text);border-color:transparent}
.pill--on:hover{background:var(--seg-on)}
.pill--sm{height:28px;padding:0 12px;font-size:11.5px;color:var(--text-2)}

/* ── 앱의 주 버튼 (auth.tsx ctaInk / ctaLime) ───────────────────── */
.cta{display:inline-flex;align-items:center;justify-content:center;
     height:58px;padding:0 30px;border-radius:var(--r-btn);
     background:var(--cta-bg);color:var(--cta-text);
     font-family:var(--display);font-weight:800;font-size:16px;
     text-decoration:none;white-space:nowrap;
     transition:background-color .12s ease,transform .12s ease}
.cta:hover{background:var(--cta-hi)} .cta:active{transform:translateY(1px)}
.cta--quiet{background:transparent;color:var(--text);border:1px solid var(--line)}
.cta--quiet:hover{background:var(--line-soft);border-color:var(--text-3)}
.cta--sm{height:48px;font-size:14.5px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* ── 앱의 섹션 헤더: 라벨 ──── 알약 ────────────────────────────── */
.shead{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.shead__label{font-family:var(--display);font-weight:700;font-size:12.5px;
              letter-spacing:.12em;color:var(--text-2);white-space:nowrap}
.shead__rule{flex:1;height:1px;background:var(--line)}

.chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;
      background:var(--chip);color:var(--text-2);font-size:12px;font-weight:500}
.chip--mono{font-family:var(--mono);font-weight:600;font-size:11.5px}

/* ── 앱의 통계 타일 (history 화면) ─────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
      padding:18px 16px}
.tile b{display:block;font-family:var(--display);font-weight:800;
        font-size:clamp(26px,3.4vw,34px);line-height:1.1;letter-spacing:-.01em}
.tile span{display:block;margin-top:6px;font-size:12.5px;color:var(--text-3)}
.tile.is-lime b{color:var(--green)}

/* ── 상단 ─────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid var(--line-soft)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
/* assets/images/header-lockup.png — 앱 헤더가 쓰는 그 락업 그대로 */
.lockup{display:block;text-decoration:none}
.lockup img{height:26px;width:auto;display:block}
.topnav{display:flex;gap:20px;font-size:14px;color:var(--text-2)}
.topnav a{text-decoration:none}
.topnav a:hover{color:var(--text)}
@media (max-width:960px){.topnav{display:none}}

/* ── 히어로 ───────────────────────────────────────────────────── */
.hero{padding-block:clamp(40px,6.5vw,72px) clamp(30px,4.5vw,48px)}
.freechip{display:inline-flex;align-items:center;background:var(--lime);color:#12301F;
          border-radius:999px;padding:6px 14px;font-family:var(--display);
          font-weight:800;font-size:12.5px;letter-spacing:.06em}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:11px;
         letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.hero h1{margin-top:16px;font-weight:700;font-size:clamp(29px,4.7vw,47px);
         line-height:1.28;letter-spacing:-.02em}
.hl{background:linear-gradient(transparent 62%,var(--lime) 62%);padding-inline:3px}
.hero__sub{margin-top:20px;font-size:clamp(15.5px,1.8vw,17.5px);color:var(--text-2);max-width:38em}
.hero__cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.hero__tiles{margin-top:38px}

/* 하위 페이지의 머리. 히어로보다 낮게 앉는다 — 홈이 아니라는 신호다. */
.pagehead{padding-block:clamp(30px,4.5vw,52px) clamp(20px,3vw,32px)}
.pagehead h1{margin-top:14px;font-weight:700;font-size:clamp(26px,4vw,40px);
             line-height:1.26;letter-spacing:-.02em}
.pagehead .lede{margin-top:18px;font-size:clamp(15.5px,1.7vw,17px);color:var(--text-2);max-width:36em}
/* 빵부스러기. 하위 페이지가 홈으로 돌아갈 길을 늘 보이게 둔다. */
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-3);
       padding-top:18px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--text)}

/* ── 기둥 ─────────────────────────────────────────────────────── */
.sec{padding-block:clamp(48px,7vw,78px);border-top:1px solid var(--line-soft)}
.pil{display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:1fr;align-items:center}
@media (min-width:920px){
  .pil{grid-template-columns:1fr 380px}
  .pil--flip{grid-template-columns:380px 1fr}
  .pil--flip .pil__txt{order:2}
}
.pil h2{font-size:clamp(23px,3vw,31px);font-weight:700;line-height:1.32;letter-spacing:-.015em;margin-top:14px}
.pil p{margin-top:16px;color:var(--text-2);font-size:15.5px;max-width:34em}
.pil ul{margin-top:18px;padding:0;list-style:none;display:grid;gap:8px}
.pil li{position:relative;padding-left:17px;font-size:15px;color:var(--text-2)}
.pil li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
                border-radius:50%;background:var(--lime)}

.phone{border:1px solid var(--line);border-radius:26px;overflow:hidden;
       background:var(--surface);box-shadow:0 18px 40px -24px rgba(18,48,31,.4);
       max-width:380px;margin-inline:auto}
.phone img{display:block;width:100%;height:auto}
.phone__cap{padding:10px 14px;border-top:1px solid var(--line-soft);
            font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
            color:var(--text-3);text-transform:uppercase}

/* ── 게임 카드 ─────────────────────────────────────────────────── */
.games{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.games{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.games{grid-template-columns:repeat(4,1fr)}}
.game{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 16px}
.game h3{font-size:18px;font-weight:700}
.game .shout{margin-top:9px;font-weight:600;font-size:14.5px;color:var(--green)}
.game ul{margin-top:12px;padding:0;list-style:none;display:grid;gap:6px}
.game li{position:relative;padding-left:15px;font-size:14px;color:var(--text-2);line-height:1.55}
.game li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
                 border-radius:50%;background:var(--lime)}
.game .chips{margin-top:13px;display:flex;flex-wrap:wrap;gap:5px}
/* 카드가 통째로 링크가 될 때. 밑줄 대신 테두리가 반응한다 — 앱의 카드와 같은 결이다. */
a.game{display:block;text-decoration:none;transition:border-color .12s ease,transform .12s ease}
a.game:hover{border-color:var(--text-3);transform:translateY(-2px)}

.install{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:780px){.install{grid-template-columns:1fr 1fr}}

/* 두 칸 짜리 일반 격자. 게임 페이지의 규칙 묶음이 쓴다. */
.duo{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:780px){.duo{grid-template-columns:1fr 1fr}}

/* ── 잉크 밴드 (앱의 LIVE 카드 톤) ─────────────────────────────── */
.band{background:var(--ink);color:var(--paper);border-radius:var(--r-ink);
      padding:clamp(28px,4.5vw,44px)}
.band h2{font-size:clamp(22px,2.9vw,30px);font-weight:700;line-height:1.34}
.band>p{margin-top:14px;color:rgba(242,239,230,.62);max-width:36em}
.band__list{margin-top:26px;display:grid;gap:20px}
@media (min-width:820px){.band__list{grid-template-columns:repeat(2,1fr);gap:28px}}
.band__list h3{font-size:16px;font-weight:600}
.band__list p{margin-top:6px;font-size:14.5px;color:rgba(242,239,230,.62)}

.free{background:var(--lime);color:#12301F;border-radius:var(--r-ink);
      padding:clamp(34px,5.5vw,58px);text-align:center}
.free h2{font-family:var(--display);font-weight:800;
         font-size:clamp(28px,4.6vw,46px);line-height:1.16;letter-spacing:-.02em}
.free p{margin-top:14px;font-size:16px;color:rgba(18,48,31,.78);max-width:28em;margin-inline:auto}

.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:600;font-size:15.5px;
             display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--text-3)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:16px;color:var(--text-2);font-size:14.5px;max-width:62ch}

.close{padding-block:clamp(52px,8vw,86px);text-align:center;border-top:1px solid var(--line-soft)}
.close h2{font-size:clamp(25px,3.8vw,38px);margin-top:12px}
.close .cta{margin-top:24px}
footer{border-top:1px solid var(--line-soft);padding-block:26px;font-size:13.5px;color:var(--text-3)}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between}
footer a{text-decoration:none}
footer a:hover{color:var(--text)}
/* 앱의 BrandFooter 와 같은 모양 — 모노, mid 톤 */
.brandline{font-family:var(--mono);font-size:13px;color:var(--text-2)}

/* ── 표 ────────────────────────────────────────────────────────
   좁은 화면에서 표가 몸통을 밀어내면 페이지 전체가 가로로 흔들린다.
   그래서 표는 언제나 제 안에서만 스크롤한다. */
.tbl{margin-top:12px;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:13.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
td code{font-family:var(--mono);font-size:12.5px}
/* 스코어카드의 숫자 칸. 자릿수가 흔들리지 않게 모노로 세운다. */
td.num{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
td.pos{color:var(--pos)} td.neg{color:var(--neg)}

/* ── 긴 글 ─────────────────────────────────────────────────────
   개인정보처리방침·이용약관처럼 **읽어 내려가는** 문서용. 카드도 격자도 없이
   한 줄기로만 흐른다. 폭을 65자로 묶는 것은 눈이 다음 줄 첫 글자를 놓치지 않는
   한계이기 때문이다 — 화면이 넓다고 줄이 길어지면 읽다가 자리를 잃는다. */
.prose{max-width:65ch;font-size:15.5px;color:var(--text-2)}
.prose h2{margin-top:44px;font-size:20px;font-weight:700;color:var(--text);line-height:1.4}
.prose h3{margin-top:30px;font-size:16.5px;font-weight:600;color:var(--text);line-height:1.45}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin-top:14px}
.prose ul,.prose ol{margin-top:14px;padding-left:20px;display:grid;gap:7px}
.prose li{padding-left:2px}
.prose a{color:var(--green);text-underline-offset:3px}
.prose strong{color:var(--text);font-weight:600}
.prose hr{margin-top:40px;border:0;border-top:1px solid var(--line)}
.prose .tbl{margin-top:20px}
/* 갱신일처럼 본문 위에 앉는 한 줄 */
.prose .meta{font-family:var(--mono);font-size:12px;color:var(--text-3)}


/* ── 오픈소스 고지 (oss.html) ──────────────────────────────────
   ⚠ 그 페이지는 `scripts/build-oss-notice.mjs` 가 만든다. **손으로 고치는 파일이 아니다** —
   생김새를 바꿀 일이 있으면 여기를, 짜임을 바꿀 일이 있으면 그 스크립트를 고쳐라.

   다른 문서와 다른 점이 둘이다. (1) 패키지 700여 개가 한 판에 서므로 줄 간격을 본문보다
   좁히고 목록 점을 뗀다 — 점이 붙으면 이름 앞이 들쑥날쑥해 훑기 어렵다. (2) 라이선스
   전문은 원문의 줄바꿈이 뜻을 갖는 글이라 고정폭으로 두고 줄바꿈을 그대로 살린다. 다만
   pre 의 기본값(넘치면 옆으로 스크롤)은 쓰지 않는다 — 좁은 시트 안에서 옆으로 밀어 읽는
   판이 되기 때문이다. */
.prose .oss-list{margin-top:14px;padding-left:0;list-style:none;display:grid;gap:9px}
.prose .oss-list li{padding-left:0;font-size:14px;line-height:1.5}
.oss-list code{font-family:var(--mono);font-size:13px;color:var(--text)}
.oss-ver{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.oss-cr{font-size:12.5px;color:var(--text-2)}
.oss-src{color:var(--text-3)}
/* 플랫폼 표시. 목록에서 가장 약하게 보여야 하는 정보라 알약 하나로 눌러 둔다. */
.oss-tag{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:999px;background:var(--chip);font-family:var(--mono);font-size:10.5px;color:var(--mid);vertical-align:2px}
.oss-count{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-3)}
/* 찾지 못해 남겨 둔 자리. 눈에 걸려야 다음에 고칠 수 있다. */
.oss-todo{color:var(--neg)}
.prose .oss-note{margin-top:12px;font-size:13.5px;color:var(--text-3)}
.oss-text{margin:12px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere}


/* ── 끼워 넣기 모드 (?embed=1) ─────────────────────────────────
   앱의 문서 시트가 privacy·terms·oss 를 웹뷰(네이티브)나 iframe(웹)으로 열 때만 켜진다.
   표시를 붙이는 것은 그 세 장의 <head> 에 있는 인라인 스크립트다 — 스크립트가 돌지
   않으면 이 규칙도 켜지지 않고, 페이지는 평소 모습 그대로 읽힌다.

   지우는 것은 **사이트 껍데기**뿐이다: 시트가 이미 제목과 닫기를 갖고 있어서 헤더가
   또 서면 머리가 둘이 되고, 푸터의 링크는 이 좁은 판 안에서 다른 페이지로 빠져나가는
   길이라 돌아올 방법이 없다. 본문(.prose)은 한 글자도 건드리지 않는다 —
   시트에서 읽는 약관과 브라우저에서 읽는 약관이 달라지면 안 된다.

   ⚠ 이 규칙들은 privacy·terms·oss 세 장을 위한 것이다(oss 의 그 스크립트는 사람이 아니라
   build-oss-notice.mjs 가 심는다). 다른 페이지는 이 모드를 켜지 않는다. */
html[data-embed] .topbar,
html[data-embed] footer{display:none}
/* 빵부스러기는 사이트 안의 길 안내다. 시트 안에서 누르면 소개 페이지가 시트를 차지한다. */
html[data-embed] .crumb{display:none}
/* 소개 홈(index)을 시트에 끼워 넣을 때. 「시작하기」는 이미 그 앱 안에서 누르는 것이라
   갈 곳이 없고, 누르면 시트가 웹앱을 통째로 띄운다 — 「버디업이란?」 을 열었을 뿐인데
   화면이 앱으로 바뀐다. 링크 재작성은 사이트 안 경로(a[href^="/"])만 건드리므로
   바깥 주소인 이 버튼은 스크립트가 잡지 못한다. 그래서 여기서 가린다. */
html[data-embed] .hero__cta{display:none}
/* 시트는 화면보다 좁다. 바깥 여백이 그대로면 글줄이 두 번 좁혀져 읽기가 답답해진다. */
html[data-embed] .wrap{padding-inline:18px}
html[data-embed] .pagehead{padding-block:18px 10px}
/* 헤더가 사라져 위에 아무것도 없으므로 본문을 가르던 경계선도 필요 없다. */
html[data-embed] .sec{padding-block:0 40px;border-top:0}
/* 시트가 이미 「이용약관」 이라는 제목을 달고 있다. 문서가 같은 이름을 한 번 더 외치면
   같은 말이 두 줄로 겹친다. 숨기는 것은 끼워 넣기일 때뿐이라, 브라우저로 직접 연
   페이지와 검색엔진이 보는 h1 은 그대로 남는다. */
html[data-embed] .pagehead h1{display:none}
html[data-embed] .pagehead .lede{margin-top:12px;font-size:15px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}