/* ==========================================================================
   로그인 이후 "작업 앱" 화면 전반(에디터·다운로드·보관함·멤버십·리터칭·로그인)에서
   공유하는 스타일. design-system.css의 --ds-* 토큰과 .ds-btn / .ds-tab / .ds-input /
   .ds-table 컴포넌트를 기반으로 하고, 여기서는 디자인 시스템 문서에 없는
   보조 컴포넌트(뱃지·모달·드롭존·칩·스와치·상태 스테퍼 등)를 같은 토큰으로 정의한다.
   개별 화면 전용 스타일은 각 화면 이름의 CSS(예: editor.css)에 따로 둔다.
   ========================================================================== */

/* ---------- 유틸 ---------- */
.is-hidden{display:none}
.mt-8{margin-top:8px}
.mb-8{margin-bottom:8px}
.mb-16{margin-bottom:16px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-40{margin-top:40px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-row-end{justify-content:flex-end}
.btn-row-fill .ds-btn{flex:1;height:37px;padding-left:0;padding-right:0;justify-content:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.grid2{grid-template-columns:1fr}}
.back-link{
  display:inline-block;margin-bottom:16px;font-family:var(--ds-font-ui);
  font-size:14px;color:var(--ds-gray-500);text-decoration:none;
}
.back-link:hover{color:var(--ds-gray-600)}
.section-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:16px}
.section-row .section-title{margin:0}
.section-row .retouch-pick-hint{margin:0;align-self:center}#retouchFromProjectsBtn:not(:disabled)+.retouch-pick-hint{display:none}
.section-row .back-link{margin:0}
.ds-table tr.hoverable{cursor:pointer;transition:background .12s}
.ds-table tr.hoverable:hover td{background:var(--ds-gray-100)}
.ds-table .btn-row-end{justify-content:center}
.panel--flush .ds-table th:first-child,
.panel--flush .ds-table td:first-child{padding-left:24px}
.panel--flush .ds-table th:last-child,
.panel--flush .ds-table td:last-child{padding-right:24px}
.page-title{font-family:var(--ds-font-ui);font-size:24px;font-weight:700;letter-spacing:-0.02em;color:var(--ds-gray-600);margin:0}
.page-sub{font-family:var(--ds-font-ui);font-size:14px;color:var(--ds-gray-500);margin:8px 0 0}

/* ---------- 토스트 (안내 · 경고 구분, ED-U01) ---------- */
#toast-stack{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{display:flex;align-items:center;gap:10px;max-width:min(420px,86vw);background:var(--ds-primary-500);color:#fff;padding:12px 14px 12px 16px;font-family:var(--ds-font-ui);font-size:14px;font-weight:600;opacity:0;transform:translateY(8px);transition:.22s}
.toast.show{opacity:1;transform:translateY(0)}
.toast-icon{flex:none;font-size:14px}
.toast-text{flex:1 1 auto;line-height:1.5}
.toast-close{flex:none;background:none;border:0;color:inherit;opacity:.7;font-size:12px;cursor:pointer;padding:2px}
.toast-close:hover{opacity:1}
.toast-action{flex:none;background:none;border:0;color:inherit;font-weight:700;font-size:inherit;text-decoration:underline;cursor:pointer;padding:0}
.toast-warn{background:#7a1d16}

/* ---------- 모달 (재발행 요청 등 공용) ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;
  display:none;align-items:center;justify-content:center;padding:32px;
}
.modal-overlay.show{display:flex}
.modal-box{
  background:var(--ds-surface);border:1px solid var(--ds-line);
  width:100%;max-width:400px;display:flex;flex-direction:column;max-height:90vh;
  padding:32px 28px;text-align:center;position:relative;
}
.modal-box--lg{max-width:960px;padding:0;text-align:left}
.modal-close{position:absolute;top:16px;right:16px;border:0;background:none;font-size:16px;color:var(--ds-gray-500);cursor:pointer;padding:4px}
.modal-close:hover{color:var(--ds-gray-600)}
.modal-box p{font-family:var(--ds-font-ui);font-size:15px;letter-spacing:-0.02em;line-height:1.7;color:var(--ds-gray-600);margin:0 0 24px;text-align:center}
.modal-note{font-size:13px;letter-spacing:-0.02em;color:var(--ds-gray-500)}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;border-bottom:1px solid var(--ds-line);flex:none;
}
.modal-head h3{margin:0;font-family:var(--ds-font-ui);font-size:17px;font-weight:700;color:var(--ds-gray-600)}
.modal-box--lg .modal-close{position:static}
.modal-body{padding:24px 28px;overflow-y:auto;background:var(--ds-gray-100);flex:1 1 auto}
.modal-foot{
  display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px;
  padding:16px 28px;border-top:1px solid var(--ds-line);flex:none;
}

/* ---------- 사이트 헤더 : 상단 탭 활성 표시 · 체험 칩 · 아바타 ---------- */
.site-nav a.is-active{color:#fff;font-weight:700}
.site-header .top-extra{display:flex;align-items:center;gap:12px}
.chip-trial{
  height:32px;padding:0 14px;display:inline-flex;align-items:center;
  background:rgba(255,255,255,.12);color:#fff;font-family:var(--ds-font-ui);
  font-size:13px;font-weight:600;white-space:nowrap;flex:none;
}
.avatar{
  width:30px;height:30px;border-radius:50%;background:#fff;color:var(--ds-primary-500);
  display:flex;align-items:center;justify-content:center;font-family:var(--ds-font-ui);
  font-size:13px;font-weight:700;flex:none;
}
.logout-link{font-family:var(--ds-font-ui);font-size:13px;color:rgba(255,255,255,.65);text-decoration:none;white-space:nowrap}
.logout-link:hover{color:#fff}
.site-header{position:relative}
.site-header-right{display:flex;align-items:center;gap:32px}

/* ---------- 햄버거 메뉴 (좁은 화면에서 site-header-right를 드롭다운으로) ---------- */
.nav-toggle{
  display:none;flex:none;width:36px;height:36px;padding:0;border:0;background:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;transition:transform .15s ease,opacity .15s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .nav-toggle{display:flex}
  .site-header-right{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:150;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ds-primary-500);padding:8px 24px 24px;
    border-top:1px solid rgba(255,255,255,.15);
  }
  .site-header-right.open{display:flex}
  .site-nav{flex-direction:column;align-items:stretch;gap:0}
  .site-nav a{padding:12px 0}
  .site-nav__sep{display:none}
  .chip-trial{align-self:flex-start;margin:12px 0}
  .logout-link{padding:8px 0}
}

/* ---------- 작업 하위 탭 (다운로드 · 에디터 · 리터칭 의뢰) ---------- */
.work-tabs-bar{background:var(--ds-surface);border-bottom:1px solid var(--ds-line)}
.work-tabs.ds-tabs{gap:0}
.work-tabs .ds-tab{
  height:auto;padding:16px 20px;margin-bottom:-1px;font-weight:400;
  font-family:var(--ds-font-label);font-size:14px;border-bottom:none;
  text-decoration:none;
}
.work-tabs .ds-tab.is-active{font-weight:500;border-bottom:none}

/* ---------- ds-btn 크기 변형 · 비활성 상태 ---------- */
.ds-btn.block{display:flex;width:100%;justify-content:center}
/* .ds-btn.block과 동률 명시도라 순서 뒤 선언이 이김 — JS classList 토글(is-hidden)이 실제로 숨기게 함 */
.ds-btn.is-hidden{display:none}
.ds-btn.sm{height:37px;padding:0 16px;font-size:14px}
.ds-btn.btn-h54{height:54px}
.ds-btn:disabled{background:var(--ds-gray-200);color:var(--ds-gray-400);cursor:not-allowed}
/* REQ-33 — aria-disabled="true"는 disabled와 달리 클릭 이벤트를 막지 않는다(잠긴 조작도 메시지를
   띄우려면 클릭이 필요 — §4 구현규칙). 같은 흐림 외관만 공유한다. */
.ds-btn[aria-disabled="true"]{background:var(--ds-gray-200);color:var(--ds-gray-400)}
.ds-btn.next-btn{display:none}
/* REQ-33 — 업로드 요약 줄의 "차이 보기" 등, 텍스트 흐름 속에 섞이는 링크형 버튼 */
.link-btn{background:none;border:0;padding:0;margin-left:4px;color:var(--ds-primary-500);text-decoration:underline;cursor:pointer;font:inherit}

/* ---------- 아이콘 버튼 ---------- */
.icon-btn{
  width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ds-line);background:var(--ds-surface);color:var(--ds-gray-500);
  font-size:15px;cursor:pointer;
}
.icon-btn:hover{border-color:var(--ds-gray-600);color:var(--ds-gray-600)}

/* ---------- 칩 (단일/다중 선택 토글) ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button,
.chips span{
  background:var(--ds-surface);padding:8px 16px;border:1px solid var(--ds-line);font-family:var(--ds-font-ui);
  font-size:13px;font-weight:500;color:var(--ds-gray-500);cursor:pointer;
}
.chips button:hover,
.chips span:hover{border-color:var(--ds-gray-600);color:var(--ds-gray-600)}
.chips button.on,
.chips span.on{background:var(--ds-primary-500);border-color:var(--ds-primary-500);color:#fff}
/* ---------- 배경 색상 스와치 ---------- */
.retouch-request-text{min-height:160px}
.swatch-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.swatch{width:26px;height:26px;border-radius:50%;border:1px solid var(--ds-line);cursor:pointer;padding:0;-webkit-appearance:none;appearance:none}
.swatch:hover{border-color:var(--ds-gray-600)}
.swatch.on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ds-primary-500)}
/* REQ-33 — pointer-events:none 제거(재검증 결과 발견: 이게 남아있으면 잠긴 스와치 클릭이 JS까지
   도달하지 못해 M2 경고를 띄울 수 없었다). 흐림 표시(opacity)만 유지, 클릭 차단은 JS 핸들러가 담당. */
