@charset "utf-8";
/* ==========================================================
   배네타 통합 플랫폼 — 공통 디자인 시스템 (PHASE 1 기초)
   - 색·간격·모서리는 :root 토큰만 바꾸면 전체 반영
   - 브랜드 색은 기존 "배네타 더 하이브" 토큰(아이보리·브론즈·에스프레소)을 이어받음
   - 모바일 우선. 640px / 960px 에서 넓어짐
   - 서비스별 개성은 body.svc-<코드> 에서 --c-brand 계열만 바꾼다
   ========================================================== */
:root {
  /* 원본 팔레트 */
  --ivory: #FBF5EF;
  --ivory-2: #F5EBE0;
  --sand: #EFE2D7;
  --sand-line: #DBC8B7;
  --bronze: #7E6445;
  --bronze-d: #5E4A33;
  --bronze-l: #B09982;
  --espresso: #221C15;
  --ink-2: #4A3C2B;
  --muted: #6E6052;
  --accent: #8A3A1E;

  /* 의미 토큰 (화면은 이것만 쓴다) */
  --c-bg: var(--ivory);
  --c-surface: #FFFFFF;
  --c-surface-2: var(--ivory-2);
  --c-line: var(--sand-line);
  --c-text: var(--espresso);
  --c-text-2: var(--ink-2);
  --c-muted: var(--muted);
  --c-brand: var(--bronze);
  --c-brand-strong: var(--bronze-d);
  --c-on-brand: #FFFFFF;
  --c-accent: var(--accent);
  --c-success: #2F6B3F;
  --c-success-bg: #E7F1E8;
  --c-warning: #8A5A00;
  --c-warning-bg: #FBF0D9;
  --c-danger: #A1261B;
  --c-danger-bg: #FBE5E2;
  --c-info: #2D5576;
  --c-info-bg: #E5EEF5;
  --c-focus: var(--bronze);

  /* 크기 */
  --wrap: 1200px;
  --wrap-narrow: 720px;
  --gutter: 16px;
  --r: 6px;
  --r-lg: 12px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --tap: 48px; /* 최소 터치 영역 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --shadow: 0 1px 0 rgba(34,28,21,.04), 0 12px 32px -18px rgba(34,28,21,.25);
}
@media (min-width: 640px) { :root { --gutter: 24px; } }

/* 서비스별 강조색 (명도 대비 4.5:1 이상 확인한 값만 사용) */
body.svc-modoo { --c-brand: #6A4F2E; --c-brand-strong: #4F3A21; }
body.svc-unaging { --c-brand: #4D5B3A; --c-brand-strong: #3A4529; }
body.svc-linkinbio { --c-brand: #7A3F31; --c-brand-strong: #5C2E23; }
body.svc-admin { --c-brand: #3E3A35; --c-brand-strong: #2A2723; }

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--c-text); background: var(--c-bg); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--c-brand-strong); text-underline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: .9em; background: var(--c-surface-2); padding: 1px 6px; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--c-text); color: var(--c-bg); text-decoration: none; border-radius: var(--r); }
.skip:focus { top: 12px; }
.main { flex: 1 0 auto; outline: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }
.muted { color: var(--c-muted); }
.small { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- 글자 ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s-3); font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--c-brand); }
.kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.h-display { font-size: clamp(30px, 6vw, 56px); font-weight: 800; line-height: 1.25; letter-spacing: -.03em; }
.h-section { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; line-height: 1.35; letter-spacing: -.025em; margin-bottom: var(--s-4); }
.h-sub { font-size: 20px; font-weight: 700; line-height: 1.45; margin: var(--s-7) 0 var(--s-4); }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--c-text-2); margin-top: var(--s-3); }

