/* ─────────────────────────────────────────────────────────────
   엠에스기프트 디자인 시스템 (ds.css) — v53
   4개 포털(회원몰·어드민·가맹점/영업자·운영콘솔)이 이 파일 하나를 공유한다.

   원칙
   1) 색·간격·둥근모서리·그림자·타이포는 여기서만 정의한다. 포털 파일에서 새 색상값을 쓰지 않는다.
   2) 포털 고유 컴포넌트는 각 파일에 두되, 값은 반드시 var(--…) 토큰으로 쓴다.
   3) 기본색은 태극기 — 강조(act)=태극 남색, 포인트(point)=태극 홍색, 글자=먹(괘), 바탕=백.
      분류색은 단청·오방색 파스텔 6색. 상태는 ok/warn/bad/info.
   4) 다크모드는 토큰만 바꾼다. 컴포넌트 CSS는 건드리지 않는다.
   ───────────────────────────────────────────────────────────── */

:root{
  /* ── 바탕·면 (태극기 백색 바탕) ── */
  --ground:#F4F6F9;      /* 페이지 바탕 */
  --surface:#FFFFFF;     /* 카드·패널 */
  --surface-2:#F8FAFC;   /* 카드 안 보조면(표 헤더·입력 배경) */
  --surface-3:#EAF0F7;   /* 눌린 상태·선택된 행 */
  --hover:#EFF4F9;

  /* ── 글자 (사괘의 먹) ── */
  --ink:#16181D;         /* 본문 */
  --ink-2:#3D4450;       /* 보조 */
  --ink-3:#6B7480;       /* 흐린 설명 */
  --ink-4:#9AA2AF;       /* 아주 흐린(플레이스홀더) */

  /* ── 선 ── */
  --line:#E1E6EE;
  --line-2:#CBD3DF;

  /* ── 강조 = 태극 남색(#0047A0) ── */
  --act:#0047A0;
  --act-2:#0A5BC4;
  --act-ink:#003A85;     /* 밝은 배경 위 글자용(대비 확보) */
  --act-soft:#E6EEF9;
  --act-line:#B4C9E8;
  --act-ink-on:#FFFFFF;  /* act 배경 위 글자 */

  /* ── 포인트 = 태극 홍색(#CD2E3A) ── 배지·히어로·태극 문양 등 장식에만.
     '위험/삭제'는 --bad 를 쓴다(두 색을 섞지 말 것). */
  --point:#CD2E3A;
  --point-2:#E04150;
  --point-ink:#A32029;
  --point-soft:#FCEAEB;
  --point-line:#F2C3C7;
  --point-ink-on:#FFFFFF;

  /* ── 상태 ── */
  --ok:#0B6B57;   --ok-soft:#DDF5EC;   --ok-line:#A9E5D3;
  --warn:#8A6608; --warn-soft:#FBF1CC; --warn-line:#F7E3A1;
  --bad:#B3141F;  --bad-soft:#FBE0E2;  --bad-line:#EFB8BD;
  --info:#1E5F94; --info-soft:#E1EFFB; --info-line:#B6D8F5;

  /* ── 단청·오방색 파스텔 스펙트럼(분류색) ── */
  --c1:#BFD4EE; --c1-ink:#123C7A;  /* 청람(靑) */
  --c2:#F6C9C4; --c2-ink:#A3372C;  /* 주홍(赤) */
  --c3:#F5E3AF; --c3-ink:#7A5A0B;  /* 치자황(黃) */
  --c4:#B9E3D6; --c4-ink:#0B5F4C;  /* 옥색(단청 녹) */
  --c5:#E1CBE9; --c5-ink:#6E2F7A;  /* 자주(자색) */
  --c6:#D7DDE6; --c6-ink:#3D4450;  /* 먹회(黑·白) */

  /* ── 모양 ── */
  --r:12px;        /* 카드·패널 */
  --r-sm:8px;      /* 버튼·입력 */
  --r-xs:6px;      /* 배지·작은 태그 */
  --r-pill:999px;
  --sh:0 1px 2px rgba(22,24,29,.05), 0 6px 18px rgba(22,24,29,.06);
  --sh-2:0 10px 30px rgba(22,24,29,.13);
  --sh-pop:0 18px 50px rgba(22,24,29,.2);
  --pattern:rgba(22,24,29,.055);   /* 권면 기요셰(무늬) 선색 */
  --pattern-fixed:rgba(22,24,29,.06);  /* 항상 밝은 면(권면·파스텔 카드) 위 무늬 — 다크모드에서도 바뀌지 않는다 */
  --scrim:rgba(10,14,22,.48);   /* v53 추가 — 모달·드로어 뒤 어둠막 */

  /* ── 간격(4px 배수) ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* ── 타이포 ── */
  --sans:"IBM Plex Sans KR","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --serif:"Hahmlet","Apple SD Gothic Neo",Georgia,serif;   /* 권면·인장 등 장식용 제목 */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:14px; --fs-5:16px;
  --fs-6:19px; --fs-7:23px; --fs-8:28px; --fs-9:34px;

  /* ── 레이아웃 ── */
  --maxw:1280px;
  --rail:248px;         /* 어드민 좌측 사이드바 */
  --header-h:60px;

  /* ── 모션 ── */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.12s; --t:.2s;

  color-scheme:light;
}

