html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: #0c0d0e;
      overflow: hidden;
      overscroll-behavior: none;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, sans-serif;
    }
    .hidden { display: none !important; }
    #app-runtime-error {
      position: fixed;
      left: max(12px, env(safe-area-inset-left));
      right: max(12px, env(safe-area-inset-right));
      top: max(12px, env(safe-area-inset-top));
      z-index: 9999;
      padding: 11px 13px;
      border: 1px solid #fecaca;
      border-radius: 14px;
      background: rgba(254, 242, 242, .98);
      color: #991b1b;
      box-shadow: 0 10px 30px rgba(127, 29, 29, .18);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
      white-space: pre-wrap;
    }
    #settings-status {
      position: fixed;
      left: 50%;
      bottom: max(14px, env(safe-area-inset-bottom));
      z-index: 9998;
      max-width: calc(100% - 28px);
      transform: translateX(-50%);
      padding: 9px 12px;
      border: 1px solid #fde68a;
      border-radius: 999px;
      background: rgba(255, 251, 235, .98);
      color: #92400e;
      box-shadow: 0 8px 24px rgba(120, 53, 15, .14);
      font-size: 11px;
      font-weight: 800;
      text-align: center;
    }
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      height: 100dvh;
      box-sizing: border-box;
      touch-action: manipulation;
    }
    
    /* 캡처방지 롤링 애니메이션 */
    @keyframes marquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }
    .marquee-container {
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      width: 100%;
    }
    .marquee-content {
      display: inline-flex;
      flex-shrink: 0;
      min-width: 200%;
      animation: marquee 15s linear infinite;
    }
    
    /* 바텀 시트 트랜지션 */
    .bottom-sheet {
      transition: transform 0.32s cubic-bezier(0.1, 0.76, 0.55, 0.94);
    }
    .bottom-sheet.hidden-sheet {
      transform: translateY(100%);
    }
    .bottom-sheet.show-sheet {
      transform: translateY(0);
    }
    
    /* 스크롤바 제거 */
    .no-scrollbar::-webkit-scrollbar {
      display: none !important;
    }
    .no-scrollbar {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
      overflow-y: scroll;
    }

    :root { color-scheme: light; }
    button, [role="button"], .cursor-pointer { -webkit-tap-highlight-color: transparent; }
    button { transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
    button:active { transform: scale(.98); }
    .demo-watermark {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      pointer-events: none;
      overflow: hidden;
    }
    .demo-watermark::before {
      content: "DEMO · 샘플 화면";
      color: rgba(30, 64, 175, .14);
      font-size: 32px;
      font-weight: 900;
      letter-spacing: .18em;
      transform: rotate(-24deg);
      white-space: nowrap;
    }
    .demo-notice-hidden .demo-notice { display: none !important; }
    .demo-mode-off .demo-watermark {
      display: block;
      inset: 12px 12px auto auto;
      width: auto;
      height: auto;
    }
    .demo-mode-off .demo-watermark::before {
      content: "정부24";
      display: block;
      color: rgba(71, 85, 105, .32);
      background: rgba(255, 255, 255, .45);
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 9px;
      line-height: 1;
      letter-spacing: .08em;
      transform: none;
    }
    .field-error { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,.12); }
    .app-shell { min-height: 0; height: 100%; }
    .setup-grid { display: grid; gap: 12px; align-content: start; grid-auto-rows: max-content; }
    .setup-step { display: none !important; }
    .setup-step.active { display: grid !important; }
    .admin-entry-link { letter-spacing: -.01em; }
    .admin-entry-link:focus-visible { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; border-radius: 12px; }
    #admin-login-modal:target { display: flex !important; }
    .admin-login-modal { position:fixed; inset:0; z-index:9999; padding:22px; align-items:center; justify-content:center; background:rgba(15,23,42,.64); backdrop-filter:blur(8px); }
    .admin-login-modal:not(.hidden) { display:flex; }
    .admin-login-card { position:relative; width:min(100%,390px); padding:28px 22px 20px; border-radius:28px; background:#fff; color:#0f172a; box-shadow:0 28px 80px rgba(15,23,42,.32); }
    .admin-login-close { position:absolute; right:16px; top:14px; width:36px; height:36px; border-radius:50%; background:#f1f5f9; color:#475569; font-size:24px; line-height:1; }
    .admin-login-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; color:#2563eb; background:#eff6ff; font-size:20px; margin-bottom:18px; }
    .admin-login-eyebrow { color:#2563eb; font-size:10px; font-weight:900; letter-spacing:.14em; }
    .admin-login-card h3 { margin:5px 0 7px; font-size:24px; font-weight:900; letter-spacing:-.04em; }
    .admin-login-description { margin-bottom:20px; color:#64748b; font-size:12px; line-height:1.65; font-weight:600; }
    .admin-login-field { display:block; margin-top:12px; color:#475569; font-size:11px; font-weight:800; }
    .admin-login-field input { width:100%; margin-top:6px; padding:14px 15px; border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc; color:#0f172a; font-size:14px; outline:none; }
    .admin-login-field input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); background:#fff; }
    .admin-login-error { margin-top:12px; padding:10px 12px; border-radius:12px; background:#fef2f2; color:#dc2626; font-size:11px; font-weight:800; text-align:center; }
    .admin-login-submit { width:100%; margin-top:18px; padding:15px; border-radius:14px; background:#1d4ed8; color:#fff; font-size:13px; font-weight:900; box-shadow:0 9px 24px rgba(29,78,216,.22); }
    .admin-login-cancel { width:100%; margin-top:8px; padding:11px; color:#64748b; font-size:12px; font-weight:800; }
    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #init-setup-screen .setup-grid > div {
      min-height: 0;
    }
    #init-setup-screen .setup-grid input {
      background: #fff;
      border-color: #e5e7eb;
      box-shadow: 0 1px 2px rgba(15,23,42,.025);
    }
    #init-setup-screen .setup-grid input:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37,99,235,.10);
    }
    .inline-message { animation: message-in .2s ease-out; }
    @keyframes message-in { from { opacity: 0; transform: translateY(-4px); } }
    @media (max-height: 760px) {
      #init-setup-screen { padding: 18px !important; }
      #init-setup-screen .setup-head { margin: 0 0 12px !important; }
      #init-setup-screen .setup-head h2 { font-size: 20px !important; line-height: 1.25 !important; }
      #init-setup-screen .setup-grid { gap: 9px; }
      #init-setup-screen input { padding: 10px 12px !important; }
      #init-setup-screen label { margin-bottom: 4px !important; }
    }
    @media (min-width: 768px) {
      .app-shell { min-height: min(900px, calc(100dvh - 32px)); height: min(900px, calc(100dvh - 32px)); }
    }
    @media (max-width: 767px) {
      input, textarea, select { font-size: 16px !important; }
      .app-shell { max-width: none !important; border: 0 !important; border-radius: 0 !important; }
    }
    @media (display-mode: standalone) {
      body { background: #f5f6f8; }
      .app-shell { width: 100%; max-width: none; border: 0; border-radius: 0; }
    }
    #main-screen {
      background:
        radial-gradient(circle at 12% 14%, rgba(255,255,255,.88), transparent 24%),
        radial-gradient(circle at 90% 34%, rgba(226,232,240,.52), transparent 30%),
        linear-gradient(160deg, #f5f3eb 0%, #eef1ea 52%, #f5f1e8 100%);
    }
    .home-card { background: rgba(255,255,255,.68); backdrop-filter: blur(12px); }
    .service-tile { background: rgba(255,255,255,.62); border: 1px solid rgba(226,232,240,.75); }
    .service-active { color: #1e3a8a !important; }
    #qr-code-box { width: 132px; height: 132px; }
    @media (max-width: 370px), (max-height: 720px) {
      #qr-code-box { width: 116px; height: 116px; }
      #id-screen .id-photo-frame { width: 128px; height: 164px; }
      #id-screen .id-card-body { padding: 18px; }
    }