/* ============================================================
   솜씨 리셀러 — 공용 스타일 (CORE 전용 파일. 모듈 스타일은 assets/css/<module>.css 를 $assets 로 더한다)
   somssii 의 자매 사이트: 종이(#fafafa) 위 잉크(#1a1a1a), 포인트 #a33, 본문 Pretendard, 숫자 Space Mono.
   B2B 대시보드라 손글씨 글꼴·흔들림 필터는 쓰지 않는다. 클래스 이름은 somssii admin.css 와 같다.

   주요 클래스
   레이아웃   .admin-header .admin-side .admin-main .admin-content (관리자·대시보드 공용) · .pub-* · .store-* · .container
   머리       .page-head(h1 + p + .page-head__actions) · .crumbs
   카드       .card > .card__head(h2 + .right) / .card__body / .card__foot
   타일       .stat-grid > .stat-tile(.stat-tile--accent) > .k .v .d
   표         .table-wrap > table.admin (td.num, td.actions) · .empty
   배지       badge() → .badge.badge--ok|warn|err|info|muted|ink
   알림       .alert.alert--success|error|info · .banner.banner--danger|info
   버튼       .btn(.btn--primary|ghost|danger|sm|block)
   폼         .form-grid(.col-full) > .form-row > label + .form-input/.form-select/.form-textarea + .help + .fe · .check-row
   목록       .filterbar · .pagination · dl.kv · .codeblock · .split-2 · .stack · .row · .muted · .num · .mono
   공개       .hero · .feature-grid > .feature · .steps > .step · .notice · .prose · .auth-box
   관리자 로그인 .auth-layout > .auth-brand-panel + .auth-form-panel > .auth-card
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --paper:#fafafa; --paper-2:#f4f1ea; --panel:#ffffff;
  --ink:#1a1a1a; --ink-2:#333333; --ink-soft:#565049; --ink-faint:#8c857b; --ink-ghost:#b9b2a6;
  --line:rgba(26,26,26,.22); --line-2:rgba(26,26,26,.12); --line-strong:rgba(26,26,26,.5);
  --accent:#a33; --accent-hover:#8f2b2b;
  --ok:hsl(130 26% 33%); --warn:hsl(38 67% 36%); --err:#a33; --info:hsl(217 41% 39%);
  --body:'Pretendard','Inter',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --mono:'Space Mono','Courier New',monospace;
  --rad-btn:999px; --rad-input:10px; --rad-card:14px; --rad-alert:12px;
  --shadow-card:5px 6px 0 rgba(26,26,26,.06);
  --header-h:60px; --side-w:240px; --gap:16px; --t-fast:.2s;
  --brand:var(--ink);
}

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:rgba(26,26,26,.12) }
body{background:var(--paper);color:var(--ink);font:15px/1.7 var(--body)}
body{ letter-spacing:-.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; min-height:100vh }
a{ color:inherit; text-decoration:none }
a:hover{ color:var(--ink) }
img,svg{ display:block; max-width:100% }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
h1,h2,h3,h4{ font-weight:700; line-height:1.3; letter-spacing:-.01em }
h1{ font-size:1.6rem } h2{ font-size:1.15rem } h3{ font-size:1rem }
p{ margin:0 }
ul,ol{ list-style:none }
::selection{ background:var(--ink); color:var(--paper) }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:4px }
h1,h2,h3,h4,p,li,label,button,a,td,th{ word-break:keep-all; overflow-wrap:break-word }
td.num,th,.num,.mono,pre,code{ word-break:normal }

.mono,.num,code,kbd{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.muted{ color:var(--ink-faint) }
.soft{ color:var(--ink-soft) }
.text-right{ text-align:right }
.text-center{ text-align:center }
.nowrap{ white-space:nowrap }
.neg,.is-negative{ color:var(--err) }
.pos{ color:var(--ok) }
.hidden,[hidden]{ display:none !important }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--paper); padding:.5rem 1rem }
.skip-link:focus{ left:1rem; top:1rem }
.mt-1{ margin-top:.5rem } .mt-2{ margin-top:1rem } .mt-3{ margin-top:1.6rem }
.mb-1{ margin-bottom:.5rem } .mb-2{ margin-bottom:1rem } .mb-3{ margin-bottom:1.6rem }
.stack > * + *{ margin-top:1rem }
.row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.row--end{ justify-content:flex-end }
.inline-form{ display:inline-flex; align-items:center; gap:.4rem; margin:0 }
.container{ width:100%; max-width:none; margin:0 auto; padding:0 clamp(20px,4vw,64px) }   /* 2026-10-05 풀 폭(좌우 여백만) */

