/* 컴플레인 대응 가이드 — 공공 안내문 톤. 밝은 바탕, 강조색 하나(진한 청록), 본문 17px, 최대 폭 760px.
   화면: ~767 모바일 · 768~1023 태블릿 · 1024~ PC(가이드 상세의 사업자/소비자 2단) */

:root {
  color-scheme: light dark;   /* 스크롤바·기본 위젯도 OS 테마를 따르게 */
  --bg: #f7f8f7;
  --surf: #fff;
  --ink: #1f2933;
  --mut: #5f6b76;
  --line: #dfe4e6;
  --acc: #0f766e;
  --acc-bg: #e6f4f2;
  --acc-h: #0b5d57;     /* .search button:hover — 박아 두었던 값 */
  --seller: #0f766e;
  --consumer: #1d4ed8;
  --consumer-bg: #e8eefc;
  --onfill: #fff;       /* 색을 채운 바탕 위에 얹는 글자(아이콘·버튼·번호 원) */
  --warn-bg: #fff8e6;   /* .disclaimer — 박아 두면 다크에서 노란 판이 그대로 남는다 */
  --warn-line: #f1dc9a;
  --r: 8px;
  --gutter: 24px;
  --max: 760px;

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리키므로 아래 다크 블록이 그대로 따라간다(G:\workspace\DESIGN.md '토큰').
     실측(2026-10-16, WCAG): 라이트 --ink/--surf 14.76 · --mut/--surf 5.45 · --mut/--bg 5.12 · --onfill/--acc 5.47
                             다크   --ink/--surf 13.73 · --mut/--surf 6.75 · --mut/--bg 7.36 · --onfill/--acc 7.17 */
  --fb-bg: var(--bg);
  --fb-surface: var(--surf);
  --fb-ink: var(--ink);
  --fb-muted: var(--mut);
  --fb-line: var(--line);
  --fb-accent: var(--acc);
  --fb-on-accent: var(--onfill);
  --fb-display: inherit;   /* 웹폰트는 Noto Sans KR 하나(본문) — 제목도 같은 글꼴의 굵기로 */
  --fb-max: var(--max);    /* 본문 폭과 같게(1024 이상에서 960) */
}

* { box-sizing: border-box; }
/* 🔥 부드러운 스크롤도 모션이다 — 멈춤을 요청한 사람에게는 끈다(2026-09-30).
   `animation`·`transition` 을 끄는 것만으로는 이 속성이 안 꺼진다. 이 파일에서
   모션은 이것 하나뿐이라 블록도 이 한 줄만 둔다. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.7 "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--acc); }
/* 링이 a 에만 걸려 있어 버튼·입력·summary(FAQ 펼치기)는 키보드로 위치를 알 수 없었다.
   --acc 는 바탕 5.14 · 카드 5.47, 다크 7.17 · 6.58. */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
p, ul, ol, h1, h2, h3, figure, blockquote { margin: 0; }
img { max-width: 100%; }   /* 가이드 본문(data/guides/*.md)에 이미지가 들어와도 칸을 넘지 않게 */
ul, ol { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.mut { color: var(--mut); font-size: 15px; }
.lead { font-size: 17px; color: var(--mut); }

/* 상단 — 틀은 fb.css 의 .fb-nav. 로고(.mark)만 이 사이트 것(푸터 브랜드 칸도 같다) */
.mark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--acc); }
.mark__icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--acc); color: var(--onfill); font-size: 15px; }
.fb-foot a.mark { color: var(--acc); }

/* 본문 골격 — 절 제목은 좌측 굵은 세로줄 */
.page { padding-block: 32px 56px; display: flex; flex-direction: column; gap: 40px; }
.sec { display: flex; flex-direction: column; gap: 16px; }
.sec__t { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; padding-left: 14px; border-left: 5px solid var(--acc); }
h1.sec__t { font-size: 26px; }
.sec__t--s { font-size: 18px; margin-top: 8px; }
.crumb { font-size: 14px; color: var(--mut); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: -24px; }
.crumb a:hover { text-decoration: underline; }

