/* ══ 화면 조건별 규칙 – 여기 한 곳에 모은다 (2026-09-21) ══
   예전에는 파일마다 흩어져 @media 가 33블록이었다. 지금은 조건마다 한 블록, 여섯이다.
   ★ 이 파일은 index.html 에서 맨 마지막에 불린다. 뒤에 와야 넓은 화면 규칙을 이긴다.
     앞으로 옮기면 좁은 화면 규칙이 거의 다 진다.
   ★ 차례 – 720 → 430 → 380 → 터치 → 어두운 화면 → 움직임 끄기.
     380 은 430 안쪽이라 뒤에 둔다. 움직임 끄기는 늘 이겨야 해서 맨 끝.
   ★ 너비 값은 01-token.css 의 --bp-xs 380 · --bp-phone 430 · --bp-wide 720 과 같다.
   글자 크기를 줄이지 않는다 – 40대 후반부터 노안. */

/* ── PC – 넓은 화면 (720px 이상) ── */
@media (min-width:720px){
  /* ← 02-base.css 286줄(정리 전)에서 옮김 */
  /* ★ 2026-09-19 – 네 기둥을 한 줄에 넷으로 펴는 것은 PC 에서만. 폰은 두 줄(기본값). */
  .pillars{grid-template-columns:repeat(4,1fr)}
  /* ← 04-free.css 122줄(정리 전)에서 옮김 */
  .pairgan{grid-template-columns:1fr 1fr}
  /* ← 04-free.css 148줄(정리 전)에서 옮김 */
  .split{grid-template-columns:1fr 1fr}
  /* ← 04-free.css 161줄(정리 전)에서 옮김 */
  .vs{grid-template-columns:1fr 1fr}
  /* ← 04-free.css 207줄(정리 전)에서 옮김 */
  /* ★ 2026-09-19 – 딱지를 왼쪽 칸에 세우는 것은 PC 에서만. 폰에서는 본문 위 한 줄(기본값 · order:-1). */
  .rblk{grid-template-columns:6.5rem minmax(0,1fr);gap:0 1.4rem}.rnote{order:0}
  /* ← 05-paid.css 36줄(정리 전)에서 옮김 */
  /* ★ 2026-09-19 – 갈림 그림도 폰이 기본이다(세로 한 줄 · 왼쪽 선). PC 에서만 두 갈래로 편다. */
  .tpair{grid-template-columns:1fr 1fr;gap:.8rem;margin-left:0;padding-left:0;
    border-left:0;text-align:center}
  .tfork{height:1.5rem;max-width:24rem;grid-template-columns:1fr 1fr}
  .tfork::before{display:block}
  .tfork span:last-child{display:block}
  .tfork span::before{left:50%;height:.75rem}
  .tfork span::after{display:block}
  .tbranch::before{display:none}
  .tbranch .tnode{text-align:center}
  /* ← 05-paid.css 58줄(정리 전)에서 옮김 */
  /* 왜 #017 */
  .bhead{flex-direction:row;align-items:baseline}
  .bhead h3{flex:1 1 14rem}
  .bhead > span{margin-left:auto}
  /* ← 06-login.css 43줄(정리 전)에서 옮김 */
  /* ★ 2026-09-19 – 폰 위(431)가 아니라 PC(720)에서만 가로로. 크롬 창을 500px 로 좁히면 폰과 같아야 한다(대표님). */
  .gate .acts{flex-direction:row;align-items:center}
    .gate .acts .btn{width:auto}
  /* ← 08-gyeol-pq.css 334줄(정리 전)에서 옮김 */
  /* ★ 2026-09-19 – 위와 같은 까닭. 500px 에서도 폰과 같은 세로로 둔다. */
  .vopts{flex-direction:row;flex-wrap:wrap}
  .vopts .vopt{flex:1 1 0;min-width:0}
  /* ← 09-figure.css 23줄(정리 전)에서 옮김 */
  .bizmeta dt{flex-basis:7.5rem}
}

/* ── 폰 (430px 이하) ── */
@media (max-width:430px){
  /* ← 05-paid.css 321줄(정리 전)에서 옮김 */
  /* ── 좁은 화면에서 읽히게 ──
     보시는 분이 40~60대다. 11px 짜리 라벨과 24px 높이 링크는 이 나이대에 안 읽히고 안 눌린다.
     좁은 화면에서만 최소 크기를 올린다. 넓은 화면의 인상은 그대로 둔다. */
  #who-in,.who a{min-height:44px;padding:.4rem .9rem}
  .perblk .tag{font-size:var(--fs-xs)}
  .vsk{font-size:var(--fs-sm)}
  .foot{font-size:var(--fs-sm)}
  .foot code{font-size:var(--fs-sm)}
  .bizdisc,.bizmeta{font-size:var(--fs-sm)}
  /* 누르는 것은 손가락 하나가 들어가야 한다 */
  .bizlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 .1rem}
  .back{min-height:44px;padding:.2rem .1rem}
  .lawbox a,.okline a,.calhint a,.after a{display:inline-block;padding:.45rem 0;min-height:40px;
    line-height:1.9}
  /* ← 07-saju.css 107줄(정리 전)에서 옮김 */
  .basis summary{padding:1rem;gap:.7rem}
  /* ★ 2026-09-19 – 좁은 화면에서만 「자세히」로 달랐다. 글은 같게 두고 여백만 줄인다. */
  .basis summary::after{padding:.38rem .75rem;font-size:var(--fs-sm)}
  /* ← 07-saju.css 121줄(정리 전)에서 옮김 */
  .basis.sm summary{font-size:var(--fs-sm);padding:.5rem .7rem}
  .basis.sm summary::after{padding:.24rem .6rem}
}

