/* RED Guide — 배송정책 페이지 전용 스타일 (content_sp1(.en).html + sp-1.html)
   원본 스크랩 HTML의 인라인 스타일을 대체. 색은 전부 토큰/변수 → 다크모드 자동 대응.
   표↔카드 전환은 뷰포트가 아닌 "본문 컬럼 폭" 기준(컨테이너 쿼리) — 좌측 사이드바 280px 때문에
   뷰포트 기준으로 하면 900~1200px 구간에서 표가 깨진 채 노출됨. */

.sp-wrap{
  --sp-top:64px;                 /* 상단 헤더 높이 */
  --sp-bar:56px;                 /* 검색바 블록 높이 */
  --sp-group-h:34px;             /* 제품군 헤더 높이 */
  --sp-head-bg:#333;             /* 제품군 헤더 */
  --sp-head-fg:#fff;
  --sp-th-bg:#f5f6f8;            /* 표 헤더 */
  --sp-border:#dcdfe4;
  --sp-card-line:#eceef1;
  --sp-key:#8a9099;              /* 카드 라벨 */
  --sp-surface:#fff;             /* 검색바 배경(스크롤 시 아래 내용 가림) */
  font-size:14px;
}
html.dark .sp-wrap{
  --sp-head-bg:#252b34; --sp-head-fg:#f2f4f7;
  --sp-th-bg:#15181e; --sp-border:#2c313a; --sp-card-line:#262a31;
  --sp-key:#9aa0a9; --sp-surface:#0e1014;
}

/* ── 폭 정책 ──
   본문 폭은 기존 가이드 규격(.docs-prose 740px)을 그대로 따른다.
   표는 colgroup 을 % 비율로 바꿔(빌드 시 변환) 좁아진 컬럼에서도 표 형태를 유지한다. */

/* ── 업데이트 일자 ── */
.sp-wrap .sp-updated{margin:-6px 0 14px;font-size:13px;color:var(--prose-muted)}

/* ── 검색바 (기존 가이드 상단 .search 디자인 준용) ── */
.sp-searchbar{position:sticky;top:var(--sp-top);z-index:4;background:var(--sp-surface);
              padding:8px 0 10px;margin:0 0 8px}
.sp-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;
           border:1px solid #d6d9e0;border-radius:12px;background:var(--sp-surface);
           transition:border-color .12s, box-shadow .12s}