/* ---------- 머리말·꼬리말 ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,245,239,.96); border-bottom: 1px solid var(--c-line); }
.site-header__inner { display: flex; align-items: center; gap: var(--s-3); min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--c-text); text-decoration: none; }
.brand__mark { width: 26px; height: 26px; color: var(--c-brand); }
.brand__word { font-weight: 800; letter-spacing: .2em; font-size: 15px; }
.site-header__svc { font-size: 14px; font-weight: 700; color: var(--c-brand-strong); padding-left: var(--s-3); border-left: 1px solid var(--c-line); }
.nav-btn { display: none; margin-left: auto; width: var(--tap); height: var(--tap); align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--r); cursor: pointer; }
.nav-btn__icon, .nav-btn__icon::before, .nav-btn__icon::after { display: block; width: 20px; height: 2px; background: var(--c-text); position: relative; content: ""; }
.nav-btn__icon::before { position: absolute; top: -6px; }
.nav-btn__icon::after { position: absolute; top: 6px; }
.nav-btn[aria-expanded="true"] .nav-btn__icon { background: transparent; }
.nav-btn[aria-expanded="true"] .nav-btn__icon::before { top: 0; transform: rotate(45deg); }
.nav-btn[aria-expanded="true"] .nav-btn__icon::after { top: 0; transform: rotate(-45deg); }
.site-header__inner { flex-wrap: wrap; }
.site-nav { width: 100%; }
.site-nav ul { padding: 0 0 var(--s-3); }
.site-nav a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-2); color: var(--c-text); text-decoration: none; font-weight: 600; border-radius: var(--r); }
.site-nav a[aria-current="page"] { color: var(--c-brand-strong); background: var(--c-surface-2); }
/* 스크립트가 있으면 모바일에서 메뉴를 접는다 (스크립트가 없으면 펼친 상태로 보임) */
.js .nav-btn { display: inline-flex; }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }
@media (min-width: 960px) {
  .site-header__inner { flex-wrap: nowrap; }
  .js .nav-btn { display: none; }
  .site-nav, .js .site-nav { display: block; width: auto; margin-left: auto; }
  .site-nav ul { display: flex; gap: var(--s-1); padding: 0; }
  .site-nav a { padding: 0 var(--s-3); }
}
.site-footer { margin-top: var(--s-8); border-top: 1px solid var(--c-line); padding: var(--s-6) 0; }
.site-footer__inner > * + * { margin-top: var(--s-2); }
.site-footer__brand { font-weight: 800; letter-spacing: .2em; }

/* ---------- 구역 ---------- */
.hero { padding: var(--s-7) 0 var(--s-6); }
.hero .notice { margin-top: var(--s-5); }
.section { padding: var(--s-7) 0; }
.section--alt { background: var(--c-surface-2); }
.grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 카드 ---------- */
.card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--c-brand); text-transform: uppercase; }
.card__title { font-size: 19px; font-weight: 700; line-height: 1.45; }
.card__body { color: var(--c-text-2); flex: 1; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.link-arrow { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; text-decoration: none; }
.link-arrow::after { content: "→"; margin-left: 6px; }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 22px; border: 1px solid transparent; border-radius: var(--r); font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s; }
.btn--primary { background: var(--c-brand-strong); color: var(--c-on-brand); }
.btn--primary:hover { background: var(--c-text); }
.btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-line); }
.btn--secondary:hover { border-color: var(--c-brand); }
.btn--ghost { background: none; color: var(--c-brand-strong); padding: 0 12px; }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn[disabled], .btn.is-loading { opacity: .55; cursor: not-allowed; }
.btn.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vp-spin .8s linear infinite; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ---------- 알림 ---------- */
.notice { padding: var(--s-3) var(--s-4); border-radius: var(--r); border-left: 4px solid; margin: var(--s-3) 0; }
.notice--info { background: var(--c-info-bg); border-color: var(--c-info); color: var(--c-info); }
.notice--success { background: var(--c-success-bg); border-color: var(--c-success); color: var(--c-success); }
.notice--warning { background: var(--c-warning-bg); border-color: var(--c-warning); color: var(--c-warning); }
.notice--error { background: var(--c-danger-bg); border-color: var(--c-danger); color: var(--c-danger); }

/* ---------- 상태 배지 ---------- */
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid; }
.badge--active { color: var(--c-success); background: var(--c-success-bg); border-color: currentColor; }
.badge--preparing { color: var(--c-warning); background: var(--c-warning-bg); border-color: currentColor; }
.badge--disabled { color: var(--c-muted); background: var(--c-surface-2); border-color: var(--c-line); }

/* ---------- 폼 ---------- */
.form { max-width: 560px; }
.field { margin: 0 0 var(--s-5); padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { display: block; margin-bottom: var(--s-2); font-weight: 700; padding: 0; }
.req { color: var(--c-danger); margin-left: 2px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"], .field input[type="number"], .field input[type="search"], .field input[type="date"], .field input[type="month"], .field input[type="url"], .field select, .field textarea {
  display: block; width: 100%; min-height: var(--tap); padding: 10px 14px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); font-size: 16px; }