/* ── 브랜드 마크 ─────────────────────────────────────────── */
.brand-mark{ display:inline-grid; place-items:center; width:2rem; height:2rem; flex-shrink:0; border-radius:9px;
  background:var(--ink); color:var(--paper); font:700 1rem/1 var(--mono) }

/* ── 버튼 ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font:600 .9375rem/1.2 var(--body); padding:10px 20px; min-height:42px; white-space:nowrap;
  border:1.5px solid var(--ink); border-radius:var(--rad-btn);
  background:var(--panel); color:var(--ink); text-decoration:none;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover{ background:var(--paper-2); color:var(--ink) }
.btn:active{ transform:translateY(1px) }
.btn--primary{ background:var(--ink); color:var(--paper) }
.btn--primary:hover{ background:var(--ink-2); color:var(--paper) }
.btn--ghost{ background:var(--panel); color:var(--ink) }
.btn--danger{ background:var(--accent); border-color:var(--accent); color:#fff }
.btn--danger:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff }
.btn--sm{ padding:6px 14px; min-height:34px; font-size:.875rem }
.btn--block{ width:100% }
.btn:disabled,.btn[aria-disabled=true],.btn.is-loading{ opacity:.5; cursor:not-allowed; transform:none }
.link{ color:var(--ink); border-bottom:1px solid var(--line-strong) }
.link:hover{ border-bottom-color:var(--ink) }

/* ── 폼 ──────────────────────────────────────────────────── */
.form-input,.form-select,.form-textarea{
  width:100%; font:inherit; font-size:.9375rem; padding:10px 13px; min-height:44px;
  color:var(--ink); background:var(--panel);
  border:1.5px solid var(--ink); border-radius:var(--rad-input); outline:none;
  transition:box-shadow var(--t-fast);
}
.form-select{ -webkit-appearance:none; appearance:none; padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat }
.form-textarea{ min-height:8rem; resize:vertical; line-height:1.7 }
.form-input:focus,.form-select:focus,.form-textarea:focus{ box-shadow:0 0 0 3px rgba(26,26,26,.12) }
.form-input::placeholder,.form-textarea::placeholder{ color:var(--ink-ghost) }
.form-input[aria-invalid=true],.form-select[aria-invalid=true],.form-textarea[aria-invalid=true]{ border-color:var(--err) }
.form-input[readonly],.form-input:disabled{ background:var(--paper-2); color:var(--ink-soft) }
input[type=color].form-input{ padding:4px; width:4rem }
.form-row{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem }
.form-row > label{ font-weight:600; font-size:.9rem; color:var(--ink) }
.form-row .help,.help{ font-size:.8rem; color:var(--ink-faint); line-height:1.6 }
.form-row .fe,.fe{ font-size:.8125rem; color:var(--err) }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.25rem }
.form-grid .col-full{ grid-column:1 / -1 }
.form-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem }
.check-row{ display:flex; align-items:flex-start; gap:.55rem; font-size:.9375rem; min-height:40px; padding:.35rem 0 }
.check-row input{ width:1.15rem; height:1.15rem; margin-top:.25rem; accent-color:var(--ink); flex-shrink:0 }
.input-group{ display:flex; gap:.5rem; align-items:stretch }
.input-group > .form-input{ flex:1 }

