/* =========================================================================
   DEPTHS COFFEE — region / national landers (generated by tools/seo.py)
   supply-<sido>.html · supply-<sido>-<sigungu>.html · supply-<hotspot>.html · supply-incheon-<구>-<동>.html
   national pages from site/assets/data/pages/*.json (supply · bean-wholesale · sample · cafe-count …) · oem · cafe-startup
   Components come from base.css (.crumb .shead .sec-num .panel .numlist .tbl .tbl--stack .blend-card
   .faq/.qa .frm .addr .actbar .btn .eyebrow); this file only lays them out.
   ========================================================================= */
@layer pages {

  body.pg-region .acc { color: var(--acc); }
  body.pg-region .rg-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px,2.8vw,34px); }
  body.pg-region .rg-cap { max-width: 760px; margin-top: 14px; font: 400 11px/1.75 var(--mono); letter-spacing: .03em; color: var(--ink-62); }
  body.pg-region .rg-cap a, body.pg-region .rg-src a, body.pg-region .rg-prose a, body.pg-region .rg-list a,
  body.pg-region .rg-dt td a, body.pg-region .ans a, body.pg-region .rg-top .lead a {
    color: var(--ink); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; }
  body.pg-region :is(.rg-cap, .rg-src, .rg-prose, .rg-list, .rg-dt td, .ans, .rg-top .lead) a:hover { color: var(--acc); }

  /* ==== TOP ============================================================= */
  body.pg-region .rg-top h1 { margin-top: 16px; font-size: clamp(36px,5vw,68px); line-height: 1.04; letter-spacing: -.05em; word-break: keep-all; }
  body.pg-region .rg-top .lead { max-width: 660px; margin-top: 18px; font-size: clamp(15px,1.2vw,17px); line-height: 1.78; color: var(--ink-66); word-break: keep-all; }
  body.pg-region .rg-head { padding-block: clamp(20px,2.8vw,38px) clamp(34px,5vw,62px); }

  /* region: copy + Supply Terms aside */
  body.pg-region .rg-split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(24px,4vw,64px); padding-block: clamp(20px,2.8vw,38px) clamp(34px,5vw,62px); }
  body.pg-region .rg-copy { flex: 1.7 1 420px; min-width: 0; }
  body.pg-region .rg-terms { position: sticky; top: calc(var(--head-h) + 20px); flex: 1 1 300px; max-width: 420px; }
  body.pg-region .rg-terms .panel-head { padding: 16px 18px; }
  body.pg-region .rg-ph { font-family: var(--grot); font-stretch: var(--st-l); font-weight: 800; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase; }
  body.pg-region .rg-terms-in { padding: 6px 18px 18px; }
  body.pg-region .rg-terms .numlist { border-top: 0; }
  body.pg-region .rg-terms .numlist .f { padding: 11px 0; font-size: 12px; }
  body.pg-region .rg-from { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ink); }
  body.pg-region .rg-from .k { font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-62); }
  body.pg-region .rg-from .v { font-family: var(--grot); font-stretch: var(--st-xl); font-weight: 800; font-size: clamp(26px,2.6vw,34px); line-height: 1; letter-spacing: -.03em; }
  body.pg-region .rg-from .v small { margin-left: 4px; font: 600 12px/1 var(--kr); letter-spacing: 0; color: var(--acc); }
  body.pg-region .rg-terms .btn { margin-top: 16px; }

  /* ==== SECTIONS ======================================================== */
  body.pg-region .rg-body { padding-block: clamp(24px,3vw,40px) clamp(34px,5vw,62px); }
  body.pg-region .rg-body > * + * { margin-top: clamp(18px,2vw,26px); }
  body.pg-region .rg-body > .rg-cap, body.pg-region .rg-body > .rg-src { margin-top: 14px; }

  /* prose + lists (national manuscripts, memos) */
  body.pg-region :is(.rg-prose, .rg-memo) { max-width: 760px; }
  body.pg-region :is(.rg-prose, .rg-memo) p { font-size: 16px; line-height: 1.85; color: var(--ink-70); word-break: keep-all; }
  body.pg-region :is(.rg-prose, .rg-memo) p + p { margin-top: 14px; }
  body.pg-region .rg-list { max-width: 820px; margin: 0; padding: 0; list-style: none; counter-reset: rg; border-top: 1px solid var(--ink); }
  body.pg-region .rg-list li { position: relative; padding: 16px 0 16px 44px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.75; color: var(--ink-70); counter-increment: rg; word-break: keep-all; }
  body.pg-region .rg-list li::before { content: counter(rg, decimal-leading-zero); position: absolute; top: 18px; left: 0; font: 600 11.5px/1.4 var(--mono); letter-spacing: .08em; color: var(--acc); }
  body.pg-region .rg-note { max-width: 760px; padding: 16px 18px; border-left: 3px solid var(--acc); background: var(--panel); font-size: 15px; line-height: 1.75; color: var(--ink-70); word-break: keep-all; }
  body.pg-region .rg-checked { max-width: 760px; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
  body.pg-region .rg-checked li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.7; }
  body.pg-region .rg-checked small { display: block; margin-top: 4px; font: 400 11px/1.5 var(--mono); letter-spacing: .03em; color: var(--ink-62); }

  /* cafe facts (카페 현황) */
  body.pg-region .rg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
  body.pg-region .rg-facts > div { display: flex; flex-direction: column; gap: 14px; padding: clamp(16px,2vw,24px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  body.pg-region .rg-facts dt { font: 400 11px/1.5 var(--mono); letter-spacing: .08em; color: var(--ink-62); }
  body.pg-region .rg-facts dd { margin: 0; font-family: var(--grot); font-stretch: var(--st-xl); font-weight: 800; font-size: clamp(30px,3.6vw,46px); line-height: 1; letter-spacing: -.03em; }
  body.pg-region .rg-facts dd small { margin-left: 4px; font: 600 13px/1 var(--kr); letter-spacing: 0; color: var(--acc); }
  body.pg-region .rg-src { font: 400 11px/1.75 var(--mono); letter-spacing: .03em; color: var(--ink-62); }

  /* data + manuscript tables */
  body.pg-region .rg-tbl { border-color: var(--line); }
  body.pg-region .rg-dt { min-width: 0; font-size: 14px; }
  body.pg-region .rg-dt th { padding: 11px 16px; }
  body.pg-region .rg-dt td { padding: 13px 16px; line-height: 1.6; vertical-align: top; word-break: keep-all; }
  body.pg-region .rg-dt td.num { font-family: var(--grot); font-stretch: var(--st-l); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
  body.pg-region .rg-dt td:first-child { font-weight: 600; color: var(--ink); }
  body.pg-region .rg-dt tbody tr:hover { background: var(--panel-2); }
  body.pg-region .rg-dt .rg-sub { display: block; margin-bottom: 2px; font: 400 10.5px/1.4 var(--mono); letter-spacing: .02em; color: var(--ink-62); }
  body.pg-region .rg-tbl:has(.rg-dt:not(.tbl--stack)) { max-width: 820px; }

  /* delivery area (접힌 읍·면·동 목록) */
  body.pg-region .rg-deliv { max-width: 820px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
  body.pg-region .rg-deliv summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; }
  body.pg-region .rg-deliv summary::-webkit-details-marker { display: none; }
  body.pg-region .rg-deliv summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--acc); }
  body.pg-region .rg-deliv[open] summary::after { content: "−"; }
  body.pg-region .rg-deliv p { padding: 0 0 18px; font: 400 12.5px/1.9 var(--mono); letter-spacing: .01em; color: var(--ink-70); }

  /* nearby areas */
  body.pg-region .rg-near { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  body.pg-region .rg-near li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  body.pg-region .rg-near a { flex: 1 1 auto; min-height: 44px; padding: 16px 0 16px 16px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
  body.pg-region .rg-near a:hover { color: var(--acc); }
  body.pg-region .rg-near span { flex: none; padding-right: 16px; font: 400 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-62); }

  /* product cards (product_links) */
  body.pg-region .rg-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  body.pg-region .rg-cards .blend-card { position: relative; border-bottom: 1px solid var(--line); }
  body.pg-region .rg-cards h3 { margin-top: 24px; }
  body.pg-region .rg-cards h3 a { color: inherit; }
  body.pg-region .rg-cards h3 a::after { content: ""; position: absolute; inset: 0; }  /* whole card is the link target */
  body.pg-region .rg-cards .top { flex-wrap: wrap; }
  body.pg-region .rg-cards .use { white-space: normal; }
  @media (min-width: 1100px) { body.pg-region .rg-cards:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* sample form (b2b.css 의 신청서 레이아웃을 이 페이지 범위로) */
  body.pg-region .rg-form { max-width: 820px; }
  body.pg-region .rg-form .frm { container-type: inline-size; }
  body.pg-region .rg-form .frm > .field.col { padding: 14px 0; border-bottom: 1px solid var(--line); }
  body.pg-region .rg-form .frm .field > :is(.opt-row--grind, .addr) { margin-top: 10px; }
  body.pg-region .rg-form .frm .field > select.inp { margin-top: 8px; }
  body.pg-region .rg-form .frm .field > textarea.inp { display: block; min-height: 96px; margin-top: 10px; padding: 12px 13px; }
  body.pg-region .rg-form .frm .field > :is(select, textarea).inp:focus { box-shadow: none; }
  body.pg-region .rg-form .opt-row--grind label { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 10px 14px; border: 1.5px solid var(--line); color: var(--ink-62); font: 400 12px/1.2 var(--mono); white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
  body.pg-region .rg-form .opt-row--grind label:hover { border-color: var(--ink); color: var(--ink); }
  body.pg-region .rg-form .opt-row--grind label:has(:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
  body.pg-region .rg-form .opt-row--grind label:has(:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
  body.pg-region .rg-form .agree { padding: 16px 0 0; }
  body.pg-region .rg-form .frm-submit.btn { margin-top: 18px; padding-block: 17px; }
  body.pg-region .rg-form .form-done { padding: clamp(28px,4vw,48px) clamp(22px,3vw,36px); border: 1px solid var(--ink); }
  body.pg-region .rg-form .form-done:focus { outline: none; }
  body.pg-region .rg-form .form-done .mk { font-family: var(--grot); font-stretch: var(--st-xl); font-weight: 800; font-size: 48px; line-height: 1; color: var(--acc); }
  body.pg-region .rg-form .form-done h3 { margin-top: 18px; font-size: clamp(22px,2.6vw,28px); line-height: 1.2; letter-spacing: -.04em; }
  body.pg-region .rg-form .form-done p { margin-top: 10px; font: 400 12px/1.8 var(--mono); letter-spacing: .02em; color: var(--ink-62); }
  @container (max-width: 520px) {
    body.pg-region .rg-form .frm-row > .field { padding-inline: 0; border-left: 0; }
    body.pg-region .rg-form .frm-row > .field + .field { border-top: 1px solid var(--line-soft); }
  }

  /* FAQ: numbered side head */
  body.pg-region .faq-side .sec-num { display: block; margin-bottom: 20px; font-family: var(--grot); font-stretch: var(--st-xl); font-weight: 800; font-size: clamp(40px,7vw,86px); line-height: .8; letter-spacing: -.04em; color: var(--acc); }
  body.pg-region .ans p { word-break: keep-all; }

  /* mobile action bar */
  body.pg-region .actbar .btn--acc { flex: 1 1 auto; }
  body.pg-region .actbar .btn--ghost { flex: none; }

  /* ==== ≤760 ============================================================ */
  @media (max-width: 760px) {
    body.pg-region .crumb { padding: 10px 0; font-size: 10px; }
    body.pg-region .rg-top h1 { margin-top: 12px; font-size: 32px; line-height: 1.12; letter-spacing: -.045em; }
    body.pg-region .rg-top .lead { margin-top: 12px; font-size: 14.5px; line-height: 1.75; }
    body.pg-region .rg-head { padding-block: 10px 26px; }
    body.pg-region .rg-top .rg-acts { display: none; }  /* the fixed actbar carries the CTA */
    body.pg-region .rg-split { gap: 22px; padding-block: 10px 26px; }
    body.pg-region .rg-copy { flex-basis: 100%; }
    body.pg-region .rg-terms { position: static; flex-basis: 100%; max-width: none; }
    body.pg-region .rg-terms .btn { display: none; }
    body.pg-region .rg-ph { font-size: 15px; }

    /* number + eyebrow on one row, h2 below */
    body.pg-region .shead:has(.sec-num) { align-items: flex-end; column-gap: 12px; row-gap: 0; }
    body.pg-region .shead .t { display: contents; }
    body.pg-region .shead .t > .eyebrow { flex: 1 1 auto; min-width: 0; }
    body.pg-region .shead .t > h2 { flex: 1 1 100%; }
    body.pg-region .rg-body { padding-block: 18px 30px; }

    body.pg-region :is(.rg-prose, .rg-memo) p { font-size: 15px; line-height: 1.8; }
    body.pg-region .rg-list li { padding: 14px 0 14px 34px; font-size: 14.5px; }
    body.pg-region .rg-list li::before { top: 16px; }
    body.pg-region .rg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.pg-region .rg-facts > div { gap: 10px; padding: 14px; }
    body.pg-region .rg-facts dd { font-size: 28px; }
    body.pg-region .rg-dt { font-size: 13.5px; }
    body.pg-region .rg-dt th, body.pg-region .rg-dt td { padding-inline: 12px; }
    body.pg-region .rg-dt.tbl--stack td { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; text-align: right; }
    body.pg-region .rg-dt.tbl--stack td:first-child { display: block; padding-bottom: 6px; font-size: 15px; text-align: left; }
    body.pg-region .rg-dt.tbl--stack td[data-label]::before { flex: none; max-width: 42%; text-align: left; }
    body.pg-region .rg-tbl:has(.tbl--stack) { border-inline: 0; }
    body.pg-region .rg-near { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.pg-region .rg-near li { flex-direction: column; align-items: flex-start; gap: 0; }
    body.pg-region .rg-near a { padding: 14px 12px 4px; font-size: 14px; }
    body.pg-region .rg-near span { padding: 0 12px 14px; }
    body.pg-region .rg-cards { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; border: 0; scroll-snap-type: x proximity; scrollbar-width: none; }
    body.pg-region .rg-cards::-webkit-scrollbar { display: none; }
    body.pg-region .rg-cards > .blend-card { flex: none; width: 250px; border: 1px solid var(--line); scroll-snap-align: start; }
    body.pg-region .faq-side .sec-num { margin-bottom: 14px; font-size: 40px; }
  }
}