.field textarea { min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-brand); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--c-danger); }
.field__help { margin-top: var(--s-1); font-size: 14px; color: var(--c-muted); }
.field__error { margin-top: var(--s-1); font-size: 14px; color: var(--c-danger); font-weight: 600; }
.field__error::before { content: "! "; }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--c-brand-strong); }

/* ---------- 표 ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.table thead th { background: var(--c-surface-2); font-size: 14px; color: var(--c-text-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 페이지 ---------- */
.pager { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-4); }
.pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--c-line); border-radius: var(--r); text-decoration: none; color: var(--c-text); background: var(--c-surface); }
.pager a[aria-current="page"] { background: var(--c-brand-strong); color: var(--c-on-brand); border-color: var(--c-brand-strong); }

/* ---------- 화면 상태 ---------- */
.state { padding: var(--s-8) 0; }
.state__code { font-size: 56px; font-weight: 800; color: var(--c-line); line-height: 1; margin-bottom: var(--s-3); }
.meta { display: grid; gap: var(--s-2); margin-top: var(--s-5); padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.meta div { display: flex; gap: var(--s-4); }
.meta dt { min-width: 80px; color: var(--c-muted); }
.meta dd { font-weight: 700; }
.empty { text-align: left; }
.skeleton { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--c-surface-2), var(--sand), var(--c-surface-2)); background-size: 200% 100%; animation: vp-shimmer 1.4s infinite; }
.skeleton--short { width: 60%; }
@keyframes vp-shimmer { to { background-position: -200% 0; } }
.debug { margin-top: var(--s-5); }
.debug pre { overflow: auto; padding: var(--s-4); background: var(--c-text); color: var(--c-bg); border-radius: var(--r); font-size: 12px; white-space: pre-wrap; }

/* ---------- 디자인 시스템 확인 화면 ---------- */
.swatches { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.swatches li { display: flex; flex-direction: column; gap: 4px; }
.swatch { display: block; height: 56px; border-radius: var(--r); border: 1px solid var(--c-line); }
.sw-bg { background: var(--c-bg); } .sw-surface { background: var(--c-surface); } .sw-line { background: var(--c-line); }
.sw-text { background: var(--c-text); } .sw-muted { background: var(--c-muted); } .sw-brand { background: var(--c-brand); }
.sw-brand-strong { background: var(--c-brand-strong); } .sw-accent { background: var(--c-accent); } .sw-success { background: var(--c-success); }
.sw-warning { background: var(--c-warning); } .sw-danger { background: var(--c-danger); } .sw-info { background: var(--c-info); }

@media print {
  .site-header, .site-footer, .skip, .actions { display: none !important; }
  body { background: #fff; }
}

/* ---------- 계정 화면 (PHASE 2) ---------- */
.wrap--auth { max-width: calc(480px + var(--gutter) * 2); }
.auth .h-section { margin-bottom: var(--s-3); }
.auth .form { margin-top: var(--s-5); }
.auth__links { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-5); color: var(--c-muted); }
.auth__links a { display: inline-flex; align-items: center; min-height: 44px; }
.btn--block { width: 100%; }
.u-space { margin-top: var(--s-4); }
.bullets { list-style: disc; padding-left: 1.2em; margin-top: var(--s-2); }
.bullets li + li { margin-top: 4px; }
.agree-box { padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.agree-summary { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-3); margin: var(--s-3) 0; padding: var(--s-3); background: var(--c-surface-2); border-radius: var(--r); font-size: 14px; color: var(--c-text-2); }
.agree-summary dt { font-weight: 700; }
.tabs { margin: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--c-line); overflow-x: auto; }
.tabs ul { display: flex; gap: var(--s-1); }
.tabs a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); color: var(--c-text-2); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; }
.tabs a[aria-current="page"] { color: var(--c-brand-strong); border-bottom-color: var(--c-brand-strong); }
.device-list { display: grid; gap: var(--s-3); }
.device-list form { margin-top: var(--s-2); }
.inline-form { display: flex; margin: 0; }
.linklike { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-2); background: none; border: 0; color: var(--c-text); font-weight: 600; cursor: pointer; border-radius: var(--r); }
.site-nav__util { border-top: 1px solid var(--c-line); padding-top: var(--s-2) !important; }
@media (min-width: 960px) {
  .site-nav { display: flex !important; align-items: center; gap: var(--s-4); }
  .site-nav__util { border-top: 0; border-left: 1px solid var(--c-line); padding: 0 0 0 var(--s-3) !important; }
}