/* ── 관리자·대시보드 셸 ──────────────────────────────────── */
.admin-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:60;
  background:rgba(250,250,250,.94); backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:.9rem; padding:0 1.1rem; border-bottom:1px solid var(--line-2);
}
.admin-header__brand{ display:flex; align-items:center; gap:.6rem; width:calc(var(--side-w) - 1.1rem); flex-shrink:0; min-width:0 }
.admin-header__brand b{ display:block; font-size:1.02rem; line-height:1.1 }
.admin-header__brand small{ display:block; font:700 .6rem/1 var(--mono); letter-spacing:.22em; color:var(--ink-faint); margin-top:3px }
.admin-header__spacer{ flex:1 }
.admin-header__link{ font-size:.9rem; color:var(--ink-2); padding:.45rem .7rem; border-radius:10px; min-height:40px; display:inline-flex; align-items:center }
.admin-header__link:hover{ background:rgba(26,26,26,.06); color:var(--ink) }
.admin-header__user{ display:flex; align-items:center; gap:.4rem; padding-left:.8rem; border-left:1px solid var(--line-2) }
.admin-header__name{ font-weight:600; font-size:.9rem; max-width:16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; gap:.4rem; align-items:center }
.admin-header__balance{ display:inline-flex; align-items:baseline; gap:.45rem; padding:.35rem .8rem; border:1.5px solid var(--ink); border-radius:var(--rad-btn) }
.admin-header__balance .k{ font-size:.75rem; color:var(--ink-faint) }
.admin-header__balance .v{ font:700 .9rem/1 var(--mono); font-variant-numeric:tabular-nums }
.admin-header__balance.is-negative{ border-color:var(--err); color:var(--err) }
.admin-burger{ display:none; width:42px; height:42px; border:1.5px solid var(--ink); border-radius:10px; align-items:center; justify-content:center }

.admin-side{
  position:fixed; top:var(--header-h); bottom:0; left:0; width:var(--side-w); z-index:55;
  background:var(--paper); overflow-y:auto; padding:1rem .7rem 2.5rem; border-right:1px solid var(--line-2);
}
.admin-side__group{ margin-top:1.2rem }
.admin-side__group:first-child{ margin-top:0 }
.admin-side__label{ font:700 .62rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  padding:0 .7rem; margin-bottom:.45rem }
.admin-side a{
  display:flex; align-items:center; gap:.65rem; padding:.5rem .7rem; min-height:40px; margin-bottom:2px;
  font-size:.92rem; color:var(--ink-2); border-radius:10px; transition:background var(--t-fast), color var(--t-fast);
}
.admin-side a:hover{ background:rgba(26,26,26,.055); color:var(--ink) }
.admin-side a.is-on{ background:var(--ink); color:var(--paper) }
.admin-side a .ico{ width:1.05rem; height:1.05rem; flex-shrink:0; opacity:.75 }
.admin-side a.is-on .ico{ opacity:1 }
.admin-side a .cnt{ margin-left:auto; font:700 .65rem/1 var(--mono); padding:.2rem .45rem; border:1.5px solid var(--accent);
  border-radius:20px; color:var(--accent); background:var(--paper) }
.admin-side a.is-on .cnt{ border-color:var(--paper) }
.admin-overlay{ position:fixed; inset:0; background:rgba(26,26,26,.34); z-index:54; opacity:0; visibility:hidden; transition:opacity .25s }
body.side-open .admin-overlay{ opacity:1; visibility:visible }

.admin-main{ margin-top:var(--header-h); margin-left:var(--side-w); min-height:calc(100vh - var(--header-h)) }
.admin-content{ width:100%; max-width:none; padding:1.6rem clamp(1rem,2.2vw,2.4rem) 4rem }   /* 2026-10-05 풀 폭 */

.page-head{ display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; padding-bottom:.9rem; border-bottom:1.5px solid var(--line) }
.page-head h1{ font-size:1.6rem }
.page-head p{ font-size:.9rem; color:var(--ink-soft); margin-top:.3rem }
.page-head__actions{ margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap }
.crumbs{ font:.72rem/1.4 var(--mono); letter-spacing:.04em; color:var(--ink-faint); margin-bottom:.5rem }
.crumbs a{ border-bottom:1px solid var(--line) }