/* 다크모드 — 토큰만 교체 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0D1117; --surface:#151B23; --surface-2:#1B222C; --surface-3:#232C38; --hover:#1F2732;
    --ink:#EEF2F7; --ink-2:#B4BECB; --ink-3:#8792A0; --ink-4:#68727F;
    --line:#27303C; --line-2:#3A4553;
    --act:#7FB2F0; --act-2:#9CC6F7; --act-ink:#B6D5FA; --act-soft:#14273D; --act-line:#264564; --act-ink-on:#0B1A2B;
    --point:#F08A93; --point-2:#F6A5AC; --point-ink:#F7B7BD; --point-soft:#3A1A1E; --point-line:#5E2B31; --point-ink-on:#2A1013;
    --ok:#7FE3C4; --ok-soft:#12332B; --ok-line:#1E5548;
    --warn:#F2CE72; --warn-soft:#332A12; --warn-line:#5A4A1C;
    --bad:#FF9A9A; --bad-soft:#3A1C1C; --bad-line:#5E2C2C;
    --info:#8CC5F0; --info-soft:#132938; --info-line:#234A66;
    --sh:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
    --sh-2:0 10px 30px rgba(0,0,0,.5);
    --sh-pop:0 18px 50px rgba(0,0,0,.6);
    --scrim:rgba(0,0,0,.6);
    --pattern:rgba(238,242,247,.06);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0D1117; --surface:#151B23; --surface-2:#1B222C; --surface-3:#232C38; --hover:#1F2732;
  --ink:#EEF2F7; --ink-2:#B4BECB; --ink-3:#8792A0; --ink-4:#68727F;
  --line:#27303C; --line-2:#3A4553;
  --act:#7FB2F0; --act-2:#9CC6F7; --act-ink:#B6D5FA; --act-soft:#14273D; --act-line:#264564; --act-ink-on:#0B1A2B;
  --point:#F08A93; --point-2:#F6A5AC; --point-ink:#F7B7BD; --point-soft:#3A1A1E; --point-line:#5E2B31; --point-ink-on:#2A1013;
  --ok:#7FE3C4; --ok-soft:#12332B; --ok-line:#1E5548;
  --warn:#F2CE72; --warn-soft:#332A12; --warn-line:#5A4A1C;
  --bad:#FF9A9A; --bad-soft:#3A1C1C; --bad-line:#5E2C2C;
  --info:#8CC5F0; --info-soft:#132938; --info-line:#234A66;
  --scrim:rgba(0,0,0,.6);
  --pattern:rgba(238,242,247,.06);
  color-scheme:dark;
}

/* ─── 기본 ─── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:var(--fs-4)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--act);text-decoration:none}
a:hover{color:var(--act-2)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.35}
h1{font-size:var(--fs-8)} h2{font-size:var(--fs-6)} h3{font-size:var(--fs-5)} h4{font-size:var(--fs-4)}
table{border-collapse:collapse;width:100%}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}

/* 접근성: 키보드 포커스는 항상 보이게 (마우스 클릭에는 안 보이게) */
:focus-visible{outline:2px solid var(--act);outline-offset:2px;border-radius:var(--r-xs)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ─── 타이포 유틸 ─── */
.ds-mono,.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ds-muted,.muted,.mute{color:var(--ink-3)}
.ds-faint,.faint{color:var(--ink-4)}
.ds-small,.small{font-size:var(--fs-2)}
.ds-xs,.xs{font-size:var(--fs-1)}
.ds-b,.b{font-weight:600}
.ds-right,.right{text-align:right}
.ds-center,.center{text-align:center}
.ds-nowrap,.nowrap{white-space:nowrap}
.ds-ok{color:var(--ok)} .ds-warn{color:var(--warn)} .ds-bad{color:var(--bad)} .ds-act{color:var(--act)}

/* 긴 글 줄바꿈 — 한글 가독성 */
.ds-prose{max-width:68ch;word-break:keep-all;overflow-wrap:anywhere}

/* ─── 레이아웃 ─── */
.ds-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}
.ds-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.ds-row.between{justify-content:space-between}
.ds-col{display:flex;flex-direction:column;gap:var(--s3)}
.ds-grid{display:grid;gap:var(--s4)}
.ds-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ds-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ds-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .ds-g3,.ds-g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ds-g2,.ds-g3,.ds-g4{grid-template-columns:minmax(0,1fr)} }