/* ---------- 통합 관리자 (PHASE 3) ---------- */
.admin-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); min-height: 60px; padding: 0 var(--gutter); }
.admin-wrap { max-width: 1280px; margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-8); }
.admin-main .h-section { margin-bottom: var(--s-3); }
.admin-main .h-sub { margin-top: var(--s-6); }
.admin .site-nav a, .admin .site-nav .linklike { white-space: nowrap; }
.admin-me { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.admin .brand, .admin .site-header__svc { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1199px) {
  /* 관리자 메뉴가 많아 1200px 미만에서는 접는 메뉴 유지 */
  .js .admin .nav-btn { display: inline-flex; }
  .js .admin .site-nav { display: none !important; }
  .js .admin .site-nav.is-open { display: block !important; width: 100%; margin-left: 0; }
  .admin .site-nav ul { display: block; padding: 0 0 var(--s-2); }
  .admin .site-nav__util { border-left: 0; border-top: 1px solid var(--c-line); padding: var(--s-2) 0 0 !important; }
}
@media (min-width: 1200px) {
  .admin-header__inner { flex-wrap: nowrap; }
  .admin .site-nav { flex: 1; justify-content: space-between; margin-left: var(--s-3); }
  .admin .site-nav ul { display: flex; gap: 0; padding: 0; align-items: center; }
  .admin .site-nav a { padding: 0 10px; font-size: 15px; }
  .admin .site-nav__util { gap: var(--s-2); }
}
@media (min-width: 1200px) and (max-width: 1359px) { .admin-me { max-width: 110px; } }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin: var(--s-3) 0; padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.filters .field { margin: 0; min-width: 160px; flex: 1 1 160px; }
.filters .actions { margin: 0; }
.stat-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stat { display: grid; gap: 4px; padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); color: var(--c-text); text-decoration: none; }
.stat:hover, .stat:focus-visible { border-color: var(--c-brand-strong); }
.stat__label { color: var(--c-text-2); font-weight: 600; font-size: 14px; }
.stat__value { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat__sub { color: var(--c-muted); font-size: 13px; }
.admin-cols { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .admin-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.table--compact th, .table--compact td { padding: 8px 10px; font-size: 14px; }
.table td.small, .table td .kv { white-space: normal; }
.table tr.is-muted td { color: var(--c-muted); }
.nowrap { white-space: nowrap; }
.kv { display: inline-block; padding: 1px 8px; margin: 1px 0; border-radius: 999px; background: var(--c-surface-2); font-size: 12px; }
.row-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0; }
.row-form input { min-height: 40px; max-width: 180px; }
.meta--wide div { flex-wrap: wrap; }
.meta--wide dt { min-width: 120px; }
.pre { white-space: pre-wrap; word-break: break-word; }
.timeline { display: grid; gap: var(--s-3); padding: 0; list-style: none; }
.timeline li { padding: var(--s-3) var(--s-4); border-left: 3px solid var(--c-line); background: var(--c-surface); border-radius: 0 var(--r) var(--r) 0; }
.timeline p { margin: 2px 0; }

/* ---------- 서비스별 기본 홈페이지 (PHASE 4) ---------- */
.svc-subnav { border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.svc-subnav ul { display: flex; gap: var(--s-1); overflow-x: auto; padding: 0; margin: 0; list-style: none; }
.svc-subnav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); color: var(--c-text-2); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; }
.svc-subnav a[aria-current="page"] { color: var(--c-brand-strong); border-bottom-color: var(--c-brand-strong); }
.svc-prep { margin-top: var(--s-4); }
.feature-list { display: grid; gap: var(--s-3); padding: 0; list-style: none; }
@media (min-width: 640px) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature-list li { display: grid; gap: 4px; padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.feature-list li.is-picked { border-color: var(--c-primary, #6750A4); box-shadow: 0 0 0 2px rgba(103,80,164,.15); }
.feature-list span { color: var(--c-text-2); }
.steps { display: grid; gap: var(--s-2); padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: var(--s-3); min-height: 48px; font-weight: 600; }
.steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--c-brand-strong); color: var(--c-on-brand); font-weight: 800; }
.stat--alert { border-color: var(--c-warning); background: var(--c-warning-bg); }
.svc-hero .actions .badge { margin-left: var(--s-2); }

/* ---------- LOUNGE (PHASE 5-3) ---------- */
.lounge-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s-2); }
.slot { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-surface); font-weight: 600; cursor: pointer; }
.slot:has(input:checked) { border-color: var(--c-brand-strong); background: var(--c-surface-2); }
.code-big { font-size: 24px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
details.card > summary { cursor: pointer; padding: var(--s-2) 0; }
.table input[type="time"] { min-height: 36px; }
.lounge-bar select { min-height: 40px; padding: 0 var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-surface); }