/* ── 배너(관리자 초기 비밀번호 등) ───────────────────────── */
.banner{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.8rem 1.1rem; margin-bottom:1.1rem; border-radius:var(--rad-alert) }
.banner--danger{ background:var(--accent); color:#fff }
.banner--danger .btn{ border-color:#fff }
.banner--info{ border:1.5px dashed var(--ink-faint); color:var(--ink-2) }

/* ── 카드 ────────────────────────────────────────────────── */
.card{ background:var(--panel); border:1.5px solid var(--ink); border-radius:var(--rad-card); width:100%;
  box-shadow:var(--shadow-card); margin-bottom:1.2rem }
.card__head{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.9rem 1.2rem; border-bottom:1px solid var(--line) }
.card__head h2{ font-size:1.05rem }
.card__head .right{ margin-left:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.card__body{ padding:1.2rem }
.card__foot{ padding:.9rem 1.2rem; border-top:1.5px dashed var(--line); display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap }
.card > .table-wrap:last-child{ border-radius:0 0 var(--rad-card) var(--rad-card) }

/* ── 통계 타일 ───────────────────────────────────────────── */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--gap); margin-bottom:1.5rem }
.stat-tile{ background:var(--panel); border:1.5px solid var(--ink); border-radius:var(--rad-card); padding:1.1rem 1.2rem; min-width:0 }
.stat-tile .k{ font-size:.85rem; color:var(--ink-soft) }
.stat-tile .v{ font:700 1.8rem/1.15 var(--mono); font-variant-numeric:tabular-nums; margin-top:.3rem; overflow-wrap:anywhere }
.stat-tile .d{ font:.72rem/1.4 var(--mono); color:var(--ink-faint); margin-top:.35rem }
.stat-tile--accent{ background:var(--ink); color:var(--paper) }
.stat-tile--accent .k{ color:rgba(250,250,250,.82) }
.stat-tile--accent .d{ color:rgba(250,250,250,.6) }
a.stat-tile:hover{ background:var(--paper-2) }
a.stat-tile--accent:hover{ background:var(--ink-2); color:var(--paper) }

/* ── 표 ──────────────────────────────────────────────────── */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
table.admin{ width:100%; border-collapse:collapse; min-width:640px }
table.admin th,table.admin td{ text-align:left; padding:.7rem .9rem; border-bottom:1px dashed var(--line); font-size:.875rem; vertical-align:middle }
table.admin th{ font-weight:600; font-size:.8125rem; color:var(--ink-soft); background:rgba(26,26,26,.03); white-space:nowrap }
table.admin tbody tr:hover{ background:rgba(26,26,26,.025) }
table.admin tr:last-child td{ border-bottom:0 }
table.admin td.num,table.admin th.num{ font-family:var(--mono); font-size:.8rem; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap }
table.admin td.actions{ text-align:right; white-space:nowrap }
table.admin td.actions .inline-form + .inline-form{ margin-left:.3rem }
table.admin .thumb{ width:46px; height:46px; object-fit:cover; border:1px solid var(--line); border-radius:8px }
.empty{ padding:2.6rem 1rem; text-align:center; color:var(--ink-faint); font-size:.95rem }

/* ── 배지 ────────────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:.3rem; font:700 .7rem/1.2 var(--mono); letter-spacing:.04em;
  padding:.22rem .6rem; border:1px solid var(--line-strong); border-radius:20px; color:var(--ink-2); background:transparent; white-space:nowrap }
.badge--ok{ border-color:var(--ok); color:var(--ok) }
.badge--warn{ border-color:var(--warn); color:var(--warn) }
.badge--err{ border-color:var(--err); color:var(--err) }
.badge--info{ border-color:var(--info); color:var(--info) }
.badge--ink{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.badge--muted{ border-style:dashed; border-color:var(--ink-faint); color:var(--ink-faint) }

/* ── 알림 ────────────────────────────────────────────────── */
.alert{ display:flex; gap:.6rem; align-items:flex-start; padding:.8rem 1.1rem; margin-bottom:1rem;
  border:1.5px solid var(--ink); border-radius:var(--rad-alert); background:var(--panel); font-size:.9375rem }
.alert--success{ background:var(--ink); color:var(--paper) }
.alert--error{ border-color:var(--accent); color:var(--accent) }
.alert--info{ border-style:dashed; color:var(--ink-2) }
.notice{ padding:.8rem 1rem; border-left:3px solid var(--ink); background:var(--paper-2); border-radius:0 var(--rad-alert) var(--rad-alert) 0; font-size:.9rem; color:var(--ink-2) }

/* ── 필터바 · 페이지 ─────────────────────────────────────── */
.filterbar{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1.1rem }
.filterbar .form-input,.filterbar .form-select{ width:auto; min-width:170px; min-height:40px; padding-top:.45rem; padding-bottom:.45rem }
.filterbar input[type=date].form-input{ min-width:150px }
.pagination{ display:flex; gap:.35rem; justify-content:center; align-items:center; flex-wrap:wrap; padding:1.2rem }
.pagination a,.pagination span{ min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center;
  padding:.4rem .7rem; border:1px solid var(--line-strong); border-radius:10px; font:.8rem/1 var(--mono); color:var(--ink-2) }
.pagination a:hover{ background:rgba(26,26,26,.05); color:var(--ink) }
.pagination .is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.pagination .is-off{ opacity:.4 }
.pagination .pagination__total{ border:0; min-width:0; color:var(--ink-faint) }

/* ── 상세 정보 · 코드 · 2단 ──────────────────────────────── */
dl.kv{ display:grid; grid-template-columns:minmax(110px,180px) minmax(0,1fr); gap:.55rem 1rem; font-size:.9rem }
dl.kv dt{ color:var(--ink-faint) }
dl.kv dd{ min-width:0; overflow-wrap:anywhere }
.codeblock{ font:.8rem/1.6 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; background:var(--paper-2);
  border:1px solid var(--line-2); border-radius:10px; padding:.9rem 1rem; max-height:32rem; overflow:auto }
.split-2{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1.1rem; align-items:start }
.split-2 > *{ min-width:0 }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem }
.progress{ height:8px; border-radius:8px; background:var(--paper-2); overflow:hidden }
.progress > span{ display:block; height:100%; background:var(--brand); transition:width .4s }