/* 스펙트럼 바 — 브랜드 시그니처(카드 상단·구분선) */
.ds-spec{display:flex;height:4px;width:100%;border-radius:var(--r-pill);overflow:hidden}
.ds-spec i{flex:1}
.ds-spec i:nth-child(1){background:var(--c1)} .ds-spec i:nth-child(2){background:var(--c2)}
.ds-spec i:nth-child(3){background:var(--c3)} .ds-spec i:nth-child(4){background:var(--c4)}
.ds-spec i:nth-child(5){background:var(--c5)} .ds-spec i:nth-child(6){background:var(--c6)}

/* ─── 카드 ─── */
.ds-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--sh);
}
.ds-card.flat{box-shadow:none}
.ds-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.ds-card-head h2,.ds-card-head h3{margin:0}

/* ─── 버튼 ─── */
.ds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:38px;padding:0 var(--s4);border-radius:var(--r-sm);
  background:var(--act);color:var(--act-ink-on);border:1px solid var(--act);
  font-size:var(--fs-3);font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.ds-btn:hover{background:var(--act-2);border-color:var(--act-2)}
.ds-btn:active{transform:translateY(1px)}
.ds-btn[disabled],.ds-btn.is-disabled{opacity:.45;pointer-events:none}
.ds-btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.ds-btn.ghost:hover{background:var(--hover);border-color:var(--act-line);color:var(--act-ink)}
.ds-btn.soft{background:var(--act-soft);color:var(--act-ink);border-color:var(--act-line)}
.ds-btn.soft:hover{background:var(--act-line)}
.ds-btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.ds-btn.bad{background:var(--bad);border-color:var(--bad);color:#fff}
.ds-btn.point{background:var(--point);border-color:var(--point);color:var(--point-ink-on)}   /* 태극 홍 — 장식·강조용. '위험'에는 .bad 를 쓴다 */
.ds-btn.point:hover{background:var(--point-2);border-color:var(--point-2)}
.ds-btn.quiet{background:transparent;border-color:transparent;color:var(--ink-2)}
.ds-btn.quiet:hover{background:var(--hover);color:var(--ink)}
.ds-btn.sm{height:30px;padding:0 var(--s3);font-size:var(--fs-2)}
.ds-btn.lg{height:48px;padding:0 var(--s6);font-size:var(--fs-5)}
.ds-btn.block{width:100%}

/* ─── 입력 ─── */
.ds-field{display:block;margin-bottom:var(--s3)}
.ds-label{display:block;font-size:var(--fs-2);font-weight:600;color:var(--ink-2);margin-bottom:var(--s1)}
.ds-input,.ds-select,.ds-textarea{
  width:100%;height:38px;padding:0 var(--s3);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:var(--fs-3);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.ds-textarea{height:auto;padding:var(--s3);min-height:90px;line-height:1.6;resize:vertical}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{
  outline:none;border-color:var(--act);box-shadow:0 0 0 3px var(--act-soft);
}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ink-4)}
.ds-input[aria-invalid="true"],.ds-input.is-error{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.ds-hint{font-size:var(--fs-2);color:var(--ink-3);margin-top:var(--s1)}
.ds-err{font-size:var(--fs-2);color:var(--bad);margin-top:var(--s1)}

/* ─── 배지·칩 ─── */
.ds-badge{
  display:inline-flex;align-items:center;gap:var(--s1);
  padding:3px var(--s2);border-radius:var(--r-xs);
  font-size:var(--fs-1);font-weight:600;line-height:1.5;
  background:var(--surface-3);color:var(--ink-2);border:1px solid transparent;
}
.ds-badge.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.ds-badge.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.ds-badge.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.ds-badge.info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.ds-badge.act{background:var(--act-soft);color:var(--act-ink);border-color:var(--act-line)}
.ds-badge.point{background:var(--point-soft);color:var(--point-ink);border-color:var(--point-line)}
.ds-chip{
  display:inline-flex;align-items:center;gap:var(--s1);height:30px;padding:0 var(--s3);
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-2);
  font-size:var(--fs-2);color:var(--ink-2);
}
.ds-chip.on{background:var(--act-soft);border-color:var(--act-line);color:var(--act-ink);font-weight:600}

