/* Bullmark "Daylight" — global base (per-page styles live in each .razor).

   [2026-09-17 Sonny] Terminal Noir 는 끝났다. 요청: "전체적인 디자인이 너무 어두워 …
   밝은색계열로 완전히" + Clay(clay.com)의 톤 — 크림 종이, 파스텔 띠, 큰 라운드, 둥근
   산세리프. 색은 기계적으로 한 번에 옮겼고(scripts/, 커밋 메시지 참조) 여기 :root 가
   그 결과의 **정본**이다.

   왜 토큰을 두는가: 페이지마다 <style> 안에 hex 가 박혀 있어서 이번 전환이 1,900 군데를
   건드려야 했다. 새로 쓰는 것은 var() 로 쓴다 — 다음 번에 톤을 옮길 때 이 파일 하나만
   고치면 되도록. 기존 hex 는 그대로 두었다(같은 값이라 화면은 동일하고, 전부 var 로
   바꾸는 diff 는 이번 변경에서 검토 불가능한 크기가 된다).

   글꼴: Figtree — 본문·제목 전부. JetBrains Mono 는 **사람이 한 글자씩 읽고 대조하는
   것**에만 남긴다: 바우처 시리얼, redeem code, 해시, 거래 id. 그것이 .bm-mono 다. */