/* ── 공개 사이트 ─────────────────────────────────────────── */
.pub-header{ position:sticky; top:0; z-index:40; background:rgba(250,250,250,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-2) }
.pub-header__inner{ display:flex; align-items:center; gap:1rem; min-height:var(--header-h) }
.pub-brand{ display:flex; align-items:center; gap:.6rem }
.pub-brand b{ display:block; font-size:1.05rem; line-height:1.1 }
.pub-brand small{ display:block; font:700 .58rem/1 var(--mono); letter-spacing:.2em; color:var(--ink-faint); margin-top:3px }
.pub-nav{ margin-left:auto; display:flex; align-items:center; gap:.4rem }
.pub-nav__link{ padding:.5rem .8rem; min-height:40px; display:inline-flex; align-items:center; font-size:.92rem; color:var(--ink-2); border-radius:10px }
.pub-nav__link:hover{ background:rgba(26,26,26,.06) }
.pub-main{ padding:1.6rem 0 4rem; min-height:60vh }
.pub-footer{ border-top:1px solid var(--line-2); padding:2rem 0 2.6rem; font-size:.8rem; color:var(--ink-faint); background:var(--paper) }
.pub-footer__links{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem; color:var(--ink-2) }
.pub-footer__links a:hover{ text-decoration:underline }
.pub-footer__biz{ line-height:1.8 }
.pub-footer__copy{ margin-top:.6rem; font-family:var(--mono) }