/* ---------- HIVE SIX (PHASE 5-4) ---------- */
.dx-area { margin: var(--s-5) 0; padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.dx-area legend { font-weight: 800; font-size: 18px; padding: 0 var(--s-2); }
.dx-q { padding: var(--s-3) 0; border-top: 1px solid var(--c-line); }
.dx-q:first-of-type { border-top: 0; }
.dx-q__text { margin-bottom: var(--s-2); }
.dx-q input[type="text"] { min-height: 40px; max-width: 160px; padding: 0 var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r); }
.dx-actions { position: sticky; bottom: 0; padding: var(--s-3) 0; background: var(--c-bg, #FBF5EF); }
.dx-stage { font-size: 20px; }
.dx-bar-cell { width: 30%; min-width: 120px; }
.dx-bar { display: block; height: 10px; border-radius: 999px; background: var(--c-brand-strong); }
.dx-bar.is-critical { background: var(--c-danger); }
.dx-bar--0 { width: 2%; } .dx-bar--1 { width: 10%; } .dx-bar--2 { width: 20%; } .dx-bar--3 { width: 30%; } .dx-bar--4 { width: 40%; } .dx-bar--5 { width: 50%; }
.dx-bar--6 { width: 60%; } .dx-bar--7 { width: 70%; } .dx-bar--8 { width: 80%; } .dx-bar--9 { width: 90%; } .dx-bar--10 { width: 100%; }
.msg--internal { border-left-color: var(--c-warning); background: var(--c-warning-bg); }
.msg--system { opacity: .75; }
@media print { .no-print, .site-header, .notice { display: none !important; } .admin-wrap { padding: 0; } }
.row-form select, .row-form input:not([type="checkbox"]):not([type="radio"]) { min-height: 40px; padding: 0 var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-surface); }

/* ---------- 상품공급업체 (PHASE 5-5) ---------- */
.plain-list { display: grid; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.plain-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
details.box { margin: var(--s-3) 0; padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-surface); }
details.box > summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; }

/* ---------- 모두의커머스 (PHASE 6) ---------- */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.att-grid select { min-width: 84px; min-height: 36px; padding: 2px 6px; }
.att-grid td, .att-grid th { white-space: nowrap; }
/* 표 안의 화면 낭독용 라벨(position:absolute)이 가로 스크롤 영역 밖으로 빠져 페이지 폭을 넓히지 않도록 */
.table-wrap { position: relative; }

