/* Pretendard Variable — CDN substitute (no font binaries provided) */
@font-face{font-family:'Pretendard Variable';src:url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');font-weight:45 920;font-style:normal;font-display:swap}
/* JetBrains Mono — code/data */
@font-face{font-family:'JetBrains Mono';src:url('https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
/* ─ Base palette · 단청의 현대화 ─ */
--madang-white:#FDFBF7;      /* 화이트 마당 — 기본 배경 */
--paper:#FFFFFF;             /* 순백 — 카드/모달 표면 */
--ink-900:#1F1E1C;           /* 먹색 — 기본 텍스트 */
--ink-700:#4A4741;
--ink-500:#736F67;
--ink-400:#8F8A80;
--ink-300:#B5B0A6;
--line-200:#E8E4DA;
--line-100:#F1EDE4;
--fill-100:#F6F3EC;          /* 은은한 필드/호버 배경 */
--coral-600:#E5551F;         /* 석간주 진하게 — hover/AA 텍스트용 */
--coral-500:#FF6B3D;         /* Primary · 모던 석간주 */
--coral-100:#FFE9E0;
--coral-50:#FFF3EE;
--blue-600:#2A53E0;
--blue-500:#3D6BFF;          /* Secondary · 삼청 블루 */
--blue-100:#E3EAFF;
--blue-50:#EFF3FF;
--green-600:#189A6B;
--green-500:#2BC48A;         /* Tertiary · 뇌록 그린 */
--green-100:#DCF5EA;
--green-50:#ECFAF3;
--amber-600:#B26E00;
--amber-500:#F0A028;         /* Warning · 치자 앰버 */
--amber-100:#FCEDD3;
--red-600:#C93A36;
--red-500:#E5484D;           /* Error · 진사 레드 (primary 코랄과 구분) */
--red-100:#FBE2E2;
/* ─ Semantic aliases (light) ─ */
--bg:var(--madang-white);
--surface-card:var(--paper);
--surface-sunken:var(--fill-100);
--text-strong:var(--ink-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-500);
--text-faint:var(--ink-400);
--text-on-accent:#FFFFFF;
--border:var(--line-200);
--border-subtle:var(--line-100);
--accent:var(--coral-500);
--accent-hover:var(--coral-600);
--accent-subtle:var(--coral-50);
--accent-text:var(--coral-600);   /* AA on white */
--interactive:var(--blue-500);
--interactive-hover:var(--blue-600);
--interactive-subtle:var(--blue-50);
--interactive-text:var(--blue-600);
--positive:var(--green-500);
--positive-text:var(--green-600);
--positive-subtle:var(--green-50);
--warning:var(--amber-500);
--warning-text:var(--amber-600);
--warning-subtle:var(--amber-100);
--danger:var(--red-500);
--danger-text:var(--red-600);
--danger-subtle:var(--red-100);
--focus-ring:0 0 0 3px rgba(61,107,255,.35);
}
/* ─ Dark mode (보조) ─ */
[data-theme="dark"]{
--bg:#181713;
--surface-card:#211F1B;
--surface-sunken:#2A2823;
--text-strong:#F5F2EA;
--text-body:#CFCAC0;
--text-muted:#9B958A;
--text-faint:#7B766C;
--border:#38352E;
--border-subtle:#2E2B25;
--accent:#FF7B50;
--accent-hover:#FF8F6A;
--accent-subtle:#33241D;
--accent-text:#FF8F6A;
--interactive:#6488FF;
--interactive-hover:#84A0FF;
--interactive-subtle:#1F2536;
--interactive-text:#84A0FF;
--positive:#3BD69B;
--positive-text:#3BD69B;
--positive-subtle:#1B2E26;
--warning:#F5B04C;
--warning-text:#F5B04C;
--warning-subtle:#332A19;
--danger:#F26B6F;
--danger-text:#F26B6F;
--danger-subtle:#33201F;
}

:root{
--font-sans:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
--font-mono:'JetBrains Mono','D2Coding',ui-monospace,monospace;
/* 큰 목소리 헤드라인 + 여백 많은 본문 */
--text-display:800 56px/1.2 var(--font-sans);   --ls-display:-0.02em;
--text-h1:700 40px/1.25 var(--font-sans);       --ls-h1:-0.02em;
--text-h2:700 32px/1.3 var(--font-sans);        --ls-h2:-0.015em;
--text-h3:700 24px/1.4 var(--font-sans);        --ls-h3:-0.01em;
--text-h4:600 20px/1.45 var(--font-sans);       --ls-h4:-0.01em;
--text-body-lg:400 18px/1.7 var(--font-sans);
--text-body:400 16px/1.7 var(--font-sans);
--text-body-sm:400 14px/1.6 var(--font-sans);
--text-caption:400 12px/1.5 var(--font-sans);   --ls-caption:0; /* @kind other */
--text-label:600 14px/1.45 var(--font-sans);    /* 버튼·탭·칩 */
--text-code:400 13px/1.6 var(--font-mono);
}
body{margin:0;font:var(--text-body);color:var(--text-body);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--text-strong);margin:0}
a{color:var(--interactive-text);text-decoration:none}
a:hover{color:var(--interactive-hover);text-decoration:underline}

:root{
/* 4px base */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
/* radius — 당근식 친근한 라운드 */
--radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;
/* shadows — 웜 그레이, 낮고 부드럽게 */
--shadow-1:0 1px 2px rgba(31,30,28,.05);
--shadow-2:0 2px 8px rgba(31,30,28,.07);
--shadow-3:0 6px 20px rgba(31,30,28,.10);
--shadow-4:0 16px 40px rgba(31,30,28,.14);
}

/* ?????? ? ???? ????????   Madang ??????????? ????????, ???????????? ????????*/
:root{
  /* Blue??primary/accent????? */
  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-subtle: var(--blue-50);
  --accent-text: var(--blue-600);
  /* ??? ?????? blue??*/
  --interactive: var(--blue-500);
  --interactive-hover: var(--blue-600);
  --interactive-subtle: var(--blue-50);
  --interactive-text: var(--blue-600);
}

html, body, #root { height: 100%; }
body { background: var(--bg); }

/* ???? App Shell ???? */
.at-shell { display: flex; flex-direction: column; min-height: 100vh; }

.at-topbar{
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding: 0 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.at-topbar-logo{ display:flex; align-items:center; gap:10px; font: 700 17px/1 var(--font-sans); letter-spacing:-0.01em; color: var(--text-strong); }
.at-topbar-logo-mark{
  width:24px; height:24px; border-radius:6px;
  border: 2px solid var(--accent);
  position:relative; box-sizing:border-box;
}
.at-topbar-logo-mark::before,
.at-topbar-logo-mark::after{
  content:''; position:absolute; width:4px; height:4px; border-radius:99px; background: var(--accent);
}
.at-topbar-logo-mark::before{ top:4px; left:4px; }
.at-topbar-logo-mark::after{ bottom:4px; right:4px; background: var(--ink-900); }
.at-topbar-user{ display:flex; align-items:center; gap:10px; font: var(--text-body-sm); color: var(--text-body); }
.at-topbar-user .avatar{
  width:28px; height:28px; border-radius:99px;
  background: var(--surface-sunken); color: var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font: 600 12px/1 var(--font-sans);
}

/* ???????????? ??????.at-review-*)?? MPA ??? ????????? ??? ??   ?? ??? ????? ????????? ?????? ????? ??? ????? */

.at-view{ flex:1; min-width:0; overflow-y:auto; background: var(--bg); }

/* ???? Common admin containers ???? */
.at-page{ max-width: 1200px; margin: 0 auto; padding: 32px 32px 80px; }
.at-page-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 24px;}
.at-page-title{ font: var(--text-h3); letter-spacing: var(--ls-h3); color: var(--text-strong); }
.at-page-sub{ font: var(--text-body-sm); color: var(--text-muted); margin-top:4px; }
.at-crumb{ font: var(--text-body-sm); color: var(--text-muted); }
.at-crumb a{ color: var(--interactive-text); }

/* Card variants */
.at-card{
  background: var(--paper); border:1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.at-card-header{ padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between; gap:12px;}
.at-card-title{ font: 600 15px/1.4 var(--font-sans); color: var(--text-strong); }
.at-card-body{ padding: 20px; }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  height: 22px; padding: 0 8px; border-radius: 99px;
  font: 600 12px/1 var(--font-sans);
  background: var(--surface-sunken); color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
.badge .dot{ width:6px; height:6px; border-radius:99px; background: currentColor; }
.badge.gray{ background: var(--surface-sunken); color: var(--text-muted); }
.badge.blue{ background: var(--interactive-subtle); color: var(--interactive-text); border-color: transparent; }
.badge.green{ background: var(--positive-subtle); color: var(--positive-text); border-color: transparent; }
.badge.red{ background: var(--danger-subtle); color: var(--danger-text); border-color: transparent; }
.badge.blue .spin{
  width:10px; height:10px; border-radius:99px;
  border: 2px solid var(--interactive); border-right-color: transparent;
  animation: at-spin 800ms linear infinite;
}
@keyframes at-spin{ to { transform: rotate(360deg); } }

/* Mono */
.mono{ font-family: var(--font-mono); font-size: 13px; }

/* Table utilities (native) */
.at-table{ width:100%; border-collapse: separate; border-spacing: 0; }
.at-table thead th{
  text-align:left; font: var(--text-caption); color: var(--text-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 16px; background: var(--fill-100);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
}
.at-table tbody td{
  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
  font: var(--text-body-sm); color: var(--text-body);
  vertical-align: middle;
}
.at-table tbody tr{ transition: background 120ms; }
.at-table tbody tr:hover{ background: var(--fill-100); cursor:default; }
.at-table tbody tr.clickable{ cursor:pointer; }
.at-table tbody tr.selected{ background: var(--interactive-subtle); }
.at-table tbody tr.edited{ background: var(--interactive-subtle); }
.at-table tbody tr.edited td:first-child{ box-shadow: inset 3px 0 0 var(--interactive); }
.at-table .cell-strong{ color: var(--text-strong); font-weight:600; }
.at-table .cell-path{ color: var(--text-body); font-family: var(--font-mono); font-size: 13px; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px; background: transparent;
  color: var(--text-muted); cursor:pointer; border: none;
}
.icon-btn:hover{ background: var(--fill-100); color: var(--text-strong); }

/* Form utilities */
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row .label{ font: var(--text-label); color: var(--text-strong); }
.form-row .label .req{ color: var(--danger-text); margin-left:2px; }
.form-row .label .opt{ font: 400 12px/1 var(--font-sans); color: var(--text-faint); margin-left:6px; padding: 2px 6px; background: var(--surface-sunken); border-radius: 99px; }
.form-row .hint{ font: var(--text-caption); color: var(--text-muted); display:inline-flex; align-items:center; gap: 4px; }
.form-row .hint.mono{ font-family: var(--font-mono); }
.form-row .hint.err{ color: var(--danger-text); }

.check-result{
  display:flex; flex-direction:column; gap:10px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
}
.check-result-group{
  display:flex; flex-direction:column; gap:8px;
}
.check-result-group + .check-result-group{
  padding-top:10px; border-top:1px solid var(--border-subtle);
}
.check-result-group-title{
  font: 600 12px/1 var(--font-sans); letter-spacing:0.04em;
  text-transform:uppercase; color:var(--text-muted);
}
.check-result-foot{
  padding-top:10px; border-top:1px solid var(--border-subtle);
  font: var(--text-caption); color: var(--text-muted); line-height:1.55;
}
.check-line{ display:flex; align-items:flex-start; gap:10px; font: var(--text-body-sm); }
.check-line .icon{ flex-shrink:0; width:18px; height:18px; margin-top:1px; }
.check-line.ok .icon{ color: var(--positive); }
.check-line.warn .icon{ color: var(--warning); }
.check-line.info .icon{ color: var(--text-muted); }
.check-line.muted .msg{ color: var(--text-faint); }
.check-line .label{ font-weight:600; color: var(--text-strong); min-width: 72px; }
.check-line .msg{ color: var(--text-body); flex: 1; min-width: 0; }
.check-pf{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 1px; border-radius: 4px;
  font: 800 11px/1 var(--font-sans);
}
.check-pf.pass{ background: var(--positive-subtle); color: var(--positive-text); }
.check-pf.fail{ background: var(--danger-subtle); color: var(--danger-text); }

.register-review{
  margin-top:32px; padding-top:24px; border-top:1px dashed var(--border);
}
.register-review h2{
  font: var(--text-label); color: var(--text-muted); margin:0 0 16px;
}
.register-review-grid{
  display:grid; gap:16px;
}
.register-review-card .check-result{ margin:0; }

.spin-inline{
  display:inline-block; width:14px; height:14px; border-radius:99px;
  border:2px solid currentColor; border-right-color:transparent;
  animation: at-spin 800ms linear infinite;
  vertical-align: -2px; flex: 0 0 auto;
}
.at-btn .spin-inline{
  width:14px; height:14px;
}

.notice{
  padding: 12px 14px; border-radius: 10px;
  font: var(--text-body-sm); line-height:1.65;
  background: #FFF7DA; border: 1px solid #F1DE9C; color: #6E5312;
}
.notice b{ font-weight:700; color: #4A3608; display:block; margin-bottom:2px; }
.notice ol{ margin:0; padding-left:18px; }

/* Progress */
.progress{ width:100%; height:6px; border-radius:99px; background: var(--surface-sunken); overflow:hidden; }
.progress > span{ display:block; height:100%; background: var(--interactive); border-radius:99px; transition: width 200ms; }

/* ?????S3 ? ?? ? ???? ?? ?????*/

.interactive-login-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-sunken, var(--fill-50));
}
.interactive-login-actions{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.manual-add-err{ color: var(--danger-text) !important; }

/* PC/MO ???????? */
.side-tag{
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 8px; border-radius: 4px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.side-tag.pc{
  background: var(--interactive-subtle);
  color: var(--interactive-text);
}
.side-tag.mo{
  background: #F1EDE4;
  color: var(--ink-700);
}

/* ?? ????(??????? ?? ??? ? ?????? ???) */
.main-tabs{
  display: inline-flex;
  background: var(--surface-sunken);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 20px;
}
.main-tabs button,
.main-tabs a{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font: var(--text-body-sm);
  text-decoration: none;
  transition: all 120ms;
}
.main-tabs button:hover,
.main-tabs a:hover{ color: var(--text-body); }
.main-tabs button.active,
.main-tabs a.active{
  background: var(--paper);
  color: var(--text-strong);
  box-shadow: var(--shadow-1);
}

/* ???????? (??????/ ?? ???) */
.event-tag{
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: 4px;
  font: 600 12px/1 var(--font-sans);
  white-space: nowrap;
}
.event-tag.page_view{
  background: var(--positive-subtle);
  color: var(--positive-text);
}
.event-tag.button_click{
  background: var(--interactive-subtle);
  color: var(--interactive-text);
}

/* Draft pageview / area tables */
.draft-page .at-card{
  overflow: hidden;
  min-width: 0;
}
#table-body{
  overflow-x: auto;
  min-width: 0;
}
.draft-table{
  table-layout: fixed;
  width: 100%;
}
.draft-table thead th{ padding: 14px 12px; background: var(--paper); }
.draft-table thead th:first-child{ padding-left: 24px; width: 42%; }
.draft-table thead th:nth-child(2){ width: auto; }
.draft-table thead th:last-child{ padding-right: 24px; width: 180px; }
.draft-table tbody td{
  padding: 8px 8px; vertical-align: middle;
  overflow: hidden; max-width: 0;
}
.draft-table tbody td:first-child{ padding-left: 20px; }
.draft-table tbody td:last-child{
  padding-right: 20px;
  overflow: visible;
  max-width: none;
  white-space: nowrap;
}
.draft-table tbody tr:hover{ background: transparent; cursor: default; }
.draft-table tbody tr.edited{ background: transparent; }
.draft-table tbody tr.edited td:first-child{ box-shadow: none; }
.draft-table .edit-input{
  min-width: 0;
  box-sizing: border-box;
}

/* ?? ??????? (???? ????? ?????) */
.draft-toolbar{ flex-wrap: wrap; gap: 8px; }
.draft-bulk-actions{ display: inline-flex; align-items: center; gap: 6px; }
.draft-page-actions{ display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

.draft-check{ display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.draft-check input{ width: 15px; height: 15px; }

.draft-button-table thead th:first-child,
.draft-button-table tbody td:first-child{ width: 44px; padding-left: 16px; }
.draft-button-table thead th:nth-child(2),
.draft-button-table thead th:nth-child(3){ width: 16%; }
.draft-button-table thead th:last-child{ width: 128px; }
.draft-button-table tbody tr.is-selected{ background: var(--interactive-subtle); }
.draft-button-table .row-actions{ opacity: 0.55; }
.draft-button-table tbody tr:hover .row-actions{ opacity: 1; }

.draft-props-list{ display: flex; flex-direction: column; gap: 0; margin: 0; }
.draft-props-row{
  display: grid; grid-template-columns: 120px 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-subtle, var(--border));
}
.draft-props-row dt{ font: 600 12px/1.4 var(--font-sans); color: var(--text-muted); margin: 0; }
.draft-props-row dd{ font: 500 13px/1.4 var(--font-sans); color: var(--text-strong); margin: 0; word-break: break-all; }
.draft-add-form{ display: flex; flex-direction: column; gap: 10px; }
.draft-add-form .manual-field{
  display: flex; flex-direction: column; gap: 6px;
  font: var(--text-body-sm); color: var(--text-body);
}
.draft-add-form .manual-field span{ color: var(--text-muted); font-weight: 600; }


/* ?? ?????? ? PC/MO ????? */
.draft-title-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.draft-title-row .at-page-title{ margin: 0; }
.draft-env-segment{
  display: inline-flex; padding: 2px; border-radius: 10px;
  background: var(--fill-100); border: 1px solid var(--border);
}
.draft-env-segment button{
  height: 28px; padding: 0 14px; border: none; border-radius: 8px;
  background: transparent; font: 600 12px/1 var(--font-sans);
  color: var(--text-muted); cursor: pointer; transition: all 120ms ease-out;
}
.draft-env-segment button.active{
  background: var(--paper); color: var(--text-strong);
  box-shadow: var(--shadow-1);
}

/* Draft page cell — long URLs must ellipsis inside fixed columns */
.draft-page-cell{ display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.draft-page-name{
  font: 600 14px/1.4 var(--font-sans); color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.draft-page-url{
  font: var(--text-caption); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; display: block;
}

/* ??? ?? ????/?????????????? ?????vh ??? ??? */
.at-modal.wide{ width: min(1280px, calc(100vw - 24px)); }
/* ???????? ??? ????? ???? ??? ??? ?????????? ??? */
@media (max-width: 760px){
  .draft-page-minimap{ min-height: 96px; max-height: min(24vh, 200px); }
}
@media (max-height: 700px){
  .draft-page-minimap{ max-height: min(24vh, 220px); }
  .at-modal-header{ padding-top: 14px; }
  .at-modal-footer{ padding: 12px 20px 16px; }
}

/* ?????? ?????*/

/* ???? ??? ?? (???/??????????) ???? *

/* Checkbox */
.cb{
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; border-radius:4px;
  border: 1.5px solid var(--border);
  background: var(--paper);
  cursor:pointer; position:relative; flex-shrink:0;
  transition: all 120ms;
}
.cb:hover{ border-color: var(--ink-400); }
.cb:checked{ background: var(--interactive); border-color: var(--interactive); }
.cb:checked::after{
  content:''; position:absolute; left:4px; top:0;
  width:5px; height:9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Inline editable input ??????(hover/focus/edited ????) */
.edit-input{
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  font: 500 14px/1.4 var(--font-sans); color: var(--text-strong);
  transition: all 120ms;
}
.edit-input:hover{
  background: var(--fill-100);
}
.edit-input:focus{
  outline: none;
  background: var(--paper);
  border-color: var(--interactive);
  box-shadow: var(--focus-ring);
}
.edit-input.edited{
  background: var(--interactive-subtle);
  color: var(--interactive-text);
  font-weight: 600;
}
.edit-input.edited:hover{ background: var(--interactive-subtle); }
.edit-input::placeholder{ color: var(--text-faint); font-weight: 400; }

/* Filter bar */
.at-toolbar{
  display:flex; align-items:center; gap:10px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: var(--paper); border-radius: 12px 12px 0 0;
}

/* Native inputs to look like Madang Input */
.at-input{
  height: 40px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--paper);
  font: var(--text-body); color: var(--text-strong);
  transition: border-color 120ms, box-shadow 120ms;
  box-sizing: border-box;
}
.at-input:hover{ border-color: var(--ink-400); }
.at-input:focus{ outline:none; border-color: var(--interactive); box-shadow: var(--focus-ring); }
.at-input.error{ border-color: var(--danger); }
.at-input.error:focus{ box-shadow: 0 0 0 3px rgba(229,72,77,.25); }
.at-input.sm{ height:36px; padding:0 12px; font: var(--text-body-sm); border-radius: 8px; }
select.at-input{ padding-right: 30px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23736F67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
}
.at-input.search{ padding-left: 34px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23736F67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.35-4.35'/></svg>"); background-repeat: no-repeat; background-position: 10px center; }

/* PC/MO ???????? (S2 ? PC?MO ??) */
.pill-tag{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; padding: 0 8px; border-radius: 6px;
  font: 700 11px/1 var(--font-mono); letter-spacing: 0.02em;
  border: 1px solid transparent; white-space: nowrap;
}
.pill-tag.pill-both{ background: var(--interactive-subtle); color: var(--interactive-text); }
.pill-tag.pill-pc{ background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border); }
.pill-tag.pill-mo{ background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border); }

/* Empty state */
.empty{ padding: 60px 20px; text-align:center; color: var(--text-muted); }
.empty .frame{
  width:56px; height:56px; margin: 0 auto 16px;
  border: 3px solid var(--border); border-radius: 12px; position:relative;
}
.empty .frame::before, .empty .frame::after{
  content:''; position:absolute; width:6px; height:6px; border-radius:99px; background: var(--border);
}
.empty .frame::before{ top:6px; left:6px; }
.empty .frame::after{ bottom:6px; right:6px; background: var(--ink-300); }
.empty h4{ color: var(--text-strong); font: 600 15px/1.4 var(--font-sans); margin-bottom:4px;}
.empty p{ font: var(--text-body-sm); margin:0; }

/* Buttons (Madang ???? */
.at-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:12px; border:1px solid transparent;
  font:600 14px/1 var(--font-sans); cursor:pointer; transition:all 120ms ease-out;
  box-sizing:border-box; white-space:nowrap;
}
.at-btn:disabled{ opacity:.55; cursor:not-allowed; }
.at-btn.primary{ background:var(--accent); color:#fff; }
.at-btn.primary:hover:not(:disabled){ background:var(--accent-hover); }
.at-btn.secondary{ background:var(--surface-sunken); color:var(--text-strong); border-color:var(--border); }
.at-btn.secondary:hover:not(:disabled){ background:var(--fill-100); }
.at-btn.ghost{ background:transparent; color:var(--text-body); }
.at-btn.ghost:hover:not(:disabled){ background:var(--fill-100); }
.at-btn.sm{ padding:6px 12px; font:600 12px/1 var(--font-sans); border-radius:8px; }
.at-btn.danger{ background:transparent; color:var(--danger-text); }
.at-btn.danger:hover:not(:disabled){ background:var(--danger-subtle); }
.at-btn.outline{ background:#fff; border-color:#8C8C8C; color:#1F1E1C; }
.at-btn.outline:hover:not(:disabled){ background:#F5F5F5; }

/* Modal ????? ????/????? ??????? ?????? ?????????*/
.at-modal-scrim{
  position:fixed; inset:0; background:rgba(31,30,28,.4); z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding: max(12px, min(24px, 3vh));
  overflow: auto;
  opacity:0; transition:opacity 180ms ease-out;
  box-sizing: border-box;
}
.at-modal-scrim.show{ opacity:1; }
.at-modal{
  width:min(480px, 100%);
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  background:var(--paper); border-radius:24px;
  box-shadow:var(--shadow-4); border:1px solid var(--border);
  transform:translateY(8px); transition:transform 180ms ease-out;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.at-modal.wide{
  width: min(1040px, calc(100vw - 24px));
}
.at-modal-scrim.show .at-modal{ transform:translateY(0); }
.at-modal-header{
  padding:20px 24px 0; flex: 0 0 auto;
  min-width: 0;
}
.at-modal-header h3{
  margin:0; font:var(--text-h4); color:var(--text-strong);
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}
.at-modal-target-name{
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--fill-50);
  border: 1px solid var(--border-subtle);
  font: 600 13px/1.45 var(--font-mono, ui-monospace, monospace);
  color: var(--text-strong);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.at-modal-body{
  padding:16px 24px;
  color:var(--text-body); font:var(--text-body-sm);
  flex: 1 1 auto; min-height: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.at-modal-footer{
  padding:16px 24px 24px; display:flex; justify-content:flex-end; gap:8px;
  flex: 0 0 auto;
  border-top: 1px solid var(--border-subtle);
  background: var(--paper);
}

/* Login S0 */
.login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); }
.login-card{
  width:440px; max-width:100%; padding:40px; background:var(--paper);
  border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-2);
}
.login-brand{
  width:56px; height:56px; border:3px solid var(--interactive); border-radius:14px;
  position:relative; margin:0 auto 20px; box-sizing:border-box;
}
.login-brand::before,.login-brand::after{
  content:''; position:absolute; width:8px; height:8px; border-radius:99px;
}
.login-brand::before{ top:8px; left:8px; background:var(--interactive); }
.login-brand::after{ bottom:8px; right:8px; background:var(--ink-900); }
.login-title{ text-align:center; font:700 26px/1.25 var(--font-sans); letter-spacing:-0.015em; color:var(--text-strong); margin:0 0 8px; }
.login-sub{ text-align:center; font:var(--text-body-sm); color:var(--text-muted); line-height:1.6; margin:0 0 24px; white-space:pre-line; }
.login-error{ margin-top:12px; color:var(--danger-text); font:var(--text-body-sm); text-align:center; }
.login-foot{ margin-top:24px; text-align:center; font:var(--text-caption); color:var(--text-faint); }

.scan-screen{
  min-height: calc(100vh - 72px);
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px;
}
.scan-screen-card{ width: min(440px, 100%); text-align: center; }
.scan-screen-spin{
  width: 44px; height: 44px; margin: 0 auto 22px;
  border-radius: 99px; border: 3px solid var(--border);
  border-top-color: var(--interactive);
  animation: at-spin 800ms linear infinite;
}
.scan-screen h1{
  margin: 0 0 10px;
  font: 700 28px/1.3 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.scan-screen p{ margin: 0; font: var(--text-body); color: var(--text-body); }
.scan-screen-note{
  margin-top: 8px !important;
  font: var(--text-body-sm) !important;
  color: var(--text-muted) !important;
}
.scan-screen .at-btn{ margin-top: 22px; }