/* 아이템뷰 이미지호스팅 관리화면 — 앨리스(itemview) 관리자 톤을 기준으로 한 디자인 시스템.
   base(모든 화면 공용) 전용 파일. 화면별 규칙은 list.css(상품 목록) / edit.css(상품 수정) 에
   분리돼 있고, 두 파일 모두 이 app.css 다음에 로드된다.
   토큰 → 리셋 → 레이아웃 → 공용 컴포넌트 → 화면 간 공유 컴포넌트 순서로 둔다. */

:root{
  --bg:#f4f5f7; --card:#fff; --line:#e3e5e9; --ink:#1f2430; --muted:#6b7280;
  --accent:#2f6feb; --accent-d:#2457c5; --accent-soft:#eaf1ff;
  --danger:#e2483d; --danger-d:#c33a30; --danger-soft:#fdeceb; --danger-ink:#a5271e;
  --ok:#1c7a3d; --ok-soft:#e7f7ec;
  --warn:#a76a1e; --warn-soft:#fff5e6; --warn-line:#f0d3a0;
  --r:10px; --r-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.05);
  --shadow-md:0 2px 10px rgba(31,36,48,.08);
}
*{box-sizing:border-box}
/* 파일 선택 input — 화면에서만 감춘다. hidden 이면 키보드로 도달할 수 없어
   업로드·교체가 마우스 전용이 된다. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr-only:focus-visible{position:static;width:auto;height:auto;margin:0;clip:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;
  font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  -webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
b,strong{font-weight:700}
/* <dialog> 를 모르는 브라우저는 이것을 그냥 인라인 요소로 그린다 — [open] 이 없어도 모달
   내용(상품 등록 폼·통계)이 본문 아래에 통째로 펼쳐진다. 정작 폴백이 필요한 쪽이 깨지는
   자리다. 지원 브라우저에는 아무 영향이 없다(그쪽 기본 스타일과 같은 뜻). */
dialog:not([open]){display:none}
h1{font-size:22px;margin:0 0 16px;letter-spacing:-.02em}
h2{font-size:18px;margin:0;letter-spacing:-.01em}
h3{font-size:15px;margin:0 0 4px;letter-spacing:-.01em}
p{margin:0}

/* 접근성 — 키보드 포커스 링. 마우스 클릭 때는 안 보이고 Tab 이동 때만 나타난다.
   화면별 파일(list.css/edit.css)의 버튼·링크도 태그/공용 클래스 선택자로 이 규칙을 그대로 받는다. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.lnk:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ── 상단바 ───────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:18px;background:#fff;padding:11px 18px;
  border-bottom:2px solid var(--accent);position:sticky;top:0;z-index:20;
  box-shadow:0 1px 4px rgba(0,0,0,.06)}
.topbar .brand{font-weight:800;color:var(--accent);letter-spacing:-.02em;font-size:15px}
.topbar .brand span{color:var(--muted);font-weight:600}
.topbar nav{display:flex;gap:16px}
.topbar nav a{color:#333a45;padding:4px 2px;font-weight:600;border-bottom:2px solid transparent}
.topbar nav a:hover{color:var(--accent)}
.topbar nav a.on{color:var(--accent);border-bottom-color:var(--accent)}
.topbar .spacer{flex:1}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.who .name{color:#333a45;font-weight:600}
.who .code{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;line-height:1.7;
  border:1px solid var(--line);border-radius:999px;background:#fafbfc;cursor:default;font-size:12px}
.who .code b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.who .logout{color:#333a45;font-weight:600}
.who .logout:hover{color:var(--accent)}

/* ── 운영자 대리 로그인 띠 ────────────────────────────── */
/* 대리 로그인 중이라는 사실은 **놓칠 수 없어야** 한다 — 잊은 채 조작하면 그 흔적이 판매자가
   직접 한 일과 구분되지 않는다(views/layout.php 주석). 그래서 이 화면에서 유일하게 톤을
   벗어나는 색을 쓴다: 다른 무엇과도 안 닮아야 "지금 평소와 다르다"가 한눈에 읽힌다.
   상단바보다 위에 오되 sticky 는 아니다(같은 자리에 둘을 붙이면 판매자 nav 가 가려진다). */
.impbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--danger);color:#fff;padding:8px 18px;font-size:13px;font-weight:600}
.impbar .spacer{flex:1}
.impbar b{font-weight:800;letter-spacing:-.01em}
.impbar form{margin:0}
/* app.css 의 `.btn,button` 이 채운 파란 버튼이라 그대로 두면 빨간 띠 위에서 튄다. */
.impbar button{padding:3px 12px;background:#fff;color:var(--danger-ink);font-size:12.5px;
  border-radius:6px}