/* ---------- 언에이징 거래 관리 (PHASE 7) ---------- */
.form--wide { max-width: none; }
input.qty { width: 96px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-surface); font-size: 15px; }
.inline-form select { min-height: 36px; padding: 2px 6px; border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-surface); }
.inline-form { flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- 링크 인 바이오 공개 페이지 (PHASE 8) ---------- */
.lp { min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: var(--c-bg); color: var(--c-text); }
.lp--bronze { background: #F3E6D6; }
.lp--dark { background: #1F1A17; color: #F6EFE7; }
.lp__main { width: 100%; max-width: 560px; padding: var(--s-8) var(--s-4) var(--s-5); flex: 1; }
.lp__head { text-align: center; margin-bottom: var(--s-6); }
.lp__avatar { width: 88px; height: 88px; margin: 0 auto var(--s-3); border-radius: 50%; display: grid; place-items: center; font-size: 36px; font-weight: 800; background: var(--c-brand-strong); color: #fff; }
.lp--dark .lp__avatar { background: #C9A27A; color: #1F1A17; }
.lp__title { font-size: 24px; font-weight: 800; line-height: 1.3; word-break: keep-all; }
.lp__badge { display: inline-block; margin-top: var(--s-2); padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-text-2); }
.lp--dark .lp__badge { background: transparent; border-color: #5A4C42; color: #E6D6C4; }
.lp__bio { margin-top: var(--s-3); color: var(--c-text-2); }
.lp--dark .lp__bio { color: #D9CCBE; }
.lp__links { display: grid; gap: var(--s-3); }
.lp__link { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-text); font-weight: 700; text-align: center; text-decoration: none; word-break: keep-all; }
.lp__link:hover, .lp__link:focus-visible { border-color: var(--c-brand-strong); outline: none; box-shadow: 0 0 0 3px rgba(122, 86, 52, .2); }
.lp__link--shop { background: var(--c-brand-strong); border-color: var(--c-brand-strong); color: #fff; }
.lp--dark .lp__link { background: #2B2420; border-color: #4A3E36; color: #F6EFE7; }
.lp--dark .lp__link--shop { background: #C9A27A; border-color: #C9A27A; color: #1F1A17; }
.lp__empty { text-align: center; color: var(--c-muted); }
.lp__foot { padding: var(--s-5) 0 var(--s-6); font-size: 12px; letter-spacing: .12em; }
.lp__foot a { color: inherit; opacity: .6; text-decoration: none; }

/* ---------- 서비스별 전용 디자인 공통 보정 (2026-10-26) ---------- */
.admin-header .site-header__svc { text-decoration: none; }
.admin-header .site-header__svc:hover { text-decoration: underline; }
/* 통합 관리자 — 회원 등록·수정·삭제 (2026-10-26) */
.admin-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.admin-form .field { flex: 1 1 220px; }
.danger-zone { padding: var(--s-4); border: 1px solid var(--c-danger); border-radius: var(--r-lg); background: var(--c-danger-bg); }
.danger-zone > p { margin-bottom: var(--s-2); }
.danger-zone .filters { background: var(--c-surface); }

/* ── 알림 종 · 회원 메시지 (2026-10-26) ── */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; color: inherit; text-decoration: none; }
.bell__ic { display: block; }
.bell__n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #D93025; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.bell--link:hover { opacity: .8; }
.msg-h { margin: 0 0 var(--s-3); font-size: 18px; font-weight: 700; }
.msg-new { margin: var(--s-4) 0 var(--s-5); padding: var(--s-5); }
.msg-search { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.msg-search input { flex: 1; min-width: 0; min-height: var(--tap); padding: 0 var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r); font: inherit; background: #fff; }
.msg-av { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--c-surface-2); color: var(--c-text-2); font-weight: 700; }
.msg-av--lg { width: 52px; height: 52px; font-size: 20px; }
.msg-people, .msg-threads, .noti-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.msg-people li + li, .msg-threads li + li, .noti-list li + li { border-top: 1px solid var(--c-line); }
.msg-people a, .msg-threads a, .noti-list a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); color: var(--c-text); text-decoration: none; }
.msg-people a:hover, .msg-threads a:hover, .noti-list a:hover { background: var(--c-surface-2); }
.msg-people a > span:nth-child(2), .msg-threads__txt, .noti-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.5; }
.msg-people small, .msg-threads__txt small, .noti-txt small { color: var(--c-muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-people__go { color: var(--c-brand); font-size: 14px; font-weight: 700; }
.msg-threads li.is-unread b, .noti-list li.is-unread b { font-weight: 800; }
.msg-threads li.is-unread .msg-threads__txt small { color: var(--c-text); }
.msg-threads__meta, .noti-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.msg-threads__meta small, .noti-meta small { color: var(--c-muted); font-size: 13px; }
.msg-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #D93025; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.msg-head { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 var(--s-4); }
.msg-head > div { flex: 1; min-width: 0; }
.msg-title { margin: 0; font-size: 24px; }
.msg-head p { margin: 0; }
.msg-log { display: flex; flex-direction: column; gap: var(--s-2); max-height: 62vh; min-height: 220px; overflow-y: auto; padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface-2); }
.msg-empty { margin: auto; }
.msg-day { margin: var(--s-3) 0; text-align: center; }
.msg-day span { display: inline-block; padding: 2px 12px; border-radius: 999px; background: rgba(0,0,0,.06); color: var(--c-text-2); font-size: 13px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 80%; }
.msg--mine { align-self: flex-end; align-items: flex-end; }
.msg__bubble { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #fff; border: 1px solid var(--c-line); }
.msg--mine .msg__bubble { border-radius: 16px 4px 16px 16px; background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.msg__body { margin: 0; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }
.msg__meta { margin: 2px 4px 0; color: var(--c-muted); font-size: 12px; }
.msg-img img { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; object-fit: cover; }
.msg-file { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.05); color: inherit; text-decoration: none; }
.msg--mine .msg-file { background: rgba(255,255,255,.18); }
.msg-file__ext { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(0,0,0,.08); font-size: 11px; font-weight: 800; }
.msg-file__n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-file small { opacity: .8; font-size: 12px; }
.msg-compose { margin-top: var(--s-3); padding: var(--s-4); }
.msg-compose textarea { display: block; width: 100%; min-height: 84px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r); font: inherit; line-height: 1.6; resize: vertical; background: #fff; }
.msg-compose__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.msg-compose__bar .btn { margin-left: auto; }
.msg-attach { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px dashed var(--c-line); border-radius: 999px; cursor: pointer; font-weight: 600; max-width: 100%; }
.msg-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.msg-attach:focus-within { outline: 2px solid var(--c-focus, var(--c-brand)); outline-offset: 2px; }
.msg-attach span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-4) 0; }
.msg-filter { display: inline-flex; gap: 4px; }
.msg-filter a { padding: 6px 14px; border-radius: 999px; color: var(--c-text-2); text-decoration: none; font-weight: 600; }
.msg-filter a[aria-current] { background: var(--c-brand); color: var(--c-on-brand); }
.noti-kind { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--c-info-bg); color: var(--c-info); font-weight: 700; }
.noti-dot { width: 8px; height: 8px; border-radius: 50%; background: #D93025; }
.noti-list li:not(.is-unread) .noti-txt { color: var(--c-text-2); }
@media (max-width: 560px) {
  .msg { max-width: 92%; }
  .msg-img img { max-width: 200px; }
  .msg-new { padding: var(--s-4); }
}

/* 업무 프로그램 로고 (프로그램 이름 앞, LOUNGE 등 — layouts/workspace.php, 2026-10-26) */
.site-header__svc { display: inline-flex; align-items: center; gap: 8px; }
.ws-svc-mark { flex: none; width: 28px; height: 28px; }
.field[hidden] { display: none !important; }

/* 2026-10-29 사이트 공통 기본: 표 안 입력 칸은 그 칸을 꽉 채워 제목 바로 아래에 온다
   (입력 칸만 있는 칸 — 버튼·링크가 같이 있는 칸은 그대로). 숫자 칸(th.num)은 입력 글자도 오른쪽 */
.table td:not(:has(> :is(button, a, .btn, form))) > :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { width: 100%; max-width: none; box-sizing: border-box; }
.table td > input:is([inputmode=numeric], [inputmode=decimal], [type=number]) { text-align: right; }
.table th.num { text-align: right; }
/* 칸이 너무 좁아지지 않게 (표 폭이 모자라면 옆으로 밀어 봄) */
.table td > :where(input:not([type=checkbox], [type=radio], [type=hidden]), select) { min-width: 7rem; }
.table td > :where(input[inputmode=numeric], input[inputmode=decimal], input[type=number], select) { min-width: 5.5rem; }
.table td > :where(input[type=date], input[type=datetime-local], input[type=time]) { min-width: 9.5rem; }
.table td > :where(textarea) { min-width: 12rem; }

/* 2026-10-29 언에이징 서비스 로고: UNAGING SPRING(링크 인 바이오) · UNAGING FLOW(언에이징 발주) — 글자색은 놓인 곳의 글자색 */
.ubrand { display: inline-flex; align-items: center; gap: .55em; line-height: 1; vertical-align: middle; color: inherit; }
.ubrand__mark { width: 2.1em; height: 2.1em; flex: none; display: block; }
.ubrand__t { display: inline-flex; flex-direction: column; gap: .12em; }
.ubrand__k { font-size: .5em; font-weight: 700; letter-spacing: .24em; opacity: .7; }
.ubrand__w { font-size: 1.15em; font-weight: 800; letter-spacing: .01em; }
.ubrand--sm { font-size: 13px; } .ubrand--md { font-size: 16px; } .ubrand--lg { font-size: 22px; }
.ubrand-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; line-height: 1.4; }
.ubrand-chip--spring { background: #FFF1E6; color: #A84300; } .ubrand-chip--flow { background: #0E1411; color: #3CE07F; }
.lp__made { margin: 28px 0 8px; text-align: center; font-size: 12px; } .lp__made a { display: inline-flex; align-items: center; gap: 6px; color: inherit; opacity: .75; text-decoration: none; font-weight: 700; } .lp__made a:hover { opacity: 1; }
.lp__made svg { width: 12px; height: 16px; }