/* 101 앱첫화면 고유 CSS — prototypes/101_first_prototype.html <style> 633~942·984~1125·1307~1309행 그대로(디자인 정본). 공통 변수·초기화는 nous-bill-global.css */
    /* ── 레이아웃 뼈대 ── */
    /* body — global.css v7.4 정본 구조와 일치 (height:100vh; height:100dvh; + overflow:hidden + flex column).
       Rails 전환 시 인라인 <style> 제거 후 <link rel="stylesheet" href="nous-bill-global.css"> 로 교체해도 동일 동작.
       .screen 래퍼는 본 화면 전용 — 헤더·광고·콘텐츠를 한 단계 더 묶는 구조.
       100vh + 100dvh 두 줄 박는 방식 (v7.10) — 모바일 브라우저 UI 가림 방지. */
    body {
      background-color: var(--color-bg);
      color: var(--color-text);
      font-family: var(--font-base);
      font-feature-settings: "tnum";
      -webkit-font-smoothing: antialiased;
      max-width: 480px;
      margin: 0 auto;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* screen: body의 flex 자식으로 전체 높이를 받아 자체 flex column 구성 */
    .screen {
      flex: 1;
      min-height: 0;
      display: none;
      flex-direction: column;
    }

    /* ── 페이지 헤더 ── */
    .page-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background-color: var(--color-bg);
      padding: 10px 14px;
      border-bottom: 1px solid rgba(74,222,128,0.1);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .page-header h1 {
      flex: 1;
      background: linear-gradient(180deg, #2d7a42 0%, #236835 50%, #1a5228 100%);
      border-top: 1.5px solid rgba(74,222,128,0.5);
      border-bottom: 2px solid rgba(0,0,0,0.5);
      border-left: none;
      border-right: none;
      border-radius: var(--radius-md);
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
      padding: 8px 0;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: var(--color-primary);
      letter-spacing: -0.01em;
    }

    /* ── 오프라인 배너 ── */
    .offline-banner {
      display: none;
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 999;
      background: rgba(245,158,11,0.95);
      color: #0f3d20;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      padding: 8px 16px;
      border-bottom: 2px solid rgba(0,0,0,0.2);
      animation: slideDown 0.2s ease;
    }
    .offline-banner.visible { display: block; }
    @keyframes slideDown {
      from { transform: translateY(-100%); }
      to   { transform: translateY(0); }
    }

    /* ── 광고 영역 ── */
    .ad-zone { flex-shrink: 0; }
    .ad-banner-small {
      width: 100%;
      aspect-ratio: 2 / 1;
      border-radius: 0;
      background-color: var(--color-surface);
      overflow: hidden;
      flex-shrink: 0;  /* global.css v7.3 광고 고정 결함 수정 동기화 */
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .ad-banner-small img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .ad-fallback {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }
    .ad-fallback-label { font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: 0.08em; font-weight: 500; }
    .ad-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(74,222,128,0.2), transparent); }

    /* ── 안내 문구 ── */
    #guidewords101 {
      flex-shrink: 0;
      text-align: center;
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      padding: 9px 16px 7px;
      background: var(--color-bg);
      border-bottom: 1px solid rgba(74,222,128,0.1);
    }

    /* ── 콘텐츠 영역 ── */
    .content-area {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 20px 16px 32px;
    }
    #screen-first .content-area {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 8px;
    }

    /* ── 6자리 숫자 입력 ── */
    #sixnum {
      flex-shrink: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, var(--color-surface) 40%, rgba(0,0,0,0.2) 100%);
      border-top: 1.5px solid rgba(74,222,128,0.8);
      border-bottom: 3px solid rgba(0,0,0,0.7);
      border-left: 1px solid rgba(74,222,128,0.25);
      border-right: 1px solid rgba(74,222,128,0.25);
      border-radius: var(--radius-md);
      box-shadow: 0 8px 20px rgba(0,0,0,0.7);
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.2s;
      min-height: 44px;
    }
    #sixnum.active   { border-top-color: rgba(74,222,128,1); box-shadow: 0 8px 20px rgba(0,0,0,0.7), 0 0 0 2px rgba(74,222,128,0.45); }
    #sixnum.disabled { opacity: 0.3; pointer-events: none; }

    .field-label { font-size: 13px; color: var(--color-text-muted); font-weight: 500; letter-spacing: 0.05em; margin-bottom: 6px; }
    #sixnumLabel { transition: color 0.2s, font-size 0.2s; text-align: center; }
    /* 잠금 안내 표시 시 라벨 자리에 안내문 표시 */
    .field-label.locked-msg { font-size: 13px; font-weight: 600; color: var(--color-highlight); letter-spacing: 0; line-height: 1.3; padding: 2px 4px; }
    .dot-row { display: flex; justify-content: center; gap: 20px; width: 100%; }
    .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(74,222,128,0.5); background: transparent; transition: all 0.15s; }
    .dot.filled { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 6px rgba(74,222,128,0.5); }

    /* ── 숫자패드 — 디자인 시스템 §11-10 / 쿡북 §M: 화면 가운데 오버레이, 열 때 1회만 셔플 */
    .numpad-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0,0,0,0.6);
      align-items: center;
      justify-content: center;
    }
    .numpad-overlay.visible { display: flex; }
    .numpad-panel {
      width: calc(100% - 48px);
      max-width: 360px;
      background: var(--color-bg);
      border: 1px solid rgba(74,222,128,0.25);
      border-top: 2px solid rgba(74,222,128,0.4);
      border-radius: var(--radius-xl);
      box-shadow: 0 12px 40px rgba(0,0,0,0.7);
      padding: 18px 16px 20px;
    }
    .numpad-title {
      min-height: 18px;
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-text);
      text-align: center;
      margin-bottom: 12px;
    }
    .numpad-dots { display:flex; justify-content:center; gap:8px; margin-bottom:14px; }
    .num-slot {
      width:34px; height:44px; border-radius:var(--radius-md);
      display:flex; align-items:center; justify-content:center;
      background:rgba(0,0,0,0.18); border:1.5px solid rgba(74,222,128,0.35);
      color:var(--color-text); font-size:var(--text-xl); font-weight:700;
      font-family:var(--font-base); font-feature-settings:"tnum"; transition:all 0.12s;
    }
    .num-slot.filled { border-color:var(--color-primary); box-shadow:0 0 6px rgba(74,222,128,0.4); }
    .numpad-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
    .nkey {
      background: linear-gradient(180deg, #1a9a6a 0%, #1a5c2e 55%, #0a3d20 100%);
      border: none;
      border-top: 1.5px solid rgba(74,222,128,0.5);
      border-bottom: 3px solid rgba(0,0,0,0.6);
      border-radius: var(--radius-md);
      box-shadow: 0 5px 10px rgba(0,0,0,0.6);
      color: var(--color-text);
      font-size: var(--text-xl);
      font-weight: 600;
      font-family: var(--font-base);
      font-feature-settings: "tnum";
      padding: 12px 0;
      min-height: 44px;
      cursor: pointer;
      text-align: center;
      transition: transform 0.08s, box-shadow 0.08s;
      -webkit-tap-highlight-color: transparent;
    }
    .nkey:active  { transform: translateY(2px); box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
    .nkey.del     { font-size: var(--text-base); color: var(--color-text-muted); }
    .nkey.confirm { font-size: 13px; color: var(--color-primary); background: linear-gradient(180deg, #1aaa6e 0%, #1a5c2e 100%); }

    /* ── 에러 메시지 (불일치 등 진짜 에러 — 빨간색) ── */
    .error-msg { flex-shrink: 0; color: var(--color-error); font-size: 13px; text-align: center; height: 0; overflow: hidden; transition: height 0.15s; }
    .error-msg.visible { height: auto; min-height: 14px; line-height: 1.35; }

    /* ── 일반 실행 버튼 — global.css `.btn-primary` 정본 동기화 ── */
    .btn-primary {
      width: 100%;
      padding: 13px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, var(--color-surface) 40%, rgba(0,0,0,0.15) 100%);
      color: var(--color-text);
      border: none;
      border-top: 1.5px solid rgba(74,222,128,0.45);
      border-bottom: 2px solid rgba(0,0,0,0.5);
      border-radius: var(--radius-md);
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
      font-size: var(--text-base);
      font-weight: 700;
      font-family: var(--font-base);
      cursor: pointer;
      transition: all 0.15s;
      min-height: 44px;
    }
    .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.6); }
    .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
    .btn-primary:disabled {
      background: rgba(74,222,128,0.2);
      color: rgba(236,253,245,0.4);
      border-top-color: transparent;
      border-bottom-color: transparent;
      box-shadow: none;
      cursor: not-allowed;
      transform: none;
    }

    .btn-group { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }

    /* 사용자 지시로 숨김 유지. 재노출 시 display 한 줄만 제거한다. */
    #go_discountshop { display: none; }

    /* ── 첫화면 하단 사업자 정보 (2026-09-10 · 전자상거래법 §10① 표시사항) ─────────
       ⚠ 글자는 var(--text-xs) = **13px**(디자인 시스템 §3 하한). 이보다 작게 두지 않는다.
       ⚠ flex 로 짜지 않는다 — 칸을 나누면 「대표 전화」가 줄 끝에 홀로 남고 값이 다음 줄로 넘어간다(실측).
         인라인 흐름으로 두면 글이 말처럼 이어지고, 한글은 낱말 단위로만 끊긴다(keep-all). */
    .biz-footer { margin-top: 14px; padding: 12px 12px 4px; border-top: 1px solid rgba(74,222,128,0.18); }
    .biz-row {
      font-size: var(--text-xs); line-height: 1.75; color: var(--color-text-muted);
      word-break: keep-all;
    }
    .biz-row + .biz-row { margin-top: 1px; }
    .biz-k { opacity: 0.72; }
    .biz-v { color: var(--color-text); }
    /* 번호는 가운데서 끊지 않는다 — 「123-45-」/「67890」로 갈리면 읽는 사람이 두 번 본다. */
    .biz-v.nowrap { white-space: nowrap; }
    .biz-sep { opacity: 0.4; margin: 0 5px; }
    .biz-links { margin-top: 4px; }
    .biz-copy { margin-top: 2px; }
    .biz-link {
      min-height: 44px; padding: 10px 4px;
      border: 0; background: transparent;
      color: var(--color-text-muted); font-family: var(--font-base);
      font-size: var(--text-sm); font-weight: 600;
      text-decoration: underline; text-underline-offset: 4px;
      cursor: pointer; opacity: 0.9;
    }
    .biz-link:hover { color: var(--color-primary); opacity: 1; }
    .biz-link:active { transform: translateY(1px); }
    /* [사업자정보 확인] — 기획자 지시 「돋보이게 하지 말고, 제목 글자체와 글자색으로 평범하게」.
       ⇒ 옆의 라벨(.biz-k)과 글자체·크기·색·굵기가 모두 같다. 밑줄 하나만 남겼다. */
    #biz_info_check_btn {
      border: 0; background: transparent; padding: 0; margin-left: 8px;
      font-family: var(--font-base); font-size: var(--text-xs); font-weight: 400;
      color: var(--color-text-muted); opacity: 0.72;
      text-decoration: underline; text-underline-offset: 3px;
      cursor: pointer; white-space: nowrap;
    }
    #biz_info_check_btn:active { transform: translateY(1px); }

    .privacy-policy-modal {
      display: none; position: fixed; inset: 0; z-index: 145;
      background: rgba(0,0,0,0.72); padding: 18px;
      align-items: center; justify-content: center;
    }
    .privacy-policy-modal.visible { display: flex; }
    .privacy-policy-panel {
      width: 100%; max-width: 420px; max-height: min(78vh, 640px);
      background: var(--color-bg);
      border: 1px solid rgba(74,222,128,0.28);
      border-top: 2px solid rgba(74,222,128,0.55);
      border-radius: var(--radius-xl);
      box-shadow: 0 16px 44px rgba(0,0,0,0.72);
      padding: 18px 16px 16px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .privacy-policy-title {
      color: var(--color-primary); font-size: var(--text-lg);
      font-weight: 700; text-align: center;
    }
    .privacy-policy-meta {
      color: var(--color-text-muted); font-size: var(--text-xs);
      text-align: center; line-height: 1.5;
    }
    .privacy-policy-body {
      min-height: 150px; overflow-y: auto;
      padding: 14px; border-radius: var(--radius-md);
      background: rgba(0,0,0,0.16);
      border: 1px solid rgba(74,222,128,0.14);
      color: var(--color-text); font-size: var(--text-sm); line-height: 1.65;
    }
    /* #privacy_policy_close 시각값은 `.btn-primary`를 사용한다. */

    /* ─────────────────────────────────────────────────────────────────
       화면 토글 (prototype_51 신규) — 단일 파일에 두 화면 통합
       .screen 두 개 중 .screen.active 만 표시
       ───────────────────────────────────────────────────────────────── */
    .screen.active { display: flex; }

    /* ─────────────────────────────────────────────────────────────────
       당구용품 쇼핑몰 화면 (prototype_51 신규 — 이전 103 파일 내용 통합)
       비율: 헤더 10vh + 쇼핑몰 6개 영역 90vh = 100vh
       ───────────────────────────────────────────────────────────────── */
    .shopping-header { height: 10vh; }
    /* 뒤로가기 버튼 — 디자인 시스템 §11-2 표준 그대로 (prototype_53 누락 보강) */
    .btn-back {
      width: 34px; height: 34px;
      border-radius: var(--radius-md);
      flex-shrink: 0;
      background: rgba(4,46,34,0.7);
      border: 1px solid rgba(74,222,128,0.18);
      display: flex; align-items: center; justify-content: center;
      color: var(--color-text-muted);
      font-size: 16px;
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
    }
    .btn-back:hover { color: var(--color-primary); background: rgba(74,222,128,0.1); }
    .shop-list {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 8px 6px;
      gap: 6px;
    }
    .shop-btn {
      flex: 1;
      white-space: normal;
      line-height: 1.4;
      text-align: center;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── 본인 확인 모달 (1차/2차) ── */
    .verify-modal {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.75);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 210;
      padding: 16px;
    }
    .verify-modal.visible { display: flex; }
    .verify-modal-box {
      width: 100%;
      max-width: 360px;
      max-height: 90dvh;
      overflow-y: auto;
      background: linear-gradient(180deg,var(--color-surface) 0%,var(--color-bg) 100%);
      border-top: 1.5px solid rgba(74,222,128,0.6);
      border-bottom: 3px solid rgba(0,0,0,0.7);
      border-left: 1px solid rgba(74,222,128,0.25);
      border-right: 1px solid rgba(74,222,128,0.25);
      border-radius: var(--radius-lg);
      box-shadow: 0 12px 32px rgba(0,0,0,0.8);
      padding: 20px 18px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .verify-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--color-text);
      text-align: center;
      line-height: 1.4;
    }
    .verify-sub {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      text-align: center;
      line-height: 1.4;
      margin-top: -8px;
      white-space: pre-line;
    }
    .verify-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .verify-label {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      font-weight: 500;
    }
    .verify-input {
      width: 100%;
      padding: 10px 12px;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(74,222,128,0.3);
      border-radius: var(--radius-md);
      color: var(--color-text);
      font-size: var(--text-sm);
      font-family: var(--font-base);
    }
    .verify-input::placeholder { color: rgba(74,222,128,0.35); }
    .verify-input:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(74,222,128,0.25);
    }
    .verify-input:disabled {
      background: rgba(0,0,0,0.15);
      border-color: rgba(74,222,128,0.15);
      color: rgba(167,243,208,0.4);
      cursor: not-allowed;
    }
    .verify-sms-row {
      display: flex;
      gap: 6px;
      align-items: stretch;
    }
    .verify-sms-row .verify-input { flex: 1; }
    .verify-sms-btn {
      width: auto;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .verify-msg {
      font-size: var(--text-xs);
      text-align: center;
      min-height: 14px;
      line-height: 1.3;
    }
    /* 기획자 지시 2026-09-06 — 「복구코드 오입력 에러 메시지를 금색으로, 잘 보이게」.
       금색 정본 = --color-highlight(#F59E0B) «경고·주의 문구 전용 · 그 외는 기획자 특별 지시»(global v7.20) — 이 지시가 그 특별 지시다.
       전역 정본(.verify-msg.error = --color-error 붉은색)은 안 바꾼다. 이 화면에서만 덮어쓴다.
       «잘 보이게» = 굵기 700 + 글자 --text-sm(13→14px). 목업(:1076)과 달라지는 자리 → nb_visual_diff STYLE_ALLOW 에 사유 등재. */
    .verify-msg.error { color: var(--color-highlight); font-weight: 700; font-size: var(--text-sm); }
    .verify-msg.info  { color: var(--color-text-muted); }
    .verify-msg.ok    { color: var(--color-primary); }
    .verify-btn-row {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .verify-btn { flex: 1; }

    /* ── 동일 인증정보 회원 선택 ── */
    .member-choice-list { display: flex; flex-direction: column; gap: 8px; }
    .member-choice-btn { text-align: left; line-height: 1.4; }
    .member-choice-btn strong,
    .member-choice-btn span {
      display: block;
      font: inherit;
      color: inherit;
    }
    .member-choice-btn span { margin-top: 2px; }

    /* ── 새 기기·재설치 확인 ── */
    .device-stage { display: none; flex-direction: column; gap: 12px; }
    .device-stage.visible { display: flex; }
    .device-code {
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(74,222,128,0.3);
      border-radius: var(--radius-md);
      padding: 14px;
      text-align: center;
    }
    .device-code-label { font-size: var(--text-xs); color: var(--color-text-muted); }
    .device-code-value {
      margin-top: 4px;
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--color-primary);
      letter-spacing: 0.08em;
      font-feature-settings: "tnum";
    }
    .device-help { font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); text-align: center; }
    .device-number-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
    .device-number-btn {
      min-height: 44px; cursor: pointer; border: 1px solid rgba(74,222,128,0.3);
      border-radius: var(--radius-md); background: linear-gradient(180deg,rgba(74,222,128,0.15),rgba(74,222,128,0.07));
      color: var(--color-text); font-family: var(--font-base); font-size: var(--text-lg); font-weight: 700;
      font-feature-settings: "tnum";
    }
    .device-number-btn:active { transform: translateY(1px); }

    /* ── 접근성 ── */
    :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    :focus:not(:focus-visible) { outline: none; }

/* 새 기기 확인 — 복구코드 단계의 «휴대폰으로 확인» 전환 링크(6-h · 기획자 확정 2026-09-04).
   경고가 아니라 다른 길 안내라 금색·붉은색을 쓰지 않는다(design-system 절대 규칙). */
.verify-link {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 0; padding: 6px 0;
  font-family: inherit; font-size: var(--text-xs); color: var(--color-text-muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.verify-link:hover { color: var(--color-text); }