.sp-search:focus-within{border-color:#b9bdc2;box-shadow:0 0 0 3px rgba(28,29,31,.05)}
html.dark .sp-search{border-color:#2c313a;background:#1b1f26}
html.dark .sp-search:focus-within{border-color:#3a4150;box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.sp-search-ico{display:flex;flex:none;color:var(--prose-muted)}
.sp-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
                 font-size:15px;color:var(--prose-body)}
.sp-search input::placeholder{color:var(--prose-muted)}
.sp-clear{flex:none;width:24px;height:24px;border:0;border-radius:50%;background:transparent;
          color:var(--prose-muted);font-size:18px;line-height:1;cursor:pointer}
.sp-clear:hover{background:var(--prose-quote-bg,#f1f3f5);color:var(--prose-body)}
html.dark .sp-clear:hover{background:#22272f}
.sp-result{margin:8px 2px 0;font-size:13px;color:var(--prose-muted)}
.sp-result b{color:var(--color-primary);font-weight:700}
.sp-noresult{padding:40px 12px;text-align:center;color:var(--prose-muted);font-size:14px;
             border:1px dashed var(--sp-border);border-radius:12px;margin:12px 0 24px}

/* ── 대분류(h2) / 안내 문구 ── */
.docs-prose .sp-h2{font-size:26px;margin:1.9em 0 .7em;scroll-margin-top:calc(var(--sp-top) + var(--sp-bar) + 12px)}
.docs-prose .sp-h2:first-of-type{margin-top:.6em}
.docs-prose .sp-notes{margin:0 0 1.4em;padding-left:1.2em;font-size:14px;color:var(--prose-muted);line-height:1.7}
.docs-prose .sp-notes li{margin:.3em 0}
.docs-prose .sp-note{font-size:13px;color:var(--prose-muted);margin:.6em 0 1em}

/* ── 제품군(h3) 접이식 헤더 ── */
.sp-sec{position:relative;margin:0 0 22px}
.docs-prose .sp-group{margin:0;font-size:15px;scroll-margin-top:calc(var(--sp-top) + var(--sp-bar) + 12px);
                      position:sticky;top:calc(var(--sp-top) + var(--sp-bar));z-index:3}
.sp-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
           height:var(--sp-group-h);padding:0 12px;border:0;border-radius:6px;cursor:pointer;
           background:var(--sp-head-bg);color:var(--sp-head-fg);
           font:inherit;font-size:15px;font-weight:600;letter-spacing:-0.2px;text-align:left}
.sp-toggle:hover{filter:brightness(1.12)}
.sp-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.sp-arrow{display:flex;align-items:center;transition:transform .15s ease}
.sp-toggle[aria-expanded="false"] .sp-arrow{transform:rotate(180deg)}
.sp-body{padding-top:10px}

/* ── 표 (원본 밀도 유지: 13px / 6px 8px) ── */
.sp-table-wrap{container-type:inline-size;width:100%;overflow-x:auto;margin:0 0 4px}
.docs-prose table.sp-table{width:100%;min-width:100%;table-layout:fixed;border:0;border-radius:0;
                           margin:0;font-size:13px;overflow:visible}
.docs-prose .sp-table th,.docs-prose .sp-table td{border:0.5px solid var(--sp-border);padding:6px 8px;
      text-align:left;vertical-align:top;word-break:break-word;line-height:1.5}
.docs-prose .sp-table th{background:var(--sp-th-bg);font-weight:600;color:var(--prose-heading)}
.docs-prose .sp-table tr:last-child td{border-bottom:0.5px solid var(--sp-border)}
.docs-prose .sp-table .ta-c{text-align:center}

/* ── 카드(좁은 폭) ── */
.sp-cards{display:none}
.sp-card{padding:12px 2px;border-bottom:1px solid var(--sp-card-line)}
.sp-row{display:flex;gap:10px;padding:5px 0;font-size:13px;line-height:1.55}
.sp-k{flex:0 0 96px;color:var(--sp-key)}
.sp-v{flex:1;min-width:0;color:var(--prose-body);word-break:break-word}
.sp-row:has(.sp-v:empty){display:none}                 /* 값 없는 줄 숨김 */

/* 본문 컬럼이 520px 미만이면 표 → 카드 (칸이 좁아 읽기 어려워지는 지점) */
@container (max-width:520px){
  .sp-table-wrap>table.sp-table{display:none}
  .sp-cards{display:block}
}
/* 컨테이너 쿼리 미지원 브라우저 폴백 */
@supports not (container-type:inline-size){
  /* 좌측 사이드바 280px 를 감안한 근사치: 뷰포트 ≤820px(사이드바 없음) 또는 ≤1040px(사이드바 있음) */
  @media (max-width:1040px) and (min-width:901px){
    .sp-table-wrap>table.sp-table{display:none}
    .sp-cards{display:block}
  }
  @media (max-width:620px){
    .sp-table-wrap>table.sp-table{display:none}
    .sp-cards{display:block}
  }
}

/* ── 검색 하이라이트 ── */
mark.sp-hl{background:rgba(254,47,72,.14);color:var(--color-primary);font-weight:700;
           border-radius:3px;padding:0 1px}

@media (max-width:560px){
  .sp-wrap{--sp-bar:52px}
  .sp-search{height:40px;padding:0 12px}
  .docs-prose .sp-h2{font-size:21px}
  .sp-k{flex:0 0 84px}
}