.swatch.is-locked{opacity:.4}
.swatch-custom{position:relative;overflow:hidden;background:conic-gradient(from 180deg,#ff0000,#ffae00,#fff400,#7dff00,#00ff90,#00d0ff,#0055ff,#7000ff,#ff00d0,#ff0000)}
/* 스와치 안에 <input type=color>가 중첩된 경우 (에디터) : 인풋은 투명하게 숨기고 부모의 그라데이션만 보이게 */
.swatch-custom input{position:absolute;inset:0;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;opacity:0;cursor:pointer}
/* <input type=color> 자체가 스와치인 경우 (리터칭 신청) : 네이티브 색상 박스를 투명하게 만들어 그라데이션이 비치게 */
input.swatch-custom{-webkit-appearance:none;appearance:none;border:1px solid var(--ds-line);padding:0;cursor:pointer}
input.swatch-custom::-webkit-color-swatch-wrapper{padding:0;background:transparent}
input.swatch-custom::-webkit-color-swatch{border:none;background:transparent}
input.swatch-custom::-moz-color-swatch{border:none;background:transparent}
.swatch-white{background:#ffffff}
.swatch-black{background:#1c1b18}
.swatch-lightgray{background:#e5e3de}
.swatch-ivory{background:#f4ecdd}
.swatch-beige{background:#ddc9a3}
.swatch-cream{background:#f4ecdd}
.swatch-tan{background:#ddc9a3}
.swatch-skyblue{background:#dceaf2}
.swatch-pink{background:#f6dde3}
.swatch-sagegreen{background:#9caf9a}
.swatch-navy{background:#1f2a44}
.swatch-brown{background:#5c4632}
.swatch-red{background:#c94f4f}
.swatch-yellow{background:#e8c547}

/* ---------- 드롭존 ---------- */
.dropzone{border:1px dashed var(--ds-gray-300);padding:44px 20px;text-align:center;background:var(--ds-gray-100);cursor:pointer}
.dropzone:hover{border-color:var(--ds-gray-400)}
.dropzone:focus-visible{outline:2px solid var(--ds-gray-600);outline-offset:2px}
.dropzone.is-dragover{border-color:var(--ds-primary-500);background:var(--ds-gray-200)}
.dropzone .icn{font-size:22px;margin-bottom:10px}
.dropzone .t1{font-family:var(--ds-font-ui);font-size:13px;font-weight:600;color:var(--ds-gray-600)}
.dropzone .t2{font-family:var(--ds-font-ui);font-size:12px;color:var(--ds-gray-400);margin-top:4px}
.dropzone.dropzone-pad-14{height:54px;padding:0;display:flex;align-items:center;justify-content:center}
.dropzone.dropzone-pad-12{padding:12px}
.dropzone.dropzone-compact{padding:28px 20px}
.dropzone .t1.t1-14{font-size:13px}

/* ---------- 사진 선택 썸네일 그리드 (에디터 · 리터칭 신청) ---------- */
.thumb-grid{display:grid;gap:8px}
.thumb-grid.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:480px){.thumb-grid.c3{grid-template-columns:repeat(2,1fr)}}
.thumb{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--ds-line);cursor:pointer;background:var(--ds-gray-100)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:not(.locked):not(.picked):not(.readonly):hover{outline:2px solid var(--ds-gray-300);outline-offset:-2px}
.thumb.readonly{cursor:default}
.thumb.picked{outline:2px solid var(--ds-primary-500);outline-offset:-2px}
.thumb.picked::after,.thumb.uploaded::after,.thumb.selected::after{content:'✓';position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;background:var(--ds-primary-500);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.thumb.selected{outline:2px solid var(--ds-primary-500);outline-offset:-2px}
.thumb.locked{cursor:not-allowed}
.thumb.locked img{filter:grayscale(1) brightness(.7)}
.thumb .lock-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(0,0,0,.25)}
.thumb .grip{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:grab}
.thumb .cover-flag{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.thumb .cover-flag:not(.num-flag){font-size:0}
.thumb .cover-flag:not(.num-flag)::before{content:'★';font-size:13px;transform:translateY(-1px)}
.thumb .cover-flag:hover{background:rgba(0,0,0,.7)}
.thumb.cover .cover-flag{background:var(--ds-primary-500)}
.thumb.cover::before{content:'대표';position:absolute;bottom:6px;left:6px;background:var(--ds-primary-500);color:#fff;font-size:10px;font-weight:600;padding:2px 6px}
/* REQ-35 — 사진 목록 순서 번호(1~30, thumbGridA·thumbGridB 공용)·개별 삭제(thumbGridA 전용) */
.thumb .order-num{position:absolute;top:6px;left:6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.thumb:has(.order-num).picked::after{content:none}
.thumb .vh-del{position:absolute;bottom:6px;right:6px;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:rgba(198,40,40,.88);color:#fff;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s ease}
.thumb:hover .vh-del{opacity:1}
.thumb.marked{outline:3px solid var(--ds-warn-500);outline-offset:-3px}
/* 리터칭 의뢰 다중선택(사진 목록 → 새 리터칭 신청) 표시 — .marked(일괄보정 선택)와 동시에 켜질 수 있어
   색으로만 구분한다(상호배타 모드라 실제로는 동시에 안 보이지만, 모드 전환 중 잔상 방지 차원). */
.thumb.retouch-marked{outline:3px solid #1959c9;outline-offset:-3px}
.thumb.readonly .thumb-dl{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:3px 8px;border-radius:2px;text-decoration:none;cursor:pointer}
.thumb.readonly .thumb-dl:hover{background:rgba(0,0,0,.8)}

/* ---------- 뱃지 (상태 표시) ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-family:var(--ds-font-ui);font-size:13px;font-weight:600;white-space:nowrap;vertical-align:middle}
.badge.mute{background:var(--ds-gray-100);color:var(--ds-gray-500)}
.badge.green{background:#e7f6ee;color:#127a4a}
.badge.amber{background:#fdf1de;color:#a8590a}
.badge.red{background:#fbe9e8;color:#c62828}

/* ---------- 표 안 파일 셀 (썸네일 + 이름) ---------- */
.file-cell{display:flex;align-items:center;gap:12px;text-align:left}
.row-thumb{width:40px;height:40px;overflow:hidden;flex-shrink:0;background:var(--ds-surface);border:1px solid var(--ds-line)}
.row-thumb img{width:100%;height:100%;object-fit:cover}
.file-cell .nm{font-family:var(--ds-font-ui);font-weight:600;font-size:14px;color:var(--ds-gray-600);white-space:nowrap}
.file-cell .sub{font-family:var(--ds-font-ui);font-size:12px;color:var(--ds-gray-400);margin-top:2px;white-space:nowrap}
.ds-table td .file-cell{justify-content:flex-start}

/* ---------- 다운로드 카드 ---------- */
.dl-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dl-card-top{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.card-t{font-family:var(--ds-font-ui);font-size:16px;font-weight:700;color:var(--ds-gray-600)}
.dl-meta{font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500)}
.dday{font-weight:700;color:inherit}
.dl-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dl-reissue-link{display:inline-block;margin-top:6px;font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);text-decoration:underline}
.dl-reissue-link:hover{color:var(--ds-gray-600)}

/* ---------- 상태 요약 (리터칭 진행 상태) ---------- */
.status-meta-vl{font-family:var(--ds-font-ui);font-size:15px;font-weight:600;color:var(--ds-gray-600)}
.status-meta-vl span{font-weight:400;color:var(--ds-gray-500);font-size:13px}
.follow-up{margin-top:24px;padding-top:20px;border-top:1px solid var(--ds-line);display:flex;flex-direction:column}
.follow-up p{font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);margin:0 0 12px}
.follow-up .ds-btn{align-self:flex-end}

/* ---------- 신청 상세 메타 / 메모 / 추가 요청 내역 ---------- */
.table-scroll{overflow-x:auto}
.kv-table{width:100%;border-collapse:collapse;margin-top:16px;border:1px solid var(--ds-line)}
.kv-table th,.kv-table td{padding:10px 14px;border:1px solid var(--ds-line);font-family:var(--ds-font-ui);font-size:14px;text-align:left;white-space:nowrap}
.kv-table th{width:100px;background:var(--ds-gray-100);color:var(--ds-gray-500);font-weight:500}
.kv-table td{color:var(--ds-gray-600);font-weight:500}

.memo-box{margin-top:8px;padding:14px 16px;border:1px solid var(--ds-line);background:var(--ds-gray-100);
  font-family:var(--ds-font-ui);font-size:14px;line-height:1.6;color:var(--ds-gray-600);white-space:pre-wrap}

.request-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.request-log-item{padding:14px 16px;border:1px solid var(--ds-line);background:var(--ds-gray-100)}
.request-log-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.request-log-date{font-family:var(--ds-font-ui);font-size:12px;color:var(--ds-gray-500)}
.request-log-text{font-family:var(--ds-font-ui);font-size:14px;line-height:1.6;color:var(--ds-gray-600)}
.request-log + .follow-up{margin-top:20px;padding-top:20px}
#requestLogDone + .follow-up{border-top:none;padding-top:0}
.state-view{display:none}
.state-view.on{display:block}

/* ---------- 폼 라벨 (리터칭 신청) ---------- */
.f-label{display:block;font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);margin:20px 0 8px;font-weight:500}
.f-label:first-child{margin-top:0}
#bgColorPicker .f-label{margin-top:32px}
.opt-note{color:var(--ds-gray-400);font-weight:400}
#bgColorPicker{display:none}
#bgColorPicker.show{display:block}

/* ---------- 멤버십 : 혜택 카드 ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.benefit-grid{grid-template-columns:1fr}}
.benefit-card{border:1px solid var(--ds-line);padding:28px;background:var(--ds-surface)}
.benefit-card .icn{width:44px;height:44px;background:var(--ds-gray-100);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:20px}
.benefit-card .nm{font-family:var(--ds-font-ui);font-size:15px;font-weight:700;margin-bottom:8px;line-height:1.4;color:var(--ds-gray-600)}
.benefit-card .ds{font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);line-height:1.6}

/* ---------- 멤버십 : 가입 방법 카드 ---------- */
.join-card{border:1px solid var(--ds-line);background:var(--ds-surface);padding:32px;display:flex;flex-direction:column;height:100%}
.join-card .r-s{margin:0 0 24px}
.join-card .ds-btn{margin-top:auto}
.jc-step{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--ds-line)}
.jc-step:last-of-type{border-bottom:0}
.jc-step .num{
  width:28px;height:28px;flex:none;background:var(--ds-primary-500);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--ds-font-ui);font-size:13px;font-weight:700;
}
.jc-step .tx b{display:block;font-family:var(--ds-font-ui);font-size:14px;font-weight:700;color:var(--ds-gray-600);margin-bottom:4px}
.jc-step .tx p{font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);margin:0;line-height:1.6}
.jc-pay{margin-top:24px;padding-top:24px;border-top:1px solid var(--ds-line)}
.jc-pay .r-t{font-family:var(--ds-font-ui);font-size:14px;font-weight:700;color:var(--ds-gray-600)}
.jc-pay .r-s{font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);line-height:1.6}
.jc-pay .r-v{font-family:var(--ds-font-ui);font-size:14px;font-weight:600;color:var(--ds-gray-600)}
.faq-note{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--ds-line)}
.faq-note p{font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);margin:0;line-height:1.6}
.highlight{background:var(--ds-primary-100);border:1px solid var(--ds-line);padding:24px 28px;margin:20px 0}
.highlight .h-t{font-family:var(--ds-font-ui);font-size:12px;font-weight:700;color:var(--ds-gray-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.highlight .h-v{font-family:var(--ds-font-ui);font-size:20px;font-weight:700;color:var(--ds-primary-500)}
.highlight .h-s{font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);margin-top:8px;white-space:nowrap}
@media (max-width:480px){.highlight .h-s{white-space:normal}}
.highlight .h-check{color:#127a4a;margin-right:6px}
.highlight .h-accent{color:var(--ds-primary-500)}

/* ---------- FAQ (문의) ---------- */
.panel.faq-panel{border:0;background:none;padding:0;display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--ds-line);background:var(--ds-surface);padding:16px 18px;cursor:pointer}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;font-family:var(--ds-font-ui);font-size:14px;font-weight:600;color:var(--ds-gray-600);cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chevron{flex:none;width:10px;height:6px;transition:transform .2s ease}
.faq-item[open] .faq-chevron{transform:rotate(180deg)}
.faq-item summary:focus-visible{outline:2px solid var(--ds-gray-600);outline-offset:2px}
.faq-body{padding-top:10px}
.faq-body p{margin:0;font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);line-height:1.6}
.faq-q-row{display:flex;align-items:center;gap:10px}
.td-ellipsis{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-muted{color:var(--ds-gray-400)}
.td-sub{font-size:13px;font-weight:400;color:var(--ds-gray-400)}

/* ---------- 내 문의 목록(아코디언) ---------- */
.inq-summary-info{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.inq-type{font-family:var(--ds-font-ui);font-size:14px;font-weight:600;color:var(--ds-gray-600)}
.inq-date{font-family:var(--ds-font-ui);font-size:13px;font-weight:400;color:var(--ds-gray-400)}
.inq-row{display:flex;gap:12px;padding:6px 0}
.inq-tag{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--ds-primary-500);color:#fff;font-family:var(--ds-font-ui);font-size:13px;font-weight:700;line-height:1}
.inq-row p{margin:0;padding-top:1px;font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-600);line-height:1.6}
.faq-group-h{font-family:var(--ds-font-ui);font-size:14px;font-weight:700;color:var(--ds-gray-600);margin:32px 0 12px}
h2.section-title + .faq-group-h{margin-top:12px}

/* ---------- 문의 페이지(page-inquiry) 폰트 확대 ---------- */
.page-inquiry .page-sub{font-size:15px}
.page-inquiry .faq-group-h{font-size:16px}
.page-inquiry .faq-item summary{font-size:16px}
.page-inquiry .faq-body p{font-size:15px}
.page-inquiry .inq-type{font-size:16px}
.page-inquiry .inq-date{font-size:14px}
.page-inquiry .inq-row p{font-size:15px}
.page-inquiry .inq-tag{width:22px;height:22px;font-size:13px}
.page-inquiry .badge{font-size:13px}
.copy-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.copy-row code{flex:1 1 auto;overflow-wrap:anywhere;background:var(--ds-gray-100);padding:6px 10px;font-family:var(--ds-font-mono);font-size:13px;color:var(--ds-gray-600)}
.info-callout{background:var(--ds-gray-100);border:1px solid var(--ds-line);padding:16px 20px;margin-top:16px}
.info-callout h4{margin:0 0 6px;font-family:var(--ds-font-ui);font-size:13.5px;font-weight:700;color:var(--ds-gray-600)}
.info-callout p{margin:0;font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);line-height:1.6}
.info-callout p + p{margin-top:8px}

/* ---------- 페이지네이션 (관리자·고객 표 공용) ---------- */
.ds-pagination{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin:12px 0 24px;font-family:var(--ds-font-ui)}
.ds-pagination__info{font-size:13px;color:var(--ds-gray-500)}
.ds-pagination__btn{height:32px;padding:0 14px;border:1px solid var(--ds-line);background:var(--ds-surface);color:var(--ds-gray-600);font-size:13px;cursor:pointer}
.ds-pagination__btn:hover:not(:disabled){background:var(--ds-gray-100)}
.ds-pagination__btn:disabled{color:var(--ds-gray-400);cursor:not-allowed}

/* ---------- 로그인 / 본인인증 ---------- */
.auth-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;background:var(--ds-gray-100)}
.auth-brand{margin-bottom:32px}
.auth-brand img{height:28px;width:auto}
.auth-card-boxed{width:100%;max-width:480px}
.auth-card-boxed.pending{display:none}
.screen{display:none}
.screen.on{display:block}
.auth-box{background:var(--ds-surface);border:1px solid var(--ds-line);padding:40px 32px;text-align:center}
.auth-box h1{font-family:var(--ds-font-ui);font-size:20px;font-weight:700;color:var(--ds-gray-600);margin:0 0 8px}
.auth-box .lead{font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);margin:0 0 28px;line-height:1.6}
.verify-fields{margin:20px 0;text-align:left}
.verify-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--ds-line);font-family:var(--ds-font-ui);font-size:13px}
.verify-row:last-child{border-bottom:0}
.vf-label{color:var(--ds-gray-500)}
.vf-value{color:var(--ds-gray-600);font-weight:600}
.vf-value.mute{color:var(--ds-gray-400);font-weight:400}
.next-btn{display:none;margin-top:12px}
.empty-inline{padding:20px 0}
.empty-inline .ic{font-size:32px;margin-bottom:16px}
.empty-inline h3{font-family:var(--ds-font-ui);font-size:16px;font-weight:700;color:var(--ds-gray-600);margin:0 0 8px}
.empty-inline p{font-family:var(--ds-font-ui);font-size:13px;color:var(--ds-gray-500);margin:0 0 24px;line-height:1.6}