:root{
    /* ===== 참택스 리디자인 (2026-07) — 40~60대 색채 선호도 연구 + 2026 컬러 트렌드 +
       한국 전통 재물운 색채 상징을 근거로 재구성. 상세 근거는 가이드북 Part 5-10 참고 ===== */
    /* ⚠️ 주의: 이 색상 팔레트는 아래 5개 서브페이지에도 각자 :root로 중복 정의되어 있음
       (korea-resident-us-lottery-tax.html, megamillions-tax.html, powerball-tax.html,
        us-lottery-take-home.html, us-lottery-tax-rate.html) — 여기서 색상을 바꾸면
       반드시 저 5개 파일도 같이 고쳐야 함. 한 곳만 고치면 이번처럼 --status-amber 같은
       변수가 일부 페이지에만 빠지는 문제가 재발함. 공유 CSS 파일로 합치는 걸 권장함 */
    --navy:#262420;      /* 먹빛(warm ink) — 순검정 대신 온기 있는 다크톤 */
    --teal:#155445;      /* 깊은 청록-초록 — 40~60대 선호도 데이터 + 오방색 "정화·시작" 의미 반영 */
    --seafoam:#155445;
    --mint:#1F6E5C;
    --indigo:#35507A;    /* 쪽빛 — 서브 포인트 (버튼 hover, 보조 강조) */
    --gold:#9C6F1E;      /* 금색 — 재물운 상징, 아주 소량만 사용(도장·소형 강조) */
    --bg:#FAF6EC;        /* 웜 아이보리(한지톤) — 갈색 비선호 데이터 반영해 밝게 */
    --card:#FFFEF9;
    --text-dark:#262420; /* 먹빛 */
    --text-muted:#544E42;
    --border:#E8E2D3;    /* 웜톤 보더 (기존 회색 대신) */

    --fs-hero:42px;    /* 결과 숫자 */
    --fs-h1:28px;      /* 메인 제목 */
    --fs-h2:22px;      /* 큰 섹션 */
    --fs-h3:20px;      /* 카드 제목 */
    --fs-body:18px;    /* 본문 (시니어 가독성 연구 권장치 반영, 17→18px) */
    --fs-note:17px;    /* 설명 */
    --fs-small:16px;   /* 최소 (15→16px, 시니어 가독성 연구 최소 권장치) */
    --fs-emphasis:25px; /* 카드 강조 숫자 */

    --grad-soft: linear-gradient(150deg, #EAF3EE 0%, #FCFBF6 55%, #FFFEF9 100%);
    --grad-amber: linear-gradient(150deg, #FBF1DE 0%, #FFFDF9 100%);
    --shadow-card: 0 1px 0 rgba(var(--ink-rgb),0.06);
    --shadow-btn: 0 6px 14px rgba(21,84,69,0.22);
    --status-red:#C0392B;
    --status-red-rgb: 192,57,43;
    --status-amber:#946716; /* 원래 #B8862E는 명암비 3.00:1로 경고 문구(16px bold) WCAG AA(4.5:1) 미달 — 톤 유지하며 더 진하게 조정 */
    /* teal/navy/status-red/gold는 "어두운 배경 위의 글자색"으로 쓰일 걸 기준으로 다크모드에서
       밝게 조정된 색인데, 반대로 이 색을 "배경"으로 쓰고 그 위에 흰 글자를 얹는 배지·버튼류가
       많아서(예: .cta-btn, .flag-badge) 다크모드에서 명암비가 1.2~2.9:1까지 떨어지는 문제가
       있었음 — 그런 곳엔 color:#fff 대신 이 변수를 씀 */
    --on-accent:#fff;

    /* 다크모드에서 반전이 필요한 "잉크 워시"류 값들 — rgba(var(--ink-rgb),X)를 곳곳에서 호버/배경
       틴트로 직접 썼던 걸 변수화함(다크모드 미디어쿼리에서 밝은 색으로 뒤집어줘야 호버 피드백이
       사라지지 않음). 나머지(카드 표면색 등)는 아래 별도 시맨틱 변수로 분리 */
    --ink-rgb: 38,36,32;
    --navyblue-rgb: 11,37,69;
    --body-bg:#F0ECE0;
    --select-bg:#FDFBF5;
    --chip-bg:#F1EDE0;
    --input-card-bg:#F9F5EB;
    --btn-hover-teal:#0F4238;
    --alert-red-bg:#FBEEEC;
    --game-pb-bg:#FDF0EF; --game-pb-border:#E8B4AF;
    --game-mm-bg:#FDF8E8; --game-mm-border:#E8D9A8;
    --refund-step-bg:#F8F4EA;
    /* FAQ의 두 필터 줄(누구인지/무슨 주제인지)이 둘 다 teal 색으로 "선택됨"을 표시해서
       실사용자 테스트에서 나란히 놓인 두 "전체" 칩이 똑같아 보여 헷갈렸음 — 카테고리(주제) 줄만
       --gold 계열로 바꿔서 두 필터가 서로 다른 그룹이라는 걸 색으로도 구분되게 함 */
    --gold-chip-bg: rgba(156,111,30,0.07);
    --gold-chip-border: rgba(156,111,30,0.4);
  }
  /* 다크모드는 더 이상 기기의 prefers-color-scheme을 자동으로 따라가지 않고, 우상단 토글
     버튼(toggleTheme(), script.js)으로만 켜짐 — 켠 상태는 localStorage에 저장되어 다음
     방문에도 유지됨. 기본값은 항상 라이트모드 */
  :root[data-theme="dark"]{
      --navy:#EDE8DA; --teal:#3AA98A; --seafoam:#3AA98A; --mint:#4CC2A0; --indigo:#7C9BD1; --gold:#D6AC55;
      --bg:#1B1917; --card:#242220; --text-dark:#EDE8DA; --text-muted:#B3AB9A; --border:#3D3A34;
      --grad-soft: linear-gradient(150deg, #1E2622 0%, #201E1A 55%, #201E1A 100%);
      --grad-amber: linear-gradient(150deg, #2A2318 0%, #201E1A 100%);
      --shadow-card: 0 1px 0 rgba(0,0,0,0.3);
      --shadow-btn: 0 6px 14px rgba(58,169,138,0.28);
      --status-red:#E2776C;
      --status-red-rgb: 226,119,108;
      --status-amber:#D6AC55;
      --on-accent:#1B1917;
      --ink-rgb: 237,232,218;
      --navyblue-rgb: 124,155,209;
      --body-bg:#161412;
      --select-bg:#2A2723;
      --chip-bg:#2E2B26;
      --input-card-bg:#221F1B;
      --btn-hover-teal:#4CC2A0;
      --alert-red-bg:#2E211F;
      --game-pb-bg:#2A211F; --game-pb-border:#5A3A35;
      --game-mm-bg:#292619; --game-mm-border:#5A5136;
      --refund-step-bg:#242119;
      --gold-chip-bg: rgba(214,172,85,0.14);
      --gold-chip-border: rgba(214,172,85,0.5);
  }
  /* 글자 크게 보기: 다크모드와 동일하게 opt-in 토글(toggleTextSize(), script.js)로만 켜짐,
     localStorage에 저장되어 다음 방문에도 유지됨. 폰트 스케일 전체를 약 12~15% 확대하되
     상대적인 비율(제목이 본문보다 큰 관계 등)은 그대로 유지 — 절대값을 새로 정하지 않고
     :root의 기본 스케일을 그대로 스케일업하는 방식이라 나머지 CSS는 손댈 필요 없음.
     --fs-small(접근성 최소 폰트 floor)은 절대 원래 값보다 작아지면 안 되므로 여기서도 상향만 함 */
  :root[data-textsize="large"]{
      --fs-hero:48px; --fs-h1:32px; --fs-h2:25px; --fs-h3:23px;
      --fs-body:20px; --fs-note:19px; --fs-small:18px; --fs-emphasis:28px;
  }
  /* 고대비 모드: 라이트/다크 테마와 별개의 독립 토글(toggleContrast(), script.js) — "제3의 테마"가
     아니라 지금 켜져 있는 라이트/다크 테마 위에 얹혀서 대비만 더 강하게 만듦. 그래서 라이트용과
     다크용 오버라이드를 따로 둠(각 테마의 실제 배경색 기준으로 명암비를 계산해야 하기 때문에
     --text-muted를 --text-dark에 단순히 변수로 연결하는 방식은 쓰지 않음 — text-dark 값이 나중에
     바뀌면 같이 틀어질 수 있어서, 지금 시점의 실제 hex 값을 기준으로 저시력 사용자를 위해
     명암비가 확실히 오르는 톤을 직접 골라 넣음).
     --text-muted: 라이트 7.64:1→11.16:1(#FAF6EC 배경 기준), 다크 7.69:1→12.21:1(#1B1917 배경 기준)
     --border: 라이트 1.2:1→3.28:1, 다크 1.4:1→3.82:1 (WCAG 비텍스트 명암비 권장 3:1 이상으로) */
  :root[data-contrast="high"]{
      --text-muted:#3A362C; --border:#93876F;
  }
  :root[data-theme="dark"][data-contrast="high"]{
      --text-muted:#DDD7C8; --border:#7A756A;
  }
  *{box-sizing:border-box;}
  /* 키보드로 탭 이동할 때(스크린리더·저시력 사용자 포함) 지금 포커스가 어디 있는지 브랜드 색으로
     또렷하게 보여줌 — 마우스로 클릭했을 때는 안 뜨고 키보드 탐색일 때만 뜸(:focus-visible).
     이미 자체 포커스 스타일이 있는 요소(.dollar-input 등)는 각자 규칙이 나중에 나와서 그대로 유지됨 */
  :focus-visible{ outline:2.5px solid var(--teal); outline-offset:2px; border-radius:4px; }
  /* iOS 사파리는 button/input/select에 기본 시스템 폰트·여백을 강제로 적용해서,
     안드로이드 크롬 계열(삼성 인터넷·카카오톡 인앱 포함)과 글씨 정렬이 미묘하게 달라 보일 수 있음.
     전 요소에 폰트를 명시적으로 맞추고, 버튼의 기본 외형을 지워서 브라우저 간 렌더링을 통일함 */
  button, input, select, textarea{ font-family:inherit; }
  button{ -webkit-appearance:none; appearance:none; line-height:normal; }
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  body{
    margin:0;
    font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--body-bg);
    color:var(--text-dark);
    padding:36px 16px 80px;
    display:flex;
    flex-direction:column;
    -webkit-text-size-adjust:100%; text-size-adjust:100%;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    word-break:normal; overflow-wrap:break-word;
    overscroll-behavior-y:none;
    align-items:center;
    gap:28px;
    line-height:1.65;
  }
  /* word-break:keep-all은 한국어를 음절 단위로 어색하게 끊어 줄바꿈하지 않도록 하는 용도인데,
     이걸 전체에 적용해뒀더니 태국어·라오어·크메르어처럼 띄어쓰기가 없는 스크립트에서 문제가 됨 —
     "단어"로 인식할 공백이 아예 없다 보니 keep-all이 문장 전체를 끊을 수 없는 한 덩어리로 취급해서
     좁은 카드 폭을 넘어 옆 카드까지 텍스트가 침범하는 버그로 이어짐(아이폰 카카오톡 인앱 브라우저에서
     태국어 화면 스크린샷으로 사용자가 직접 발견). 한국어에만 필요한 규칙이므로 범위를 좁힘 */
  html[lang="ko"] body{ word-break:keep-all; }

  /* 아랍어·우르두어는 Pretendard에 해당 문자가 없어서 그냥 sans-serif로 떨어짐 — 랜딩페이지들엔
     이미 있던 폰트를 메인 앱에도 추가함(index.html에서 Google Fonts로 로드) */
  html[lang="ar"] body{ font-family:'Pretendard','Noto Naskh Arabic',-apple-system,BlinkMacSystemFont,sans-serif; }
  html[lang="ur"] body{ font-family:'Pretendard','Noto Nastaliq Urdu',-apple-system,BlinkMacSystemFont,sans-serif; }

  /* 브라우저 기본 텍스트 선택 색(진한 파랑)은 사이트 팔레트에 아예 없는 색이라, 입력칸 숫자를
     길게 눌러 선택했을 때 디자인이 완전히 깨진 것처럼 보임 — 톤을 청록 계열로 맞춤 */
  ::selection{ background:rgba(21,84,69,0.25); color:var(--text-dark); }

  .page{
    background:var(--bg); padding:28px 28px 36px; min-height:200px;
    width:100%; max-width:1140px; margin:0 auto; border-radius:14px; overflow:hidden;
    box-shadow:0 1px 3px rgba(var(--ink-rgb),0.08), 0 8px 24px rgba(var(--ink-rgb),0.06);
  }

  .nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; row-gap:8px; column-gap:10px; }
  .logo{
    font-size:17px; font-weight:700; color:var(--navy); letter-spacing:-0.02em; cursor:pointer;
    background:none; border:none; font-family:inherit; padding:0;
    display:inline-flex; align-items:center; gap:6px;
  }
  .mascot-mark{ flex-shrink:0; }
  .logo-text{ white-space:nowrap; }
  .logo span{ color:var(--teal); }
  .menu{ display:flex; gap:14px; align-items:center; margin-left:auto; }
  .menu-links{ display:flex; gap:14px; align-items:center; }
  /* lang-toggle와 theme-toggle을 하나의 묶음으로 감싸서, 좁은 화면에서 .menu가 줄바꿈될 때
     이 둘이 서로 떨어져 theme-toggle만 혼자 다음 줄로 밀려나는 일이 없게 함 */
  .menu-controls{ display:flex; gap:8px; align-items:center; }
  /* 탭 이동 버튼(비교/확률/FAQ)이 예전엔 배경·테두리 없는 순수 텍스트라, 옆의 언어 전환
     버튼(테두리+배경 있는 pill 모양)과 대비돼 "누를 수 있는 버튼"으로 안 읽히는 문제가
     실사용자 테스트(고령층, 카카오톡 인앱 브라우저)에서 확인됨 — 클릭 가능해 보이도록
     lang-toggle과 같은 pill 스타일(테두리+배경)로 통일함 */
  .menu-links button{
    font-size:16px; color:var(--text-muted); font-weight:600; font-family:inherit; cursor:pointer;
    border:1px solid rgba(21,84,69,0.25); border-radius:14px; background:rgba(21,84,69,0.06);
    padding:6px 16px; min-height:44px; display:inline-flex; align-items:center; position:relative;
  }
  .menu-links button::after{ content:''; position:absolute; top:-6px; left:-4px; right:-4px; bottom:-6px; }
  .menu-links button.active{
    color:var(--on-accent); font-weight:700; text-decoration:none;
    background:var(--teal); border-color:var(--teal);
  }
  .menu .lang-toggle{
    border:1px solid rgba(21,84,69,0.25); border-radius:14px; padding:6px 22px 6px 10px; min-height:44px;
    font-size:16px; font-weight:700; color:var(--teal); background:rgba(21,84,69,0.08);
    cursor:pointer; font-family:inherit; margin-left:0;
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23155445' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 8px center; background-size:10px;
  }
  .theme-toggle{
    width:40px; height:40px; min-height:40px; flex:0 0 auto; border-radius:50%;
    border:1px solid rgba(21,84,69,0.25); background:rgba(21,84,69,0.08);
    font-size:17px; line-height:1; cursor:pointer; font-family:inherit;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  :root[data-theme="dark"] .theme-toggle{ border-color:var(--border); background:var(--chip-bg); }
  /* 다크모드/글자크게/고대비/언어 4개가 nav에 따로따로 늘어서면서 좁은 화면에서 줄바꿈·잘림
     문제가 반복돼서(사용자가 스크린샷으로 직접 지적), 톱니바퀴 버튼 하나로 묶고 눌렀을 때만
     펼쳐지는 패널 안에 전부 모음 — details/summary라 별도 열림닫힘 JS 없이 동작함 */
  .settings-menu{ position:relative; }
  .settings-toggle{
    width:40px; height:40px; min-height:40px; flex:0 0 auto; border-radius:50%;
    border:1px solid rgba(21,84,69,0.25); background:rgba(21,84,69,0.08);
    font-size:17px; line-height:1; cursor:pointer; font-family:inherit;
    display:flex; align-items:center; justify-content:center; padding:0; list-style:none;
  }
  .settings-toggle::-webkit-details-marker{ display:none; }
  :root[data-theme="dark"] .settings-toggle{ border-color:var(--border); background:var(--chip-bg); }
  .settings-panel{
    position:absolute; top:calc(100% + 8px); right:0; z-index:30; display:flex; flex-direction:column; gap:8px;
    background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px;
    box-shadow:0 8px 24px rgba(var(--ink-rgb),0.14); min-width:200px;
  }
  .settings-row-btn{
    display:flex; align-items:center; gap:10px; width:100%; border:1.5px solid var(--border);
    background:var(--bg); color:var(--text-dark); border-radius:10px; padding:10px 12px;
    font-family:inherit; font-size:var(--fs-small); font-weight:700; cursor:pointer; text-align:left;
  }
  .settings-row-icon{
    flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:rgba(21,84,69,0.08);
    display:flex; align-items:center; justify-content:center; font-size:15px;
  }
  :root[data-theme="dark"] .settings-row-icon{ background:var(--chip-bg); }
  .settings-panel .lang-toggle{ width:100%; box-sizing:border-box; }
  /* 글자 크게 보기/고대비 토글은 theme-toggle과 같은 원형 버튼 틀을 그대로 쓰되(디자인 일관성),
     아이콘이 이모지가 아니라 텍스트/기호라서 글자 크기만 살짝 줄여 40px 원 안에 안정적으로 맞춤 */
  .textsize-toggle, .contrast-toggle{ font-size:15px; font-weight:700; color:var(--text-dark); }

  .view{ display:none; }
  .view.on{ display:block; animation:view-fade-in 0.25s ease; }
  @keyframes view-fade-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){
    .view.on{ animation:none; }
  }

  .hero{ text-align:center; padding:16px 0 24px; }
  .site-notice{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:rgba(21,84,69,0.08); border:1px solid rgba(21,84,69,0.25); border-radius:10px;
    padding:10px 12px; margin:0 0 14px; font-size:var(--fs-note); color:var(--text-dark); line-height:1.5;
  }
  .site-notice-close{
    flex-shrink:0; background:none; border:none; cursor:pointer; font-size:var(--fs-note);
    color:var(--text-muted); padding:2px 4px; font-family:inherit;
  }
  .hero-category-tag{
    display:inline-block; font-size:var(--fs-small); font-weight:800; color:var(--teal);
    background:rgba(21,84,69,0.08); border-radius:20px; padding:5px 14px; margin:0 0 10px;
  }
  .tax-impact-compact{
    display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:6px;
    margin-top:10px; font-size:16px; color:var(--text-muted);
  }
  .tax-impact-strike{ text-decoration:line-through; }
  .tax-impact-before-line{ display:inline-flex; gap:4px; }
  .tax-impact-arrow{ color:var(--text-muted); }
  .tax-impact-diff-big{ font-weight:800; color:var(--status-red); font-size:18px; }
  .result-visual-bar{
    width:100%; height:10px; border-radius:6px; margin:14px 0 8px; overflow:hidden;
    background:var(--status-red); opacity:0.85;
  }
  .result-visual-bar-take{
    height:100%; background:var(--teal); border-radius:6px 0 0 6px;
    transition:width 0.5s ease;
  }
  .result-visual-bar-caption{
    display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
    font-size:13px; color:var(--text-muted); margin:0;
  }
  .rvb-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:-2px; }
  .rvb-dot-take{ background:var(--teal); }
  .rvb-dot-tax{ background:var(--status-red); margin-left:10px; }
  .hero-amount{ font-size:var(--fs-h1); font-weight:800; color:var(--navy); margin:0; letter-spacing:-0.02em; line-height:1.4; }

  .cards-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px; }
  .feature-card{
    background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px;
    cursor:pointer; text-align:left; font-family:inherit;
    transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  
  .cta-btn{ transition:transform 0.1s ease, background 0.15s ease; }
  .cta-btn:active{ transform:scale(0.98); }
  .panel{ transition:box-shadow 0.15s ease; }
  @media (hover: hover) {
  .feature-card:hover{ border-color:var(--teal); transform:translateY(-3px); box-shadow:0 6px 16px rgba(var(--ink-rgb),0.12); }
  .rate-live-badge:hover{ border-color:var(--teal); background:rgba(var(--ink-rgb),0.16); }
  .flow-tag:hover{ background:rgba(var(--ink-rgb),0.2); text-decoration:underline; }
  .official-links a:hover{ border-color:var(--teal); background:rgba(var(--ink-rgb),0.06); }
  .jp-official-link:hover{ text-decoration:underline; }
  .source-links a:hover{ text-decoration:underline; }
  .back-btn:hover{ background:var(--bg); border-color:var(--teal); }
  .cta-btn:hover{ background:var(--btn-hover-teal); }
  .share-btn:hover{ background:rgba(var(--ink-rgb),0.08); }
  .refund-link-btn:hover{ background:rgba(var(--ink-rgb),0.08); }
  .footer-links button:hover{ text-decoration:underline; }
}
  .feature-title{ font-size:var(--fs-h3); font-weight:700; color:var(--text-dark); margin:0 0 2px; }
  .feature-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:var(--fs-small); color:var(--text-muted); margin:0 0 10px; }
  .feature-card{ min-width:0; }

  .panel{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px 16px; margin-bottom:18px; }
  .panel-title{ font-size:var(--fs-h2); font-weight:700; color:var(--text-dark); margin:0 0 4px; }
  .panel-title-amt{ color:var(--teal); font-variant-numeric:tabular-nums; }
  .panel-desc{ font-size:var(--fs-note); color:var(--text-muted); margin:0 0 16px; }
  .panel-title-toggle{
    font-size:var(--fs-h2); font-weight:700; color:var(--text-dark); margin:0 0 4px;
    cursor:pointer; list-style:none; position:relative; padding-right:30px;
  }
  .panel-title-toggle::-webkit-details-marker{ display:none; }
  .panel-title-toggle::after{
    content:'▾'; color:var(--teal); font-weight:400; position:absolute; right:0; top:calc(var(--fs-h2) * 0.825);
    transform:translateY(-50%); transition:transform 0.2s ease;
  }
  details.odds-accordion{ transition:border-color 0.15s ease; }
  details.odds-accordion[open]{ border-color:var(--teal); }
  details.odds-accordion[open] > .panel-title-toggle::after{ transform:translateY(-50%) rotate(180deg); }

  /* The persona-picker banner ("나는 어떤 경우일까요?") was inheriting plain .panel
     styling, so it looked like just another neutral info box and got skipped by
     first-time visitors even though it's the main routing entry point for non-KR-resident
     personas. Give it the same teal-tinted treatment as .result-hero so it visually reads
     as "start here" instead of blending into the page. */
  #introPersonaAccordion{
    background:linear-gradient(135deg, #EAF3EE 0%, #FBFAF4 65%, #FFFEF9 100%);
    border:1.5px solid rgba(21,84,69,0.3);
    animation:intro-persona-glow 2.2s ease-out 0.4s 1;
  }
  #introPersonaAccordion[open]{ border-color:var(--teal); }
  #introPersonaAccordion > .panel-title-toggle{ color:var(--teal); }
  @keyframes intro-persona-glow{
    0%{ box-shadow:0 0 0 0 rgba(21,84,69,0); }
    30%{ box-shadow:0 0 0 6px rgba(21,84,69,0.12); }
    100%{ box-shadow:0 0 0 0 rgba(21,84,69,0); }
  }
  @media (prefers-reduced-motion: reduce){
    #introPersonaAccordion{ animation:none; }
  }

  .input-row{ display:flex; gap:8px; margin-bottom:14px; }
  .input-row select{
    height:44px; border:1px solid var(--border); border-radius:8px; padding:0 28px 0 12px;
    font-size:var(--fs-body); font-family:inherit; color:var(--text-dark); background:var(--select-bg); flex:1;
    min-width:0; max-width:100%;
    /* 주(State) 이름은 번역 안 되고 항상 영문+숫자라서, RTL 언어(아랍어/우르두어) 화면에서 이
       select에 방향을 안 정해주면 브라우저가 텍스트를 "앞부분"부터 잘라서(예: "Average..."가
       "...age"로) 핵심 단어가 사라짐 — 옵션 내용 자체가 항상 LTR이므로 명시적으로 고정 */
    direction:ltr;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23262420' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center; background-size:11px 7px;
  }
  .dollar-input{
    height:44px; border:1.5px solid var(--border); border-radius:8px; padding:0 12px;
    font-size:var(--fs-body); font-weight:700; font-family:inherit; color:var(--navy); background:var(--card);
    flex:1.5; width:100%; font-variant-numeric:tabular-nums;
  }
  .dollar-input:focus{ outline:none; border-color:var(--teal); }
  .jackpot-quickfill-row{ display:flex; gap:8px; margin:0 0 10px; flex-wrap:wrap; }
  .jackpot-quickfill-btn{
    flex:1; min-width:140px; min-height:44px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:4px; font-family:inherit; cursor:pointer; text-align:left;
    border-radius:12px; padding:10px 12px;
  }
  /* 디자인 3차 개선: 두 버튼을 같은 청록색 톤으로 뭉뚱그리지 않고, 게임별 색(빨강=파워볼/
     호박색=메가밀리언즈)을 입혀서 어느 버튼이 어느 게임인지 한눈에 구분되게 함 */
  .jackpot-quickfill-btn-pb{ background:var(--game-pb-bg); border:1.5px solid var(--game-pb-border); }
  .jackpot-quickfill-btn-mm{ background:var(--game-mm-bg); border:1.5px solid var(--game-mm-border); }
  .jackpot-quickfill-btn:active{ filter:brightness(0.97); }
  /* 퀵필 버튼(=이 잭팟에 당첨되면?)을 누른 순간의 작은 반짝임 — celebrateQuickFill()이
     JS로 만들어 body에 붙였다가 애니메이션 끝나면 스스로 제거함 */
  .quickfill-spark{
    position:fixed; font-size:16px; pointer-events:none; z-index:60;
    animation:quickfillSparkFloat 0.8s ease-out forwards;
  }
  @keyframes quickfillSparkFloat{
    0%{ opacity:0; transform:translateY(0) scale(0.6); }
    22%{ opacity:1; transform:translateY(-8px) scale(1); }
    100%{ opacity:0; transform:translateY(-40px) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .quickfill-spark{ display:none; }
  }
  .jackpot-quickfill-label{ font-size:var(--fs-small); font-weight:800; letter-spacing:0.02em; }
  .jackpot-quickfill-btn-pb .jackpot-quickfill-label{ color:var(--status-red); }
  .jackpot-quickfill-btn-mm .jackpot-quickfill-label{ color:var(--status-amber); }
  .jackpot-quickfill-amt{ font-size:var(--fs-small); font-weight:800; color:var(--text-dark); }
  .jackpot-quickfill-usd{ font-size:12px; font-weight:600; color:var(--text-muted); }
  .million-input-wrap{
    display:flex; align-items:center; gap:10px; flex:1.5; border:2px solid var(--teal);
    border-radius:14px; padding:8px 10px 8px 18px; height:auto; background:var(--card);
    min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; transition:box-shadow 0.15s ease;
  }
  .million-input-wrap:focus-within{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(21,84,69,0.14); }
  .million-input-wrap .dollar-input{
    border:none; padding:8px 0; height:auto; flex:1; min-width:0; width:auto;
    font-size:32px; font-size:clamp(26px, 10vw, 38px); font-weight:800; color:var(--teal);
  }
  /* 탭 3개(일시불/연금발표액/목표실수령액)를 오갈 때 입력칸 크기가 서로 달라 카드가 들쭉날쭉해
     보인다는 지적 — 연금발표액 칸을 일시불 칸과 동일한 테두리·크기·글자 크기로 통일함 */
  .million-input-wrap-secondary{
    display:flex; align-items:center; gap:10px; flex:1.5; border:2px solid var(--teal);
    border-radius:14px; padding:8px 10px 8px 18px; height:auto; background:var(--card);
    min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; transition:box-shadow 0.15s ease;
  }
  .million-input-wrap-secondary:focus-within{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(21,84,69,0.14); }
  .million-input-wrap-secondary .dollar-input{
    border:none; padding:8px 0; height:auto; flex:1; min-width:0; width:auto;
    font-size:32px; font-size:clamp(26px, 10vw, 38px); font-weight:800; color:var(--teal);
  }
  @keyframes field-autofill-flash{ 0%{ box-shadow:0 0 0 4px rgba(21,84,69,0.28); } 100%{ box-shadow:0 0 0 0 rgba(21,84,69,0); } }
  .field-autofill-flash{ animation:field-autofill-flash 700ms ease-out; }
  .million-unit{ font-size:16px; color:var(--text-muted); font-weight:700; white-space:nowrap; padding-right:4px; flex-shrink:0; }
  .unit-short{ display:none; }
  .input-card-headline{ font-size:18px; font-weight:800; color:var(--text-dark); margin:0 0 4px; }
  .country-toggle{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
  .country-toggle-more{ flex:1 1 100%; }
  .country-toggle-more-summary{
    font-size:var(--fs-small); color:var(--teal); font-weight:700; cursor:pointer; list-style:none;
    padding:10px 0; text-align:center;
  }
  .country-toggle-more-summary::-webkit-details-marker{ display:none; }
  .country-toggle-more-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
  .country-toggle-btn{
    flex:1 1 calc(50% - 4px); min-height:46px; border-radius:11px; border:2px solid var(--border); background:var(--card);
    color:var(--text-dark); font-family:inherit; font-size:16px; font-weight:800; cursor:pointer;
    transition:border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 4px;
    text-align:center; line-height:1.2; padding:6px 4px;
  }
  .country-toggle-btn.active{ border-color:var(--teal); background:rgba(21,84,69,0.08); color:var(--teal); }
  .country-toggle-btn .flag-badge{ background:var(--text-dark); }
  .country-toggle-btn.active .flag-badge{ background:var(--teal); }
  .rate-input{
    width:80px; border:none; border-bottom:1.5px dashed var(--teal); background:transparent;
    font-family:inherit; font-size:var(--fs-body); font-weight:700; color:var(--teal); text-align:center; padding:0 2px;
  }
  .rate-input:focus{ outline:none; border-bottom-style:solid; }
  .rate-live-badge{
    display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
    margin-left:4px; cursor:pointer; background:rgba(var(--ink-rgb),0.05); border:1px solid var(--border);
    border-radius:50%; padding:0; font-size:12px; line-height:1; font-family:inherit; flex-shrink:0;
    position:relative;
  }
  /* Visible badge stays small (inline next to text), but the tappable zone is invisibly
     expanded to the 44px touch-target minimum via this centered pseudo-element, matching
     the same technique already used for .menu button rather than visibly bloating the icon */
  .rate-live-badge::after{ content:''; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }

  .rate-live-badge.is-live{ background:rgba(var(--ink-rgb),0.14); border-color:rgba(var(--ink-rgb),0.4); }
  .rate-live-badge.is-fail{ background:rgba(192,57,43,0.1); border-color:rgba(192,57,43,0.35); }
  .rate-live-badge:disabled{ cursor:default; opacity:0.6; }
  @keyframes badge-flash{ 0%{ transform:scale(1); } 35%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
  .rate-live-badge.just-retried{ animation:badge-flash 0.4s ease; }
  .rate-live-badge .spin{ display:inline-block; animation:rateSpin 0.8s linear infinite; }
  @keyframes rateSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

  .slider{ width:100%; height:4px; border-radius:2px; background:var(--border); -webkit-appearance:none; appearance:none; margin-bottom:18px; }
  .slider::-moz-range-track{ background:transparent; }
  .slider::-moz-range-progress{ background:var(--teal); height:4px; border-radius:2px; }
  .slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--teal); cursor:pointer; }
  /* 홈 슬라이더가 $10M~$2000M를 한 줄로만 보여줘서, 특정 금액($5억 등)이 트랙의 어디쯤인지
     가늠할 방법이 없다는 실사용자 피드백(고령층) 반영 — 네이티브 <input type=range>는
     datalist 눈금 렌더링이 브라우저마다(특히 iOS Safari) 달라서, 이 코드베이스가 슬라이더 채움
     표시에 이미 쓰는 방식(updateSliderFill(), script.js — 네이티브 대신 직접 그리기)과 같은
     원칙으로 트랙 위에 직접 그린 눈금+라벨을 절대좌표로 얹음. min=10,max=2000 기준
     퍼센트 = (value-10)/1990*100 로 계산한 값을 그대로 각 span의 style="left:N%"에 사용함 */
  .slider-track-wrap{ position:relative; margin-bottom:48px; }
  .slider-track-wrap .slider{ margin-bottom:0; }
  .slider-ticks{ position:absolute; left:0; right:0; top:16px; height:0; pointer-events:none; }
  .slider-tick{
    position:absolute; top:0; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:3px;
  }
  .slider-tick-mark{ width:1.5px; height:6px; background:var(--border); display:block; }
  .slider-tick-label{
    font-size:var(--fs-small); font-weight:600; color:var(--text-muted); white-space:nowrap; line-height:1;
  }
  /* 5억/10억/15억 세 눈금이 좁은 화면(320px)에서 언어에 따라(예: 인도네시아어 "$500
     Juta"/"$1 Miliar"/"$1,5 Miliar") 라벨끼리 가로로 겹치는 문제가 있었음 — 글자 크기를 시니어
     최소 기준(--fs-small) 아래로 줄이는 대신, 가운데 눈금만 눈금선을 더 길게 빼서 라벨을 한 줄
     아래로 내려 항상 겹치지 않게 함(양옆 두 눈금은 그대로 첫 줄에 남음) */
  .slider-tick-mid .slider-tick-mark{ height:24px; }

  .result-grid{ display:grid; grid-template-columns:0.85fr 0.85fr 1.3fr; gap:10px; align-items:stretch; }
  /* 국기 4개 이상 묶인 큰 그룹 카드는 .side-card-full로 자기 줄을 통째로 차지하게 분리했으니,
     일반 카드끼리는 다시 기본값(stretch)으로 키를 맞춤 — align-items:start로 뒀더니 카드 내용
     줄 수가 한 줄만 달라도(예: "인도 거주자" 1줄 vs "2개국 실수령액 동일" 2줄) 바닥이 들쭉날쭉해 보였음 */
  /* 나라별 비교 카드가 텍스트/숫자로만 쭉 나열돼서 폰으로 보면 심심하다는 피드백 — 카드를
     탭하면 이 지도 위 해당 국가 위치에 핀이 표시되게 함. 실제 국경선(Natural Earth 기반)을
     등장방형 도법으로 투영한 지도라, 탭 상호작용 보조 외에 지리 참고용으로도 무리 없음 */
  .country-map-wrap{ position:relative; margin-top:14px; border:1px solid var(--border); border-radius:14px; }
  .country-map-svg{ display:block; width:100%; height:auto; border-radius:14px; overflow:hidden; }
  .country-map-sea{ fill:var(--card); }
  .country-map-land{ fill:rgba(var(--ink-rgb),0.1); stroke:rgba(var(--ink-rgb),0.18); stroke-width:1.5; transition:fill 0.3s ease, stroke 0.3s ease; }
  /* 국가 카드를 탭하면 핀뿐 아니라 실제 국경선 자체도 브랜드 색으로 옅게 채워져서,
     그 나라가 지도 위 어디에 어떤 모양으로 있는지 바로 확인 가능 */
  .country-map-land.active{ fill:rgba(21,84,69,0.35); stroke:var(--teal); stroke-width:2; }
  :root[data-theme="dark"] .country-map-land.active{ fill:rgba(58,169,138,0.35); }
  /* 미국 클러스터만 라벨을 남김 — 아시아 쪽은 나라 수가 많아 실제 국경선 모양만으로도
     어디가 어디인지 충분히 구분되지만, 미국은 단독 대륙이라 시각적 맥락이 필요함 */
  .country-map-labels text{ fill:rgba(var(--ink-rgb),0.32); font-size:15px; font-weight:700; letter-spacing:0.5px; }
  .country-map-pin{ fill:var(--teal); stroke:var(--card); stroke-width:1.2; cursor:pointer; }
  .country-map-pin.active{ fill:var(--status-red); animation:countryMapPinPulse 1.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
  /* 지도가 심심해 보인다는 피드백 — 선택된 핀이 은은하게 맥박치듯 커졌다 작아지게 해서
     "여기 선택됐어요"가 색만으로 바뀔 때보다 눈에 잘 띄고 재미있게 보이도록 함 */
  @keyframes countryMapPinPulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.35); }
  }
  /* 핀 아래 깔린 파문 링 — 선택되면 물결처럼 커지며 옅어지는 걸 반복해서, 지도에서
     "여기예요"를 짚어주는 순간에 생동감을 더함(지도 자체의 톤·색은 그대로 유지) */
  .country-map-pin-ring{ fill:none; stroke:var(--status-red); stroke-width:2; opacity:0; pointer-events:none; transform-origin:center; transform-box:fill-box; }
  .country-map-pin-ring.active{ animation:countryMapPingRing 1.6s ease-out infinite; }
  @keyframes countryMapPingRing{
    0%{ transform:scale(1); opacity:0.55; }
    100%{ transform:scale(2.8); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .country-map-pin.active{ animation:none; }
    .country-map-pin-ring.active{ animation:none; opacity:0; }
  }
  .country-map-callout{
    position:absolute; background:var(--navy); color:var(--on-accent); font-size:var(--fs-small); font-weight:700;
    padding:5px 10px; border-radius:8px; pointer-events:none; max-width:78%; text-align:center;
    transform:translate(-50%,-130%) scale(0.85); opacity:0; z-index:2;
    transition:opacity 0.2s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  }
  .country-map-callout.is-visible{ opacity:1; transform:translate(-50%,-130%) scale(1); }
  @media (prefers-reduced-motion: reduce){
    .country-map-callout{ transition:none; }
  }
  .side-by-side-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(105px, 1fr)); gap:10px; margin-top:14px; }
  .side-card{ background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:16px; min-width:0; }
  .side-card-span-full{ grid-column:1 / -1; }
  .side-card-flag{ font-size:var(--fs-small); color:var(--text-muted); font-weight:700; margin:0 0 8px; }
  .side-card-amt{ font-size:19px; font-size:clamp(17px, 6vw, 22px); font-weight:800; color:var(--text-dark); margin:0 0 6px; font-variant-numeric:tabular-nums; overflow-wrap:break-word; }
  .side-card-rate{ font-size:var(--fs-small); color:var(--text-muted); margin:0; }
  /* 1위 카드는 목업처럼 금액+비율을 한 줄에 나란히(baseline) 배치 — 단, 영어 등 문구가 길어지는 언어에서
     한 줄에 다 안 들어가면 겹치거나 잘리지 않고 자연스럽게 2줄로 내려가도록 flex-wrap 허용 */
  .side-card-amt-row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 8px; margin-bottom:8px; }
  .side-card-amt-row .side-card-amt{ margin:0; }
  .side-card-bar{ width:100%; height:6px; border-radius:4px; margin-top:8px; overflow:hidden; background:var(--status-red); opacity:0.8; }
  .side-card-bar-fill{ height:100%; background:var(--teal); border-radius:4px 0 0 4px; }
  .side-card-best{ border:1.5px solid rgba(21,84,69,0.3); background:var(--grad-soft); border-radius:16px; position:relative; }
  .side-card-best .side-card-amt{ font-size:27px; color:var(--teal); }
  .side-card-best .side-card-bar{ height:8px; }
  /* 국기 배지는 사이트 전역 .flag-badge(진한 청록 채움)를 그대로 쓰면 비교 카드에서 너무 무거워 보여서,
     이 카드 안에서만 옅은 틴트 스타일로 오버라이드(기본 클래스 자체는 다른 곳에 영향 없이 그대로 둠) */
  .side-card .flag-badge{ background:rgba(38,36,32,0.08); color:var(--text-muted); font-size:11px; font-weight:800; border-radius:5px; padding:2px 6px; }
  .side-card-best .flag-badge{ background:rgba(21,84,69,0.1); color:var(--teal); }
  .side-card-best-badge{
    font-size:13px; font-weight:800; color:var(--teal); background:var(--card);
    display:inline-block; padding:3px 10px; border-radius:20px; border:1px solid var(--teal);
    margin:0 0 8px;
  }
  .side-card-detail-link{ display:inline-block; margin-top:8px; font-size:var(--fs-small); font-weight:700; color:var(--teal); text-decoration:none; }
  .side-card-hidden-extra{ display:none; }
  .side-card-flags-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px; }
  .side-card-flag-group{ display:flex; flex-wrap:wrap; gap:3px; margin:0; }
  .side-card-group-note{
    font-size:var(--fs-small); font-weight:600; color:var(--text-muted); margin:0;
    background:var(--card); border:1px dashed rgba(21,84,69,0.35); border-radius:20px; padding:2px 10px;
  }
  /* 국기가 많이 묶인 카드(예: 12개국)는 한 칸짜리 폭에서 국기가 여러 줄로 접혀서 카드가 세로로
     길어지고, 옆 칸의 짧은 카드와 키 차이가 커서 빈 공간이 크게 남음 — 그리드 전체 폭을 차지하게
     해서 국기를 가로로 넉넉히 펼치고, 옆에 어색한 빈칸이 생기지 않게 함 */
  .side-card-full{ grid-column:1 / -1; }
  .side-card-full .side-card-flag-group{ gap:5px; }
  .side-showmore-btn{
    display:block; width:100%; margin-top:14px; padding:12px; border-radius:12px;
    border:1px solid var(--border); background:var(--bg); color:var(--teal); font-weight:700;
    font-size:var(--fs-small); cursor:pointer; font-family:inherit;
  }
  .side-showmore-btn:hover{ border-color:var(--teal); }
  /* 요약(summary) 안에 들어가는 breakdown 제목 — 원래 <p>였던 걸 details/summary로 바꾸면서
     기존 폰트 크기·색은 유지하고 토글 화살표만 panel-title-toggle과 같은 방식으로 추가함 */
  .side-breakdown-title{
    font-size:19px; font-weight:800; color:var(--text-dark); margin:22px 0 4px;
    cursor:pointer; list-style:none; position:relative; padding-right:26px;
  }
  .side-breakdown-title::-webkit-details-marker{ display:none; }
  .side-breakdown-title::after{
    content:'▾'; color:var(--teal); font-weight:400; position:absolute; right:0; top:calc(19px * 0.825);
    transform:translateY(-50%); transition:transform 0.2s ease;
  }
  details.side-breakdown-accordion[open] > .side-breakdown-title::after{ transform:translateY(-50%) rotate(180deg); }
  .other-lang-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .other-lang-row{
    display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border);
    border-radius:10px; padding:11px 14px; font-size:var(--fs-small); font-weight:700; color:var(--teal);
    text-decoration:none;
  }
  .other-lang-row:hover{ border-color:var(--teal); }
  .intro-persona-list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
  .intro-persona-row{
    display:block; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
    text-decoration:none; transition:border-color 0.15s ease, background 0.15s ease;
  }
  .intro-persona-row.is-clickable{ cursor:pointer; }
  .intro-persona-row.is-clickable:active{ background:rgba(21,84,69,0.08); border-color:var(--teal); }
  @media (hover: hover) {
    .intro-persona-row.is-clickable:hover{ border-color:var(--teal); background:rgba(21,84,69,0.06); }
  }
  .intro-persona-label{ font-size:var(--fs-small); font-weight:700; color:var(--text-dark); margin:0 0 4px; }
  .flag-badge{
    display:inline-block; background:var(--teal); color:var(--on-accent); font-size:10px; font-weight:800;
    letter-spacing:0.02em; padding:2px 5px; border-radius:4px; vertical-align:middle; line-height:1.4;
  }
  .intro-persona-action{ font-size:var(--fs-small); color:var(--text-muted); font-weight:600; margin:0; }
  .intro-persona-action.is-link{ color:var(--teal); font-weight:800; text-decoration:none; display:inline-block; }
  .intro-lang-select-row{ display:flex; gap:8px; margin-top:8px; }
  .intro-lang-select{
    flex:1; min-width:0; height:44px; border-radius:9px; border:1.5px solid var(--border);
    background:var(--card); color:var(--text-dark); font-family:inherit; font-size:var(--fs-small);
    font-weight:600; padding:0 10px;
  }
  .intro-lang-go-btn{
    flex-shrink:0; min-width:72px; min-height:44px; border-radius:9px; border:none;
    background:var(--teal); color:var(--on-accent); font-family:inherit; font-size:var(--fs-small); font-weight:800; cursor:pointer;
  }
  .side-group-label{ font-size:var(--fs-body); font-weight:700; color:var(--text-dark); margin:14px 0 8px; overflow-wrap:break-word; }
  .side-breakdown-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .side-breakdown-cell{ background:var(--bg); border-radius:10px; padding:12px; min-width:0; }
  .side-breakdown-label{ font-size:var(--fs-small); color:var(--text-muted); margin:0 0 4px; font-weight:500; }
  .side-breakdown-val{ font-size:18px; font-weight:700; color:var(--text-dark); margin:0; font-variant-numeric:tabular-nums; }
  @media (max-width:340px){
    .side-by-side-grid, .side-breakdown-grid{ grid-template-columns:1fr; }
  }
  .result-cell{ background:var(--bg); border-radius:8px; padding:12px; }
  .result-label{ font-size:var(--fs-note); color:var(--text-muted); margin:0 0 4px; font-weight:400; }
  .result-value{ font-size:var(--fs-body); font-weight:700; color:var(--text-dark); margin:0; font-variant-numeric:tabular-nums; }

  .compare-table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); }
  .compare-table th{ text-align:left; color:var(--text-muted); font-weight:600; padding:8px 6px; border-bottom:1px solid var(--border); }
  .compare-table td{ padding:10px 6px; border-bottom:1px solid var(--border); color:var(--text-dark); }
  .compare-table tr:last-child td{ border-bottom:none; }

  .bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .bar-row:last-child{ margin-bottom:0; }
  /* 번개/비행기/상어 등 비교 대상이 뭔지 한눈에 보이도록 아이콘 추가(2026-07-22, 사용자 피드백:
     "조금 더 재밌게 표현해보면 어때"). data-i18n 라벨과 분리된 별도 span이라 언어 전환 시
     textContent가 덮어써져도 아이콘은 안 지워짐 */
  .bar-icon{ font-size:18px; flex-shrink:0; width:22px; text-align:center; line-height:1; }
  .bar-label{ font-size:var(--fs-small); color:var(--text-dark); width:132px; flex-shrink:0; font-weight:400; }
  .bar-track{ flex:1; height:10px; background:var(--bg); border-radius:5px; overflow:hidden; }
  .bar-fill{ height:100%; border-radius:5px; background:rgba(var(--ink-rgb),0.3); transition:width 0.9s cubic-bezier(0.16,1,0.3,1); }
  /* 번개=금색(재물운 팔레트), 비행기=쪽빛(하늘), 상어=청록(바다) — 팔레트 안에서 각 소재와
     어울리는 색으로 나눠서 막대 3개가 다 똑같은 색으로 뭉뚱그려 보이지 않게 함 */
  .bar-fill-lightning{ background:var(--gold); }
  .bar-fill-plane{ background:var(--indigo); }
  .bar-fill-shark{ background:var(--teal); }
  .bar-icon.bar-icon-pop{ animation:barIconPop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
  @keyframes barIconPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
  @media (prefers-reduced-motion: reduce){
    .bar-icon.bar-icon-pop{ animation:none; }
  }
  .bar-value{ font-size:var(--fs-note); color:var(--text-muted); width:132px; text-align:right; flex-shrink:0; }

  .callout{ background:rgba(var(--ink-rgb),0.08); border:1px solid rgba(var(--ink-rgb),0.15); border-radius:10px; padding:14px 16px; margin-top:16px; font-size:var(--fs-small); color:var(--text-muted); line-height:1.6; }
  .callout b{ color:var(--text-dark); }

  .disclaimer{ font-size:var(--fs-note); color:var(--text-muted); text-align:center; line-height:1.7; margin-top:4px; }

  /* 스크롤 진입 시 섹션이 살짝 떠오르며 나타나는 효과 — 모바일에서 긴 목록을 스크롤할 때
     구간이 바뀌는 걸 시각적으로 짚어주기 위함. 모션에 민감한 사용자를 위해 prefers-reduced-motion에서 비활성화 */
  .reveal-up{ opacity:0; transform:translateY(14px); transition:opacity 0.5s ease, transform 0.5s ease; }
  .reveal-up.is-in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal-up{ opacity:1; transform:none; transition:none; }
  }

  /* 드림 카드("이 돈이면 뭘 할까") 결과가 나올 때 짧게 떨어지는 색종이 조각 연출 */
  @keyframes confetti-fall{
    0%{ transform:translateY(0) rotate(0deg); opacity:1; }
    100%{ transform:translateY(120px) rotate(360deg); opacity:0; }
  }
  .confetti-piece{
    position:absolute; width:8px; height:8px; border-radius:2px; pointer-events:none; z-index:999;
    animation:confetti-fall 0.9s ease-out forwards;
  }
  @media (prefers-reduced-motion: reduce){
    .confetti-piece{ display:none; }
  }

  .hint{ text-align:center; font-size:var(--fs-small); color:var(--text-muted); margin-top:12px; }
  .hint b{ color:var(--text-dark); }

  .gate-box{
    background:var(--alert-red-bg); border:2px solid var(--status-red); border-radius:12px;
    padding:16px 18px; margin-bottom:16px; text-align:center;
  }
  .gate-label{ font-size:var(--fs-small); font-weight:800; color:var(--status-red); letter-spacing:0.05em; margin:0 0 6px; }
  .gate-text{ font-size:var(--fs-note); font-weight:700; color:var(--text-dark); margin:0; line-height:1.5; }
  .gate-sub{ font-size:var(--fs-small); color:var(--text-muted); margin:6px 0 0; }

  .purchase-flow{ counter-reset:flow-step; }
  .flow-body{ min-width:0; background:var(--bg); border-radius:10px; padding:12px 14px; margin-bottom:12px; }
  .flow-body:last-of-type{ margin-bottom:0; }
  .flow-title{ font-size:var(--fs-h3); font-weight:700; color:var(--text-dark); margin:0 0 3px; position:relative; padding-left:34px; min-height:26px; }
  .purchase-flow > .flow-body{ counter-increment:flow-step; }
  .purchase-flow > .flow-body .flow-title::before{
    content:counter(flow-step); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%;
    background:var(--teal); color:var(--on-accent); font-size:var(--fs-note); font-weight:800;
    display:flex; align-items:center; justify-content:center;
  }
  .flow-detail{ font-size:var(--fs-body); color:var(--text-muted); margin:0; line-height:1.6; }
  .flow-detail b{ color:var(--text-dark); }
  .flow-tag{
    display:inline-block; background:rgba(var(--ink-rgb),0.1); color:var(--text-dark); font-size:var(--fs-small); font-weight:700;
    padding:2px 7px; border-radius:6px; margin-top:6px; margin-right:4px;
    text-decoration:none; cursor:pointer;
  }
  
  .flow-tag.no{ background:rgba(var(--status-red-rgb),0.1); color:var(--status-red); }
  .official-links{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
  .official-links a{
    display:block; background:var(--card); border:1px solid var(--border); border-radius:8px;
    padding:9px 12px; font-size:var(--fs-small); font-weight:700; color:var(--teal); text-decoration:none;
  }
  
  .link-note{ font-size:var(--fs-small); color:var(--text-muted); margin:4px 0 0; }
  .jp-official-link{
    display:block; font-size:var(--fs-small); color:var(--teal); font-weight:700; text-decoration:none;
    margin-top:5px; padding-top:5px; border-top:1px dashed var(--border);
  }
  .annuity-info-link{
    display:block; width:100%; text-align:left; font-family:inherit; font-size:var(--fs-small); color:var(--teal);
    font-weight:700; background:none; border:none; cursor:pointer; margin-top:6px; padding:12px 0; box-sizing:border-box;
  }
  .annuity-info-link:hover{ text-decoration:underline; }
  
  .source-links{ text-align:center; font-size:var(--fs-small); color:var(--text-muted); margin:6px 0 0; }
  .source-links a{ color:var(--teal); font-weight:400; text-decoration:none; }
  

  .phrase-box{ background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-top:10px; }
  .phrase-title{ font-size:var(--fs-h3); font-weight:700; color:var(--text-dark); margin:0 0 8px; }
  .phrase-row{ display:flex; flex-direction:column; gap:1px; margin-bottom:8px; }
  .phrase-row:last-of-type{ margin-bottom:6px; }
  .phrase-en{ font-size:var(--fs-body); font-weight:700; color:var(--text-dark); }
  .phrase-ko{ font-size:var(--fs-note); color:var(--text-muted); }
  .phrase-tip{ font-size:var(--fs-note); color:var(--text-muted); margin:6px 0 0; line-height:1.5; border-top:1px dashed var(--border); padding-top:8px; }

  .qty-box{ background:var(--bg); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
  .qty-box:last-of-type{ margin-bottom:0; }
  .qty-q{ font-size:var(--fs-small); font-weight:800; color:var(--text-dark); margin:0 0 5px; }
  .qty-a{ font-size:var(--fs-small); color:var(--text-muted); margin:0; line-height:1.6; }
  .qty-a b{ color:var(--text-dark); }

  .live-badge{
    display:inline-flex; align-items:center; gap:4px; background:rgba(var(--ink-rgb),0.12); color:var(--seafoam);
    font-size:var(--fs-small); font-weight:800; padding:2px 8px; border-radius:10px; margin-left:6px; vertical-align:middle;
  }
  .jp-krw-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; margin:2px 0 0; }
  .jp-krw{ font-size:16px; color:var(--text-dark); opacity:0.75; font-weight:700; margin:0; }
  .jp-est-note{ font-size:var(--fs-small); color:var(--text-muted); opacity:0.6; font-weight:400; margin:0; }
  .draw-schedule-label{ font-size:var(--fs-small); color:var(--text-muted); opacity:0.6; font-weight:400; margin:6px 0 0; }
  .draw-date-label{ font-size:var(--fs-small); color:var(--text-muted); font-weight:700; margin:10px 0 4px; }
  .jp-actions-row{ margin-top:8px; }
  .jp-actions-row .share-btn{ margin-top:0; }
  .jp-actions-row .jp-official-link{ display:inline-block; margin-top:8px; padding-top:0; border-top:none; }
  .draw-balls{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .draw-ball{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:24px; height:24px; border-radius:50%; font-size:11px; font-weight:800;
    background:var(--card); color:var(--text-dark); border:1.5px solid var(--border);
    font-variant-numeric:tabular-nums;
  }
  .draw-ball-special.draw-ball-powerball{ background:var(--status-red); color:var(--on-accent); border-color:var(--status-red); }
  .draw-ball-special.draw-ball-megamillions{ background:var(--gold); color:var(--on-accent); border-color:var(--gold); }
  /* "역대 가장 많이 나온 번호" 아코디언을 펼치면 공이 하나씩 순서대로 통통 튀며 나타남 —
     popInNumberFrequencyBalls()가 animation-delay를 매겨서 순차 재생시킴 */
  .freq-balls{ margin-top:8px; }
  .freq-balls .draw-ball{ opacity:0; transform:scale(0.3); }
  .freq-ball-pop{ animation:freqBallPop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  @keyframes freqBallPop{
    0%{ opacity:0; transform:scale(0.3); }
    60%{ opacity:1; transform:scale(1.15); }
    100%{ opacity:1; transform:scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .freq-balls .draw-ball{ opacity:1; transform:none; }
    .freq-ball-pop{ animation:none; }
  }
  .foot-note{ font-size:16px; color:var(--text-muted); opacity:0.85; margin:0; line-height:1.4; }

  .result-hero{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, #EAF3EE 0%, #FBFAF4 55%, #FFFEF9 100%);
    border:1px solid rgba(21,84,69,0.16); border-radius:14px;
    padding:26px 20px 24px; text-align:center;
  }
  .result-hero::before{
    content:''; position:absolute; top:-70px; right:-60px; width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, rgba(21,84,69,0.08) 0%, rgba(21,84,69,0) 70%);
    pointer-events:none;
  }
  .result-hero::after{
    content:''; position:absolute; bottom:-90px; left:-60px; width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, rgba(21,84,69,0.05) 0%, rgba(21,84,69,0) 70%);
    pointer-events:none;
  }
  /* 시그니처 요소 — "참"(眞, 진짜·검증됨)의 뜻을 담은 도장 마크.
     한국 전통 인감도장처럼, 이 결과가 근거 있게 계산된 값이라는 걸 시각적으로 표현함 */
  .result-seal-row{ float:right; margin:0 0 6px 10px; }
  .result-seal{
    width:44px; height:44px; border-radius:50%;
    border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:800; color:var(--gold); letter-spacing:-0.02em;
    transform:rotate(-8deg); opacity:0.9; pointer-events:none; font-family:inherit;
    background:rgba(156,111,30,0.05); flex-shrink:0;
  }
  .result-hero-label{ position:relative; font-size:var(--fs-h3); color:var(--text-muted); font-weight:600; margin:0 0 8px; overflow-wrap:normal; }
  .announced-convert-note{ font-size:var(--fs-small); color:var(--text-muted); margin:0 0 6px; font-variant-numeric:tabular-nums; }
  /* 영어는 단어 단위로 줄바꿈되면서 한국어보다 여러 줄이 되는 경우가 많아서, 버튼·제목·설명문류에
     넉넉한 줄 간격을 별도로 적용함 (한국어는 word-break:keep-all이라 상대적으로 덜 꺾임) */
  html[lang="en"] .cta-btn,
  html[lang="en"] .calc-detail-summary,
  html[lang="en"] .panel-title,
  html[lang="en"] .panel-desc,
  html[lang="en"] .explore-label,
  html[lang="en"] .dream-option,
  html[lang="en"] .panel-accordion-title,
  html[lang="en"] .section-divider-toggle,
  html[lang="en"] .faq-q,
  html[lang="en"] .refund-step-title,
  html[lang="en"] .share-btn{
    line-height:1.8;
  }
  html[lang="en"] .explore-sub{ line-height:1.6; }
  html[lang="en"] .feature-sub{ line-height:1.7; }
  .result-hero-amt{
    position:relative; font-size:40px; font-size:clamp(30px, 11vw, 54px); font-weight:800; margin:0;
    font-variant-numeric:tabular-nums; white-space:nowrap; clear:both;
    color:var(--teal); text-shadow:none; line-height:1.25;
  }
  .result-hero-basis{ font-size:var(--fs-note); color:var(--text-muted); margin:4px 0 0; }
  .result-meta-group{ margin-top:16px; padding-top:10px; border-top:1px dashed rgba(var(--ink-rgb),0.12); display:flex; flex-direction:column; align-items:center; gap:2px; }
  .result-hero-basis-mini{ font-size:16px; color:var(--text-muted); opacity:0.85; margin:0; }
  .sim-note{ font-size:var(--fs-small); color:var(--text-muted); text-align:left; margin:6px 0 0; line-height:1.5; }
  .usd-actual-note{
    font-size:var(--fs-small); color:var(--navy); font-weight:700; text-align:center; margin:4px 0 0;
    background:rgba(var(--navyblue-rgb),0.06); border-radius:8px; padding:8px 10px; line-height:1.5;
  }
  .usd-actual-note span{ font-weight:400; color:var(--text-muted); }
  .result-hero .usd-actual-note{
    color:var(--teal); background:rgba(21,84,69,0.08); position:relative;
  }
  .result-hero .usd-actual-note span{ color:var(--text-muted); }
  .krw-hint{ font-size:var(--fs-small); color:var(--text-muted); font-weight:400; margin:0 0 10px 2px; }
  .inline-link-btn{
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    color:var(--teal); font-weight:600; font-family:inherit; font-size:inherit; text-decoration:underline;
  }
  .slider-range-label{ display:flex; justify-content:space-between; font-size:var(--fs-small); color:var(--text-muted); margin-top:2px; }
  .live-result-mini{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; row-gap:4px; margin-top:0; padding:14px 18px;
    background:var(--card); border:2px solid var(--teal); border-radius:14px;
    cursor:pointer; transition:box-shadow 0.15s ease;
  }
  /* 좁은 화면에서는 label과 금액이 flex-wrap의 애매한 줄바꿈 판정에 맡겨지면(둘 다 한 줄에
     넣으려다 label만 폭이 줄어들어 2줄로 접히고, 그러고도 결국 금액이 다음 줄로 밀려서 총
     3줄이 되는 경우가 있었음) 어색하게 보여서, 좁은 화면에서는 아예 세로로 쌓아 label은
     항상 한 줄에 다 들어가게 하고 금액은 그 아래 자기 줄을 갖게 함 */
  @media (max-width: 480px) {
    .live-result-mini{ flex-direction:column; align-items:flex-start; }
    .live-result-mini span:first-child{ width:100%; }
  }
  .live-result-mini:hover, .live-result-mini:focus-within{ box-shadow:0 0 0 3px rgba(21,84,69,0.14); }
  .live-result-mini:hover{ border-color:var(--teal); }
  .live-result-mini span:first-child{ font-size:var(--fs-note); color:var(--text-muted); font-weight:600; min-width:0; overflow-wrap:break-word; }
  #home-final-basis{ display:none; }
  .live-result-mini-display{ display:inline-flex; align-items:center; gap:6px; }
  .live-result-mini-amt{ white-space:nowrap; font-size:var(--fs-emphasis); font-weight:800; color:var(--teal); font-variant-numeric:tabular-nums; }
  .live-result-mini-edit{ display:inline-flex; align-items:center; gap:6px; }
  /* 입력창/슬라이더는 메인 결과 카드보다 화면 아래쪽에 있어서, 모바일에서 스크롤해 숫자를
     바꾸면 결과가 바뀌는 게 화면 밖이라 안 보임(사용자가 직접 지적) — 메인 결과 카드가 화면에서
     벗어났을 때만 하단에 작게 떠서 지금 값을 보여줌. 누르면 메인 결과로 스크롤 이동함 */
  .sticky-result-badge{
    position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(0);
    display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px);
    background:var(--card); border:1.5px solid var(--teal); border-radius:999px;
    padding:10px 18px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 6px 20px rgba(21,84,69,0.22); cursor:pointer; font-family:inherit;
    z-index:40; opacity:0; pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease;
  }
  .sticky-result-badge.is-visible{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .sticky-result-label{ font-size:var(--fs-small); color:var(--text-muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sticky-result-amt{ font-size:var(--fs-note); font-weight:800; color:var(--teal); white-space:nowrap; font-variant-numeric:tabular-nums; }
  /* 홈 화면 전용 #sticky-result-badge는 화면 하단 가운데(left:50%)에 뜨는데, 폭이 좁은 기기에서는
     그 폭이 거의 화면 전체(max-width:calc(100% - 32px))까지 넓어질 수 있어서, 이 버튼을 단순히
     반대쪽 구석에 두는 것만으로는 겹침을 완전히 피하기 어려움 — 그래서 badge보다 확실히 위쪽
     (하단에서 충분히 띄운 높이)에 둬서 badge가 보이는 화면이든 아니든 항상 안 겹치게 함 */
  .faq-float-btn{
    position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom, 0px));
    display:inline-flex; align-items:center; gap:6px; min-height:44px;
    background:var(--teal); color:var(--on-accent); border:none; border-radius:999px;
    padding:10px 16px; font-family:inherit; font-size:var(--fs-small); font-weight:700; cursor:pointer;
    box-shadow:0 6px 16px rgba(21,84,69,0.28); z-index:39; transition:transform 0.15s ease, opacity 0.15s ease;
  }
  .faq-float-btn:active{ transform:scale(0.96); }
  .faq-float-btn.is-hidden{ display:none; }
  .faq-overlay-close-btn{ display:none; }
  /* "궁금해요" 버튼으로 도움말을 열 때, go('faq')로 실제 탭 전환을 하면 사용자가 하던 화면(입력값,
     스크롤 위치)에서 완전히 벗어나게 되고 "뒤로 가면 다시 보기 힘들다"는 피드백이 있었음 — 그래서
     탭 전환 없이 #view-faq에 이 클래스만 붙여서 현재 화면 위에 통째로 덮어씌우는 오버레이로 띄움.
     닫으면 클래스만 제거되고 원래 화면은 밑에서 손 안 댄 채 그대로 있음 */
  .view#view-faq.faq-overlay-mode{
    display:block; position:fixed; inset:0; z-index:2000; background:var(--bg);
    overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .view#view-faq.faq-overlay-mode > *{ max-width:720px; margin-left:auto; margin-right:auto; }
  .view#view-faq.faq-overlay-mode > .back-btn{ display:none; }
  .view#view-faq.faq-overlay-mode > .faq-overlay-close-btn{
    display:flex; align-items:center; gap:6px; position:sticky; top:0; z-index:1;
    background:var(--bg); border:none; font-family:inherit; font-size:var(--fs-body); font-weight:700;
    color:var(--teal); padding:4px 0 14px; cursor:pointer; margin-left:auto; margin-right:auto;
  }
  @media (max-width: 420px) {
    .sticky-result-label{ max-width:38vw; }
  }
  .mini-result-edit-input{
    width:110px; height:44px; border:1.5px solid var(--teal); border-radius:8px; padding:0 10px;
    font-size:16px; font-weight:800; font-family:inherit; color:var(--teal); text-align:right; background:var(--card);
  }
  .mini-result-edit-input:focus{ outline:none; box-shadow:0 2px 0 0 var(--teal); }
  .mini-result-edit-unit{ font-size:var(--fs-note); color:var(--text-muted); flex-shrink:0; }
  .jp-drawdays{ color:var(--text-muted); font-weight:700; }
  .dday-badge{
    display:inline-block; background:rgba(var(--ink-rgb),0.12); color:var(--text-dark); font-size:var(--fs-small); font-weight:800;
    padding:1px 6px; border-radius:8px; margin-left:5px; vertical-align:middle;
  }
  .dday-badge.today{ background:var(--status-red); color:var(--on-accent); }
  .faq-search{
    width:100%; height:40px; border:1.5px solid var(--border); border-radius:10px; padding:0 14px;
    font-size:16px; font-family:inherit; color:var(--text-dark); background:var(--bg); margin:12px 0 6px;
  }
  .faq-search:focus{ outline:none; border-color:var(--teal); }
  .faq-audience-eyebrow{ font-size:var(--fs-small); font-weight:700; color:var(--text-muted); margin:10px 0 6px; }
  .faq-audience-row{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 10px; }
  .faq-audience-chip{
    max-width:100%; font-family:inherit; font-size:var(--fs-small); font-weight:700; white-space:normal;
    padding:12px 14px; min-height:44px; border-radius:20px; border:1.5px solid var(--border); background:var(--bg); color:var(--text-muted); cursor:pointer;
  }
  .faq-audience-chip.active{ background:var(--teal); border-color:var(--teal); color:var(--on-accent); }
  /* 카테고리(주제) 필터 줄에도 "누가 묻는지" 줄과 똑같이 눈에 띄는 안내 문구를 둠 — 실사용자
     테스트에서 이 줄에는 그런 안내가 없어서, 위의 "전체" 칩과 나란히 있는 이 줄의 "전체" 칩이
     똑같은 걸 두 번 보여주는 고장난 UI처럼 보였음(서로 다른 두 필터라는 걸 몰랐음) */
  .faq-category-eyebrow{
    font-size:var(--fs-small); font-weight:700; color:var(--text-muted); margin:14px 0 6px;
    padding-top:14px; border-top:1px dashed var(--border);
  }
  .faq-chip-row{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 10px; }
  .faq-chip{
    /* white-space는 nowrap이었는데, 카테고리 중 하나("건강보험·연금·증여·사기주의")가 여러 개념을
       합친 긴 라벨이라 번역이 길어지는 언어(러시아어·카자흐어·키르기스어 등)에서 뷰포트보다
       넓은 한 줄이 되어 화면 밖으로 잘려나가는 문제가 있었음 — 줄바꿈을 허용해 알약(pill) 안에서
       2줄로 접히게 함(짧은 칩들은 어차피 한 줄에 들어가서 모양이 그대로 유지됨) */
    /* "누가 묻는지" 칩(위, teal)과 색을 다르게(gold 계열) 줘서 두 줄이 서로 다른, 독립된 필터라는
       걸 쉬는 상태에서도(선택 안 한 상태여도) 한눈에 구분할 수 있게 함 — 예전엔 둘 다 회색 계열
       쉬는 상태 + teal 선택 상태라 완전히 같은 색 체계였음 */
    max-width:100%; font-family:inherit; font-size:var(--fs-small); font-weight:700; white-space:normal;
    padding:12px 14px; min-height:44px; border-radius:20px; border:1.5px solid var(--gold-chip-border);
    background:var(--gold-chip-bg); color:var(--text-muted); cursor:pointer;
  }
  .faq-chip.active{ background:var(--gold); border-color:var(--gold); color:var(--on-accent); }
  .faq-no-result{ text-align:center; font-size:var(--fs-small); color:var(--text-muted); padding:16px 0; }
  .lightning-result{ display:flex; justify-content:center; gap:8px; margin:16px 0; flex-wrap:nowrap; }
  .lightning-ball{
    width:42px; height:42px; border-radius:50%; background:var(--bg); border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--fs-body); color:var(--navy);
    transition:all 0.3s; flex-shrink:1;
  }
  .lightning-ball.pb{ background:rgba(var(--ink-rgb),0.12); border-color:var(--text-dark); color:var(--text-dark); }
  .lightning-ball.mega{ background:rgba(148,103,22,0.12); border-color:var(--status-amber); color:var(--status-amber); }
  .lightning-ball.drawn{ animation:pop 0.3s ease; }
  .lightning-ball.spinning{ animation:lightning-spin-pulse 0.15s linear infinite; }
  @keyframes lightning-spin-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }
  .lightning-result.celebrate{ animation:lightning-celebrate 0.4s ease; }
  @keyframes lightning-celebrate{ 0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
  .lightning-game-toggle{ display:flex; justify-content:center; gap:8px; margin:4px 0 2px; }
  .lightning-game-btn{
    font-size:var(--fs-small); font-weight:700; color:var(--text-muted); background:var(--bg);
    border:1.5px solid var(--border); border-radius:20px; padding:6px 14px; cursor:pointer;
  }
  .lightning-game-btn.active{ color:var(--teal); border-color:var(--teal); background:rgba(21,84,69,0.06); }
  /* 확률체감 페이지엔 파워볼/메가밀리언즈 토글이 두 곳(등수표용·번개 번호용)에 있어서, 서로
     다른 기능임을 구분할 수 있게 등수표 쪽만 세그먼트 필 스타일로 다르게 표시함(디자인 3차 개선) */
  .odds-toggle-eyebrow{ font-size:var(--fs-small); font-weight:700; color:var(--text-muted); text-align:center; margin:0 0 6px; }
  .lightning-game-toggle.is-context{
    display:flex; gap:4px; justify-content:stretch; background:var(--chip-bg); border-radius:12px; padding:4px; margin:0 0 2px;
  }
  .lightning-game-toggle.is-context .lightning-game-btn{
    flex:1; border:none; border-radius:9px; background:transparent; padding:8px 6px;
  }
  .lightning-game-toggle.is-context .lightning-game-btn.active{
    background:var(--card); box-shadow:0 1px 2px rgba(var(--ink-rgb),0.12);
  }
  @keyframes pop{ 0%{ transform:scale(0.5); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

  .prize-card{
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 16px; margin-bottom:8px;
  }
  .prize-card:last-child{ margin-bottom:0; }
  .prize-card.jackpot{ background:rgba(var(--ink-rgb),0.1); border:1.5px solid rgba(var(--ink-rgb),0.35); padding:14px 16px; }
  .prize-tag{ font-size:var(--fs-small); font-weight:800; color:var(--text-dark); margin:0 0 2px; }
  .prize-match{ font-size:var(--fs-small); font-weight:700; color:var(--text-dark); margin:0; }
  .prize-left, .prize-right{ min-width:0; }
  .prize-right{ text-align:right; overflow-wrap:break-word; }
  .prize-amt{ font-size:var(--fs-body); font-weight:800; color:var(--text-dark); margin:0; }
  .prize-amt-note{ font-size:var(--fs-small); font-weight:500; color:var(--text-muted); margin:2px 0 0; }
  .prize-card.jackpot .prize-amt{ color:var(--teal); font-size:var(--fs-emphasis); }
  .odds-game-note:not(:empty){
    display:block; background:var(--grad-amber); border-left:4px solid var(--status-amber);
    border-radius:8px; padding:12px 14px; margin:0 0 16px;
    font-size:var(--fs-small); font-weight:600; color:var(--text-dark); text-align:left;
  }
  .prize-odds{ font-size:var(--fs-small); color:var(--text-muted); margin:2px 0 0; }

  .howto-box{ background:var(--bg); border-radius:10px; padding:12px 16px; margin-bottom:14px; }
  .howto-title{ font-size:var(--fs-h3); font-weight:800; color:var(--text-dark); margin:0 0 6px; }
  .howto-text{ font-size:var(--fs-small); color:var(--text-muted); margin:0; line-height:1.6; }
  .howto-text b{ color:var(--text-dark); }
  .prize-explain{ font-size:var(--fs-small); color:var(--text-muted); margin:1px 0 0; }
  .prize-pct{ color:var(--text-muted); font-weight:400; font-size:var(--fs-small); opacity:0.75; }
  .prize-usd{ font-size:var(--fs-small); color:var(--text-muted); font-weight:400; }

  .jc-tap-cta{
    text-align:center; font-size:var(--fs-note); color:var(--teal); font-weight:700; margin:-2px 0 10px; cursor:pointer;
  }
  .flow-explain{ font-size:var(--fs-small); color:var(--text-muted); text-align:left; margin:0 0 4px; }
  .flow-explain-title{ font-size:var(--fs-small); font-weight:700; color:var(--text-dark); margin:0 0 6px; }
  .flow-explain-list{ margin:0 0 8px; padding-left:20px; font-size:var(--fs-small); color:var(--text-dark); }
  .flow-explain-list li{ margin:3px 0; }
  .flow-explain-note{ font-size:var(--fs-small); color:var(--text-muted); margin:0; }
  .filing-note{
    font-size:var(--fs-small); color:var(--text-muted); line-height:1.55; margin:10px 0;
  }
  .filing-note b{ color:var(--text-dark); font-weight:700; }
  .us-state-compare-toggle{ margin:8px 0; }
  .us-state-compare-summary{ font-size:var(--fs-small); color:var(--teal); font-weight:700; cursor:pointer; list-style:none; padding:6px 0; }
  .us-state-compare-summary::-webkit-details-marker{ display:none; }
  .us-state-compare-table{ max-height:320px; overflow-y:auto; margin-top:4px; border:1px solid var(--border); border-radius:10px; padding:2px 10px; background:var(--bg); }
  .us-state-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--border); font-size:var(--fs-small); }
  .us-state-row:last-child{ border-bottom:none; }
  .us-state-row-name{ color:var(--text-dark); }
  .us-state-row-rate{ color:var(--text-muted); }
  .us-state-row-amt{ font-weight:700; color:var(--teal); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .us-state-row.is-current{ background:rgba(21,84,69,0.1); border-radius:6px; padding-left:6px; padding-right:6px; margin:0 -6px; }
  .filing-label{ font-size:var(--fs-small); font-weight:600; color:var(--text-muted); margin:0 0 6px; }
  /* 이 US 배지는 선택 가능한 토글이 아니라 "이 항목은 미국 기준이에요"라는 정보성 라벨이라,
     과세기준 토글의 활성 색(청록)을 그대로 쓰면 마치 선택된 버튼처럼 보여 헷갈림 — 중립 톤으로 */
  .filing-label .flag-badge{ background:var(--text-dark); }
  .filing-label span{ font-weight:400; color:var(--text-muted); }
  .filing-note-small{ font-size:var(--fs-small); color:var(--text-muted); margin:-4px 0 10px; line-height:1.5; }
  .input-card{ position:relative; background:var(--input-card-bg); border:2.5px solid var(--teal); border-radius:12px; padding:14px 16px 16px; margin-top:22px; }

  /* 🎯 내 번호 vs 역대급 당첨번호 비교 위젯 — 너비 240px처럼 아주 좁은 화면에서도 안 깨지게
     input-row를 flex-wrap으로 둬서, 한 줄에 다 못 들어가면 자동으로 다음 줄로 넘어가게 함
     (고정 폭 대신 wrap을 쓰는 게 이 사이트의 다른 좁은-화면 대응 패턴과 일관됨) */
  .mn-card{ margin-top:18px; }
  .mn-field-label{ font-size:var(--fs-small); font-weight:700; color:var(--text-muted); margin:0 0 6px; }
  .mn-field-label:not(:first-child){ margin-top:14px; }
  .mn-input-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .mn-num-input{
    width:46px; height:46px; text-align:center; font-size:var(--fs-body); font-weight:800; font-family:inherit;
    border:1.5px solid var(--border); border-radius:10px; background:var(--card); color:var(--text-dark);
    font-variant-numeric:tabular-nums; padding:0; -moz-appearance:textfield;
  }
  /* 스핀 화살표(위/아래 버튼)는 46px 폭 안에서 숫자와 겹쳐 보여서 오히려 지저분함 — 모바일은
     어차피 inputmode="numeric"으로 숫자 키패드가 뜨므로 화살표 없이도 입력에 문제없음 */
  .mn-num-input::-webkit-outer-spin-button, .mn-num-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .mn-num-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(21,84,69,0.14); }
  /* 파워볼 번호칸만 빨간 테두리로 구분 — 잭팟 카드·번개뽑기의 특별볼(빨강) 색 관례를 그대로 따름 */
  .mn-special-input{ border-color:var(--status-red); color:var(--status-red); }
  .mn-special-input:focus{ border-color:var(--status-red); box-shadow:0 0 0 3px rgba(var(--status-red-rgb),0.16); }
  .mn-error{ font-size:var(--fs-small); color:var(--status-red); font-weight:700; margin:10px 0 0; }
  .mn-error:empty{ display:none; margin:0; }
  .mn-check-btn{ margin-top:14px; }
  .mn-disclaimer{ color:var(--text-muted); }
  .mn-result-wrap{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
  .mn-result-card{ background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
  .mn-result-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
  .mn-result-tag{ font-size:var(--fs-small); font-weight:700; color:var(--text-muted); }
  .mn-result-date{ font-size:var(--fs-small); color:var(--text-muted); font-variant-numeric:tabular-nums; }
  .mn-result-balls{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
  .mn-result-ball{
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-small); font-weight:800; border:2px solid var(--border); color:var(--text-muted); background:var(--card);
    flex-shrink:0;
  }
  .mn-result-ball.hit{ border-color:var(--teal); color:var(--on-accent); background:var(--teal); }
  .mn-result-ball.special{ border-color:var(--status-red); color:var(--status-red); }
  .mn-result-ball.special.hit{ color:var(--on-accent); background:var(--status-red); }
  .mn-result-match{ font-size:var(--fs-small); font-weight:700; color:var(--text-dark); margin:0 0 2px; }
  .mn-result-tone{ font-size:var(--fs-small); font-weight:600; color:var(--teal); margin:2px 0 0; }
  /* 역대급 잭팟 카드들과 "실제 회차 베스트 매치" 카드들을 나누는 구분선 겸 라벨 —
     아카이브가 커지면서 두 그룹이 섞여 보이지 않게 함 */
  .mn-section-label{ font-size:var(--fs-small); font-weight:700; color:var(--text-muted); margin:8px 0 0; padding-top:12px; border-top:1px dashed var(--border); }
  .amount-input-tabs{
    display:flex; align-items:stretch; gap:4px; background:var(--chip-bg); border-radius:12px; padding:4px; margin-bottom:14px;
  }
  .amount-tab-btn{
    flex:1; min-width:0; min-height:52px; border-radius:9px; border:none; background:transparent;
    color:var(--text-muted); font-family:inherit; font-size:var(--fs-small); font-weight:700; cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    padding:9px 6px; line-height:1.3; overflow-wrap:break-word; word-break:keep-all;
  }
  .amount-tab-btn.active{ color:var(--teal); font-weight:800; background:var(--card); box-shadow:0 1px 2px rgba(var(--ink-rgb),0.12); }
  .amount-tab-panel{ margin-bottom:6px; }
  .field-label-single{ font-size:var(--fs-small); color:var(--text-muted); font-weight:600; margin:0 0 4px; }
  .section-divider{
    text-align:center; font-size:var(--fs-small); font-weight:700; color:var(--text-muted);
    margin:20px 0 12px; padding-top:16px; border-top:1px dashed var(--border);
  }
  /* FAQ 화면에서 검색창+카테고리 칩(도구 영역)과 그 아래 질문 아코디언 목록(콘텐츠 영역)이
     같은 톤으로 바로 붙어서 어디부터 FAQ 목록인지 애매하다는 지적 — 라벨 없이 얇은 구분선만 추가 */
  .faq-list-divider{ border-top:1px dashed var(--border); margin:18px 0 4px; }
  .explore-section{ margin-top:20px; }
  .explore-title{ font-size:var(--fs-note); font-weight:700; color:var(--text-dark); margin:0 0 10px; text-align:center; }
  .explore-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
  .explore-card{
    /* min-width:0이 없으면 그리드 트랙이 내용(긴 번역 텍스트)만큼 억지로 넓어지는 "그리드 blowout"
       현상이 생겨, 카자흐어·키르기스어처럼 라벨이 긴 언어에서 카드가 화면 밖으로 삐져나갔음 */
    display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0;
    background:var(--card); border:1.5px solid var(--border); border-radius:12px; padding:14px 10px;
    cursor:pointer; font-family:inherit; text-align:center;
    transition:border-color 0.15s ease, transform 0.1s ease;
  }
  .explore-card:active{ transform:scale(0.97); }
  @media (hover: hover) {
    .explore-card:hover{ border-color:var(--teal); }
  }
  .explore-icon{ font-size:22px; }
  .explore-label{ font-size:var(--fs-small); font-weight:700; color:var(--text-dark); overflow-wrap:break-word; }
  .explore-sub{ font-size:16px; color:var(--text-muted); line-height:1.3; overflow-wrap:break-word; }
  .more-details-toggle{ margin-top:16px; }
  .jp-panel-content{ padding-top:14px; margin-top:14px; border-top:1px solid var(--border); }
  .jp-card{ background:var(--bg); border:none; }
  .jp-card:hover{ transform:none; box-shadow:none; }
  .tg-card{ background:var(--bg); border:none; padding:12px; }
  .tg-card:hover{ transform:none; box-shadow:none; }
  /* .feature-sub is display:flex for the jackpot d-day badge usage (game name + badge span
     side by side), but here it's plain wrapping text with no child elements — as a flex
     container its own text becomes an anonymous flex item that refuses to wrap, causing
     text to run off the right edge instead of breaking to a new line (seen on real devices
     via KakaoTalk in-app browser screenshots). Reset to block so it wraps normally. */
  .tg-card .feature-sub{ display:block; }
  .section-divider-toggle{
    position:relative; display:flex; justify-content:flex-start; align-items:baseline; flex-wrap:wrap; row-gap:2px;
    text-align:left; font-size:var(--fs-note); font-weight:700; color:var(--text-dark); cursor:pointer;
    list-style:none; padding:14px 34px 14px 16px;
    /* 예전엔 var(--card)/var(--border)라 주변 페이지 배경(--bg)과 명암 차이가 거의 없어서
       "펼치는 버튼"이 아니라 그냥 텍스트 줄처럼 보였음(실사용자 테스트에서 FAQ의 "더 자세히
       알아보기"를 통째로 놓침) — 탭 메뉴를 버튼처럼 보이게 고친 것(5a7d6ea)과 같은 teal 톤 배경을
       줘서 "이건 누를 수 있다"는 신호를 강하게 함 */
    background:rgba(21,84,69,0.06); border:1.5px solid rgba(21,84,69,0.3);
    border-radius:12px; transition:border-color 0.15s ease, background 0.15s ease;
  }
  /* FAQ "더 자세히 알아보기"는 안에 .panel-accordion-title(20px) 자식들을 담고 있어서
     부모 토글이 자식보다 작아 보이지 않게 이 토글만 더 크게 키움 */
  .section-divider-toggle-lg{ font-size:var(--fs-h2); }
  .section-divider-toggle::-webkit-details-marker{ display:none; }
  .section-divider-toggle::after{
    content:'▾'; color:var(--teal); position:absolute; right:14px; top:18px;
    transition:transform 0.2s ease;
  }
  .more-details-toggle[open] > .section-divider-toggle{ border-color:var(--teal); }
  .more-details-toggle[open] > .section-divider-toggle::after{ transform:rotate(180deg); }
  .more-details-toggle > .panel:first-of-type{ margin-top:14px; }
  .panel-accordion{
    background:var(--card); border-radius:16px; padding:20px; margin-top:14px; box-shadow:0 1px 3px rgba(var(--navyblue-rgb),0.06);
  }
  .panel-accordion-title{
    font-size:var(--fs-h3); font-weight:700; color:var(--text-dark); cursor:pointer; list-style:none;
    display:block; position:relative; padding-right:26px;
  }
  .panel-accordion-title::-webkit-details-marker{ display:none; }
  .panel-accordion-title::after{
    content:'▾'; font-size:16px; font-weight:400; color:var(--teal); transition:transform 0.2s ease;
    position:absolute; right:0; top:calc(var(--fs-h3) * 0.825); transform:translateY(-50%);
  }
  .panel-accordion[open] > .panel-accordion-title::after{ transform:translateY(-50%) rotate(180deg); }
  .panel-accordion[open] > .panel-accordion-title{ margin-bottom:4px; }
  .calc-detail-toggle{
    margin-top:12px; background:var(--card); border:1.5px solid var(--border); border-radius:12px;
    padding:0 16px; transition:border-color 0.15s ease, padding 0.15s ease;
  }
  .calc-detail-toggle[open]{ border-color:var(--teal); padding-bottom:16px; }
  /* 디자인 원본은 재미로 보기 토글을 카드가 아니라 일반 텍스트 줄처럼 테두리 없이 보여줌 */
  .fun-toggle{ margin-top:14px; padding:0 16px; }
  .fun-toggle[open]{ padding-bottom:16px; }
  .section-divider-toggle-plain{
    background:none; border:none; border-radius:0;
  }
  .calc-detail-summary{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-size:var(--fs-note); font-weight:700; color:var(--text-dark); cursor:pointer; list-style:none;
    text-align:left; margin:0 -16px; padding:14px 16px;
  }
  .calc-detail-summary::after{
    content:'▾'; font-weight:400; color:var(--teal); flex-shrink:0; transition:transform 0.2s ease;
  }
  .calc-detail-toggle[open] > .calc-detail-summary::after,
  .fun-toggle[open] > .calc-detail-summary::after{ transform:rotate(180deg); }
  .calc-detail-summary::-webkit-details-marker{ display:none; }
  .calc-detail-summary + *{
    margin-top:12px !important; padding-top:12px; border-top:1px solid var(--border);
  }
  .flex-box{
    margin-top:14px; background:linear-gradient(135deg, rgba(var(--ink-rgb),0.08), rgba(var(--ink-rgb),0.08));
    border-radius:12px; padding:14px 16px;
  }
  .flex-row{ display:flex; align-items:center; flex-wrap:wrap; row-gap:2px; gap:8px; padding:5px 0; font-size:var(--fs-small); }
  .flex-icon{ flex-shrink:0; font-size:15px; }
  .flex-label{ flex:1; min-width:120px; color:var(--text-dark); }
  .flex-val{ font-weight:800; color:var(--text-dark); white-space:normal; text-align:right; margin-left:auto; }
  .grounding-note{
    font-size:var(--fs-small); color:var(--text-muted); text-align:center; margin:8px 0 0; font-style:italic;
  }
  .dream-intro{ font-size:var(--fs-note); color:var(--text-muted); text-align:center; margin:0 0 10px; }
  .dream-options{ display:flex; flex-direction:column; gap:8px; }
  .dream-option{
    display:block; width:100%; text-align:left; background:var(--card); border:1.5px solid var(--border);
    border-radius:12px; padding:12px 14px; font-family:inherit; font-size:var(--fs-note); font-weight:600;
    color:var(--text-dark); cursor:pointer; transition:border-color 0.15s ease;
  }
  .dream-option:active{ transform:scale(0.98); }
  .dream-emoji{ font-size:1.4em; vertical-align:-3px; margin-right:2px; }
  @media (hover: hover) { .dream-option:hover{ border-color:var(--teal); } }
  .dream-result{
    margin-top:14px; padding:18px 16px; text-align:center; background:var(--grad-soft);
    border:1px solid rgba(21,84,69,0.2); border-radius:12px;
  }
  .dream-title{ font-size:var(--fs-h3); font-weight:800; color:var(--teal); margin:0 0 6px; }
  .dream-desc{ font-size:var(--fs-note); color:var(--text-dark); margin:0 0 8px; line-height:1.5; }
  .dream-amt{ font-size:var(--fs-small); color:var(--text-muted); font-weight:700; margin:0 0 12px; }
  .milestone-badge{
    font-size:var(--fs-note); font-weight:700; color:var(--teal); text-align:center; margin:6px 0 0;
    animation:milestonePop 0.4s ease; position:relative;
  }
  @keyframes milestonePop{ 0%{ transform:scale(0.7); opacity:0; } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); opacity:1; } }
  .milestone-burst{ position:relative; display:block; height:0; text-align:center; pointer-events:none; }
  .milestone-burst .ball{
    position:absolute; top:0; font-size:14px; opacity:0; will-change:transform, opacity;
    animation:ballPop 1s ease-out forwards; filter:saturate(0.85);
  }
  @keyframes ballPop{
    0%{ transform:translate(-50%, 0) scale(0.5); opacity:0; }
    18%{ opacity:1; transform:translate(-50%, -8px) scale(1); }
    100%{ transform:translate(-50%, -34px) scale(0.9); opacity:0; }
  }
  .winner-story{ display:flex; flex-direction:column; gap:4px; padding:10px 0; border-bottom:1px solid var(--border); }
  .winner-story:last-child{ border-bottom:none; }
  .ws-amt{ font-size:var(--fs-body); font-weight:800; color:var(--teal); }
  .ws-amt-alt{ font-size:var(--fs-note); font-weight:700; color:var(--text-dark); }
  .ws-desc{ font-size:var(--fs-note); color:var(--text-muted); line-height:1.6; overflow-wrap:break-word; }
  .jackpot-history-row{ display:flex; gap:12px; padding:0; }
  .jh-timeline{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; padding-top:6px; }
  .jh-timeline-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
  .jh-timeline-dot.pb{ background:var(--status-red); }
  .jh-timeline-dot.mm{ background:var(--status-amber); }
  .jh-timeline-line{ flex:1; width:1.5px; background:var(--border); margin-top:4px; min-height:16px; }
  .jackpot-history-row:last-child .jh-timeline-line{ display:none; }
  .jh-content{
    flex:1; min-width:0; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 14px;
  }
  .jackpot-history-row{ margin-bottom:12px; }
  .jackpot-history-row:last-child{ margin-bottom:0; }
  .jh-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .jh-date{ font-size:var(--fs-small); color:var(--text-muted); flex:0 0 auto; }
  .jh-game-tag{ display:inline-block; font-size:11px; font-weight:800; border-radius:6px; padding:2px 7px; }
  .jh-game-tag.pb{ background:var(--game-pb-bg); border:1px solid var(--game-pb-border); color:var(--status-red); }
  .jh-game-tag.mm{ background:var(--game-mm-bg); border:1px solid var(--game-mm-border); color:var(--status-amber); }
  .jh-note{ font-size:var(--fs-small); color:var(--text-muted); margin:2px 0 0; }
  .jh-primary-group{ background:rgba(var(--ink-rgb),0.06); border-radius:10px; padding:10px 12px; margin:0 0 6px; }
  .jh-primary-group .jh-amt-item{ flex-direction:row; justify-content:space-between; align-items:baseline; gap:8px; }
  .jh-primary-group .jh-amt-label{ font-size:var(--fs-small); font-weight:600; }
  .jh-primary-group .jh-amt{ font-size:17px; }
  .jh-amounts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
  .jh-amt-chip{ background:var(--input-card-bg); border-radius:8px; padding:7px 10px; min-width:0; }
  .jh-amt-chip .jh-amt-label{ font-size:var(--fs-small); }
  .jh-amt-chip .jh-amt{ font-size:var(--fs-small); color:var(--text-dark); }
  .jh-amt-item{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .jh-amt-label{ font-size:var(--fs-small); color:var(--text-muted); }
  .jh-amt{ font-size:var(--fs-note); font-weight:800; color:var(--teal); }
  /* 예전엔 점선 밑줄(text-decoration:dotted)로 "누르면 펼쳐진다"는 걸 표시했는데, 좁은 화면에서
     라벨이 2줄로 줄바꿈되면 밑줄이 글자 중간을 가로지르는 것처럼 보여 취소선처럼 오해될 수
     있었음(날짜조회 카드에 이 배지가 합쳐지며 더 잘 보이게 됨) — 밑줄 대신 다른 토글 배지
     (.jh-more-summary)와 같은 방식으로 teal 색+굵게만으로 클릭 가능함을 표시 */
  button.jh-amt-group-toggle{ font-family:inherit; background:none; border:none; padding:0; text-align:left; cursor:pointer; color:var(--teal); font-weight:700; }
  .jh-amt-group-list{ flex-wrap:wrap; gap:4px; margin-top:6px; max-width:100%; }
  .jh-more{ margin-top:8px; }
  .jh-more-summary{
    display:flex; align-items:center; justify-content:center; gap:4px;
    /* 13px는 이 코드베이스의 시니어 가독성 최소 기준(--fs-small:16px)에 못 미쳤던 값 — 다른
       토글 요약과 같은 최소 크기로 맞춤(2026-07 접근성 감사) */
    font-size:var(--fs-small); color:var(--teal); font-weight:700; text-align:center; cursor:pointer; list-style:none; margin-top:6px;
  }
  .jh-more-summary::after{ content:'▾'; font-weight:400; transition:transform 0.2s ease; }
  .jh-more[open] > .jh-more-summary::after{ transform:rotate(180deg); }
  .jh-more-summary::-webkit-details-marker{ display:none; }
  .jh-more-btn{
    display:block; width:100%; margin-top:12px; padding:10px; border-radius:10px; border:1px solid var(--border);
    background:var(--bg); color:var(--teal); font-family:inherit; font-size:var(--fs-small); font-weight:700; cursor:pointer;
  }
  .jh-more-btn:hover{ background:rgba(21,84,69,0.08); }
  .jh-rank-list{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
  .jh-rank-row{ display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:10px 14px; }
  .jh-rank-medal{ font-size:20px; font-weight:800; width:28px; flex-shrink:0; text-align:center; }
  .jh-rank-body{ min-width:0; flex:1; }
  .jh-rank-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .jh-rank-date{ font-size:var(--fs-note); color:var(--text-muted); font-variant-numeric:tabular-nums; }
  .jh-rank-amt{ font-size:var(--fs-h3); font-weight:800; color:var(--teal); margin-top:2px; }
  .jh-rank-sub{ font-size:var(--fs-note); color:var(--text-muted); margin-top:1px; }
  .dl-inline-label{ font-size:var(--fs-small); font-weight:600; color:var(--text-dark); margin:14px 0 6px; }
  .dl-input-row{ margin-top:4px; }
  #dl-result:not(:empty){ margin-bottom:16px; }
  .dl-date-input{
    width:100%; max-width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
    background:var(--card); color:var(--text-dark); font-family:inherit; font-size:var(--fs-small);
    box-sizing:border-box;
    /* iOS 사파리는 type=date의 내부 날짜 세그먼트+달력 아이콘 고유 너비를 width:100%보다
       우선시해서 박스 테두리 밖으로 튀어나오는 경우가 있음(사용자가 스크린샷으로 직접 지적,
       2026-07-23) — 이 웹킷 전용 속성으로 내부 최소 너비 강제를 해제해야 실제로 잡힘 */
    -webkit-min-logical-width:0;
  }
  .dl-date-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(21,84,69,0.14); }
  .dl-empty{ font-size:var(--fs-small); color:var(--text-muted); text-align:center; padding:14px 0; }
  .dl-amt, .dl-no-amt{ font-size:var(--fs-small); color:var(--text-muted); margin:6px 0 0; }
  .dl-amt{ font-weight:700; color:var(--teal); }
  .jackpot-history-empty{ font-size:var(--fs-note); color:var(--text-muted); text-align:center; padding:12px 0; }
  .ticket-mock{ margin-top:10px; }
  .ticket-mock-title{ font-size:var(--fs-h3); font-weight:700; color:var(--text-dark); margin:0 0 6px; }
  .ticket-mock-card{
    background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px;
    font-family:'Courier New', monospace;
  }
  .ticket-mock-row{ text-align:center; margin-bottom:6px; }
  .ticket-mock-numbers{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:0; max-width:100%; }
  .tm-ball{
    display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
    border-radius:50%; background:var(--navy); color:var(--on-accent); font-size:var(--fs-note); font-weight:800; margin:2px;
  }
  .tm-ball.pb{ background:var(--status-red); }
  .ticket-mock-meta{ text-align:center; font-size:var(--fs-small); color:var(--text-muted); margin:6px 0; }
  .ticket-mock-barcode{ text-align:center; font-size:var(--fs-body); letter-spacing:1px; color:var(--text-dark); margin-top:4px; }
  .check-methods{ margin-top:6px; }
  .check-method{ display:flex; gap:8px; align-items:flex-start; margin-bottom:6px; font-size:var(--fs-body); color:var(--text-muted); line-height:1.5; }
  .check-method > span:last-child{ min-width:0; flex:1; }
  .check-method:last-child{ margin-bottom:0; }
  .cm-num{
    flex-shrink:0; width:18px; height:18px; border-radius:50%; background:rgba(var(--ink-rgb),0.12); color:var(--text-dark);
    font-size:var(--fs-small); font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .check-method b{ color:var(--text-dark); }
  .payout-compare{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  .payout-col{ background:var(--bg); border-radius:8px; padding:10px 12px; min-width:0; }
  .payout-col-title{ font-size:var(--fs-h3); font-weight:700; color:var(--text-dark); margin:0 0 4px; overflow-wrap:break-word; }
  .payout-col-detail{ font-size:var(--fs-small); color:var(--text-muted); line-height:1.5; margin:0; overflow-wrap:break-word; }
  .payout-col-detail b{ color:var(--text-dark); }
  .playslip-box{ background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-top:10px; }
  .playslip-summary{
    cursor:pointer; list-style:none; display:block; position:relative; padding-right:26px; margin:0;
  }
  .playslip-summary::-webkit-details-marker{ display:none; }
  .playslip-summary::after{
    content:'▾'; font-weight:400; color:var(--teal); transition:transform 0.2s ease;
    position:absolute; right:0; top:50%; transform:translateY(-50%);
  }
  .playslip-box[open] > .playslip-summary::after{ transform:translateY(-50%) rotate(180deg); }
  .playslip-mock{ background:var(--card); border:1.5px dashed var(--border); border-radius:8px; padding:10px 12px; margin:8px 0; }
  .ps-board-label{ font-size:var(--fs-small); font-weight:800; color:var(--text-muted); letter-spacing:1px; margin:0 0 6px; }
  .ps-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .ps-row:last-child{ margin-bottom:0; }
  .ps-hint{ font-size:var(--fs-small); color:var(--text-muted); flex-shrink:0; }
  .ps-bubbles{ display:flex; gap:3px; }
  .ps-b{
    display:inline-block; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--border);
    font-style:normal;
  }
  .ps-b.filled{ border-color:var(--navy); background:radial-gradient(circle, var(--navy) 40%, transparent 41%); }
  .ps-b.filled.pb{ border-color:var(--status-red); background:radial-gradient(circle, var(--status-red) 40%, transparent 41%); }
  .ps-b.qp{
    width:auto; height:14px; border-radius:4px; font-size:9px; font-weight:800; color:var(--text-muted);
    border-color:var(--border); display:inline-flex; align-items:center; justify-content:center; padding:0 3px;
  }
  .ps-steps{ margin-top:6px; }
  .legal-section{ margin-bottom:16px; }
  .legal-h{ font-size:var(--fs-h3); font-weight:800; color:var(--text-dark); margin:0 0 6px; }
  .legal-body{ font-size:var(--fs-body); color:var(--text-muted); line-height:1.7; margin:0; overflow-wrap:break-word; }
  .legal-body b{ color:var(--text-dark); }

  .jackpot-calc{
    display:none; background:var(--card); border:1.5px solid rgba(21,84,69,0.25); border-radius:12px;
    padding:16px; margin:-2px 0 10px; text-align:center;
  }
  .jackpot-calc.show{ display:block; }
  .jc-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 8px; font-size:var(--fs-small); color:var(--text-dark); padding:4px 0; }
  .jc-val{ font-weight:800; }
  .jc-row.jc-final{ font-weight:800; color:var(--teal); }
  .jc-row.jc-final .jc-val{ color:var(--teal); }
  .jc-note{ font-size:var(--fs-small); color:var(--text-muted); margin:10px 0 0; line-height:1.6; }
  .jc-note b{ color:var(--text-dark); }
  .jc-annuity-box{ margin-top:6px; background:var(--bg); border-radius:8px; padding:10px 12px; }
  .jc-annuity-box .jc-row{ border-bottom:1px solid var(--border); padding:8px 0; }
  .jc-annuity-box .jc-row:last-of-type{ border-bottom:none; }
  .jc-annuity-box .jc-row.jc-final{ background:rgba(21,84,69,0.06); margin:2px -8px; padding:8px 8px; border-radius:8px; border-bottom:none; }
  .annuity-schedule-wrap{ margin-top:8px; }
  .annuity-schedule-row{
    display:grid; grid-template-columns:38px 1fr 1fr; gap:4px 8px; align-items:baseline;
    font-size:12px; color:var(--text-dark); padding:5px 0; border-bottom:1px solid var(--border);
  }
  .annuity-schedule-header{ font-weight:700; color:var(--text-muted); border-bottom:1.5px solid var(--border); }
  .annuity-schedule-list{ max-height:260px; overflow-y:auto; }
  .annuity-schedule-list .annuity-schedule-row:last-child{ border-bottom:none; }
  .annuity-schedule-net{ font-weight:700; color:var(--teal); }

  .jc-stepper{ margin-top:8px; text-align:left; }
  .jc-step{ display:flex; gap:12px; position:relative; padding-bottom:20px; }
  .jc-step:last-child{ padding-bottom:0; }
  .jc-step-num{
    flex-shrink:0; width:30px; height:30px; border-radius:50%; background:rgba(var(--ink-rgb),0.1); color:var(--text-dark);
    font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  }
  .jc-step-body{ flex:1; min-width:0; padding-top:1px; }
  .jc-step-label{ font-size:var(--fs-small); color:var(--text-muted); margin:0 0 3px; }
  .jc-step-val{ font-size:var(--fs-body); font-weight:700; color:var(--text-dark); margin:0; }
  .jc-step-highlight .jc-step-num{ background:var(--teal); color:var(--on-accent); }
  .jc-step-highlight .jc-step-label{ color:var(--text-dark); font-weight:600; }
  .jc-step-val-big{ font-size:var(--fs-h1); font-weight:800; color:var(--teal); margin:2px 0 6px; font-variant-numeric:tabular-nums; }
  /* 디자인 3차 개선: 1·2단계는 참고용 정보로 나란히 축소하고, 제일 중요한 3단계(세후 실수령액)만
     그라데이션 카드로 확실히 승격 — 4단계(연금 옵션)는 궁금한 사람만 펼쳐보는 아코디언으로 분리 */
  .jc-step-row-12{ display:flex; gap:10px; margin-bottom:8px; }
  @media (max-width:340px){
    /* 좁은 화면(아이폰 SE급)에서는 두 칸이 반씩 나눠 가지면 "일시불 선택 시 (세전, 약 58%)"
       같은 짧은 문구도 단어마다 줄바꿈되며 세로로 길게 늘어졌음 — 세로로 쌓아서 각 칸이
       전체 너비를 쓰게 함 */
    .jc-step-row-12{ flex-direction:column; }
  }
  .jc-step-row-12 .jc-step{
    flex:1; min-width:0; background:var(--card); border:1px solid var(--border); border-radius:12px;
    padding:10px 12px; padding-bottom:10px;
  }
  .jc-step-row-12 .jc-step-num{ width:18px; height:18px; font-size:11px; }
  .jc-step-row-12 .jc-step-label{ font-size:var(--fs-small); }
  .jc-step-row-12 .jc-step-val{ font-size:var(--fs-small); }
  .jc-step-arrow{ text-align:center; color:var(--teal); font-size:16px; margin:2px 0; }
  .jc-step-highlight{
    flex-direction:column; align-items:center; text-align:center; padding-bottom:0;
    background:var(--grad-soft); border:1.5px solid rgba(21,84,69,0.3); border-radius:16px; padding:20px 18px;
  }
  .jc-step-highlight .jc-step-num{ width:32px; height:32px; margin:0 auto 10px; }
  .jc-step-highlight .jc-step-val-big{ font-size:38px; }
  .jc-stepper > .calc-detail-toggle{ margin-top:14px; }

  .back-btn{
    display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:12px 16px; min-height:44px; font-family:inherit; font-size:var(--fs-small); font-weight:700; color:var(--text-dark);
    cursor:pointer; margin-bottom:14px;
  }
  

  .game-compare{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .game-card{ border-radius:12px; padding:16px; border:2px solid var(--border); }
  .game-card.powerball{ background:var(--game-pb-bg); border-color:var(--game-pb-border); }
  .game-card.megamillions{ background:var(--game-mm-bg); border-color:var(--game-mm-border); }
  .game-name{ font-size:var(--fs-note); font-weight:800; color:var(--text-dark); margin:0 0 12px; text-align:center; }
  .game-row{ display:flex; flex-direction:column; gap:2px; padding:8px 0; border-top:1px solid rgba(var(--ink-rgb),0.06); }
  .game-row:first-of-type{ border-top:none; }
  .game-label{ font-size:var(--fs-small); color:var(--text-muted); font-weight:400; }
  .game-val{ font-size:var(--fs-small); color:var(--text-dark); font-weight:700; line-height:1.4; }
  .same-place-box{
    background:rgba(var(--ink-rgb),0.06); border:1.5px dashed var(--seafoam); border-radius:10px;
    padding:10px 14px; text-align:center; font-size:var(--fs-small); font-weight:700; color:var(--seafoam); margin-top:12px;
  }

  .cta-btn{
    display:block; width:100%; text-align:center;
    background:var(--teal); color:var(--on-accent);
    font-family:inherit; font-size:var(--fs-note); font-weight:700; padding:13px; border:none; border-radius:12px;
    cursor:pointer; margin-top:14px;
  }

  .contact-field-row{ margin-bottom:10px; }
  .contact-input{
    flex:1; min-width:0; height:44px; border:1px solid var(--border); border-radius:8px; padding:0 12px;
    font-size:16px; font-family:inherit; background:var(--card); color:var(--text-dark);
  }
  .contact-textarea{
    width:100%; height:80px; border:1px solid var(--border); border-radius:8px; padding:10px 12px;
    font-size:16px; font-family:inherit; resize:none; margin-bottom:10px; background:var(--card); color:var(--text-dark);
  }
  .contact-submit-btn{ margin-top:0; }
  .contact-status-msg{
    display:none; margin-top:10px; padding:10px 12px; border-radius:8px; font-weight:700; font-size:var(--fs-note); text-align:center;
  }
  .contact-status-success{ background:rgba(21,84,69,0.08); color:var(--teal); }
  .contact-status-error{ background:rgba(192,57,43,0.08); color:var(--status-red); }

  .share-btn{
    display:flex; align-items:center; justify-content:center; gap:6px; width:100%; text-align:center;
    background:rgba(21,84,69,0.08); color:var(--teal); border:1.5px solid transparent;
    font-family:inherit; font-size:var(--fs-note); font-weight:700; padding:11px; border-radius:12px;
    cursor:pointer; margin-top:8px; transition:background 0.15s ease;
  }
  
  .share-btn.copied{ background:var(--teal); color:var(--on-accent); border-color:var(--teal); }

  .trust-panel{ text-align:center; }
  .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  /* min-width:0 없이는 그리드 트랙이 긴 번역 텍스트(일본어 "購入・仲介なし" 등) 폭만큼 억지로
     넓어지는 "그리드 blowout" 현상이 생겨 카드가 화면 밖으로 삐져나갔음 */
  .trust-item{ display:flex; flex-direction:column; align-items:center; min-width:0; }
  .trust-icon{
    width:44px; height:44px; border-radius:50%; background:rgba(21,84,69,0.1);
    display:flex; align-items:center; justify-content:center; color:var(--teal); margin-bottom:8px;
    font-size:18px;
  }
  .trust-name{ font-size:var(--fs-small); font-weight:700; color:var(--text-dark); margin:0 0 4px; overflow-wrap:break-word; }
  .trust-desc{ font-size:var(--fs-small); color:var(--text-muted); margin:0; line-height:1.5; overflow-wrap:break-word; }

  .faq-item{ border-bottom:1px solid var(--border); padding:14px 0; margin-bottom:4px; }
  .faq-item:last-child{ border-bottom:none; }
  .faq-q{
    font-size:var(--fs-h3); font-weight:700; color:var(--text-dark); margin:0; cursor:pointer;
    list-style:none; display:block; position:relative; padding-right:26px;
  }
  .faq-q::-webkit-details-marker{ display:none; }
  .faq-q::after{
    content:'▾'; font-size:16px; font-weight:400; color:var(--teal);
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    transition:transform 0.2s;
  }
  details[open] > .faq-q::after{ transform:translateY(-50%) rotate(180deg); }
  details[open] > .faq-q{ margin-bottom:8px; }
  .faq-a{ font-size:var(--fs-body); color:var(--text-muted); margin:0; line-height:1.6; overflow-wrap:break-word; }
  .faq-deadline-badge{
    display:inline-block; font-size:16px; font-weight:800; color:var(--on-accent); background:var(--status-red);
    border-radius:6px; padding:2px 8px; margin-left:8px; vertical-align:middle;
  }
  .faq-audience-badge{
    display:inline-block; font-size:14px; font-weight:700; color:var(--teal); background:rgba(21,84,69,0.1);
    border-radius:6px; padding:2px 8px; margin-left:8px; vertical-align:middle;
  }

  .refund-step-card{ background:var(--refund-step-bg); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:8px 0; }
  .refund-step-tag{
    display:inline-block; font-size:16px; font-weight:800; letter-spacing:0.04em; color:var(--text-dark);
    background:rgba(var(--ink-rgb),0.1); border-radius:6px; padding:2px 8px; margin:0 0 8px;
  }
  .refund-step-title{ font-size:var(--fs-note); font-weight:700; color:var(--text-dark); margin:0 0 10px; }
  .refund-step-card select{
    width:100%; padding:9px 28px 9px 10px; border:1px solid var(--border); border-radius:8px;
    font-family:inherit; font-size:16px; color:var(--text-dark); background-color:var(--card);
    direction:ltr;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23262420' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center; background-size:11px 7px;
  }
  .refund-wizard-result{ font-size:var(--fs-note); color:var(--text-muted); margin:10px 0 0; line-height:1.55; padding-left:4px; border-left:3px solid var(--border); }
  .refund-wizard-result.tag-none{ border-left-color:var(--status-red); }
  .refund-wizard-result.tag-maybe{ border-left-color:var(--status-amber); }
  .refund-wizard-result.tag-check{ border-left-color:var(--teal); }
  .filing-dday{
    font-size:var(--fs-note); color:var(--teal); font-weight:700; margin:12px 0 0;
    padding:8px 10px; background:rgba(21,84,69,0.08); border-radius:8px; text-align:center;
  }

  .refund-check-row{
    display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-note); color:var(--text-dark);
    background:var(--card); border:1px solid transparent; border-radius:8px; padding:9px 12px; margin-bottom:6px; cursor:pointer;
    min-height:44px;
  }
  .refund-check-row.checked{ background:rgba(21,84,69,0.08); border-color:var(--teal); color:var(--teal); font-weight:700; }
  .refund-check-row:last-of-type{ margin-bottom:0; }
  .refund-check-row span{ min-width:0; overflow-wrap:break-word; }
  .refund-check-row input{ width:16px; height:16px; margin-top:3px; accent-color:var(--teal); flex-shrink:0; cursor:pointer; }

  .refund-link-buttons{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .refund-link-btn{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:12px 6px; border-radius:12px;
    background:var(--card); border:1px solid rgba(var(--ink-rgb),0.25); text-decoration:none; min-width:0;
  }
  
  .refund-link-btn-icon{ font-size:18px; }
  .refund-link-btn-title{ font-size:var(--fs-small); font-weight:800; color:var(--text-dark); line-height:1.3; overflow-wrap:break-word; max-width:100%; }
  .refund-link-btn-sub{ font-size:16px; color:var(--text-muted); overflow-wrap:break-word; max-width:100%; }
  .refund-link-btn{ position:relative; }
  .refund-link-btn-badge{
    display:none; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    font-size:16px; font-weight:800; color:var(--on-accent); background:var(--teal); border-radius:8px; padding:1px 8px; white-space:nowrap;
  }
  .refund-link-btn.recommended{ border-color:var(--teal); border-width:2px; background:rgba(21,84,69,0.06); order:-1; }
  .refund-link-btn.recommended .refund-link-btn-badge{ display:inline-block; }
  .refund-link-btn.dimmed{ opacity:0.5; }

  .ad-slot{
    background:var(--bg);
    border:1px dashed var(--border); border-radius:10px; padding:16px; text-align:center;
    font-size:var(--fs-note); color:var(--text-muted); margin:20px 0;
  }

  .site-footer{ border-top:1px solid var(--border); margin-top:24px; padding-top:18px; }
  .footer-links{ display:flex; justify-content:center; gap:8px 10px; margin-bottom:10px; flex-wrap:wrap; }
  .footer-links button{ background:none; border:none; font-family:inherit; font-size:var(--fs-small); color:var(--teal); cursor:pointer; padding:0; }
  
  .footer-copy{ font-size:var(--fs-note); color:var(--text-muted); text-align:center; margin:0; }

  @media (max-width: 480px) {
    .game-compare{ grid-template-columns:1fr; }
    .cards-row{ grid-template-columns:1fr !important; }
    .trust-grid{ grid-template-columns:1fr 1fr; row-gap:16px; }
    .slider::-webkit-slider-thumb{ width:24px; height:24px; }
    .slider{ height:6px; }
    .prize-card.jackpot{ padding:16px; }
    .prize-card{ padding:12px 14px; }
    .cta-btn{ padding:15px; }
    .million-unit{ font-size:var(--fs-small); padding-right:4px; }
    .million-input-wrap{ padding:6px 6px 6px 14px; gap:6px; }
    .unit-full{ display:none; }
    .unit-short{ display:inline; }
    .lightning-ball{ width:38px; height:38px; font-size:16px; }
    .lightning-result{ gap:5px; }
    /* 240~320px처럼 아주 좁은 화면에서 6칸(5+1)이 두 줄로 나뉘어도 각 칸이 너무 안 좁아지게
       살짝만 줄임 — fs-small(16px) 밑으로는 안 내려가서 접근성 폰트 최소치는 그대로 지킴 */
    .mn-num-input{ width:40px; height:40px; font-size:var(--fs-small); }
    .prize-card.jackpot{ flex-direction:column; align-items:flex-start; gap:10px; }
    .prize-card.jackpot .prize-right{ text-align:left; width:100%; }
    .prize-card.jackpot .prize-amt{ font-size:20px; white-space:nowrap; }
    .input-row{ flex-wrap:wrap; }
    .input-row select{ flex:1 1 100%; }
    body{ overflow-x:hidden; }
    .result-grid{ grid-template-columns:1fr !important; }
    .payout-compare{ grid-template-columns:1fr; }
    .refund-link-buttons{ grid-template-columns:repeat(2,1fr); }
    .ps-row{ flex-wrap:wrap; }
    .ps-hint{ flex-shrink:1; min-width:0; }
  }
  /* 갤럭시 Z 폴드/플립처럼 접었을 때 커버 화면 가로폭이 매우 좁은 기기 대응 (약 380px 이하).
     같은 스마트폰이어도 접힘 상태나 브라우저(삼성 인터넷·크롬·카카오톡 인앱)에 따라
     실사용 가로폭이 크게 달라질 수 있어, 고정 px폭 요소들을 유연한 폭으로 바꿔 잘림을 방지함 */
  @media (max-width: 380px) {
    body{ padding:24px 10px 64px; overflow-x:hidden; }
    .page{ padding:18px 14px 28px; }
    .trust-grid{ grid-template-columns:1fr; row-gap:12px; }
    .bar-row{ gap:6px; }
    .bar-label{ width:auto; flex:0 0 76px; }
    .bar-value{ width:auto; flex:0 0 76px; }
    .jc-step-val-big{ font-size:24px; }
    .hero-amount{ font-size:28px; font-size:clamp(24px, 8vw, var(--fs-hero)); }
    .result-hero-amt{ font-size:32px; font-size:clamp(26px, 9vw, 40px); }
    .live-result-mini-amt{ font-size:17px; font-size:clamp(16px, 6vw, 19px); }
    .jc-step{ gap:8px; }
    .playslip-mock{ padding:8px; }
    .panel{ padding:14px; }
    .footer-links{ gap:8px 12px; }
  }
  /* nav(로고+메뉴)는 훨씬 넓은 범위(480px 이하)에서 미리 축소 — 390px·393px·412px 같은
     실제로 흔히 쓰이는 폰 폭에서도 로고+메뉴가 한 줄에 안 들어가 줄바꿈되는 걸 방지 */
  @media (max-width: 480px) {
    /* 러시아어·카자흐어·키르기스어 등 번역 라벨이 긴 언어에서는 nav 버튼 3개 + 언어
       드롭다운이 이 폭에서 한 줄에 다 안 들어가는 경우가 있음 — .page의 overflow:hidden에
       가려서 화면 밖 스크롤은 안 생기지만 대신 글자가 그냥 잘려서 안 보이는 문제가 있었음.
       .menu 자체도 줄바꿈되게 해서 안 들어가면 2번째 줄로 넘어가게 함(잘리는 대신) */
    .menu{ row-gap:8px; column-gap:11px; flex-wrap:wrap; justify-content:flex-end; width:100%; max-width:100%; }
    .menu-links{ gap:11px; flex-wrap:wrap; justify-content:flex-end; }
    .menu-controls{ flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
    /* nav-compare/odds/faq 버튼 3개가 이 폭에서 다 안 들어가면 그중 일부(주로 faq)만 줄바꿈되면서
       언어 드롭다운과 한 줄에 어색하게 같이 걸리는 경우가 있었음(키르기스어 등에서 사용자가 직접
       스크린샷으로 발견) — 버튼 3개를 .menu-links 하나로 묶어서 통째로 한 flex 아이템이 되게 하면,
       안 들어갈 때 항상 드롭다운 전체가 새 줄로 넘어가지(버튼 중 일부만 넘어가지) 않음. 예전엔
       .lang-toggle에 flex-basis:100%를 줘서 강제로 새 줄+풀폭으로 만들었는데, 그러면 "한국어"처럼
       짧은 글자에도 상자가 필요 이상으로 길어 보이는 문제가 있어서(사용자 지적) 지금은 내용 길이에
       맞게 줄어들고 오른쪽 정렬만 되게 함 */
    .logo{ gap:4px; }
    .logo .mascot-mark{ width:26px; height:26px; }
    /* bar-icon이 추가되면서 이 폭에서는 label/value/gap을 그만큼 줄여야 막대 트랙이
       너무 좁아지지 않음(2026-07-22, 아이콘 도입에 따른 보정) */
    .bar-row{ gap:6px; }
    .bar-icon{ width:16px; font-size:15px; }
    .bar-label{ width:92px; }
    .bar-value{ width:78px; }
  }
  /* 갤럭시 Z 플립 커버 화면 등 극단적으로 좁은 경우(약 300px 이하) 추가 방어 */
  @media (max-width: 300px) {
    .tax-impact-compact{ gap:5px; }
    body{ padding:18px 6px 56px; }
    .page{ padding:12px 8px 20px; }
    .bar-label{ flex-basis:56px; font-size:16px; }
    .bar-value{ flex-basis:56px; font-size:16px; }
    .bar-row{ gap:4px; }
    .bar-icon{ width:16px; font-size:15px; }
    .cta-btn, .share-btn{ padding:12px; }
    .jc-step-val-big{ font-size:22px; }
    .prize-card.jackpot .prize-amt{ font-size:17px; }
    .menu{ gap:8px; flex-wrap:wrap; }
    .footer-links{ gap:6px 10px; }
    .footer-links button{ font-size:16px; }
    .panel{ padding:10px; }
    .refund-link-buttons{ grid-template-columns:1fr; }
    .result-seal{ width:34px; height:34px; font-size:10px; }
    .calc-detail-toggle, .fun-toggle{ padding-left:10px; padding-right:10px; }
    .calc-detail-summary{ margin:0 -10px; padding:12px 10px; }
  }

  /* 아랍어·우르두어(RTL)에서 "79.7 billion ₩"처럼 숫자+영단어 조합이 브라우저의 기본 양방향(bidi)
     텍스트 알고리즘 때문에 "billion 79.7 ₩"으로 순서가 뒤집혀 보이는 문제 — 원본 문자열 자체는
     항상 올바른 순서(예: "79.7 billion")로 만들어지는데, 그 텍스트가 RTL 문단 안에 그냥 놓이면
     브라우저가 시각적으로 재배열해버림. unicode-bidi:plaintext를 주면 각 텍스트 노드가 자기 안의
     첫 "강한" 방향 문자 기준으로 독립적으로 방향을 판단해서, 원래 순서 그대로 보이게 됨 */
  html[dir="rtl"] .result-hero-amt, html[dir="rtl"] .result-hero-basis, html[dir="rtl"] .result-hero-basis-mini,
  html[dir="rtl"] .tax-impact-before-line, html[dir="rtl"] .tax-impact-diff-big, html[dir="rtl"] #tax-impact-before,
  html[dir="rtl"] #tax-impact-after, html[dir="rtl"] #sticky-result-amt,
  html[dir="rtl"] .jc-step-val, html[dir="rtl"] .jc-step-val-big, html[dir="rtl"] .jc-note,
  html[dir="rtl"] .jackpot-quickfill-amt, html[dir="rtl"] .live-result-mini-amt, html[dir="rtl"] .mini-result-edit-input,
  html[dir="rtl"] .us-state-row-amt, html[dir="rtl"] .side-card-amt, html[dir="rtl"] .prize-amt,
  html[dir="rtl"] #jackpot-card-amt, html[dir="rtl"] #jp-powerball-krw, html[dir="rtl"] #jp-mega-krw,
  html[dir="rtl"] #home-krw-amt, html[dir="rtl"] #compare-krw-amt, html[dir="rtl"] .usd-actual-note,
  html[dir="rtl"] .result-visual-bar-caption, html[dir="rtl"] .foot-note{
    unicode-bidi: plaintext;
  }

  /* select 드롭다운 화살표가 data URI SVG에 색을 하드코딩해뒀어서(--text-dark/--teal 변수를 못 씀),
     다크모드에서 어두운 배경 위에 어두운 화살표(또는 어두운 초록)라 안 보이는 문제 — 밝은 색
     SVG로 따로 교체함 */
  :root[data-theme="dark"] .menu .lang-toggle{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233AA98A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] .input-row select, :root[data-theme="dark"] .refund-step-card select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EDE8DA' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* .result-hero와 #introPersonaAccordion은 --grad-soft 변수 대신 자기만의 밝은 그라데이션을
     하드코딩해뒀어서, 다크모드에서도 밝은 크림색 배경이 그대로 남아 튀는 문제 — 다크모드에서만
     이미 다크 대응이 되어 있는 --grad-soft로 덮어씀 (라이트모드 디자인은 그대로 유지) */
  :root[data-theme="dark"] .result-hero,
  :root[data-theme="dark"] #introPersonaAccordion{
    background:var(--grad-soft);
  }

  /* ===== 통일된 "여긴 펼쳐집니다" 신호 (2026-07 접근성 감사) =====
     실사용자 테스트(고령층, 카카오톡 인앱 브라우저)에서 이 사이트 곳곳의 <details> 아코디언이
     하나같이 아주 작은 화살표 글자(▾) 하나에만 의존해서 "여긴 눌러서 펼치는 곳"이라는 걸
     못 알아챘음 — 특히 FAQ "더 자세히 알아보기" 섹션 전체를 완전히 놓쳐서, 그 안의
     faq.qGameBasics 관련 내용을 찾아 헤맨 사례가 있었음(단, qGameBasics 자체는 이미 상시
     노출 목록에 있고 이 접힌 섹션 안에 있던 건 아님 — 그래도 이 섹션 안의 다른 보충 설명들은
     여전히 못 찾을 위험이 있었음). 상단 탭 메뉴를 텍스트에서 버튼처럼 보이게 고친 것(5a7d6ea)과
     같은 원리로, 화살표를 작은 원형 배지 안에 넣어 시각적 무게감을 사이트 전체에서 통일함 —
     같은 클래스를 공유하는 모든 <details>(홈의 "나는 어떤 경우일까요?"/"결과 더 자세히 보기",
     확률체감의 각 아코디언, FAQ의 "더 자세히 알아보기"와 그 안의 하위 카드들, "다른 나라 기준
     더보기", "50개 주 전체 비교표 보기" 등)에 자동으로 적용됨. 아래 두 곳은 의도적으로 제외:
     - 설정 메뉴(⚙️, .settings-toggle) — 아이콘 하나로 이미 널리 통용되는 별개의 관례라 그대로 둠
     - FAQ 개별 질문(.faq-q) — "질문을 누르면 답이 펼쳐진다"는 FAQ 목록 자체가 이미 보편적으로
       익숙한 패턴이라 화살표 하나로도 충분하다고 판단, 40개 넘는 각 질문마다 배지를 붙이면
       오히려 목록이 산만해짐 */
  .panel-title-toggle::after,
  .section-divider-toggle::after,
  .panel-accordion-title::after,
  .calc-detail-summary::after,
  .jh-more-summary::after,
  .playslip-summary::after,
  .us-state-compare-summary::after,
  .country-toggle-more-summary::after{
    content:'▾'; display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; min-width:22px; border-radius:50%;
    background:rgba(21,84,69,0.16); color:var(--teal); font-size:13px; font-weight:800; line-height:1;
  }
  /* 이 둘은 원래 화살표 자체가 없이 글자 색만으로 "눌러진다"는 걸 표시했던 곳이라, 절대좌표가
     아니라 텍스트 바로 뒤에 붙는 인라인 배지로 붙임(다른 곳들은 이미 위치가 잡혀있는 자기 자리
     그대로 유지) */
  .country-toggle-more-summary::after,
  .us-state-compare-summary::after{
    position:static; margin-left:6px; vertical-align:middle; transform:none; transition:transform 0.2s ease;
  }
  .country-toggle-more[open] > .country-toggle-more-summary::after,
  .us-state-compare-toggle[open] > .us-state-compare-summary::after{
    transform:rotate(180deg);
  }