/* ─── 표 ─── */
.ds-table{width:100%;font-size:var(--fs-3)}
.ds-table th{
  position:sticky;top:0;z-index:1;
  background:var(--surface-2);color:var(--ink-3);
  font-size:var(--fs-2);font-weight:600;text-align:left;
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);white-space:nowrap;
}
.ds-table td{padding:var(--s3);border-bottom:1px solid var(--line);vertical-align:middle}
.ds-table tbody tr:hover{background:var(--hover)}
.ds-table tbody tr:last-child td{border-bottom:0}
.ds-table .amt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}

/* 모바일: 표를 카드로 — <td data-th="컬럼명"> 을 쓰면 자동 적용 */
@media (max-width:640px){
  .ds-table.responsive thead{display:none}
  .ds-table.responsive tr{display:block;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:var(--s2);padding:var(--s2)}
  .ds-table.responsive td{display:flex;justify-content:space-between;gap:var(--s3);border:0;padding:var(--s1) var(--s2)}
  .ds-table.responsive td::before{content:attr(data-th);color:var(--ink-3);font-size:var(--fs-2);font-weight:600}
}

/* ─── 통계 타일 ─── */
.ds-stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);box-shadow:var(--sh);position:relative;overflow:hidden;
}
.ds-stat .k{font-size:var(--fs-2);color:var(--ink-3);font-weight:600;margin-bottom:var(--s1)}
.ds-stat .v{font-size:var(--fs-7);font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ds-stat .s{font-size:var(--fs-2);color:var(--ink-3);margin-top:var(--s1)}
.ds-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c1)}
.ds-stat.c2::before{background:var(--c2)} .ds-stat.c3::before{background:var(--c3)}
.ds-stat.c4::before{background:var(--c4)} .ds-stat.c5::before{background:var(--c5)} .ds-stat.c6::before{background:var(--c6)}