.impbar button:hover{background:#ffeceb}

.wrap{max-width:1120px;margin:22px auto 0;padding:0 18px}
/* 로그인 화면은 내용이 짧다. 100vh 를 채워 가운데에 놓으면 위아래로 빈 화면만 길어지고,
   모바일에서는 100vh 에 주소창 높이까지 얹혀 더 심해진다(내용은 짧은데 스크롤이 생긴다).
   위에서 적당히 띄우고 흐르게 둔다 — 7vh 라 큰 화면에서는 넉넉하고 작은 화면에서는 붙는다. */
.wrap.center{max-width:none;margin-top:0;display:grid;justify-items:center;align-content:start;
  padding:clamp(20px,7vh,64px) 18px 40px}
.foot{color:var(--muted);text-align:center;padding:28px 18px;font-size:12px}

/* ── 버튼 ─────────────────────────────────────────────── */
.btn,button{display:inline-block;padding:8px 14px;border:0;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;
  text-align:center;white-space:nowrap}
.btn:hover,button:hover{background:var(--accent-d)}
.btn.ghost,button.ghost{background:#eef1f6;color:var(--ink)}
.btn.ghost:hover,button.ghost:hover{background:#e2e7f0}
.btn.line{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.line:hover{background:#f7f9fc;border-color:#c9cfda}
.btn-danger,.btn.danger{background:var(--danger);color:#fff}
.btn-danger:hover,.btn.danger:hover{background:var(--danger-d)}
.btn.sm,.btn-danger.sm,button.sm{padding:5px 10px;font-size:12.5px;border-radius:6px}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
button:disabled:hover{background:var(--accent)}
.btn-danger:disabled:hover{background:var(--danger)}
.lnk{background:#fff;border:1px solid var(--line);border-radius:6px;color:var(--ink);
  font:inherit;padding:3px 8px;cursor:pointer;font-weight:500}
.lnk:hover{background:#f0f4fb;border-color:var(--accent);color:var(--accent)}
.lnk.danger{background:none;border:0;color:var(--muted);font-size:12.5px;text-decoration:underline;padding:2px 4px}
.lnk.danger:hover{color:var(--danger);background:none}

/* ── 폼 ───────────────────────────────────────────────── */
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid #ccd2dc;border-radius:var(--r-sm);
  background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
input[type=checkbox]{padding:0;accent-color:var(--accent);width:16px;height:16px}
label{cursor:pointer}
textarea{width:100%;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}

/* ── 공용 블록 ────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--shadow)}
.card+.card,section+section{margin-top:16px}
.card-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.card-h .spacer{flex:1}
.count{display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-d);font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums}
.sub{color:var(--muted);font-size:13px;margin:2px 0 0}
.muted{color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bar .spacer{flex:1}
.empty{border:1px dashed #cfd5df;border-radius:var(--r);padding:44px 16px;text-align:center;
  background:#fbfcfe}
.empty .sub{margin-top:6px}
.empty.sm{padding:18px 14px}

/* 알림 — 정책 경고문(엑박·재복붙)이 눈에 띄어야 한다 */
.flash{padding:11px 14px;border-radius:var(--r-sm);margin-bottom:14px;
  background:var(--accent-soft);color:#264a9c;border:1px solid #cddcfb}
.flash.ok{background:var(--ok-soft);color:var(--ok);border-color:#bfe5cb}
.flash.error{background:var(--danger-soft);color:var(--danger-ink);border-color:#f6cdc9}
.flash.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.flash b{font-weight:700}
.notice{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fafbfd;margin-bottom:14px}
.notice.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.notice p+p{margin-top:4px}
.notice ul,.notice ol{margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:13px}
.notice li{margin-bottom:4px}
.notice li b{color:var(--ink)}

/* 표 — 현재는 상품 목록만 <table> 을 쓰지만 다른 화면에서도 재사용할 수 있는
   공용 컴포넌트라 base 에 둔다. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:#fafbfc;color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s,box-shadow .12s}
tbody tr:hover td{background:var(--accent-soft)}
tbody tr:hover{box-shadow:inset 3px 0 0 var(--accent)}
td a{font-weight:600;color:var(--ink)}
tbody tr:hover td a{color:var(--accent-d)}

/* ── 첫 화면 ──────────────────────────────────────────── */
.hero{text-align:center;margin:0 0 22px}
.hero h1{font-size:34px;margin:0 0 6px;color:var(--accent);font-weight:800;letter-spacing:-.03em}
.hero h1 span{color:var(--muted);font-weight:600}
.hero .lead{color:var(--muted);font-size:15px;margin-bottom:18px}
.auth{width:min(92vw,380px);margin:20px auto 0}
/* 인증 위젯(smsauth-widget.js)은 자기 스타일을 <head> 에 주입하면서 .sa-root 에
   min-height:100vh + 가운데 정렬 + 배경을 건다 — 위젯 혼자 한 화면을 쓰는 전제다.
   여기서는 소개 문구 아래에 얹히는 한 조각이라 그 전제가 깨진다(카드 위아래로 화면 높이만큼
   빈 공간이 생긴다).
   선택자 주의: 위젯은 mount 대상에 root.classList.add('sa-root') 로 **자기 자신에게** 클래스를
   붙인다. 따라서 자손 선택자(#auth .sa-root)는 아무것도 잡지 못하고, 붙여 쓴 #auth.sa-root
   여야 한다. 위젯 CSS 가 우리 뒤에 주입되므로 id 를 끼워 우선순위도 함께 확보한다.
   가로 가운데 정렬(flex)은 위젯 것을 그대로 둔다.
   2026-07-31: 위젯에 layout 옵션이 생겨 index.php 가 layout:'inline' 을 넘긴다(전체화면 속성이
   .sa-root--page 로 분리됨). 그 위젯이 배포되면 아래 한 줄은 지워도 된다 — 그때까지는 구버전 위젯이
   서빙될 수 있으므로 남겨 둔다(둘 다 걸려도 결과는 같다). */
#auth.sa-root{min-height:0;padding:0;background:none}
/* 카드 안쪽 40px 도 같은 전제에서 나온 값이다 — 폭 360px 카드에 사방 40px 이면 실제 입력
   영역이 280px 로 눌린다. 좁은 화면에서 더 심해서 한 단계 더 줄인다. */
#auth .sa-card{padding:24px 22px}
@media(max-width:420px){#auth .sa-card{padding:20px 18px}}
.hint{margin-top:14px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.7}

/* ── 상품 목록·수정 공용 조각 ─────────────────────────── */
/* .pname/.pid 는 product.php·products.php 가 공유하는 상품 이름 표기 */
.pname{font-weight:600}
.pid{color:var(--muted);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
/* .phead/.back 은 상품 수정(product.php)·운영자 상세(admin/tenant.php)가 함께 쓰는 상단 헤더 */
.phead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.phead h2{display:flex;align-items:center;gap:8px}
.back{display:inline-block;color:var(--muted);font-size:13px;font-weight:600}
.back:hover{color:var(--accent)}

/* 위험 구역 — 되돌릴 수 없는 삭제. product.php 의 작은 변형(.danger.sm)은 edit.css 에 있다 */
.danger{border:1px solid #f0cfcc;background:#fffafa;border-radius:var(--r);
  padding:16px 18px;margin-top:26px}
.danger h3{color:var(--danger-ink)}
.danger .sub{font-size:12px}
.danger .sub{margin-bottom:12px;max-width:60rem}

/* ── 목록/수정 공용 라벨 ──────────────────────────────── */
/* .ml 은 product.php·products.php 가 함께 쓰는 작은 라벨 스타일 */
.ml{font-size:12px;color:var(--muted);font-weight:700}

/* ── 설정 ─────────────────────────────────────────────── */
/* PC 는 좌우 2단 — 왼쪽은 고치는 것(폼), 오른쪽은 읽는 것(계정·요금제).
   위아래로 쌓으면 화면 오른쪽이 통째로 비고, 읽기만 하는 정보를 보려고 폼을 지나쳐야 한다.
   좁아지면 1단으로 접힌다. align-items:start 라 두 단의 높이가 서로를 늘리지 않는다. */
.setgrid{display:grid;gap:16px}
.setcol{display:grid;gap:16px;align-content:start;min-width:0}
@media(min-width:900px){
  .setgrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
}
/* 카드가 단 폭을 채우게 둔다 — 520px 상한은 한 단으로 길게 늘어지던 시절의 값이다. */
.setform{max-width:none}
.setsave{margin-top:2px}
.setform label{display:grid;grid-template-columns:9rem 1fr;align-items:center;gap:10px;
  margin-top:10px}
.setform label>span{font-size:13px;color:var(--muted);font-weight:600}
.setform label.bad input{border-color:var(--danger);background:#fff7f6}
.setform .sub{margin-top:2px}
.kv{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.kv li{display:grid;grid-template-columns:6rem auto;align-items:baseline;gap:10px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.kv li:last-child{border-bottom:0;padding-bottom:0}
.kv li>span:first-child{font-size:12px;color:var(--muted);font-weight:700}
.kv li b{font-variant-numeric:tabular-nums}
.kv .sub{grid-column:2;margin:0}

/* 최근 번호 변경 이력 — 계정 카드의 읽기 전용 꼬리. 낯선 변경을 눈에 걸리게 하는 것이 목적이라
   요약 정보(시각·번호·접속지)를 한 줄에 붙여 둔다. */
.phonelog{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.phonelog h3{margin:0 0 8px;font-size:12px;color:var(--muted);font-weight:700}
.phonelog ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.phonelog li{display:grid;gap:2px;font-size:13px}
.phonelog .when{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.phonelog b{font-variant-numeric:tabular-nums}
.phonelog .sub{margin:0}

/* 번호 변경 — 평소엔 접혀 있고, 펼치면 인증 위젯이 카드 안에 들어앉는다. */
.phonechg{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.phonechg summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.phonechg summary::-webkit-details-marker{display:none}
.phonechg summary::before{content:'▸';color:var(--muted);font-size:11px}
.phonechg[open] summary::before{content:'▾'}
.phonechg summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.phonechg .sub{margin:8px 0 10px}

/* 동작 최소화 환경 — 전환·애니메이션을 사실상 끈다(list.css/edit.css 의 transition도 포함) */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;
    animation-iteration-count:1 !important;scroll-behavior:auto !important}
}