.hero{ padding:3.2rem 0 2.4rem }
.hero__kicker{ font:700 .72rem/1 var(--mono); letter-spacing:.2em; color:var(--accent); text-transform:uppercase }
.hero__title{ font-size:clamp(1.7rem,4.2vw,2.6rem); line-height:1.25; margin-top:.8rem; max-width:22em }
.hero__lead{ font-size:1.05rem; color:var(--ink-soft); margin-top:1rem; max-width:40em }
.hero__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem }
.section{ padding:2rem 0 }
.section__title{ font-size:1.25rem; margin-bottom:1rem }
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap) }
.feature{ background:var(--panel); border:1.5px solid var(--ink); border-radius:var(--rad-card); padding:1.2rem; box-shadow:var(--shadow-card) }
.feature h3{ font-size:1.02rem; margin-bottom:.4rem }
.feature p{ font-size:.9rem; color:var(--ink-soft) }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--gap); counter-reset:step }
.step{ position:relative; padding:1rem 1rem 1rem 3.2rem; border:1px dashed var(--line-strong); border-radius:var(--rad-card); background:var(--panel) }
.step::before{ counter-increment:step; content:counter(step); position:absolute; left:1rem; top:1rem; width:1.6rem; height:1.6rem;
  display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper); font:700 .8rem/1 var(--mono) }
.prose{ max-width:46em; font-size:.95rem; line-height:1.85; color:var(--ink-2) }
.prose h1{ margin-bottom:1rem } .prose h2{ margin:1.6rem 0 .6rem } .prose p + p{ margin-top:.8rem }
.auth-box{ width:100%; max-width:440px; margin:1.5rem auto; background:var(--panel); border:1.5px solid var(--ink);
  border-radius:var(--rad-card); padding:clamp(22px,4vw,36px); box-shadow:var(--shadow-card) }
.auth-box h1{ font-size:1.4rem; margin-bottom:.4rem }
.auth-box .sub{ color:var(--ink-soft); font-size:.9rem; margin-bottom:1.3rem }
.auth-box .links{ display:flex; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-top:1.1rem; font-size:.875rem; color:var(--ink-soft) }

/* ── 관리자 로그인(2단) ──────────────────────────────────── */
.auth-layout{ display:flex; min-height:100vh; min-height:100svh }
.auth-brand-panel{ flex:1; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:3rem; position:relative; overflow:hidden }
.auth-brand-panel::after{ content:""; position:absolute; inset:24px; border:1.5px dashed rgba(250,250,250,.16); border-radius:20px; pointer-events:none }
.auth-brand-title{ font-size:2rem; font-weight:700; line-height:1.2 }
.auth-brand-subtitle{ font:700 .7rem/1 var(--mono); letter-spacing:.2em; color:rgba(250,250,250,.6); margin-top:.7rem }
.auth-brand-points{ margin-top:2rem; display:flex; flex-direction:column; gap:.6rem; color:rgba(250,250,250,.8); font-size:.95rem }
.auth-form-panel{ flex:1; display:flex; align-items:center; justify-content:center; padding:2rem }
.auth-card{ width:100%; max-width:420px; background:var(--panel); border:1.5px solid var(--ink); border-radius:var(--rad-card); padding:clamp(24px,4vw,38px); box-shadow:var(--shadow-card) }
.auth-title{ font-size:1.5rem; text-align:center }
.auth-subtitle{ font-size:.9rem; text-align:center; color:var(--ink-soft); margin:.4rem 0 1.5rem }