/* ─── 빈 상태·로딩 ─── */
.ds-empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding:var(--s9) var(--s5);text-align:center;color:var(--ink-3);
}
.ds-empty .t{font-size:var(--fs-5);font-weight:600;color:var(--ink-2)}
.ds-empty .d{font-size:var(--fs-3);max-width:44ch;word-break:keep-all}
.ds-skel{
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--hover) 37%,var(--surface-3) 63%);
  background-size:400% 100%;animation:ds-shimmer 1.3s ease-in-out infinite;border-radius:var(--r-xs);
}
@keyframes ds-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.ds-spin{
  width:16px;height:16px;border:2px solid var(--act-line);border-top-color:var(--act);
  border-radius:50%;animation:ds-rot .7s linear infinite;display:inline-block;vertical-align:-3px;
}
@keyframes ds-rot{to{transform:rotate(360deg)}}

/* ─── 모달 ─── */
.ds-modal-bg{
  position:fixed;inset:0;background:rgba(20,16,32,.45);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:var(--s4);z-index:100;
}
.ds-modal{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-pop);width:min(520px,100%);max-height:88vh;overflow:auto;
  animation:ds-pop .18s var(--ease);
}
.ds-modal .hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s5) var(--s5) var(--s3)}
.ds-modal .bd{padding:0 var(--s5) var(--s5)}
.ds-modal .ft{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s3) var(--s5) var(--s5)}
@keyframes ds-pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .ds-modal-bg{align-items:flex-end;padding:0}
  .ds-modal{width:100%;max-height:92vh;border-radius:var(--r) var(--r) 0 0}
}

/* ─── 토스트 ─── */
.ds-toasts{position:fixed;right:var(--s5);bottom:var(--s5);display:flex;flex-direction:column;gap:var(--s2);z-index:200}
.ds-toast{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--act);
  border-radius:var(--r-sm);box-shadow:var(--sh-2);padding:var(--s3) var(--s4);
  font-size:var(--fs-3);max-width:340px;animation:ds-slide .2s var(--ease);
}
.ds-toast.ok{border-left-color:var(--ok)} .ds-toast.bad{border-left-color:var(--bad)} .ds-toast.warn{border-left-color:var(--warn)}
@keyframes ds-slide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media (max-width:560px){ .ds-toasts{left:var(--s3);right:var(--s3);bottom:var(--s3)} .ds-toast{max-width:none} }

/* ─── 탭 ─── */
.ds-tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.ds-tabs button{
  background:none;border:0;border-bottom:2px solid transparent;
  padding:var(--s3) var(--s4);font-size:var(--fs-3);color:var(--ink-3);white-space:nowrap;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.ds-tabs button:hover{color:var(--ink)}
.ds-tabs button.on{color:var(--act-ink);border-bottom-color:var(--act);font-weight:600}

/* ─── 알림 배너 ─── */
.ds-note{
  display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);font-size:var(--fs-3);
}
.ds-note.ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.ds-note.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.ds-note.bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
.ds-note.info{background:var(--info-soft);border-color:var(--info-line);color:var(--info)}

/* ─── 접근성 보조 ─── */
.ds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ds-skip{position:absolute;left:-9999px}
.ds-skip:focus{left:var(--s4);top:var(--s4);z-index:300;background:var(--surface);padding:var(--s2) var(--s4);border-radius:var(--r-sm);box-shadow:var(--sh-2)}

/* 터치 타깃 최소 크기 — 모바일 */
@media (max-width:640px){
  .ds-btn{height:44px} .ds-btn.sm{height:36px}
  .ds-input,.ds-select{height:44px}
}

/* 인쇄 */
@media print{
  body{background:#fff}
  .ds-card,.ds-stat{box-shadow:none;border-color:#ccc}
  .ds-btn,.ds-tabs,.ds-toasts{display:none !important}
}