/* 단일 라이트 테마 (2026-08-17 운영자 지시로 다크에서 전환).
       유입 사이트가 어떤 색·톤이든 튀지 않도록 무채색 표면 + 잉크 액션 1색으로 고정한다.
       브랜드 색을 쓰지 않는 대신 상단 유입 배너의 favicon 이 맥락을 준다.
       color-scheme:light 로 OS 다크모드의 폼 컨트롤 강제 반전도 막는다. */
    :root {
      color-scheme: light;
      --bg:#f2f4f7; --surface:#ffffff; --surface2:#f8f9fb; --surface3:#eef1f5;
      --border:#e6e9ee; --border2:#d5dae2;
      --text:#15181d; --muted:#5b6270; --faint:#646b78;
      --accent:#1c1f26; --accent-hover:#343943;
      --link:#2f5fd0; --link-soft:rgba(47,95,208,.09);
      --ink:#1c1f26; --on-ink:#ffffff; --on-ink-muted:rgba(255,255,255,.64);
      --green:#15803d; --green-soft:#eaf6ef; --green-line:#bfe0cd; --red:#b42318;
      --r-sm:8px; --r-md:12px; --r-lg:16px;
      --shadow:0 1px 2px rgba(20,23,28,.05), 0 10px 30px rgba(20,23,28,.07);
      --shadow-pop:0 10px 30px rgba(20,23,28,.14);
      --page-max-w:1080px; --page-gutter:clamp(1rem, 4vw, 2rem);
    }
    * { box-sizing: border-box; }
    body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
      background:
        radial-gradient(1200px 560px at 50% -10%, #ffffff, rgba(255,255,255,0) 62%),
        var(--bg);
      background-attachment: fixed;
      color:var(--text); min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center;
      -webkit-font-smoothing:antialiased; overflow-wrap:break-word; }
    /* 한국어만 낱말 단위로 끊는다(ads 와 같은 한 줄). 클래스마다 keep-all 을 걸면 일본어·중국어 문장이
       끊을 곳 없는 한 덩이가 되어 카드를 넘고 지면이 가로로 밀린다(일본어 허브 360px 에서 57px). */
    :lang(ko) { word-break: keep-all; }
    :focus-visible { outline:2px solid var(--link); outline-offset:2px; }

    /* ── GNB (운영자 지시 2026-08-17): 언어 변경·프로필을 카드 안에서 빼내 상단 바로 모은다.
       우측 컨트롤 순서는 패밀리 공통 규약(언어 → 로그인/프로필)을 따르고, 닫기(임베드)만 그 뒤에 온다.
       모양은 ads.mrlatte.net 과 같은 전폭 sticky 바다(운영자 지시 2026-09-01 "ads처럼" — 구 카드폭
       떠 있는 바를 대체). 내용은 ads와 같은 프레임과 거터로 본문, 푸터에 정렬된다. ── */
    .gnb { position:sticky; top:0; z-index:60; width:100%;
      background:rgba(242,244,247,.82); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
      border-bottom:1px solid var(--border); }
    .gnb-inner { display:flex; align-items:center; justify-content:space-between; gap:12px;
      height:56px; max-width:var(--page-max-w); margin-inline:auto; padding-inline:var(--page-gutter); }
    .gnb-h1 { margin:0; min-width:0; display:flex; align-items:center; gap:6px; font-size:15px; font-weight:800; letter-spacing:-.01em; }
    .gnb-h1 > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .gnb-brand { color:var(--muted); font-weight:700; flex-shrink:0; }
    /* Mr. Latte 마크(서브도메인 공통, ads 와 같은 파일). 글자와 baseline 으로 맞추면 그림이 글자선 위로
       떠서 행이 center 정렬이다. 크기를 박아 두어야 그림이 늦게 와도 워드마크가 밀리지 않는다. */
    .gnb-mark { display:block; flex-shrink:0; width:28px; height:28px; margin-right:2px; }
    /* 좁은 폭에서는 접두(Mr. Latte)를 감추고 마크가 그 자리를 맡는다. 「Mr. Latte」는 「라떼군」보다 25px
       길어, 로그인 뒤 아바타까지 서면 영어·일본어 지면 이름이 말줄임으로 잘린다. 한국어는 320px 에서도
       들어가므로 접두를 둔다. 언어는 i18n 이 html[lang] 에 적는다. */
    @media (max-width:430px) { html:not([lang="ko"]) .gnb-brand { display:none; } }
    .gnb-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .gnb-profile { position:relative; display:flex; }
    .gnb-profile[hidden] { display:none; }
    .page { width:100%; max-width:var(--page-max-w); display:flex; flex-direction:column; align-items:center; padding:24px var(--page-gutter); flex:1; }
    /* PC에서는 ads와 같은 프레임 안에 계정 요약과 결제 관리를 나란히 둔다. */
    .hub-hero { display:none; }
    @media (min-width:768px) {
      .hub-hero { display:block; width:100%; margin:24px 0 28px; text-align:left; }
      .hub-eyebrow { display:inline-flex; align-items:center; padding:5px 13px; border:1px solid var(--border2);
        border-radius:999px; background:var(--surface); font-size:12px; font-weight:600; color:var(--muted); }
      .hub-title { margin:14px 0 0; font-size:32px; font-weight:800; letter-spacing:-.02em; color:var(--text);
        text-wrap:balance; }
    }
    .card { width:100%; max-width:100%; background:var(--surface); border:1px solid var(--border);
      border-radius:20px; padding:26px 24px 22px; margin:0 0 24px; box-shadow:var(--shadow); }
    /* 섹션 라벨. text-transform:uppercase 는 쓰지 않는다 ('Mr. Latte' 가 'MR. LATTE' 로 뭉개진다). */
    h2 { font-size:12.5px; font-weight:700; margin:26px 0 12px; color:var(--muted); letter-spacing:0; }
    .sub { font-size:13px; color:var(--muted); margin:0 0 22px; line-height:1.6; text-wrap:pretty; }
    /* 섹션 제목 바로 아래 한 줄 설명, h2 의 아래 여백을 흡수해 붙여 놓는다. */
    .sec-help { font-size:12px; color:var(--faint); margin:-6px 0 12px; line-height:1.6; text-wrap:pretty; }
    .row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .email { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* 프로필 아바타 + 팝오버 */
    .acc-profile-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--border2); background:var(--surface2); cursor:pointer; padding:0; overflow:hidden; transition:border-color .15s; }
    .acc-profile-btn:hover { border-color:var(--faint); }
    .acc-avatar { width:100%; height:100%; object-fit:cover; }
    .acc-avatar-fb { font-size:13px; font-weight:700; color:var(--text); }
    .acc-popover { position:absolute; right:0; top:42px; z-index:50; width:264px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-pop); padding:14px; }
    .acc-popover[hidden] { display:none; }
    .acc-pop-id { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:10px; }
    .acc-pop-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
    .acc-pop-avatar-fb { width:40px; height:40px; border-radius:50%; background:var(--surface3); display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:var(--text); flex-shrink:0; }
    .acc-pop-text { min-width:0; }
    .acc-pop-name { display:block; font-weight:700; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .acc-pop-email { display:block; margin-top:1px; }
    .acc-pop-actions { display:grid; gap:8px; }
    .acc-pop-action { display:flex; align-items:center; width:100%; min-height:48px; padding:10px 12px; text-align:left; text-decoration:none; line-height:1.4; border:1px solid var(--border2); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s,background .15s; }
    .acc-pop-action:hover { border-color:var(--faint); background:var(--surface3); }

    /* ── balance hero ──
       어두운 단색 배경 + 밝은 글씨(운영자 지시 2026-08-17). 라이트 카드 안에서 이 블록만 반전된다.
       라이트 지면의 유일한 다크 블록이라 잔액이 저절로 시선을 먹는다(강조를 색으로 하지 않는 대신).
       그라데이션·광원 레이어는 쓰지 않는다. */
    .balance-box { border:1px solid var(--ink); border-radius:var(--r-lg);
      padding:20px 22px; margin:20px 0 4px; background:var(--ink); color:var(--on-ink); }
    .balance-label { font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--on-ink-muted); }
    .balance { display:flex; align-items:baseline; gap:8px; margin-top:8px; }
    /* 🔴 잔액 숫자는 골드가 아니라 공통 밝은색이다(운영자 지시 2026-08-17). 금화 글리프도 같은 날
       제거했다. 루트 AGENTS 「크래딧/결제」의 surface-adaptive 골드는 이 허브에 적용하지 않는다.
       tabular-nums 는 카운트업 중 자릿수 폭이 흔들리지 않게 하는 장치이니 함께 유지할 것. */
    .balance .num { font-size:38px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--on-ink);
      font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
    .balance .unit { font-size:14px; font-weight:600; color:var(--on-ink-muted); }
    .balance-help { font-size:12px; color:var(--on-ink-muted); margin:10px 0 0; line-height:1.6; }

    /* ── top-up result banner (INFRA-4) ── */
    .topup-banner { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border-radius:var(--r-md);
      margin:18px 0 4px; font-size:13px; line-height:1.5; border:1px solid transparent; }
    .topup-banner.ok { background:var(--green-soft); border-color:var(--green-line); color:var(--text); }
    .topup-banner.err { background:#fef4f2; border-color:#f3c9c3; color:var(--text); }
    .topup-banner .tb-ic { font-size:16px; line-height:1.3; flex-shrink:0; }
    .topup-banner .tb-body { flex:1; min-width:0; }
    .topup-banner .tb-title { font-weight:700; }
    .topup-banner .tb-msg { color:var(--muted); margin-top:2px; }
    .topup-banner .tb-back { display:inline-block; margin-top:9px; font-weight:700; font-size:13px;
      color:#fff; background:var(--accent); border-radius:var(--r-sm); padding:8px 14px; text-decoration:none; }
    .topup-banner .tb-back:hover { background:var(--accent-hover); }

    label { display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin:14px 0 6px; }
    input, select { width:100%; padding:11px 12px; border-radius:var(--r-sm); border:1px solid var(--border2);
      background:var(--surface); color:var(--text); font-size:14px; transition:border-color .15s, box-shadow .15s; }
    input:focus, select:focus { outline:none; border-color:var(--link); box-shadow:0 0 0 3px var(--link-soft); }
    input::placeholder { color:var(--faint); }
    button { font:inherit; cursor:pointer; border:none; border-radius:var(--r-sm); transition:background .15s, border-color .15s, color .15s; }
    .btn-primary { background:var(--accent); color:#fff; font-weight:700; padding:11px 16px; font-size:14px; }
    .btn-primary:hover { background:var(--accent-hover); }
    .btn-primary:disabled { opacity:.45; cursor:default; background:var(--accent); }
    .btn-outline { background:var(--surface); color:var(--text); border:1px solid var(--border2); padding:9px 14px; font-size:13px; }
    .btn-outline:hover { background:var(--surface3); border-color:var(--faint); }
    /* 구글 공식 라이트 버튼: 흰 배경 + 회색 테두리. 카드도 흰색이라 테두리·그림자로 형태를 준다. */
    .btn-google { display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#1f1f1f;
      font-weight:700; padding:13px 16px; font-size:14px; width:100%; border-radius:var(--r-sm);
      border:1px solid var(--border2); box-shadow:0 1px 2px rgba(20,23,28,.06); }
    .btn-google:hover { background:var(--surface2); border-color:var(--faint); }

    /* 로그인 전 신뢰 요약(체크 3줄) */
    .facts { list-style:none; margin:16px 0 0; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-md);
      background:var(--surface2); font-size:12.5px; line-height:1.65; color:var(--muted); }
    .facts li { position:relative; padding-left:20px; text-wrap:pretty; }
    .facts li + li { margin-top:7px; }
    .facts li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:800; }

    /* ── packages ── */
    .pkgs { display:flex; flex-direction:column; gap:9px; }
    .pkg { display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:13px 15px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface2);
      transition:border-color .15s, background .15s; }
    .pkg:hover { border-color:var(--border2); background:var(--surface3); }
    .pkg > div:first-child { min-width:0; flex:1; }
    .pkg .pkg-name { font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    /* 좁은 폭에선 flex-wrap 으로 배지가 아랫줄로 랩된다. */
    /* 푸터: 패밀리 공통 캐논(root DESIGN.md 「패밀리 푸터」) — 전폭 잉크 밴드 +
       [브랜드·태그라인 | 허브 링크 | 문의] 컬럼 + 헤어라인 아래 © 행. Official sources 열은
       이 사이트와 무관해 뺀다(운영자 지시). 링크는 실재하는 것만(정직성 — dpk Footer.tsx 원칙).
       🔴 모바일에서 링크 컬럼을 1열로 쌓지 않는다 — .foot-cols 가 2열로 나란히 두고(세로 길이 절반),
       640px 부터는 display:contents 로 사라져 컬럼이 .foot-grid 의 직접 자식처럼 놓인다. */
    .site-foot { width:100%; background:var(--ink); color:var(--on-ink); padding:32px 0 20px; margin-top:24px; }
    .site-foot-inner { width:100%; max-width:var(--page-max-w); padding-inline:var(--page-gutter); margin-inline:auto; }
    .foot-grid { display:grid; gap:24px; grid-template-columns:1fr; }
    .foot-cols { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 16px; }
    @media (min-width:640px) {
      .foot-grid { grid-template-columns:1.5fr 1fr 1fr; gap:32px; }
      .foot-cols { display:contents; }
    }
    .fbrand { margin:0; font-size:17px; font-weight:900; letter-spacing:-.01em; color:#fff; }
    .ftag { margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--on-ink-muted); text-wrap:pretty; }
    .fh { margin:0 0 6px; font-size:13px; font-weight:700; color:#fff; }
    .flinks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
    /* 링크 한 줄 = 24px(WCAG 2.5.8 최소 타깃). 줄 간격을 따로 벌리지 않는다. */
    .flinks a, .flinks button { display:inline-flex; align-items:center; min-height:24px; padding:0; border:0; background:none; font:inherit;
      font-size:13px; line-height:1.4; color:var(--on-ink-muted); cursor:pointer; text-decoration:none; text-align:left; }
    .flinks a:hover, .flinks button:hover { color:#fff; text-decoration:underline; }
    .foot-bottom { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:24px; border-top:1px solid rgba(255,255,255,.12); padding-top:14px;
      font-size:12px; color:rgba(255,255,255,.55); }
    .foot-mark { font-size:15px; font-weight:900; font-style:italic; color:rgba(255,255,255,.72); }
    /* 소셜: www.mrlatte.net 과 동일 세트 — © 행 우측 정렬. 아이콘 16px, 타깃 24px 정사각. mrlatte 계열에만 둔다. */
    .foot-social { margin-left:auto; display:flex; gap:6px; }
    .foot-social a { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:rgba(255,255,255,.55); }
    .foot-social a:hover { color:#fff; }
    .foot-social svg { width:16px; height:16px; fill:currentColor; }
    html.embed .site-foot { display:none; } /* 임베드 모달에는 마케팅 푸터를 싣지 않는다 */
    .origin-banner { display:flex; align-items:center; gap:10px; padding:9px 12px 9px 8px; width:100%; max-width:100%;
      margin:0 0 12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);
      box-shadow:var(--shadow); font-size:12.5px; color:var(--muted); }
    .origin-banner[hidden] { display:none; }
    /* 재로그인 안내(2026-08-12): 서비스에서 넘어온 방문자에게 '왜 여기서 또 로그인하나'를 설명한다.
       설명이 없으면 로그인 화면 자체가 오류처럼 읽힌다(운영자 신고). 유입 서비스가 잡힐 때만 노출. */
    .signin-why { margin:0 0 16px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-md);
      background:var(--surface2); font-size:12.5px; line-height:1.7; color:var(--muted); text-wrap:pretty; }
    .signin-why[hidden] { display:none; }
    /* 돌아가기는 맨 왼쪽 + 왼쪽 화살표. 오른쪽 끝에 '→' 로 두면 앞으로 나아가는 동작으로 읽힌다(운영자 지적). */
    .origin-banner .origin-back { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; padding:5px 10px 5px 8px;
      border-radius:999px; color:var(--link); text-decoration:none; font-weight:700; white-space:nowrap; transition:background .15s; }
    .origin-banner .origin-back:hover { background:var(--link-soft); }
    .origin-sep { width:1px; align-self:stretch; margin:3px 0; background:var(--border); flex-shrink:0; }
    /* 유입처 favicon: 어디서 왔는지가 한눈에 들어와야 해서 크게 잡는다(구 18px). */
    .origin-banner img { border-radius:7px; flex-shrink:0; }
    .origin-banner .origin-text { min-width:0; line-height:1.45; text-wrap:balance; }
    .sub-row-state { font-size:12px; color:var(--muted); margin-top:2px; }
    .sub-cancel-btn { background:var(--surface); color:var(--red); border:1px solid var(--border2); padding:7px 12px; font-size:12.5px; border-radius:var(--r-sm); flex-shrink:0; }
    .sub-cancel-btn:hover { border-color:#e3b5b0; background:#fef4f2; }
    .sub-resume-btn { background:var(--surface); color:var(--text); border:1px solid var(--border2); padding:7px 12px; font-size:12.5px; border-radius:var(--r-sm); flex-shrink:0; }
    .sub-resume-btn:hover { background:var(--surface3); }
    .pkg .pkg-badge { display:inline-block; padding:1.5px 8px; border-radius:999px; white-space:nowrap;
      font-size:11px; font-weight:700; background:var(--green-soft); color:var(--green); border:1px solid var(--green-line); }
    .pkg .pkg-sub { font-size:12px; color:var(--muted); margin-top:2px; }
    .pkg .pkg-sub b { color:var(--text); font-weight:700; }
    .pkg button { background:var(--accent); color:#fff; font-weight:700; padding:8px 15px; font-size:13px; flex-shrink:0; border:1px solid var(--accent); }
    .pkg button:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
    /* JON-693: 구독 vs 충전 버튼 시각 구분. 구독=잉크 채움(↻ 반복결제), 충전=아웃라인(＋ 일회성). */
    .pkg button.pkg-btn--topup { background:var(--surface); color:var(--text); border-color:var(--border2); }
    .pkg button.pkg-btn--topup:hover { background:var(--surface3); border-color:var(--faint); }
    .pkg-btn--sub::before { content:"↻\00a0"; font-weight:700; }
    .pkg-btn--topup::before { content:"＋\00a0"; font-weight:700; }

    /* ── payments / ledger (JON-665) ── */
    .pays { display:flex; flex-direction:column; }
    .pay { display:flex; gap:12px; align-items:center; padding:12px 2px; border-bottom:1px solid var(--border); }
    .pay:last-child { border-bottom:none; }
    .pay-ic { width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
      font-size:15px; font-weight:800; flex-shrink:0; background:var(--surface3); color:var(--muted); }
    .pay-ic.pos { color:var(--green); background:var(--green-soft); }
    .pay-main { flex:1; min-width:0; }
    .pay-row1 { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
    .pay-type { font-size:13px; font-weight:700; }
    .pay-delta { font-size:14px; font-weight:800; white-space:nowrap; }
    .pay-delta.pos { color:var(--green); }
    .pay-delta.neg { color:var(--muted); }
    .pay-row2 { display:flex; justify-content:space-between; gap:10px; margin-top:3px; }
    .pay-date, .pay-bal { font-size:11.5px; color:var(--faint); white-space:nowrap; }
    .pay-desc { font-size:11.5px; color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pays-more { margin-top:12px; text-align:center; }
    .pays-more .link { font-size:12.5px; }

    /* ── Mr. Latte family directory + 내 서비스 (JON-666) ── */
    .family { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
    .fam { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border);
      border-radius:var(--r-md); background:var(--surface2); text-decoration:none; color:var(--text); min-width:0;
      transition:border-color .15s, background .15s, box-shadow .15s, transform .12s; }
    .fam:hover { border-color:var(--border2); background:var(--surface); transform:translateY(-1px); box-shadow:0 2px 8px rgba(20,23,28,.07); }
    /* favicon 은 각 도메인에서 직접 로드(자동 갱신), 로드 전/실패 시 이름 첫 글자 배지 노출 */
    .fam-ico { position:relative; width:28px; height:28px; flex-shrink:0; border-radius:8px; overflow:hidden; background:var(--surface3); }
    .fam-letter { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted);
      font-size:13px; font-weight:800; text-transform:uppercase; }
    .fam-ico img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4px;
      background:#fff; opacity:0; transition:opacity .12s; }
    .fam-ico img.loaded { opacity:1; }
    .fam-name { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    /* '내 서비스'는 전체 디렉터리와 항목이 겹치므로 흰 표면 + 진한 테두리로 한 단 올려 구분한다(색 강조 없이). */
    #myservices .fam { border-color:var(--border2); background:var(--surface); box-shadow:0 1px 2px rgba(20,23,28,.05); }
    .plan-line { display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,.16); font-size:12.5px; flex-wrap:wrap; }
    /* 플랜이 둘 이상이면 두 번째 줄부터는 간격을 좁혀 한 덩어리로 읽히게 한다. */
    .plan-line + .plan-line { margin-top:8px; padding-top:8px; }
    .plan-line-label { font-weight:700; color:var(--on-ink-muted); font-size:11.5px; }
    .plan-line-val { font-weight:700; color:var(--on-ink); }
    @media (max-width:380px) { .family { grid-template-columns:1fr; } }
    /* 좁은 화면에서는 카드 내부 여백을 줄인다. */
    @media (max-width:430px) {
      .card { padding:20px 16px 18px; border-radius:16px; }
      .balance .num { font-size:32px; }
      .pkg { padding:12px 12px; }
      .pkg button { padding:8px 12px; }
    }

    .muted { font-size:12px; color:var(--muted); }
    .ok { color:var(--green); } .err { color:var(--red); }
    .admin-box { border:1px solid #ded7f5; border-radius:var(--r-md); padding:16px; margin-top:10px;
      background:linear-gradient(160deg, #faf8ff, transparent), var(--surface2); }
    .footer { margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
    .link { color:var(--muted); font-size:12px; text-decoration:underline; background:none; padding:0; }
    .link:hover { color:var(--text); }

    /* ── 커스텀 확인 다이얼로그 (네이티브 confirm 금지 공통 룰) ── */
    .dlg-overlay { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
      padding:20px; background:rgba(20,23,28,.45); }
    .dlg-overlay[hidden] { display:none; }
    .dlg { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-pop); }
    .dlg-title { font-size:15px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em; }
    .dlg-msg { font-size:13px; line-height:1.65; color:var(--muted); margin:0; text-wrap:pretty; }
    .dlg-actions { display:flex; gap:8px; margin-top:18px; }
    .dlg-actions button { flex:1; padding:10px 12px; font-size:13px; font-weight:700; }
    .dlg-cancel { background:var(--surface); color:var(--text); border:1px solid var(--border2); }
    .dlg-cancel:hover { background:var(--surface3); }
    .dlg-ok { background:var(--accent); color:#fff; }
    .dlg-ok:hover { background:var(--accent-hover); }

    .btn-close { width:32px; height:32px; border-radius:var(--r-sm); background:var(--surface2); color:var(--muted);
      border:1px solid var(--border2); font-size:20px; line-height:1; }
    .btn-close:hover { color:var(--text); background:var(--surface3); border-color:var(--faint); }

    /* ── custom language select (fleet standard: .lang-dd, 네이티브 select 미사용) ── */
    .lang-dd { position:relative; }
    .lang-dd-btn { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
      color:var(--muted); border:1px solid var(--border2); border-radius:var(--r-sm); padding:7px 10px;
      background:var(--surface); line-height:1; white-space:nowrap; }
    .lang-dd-btn:hover { color:var(--text); background:var(--surface3); border-color:var(--faint); }
    .lang-dd-btn:focus-visible { outline:2px solid var(--link); outline-offset:1px; }
    .lang-dd-globe { flex-shrink:0; opacity:.85; }
    .lang-dd-caret { transition:transform .18s; flex-shrink:0; }
    .lang-dd-btn[aria-expanded="true"] .lang-dd-caret { transform:rotate(180deg); }
    .lang-dd-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:140px; margin:0; padding:5px;
      list-style:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
      box-shadow:var(--shadow-pop); z-index:100; }
    .lang-dd-menu[hidden] { display:none; }
    .lang-dd-item { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
      padding:9px 11px; border-radius:6px; font-size:13px; font-weight:500; color:var(--text);
      background:transparent; text-align:left; }
    .lang-dd-item:hover { background:var(--surface3); }
    .lang-dd-item[aria-selected="true"] { font-weight:700; }
    .lang-dd-check { color:var(--link); visibility:hidden; }
    .lang-dd-item[aria-selected="true"] .lang-dd-check { visibility:visible; }

    .account-dashboard, .hub-panel, .signin-actions { min-width:0; }
    .account-card .footer:has(#acc-back[hidden]) { display:none; }
    @media(min-width:900px) {
      html:not(.embed) .account-card { border:0; padding:0; background:transparent; box-shadow:none; }
      html:not(.embed) .account-card > .sub { font-size:15px; margin-bottom:24px; }
      html:not(.embed) .account-dashboard { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); grid-template-areas:"balance billing" "profile billing" "services services"; gap:24px; align-items:start; }
      html:not(.embed) .balance-box { grid-area:balance; margin:0; padding:26px 24px; }
      html:not(.embed) .account-billing { grid-area:billing; }
      html:not(.embed) .account-profile { grid-area:profile; }
      html:not(.embed) .account-services { grid-area:services; }
      html:not(.embed) .hub-panel { border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; background:var(--surface); }
      html:not(.embed) .hub-panel > h2:first-child, html:not(.embed) #myservices-section > h2 { margin-top:0; }
      html:not(.embed) .hub-panel h2 { font-size:15px; color:var(--text); }
      html:not(.embed) .family { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
      html:not(.embed) .fam { padding:14px; }
      html:not(.embed) #signed-out { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; padding:32px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
      html:not(.embed) #signed-out .facts { margin:0; padding:24px; font-size:14px; }
      html:not(.embed) #signed-out .facts li + li { margin-top:14px; }
      html:not(.embed) .topup-banner { margin:0 0 24px; }
    }

    html.embed body { background:var(--surface); }
    /* 모달 임베드 안에서는 카드가 풀블리드라 바도 전폭으로 편다. */
    html.embed .gnb { background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; }
    html.embed .gnb-inner { max-width:none; height:50px; padding-inline:16px; }
    html.embed .page { flex:1; max-width:none; padding:0; }
    html.embed .hub-hero { display:none; }
    html.embed .card { flex:1; margin:0; max-width:none; border:none; border-radius:0; box-shadow:none; }
    /* 모달 임베드에선 유입 배너를 카드 위 헤더 띠로 붙인다(떠 있는 박스로 두면 위쪽에 빈 띠가 생긴다). */
    html.embed .origin-banner { margin:0; max-width:none; border-radius:0; border-width:0 0 1px; box-shadow:none; background:var(--surface2); }
    [hidden] { display:none !important; }