/* ── 스토어(화이트라벨) — 버튼·링크는 --brand ───────────── */
.store-header{ background:var(--panel); border-bottom:3px solid var(--brand) }
.store-header__inner{ display:flex; align-items:center; gap:1rem; min-height:64px; flex-wrap:wrap }
.store-brand{ display:flex; align-items:center; min-height:44px }
.store-logo{ max-height:44px; width:auto; max-width:200px; object-fit:contain }
.store-brand__text{ font-size:1.2rem; font-weight:700; color:var(--brand) }
.store-nav{ margin-left:auto; display:flex; align-items:center; gap:.3rem; flex-wrap:wrap }
.store-nav a,.store-nav__btn{ padding:.5rem .8rem; min-height:40px; display:inline-flex; align-items:center; font-size:.92rem; border-radius:10px; color:var(--ink-2) }
.store-nav a:hover,.store-nav__btn:hover{ background:rgba(26,26,26,.06); color:var(--ink) }
.store-main{ padding:1.6rem 0 4rem; min-height:60vh }
.store-footer{ border-top:1px solid var(--line-2); padding:1.6rem 0 2.2rem; font-size:.82rem; color:var(--ink-faint); text-align:center }
.store-footer p + p{ margin-top:.3rem }
.store .btn--primary,.store .store-nav .btn--primary{ background:var(--brand); border-color:var(--brand); color:#fff }
.store .btn--primary:hover{ filter:brightness(.92); color:#fff }
.store .btn--ghost{ border-color:var(--brand); color:var(--brand) }
.store .link,.store .prose a{ color:var(--brand); border-bottom-color:var(--brand) }
.store .form-input:focus,.store .form-select:focus,.store .form-textarea:focus{ border-color:var(--brand) }
.store .stat-tile--accent{ background:var(--brand); border-color:var(--brand) }
.store .check-row input{ accent-color:var(--brand) }

/* ── 오류 화면 ───────────────────────────────────────────── */
.error-page{ text-align:center; padding:3.5rem 20px 4rem }
.error-page__code{ font:700 3.2rem/1 var(--mono); color:var(--ink-ghost) }
.error-page__title{ font-size:1.3rem; margin-top:1rem }
.error-page__msg{ color:var(--ink-soft); margin:.6rem 0 1.4rem }
.error-page .codeblock{ text-align:left; margin:1rem auto; max-width:900px }

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width:1100px){ .split-2{ grid-template-columns:1fr } }
@media (max-width:992px){
  .admin-side{ transform:translateX(-100%); transition:transform .25s ease; border-right:1.5px solid var(--ink); box-shadow:none }
  body.side-open .admin-side{ transform:none; box-shadow:8px 0 24px rgba(26,26,26,.12) }
  body.side-open{ overflow:hidden }
  .admin-main{ margin-left:0 }
  .admin-burger{ display:inline-flex }
  .admin-header__brand{ width:auto }
}
@media (max-width:768px){
  .form-grid,.grid-2{ grid-template-columns:1fr }
  .filterbar{ flex-direction:column; align-items:stretch }
  .filterbar .form-input,.filterbar .form-select,.filterbar .btn{ width:100%; min-width:0 }
  .page-head{ flex-direction:column; align-items:flex-start }
  .page-head__actions{ margin-left:0 }
  .admin-content{ padding:1.1rem 1rem 3rem }
  .page-head h1{ font-size:1.35rem }
  .admin-header{ gap:.5rem; padding:0 .7rem }
  .admin-header__brand small,.admin-header__name{ display:none }
  .admin-header__user{ padding-left:.4rem }
  .admin-header__balance .k{ display:none }
  .auth-brand-panel{ display:none }
  .auth-form-panel{ padding:1.4rem 1rem }
  .hero{ padding:2rem 0 1.6rem }
  dl.kv{ grid-template-columns:1fr; gap:.15rem }
  dl.kv dd{ margin-bottom:.5rem }
  /* iOS 는 16px 미만 입력에 포커스하면 확대한다 */
  .form-input,.form-select,.form-textarea{ font-size:16px }
}
@media (max-width:560px){
  body{ font-size:14px }
  .container{ padding:0 16px }
  .stat-grid{ grid-template-columns:1fr }
  .stat-tile .v{ font-size:1.5rem }
  form .form-actions .btn,.auth-box .btn,.auth-card .btn,.card__body form > .btn{ width:100% }
  .pub-brand small{ display:none }
  .card__head,.card__body{ padding-left:1rem; padding-right:1rem }
  .pagination a,.pagination span{ min-width:36px; padding:.35rem .5rem }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}
@media print{
  .admin-header,.admin-side,.admin-overlay,.pub-header,.pub-footer,.store-header,.store-footer,.pagination,.btn{ display:none !important }
  .admin-main{ margin:0 }
}

/* ── 2026-10-05 풀 폭 보정: 공개 화면 머리 메뉴(데스크톱만 안쪽 링크) · 글 폭은 읽기 좋게 유지 ── */
.pub-nav__anchors{ display:flex; gap:.2rem; margin-right:.6rem }
.prose{ max-width:52em }
@media (max-width:860px){ .pub-nav__anchors{ display:none } }
@media (max-width:480px){ .pub-brand small{ display:none } .pub-nav{ gap:.25rem } .pub-nav__link{ padding:.4rem .5rem } }
/* 관리자·대시보드 숫자 타일 — 휴대폰에서도 두 칸(한 칸씩이면 첫 화면이 타일로 다 찬다) */
@media (max-width:768px){ .stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px } .stat-tile{ padding:.85rem .9rem } .stat-tile .v{ font-size:1.3rem } }