/* 홈 — 히어로 틀은 fb.css 의 .fb-hero, 그 안의 주 행동이 검색 폼이다 */
.fb-hero__actions .search { flex: 1 1 100%; max-width: 560px; }
.search { display: flex; gap: 8px; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surf); color: var(--ink); }
/* outline 을 끄고 --acc-bg 3px 로 대신하고 있었는데 그 링은 라이트 1.13 · 다크 1.20 이라
   사실상 안 보인다. 테두리·후광 강조는 그대로 두고 포커스 표시는 위 공통 링이 그린다. */
.search input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-bg); }
.search button { font: inherit; font-weight: 700; padding: 12px 20px; border: 0; border-radius: var(--r); background: var(--acc); color: var(--onfill); cursor: pointer; }
.search button:hover { background: var(--acc-h); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 상황 칩·분류 칩은 이 화면의 주 이동 수단이다 — 25.5+16=41.5px 로 44 에 못 미쳤다. */
.chips a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surf); }
.chips a:hover, .chips a:focus-visible { border-color: var(--acc); color: var(--acc); background: var(--acc-bg); }
.boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.box { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.box__t { font-size: 17px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }
.box__t small { font-size: 13px; font-weight: 400; color: var(--mut); }
.box__list { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
/* 줄 전체가 링크다. 25.5px 이라 padding 으로 44px 까지 키운다 — inline-flex 로 바꾸면
   text-overflow: ellipsis 가 먹지 않으므로 display: block 을 유지한다. */
.box__list a { display: block; min-height: 44px; padding-block: 9px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box__list a::before { content: "· "; color: var(--mut); }
.box__list a:hover { color: var(--acc); text-decoration: underline; }
.box__more { font-size: 14px; color: var(--acc); font-weight: 500; }
.ranked { counter-reset: n; display: flex; flex-direction: column; }
.ranked li { counter-increment: n; display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); position: relative; }
.ranked li::before { content: counter(n); flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--acc); color: var(--onfill); font-size: 13px; font-weight: 700; align-self: center; }
.ranked li:last-child { border-bottom: 0; }
.ranked a { font-weight: 500; }
/* 줄 전체가 링크다 — 번호·분류명까지 눌러도 그 가이드로 간다. HTML 은 그대로 두고 앵커만
   줄 전체로 펼친다(a 안에 a 가 생기지 않고 baseline 정렬도 그대로).
   ⚠️ 덮은 줄은 글자를 끌어 선택하기 어려워진다 — 제목 줄에만 쓴다. */
.ranked li a::after { content: ""; position: absolute; inset: 0; }
.ranked small { font-size: 13px; color: var(--mut); }
.agencies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.agency { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; min-width: 0; }
.agency__n { font-weight: 700; font-size: 16px; }
.agency__p { font-size: 20px; font-weight: 700; color: var(--acc); font-variant-numeric: tabular-nums; }
.agency__u { color: var(--mut); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agency__d { color: var(--mut); font-size: 14px; }

/* 목록 카드 */
.glist { display: flex; flex-direction: column; gap: 10px; }
.gcard { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.gcard__t { font-size: 18px; font-weight: 700; }
.gcard__t:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 카드 전체가 그 가이드 링크다. HTML 은 그대로 두고 제목 앵커를 카드 전체로 펼친다 —
   a 안에 a 를 넣지 않으므로 아래 분류 칩(a.tag--cat)이 따로 살아 있다(position 으로 위에 올린다).
   ⚠️ 덮은 카드는 요약 글자를 끌어 선택하기 어려워진다 — 누르러 온 카드라서 그렇게 둔다. */
.gcard__t::after { content: ""; position: absolute; inset: 0; }
.gcard__s { font-size: 15px; color: var(--mut); }
.gcard__m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; position: relative; }
.tag { display: inline-block; font-size: 13px; padding: 2px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--mut); }
.tag--cat { background: var(--acc-bg); border-color: transparent; color: var(--acc); font-weight: 500; }

/* 가이드 상세 */
.guide { display: flex; flex-direction: column; gap: 40px; }
.guide__head { display: flex; flex-direction: column; gap: 12px; }
.guide__t { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.guide__sit { display: flex; flex-wrap: wrap; gap: 6px; }
.guide__nav { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; font-weight: 500; color: var(--acc); border-top: 1px solid var(--line); padding-top: 12px; }
.guide__nav a { text-decoration: underline; text-underline-offset: 3px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.steps { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.steps--seller { border-top: 4px solid var(--seller); }
.steps--consumer { border-top: 4px solid var(--consumer); }
.steps--consumer .sec__t { border-left-color: var(--consumer); }
.prose { display: flex; flex-direction: column; gap: 12px; line-height: 1.75; }
.prose--s { font-size: 15px; gap: 8px; }
.prose h3 { font-size: 17px; font-weight: 700; margin-top: 8px; }
.prose ul { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.prose ol { padding-left: 0; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.prose ol li { counter-increment: s; position: relative; padding-left: 38px; }
.prose ol li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--acc); color: var(--onfill); font-size: 14px; font-weight: 700; }
.steps--consumer .prose ol li::before { background: var(--consumer); }
.prose a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.prose h2 { font-size: 19px; font-weight: 700; margin-top: 12px; padding-left: 12px; border-left: 4px solid var(--acc); }
.script { display: flex; flex-direction: column; gap: 4px; }
.script__who { font-size: 13px; font-weight: 700; color: var(--acc); letter-spacing: .02em; }
.script__q { background: var(--surf); border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: 0 var(--r) var(--r) 0; padding: 14px 18px; user-select: all; }
.check { display: flex; flex-direction: column; gap: 8px; }
.check li { position: relative; padding-left: 30px; }
.check li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border: 2px solid var(--acc); border-radius: 4px; }
.law { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.law__t { font-size: 17px; font-weight: 700; }
.law__t a:hover { text-decoration: underline; }
.law__t small { font-size: 14px; font-weight: 400; color: var(--mut); }
.law__src { font-size: 14px; color: var(--acc); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.faq { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 0 18px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; list-style: none; position: relative; padding-right: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; color: var(--acc); font-size: 20px; font-weight: 400; }
.faq[open] summary::after { content: "−"; }
.faq p { padding: 0 0 16px; color: var(--ink); }
.disclaimer { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 14px 18px; font-size: 15px; }

/* 푸터 — 틀은 fb.css 의 .fb-foot */
.foot__note { max-width: 60ch; }

@media (min-width: 1024px) {
  :root { --max: 960px; }
  .sec, .guide, .glist, .prose, .lead, .crumb { max-width: 760px; }
  .guide .sec, .guide .two { max-width: 960px; }
  .two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .box__t, .box__list { max-width: 100%; }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .page { padding-block: 20px 40px; gap: 32px; }
  .mark { font-size: 17px; }
  .guide__t { font-size: 24px; }
  h1.sec__t { font-size: 23px; }
  .boxes, .agencies { grid-template-columns: minmax(0, 1fr); }
  .search { flex-direction: column; }
  .search button { padding: 12px; }
  .steps { padding: 16px; }
}

/* 다크 — OS 설정만 따른다(수동 토글은 쿠키·JS 가 필요해 넣지 않았다).
   청록 브랜드는 색상(H 175°)을 고정하고 채도를 내리고 명도를 올려 대비만 맞췄다(L 26→45).
   사업자/소비자 구분색도 같은 방식이라 두 단(.steps--seller/--consumer)의 대비가 유지된다. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111416; --surf: #191d20; --ink: #e3e8ea; --mut: #9aa5ad; --line: #2a3034;
    --acc: #35b3a5; --acc-bg: #10302c; --acc-h: #5ecec0; --seller: #35b3a5;
    --consumer: #7ba7f5; --consumer-bg: #17223a;
    --onfill: #111416;   /* 라이트와 정반대 — 밝아진 청록 위에는 어두운 글자가 읽힌다 */
    --warn-bg: #2b2417; --warn-line: #5a4a22;
  }
}

/* 쿠팡 파트너스 칸(coupang.py) — 이 사이트 토큰만 쓴다. */
.cpn { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); }
.cpn__h { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.cpn__d { margin: 4px 0 8px; font-size: 12px; color: var(--mut); }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--line); }
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 0; }
.cpn__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--acc); font-size: 14px; font-weight: 700; }
.cpn--top { margin: 12px 0 16px; padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 14px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 48px; height: 48px; }
.cpn--top .cpn__n { display: none; }
.page > .cpn { margin-block: 0; }  /* .page 가 flex gap 으로 블록 사이를 띄운다 — 바깥 여백을 더하면 두 배가 된다 */