/* ── 아주 좁은 폰 (380px 이하) ── */
@media (max-width:380px){
  /* ← 03-intro.css 210줄(정리 전)에서 옮김 */
  /* 아주 좁은 화면(320px 대)은 한 줄로 떨어뜨리고 키도 같이 낮춘다.
     두 칸일 때의 108px 를 그대로 두면 여섯 장이 첫 화면을 다 먹는다.
     예전에도 같은 이유로 이 규칙이 있었는데, 4a 선택자가 더 세서 그대로 두면 안 걸린다. */
  #s0 .ask{min-height:0;padding:11px 12px;gap:6px}
  /* ← 05-paid.css 282줄(정리 전)에서 옮김 */
  .p3v{margin-left:0;width:100%}
  /* ← 08-gyeol-pq.css 100줄(정리 전)에서 옮김 */
  .qdot{width:46px;height:46px}
  .qdot.s1,.qdot.s3{width:40px;height:40px}
  .qdot.s2{width:34px;height:34px}
  .qpick{min-height:54px;font-size:var(--fs-base)}
}

/* ── 손가락으로 누르는 기기 (pointer:coarse) ── */
@media (pointer:coarse){
  /* ← 05-paid.css 349줄(정리 전)에서 옮김 */
  /* ══ 누르는 자리 ══
     손가락으로 누르는 것은 44px 이상이어야 한다(애플·구글이 함께 쓰는 최소치).
     ★ 이 규칙을 화면 폭(max-width:480px)으로만 걸어두면 태블릿에서 빠진다.
       태블릿은 좁지 않지만 손가락으로 누른다. 폭이 아니라 「무엇으로 누르는가」로 묻는다.
       pointer:coarse = 손가락 · fine = 마우스.
     재는 자: node t_layout.mjs – 320/360/412/768/1280 을 다 본다. */
  .bizlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 .1rem}
  .back{min-height:44px;padding:.2rem .1rem}
  .lawbox a,.okline a,.calhint a,.after a{display:inline-block;padding:.45rem 0;min-height:40px;
    line-height:1.9}
  .bizmeta a{display:inline-flex;align-items:center;min-height:44px}
  .bizmore{min-height:44px}
  .agree{padding:.35rem 0}
  /* ← 06-login.css 56줄(정리 전)에서 옮김 */
  /* 왜 #022 */
  .who button,
  body.night .who button{min-height:44px;padding:.4rem .9rem}
}

/* ── 어두운 화면 (기기 설정) ── */
@media (prefers-color-scheme:dark){
  /* ← 01-token.css 60줄(정리 전)에서 옮김 */
  :root:not([data-theme="light"]){
    --bg:#0F1312; --surface:#161C1A; --surface-2:#1D2422; --sunken:#131817;
    --ink:#E9EEEC; --ink-2:#C0CAC7; --muted:#8C9A96; --faint:#828F8B;
    --accent:#189E88; --accent-soft:#152B27; --accent-ink:#54C9B1; --accent-line:#2C5A51;
    --rule:#27302D; --rule-2:#343E3B;
    --warn:#D8944B; --warn-soft:#2A2016; --warn-line:#4A3722;
    --gold:#C6A75E;
    --gold-grad:linear-gradient(135deg,#E3C27E 0%,#B8923F 100%); --gold-soft:rgba(198,167,94,.38);
    --dock-bg:#161618; --dock-line:rgba(198,167,94,.24); --head-bg:rgba(15,19,18,.86);
    --accent-ring:rgba(24,158,136,.35);
    --oh-mok:#5FBF91; --oh-hwa:#E2795E; --oh-to:#CBA75E; --oh-geum:#9BB0C0; --oh-su:#6BA6D8;
    --fr-red:#E88A73;
  }
  /* ← 08-gyeol-pq.css 253줄(정리 전)에서 옮김 */
  :root:not([data-theme=light]) .calerr{color:#F2B8B5}
}

/* ── 움직임 끄기 – 맨 끝에 두어 늘 이기게 ── */
@media (prefers-reduced-motion:reduce){
  /* ← 01-token.css 103줄(정리 전)에서 옮김 */
  body.night, body.night .prog{transition:none}
  /* ← 02-base.css 23줄(정리 전)에서 옮김 */
  section{animation:none}
  /* ← 03-intro.css 137줄(정리 전)에서 옮김 */
  .rule-gold{animation:none}
  /* ← 03-intro.css 191줄(정리 전)에서 옮김 */
  #s0 .ask{animation:none}
  /* ← 05-paid.css 229줄(정리 전)에서 옮김 */
  .ca.think::after{animation:none}
  /* ← 08-gyeol-pq.css 50줄(정리 전)에서 옮김 */
  .qbar i{transition:none}
  /* ← 08-gyeol-pq.css 106줄(정리 전)에서 옮김 */
  .qdot{transition:none}
  /* ← 08-gyeol-pq.css 385줄(정리 전)에서 옮김 */
  /* 움직임을 줄여 달라고 하신 분께는 점을 멈춰 세운다. 글은 그대로 바뀐다 */
  .wait{-webkit-backdrop-filter:none;backdrop-filter:none}
  .wdot i{animation:none;opacity:.75}
}