/* ── 사이드 메뉴 1차·2차(2026-10-05) — 1차 = 그룹(펼침/접힘, <details>), 2차 = 항목. 항목 하나뿐인 그룹은 1차 링크 ── */
.admin-side--tree{ padding-top:.8rem }
.admin-side__top{ display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; min-height:42px; margin-bottom:2px; border-radius:10px;
  font-size:.93rem; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; transition:background var(--t-fast), color var(--t-fast) }
summary.admin-side__top::-webkit-details-marker{ display:none }
summary.admin-side__top::marker{ content:"" }
.admin-side__top:hover{ background:rgba(26,26,26,.055) }
.admin-side__top .ico{ width:1.1rem; height:1.1rem; flex-shrink:0; opacity:.8 }
.admin-side__top .chev{ width:15px; height:15px; margin-left:auto; flex-shrink:0; opacity:.5; transition:transform .2s }
.admin-side__top .cnt + .chev{ margin-left:.45rem }
.admin-side__grp[open] > .admin-side__top .chev{ transform:rotate(180deg) }
.admin-side__grp[open] > .admin-side__top .cnt--sum{ display:none }
.admin-side a.admin-side__top{ font-weight:600; color:var(--ink) }
.admin-side a.admin-side__top.is-on{ background:var(--ink); color:var(--paper) }
.admin-side summary .cnt{ margin-left:auto; font:700 .65rem/1 var(--mono); padding:.2rem .45rem; border:1.5px solid var(--accent); border-radius:20px; color:var(--accent); background:var(--paper) }
.admin-side__sub{ margin:2px 0 8px 1.25rem; padding-left:.6rem; border-left:1.5px solid var(--line-2) }
.admin-side__sub a{ min-height:36px; padding:.42rem .7rem; font-size:.885rem; color:var(--ink-soft) }
.admin-side__sub a.is-on{ font-weight:600 }

/* 도메인 신청 — 4단계 안내(2026-10-05) */
.dr-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 1.2rem; counter-reset:drs }
.dr-steps li{ position:relative; padding:.8rem .9rem .8rem 2.8rem; border:1px dashed var(--line-strong); border-radius:var(--rad-card); background:var(--panel) }
.dr-steps li::before{ counter-increment:drs; content:counter(drs); position:absolute; left:.85rem; top:.85rem; width:1.4rem; height:1.4rem; display:grid; place-items:center;
  border-radius:50%; background:var(--ink); color:var(--paper); font:700 .75rem/1 var(--mono) }
.dr-steps b{ display:block; font-size:.92rem }
.dr-steps span{ display:block; font-size:.8rem; color:var(--ink-soft) }
.dr-tabs{ flex-wrap:wrap }
@media (max-width:768px){ .dr-steps{ grid-template-columns:1fr 1fr } .dr-tabs{ flex-direction:row !important } }