@charset "UTF-8";

@font-face {
  font-family:"Pretendard Variable";
  src:url("/romi/assets/fonts/PretendardVariable.woff2?v=9599f12fd42f") format("woff2");
  font-weight:100 900;
  font-display:swap;
}

/*
 * ROMI 디자인 편집 안내
 * 1. 색상·글꼴·간격·모서리·사진 크기는 아래 :root에서 먼저 바꿉니다.
 * 2. 화면별 수정은 03 촬영 → 04 전송/QR → 05 휴대폰 → 06 CMS 순서로 찾습니다.
 * 3. 화면 크기별 차이는 07, 움직임과 접근성은 08에서 관리합니다.
 * HTML의 id와 [hidden] 규칙은 프로그램 연결에 사용하므로 유지합니다.
 */

/* ── 01. 디자인 토큰 ────────────────────────────────────── */
:root {
  /* 브랜드 색상 */
  --paper:#000;
  --card:#0e0e0e;
  --ink:#fff;
  --muted:#d5d5d5;
  --primary:#53edbc;
  --primary-hover:#8ddbc3;
  --primary-soft:#1a1c1f;
  --accent:#cdffef;
  --line:#34383c;
  --surface-soft:#1a1c1f;
  --photo-surface:#1a1c1f;
  --danger:#ff9992;
  --danger-surface:#321d1d;
  --danger-fill:#a63232;
  --disabled-surface:#222426;
  --disabled-ink:#a8a8a8;

  /* 기존 로미 원본 버튼. PNG를 수정하지 않고 상태별로 사용합니다. */
  --button-normal:url("/romi/assets/guiderobot/next-normal.png");
  --button-hover:url("/romi/assets/guiderobot/next-hover.png");
  --button-pressed:url("/romi/assets/guiderobot/next-pressed.png");
  --camera-normal:url("/romi/assets/guiderobot/camera-normal.png");
  --camera-pressed:url("/romi/assets/guiderobot/camera-pressed.png");

  /* 글꼴과 주요 글자 크기 */
  --font-sans:"Pretendard Variable","Segoe UI","Malgun Gothic",sans-serif;
  --font-body:15px;
  --font-title:40px;
  --font-panel:26px;
  --font-caption:12px;

  /* 공통 간격과 모서리 */
  --space-xs:8px;
  --space-sm:12px;
  --space-md:20px;
  --space-lg:28px;
  --space-xl:40px;
  --card-radius:16px;
  --button-radius:11px;
  --field-radius:8px;

  /* 데스크톱 촬영 화면 */
  --shell-width:1320px;
  --shell-padding:44px;
  --header-height:76px;
  --booth-gap:24px;
  --booth-columns:minmax(0,1fr) minmax(380px,1.1fr);
  --action-padding:28px;
  --photo-toolbar-height:52px;
  --action-min-height:480px;
  --policy-height:clamp(100px,14vh,160px);
  --camera-icon-size:100px;
  --primary-button-height:64px;

  /* 완성 사진 수신 화면: 약관만 늘리고 줄여 동의·동작 버튼은 항상 보여 줍니다. */
  --receive-header-height:52px;
  --receive-policy-min:60px;
  --receive-portrait-reserve:820px;

  /* 전송·QR·휴대폰 사진 */
  --qr-size:236px;
  --qr-padding:14px;
  --upload-icon-size:164px;
  --upload-icon-surface:#182722;
  --upload-icon-outline:#68887d;
  --upload-icon-ink:#124a3c;
  --mobile-width:540px;
  --mobile-photo-height:64vh;

  font-family:var(--font-sans);
  font-size:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  color-scheme:dark;
}