:root {
    /* paper — 페이지는 흰색이 아니라 따뜻한 크림이다. 카드가 흰색이라 그 위에서 뜬다. */
    --bm-bg:        #ffffff;
    --bm-bg-soft:   #f8fafc;
    --bm-panel:     #ffffff;
    --bm-panel-2:   #f1f5f9;

    /* pastel bands — Clay 처럼 섹션마다 옅은 색 띠를 깔아 구간을 나눈다.
       전부 배경 전용: 이 위에 --bm-ink 가 올라가는 것을 전제로 한 명도다. */
    --bm-tint-blue:  #f1f5f9;
    --bm-tint-peach: #f1f5f9;
    --bm-tint-mint:  #f1f5f9;
    --bm-tint-lilac: #f1f5f9;
    --bm-tint-sand:  #f1f5f9;

    /* lines */
    --bm-line:    #e2e8f0;
    --bm-line-2:  #cbd5e1;
    --bm-line-3:  #94a3b8;

    /* ink */
    --bm-ink:    #0f172a;
    --bm-ink-2:  #334155;
    --bm-muted:  #475569;   /* [2026-10-03 Sonny "흐린 글씨가 너무 흐려"] #64748b → 한 단계 찐하게 */
    --bm-dim:    #64748b;   /* #94a3b8 → 한 단계 찐하게 (bg 위 4.9:1) */

    /* accents — 전부 --bm-bg 위에서 4.5:1 이상이다(작은 글자에 쓰이는 색들이라). */
    --bm-accent:      #0f172a;
    --bm-accent-dark: #334155;
    --bm-accent-soft: #f1f5f9;
    --bm-blue:        #334155;
    --bm-blue-soft:   #f1f5f9;
    --bm-green:       #15803d;
    --bm-green-soft:  #dcfce7;
    --bm-amber:       #a8710b;

    /* geometry — Clay 는 모서리가 크다. 카드 20, 큰 판 28, 버튼은 알약. */
    --bm-r-sm:   10px;
    --bm-r:      16px;
    --bm-r-lg:   24px;
    --bm-r-xl:   32px;
    --bm-r-pill: 999px;

    /* elevation — 밝은 배경에서 검정 그림자는 때가 탄 것처럼 보인다. 따뜻한 갈색으로. */
    --bm-shadow-sm: 0 2px 8px rgba(15,23,42,.06);
    --bm-shadow:    0 10px 30px rgba(15,23,42,.08);
    --bm-shadow-lg: 0 24px 60px rgba(15,23,42,.12);

    --bm-sans: 'Inter', 'Noto Sans KR', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bm-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 시리얼·코드·해시·거래 id — 사람이 한 글자씩 대조하는 것. 여기서만 모노를 쓴다.
   tabular-nums 는 표의 숫자가 자리를 지키게 한다(산세리프는 기본이 비례폭이라
   Terminal Noir 때는 공짜로 얻던 정렬이 사라진다). */
.bm-mono {
    font-family: var(--bm-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* 표·금액의 숫자. 글꼴은 그대로 두고 자릿수만 고정한다. */
.bm-num { font-variant-numeric: tabular-nums; }

html, body {
    margin: 0;
    background: #ffffff;
    color: #0f172a;
    font-family: 'Inter', 'Noto Sans KR', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

::selection { background: #0f172a; color: #fff; }

/* ── 언어별 서체 폴백 ──────────────────────────────────────────────────
   Figtree 에는 한글·가나·한자 글리프가 없다. 그대로 두면 브라우저가 알아서 대체 서체를
   찾는데, 그 결과가 기기마다 제각각이라(윈도우는 굴림 계열로 떨어지는 일이 잦다) 같은
   화면이 사람마다 다른 인상으로 보인다. 각 언어에 맞는 시스템 서체를 **Figtree 앞이 아니라
   뒤에** 세워, 라틴 글자는 그대로 Figtree 로 그리고 없는 글자만 그쪽에서 가져오게 한다.

   훅은 `<html lang>` 이 아니라 data 속성이다 — index.html 은 lang="en" 로 고정돼 있고
   SEO 셸 생성기가 배포마다 그 부분을 다시 쓰기 때문에, 거기에 기대면 되돌아간다.
   이 속성은 TranslationService.SetLanguageAsync 가 언어를 바꿀 때마다 얹는다. */
html[data-ui-lang="ko"] body, html[data-ui-lang="ko"] input,
html[data-ui-lang="ko"] textarea, html[data-ui-lang="ko"] button, html[data-ui-lang="ko"] select {
    font-family: 'Inter', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
html[data-ui-lang="ja"] body, html[data-ui-lang="ja"] input,
html[data-ui-lang="ja"] textarea, html[data-ui-lang="ja"] button, html[data-ui-lang="ja"] select {
    font-family: 'Inter', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', sans-serif;
}
html[data-ui-lang="zh-Hant"] body, html[data-ui-lang="zh-Hant"] input,
html[data-ui-lang="zh-Hant"] textarea, html[data-ui-lang="zh-Hant"] button, html[data-ui-lang="zh-Hant"] select {
    font-family: 'Inter', 'PingFang TC', 'Microsoft JhengHei UI', 'Noto Sans TC', sans-serif;
}

/* [2026-08-13] Ligatures off inside form fields.
   JetBrains Mono ships programming ligatures, and `//` is one of them: typed into an
   input it draws as a gap followed by the slashes, so "https://hello.com" reads on
   screen as "https: /hello.com". Reported as "I can't type // — it forces a space in".
   [2026-09-17] 본문 글꼴이 Figtree 로 바뀌어 이 특정 버그는 사라졌지만 규칙은 남긴다:
   .bm-mono 를 단 입력칸(시리얼·코드)은 여전히 모노고, 거기가 바로 한 글자씩 읽는 자리다.
   Nothing was ever inserted and nothing was ever dropped: the value is intact, only the
   glyph run was joined (no JS on this site touches input at all; the fields are plain
   @bind). A field is where people read characters one at a time and check them against
   something they were told — a pretty glyph that hides one is wrong here even though the
   same ligature is right in the display type above it.
   Both properties on purpose: font-variant-ligatures is the standard control,
   font-feature-settings covers engines that still honour only the low-level switch. */
input, textarea, select {
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
}

/* FocusOnNavigate (App.razor) programmatically focuses the page h1 after route
   changes for screen readers — suppress the browser's default focus box on it. */
h1:focus { outline: none; }

a { color: inherit; }

/* [2026-08-26 Sonny] 스피너 — **정본은 여기 하나**.
   여태 같은 것이 네 페이지(.razor 의 <style>)에 각각 정의돼 있었고 @keyframes bm-spin 도
   네 번 선언돼 있었다. 그러다 보니 버튼에는 아예 없었다 — 글자만 바뀌어서 눌린 건지
   멈춘 건지 알 수 없었다.
   링을 currentColor 로 그리는 것이 요점이다: 이 사이트의 버튼은 빨강(채움)·고스트(테두리)·
   초록이 섞여 있어 색을 박으면 그중 하나에서만 보인다. color-mix 를 못 읽는 브라우저는
   앞줄의 회색 링으로 떨어진다(안 보이는 것보다 낫다). */
@keyframes bm-spin { to { transform: rotate(360deg); } }

.bm-spin {
    display: inline-block; width: 12px; height: 12px;
    margin-right: 7px; vertical-align: -1px;
    border: 2px solid rgba(0,0,0, 0.28);
    border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bm-spin 0.6s linear infinite;
}

/* 화면 한가운데서 도는 큰 것(로그인 대기 등) — 글자 옆이 아니라 혼자 선다. */
.bm-spin-lg {
    display: block; width: 28px; height: 28px; margin: 0 auto 20px;
    border: 3px solid #cbd5e1; border-top-color: #0f172a;
    border-radius: 50%; animation: bm-spin 0.7s linear infinite;
}

/* 움직임을 꺼 둔 사람에게는 돌리지 않는다 — 그래도 링은 남아 "뭔가 진행 중"은 보인다. */
@media (prefers-reduced-motion: reduce) {
    .bm-spin, .bm-spin-lg { animation-duration: 2.4s; }
}

/* ─────────────────────────────────────────────────────────────────────────
   [2026-08-26 Sonny] 등장·전환 모션 — **정본은 여기 하나**.

   신고: "화면도 팍팍 바뀌고 popup도 팍팍하다." 원인은 말투가 아니라 모션이 0이었던 것.
   페이지는 RouteView 가 @Body 를 그냥 갈아치웠고, 덮개 6개(.modal-back ×3 · .otp-back ·
   .rrp-back · .sub-scrim)는 전부 0.78 불투명 배경이 한 프레임에 딱 생겼고, :hover 는
   transition 없이 0ms 로 점프했다. 셋 다 "눌렀다/바뀌었다"는 사실만 전하고 **그 사이**를
   안 보여 준다 — 딱딱하다는 건 그 사이가 없다는 뜻이다.

   세기는 절제로 잡았다(120~180ms, opacity 위주 + 4px 미세 이동). Terminal Noir 는 각지고
   빠른 톤이라 scale 이나 250ms 를 쓰면 사이트가 물러진다. 여기서 하는 일은 톤을 바꾸는 게
   아니라 **끊긴 프레임을 이어 주는 것**이다.
   ───────────────────────────────────────────────────────────────────────── */

@keyframes bm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-rise-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 전 화면 덮개 — 배경만 켜진다. 아래 내용이 비쳐 보이는 물건이라 움직이면 안 된다. */
.bm-overlay { animation: bm-fade-in 140ms ease-out; }

/* 덮개 위의 판 · 드롭다운 — 덮개보다 아주 조금 늦게, 4px 올라오며 선다. */
.bm-pop { animation: bm-rise-in 160ms cubic-bezier(0.2, 0.8, 0.3, 1); }

/* 라우트가 바뀔 때의 본문. MainLayout/LandingLayout 이 URL 로 @key 를 주므로 주소가
   바뀔 때만 다시 돈다 — 같은 화면 안의 재렌더에는 반응하지 않는다. */
.bm-page { animation: bm-rise-in 180ms cubic-bezier(0.2, 0.8, 0.3, 1); }

/* :hover / :focus / disabled 가 0ms 로 점프하던 것. 페이지가 자기 transition 을 이미
   선언해 둔 곳은 그쪽이 더 구체적이라 그대로 이긴다 — 여기는 아무 말 없던 것들의 바닥값이다.
   transform 은 일부러 뺐다: 자리를 잡는 데 transform 을 쓰는 곳이 있어 레이아웃이 밀린다. */
button, a, input, textarea, select, summary, [role="button"], [role="tab"] {
    transition: background-color 140ms ease, border-color 140ms ease,
                color 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
}

/* 움직임을 꺼 둔 사람에게는 등장 모션을 주지 않는다 — 스피너와 달리 이건 없어도 정보가
   빠지지 않는다(스피너는 "진행 중"이라는 정보라서 느리게라도 남긴다). */
@media (prefers-reduced-motion: reduce) {
    .bm-overlay, .bm-pop, .bm-page { animation: none; }
    button, a, input, textarea, select, summary, [role="button"], [role="tab"] { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   [2026-08-26 Sonny] 좁은 화면 공통 안전망.

   페이지별 반응형은 각 .razor 의 <style> 에 그대로 둔다 (이 파일 머리말 그대로).
   여기 넣는 건 페이지마다 다시 쓸 이유가 없는 것들뿐이다. 컴포넌트 <style> 은 이
   파일보다 뒤에 실려서 같은 특이도면 저쪽이 이긴다 — 그래서 페이지가 건드리지 않는
   속성만 골랐다.

   overflow-x: hidden 은 일부러 안 넣었다. 넘치는 걸 가려서 없애는 것처럼 보이게 할
   뿐 실제로는 그대로고, root 에 걸면 sticky 헤더가 깨진다. 넘치는 자리는 그 자리를
   고친다.
   ───────────────────────────────────────────────────────────────────────── */

/* 원본 크기로 부모를 밀어내던 것. svg 는 뺐다 — 아이콘이 width/height 속성으로
   크기를 정하는 곳이 많아 건드리면 그쪽이 흔들린다. */
img, video, canvas { max-width: 100%; height: auto; }

/* <input>/<select> 의 min-content 는 size 속성 기준(≈180px)이라 grid/flex 안에서
   1fr 을 줘도 그 아래로 안 줄어든다. 폼 두 칸짜리 줄이 폰에서 페이지를 옆으로
   밀어내던 주범. */
input, select, textarea { max-width: 100%; }

/* 긴 주소·코드·해시가 줄바꿈 자리를 못 찾아 칸을 넘기던 것. break-word 라서 평범한
   문장은 단어 단위로 그대로 끊긴다. */
body { overflow-wrap: break-word; }

/* ─────────────────────────────────────────────────────────────────────────
   [2026-09-17 Sonny] 개념 설명 페이지 셋의 공통 뼈대 — /brand-credit ·
   /vouchers · /referrers.

   이 파일 머리말은 "페이지별 스타일은 각 .razor 에" 라고 못 박아 두었고 그 규칙은
   그대로다. 여기 올리는 이유는 규칙의 다음 줄 때문이다: **페이지마다 다시 쓸 이유가
   없는 것**. 세 페이지는 같은 레이아웃의 다른 내용이라, 각자 <style> 에 두면 같은
   CSS 가 세 벌이 되고 넷째 개념이 생기면 네 벌이 된다. 한 벌만 둔다.

   접두사 cp- (concept page). 랜딩(Home.razor)은 일부러 여기 안 태웠다 — 저쪽은
   히어로·영상·띠 배치가 이 셋과 다르고, 공유하려고 맞추면 둘 다 뻣뻣해진다.
   ───────────────────────────────────────────────────────────────────────── */

.cp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.cp-narrow { max-width: 760px; }

/* 페이지 머리 — 옅은 띠 위에 한 문장으로 "이게 뭐다" 를 끝낸다. */
.cp-hero { padding: 48px 0 52px; }
.cp-hero.tint-blue  { background: var(--bm-tint-blue); }
.cp-hero.tint-peach { background: var(--bm-tint-peach); }
.cp-hero.tint-mint  { background: var(--bm-tint-mint); }

/* 헤더를 2단으로: 왼쪽에 말, 오른쪽에 그림. 그림은 배경이 투명이라 띠의 파스텔이
   그대로 비친다 — 개념마다 배경색을 다시 칠할 필요가 없다. */
.cp-hero-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.cp-hero-art { display: block; width: 100%; max-width: 250px; height: auto; margin-left: auto; }

.cp-tag {
    display: inline-block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 11px; border-radius: var(--bm-r-pill); color: #fff;
}
.cp-tag.on-blue  { background: var(--bm-ink); }
.cp-tag.on-peach { background: var(--bm-ink); }
.cp-tag.on-mint  { background: var(--bm-ink); }

.cp-h1 {
    margin: 16px 0 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700;
    letter-spacing: -.03em; line-height: 1.14; color: var(--bm-ink);
}
.cp-h1 .hl-blue  { color: #64748b; }
.cp-h1 .hl-peach { color: #64748b; }
.cp-h1 .hl-mint  { color: #64748b; }

.cp-lead { margin: 18px 0 0; max-width: 620px; font-size: 15.5px; line-height: 1.6; color: var(--bm-ink-2); }

/* 본문 블록 */
.cp-block { padding: 56px 0; }
.cp-block.soft { background: var(--bm-bg-soft); }
.cp-h3 { margin: 30px 0 0; font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--bm-ink); }
.cp-h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--bm-ink); }
.cp-p { margin: 14px 0 0; font-size: 15px; line-height: 1.72; color: var(--bm-ink-2); }
.cp-p b { font-weight: 700; color: var(--bm-ink); }
.cp-p a { color: var(--bm-accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(15,23,42,.32); }
.cp-p a:hover { border-bottom-color: var(--bm-accent); }

/* [2026-09-21] /faq — 질문은 <details>. JS 없이 열리고, 닫혀 있어도 본문이 DOM 에 있어 크롤러가 읽는다. */
.cp-faq { max-width: 760px; margin-top: 28px; border-top: 1px solid var(--bm-line-2); }
.cp-faq details { border-bottom: 1px solid var(--bm-line-2); }
.cp-faq summary {
    list-style: none; cursor: pointer; padding: 16px 36px 16px 0; position: relative;
    font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--bm-ink);
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 22px; font-weight: 500; color: var(--bm-accent); transition: transform .18s;
}
.cp-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.cp-faq summary:hover { color: var(--bm-accent); }
.cp-faq p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.72; color: var(--bm-ink-2); }
.cp-faq p a, .cp-lead a, .cp-legal a { color: var(--bm-accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(15,23,42,.32); }
.cp-faq p a:hover, .cp-lead a:hover, .cp-legal a:hover { border-bottom-color: var(--bm-accent); }

/* [2026-09-21] /privacy · /terms · /refund · /cookies — 읽는 글. 한 단, 좁게. */
.cp-legal { max-width: 760px; }
.cp-legal .upd { font-size: 13.5px; font-weight: 600; color: var(--bm-muted); margin: 0 0 8px; }
/* 준거 언어 — "이 번역본과 영어가 다르면 영어가 지배한다". 날짜(.upd)와 같은 크기지만
   문장이라 굵기를 뺀다. 여덟 판본이 존재하는 문서에서는 이 한 줄이 어느 판본을 두고
   다투는지를 정한다. */
.cp-legal .gov { font-size: 13.5px; font-weight: 400; color: var(--bm-muted); margin: 0 0 22px; line-height: 1.7; }
.cp-legal h2 { margin: 36px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--bm-ink); }
.cp-legal h2:first-of-type { margin-top: 20px; }
.cp-legal p, .cp-legal li { font-size: 14.5px; line-height: 1.75; color: var(--bm-ink-2); }
.cp-legal p { margin: 14px 0 0; }
.cp-legal ul { margin: 12px 0 0; padding-left: 22px; }
.cp-legal li { margin: 6px 0 0; }
.cp-legal b { color: var(--bm-ink); }


/* 카드 격자 — 2열이 기본, .three 면 3열. */
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.cp-grid.three { grid-template-columns: repeat(3, 1fr); }
.cp-card { background: var(--bm-panel); border: 1px solid var(--bm-line); border-radius: var(--bm-r); padding: 22px 22px 20px; }
.cp-card .k { font-size: 15.5px; font-weight: 700; color: var(--bm-ink); }
.cp-card p { margin: 10px 0 0; font-size: 14px; line-height: 1.68; color: var(--bm-muted); }
.cp-card .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--bm-r-pill);
    background: var(--bm-ink); color: var(--bm-bg);
    font-size: 12.5px; font-weight: 700; margin-bottom: 12px;
}

/* 정의 줄 — "이 말은 이 뜻이다" 가 반복되는 자리. */
.cp-defs { margin: 36px 0 0; display: flex; flex-direction: column; gap: 0; }
.cp-def { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 18px 0; border-top: 1px solid var(--bm-line-2); }
.cp-def:last-child { border-bottom: 1px solid var(--bm-line-2); }
.cp-def dt { font-size: 15px; font-weight: 700; color: var(--bm-ink); }
.cp-def dd { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--bm-ink-2); }

/* 숫자 줄 */
.cp-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.cp-num { background: var(--bm-panel); border: 1px solid var(--bm-line); border-radius: var(--bm-r); padding: 24px 22px; }
.cp-num .v { font-size: 28px; font-weight: 700; letter-spacing: -.04em; color: var(--bm-accent); line-height: 1; }
.cp-num .v small { font-size: 16px; }
.cp-num .k { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--bm-ink); }
.cp-num p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--bm-muted); }

/* 주의 상자 — 오해하기 쉬운 것 한 줄. */
.cp-note { margin-top: 32px; border-left: 4px solid var(--bm-accent); background: var(--bm-accent-soft); border-radius: 0 var(--bm-r) var(--bm-r) 0; padding: 22px 26px; }
.cp-note .k { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #64748b; text-transform: uppercase; }
.cp-note p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.68; color: var(--bm-ink-2); }

/* 페이지 끝 — 다음 개념으로 넘기거나 시작시킨다. */
.cp-cta { border-radius: var(--bm-r-xl); background: var(--bm-ink); padding: 44px 40px; margin: 0 0 72px; }
.cp-cta h2 { margin: 0; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--bm-bg); }
.cp-cta p { margin: 16px 0 0; max-width: 520px; font-size: 15px; line-height: 1.6; color: #94a3b8; }
.cp-cta-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.cp-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 20px; font-size: 14px; font-weight: 600;
    border-radius: var(--bm-r-pill); text-decoration: none;
    transition: transform .18s, background .18s, border-color .18s;
}
.cp-btn.solid { background: #fff; color: var(--bm-ink); }
.cp-btn.solid:hover { background: #f1f5f9; transform: translateY(-2px); }
.cp-btn.line { border: 1px solid rgba(255,255,255,.3); color: var(--bm-bg); }
.cp-btn.line:hover { border-color: var(--bm-bg); transform: translateY(-2px); }

/* 형제 개념으로 가는 줄 — 세 페이지가 서로를 가리킨다. */
.cp-siblings { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.cp-sib { display: block; border-radius: var(--bm-r); padding: 20px 22px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.cp-sib:hover { transform: translateY(-3px); box-shadow: var(--bm-shadow); }
.cp-sib.to-blue  { background: var(--bm-tint-blue); }
.cp-sib.to-peach { background: var(--bm-tint-peach); }
.cp-sib.to-mint  { background: var(--bm-tint-mint); }
.cp-sib .s { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bm-muted); }
.cp-sib .t { margin-top: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: var(--bm-ink); }
.cp-sib p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--bm-ink-2); }

@media (max-width: 900px) {
    .cp-wrap { padding: 0 24px; }
    .cp-hero { padding: 40px 0 44px; }
    .cp-block { padding: 44px 0; }
    .cp-grid, .cp-grid.three, .cp-siblings { grid-template-columns: 1fr; }
    /* 좁은 화면에서는 그림을 제목 위로 올린다 — 아래로 내리면 접힌 화면에서
       "무슨 페이지인지"보다 장식이 먼저 보인다. */
    .cp-hero-in { grid-template-columns: 1fr; gap: 26px; }
    .cp-hero-in .cp-hero-art { order: -1; margin: 0 auto; max-width: 200px; }
    .cp-nums { grid-template-columns: 1fr 1fr; }
    .cp-def { grid-template-columns: 1fr; gap: 8px; }
    .cp-cta { padding: 44px 28px; border-radius: var(--bm-r-lg); margin-bottom: 64px; }
}

@media (max-width: 560px) {
    .cp-wrap { padding: 0 18px; }
    .cp-nums { grid-template-columns: 1fr; }
    .cp-btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   [2026-09-17 Sonny] 버튼은 알약이 기본이다.

   Terminal Noir 의 버튼은 각졌다 — 모노 터미널에서는 그게 맞았다. 밝은 종이 위에서는
   각진 채움 버튼이 경고 배너처럼 보인다. 랜딩과 개념 페이지는 이미 알약인데 앱 안쪽만
   각져 있으면 같은 제품의 두 화면이 다른 제품처럼 보인다.

   여기는 **바닥값**이다: 페이지가 자기 <style> 에 border-radius 를 선언한 곳은 클래스
   선택자라 특이도가 높아 그쪽이 그대로 이긴다. 아무 말도 없던 버튼들만 둥글어진다.

   input/select/textarea 는 뺐다 — 알약 입력칸은 글자가 좌우 곡면에 닿아 읽기 나빠진다.
   ───────────────────────────────────────────────────────────────────────── */
button, [role="button"] { border-radius: var(--bm-r-pill); }

/* 표·목록의 작은 상태 칩도 같이. 각진 2px 칩이 알약 버튼 옆에 서면 둘 다 어색하다. */
input, select, textarea { border-radius: var(--bm-r-sm); }

/* [2026-10-03 Sonny] 표 아래 쪽 넘김(Layout/Pager.razor) — 화면마다 다시 적지 않는다. */
.bm-pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.bm-pager-k { font-size: 12px; color: #64748b; margin-right: 6px; }
.bm-page-btn { background: none; border: 1px solid #cbd5e1; color: #0f172a; padding: 6px 12px; font-size: 12px;
               cursor: pointer; font-family: inherit; border-radius: 10px; min-width: 34px; }
.bm-page-btn:hover:not(:disabled) { border-color: #0f172a; }
.bm-page-btn.on { background: #0f172a; border-color: #0f172a; color: #fff; font-weight: 700; }
.bm-page-btn:disabled { opacity: .35; cursor: default; }

/* [2026-10-03 Sonny "모든 테이블의 헤드는 볼드체로"] <th> 와, 표처럼 그린 div 격자의 머리 줄(.cell) 전부. */
th, .thead .cell, .hhead .cell, .vhead .cell, .dhead .cell, .mk-head .cell, .table-head .cell { font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   [2026-11-14 Sonny "랜딩은 예쁜데 나머지는 너무 꽝 — Roost 디자인 개념으로"] 앱 화면 콘솔 껍데기.

   범위: MainLayout(.main-page) 안의 본문만. 랜딩·마케팅(LandingLayout, .bm-page 뿌리)은 여기 걸리지 않는다.
   기준: Axowl 대시보드 Roost 화면 — 글꼴 Inter + Noto Sans KR, 제목 1.35rem, 카드 머리 .95rem,
         입력칸 .84rem·32px, 버튼 .8rem·검정, 표 머리 .7rem 대문자, 모서리 5~10px.
   페이지 <style> 은 이 파일보다 뒤에 실려 같은 특이도면 이긴다 — 그래서 여기 규칙은 전부
   ".main-page .main-body" 로 시작해 한 단계 높게 선다. 색은 페이지 파일에서 이미 슬레이트로 바꿨다(11/14).
   ───────────────────────────────────────────────────────────────────────── */
.main-page { --bm-accent: #0f172a; --bm-accent-dark: #1e293b; --bm-accent-soft: #f1f5f9;
    --bm-ink: #0f172a; --bm-ink-2: #334155; --bm-muted: #475569; --bm-dim: #64748b;
    --bm-line: #e2e8f0; --bm-line-2: #e2e8f0; --bm-line-3: #cbd5e1; --bm-bg: #f8fafc; --bm-bg-soft: #f1f5f9;
    --bm-panel: #ffffff; --bm-panel-2: #f8fafc; --bm-green: #16a34a; --bm-blue: #2563eb;
    --bm-sans: 'Inter', 'Noto Sans KR', 'Noto Sans JP', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.main-page ::selection { background: #0f172a; color: #fff; }
/* 언어별 서체 규칙(html[data-ui-lang] input …)이 입력칸·단추에 Figtree 를 직접 박는다 — 앱 화면에서는 본문을 따른다. */
html .main-page input, html .main-page textarea, html .main-page button, html .main-page select,
html[data-ui-lang] .main-page input, html[data-ui-lang] .main-page textarea,
html[data-ui-lang] .main-page button, html[data-ui-lang] .main-page select { font-family: inherit; }

/* 페이지 뿌리 — 1180 폭, 가운데 */
.main-page .main-body > .bm-page > [class*="-page"]:first-child { max-width: 1180px; margin-left: auto; margin-right: auto; }
.main-page .main-body > .bm-page > .form-page:first-child { max-width: 880px; }

/* 제목줄 — 작게. 눈썹 알약(.sec-label)은 경로 줄처럼 작은 회색 글자로, 제목 끝 "." 은 뺀다. */
.main-page .main-body h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; margin: 0 0 .5rem; max-width: none; }
.main-page .main-body h1 .accent { display: none; }
.main-page .main-body h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.main-page .main-body h3 { font-size: .95rem; font-weight: 800; line-height: 1.4; }
.main-page .main-body .sec-label { display: block; background: none; padding: 0; margin: 0 0 .6rem; border-radius: 0;
    font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #64748b; }
.main-page .main-body h1 + p, .main-page .main-body .form-sub, .main-page .main-body .list-sub, .main-page .main-body .hdr-sub {
    font-size: .82rem; line-height: 1.55; color: #64748b; max-width: 80ch; margin-top: .5rem; }
.main-page .main-body .form-header, .main-page .main-body .list-header { margin-bottom: 1.5rem; }
.main-page .main-body .done-title { font-size: 1.2rem; }
.main-page .main-body .modal-title { font-size: 1.1rem; }

/* 입력칸 — Roost rs-field 크기 */
.main-page .main-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.main-page .main-body select, .main-page .main-body textarea {
    font-size: .84rem; padding: .4rem .6rem; border: 1px solid #e2e8f0; border-radius: 5px;
    background-color: #ffffff; color: #0f172a; line-height: 1.4; }
.main-page .main-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.main-page .main-body select { min-height: 32px; }
.main-page .main-body input:focus, .main-page .main-body select:focus, .main-page .main-body textarea:focus {
    outline: none; border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15,23,42,.08); }
.main-page .main-body input::placeholder, .main-page .main-body textarea::placeholder { color: #94a3b8; }
.main-page .main-body input:disabled, .main-page .main-body select:disabled, .main-page .main-body textarea:disabled { background-color: #f8fafc; color: #64748b; }
.main-page .main-body .field { gap: .3rem; }
.main-page .main-body .field label, .main-page .main-body .modal-label, .main-page .main-body .ed-f > span {
    font-size: .8rem; font-weight: 600; color: #475569; }
.main-page .main-body .hint, .main-page .main-body .field-hint, .main-page .main-body .ed-hint { font-size: .72rem; line-height: 1.5; }
.main-page .main-body .field-row { gap: .6rem .9rem; }
.main-page .main-body .form-body { gap: 1rem; }

/* 단추 — 채움 = 검정, 테두리 = 흰 바탕 회색 선. 모두 5px 모서리, .8rem */
.main-page .main-body .cta-primary, .main-page .main-body .act-primary, .main-page .main-body .btn-primary,
.main-page .main-body .gate-cta, .main-page .main-body .btn.primary {
    background: #0f172a; border: 1px solid #0f172a; color: #ffffff; border-radius: 5px;
    font-size: .8rem; font-weight: 700; padding: .5rem 1.1rem; min-height: 0; line-height: 1.3; }
.main-page .main-body .cta-primary:hover, .main-page .main-body .act-primary:hover, .main-page .main-body .btn-primary:hover,
.main-page .main-body .gate-cta:hover, .main-page .main-body .btn.primary:hover { background: #1e293b; border-color: #1e293b; color: #fff; }
.main-page .main-body .cta-ghost, .main-page .main-body .cta-ghost-btn, .main-page .main-body .btn-ghost,
.main-page .main-body .act-btn, .main-page .main-body .t-btn {
    background: #ffffff; border: 1px solid #e2e8f0; color: #0f172a; border-radius: 5px;
    font-size: .8rem; font-weight: 600; padding: .5rem 1.1rem; line-height: 1.3; }
.main-page .main-body .cta-ghost:hover, .main-page .main-body .cta-ghost-btn:hover, .main-page .main-body .btn-ghost:hover,
.main-page .main-body .act-btn:hover, .main-page .main-body .t-btn:hover { border-color: #94a3b8; background: #ffffff; color: #0f172a; }
.main-page .main-body .actions { gap: .5rem; }

/* 카드 — 흰 바탕, 옅은 선, 10px, 아주 옅은 그림자 */
.main-page .main-body .product-card, .main-page .main-body .callout, .main-page .main-body .gate-card,
.main-page .main-body .card, .main-page .main-body .t-card, .main-page .main-body .tile, .main-page .main-body .kpi {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.main-page .main-body .product-card { padding: 1.1rem 1.2rem; gap: .8rem; }
.main-page .main-body .product-no, .main-page .main-body .card-k, .main-page .main-body .block-k {
    font-size: .95rem; font-weight: 800; color: #0f172a; }
.main-page .main-body .callout strong { font-size: .86rem; color: #0f172a; }
.main-page .main-body .callout p { font-size: .8rem; }
.main-page .main-body .error-box { border-radius: 6px; font-size: .8rem; background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.main-page .main-body .kpi-value { font-size: 1.3rem; }
.main-page .main-body .kpi-label { font-size: .72rem; font-weight: 600; }

/* 표 — Roost rs-th / rs-td */
.main-page .main-body table th { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #64748b; background: #f8fafc; padding: .7rem .9rem; }
.main-page .main-body table td { font-size: .83rem; padding: .85rem .9rem; }

/* 칩 — 필터 줄 */
.main-page .main-body .chip { font-size: .76rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px;
    border: 1px solid #e2e8f0; background: #ffffff; color: #334155; }
.main-page .main-body .chip:hover { border-color: #94a3b8; }
.main-page .main-body .chip.chip-active, .main-page .main-body .chip.active { background: #0f172a; border-color: #0f172a; color: #ffffff; }

/* 팝업 판 */
.main-page .main-body .modal { border-radius: 10px; }

/* [2026-11-14 Sonny "로고 통일"] 브랜드·조직 로고 정본 — Layout/BrandLogo.razor 가 쓴다. 글자 칸 = 검정, 모서리 8%. */
.bm-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8%; overflow: hidden; vertical-align: middle; }
.bm-logo-text { background: #0f172a; color: #ffffff; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.bm-logo-img { object-fit: cover; background: #ffffff; border: 1px solid #e2e8f0; }

/* 채움 단추가 <a> 일 때도 단추 모양이 되게 */
.main-page .main-body .cta-primary, .main-page .main-body .btn-primary, .main-page .main-body .gate-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; text-decoration: none; white-space: nowrap; cursor: pointer; }

/* [2026-11-14 Sonny "파일 선택 이런 식으로밖에 안 돼? 안 예뻐"] 파일 칸 = 점선 상자(끌어다 놓기 가능) + 검정 작은 단추.
   <InputFile> 은 브라우저 기본 <input type=file> 이라, 상자·단추 모양만 바꾸고 동작(선택·끌어 놓기·접근성)은 그대로 둔다. */
.main-page .main-body input[type="file"] {
    display: block; width: 100%; box-sizing: border-box; cursor: pointer;
    padding: .7rem .8rem; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc;
    font-size: .8rem; color: #64748b; line-height: 1.6; min-height: 0; height: auto; }
.main-page .main-body input[type="file"]:hover { border-color: #94a3b8; background: #f1f5f9; }
.main-page .main-body input[type="file"]:focus-visible { outline: none; border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15,23,42,.08); }
.main-page .main-body input[type="file"]::file-selector-button {
    margin-right: .75rem; padding: .4rem .9rem; border: 1px solid #0f172a; border-radius: 5px;
    background: #0f172a; color: #ffffff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; transition: opacity .14s; }
.main-page .main-body input[type="file"]::file-selector-button:hover { opacity: .85; }

/* [2026-11-15 Sonny "전면도 안쪽처럼 흑백 위주로"] 랜딩(.bm-page)도 입력칸·단추가 본문 글꼴(Inter + Noto Sans KR)을 따른다. */
html .bm-page button, html[data-ui-lang] .bm-page button, html[data-ui-lang] .bm-page input,
html[data-ui-lang] .bm-page select, html[data-ui-lang] .bm-page textarea { font-family: inherit; }

/* [2026-11-15 Sonny] 포인트 마켓 — 안내 내용과 두 목록을 /vouchermarket 한 화면에 합쳤다(탭·구분 없음). */
.rs-embed { margin-top: 18px; }
.pm-about-sec { margin-top: 40px; padding-top: 28px; border-top: 1px solid #e2e8f0; }
.pm-about-h { margin: 28px 0 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: #0f172a; }
.pm-about-h:first-child { margin-top: 0; }
.bpm-table { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; }
.bpm-row { display: grid; grid-template-columns: 1.4fr .5fr 1.6fr; gap: 16px; padding: 13px 18px; border-top: 1px solid #e2e8f0; font-size: .84rem; line-height: 1.6; color: #334155; align-items: center; }
.bpm-row:first-child { border-top: 0; }
.bpm-head { background: #f8fafc; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.bpm-row span:first-child { color: #0f172a; font-weight: 600; }
.bpm-on { background: #f8fafc; box-shadow: inset 3px 0 0 #0f172a; }
.bpm-yes { display: inline-block; font-size: .72rem; font-weight: 700; color: #15803d; background: #dcfce7; padding: 2px 10px; border-radius: 999px; }
.pm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.pm-step { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 16px 18px; }
.pm-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #0f172a; color: #fff; font-size: .72rem; font-weight: 700; }
.pm-step b { font-size: .88rem; font-weight: 700; color: #0f172a; }
.pm-step p { margin: 8px 0 0; font-size: .82rem; line-height: 1.6; color: #475569; }
.pm-about-note { margin: 14px 0 0; font-size: .8rem; color: #64748b; }
@media (max-width: 800px) {
    .bpm-row { grid-template-columns: 1fr; gap: 4px; }
    .bpm-head { display: none; }
    .pm-steps { grid-template-columns: 1fr; }
}
/* 포인트 마켓 설명 페이지(/point-market) — 히어로 그림, 끼워 넣은 목록, 큰 표. */
.cp-hero-art.bpm-hero-art { max-width: 380px; border-radius: 18px; box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .45); }
.bpm-list { margin-top: 22px; }
.bpm-table-lg { margin-top: 24px; border-radius: 14px; }
.bpm-table-lg .bpm-row { padding: 16px 20px; font-size: 14.5px; }
.bpm-table-lg .bpm-head { font-size: 12px; }
@media (max-width: 800px) {
    .cp-hero-in .cp-hero-art.bpm-hero-art { max-width: 300px; }
}
/* 사는 단추의 글이 두 줄로 접히지 않게 ("로그인하고 구매"). */
.mk-page a.buy-btn, .mk-embed a.buy-btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; font-size: 12px; }