/* ── 02. 기본 요소와 공통 컴포넌트 ───────────────────────── */
* { box-sizing:border-box; }
html { scrollbar-gutter:stable; }
body { margin:0; line-height:1.5; }
button,input,textarea { font:inherit; }
button,input,textarea,a { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
.romi-kiosk,.mobile-page { overscroll-behavior-y:none; }
.romi-kiosk .check-row,.mobile-page .check-row,.romi-kiosk summary,.mobile-page summary { touch-action:manipulation; }
.romi-kiosk .check-row { user-select:none; }
.romi-kiosk .viewfinder img,.romi-kiosk .qr-frame img { -webkit-user-drag:none; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
h1,h2,p { margin-top:0; }
h1 {
  margin-bottom:0;
  font-size:var(--font-title);
  line-height:1.2;
  font-weight:650;
  letter-spacing:-1.8px;
}
h2 {
  margin-bottom:var(--space-md);
  font-size:var(--font-panel);
  line-height:1.3;
  font-weight:650;
  letter-spacing:-1px;
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--primary);
  outline-offset:4px;
}
button:disabled {
  opacity:1;
  cursor:not-allowed;
}
[hidden] { display:none!important; }
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.muted { color:var(--muted); font-size:14px; line-height:1.65; }
.small { font-size:var(--font-caption); line-height:1.65; }
.eyebrow {
  margin:0 0 var(--space-sm);
  color:var(--primary);
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
}
.lead { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.notice {
  margin:16px 0 0;
  color:var(--danger);
  font-size:13px;
  line-height:1.65;
  overflow-wrap:anywhere;
}
.notice:empty,.copy-status:empty { display:none; }
.policy-notice {
  max-height:240px;
  margin:12px 0 0;
  padding-right:8px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.75;
  scrollbar-width:thin;
  scrollbar-color:#77968a #0e0e0e;
}
/* 약관 내부에만 적용합니다. 휠·키보드·터치의 기본 스크롤 동작은 유지합니다. */
.policy-notice:hover,.policy-notice:focus-visible { scrollbar-color:#53edbc #0e0e0e; }
@supports selector(::-webkit-scrollbar) {
  .policy-notice,.policy-notice:hover,.policy-notice:focus-visible { scrollbar-width:auto; scrollbar-color:auto; }
  .policy-notice::-webkit-scrollbar { width:8px; height:8px; }
  .policy-notice::-webkit-scrollbar-track { border-radius:8px; background:#0e0e0e; }
  .policy-notice::-webkit-scrollbar-thumb { min-height:32px; border:2px solid #0e0e0e; border-radius:8px; background:#77968a; }
  .policy-notice::-webkit-scrollbar-thumb:hover,.policy-notice::-webkit-scrollbar-thumb:active { background:#53edbc; }
  .policy-notice::-webkit-scrollbar-button { display:none; width:0; height:0; }
  .policy-notice::-webkit-scrollbar-corner { background:#0e0e0e; }
}
.shell {
  max-width:var(--shell-width);
  margin:auto;
  padding:0 var(--shell-padding);
}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:var(--header-height);
  border-bottom:1px solid var(--line);
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:18px;
  font-weight:750;
  letter-spacing:2px;
  line-height:1.15;
}
.brand-logo { display:block; flex-shrink:0; width:120px; height:auto; }
.brand-text { padding-left:16px; border-left:1px solid var(--line); }
.brand-sub {
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
  font-weight:500;
  letter-spacing:.5px;
}
.intro { padding:30px 0 26px; }
.text-link {
  color:var(--primary);
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px;
}
.dot {
  display:inline-block;
  flex-shrink:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
}
.button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  min-height:50px;
  padding:13px 20px;
  border:1px solid transparent;
  border-radius:var(--button-radius);
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  text-align:center;
  transition:background .18s,color .18s,border-color .18s;
}
.button svg { flex-shrink:0; width:22px; height:22px; }
.button.primary { position:relative; isolation:isolate; background:transparent; color:var(--primary); border:0; }
/* 450×150 원본의 양 끝을 보존하고 가운데만 늘려 네온 외곽선을 유지합니다. */
.button.primary::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border:20px solid transparent;
  border-image:var(--button-image,var(--button-normal)) 50 75 fill / 18px 30px / 0 stretch;
  pointer-events:none;
}
.button.primary:not(:disabled):active { --button-image:var(--button-pressed); color:#0e0e0e; }
.button.secondary {
  background:var(--surface-soft);
  color:var(--primary);
  border-color:var(--line);
}
.button.secondary:not(:disabled):active { background:var(--primary-soft); }
.button.subtle {
  min-height:40px;
  padding:9px 12px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
}
/* 터치 후 hover가 남아 버튼 색이 바뀌지 않도록 마우스에만 적용합니다. */
@media(hover:hover) and (pointer:fine) {
  .button.primary:not(:disabled):hover { --button-image:var(--button-hover); color:#0e0e0e; }
  .button.secondary:not(:disabled):hover { background:var(--primary-soft); }
  .button.subtle:not(:disabled):hover { background:var(--surface-soft); color:var(--primary); }
}
.button:disabled { background:var(--disabled-surface); color:var(--disabled-ink); border-color:var(--line); }
.romi-kiosk .button,.mobile-page .button { min-height:48px; }
.button.primary:disabled { border:1px solid #444; border-radius:100px; }
.button.primary:disabled::after { display:none; }
.secondary-actions { display:flex; gap:10px; margin-top:12px; }
.secondary-actions .button { flex:1; }
.danger { color:var(--danger)!important; }
.danger-fill { background:var(--danger-fill); color:#fff; }
.footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:26px 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
}

/* ── 03. 키오스크 촬영·미리보기 ──────────────────────────── */
.romi-kiosk main { padding-bottom:32px; }
.romi-kiosk .intro {
  display:flex;
  align-items:center;
  gap:15px;
}
.romi-kiosk .intro::before {
  content:"";
  width:4px;
  height:29px;
  flex-shrink:0;
  background:var(--accent);
  border-radius:2px;
}
.booth-grid {
  display:grid;
  grid-template-columns:var(--booth-columns);
  align-items:stretch;
  gap:var(--booth-gap);
}
.policy-card {
  margin:0 0 15px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
}
.policy-card h2 { margin:0; font-size:13px; letter-spacing:0; }
.policy-card .policy-notice {
  height:var(--policy-height);
  max-height:none;
  margin-top:9px;
  padding-right:12px;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
  scrollbar-gutter:stable;
}
.photo-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  align-self:start;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  background:var(--card);
}
.photo-top,.photo-bottom {
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:9px;
  min-height:var(--photo-toolbar-height);
  padding:12px 23px;
  font-size:13px;
  line-height:1.5;
}
.photo-top {
  justify-content:space-between;
  color:var(--ink);
  font-weight:600;
}
.photo-top::after {
  content:"";
  width:18px;
  height:13px;
  border:1.5px solid var(--accent);
  border-radius:4px;
  background:radial-gradient(circle,var(--accent) 0 2px,transparent 2.5px);
}
.photo-bottom { color:var(--muted); font-size:12px; }
.viewfinder {
  position:relative;
  display:grid;
  place-items:center;
  /* 기존 로미의 최종 합성 사진(1440×1080)과 같은 4:3 틀을 사용합니다. */
  flex:none;
  width:100%;
  min-height:0;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--photo-surface);
}
.viewfinder video,.viewfinder>img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--photo-surface);
}
.viewfinder video { transform:scaleX(-1); }
.corner {
  position:absolute;
  width:25px;
  height:25px;
  border-color:rgba(83,237,188,.35);
  border-style:solid;
  pointer-events:none;
}
.corner-a { top:20px; left:20px; border-width:1px 0 0 1px; }
.corner-b { top:20px; right:20px; border-width:1px 1px 0 0; }
.corner-c { bottom:20px; left:20px; border-width:0 0 1px 1px; }
.corner-d { bottom:20px; right:20px; border-width:0 1px 1px 0; }
.welcome-art {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:32px;
}
.camera-placeholder { display:block; width:var(--camera-icon-size); height:var(--camera-icon-size); object-fit:contain; }
.countdown-overlay {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.94);
  text-align:center;
}
.countdown-overlay strong {
  display:block;
  color:var(--primary);
  font-size:128px;
  font-weight:500;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-5px;
}
.countdown-overlay span { display:block; margin-top:22px; color:var(--muted); font-size:14px; }
.countdown-cancel { max-width:150px; margin-top:28px; }
.action-card {
  min-width:0;
  min-height:var(--action-min-height);
  padding:var(--action-padding);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  background:var(--card);
}
.steps {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:0 0 27px;
  padding:0 0 22px;
  border-bottom:1px solid var(--line);
  list-style:none;
}
.steps li {
  display:flex;
  align-items:center;
  gap:7px;
  color:#a8a8a8;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.step-number {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.steps li.current { color:var(--primary); }
.current .step-number { border-color:var(--primary); background:var(--primary); color:#000; }
.privacy-list {
  margin:0 0 19px;
  padding:14px 16px;
  border-radius:10px;
  background:var(--surface-soft);
  font-size:13px;
  line-height:1.55;
}
.privacy-list>div { display:grid; grid-template-columns:30px 1fr; gap:10px; }
.privacy-list>div+div { margin-top:7px; }
.privacy-list dt { color:var(--muted); }
.privacy-list dd { margin:0; color:var(--muted); overflow-wrap:anywhere; }
.check-row {
  display:flex;
  /* 사용자 요청: 체크박스와 여러 줄 라벨도 세로 중앙에 맞춥니다. */
  align-items:center;
  gap:10px;
  min-height:48px;
  margin:11px 0;
  font-size:14px;
  font-weight:500;
  line-height:1.55;
  cursor:pointer;
}
.check-row span { display:block; word-break:keep-all; }
.check-row input {
  display:block;
  flex-shrink:0;
  width:19px;
  height:19px;
  margin:0;
  accent-color:var(--primary);
}
#start-camera,#capture,#upload {
  min-height:var(--primary-button-height);
  font-size:19px;
  letter-spacing:-.5px;
}
/* 동의·호버 여부와 무관하게 같은 높이/테두리를 사용합니다. 원형 촬영 버튼은 제외합니다. */
.romi-kiosk .button.primary:not(#capture) { height:var(--primary-button-height); min-height:var(--primary-button-height); padding:0 20px; border:1px solid transparent; border-radius:100px; background:transparent; line-height:1.25; transition:none; }
.romi-kiosk .button.primary:not(#capture)::after { inset:-1px; }
.romi-kiosk .button.primary:not(#capture):disabled { border-color:transparent; background:transparent; }
.romi-kiosk .button.primary:not(#capture):disabled::after { display:block; filter:grayscale(1); opacity:.5; }
#start-camera { margin-top:23px; }
#start-camera::before,#capture::before {
  content:"";
  width:22px;
  height:17px;
  border:1.8px solid currentColor;
  border-radius:5px;
  background:radial-gradient(circle,currentColor 0 3px,transparent 3.5px);
}
.receive-mode #start-camera::before { display:none; }
.receive-actions { display:flex; gap:10px; margin-top:10px; }
.receive-actions>.button { flex:1; min-height:48px; font-size:14px; }
.receive-retry { margin-top:10px; }
#capture {
  width:112px;
  min-height:112px;
  margin:0 auto;
  padding:12px;
  border-radius:50%;
  background:var(--camera-normal) center/contain no-repeat;
  color:#fff;
  font-size:17px;
}
#capture::before,#capture::after { display:none; }
#capture:not(:disabled):active { background-image:var(--camera-pressed); }
#retake::before { content:""; width:18px; height:14px; background:url("/romi/assets/guiderobot/back-icon.png") center/contain no-repeat; }
.capture-help { margin:9px 0 16px; color:var(--muted); font-size:12px; text-align:center; }
.help-details { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.65; }
.help-details summary { width:fit-content; padding:5px 0; cursor:pointer; }
.help-details p { margin-bottom:8px; }
.help-details .secondary-actions { margin-top:8px; }
#review-panel h2,#capture-panel h2 { margin-bottom:26px; }
#retake { margin-top:12px; }
#finish { font-size:19px; }

/* ── 04. 실제 업로드 진행률과 QR 받기 ────────────────────── */
.device-registration { margin:0 0 18px; padding:16px; border:1px solid #74663d; border-radius:10px; background:#292519; }
.device-registration>strong { display:block; color:#f0d68b; font-size:15px; line-height:1.6; }
.device-registration>p { margin:7px 0 11px; color:var(--ink); font-size:12px; line-height:1.7; }
.device-registration>div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid #51472f; font-size:11px; color:var(--muted); }
.device-registration>div strong { color:var(--ink); font-family:ui-monospace,monospace; font-size:22px; letter-spacing:2px; }
.device-registration>small { display:block; margin-top:10px; color:var(--muted); font-size:11px; line-height:1.6; }
.notice-code { margin:-7px 0 12px; color:var(--muted); font-family:ui-monospace,monospace; font-size:11px; }
#upload-retry { margin-top:14px; }
.upload-progress {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0;
  padding:14px;
  border:0;
  border-radius:inherit;
  background:transparent;
  color:var(--primary);
}
.upload-photo-icon { display:block; flex:none; width:min(var(--upload-icon-size),calc(100% - 42px)); height:auto; aspect-ratio:1; overflow:visible; pointer-events:none; }
.upload-photo-background { fill:var(--upload-icon-surface); }
/* viewBox 안의 높이만 바꾸므로 창 크기가 달라도 같은 비율로 채워집니다. */
#upload-fill { fill:var(--primary); }
.upload-photo-outline,.upload-photo-ink { fill:none; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.upload-photo-outline { stroke:var(--upload-icon-outline); }
.upload-photo-ink { stroke:var(--upload-icon-ink); }
.upload-percent { display:flex; align-items:baseline; gap:3px; line-height:1; font-variant-numeric:tabular-nums; }
.upload-percent strong { font-size:24px; font-weight:500; letter-spacing:-.5px; }
.upload-percent span { font-size:13px; }
#upload-status { min-height:2.9em; margin:11px 0 14px; color:var(--muted); font-size:12px; line-height:1.45; }
.share-title { display:flex; align-items:center; justify-content:center; gap:10px; min-height:1.4em; text-align:center; }
.success-check {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:50%;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:15px;
}
.qr-card {
  margin:18px 0 14px;
  padding:20px 14px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
  text-align:center;
}
.qr-frame {
  position:relative;
  display:grid;
  place-items:center;
  width:min(var(--qr-size),100%);
  aspect-ratio:1;
  margin:0 auto 12px;
  padding:var(--qr-padding);
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.qr-frame img { position:absolute; inset:var(--qr-padding); width:calc(100% - var(--qr-padding) - var(--qr-padding)); height:calc(100% - var(--qr-padding) - var(--qr-padding)); min-width:0; min-height:0; object-fit:contain; }
/* 자리와 크기는 유지하고, 전송 중에는 사각 틀 대신 사진 아이콘만 보입니다. */
.qr-card:has(.upload-progress:not([hidden])),.qr-frame:has(.upload-progress:not([hidden])) { background:transparent; border-color:transparent; }
.qr-caption { min-height:20px; }
#share-panel:has(.qr-card:not(.ready)) .qr-scan-copy,#share-panel:has(.qr-card:not(.ready)) #finish { visibility:hidden; pointer-events:none; }
.qr-card.ready { animation:none; }
.qr-state { margin:0 0 5px; color:var(--primary); font-size:14px; font-weight:650; }
.qr-scan-copy { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.qr-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:17px; color:var(--muted); font-size:12px; }
.qr-spinner {
  display:block;
  width:32px;
  height:32px;
  border:2px solid var(--line);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:qr-spin 1s linear infinite;
}
#qr-retry { max-width:190px; margin:10px auto 0; color:var(--primary); }
.expiry { margin:14px 0; color:var(--muted); font-size:12px; line-height:1.65; text-align:center; }
.share-url-row { display:grid; grid-template-columns:minmax(0,1fr) 65px; gap:8px; margin-top:8px; }
#share-url {
  min-width:0;
  width:100%;
  padding:9px;
  border:1px solid var(--line);
  border-radius:var(--field-radius);
  background:var(--card);
  color:var(--ink);
  font-size:12px;
}
.share-url-row .button { min-height:48px; padding:8px; border-color:var(--line); }
.copy-status { margin:8px 0 0; color:var(--primary); font-size:12px; }

/* ── 05. 휴대폰 QR 사진 페이지 ───────────────────────────── */
.mobile-shell { max-width:var(--mobile-width); margin:auto; padding:0 22px 28px; }
.mobile-page .header { height:68px; }
.mobile-page .brand { gap:12px; font-size:15px; }
.mobile-page .brand-logo { width:100px; }
.mobile-page .brand-text { padding-left:12px; }
.mobile-page .intro { padding:27px 0 21px; }
.mobile-page h1 { font-size:31px; letter-spacing:-1.2px; }
.mobile-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--card-radius); background:var(--card); }
.download-frame { padding:12px 12px 0; }
.download-photo {
  display:block;
  width:100%;
  height:auto;
  max-height:var(--mobile-photo-height);
  object-fit:contain;
  border-radius:14px;
  background:var(--photo-surface);
}
.download-actions { padding:20px; }
#download { min-height:58px; font-size:18px; }
#download svg { width:23px; height:23px; }
.mobile-page .expiry { margin:13px 0 18px; font-size:12px; }
#delete { min-height:48px; background:var(--card); font-size:13px; font-weight:500; }
@media(hover:hover) and (pointer:fine) { #delete:not(:disabled):hover { background:var(--danger-surface); border-color:#71423d; } }
.delete-confirm { margin-top:12px; padding:16px; border:1px solid #71423d; border-radius:var(--button-radius); background:var(--danger-surface); font-size:13px; line-height:1.7; }
.delete-confirm p { margin:0; }
.delete-confirm .button { min-height:48px; padding:10px 14px; font-size:13px; }
.mobile-card>.notice { margin:0; padding:0 20px 18px; }
.safety-copy { margin:18px 12px 0; color:var(--muted); font-size:12px; line-height:1.65; text-align:center; }
.empty-state { padding:42px 24px 46px; text-align:center; }
.state-illustration { display:block; width:88px; height:88px; margin:0 auto 22px; color:var(--primary-hover); }
.empty-state h2 { margin:0; font-size:21px; letter-spacing:-.7px; }
.empty-state .muted { margin:12px 0 0; font-size:13px; }
#retry { max-width:260px; margin:24px auto 0; }

/* ── 06. CMS 통계와 설정 ────────────────────────────────── */
.cms-shell,.romi-login,.romi-chart-export-menu,.romi-chart-export-status { --card:#141b1e; --surface-soft:#202a2e; --line:#3d4c52; --muted:#afbfbe; --cms-empty-height:220px; }
.cms-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; width:100%; min-height:var(--cms-empty-height,220px); padding:24px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--muted); text-align:center; }
.cms-empty-state>.cms-icon { width:28px; height:28px; opacity:.75; stroke-width:1.5; }
.cms-empty-state>p { max-width:100%; margin:0; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.cms-empty-cell { padding:0!important; }
.cms-empty-cell .cms-empty-state { position:sticky; left:0; width:min(100%,calc(100vw - 2 * var(--shell-padding))); border:0; border-radius:0; }
.statistics-library-list:has(.cms-empty-state) { max-height:none; }
.statistics-data .table-scroll:has(.cms-empty-state) { max-height:none; }
.cms-shell .button,.romi-login .button { border-radius:6px; }
.cms-shell .button.primary,.romi-login .button.primary { border:1px solid var(--primary); border-radius:6px; background:var(--primary); background-image:none; color:#07281f; }
.cms-shell .button.primary::after,.romi-login .button.primary::after { display:none; }
.cms-shell .button.primary:not(:disabled):hover,.romi-login .button.primary:not(:disabled):hover { background:var(--primary-hover); border-color:var(--primary-hover); color:#07281f; }
.cms-shell .button.primary:not(:disabled):active,.romi-login .button.primary:not(:disabled):active { background:#79d9b8; color:#07281f; }
.cms-shell .button:disabled,.cms-shell .button.primary:disabled,.romi-login .button:disabled,.romi-login .button.primary:disabled { border:1px solid var(--line); border-radius:6px; background:var(--disabled-surface); color:var(--disabled-ink); }
.cms-icon { display:inline-block; flex-shrink:0; width:17px; height:17px; vertical-align:middle; stroke-width:1.8; }
.cms-nav a { gap:10px; }
.cms-shell .button,.romi-login .button { gap:8px; }
.cms-shell .button .cms-icon,.romi-login .button .cms-icon { width:16px; height:16px; }
.cms-shell .notice,.romi-login .notice { color:var(--muted); }
.cms-shell [data-state="error"],.romi-login .notice[data-state="error"] { color:var(--danger); }
.cms-shell [data-state="success"] { color:var(--primary); }
.cms-shell>.header { position:sticky; top:0; z-index:100; background:var(--paper); }
.cms-shell .cms-nav { top:calc(var(--header-height) + 20px); }
.romi-loading-panel { position:fixed; z-index:1000; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:200px; min-height:160px; padding:18px; border:1px solid #4b625d; border-radius:12px; background:rgba(20,27,30,.96); box-shadow:0 12px 44px #0005; color:var(--muted); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease; }
.romi-loading-panel.is-active { opacity:1; visibility:visible; }
.romi-face { display:inline-block; position:relative; flex-shrink:0; width:72px; height:72px; }
.romi-face::before { content:''; position:absolute; inset:0; background:url('/romi/assets/guiderobot/romi-face-shell.svg') center/contain no-repeat; }
.romi-face-eyes { position:absolute; left:25%; top:37%; width:50%; height:30%; overflow:hidden; border-radius:5px; background:#000; }
.romi-face-eyes img { position:absolute; top:50%; left:0; display:block; width:100%; height:auto; transform:translateY(-50%); }
.romi-loading-symbol { width:76px; height:76px; }
.romi-face-open { opacity:1; }
.romi-face-blink { opacity:0; }
.romi-face.is-blinking,.romi-loading-panel.is-active .romi-loading-symbol { animation:romi-breathe 1.6s ease-in-out infinite; }
.romi-face.is-blinking .romi-face-open,.romi-loading-panel.is-active .romi-face-open { animation:romi-eye-open 1.6s steps(1,end) infinite; }
.romi-face.is-blinking .romi-face-blink,.romi-loading-panel.is-active .romi-face-blink { animation:romi-eye-blink 1.6s steps(1,end) infinite; }
.romi-loading-panel p { margin:0; font-size:12px; }
.romi-loading-dots { display:flex; gap:5px; height:5px; }
.romi-loading-dots span { width:5px; height:5px; border-radius:50%; background:var(--primary); }
.romi-loading-panel.is-active .romi-loading-dots span { animation:romi-dot 1.2s ease-in-out infinite; }
.romi-loading-panel.is-active .romi-loading-dots span:nth-child(2) { animation-delay:.16s; }
.romi-loading-panel.is-active .romi-loading-dots span:nth-child(3) { animation-delay:.32s; }
@keyframes romi-breathe { 50% { transform:translateY(-2px); } }
@keyframes romi-eye-open { 0%,6% { opacity:1; } 7%,16% { opacity:0; } 17%,24% { opacity:1; } 25%,34% { opacity:0; } 35%,100% { opacity:1; } }
@keyframes romi-eye-blink { 0%,6% { opacity:0; } 7%,16% { opacity:1; } 17%,24% { opacity:0; } 25%,34% { opacity:1; } 35%,100% { opacity:0; } }
@keyframes romi-dot { 50% { transform:translateY(-2px); opacity:.3; } }
@keyframes cms-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .romi-face.is-blinking,.romi-face.is-blinking .romi-face-open,.romi-face.is-blinking .romi-face-blink,.romi-loading-panel.is-active .romi-loading-symbol,.romi-loading-panel.is-active .romi-face-open,.romi-loading-panel.is-active .romi-face-blink,.romi-loading-panel.is-active .romi-loading-dots span { animation:none; } .romi-loading-panel { transition:none; } }
.romi-login .status-spinner { width:16px; height:16px; animation:cms-spin .8s linear infinite; }
@media(prefers-reduced-motion:reduce) { .romi-login .status-spinner { animation:none; } }
.cms-search-field { position:relative; min-width:0; }
.cms-search-field>.cms-icon { position:absolute; left:11px; top:50%; z-index:1; width:15px; height:15px; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.cms-search-field #statistics-library-search,.cms-search-field #account-search,.cms-search-field #device-search { padding-left:34px; }
.device-search-form>.cms-search-field { flex:1; }
.statistics-library-heading .button .cms-icon { width:14px; height:14px; }
#account-search { margin-bottom:0; }
.portal-sync-button.button { width:100%; min-height:34px; margin:0 0 6px; padding:7px 9px; font-size:10px; }
.portal-sync-state { margin:7px 0 12px; font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
.cms-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:36px 0 28px; }
.cms-intro h1 { margin:0 0 12px; font-size:34px; }
.cms-intro>.button { width:auto; flex-shrink:0; font-size:13px; }
.cms-intro .lead { font-size:13px; }
.cms-layout { display:grid; grid-template-columns:160px minmax(0,1fr); align-items:start; gap:24px; }
.cms-content { min-width:0; }
.cms-nav { display:grid; gap:8px; position:sticky; top:24px; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.cms-nav a { display:flex; align-items:center; min-height:46px; padding:11px 16px; border-radius:8px; color:var(--muted); font-size:14px; text-decoration:none; }
.cms-nav a:hover { background:var(--surface-soft); color:var(--ink); }
.cms-nav a[aria-current="page"] { background:var(--primary); color:#07281f; font-weight:650; }
.cms-nav a:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.cms-section-title { margin:0 0 12px; font-size:20px; }
/* 사진 정리 목록: 장비·계정과 같은 카드 간격을 사용하고 날짜 필터의 외곽 장식은 두지 않습니다. */
.cleanup-filters { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin:0 0 12px; }
.cleanup-filters label { display:grid; gap:8px; flex:0 1 190px; min-width:0; color:var(--muted); font-size:12px; }
.cleanup-filters input { width:100%; min-width:0; height:44px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--ink); font:inherit; font-size:13px; }
.cleanup-filters .button { width:auto; min-height:44px; padding:10px 18px; font-size:13px; white-space:nowrap; }
.cleanup-summary { margin:0 0 12px; line-height:20px; font-variant-numeric:tabular-nums; }
.cleanup-list { display:grid; gap:10px; max-height:clamp(220px,calc(100vh - 500px),640px); overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#536b60 var(--surface-soft); scrollbar-gutter:stable; }
.cleanup-list:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.cleanup-run { min-width:0; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.cleanup-run-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.cleanup-run-heading h3 { min-width:0; margin:0; font-size:14px; font-weight:650; overflow-wrap:anywhere; }
.cleanup-state { display:inline-flex; flex-shrink:0; padding:4px 7px; border-radius:5px; background:var(--surface-soft); color:var(--muted); font-size:10px; line-height:1.4; }
.cleanup-state-success,.cleanup-state-running { color:var(--primary); background:var(--primary-soft); }
.cleanup-state-partial_failure { color:#f0d68b; background:#342e1d; }
.cleanup-state-failed { color:var(--danger); background:#3a2522; }
.cleanup-times { display:flex; flex-wrap:wrap; gap:4px 16px; margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.cleanup-counts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:16px 0 0; }
.cleanup-counts>div { min-width:0; }
.cleanup-counts dt { color:var(--muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.cleanup-counts dd { margin:5px 0 0; font-size:16px; font-weight:600; line-height:1.5; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.cleanup-note { margin:12px 0 0; font-size:12px; line-height:1.6; }
.cleanup-pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:18px; }
.cleanup-pagination .button { width:auto; min-height:40px; padding:9px 14px; font-size:12px; }
.cleanup-pagination>span { font-variant-numeric:tabular-nums; text-align:center; }
/* 장비 등록 UI: 촬영·휴대폰 화면에 영향을 주지 않는 CMS 전용 스타일입니다. */
.cms-shell .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.device-page-heading,.device-editor-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:20px; }
.device-page-heading p { margin:8px 0 0; line-height:1.6; }
.device-page-heading .button,.device-editor-heading .button,.device-pagination .button,.device-editor-actions .button,.library-sync .button,.library-selection .button,.temporary-library .button,.library-more,.registered-library .button { width:auto; min-height:40px; padding:9px 14px; font-size:12px; }
.device-toolbar { display:grid; gap:18px; margin-bottom:20px; }
.device-tabs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.device-tabs button { display:flex; align-items:center; gap:7px; min-height:42px; padding:10px 13px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.device-tabs button[aria-pressed="true"] { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); }
.device-tabs button span { font-size:11px; font-variant-numeric:tabular-nums; }
.device-search-form { display:flex; gap:8px; max-width:540px; }
.device-search-form input,#device-editor input,#library-link-panel input,#library-edit-panel input { width:100%; min-width:0; min-height:44px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--ink); font:inherit; font-size:13px; }
.device-search-form .button { width:auto; flex-shrink:0; min-height:44px; padding:10px 18px; font-size:13px; white-space:nowrap; }
.device-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
.device-workspace.has-editor { grid-template-columns:minmax(260px,1fr) minmax(310px,1fr); }
.device-list { display:grid; gap:10px; }
.device-row { width:100%; min-width:0; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.device-row:hover { border-color:#64776e; background:var(--surface-soft); }
.device-row[aria-pressed="true"] { border-color:var(--primary); box-shadow:inset 3px 0 var(--primary); }
.device-row-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.device-row-heading strong { min-width:0; font-size:14px; overflow-wrap:anywhere; }
.device-state { display:inline-flex; flex-shrink:0; padding:4px 7px; border-radius:5px; background:var(--surface-soft); color:var(--muted); font-size:10px; }
.device-state-pending { background:#342e1d; color:#f0d68b; }
.device-state-approved { background:var(--primary-soft); color:var(--primary); }
.device-row-identity { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-top:13px; font-size:12px; overflow-wrap:anywhere; }
.device-code { font-family:ui-monospace,monospace; font-size:13px; letter-spacing:1px; }
.device-row p { margin:9px 0 0; line-height:1.6; overflow-wrap:anywhere; }
.device-last-seen { opacity:.8; }
.device-empty { margin:0; padding:45px 20px; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:13px; text-align:center; }
.device-pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:18px; }
.device-editor { min-width:0; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.device-editor-heading { align-items:center; margin-bottom:18px; }
.device-editor-heading h3 { margin:0; font-size:17px; }
.device-hardware { margin:0 0 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.device-hardware summary { display:flex; align-items:center; gap:8px; padding:12px 0; color:var(--muted); font-size:12px; cursor:pointer; }
.device-hardware summary::after { content:'+'; margin-left:auto; }
.device-hardware[open] summary::after { content:'−'; }
.device-hardware .device-current { margin:0 0 14px; }
.device-hardware dd { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.device-identity { padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.device-identity strong { display:block; margin-top:7px; font-family:ui-monospace,monospace; font-size:25px; letter-spacing:3px; }
.device-identity p { margin:9px 0 0; overflow-wrap:anywhere; }
.device-check-note { margin:11px 0 18px; color:var(--muted); font-size:12px; line-height:1.7; }
.device-current { display:grid; grid-template-columns:78px minmax(0,1fr); gap:9px 12px; padding-bottom:18px; border-bottom:1px solid var(--line); font-size:12px; line-height:1.6; }
.device-current dt { color:var(--muted); }
.device-current dd { margin:0; overflow-wrap:anywhere; }
#device-edit-fields { min-width:0; margin:0; padding:0; border:0; }
.device-editor-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.device-editor-actions .primary { flex:1; }
.device-block-confirm { padding:16px; border:1px solid #71423d; border-radius:10px; background:var(--danger-surface); font-size:13px; line-height:1.7; }
.device-block-confirm p { margin:0 0 12px; }
.library-selection { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--primary); border-radius:9px; background:var(--primary-soft); }
.library-selection>div { min-width:0; }
.library-selection strong { display:block; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.library-selection span { display:block; margin-top:5px; overflow-wrap:anywhere; }
.library-results-box { margin-top:8px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.library-results-box>p { margin:0 4px 9px; font-size:11px; line-height:1.6; }
.library-results { max-height:290px; overflow:auto; scrollbar-width:thin; scrollbar-color:#536b60 var(--surface-soft); }
.library-option { display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%; padding:13px 10px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.library-option:last-child { border-bottom:0; }
.library-option strong { font-size:12px; font-weight:500; line-height:1.6; overflow-wrap:anywhere; }
.library-option span { flex-shrink:0; font-size:10px; }
.library-option:hover,.library-option[aria-selected="true"] { background:var(--primary-soft); color:var(--primary); }
.library-more { width:100%; margin-top:8px; }
.library-sync { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.library-sync>span { display:block; line-height:1.7; }
.library-sync>.button { margin-top:10px; }
.library-sync p { margin-bottom:0; line-height:1.7; }
.temporary-library { margin-top:13px; padding:12px; border:1px solid var(--line); border-radius:8px; }
.temporary-library summary { color:var(--muted); font-size:12px; cursor:pointer; }
.temporary-library .settings-label { margin-top:14px; font-size:12px; }
.temporary-library .button { margin-top:12px; }
.temporary-library p { margin-bottom:0; line-height:1.6; }
.registered-libraries { display:grid; gap:10px; margin-bottom:20px; }
.registered-library { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.registered-library strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.registered-library p { margin:9px 0 0; overflow-wrap:anywhere; }
.registered-library .device-state { margin-left:8px; }
.library-link-panel,.library-edit-panel { max-width:640px; }
#library-link-submit,#library-edit-submit { min-height:46px; margin-top:20px; font-size:13px; }
.statistics-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:20px; align-items:start; }
.statistics-main { min-width:0; }
.statistics-results { position:relative; }
.statistics-skeleton { position:absolute; inset:0; z-index:2; pointer-events:none; }
.statistics-skeleton-block { position:absolute; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.statistics-skeleton-block::before { content:""; position:absolute; top:20px; left:18px; width:48%; height:12px; border-radius:4px; background:var(--surface-soft); box-shadow:0 35px 0 4px var(--surface-soft); }
.statistics-skeleton-block.chart::before { top:30px; width:70%; box-shadow:0 45px 0 4px var(--surface-soft),0 90px 0 4px var(--surface-soft),0 135px 0 4px var(--surface-soft); }
.statistics-skeleton-block::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 25%,#ffffff09 50%,transparent 75%); animation:skeleton-shift 1.4s ease-in-out infinite; }
@keyframes skeleton-shift { from { transform:translateX(-90%); } to { transform:translateX(90%); } }
@media(prefers-reduced-motion:reduce) { .statistics-skeleton-block::after { animation:none; } }
.statistics-libraries { min-width:0; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.statistics-library-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.statistics-library-heading h2 { margin:0; font-size:14px; }
.statistics-library-heading .button { width:auto; min-height:32px; padding:6px 0 6px 8px; font-size:10px; }
#statistics-library-search { width:100%; min-width:0; height:39px; margin:12px 0; padding:9px; border:1px solid var(--line); border-radius:6px; background:var(--surface-soft); color:var(--ink); font:inherit; font-size:11px; }
.statistics-library-all,.statistics-library { display:block; width:100%; min-width:0; padding:12px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.statistics-library-all { margin:0 0 10px; font-weight:600; }
.statistics-library[aria-pressed="true"],.statistics-library-all[aria-pressed="true"] { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); }
.statistics-library:hover,.statistics-library-all:hover { background:var(--surface-soft); }
.statistics-library[data-key-active="true"] { outline:1px solid var(--primary); outline-offset:-2px; background:var(--primary-soft); }
.statistics-library-list { display:grid; gap:5px; max-height:600px; overflow:auto; scrollbar-width:thin; scrollbar-color:#536b60 var(--surface-soft); }
.statistics-library strong { display:block; font-size:12px; line-height:1.65; font-weight:500; overflow-wrap:anywhere; }
.statistics-library span,.statistics-library small { display:block; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
#statistics-library-status { margin:8px 0; font-size:10px; line-height:1.65; }
.statistics-scope { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin:0 0 20px; }
.statistics-scope>div:first-child { min-width:0; }
.statistics-scope h2 { margin:0; font-size:20px; overflow-wrap:anywhere; }
.statistics-scope p { margin:8px 0 0; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.statistics-period { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--line); border-radius:7px; background:var(--card); }
.statistics-period button { min-height:34px; padding:7px 12px; border:0; border-radius:4px; background:transparent; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.statistics-period button[aria-pressed="true"] { background:var(--primary); color:#07281f; font-weight:600; }
.cms-shell .statistics-filters { display:grid; grid-template-columns:minmax(115px,1fr) minmax(115px,1fr) minmax(120px,1.2fr) auto; gap:12px; padding:16px; border-radius:10px; }
.cms-shell .statistics-filters label { min-width:0; font-size:11px; }
.cms-shell .statistics-filters input,.cms-shell .statistics-filters select { width:100%; min-width:0; height:40px; margin-top:8px; padding:9px; border:1px solid var(--line); border-radius:6px; background:var(--surface-soft); color:var(--ink); font:inherit; font-size:12px; }
.cms-shell .statistics-filters .button { width:auto; min-height:40px; padding:9px 12px; font-size:12px; white-space:nowrap; }
/* 요약은 한 줄에 모으고 그래프에 세로 공간을 남깁니다. 좁은 화면에서는 다시 나눕니다. */
.cms-shell .statistics-metrics { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:12px 0; }
.statistics-metrics .metric { min-width:0; padding:12px 10px; border-radius:8px; }
.statistics-metrics .metric>span { font-size:11px; line-height:1.45; }
.statistics-metrics .metric strong { margin:6px 0 4px; font-size:24px; line-height:1.2; letter-spacing:-.5px; overflow-wrap:anywhere; }
.statistics-metrics .metric small { font-size:10px; line-height:1.45; }
@media(min-width:761px) and (max-width:1199px) { .cms-shell .statistics-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.statistics-chart-card { padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.statistics-chart-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.statistics-chart-heading h3 { margin:0; font-size:14px; }
.statistics-chart-heading p { margin:0; font-size:10px; }
#statistics-chart-range { flex-shrink:0; width:24ch; min-height:18px; line-height:18px; font-family:Consolas,monospace; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.statistics-filters input { font-variant-numeric:tabular-nums; }
.statistics-chart-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 14px; min-height:28px; margin-top:12px; }
.statistics-chart-legend button { display:flex; align-items:center; gap:5px; padding:4px 0; border:0; background:transparent; color:var(--muted); font:inherit; font-size:11px; line-height:18px; cursor:pointer; }
.statistics-chart-legend button>span { width:10px; height:10px; border-radius:50%; background:var(--series-color); }
.statistics-chart-legend button[aria-pressed="false"] { opacity:.45; text-decoration:line-through; }
.statistics-chart-wrap { position:relative; height:260px; }
#statistics-chart { touch-action:pan-y; cursor:grab; }
#statistics-chart.is-panning { cursor:grabbing; }
#statistics-chart:focus-visible { outline:2px solid var(--primary); outline-offset:5px; }
.statistics-pan-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:-2px 0 10px; }
.statistics-pan-toolbar>div { display:flex; gap:6px; }
.statistics-pan-toolbar .button { width:auto; min-height:31px; padding:6px 10px; font-size:10px; }
.statistics-pan-toolbar .button .cms-icon { width:14px; height:14px; }
.statistics-pan-toolbar>span { min-width:70px; min-height:16px; font-size:10px; line-height:16px; }
.statistics-pan-help { margin:10px 0 0; font-size:10px; line-height:1.6; }
.statistics-chart-state { position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:0; font-size:12px; line-height:1.7; text-align:center; pointer-events:none; }
.statistics-chart-state .cms-empty-state { height:100%; min-height:100%; border:0; border-radius:0; }
.statistics-data { margin-top:14px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.statistics-data summary { padding:13px 16px; color:var(--muted); font-size:12px; cursor:pointer; }
.statistics-data .table-scroll { max-height:260px; }
.statistics-data th { position:sticky; top:0; font-size:11px; }
.statistics-data td { font-size:12px; }
.statistics-footnote { margin:14px 0 0; font-size:10px; line-height:1.7; }
.cms-shell button:focus-visible,.cms-shell input:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.filter-bar {
  display:flex;
  align-items:flex-end;
  gap:14px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
}
.filter-bar label { flex:1; min-width:0; color:var(--muted); font-size:12px; }
.filter-bar input {
  display:block;
  width:100%;
  min-width:0;
  height:42px;
  margin-top:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--field-radius);
  background:var(--surface-soft);
  color:var(--ink);
  font-size:13px;
}
.filter-bar .button { width:112px; min-height:42px; padding:9px; font-size:13px; }
.settings-card { margin:0 0 20px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.settings-card>h2 { margin:0; font-size:16px; font-weight:600; }
.settings-card>h2 span { margin-left:10px; color:var(--muted); font-size:12px; font-weight:400; }
.settings-card form { margin-top:20px; }
.settings-card fieldset { min-width:0; margin:0; padding:0; border:0; }
.setting-item { padding:20px 0; border-top:1px solid var(--line); }
.setting-item:first-child { border-top:0; padding-top:0; }
.setting-item-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.setting-item-heading h3 { margin:0; font-size:14px; }
.setting-item-heading .button { width:auto; min-height:38px; padding:8px 16px; font-size:12px; }
.setting-value { margin:12px 0 0; font-size:13px; line-height:1.7; }
.setting-value.policy-notice { max-height:300px; overflow:auto; padding:14px; border-radius:8px; background:var(--surface-soft); }
.settings-label { display:block; margin:20px 0 8px; font-size:14px; font-weight:600; }
.retention-input { display:flex; align-items:center; gap:10px; font-size:13px; }
.retention-input input,.settings-card textarea {
  padding:11px;
  border:1px solid var(--line);
  border-radius:var(--field-radius);
  background:var(--surface-soft);
  color:var(--ink);
  font-size:13px;
  line-height:1.65;
}
.retention-input input { width:100px; }
.retention-input input[type="time"] { width:140px; }
.settings-card textarea { display:block; width:100%; resize:vertical; }
.settings-help { margin:8px 0 10px; color:var(--muted); font-size:12px; line-height:1.65; }
.cms-dialog { width:min(680px,calc(100% - 40px)); max-height:90vh; margin:auto; padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); }
.cms-dialog::backdrop { background:#000b; }
.cms-dialog .device-editor-heading { margin-bottom:16px; }
.cms-dialog h2 { margin:0; font-size:18px; }
.cms-dialog .button { width:auto; min-height:38px; padding:8px 14px; font-size:12px; }
.cms-dialog-body.policy-notice { max-height:min(65vh,560px); overflow:auto; margin:0; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); font-size:13px; line-height:1.85; }
.settings-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.settings-actions .button { width:auto; min-height:42px; padding:10px 18px; font-size:13px; }
.settings-card .notice { margin-bottom:0; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; }
.metric { display:flex; flex-direction:column; padding:23px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.metric>span { color:var(--muted); font-size:13px; }
.metric strong { margin:10px 0 8px; font-size:34px; font-weight:550; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.metric small { color:var(--muted); font-size:11px; }
.metric.accent { background:var(--surface-soft); color:var(--primary); border-color:var(--primary); }
.metric.accent span,.metric.accent small { color:var(--muted); }
.table-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.table-title { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:22px; border-bottom:1px solid var(--line); }
.table-title h2 { margin:0; font-size:18px; letter-spacing:-.4px; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:13px; text-align:right; }
th { padding:15px 20px; border-bottom:1px solid var(--line); background:var(--surface-soft); color:var(--muted); font-size:12px; font-weight:500; }
td { padding:17px 20px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
th:first-child,td:first-child { text-align:left; }
tbody tr:last-child td { border-bottom:0; }
.table-empty { padding:40px!important; color:var(--muted); text-align:center!important; }
.cms-shell main>.small { margin:18px 0 0; }

/* ── 07. 화면 크기에 따른 조정 ───────────────────────────── */
@media(max-width:1100px) {
  .device-workspace.has-editor { grid-template-columns:minmax(0,1fr); }
  .device-workspace.has-editor .device-list-region { display:none; }
}
@media(max-width:1000px) {
  .statistics-layout { grid-template-columns:minmax(0,1fr); }
  .statistics-library-list { max-height:170px; }
  .statistics-libraries { padding:14px; }
}
@media(max-width:760px) {
  .cms-shell #cms-refresh .refresh-label { display:none; }
  .cms-shell #cms-refresh { min-width:40px; padding:9px 10px; }
  .cms-shell #admin-name { display:none; }
  .cms-shell #admin-logout { min-width:40px; padding:9px 10px; gap:0; font-size:0; }
  .cms-shell .admin-session { gap:8px; }
  .device-page-heading { gap:12px; }
  .device-page-heading>.button { flex-shrink:0; }
  .device-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .device-tabs button { justify-content:center; padding:10px 8px; }
  .device-editor { padding:18px; }
  .device-row { padding:16px; }
  .device-pagination { gap:8px; }
  .device-pagination span { font-size:11px; }
  .library-option { gap:8px; }
  .cms-shell .statistics-filters { grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px; gap:12px; }
  .statistics-scope { gap:14px; }
  .statistics-scope h2 { font-size:18px; }
  .statistics-period { width:100%; }
  .statistics-period button { flex:1; }
  .cms-shell .statistics-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .statistics-metrics .metric { padding:12px; }
  .statistics-metrics .metric strong { font-size:24px; }
  .statistics-chart-card { padding:16px; }
  .statistics-chart-wrap { height:230px; }
}
/* 가로형 WPF 창: 큰 사진과 필수 고지·촬영 버튼을 함께 보여 줍니다. */
@media(min-width:761px) and (max-height:850px) {
  :root {
    --header-height:64px;
    --font-title:32px;
    --font-panel:24px;
    --action-padding:18px;
    --action-min-height:394px;
    --photo-toolbar-height:47px;
    --policy-height:clamp(88px,13vh,112px);
    --qr-size:206px;
  }
  .romi-kiosk main { padding-bottom:24px; }
  .romi-kiosk .intro { padding:18px 0; }
  .romi-kiosk .steps { margin-bottom:12px; padding-bottom:10px; }
  .romi-kiosk #prepare-panel>h2 { margin-bottom:10px; }
  .romi-kiosk .privacy-list { padding:10px 14px; margin-bottom:12px; }
  .romi-kiosk .privacy-list>div+div { margin-top:4px; }
  .romi-kiosk .check-row { margin:8px 0; }
  .romi-kiosk #start-camera { margin-top:13px; }
  .romi-kiosk .capture-help { margin-top:7px; margin-bottom:0; }
  .romi-kiosk .policy-card { margin-bottom:12px; padding:10px 13px; }
  .romi-kiosk .policy-notice { margin-top:8px; }
  .romi-kiosk .qr-card { padding:16px 12px; }
}
@media(max-width:1000px) {
  :root {
    --shell-padding:28px;
    --booth-gap:18px;
    --booth-columns:minmax(0,1fr) minmax(315px,1.1fr);
    --action-padding:22px;
    --font-title:34px;
    --font-panel:24px;
  }
  .steps { gap:7px; }
  .steps li { gap:5px; font-size:11px; }
  .filter-bar { flex-wrap:wrap; }
  .filter-bar label { flex-basis:35%; }
  .filter-bar .button { flex-basis:100%; }
  .cms-intro { align-items:flex-start; }
}
@media(max-width:760px) {
  :root {
    --shell-padding:20px;
    --header-height:68px;
    --font-title:31px;
    --font-panel:25px;
    --card-radius:16px;
    --action-padding:24px;
    --photo-toolbar-height:46px;
  }
  .brand { gap:12px; font-size:16px; }
  .brand-logo { width:105px; }
  .brand-text { padding-left:12px; }
  .intro { padding:25px 0 22px; }
  .booth-grid { display:flex; flex-direction:column; align-items:stretch; gap:18px; }
  .romi-kiosk .photo-card { align-self:stretch; }
  .action-card { min-height:0; }
  .steps { margin-bottom:24px; padding-bottom:19px; }
  .steps li { gap:7px; font-size:12px; }
  .photo-top,.photo-bottom { padding:11px 19px; }
  .qr-card { max-width:390px; margin-left:auto; margin-right:auto; }
  .cms-intro { flex-direction:column; padding:28px 0 23px; }
  .cms-intro h1 { font-size:29px; }
  .cms-intro>.button { min-height:44px; }
  .cms-layout { display:block; }
  .cms-nav { position:static; display:flex; gap:8px; margin-bottom:20px; overflow-x:auto; }
  .cms-nav a { flex:1; justify-content:center; white-space:nowrap; }
  .cleanup-pagination { gap:8px; }
  .cleanup-pagination .button { padding:9px 12px; font-size:12px; }
  .cleanup-pagination>span { font-size:11px; }
  .cleanup-run { padding:16px; }
  .cleanup-counts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
  .cleanup-counts>div:last-child { grid-column:1/-1; }
  .cleanup-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cleanup-filters .button { grid-column:1/-1; width:100%; }
  .cms-shell .header>.text-link { font-size:11px; }
  .settings-card { padding:20px; }
  .filter-bar { padding:18px; }
  .metrics { grid-template-columns:repeat(2,1fr); gap:12px; }
  .metric { padding:20px; }
  .metric strong { font-size:30px; }
  .table-title { padding:19px; }
  .table-title .small { font-size:11px; }
  .footer { flex-direction:column; gap:7px; }
}
@media(max-width:380px) {
  :root { --shell-padding:16px; --action-padding:20px; }
  .mobile-shell { padding-left:16px; padding-right:16px; }
  .mobile-page h1 { font-size:29px; }
  .download-actions { padding:18px; }
  .settings-card>h2 { font-size:14px; }
  .metrics { gap:10px; }
  .metric { padding:17px; }
  .cms-shell .brand-sub { display:none; }
}

/* 실제 로미의 세로 화면(1080×1920): 사진과 안내를 한 열로 넓게 보여 줍니다. */
@media(min-width:761px) and (orientation:portrait) {
  .romi-kiosk {
    --shell-padding:clamp(24px,3.2vw,40px);
    --header-height:clamp(56px,3.6vh,72px);
    --font-title:clamp(32px,3.5vw,42px);
    --font-panel:clamp(24px,2.6vw,30px);
    --action-padding:clamp(20px,2.4vw,28px);
    --action-min-height:0px;
    --booth-gap:clamp(18px,1.2vh,24px);
    --photo-toolbar-height:clamp(36px,2.2vh,44px);
    --primary-button-height:clamp(60px,4vh,80px);
    --policy-height:clamp(88px,6vh,120px);
  }
  .romi-kiosk main { padding-bottom:16px; }
  .romi-kiosk .intro { padding:12px 0; }
  .romi-kiosk .booth-grid { display:flex; flex-direction:column; align-items:stretch; }
  .romi-kiosk .photo-card { align-self:stretch; }
  .romi-kiosk .photo-top,.romi-kiosk .photo-bottom { padding:8px 22px; }
  .romi-kiosk .steps { margin-bottom:12px; padding-bottom:12px; }
  .romi-kiosk .steps li { gap:9px; font-size:clamp(14px,1.5vw,16px); }
  .romi-kiosk .step-number { width:clamp(28px,3vw,32px); height:clamp(28px,3vw,32px); font-size:13px; }
  .romi-kiosk #prepare-panel>h2 { margin-bottom:12px; }
  .romi-kiosk .privacy-list { margin-bottom:12px; padding:10px 16px; font-size:clamp(14px,1.5vw,16px); }
  .romi-kiosk .privacy-list>div+div { margin-top:4px; }
  .romi-kiosk .policy-card { margin-bottom:12px; padding:10px 14px; }
  .romi-kiosk .policy-card h2 { font-size:14px; }
  .romi-kiosk .policy-notice { margin-top:8px; font-size:clamp(13px,1.4vw,15px); }
  .romi-kiosk .check-row { min-height:48px; margin:8px 0; font-size:clamp(15px,1.7vw,18px); }
  .romi-kiosk .check-row input { width:22px; height:22px; }
  .romi-kiosk #start-camera { margin-top:14px; }
  .romi-kiosk #start-camera,.romi-kiosk #upload { font-size:clamp(21px,2.4vw,26px); }
  .romi-kiosk .capture-help { margin:7px 0 0; }
}

/* 수신 전용 화면. 큰 제목·단계의 중복을 덜고 약관에 남는 세로 공간을 줍니다.
   문서 overflow를 숨기지 않으므로 확대 표시나 긴 오류에서도 버튼이 잘리지 않습니다. */
@media(min-width:761px) {
  .romi-kiosk.receive-mode {
    --header-height:var(--receive-header-height);
    --shell-padding:clamp(20px,3vw,40px);
    --font-panel:22px;
    --action-padding:16px;
    --action-min-height:0px;
    --photo-toolbar-height:36px;
    --primary-button-height:64px;
    --booth-gap:18px;
    --booth-columns:minmax(0,.9fr) minmax(390px,1.1fr);
  }
  .romi-kiosk.receive-mode .shell { display:flex; flex-direction:column; height:100dvh; min-height:600px; }
  .romi-kiosk.receive-mode .header { flex-shrink:0; }
  .romi-kiosk.receive-mode main { display:flex; flex:1; flex-direction:column; min-height:0; padding:12px 0; }
  .romi-kiosk.receive-mode .intro { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .romi-kiosk.receive-mode .steps { display:none; }
  .romi-kiosk.receive-mode .booth-grid { display:grid; flex:1; min-height:0; }
  .romi-kiosk.receive-mode .photo-card { align-self:start; }
  .romi-kiosk.receive-mode .photo-top,.romi-kiosk.receive-mode .photo-bottom { padding:7px 18px; }
  .romi-kiosk.receive-mode .action-card { display:flex; flex-direction:column; min-height:0; }
  .romi-kiosk.receive-mode #prepare-panel { display:flex; flex:1; flex-direction:column; min-height:0; }
  .romi-kiosk.receive-mode #prepare-panel>:not(.policy-card) { flex-shrink:0; }
  .romi-kiosk.receive-mode #prepare-panel>h2 { margin-bottom:8px; }
  .romi-kiosk.receive-mode .privacy-list { margin-bottom:10px; padding:8px 12px; font-size:13px; line-height:1.45; }
  .romi-kiosk.receive-mode .privacy-list>div+div { margin-top:3px; }
  .romi-kiosk.receive-mode .policy-card { display:flex; flex:1; flex-direction:column; min-height:calc(var(--receive-policy-min) + 43px); margin-bottom:8px; padding:8px 12px; }
  .romi-kiosk.receive-mode .policy-card h2 { font-size:13px; }
  .romi-kiosk.receive-mode .policy-notice { flex:1; height:0; min-height:var(--receive-policy-min); margin-top:6px; font-size:13px; line-height:1.55; }
  /* 두 항목을 나란히 두어 작은 시험 창에서도 터치 영역과 약관 높이를 확보합니다. */
  .romi-kiosk.receive-mode .consent-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .romi-kiosk.receive-mode .check-row { min-height:48px; margin:0; font-size:14px; }
  .romi-kiosk.receive-mode #start-camera { margin-top:10px; font-size:19px; }
  .romi-kiosk.receive-mode .receive-actions { margin-top:8px; }
  .romi-kiosk.receive-mode .receive-retry { min-height:48px; margin-top:8px; padding:8px 12px; }
  .romi-kiosk.receive-mode .action-card>.notice { flex-shrink:0; margin-top:8px; line-height:1.4; }
}
/* 작은 시험 창에서도 글자·약관 높이는 유지하고 주변 여백만 줄입니다. */
@media(min-width:761px) and (max-height:680px) {
  .romi-kiosk.receive-mode { --header-height:44px; --action-padding:12px; --primary-button-height:56px; }
  .romi-kiosk.receive-mode #prepare-panel>h2 { margin-bottom:4px; font-size:20px; }
  .romi-kiosk.receive-mode .privacy-list { margin-bottom:8px; padding:6px 10px; line-height:1.4; }
  .romi-kiosk.receive-mode #start-camera { margin-top:6px; padding:10px 16px; }
  .romi-kiosk.receive-mode .receive-actions { margin-top:6px; }
  .romi-kiosk.receive-mode .receive-actions>.button { min-height:48px; padding:8px 12px; }
}
@media(min-width:761px) and (min-height:1200px) and (orientation:portrait) {
  .romi-kiosk.receive-mode {
    --header-height:clamp(52px,3.6vh,68px);
    --action-padding:clamp(18px,2.4vw,26px);
    --photo-toolbar-height:40px;
    --primary-button-height:64px;
    --receive-policy-min:88px;
    --booth-gap:20px;
  }
  .romi-kiosk.receive-mode .booth-grid { display:flex; flex-direction:column; }
  .romi-kiosk.receive-mode .photo-card { flex:none; align-self:center; width:100%; max-width:calc((100dvh - var(--receive-portrait-reserve)) * 1.333333 + 2px); }
  .romi-kiosk.receive-mode .action-card { flex:1; }
  .romi-kiosk.receive-mode #prepare-panel>h2 { font-size:28px; }
  .romi-kiosk.receive-mode .privacy-list { font-size:16px; line-height:1.5; }
  .romi-kiosk.receive-mode .policy-card h2 { font-size:16px; }
  .romi-kiosk.receive-mode .policy-notice { font-size:16px; line-height:1.6; }
  .romi-kiosk.receive-mode .check-row { min-height:48px; margin:0; font-size:19px; }
  .romi-kiosk.receive-mode #start-camera { font-size:24px; }
  .romi-kiosk.receive-mode .receive-actions>.button { min-height:52px; font-size:18px; }
}

/* ── 08. 미세 움직임과 움직임 줄이기 ─────────────────────── */
@keyframes qr-spin { to { transform:rotate(360deg); } }
@keyframes qr-reveal {
  from { opacity:.5; transform:translateY(4px); }
  to { opacity:1; transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* 전송·완료 화면만 세로 균형을 맞춥니다. 동의 화면과 사진의 4:3 비율은 유지합니다. */
.romi-kiosk.receive-mode[data-stage="share"] .booth-grid { align-items:center; justify-content:center; }
.romi-kiosk.receive-mode[data-stage="share"] .photo-card { align-self:center; }
.romi-kiosk.receive-mode[data-stage="share"] .action-card { flex:none; align-self:center; width:100%; }
.romi-kiosk[data-stage="share"] .photo-bottom { display:none; }
.romi-kiosk[data-stage="share"] .corner { display:none; }
@media(forced-colors:active) {
  .qr-card:has(.upload-progress:not([hidden])),.qr-frame:has(.upload-progress:not([hidden])) { forced-color-adjust:none; }
  .upload-progress { forced-color-adjust:auto; }
  .upload-photo-background { fill:Canvas; }
  .upload-photo-outline { stroke:CanvasText; }
  #upload-fill { fill:Highlight; forced-color-adjust:none; }
  .upload-photo-ink { stroke:HighlightText; forced-color-adjust:none; }
}

/* ── 독립 관제 관리자 로그인 ─────────────────────────────── */
.admin-session { display:flex; align-items:center; gap:16px; }
.admin-session .button { min-height:40px; padding:8px 18px; }
.romi-login { display:grid; min-height:100dvh; place-items:center; padding:28px 20px; }
.login-shell { width:min(100%,480px); }
.login-shell>.brand-logo { width:150px; height:auto; margin-bottom:24px; }
.login-card { padding:32px; }
.login-card h1 { margin:0 0 12px; font-size:30px; }
.login-card form { margin-top:28px; }
.romi-login .settings-card { border-radius:6px; }
.login-card input { width:100%; min-height:48px; margin:8px 0 20px; padding:12px 14px; border:1px solid #45484d; border-radius:6px; background:#1d1f21; color:var(--ink); font:inherit; }
.login-password-field { position:relative; }
.login-password-field input { padding-right:50px; }
.login-password-toggle { position:absolute; top:9px; right:1px; display:grid; place-items:center; width:46px; height:46px; border:0; border-radius:0 5px 5px 0; background:transparent; color:var(--muted); cursor:pointer; }
.login-password-toggle:hover { background:var(--primary-soft); color:var(--primary); }
.login-password-toggle:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.login-card input:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.login-card .button { width:100%; margin-top:8px; }
.login-shell>.small { margin-top:20px; text-align:center; }
@media(max-width:600px) {
  .admin-session { gap:8px; }
  .admin-session #admin-name { display:none; }
  .login-card { padding:24px; }
}

/* ── 09. 공통 오류 안내: 본문을 밀지 않고 코드와 다음 행동을 한곳에 표시합니다. ── */
.romi-error-dialog { width:min(480px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); box-sizing:border-box; overflow:auto; margin:auto; padding:30px; border:1px solid #4b6260; border-radius:14px; background:var(--card); color:var(--ink); font-family:var(--font-sans); text-align:center; box-shadow:0 20px 70px #0007; }
.romi-error-dialog::backdrop { background:#000b; backdrop-filter:blur(3px); }
.romi-error-dialog[open] { animation:romi-error-enter 140ms ease-out; }
.romi-error-portrait { display:grid; place-items:center; width:108px; height:108px; margin:0 auto 22px; border:1px solid #45665e; border-radius:28px; background:#1c3935; }
.romi-error-portrait img { display:block; width:88px; height:88px; }
.romi-error-dialog h2 { margin:0 0 14px; font-size:24px; line-height:1.4; word-break:keep-all; }
#romi-error-message { margin:0; font-size:18px; line-height:1.7; word-break:keep-all; overflow-wrap:anywhere; }
.romi-error-help { margin:20px 0 10px; color:var(--muted); font-size:14px; line-height:1.6; word-break:keep-all; }
#romi-error-code { display:inline-block; margin:0; padding:7px 12px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.romi-error-actions { display:flex; justify-content:center; gap:12px; margin-top:26px; }
.romi-error-dialog .romi-error-actions .button { flex:1; min-width:0; height:52px; min-height:52px; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:17px; line-height:1.3; }
.romi-error-dialog .romi-error-actions .romi-error-primary { background:var(--primary); border-color:var(--primary); color:#07281f; }
@media(hover:hover) and (pointer:fine) { .romi-error-dialog .romi-error-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); } }
.romi-error-dialog .button:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
@keyframes romi-error-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:450px) { .romi-error-dialog { padding:24px 20px; } .romi-error-dialog h2 { font-size:21px; } #romi-error-message { font-size:16px; } .romi-error-dialog .romi-error-actions .button { font-size:15px; } }
@media(prefers-reduced-motion:reduce) { .romi-error-dialog[open] { animation:none; } .romi-error-dialog::backdrop { backdrop-filter:none; } }