/* ============================================================
   R25-A 하위 페이지 공통 셸 — guide / promotion / faq / contact 전용.
   @TASK R25-A (2026-09-15) · @SPEC docs/planning/pages/R25-A-brief-20260915.md
   ⚠️ 홈(index.html)은 이 파일을 로드하지 않는다. 아래 §1은 홈 인라인 CSS에서
      GNB·푸터·토큰·.btn·.container·.sec-head·카드·CTA 바·리빌 규칙만 **복사**한 것이며
      (cascade 순서 보존 — 홈의 후속 오버라이드까지 그대로), 홈은 무변경이다.
      §2는 하위 페이지에서만 쓰는 추가 규칙(홈 무영향).
   토큰 :root = tokens.css(홈과 동일 파일 링크).
   ============================================================ */

/* ============================== §1 홈 인라인 CSS 복사(순서 보존) ============================== */
*,*::before,*::after{ box-sizing:border-box; }
html{-webkit-text-size-adjust:100%; scroll-behavior:auto;}
/* R60(2026-09-21 오너 "전체 페이지 줄바꿈") — 제목·리드=balance(줄 길이 균형), 본문·목록=pretty(고아 단어 방지). keep-all은 body에 이미. */
h1,h2,h3,.sec-head__lead,.tile__headline,.tips-item__body{text-wrap:balance;}
p,li,dd,.btn{text-wrap:pretty;}
body{margin:0; font-family:var(--font-sans); color:var(--ink); background:var(--bg); line-height:var(--lh-body); overflow-x:hidden; word-break:keep-all; overflow-wrap:break-word;}
img{max-width:100%; display:block;}
p{margin:0;}
.nowrap{ white-space:nowrap; } /* R51 §3 — 숫자+단위 고정구 줄바꿈 방지 */
a{color:inherit;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:4px;}
.container{max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
.visually-hidden{position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--orange-500); color:var(--ink); font-weight:700; padding:12px 20px; z-index:2100; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:13px 26px; font-size:16px; font-weight:700; line-height:1; border-radius:var(--r-sm); text-decoration:none; border:1px solid transparent; transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn--orange{background:var(--orange-500); color:#fff;} /* R56(2026-09-21 소피아·오너) 주황 바탕=흰 글씨 */
.btn--orange:hover{background:var(--orange-600);}
.btn--outline-light{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.7); color:#fff;}
.btn--outline-light:hover{background:#fff; color:var(--ink);}
.btn--outline-ink{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn--outline-ink:hover{background:var(--ink); color:#fff;}
.btn--dark{background:var(--ink); color:#fff;}
.btn--dark:hover{background:#000;}
.gnb{position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--gnb-h); background:transparent; border-bottom:1px solid transparent; transition:background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);}
.gnb::before{content:""; position:absolute; left:0; right:0; top:0; height:130px; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 100%); opacity:1; transition:opacity var(--dur-base) var(--ease-out);}
.gnb.is-solid{background:#fff; border-bottom-color:var(--line);}
.gnb.is-solid::before{opacity:0;}
.gnb__inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);}
.wordmark{display:inline-flex; align-items:center; gap:8px; text-decoration:none; flex:none;}
.wordmark__logo{height:22px; width:auto;}
.wordmark__sub{font-weight:900; font-size:15px; letter-spacing:-.01em; padding-left:10px; border-left:1.5px solid rgba(255,255,255,.5); line-height:1; color:#fff; transition:color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);}
.gnb.is-solid .wordmark__sub{color:var(--ink); border-left-color:var(--line);}
.gnb__nav{display:none;}
.gnb__nav ul{display:flex; align-items:center; gap:28px;}
.gnb__nav a, .gnb__nav .gnb__soon{position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:700; color:rgba(255,255,255,.92); text-decoration:none; padding:11px 2px; transition:color var(--dur-base) var(--ease-out);}
.gnb__nav a::after{content:""; position:absolute; left:2px; right:2px; bottom:5px; height:2px; border-radius:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out);}
.gnb__nav a:hover::after{transform:scaleX(1);}
.gnb__nav a[aria-current="page"]{color:#fff;}
.gnb__nav a[aria-current="page"]::after{transform:scaleX(1);}
.gnb.is-solid .gnb__nav a, .gnb.is-solid .gnb__nav .gnb__soon{color:var(--ink-soft);}
.gnb.is-solid .gnb__nav a[aria-current="page"]{color:var(--ink);}
.gnb__soon{display:inline-flex; align-items:center; gap:5px; cursor:default;}
.badge-soon{font-size:9px; font-weight:800; letter-spacing:-.01em; background:var(--orange-500); color:var(--ink); padding:1px 5px; border-radius:999px;}
.gnb__actions{display:flex; align-items:center; gap:12px;}
.gnb__cta{display:none;}
@media (min-width:960px){
  .gnb__nav{display:block;}
  .gnb__cta{display:inline-flex;}
}
.list-block{padding:var(--sp-20) 0;}
.sec-head{margin-bottom:var(--sp-8);}
.sec-head__title{display:block; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:800; letter-spacing:-.01em; line-height:1.25; text-align:left; margin-bottom:var(--sp-3);}
.sec-head__lead{color:var(--ink-soft); font-size:16px; line-height:1.65; max-width:40em;}
.sec-head__lead + .sec-head__lead{margin-top:var(--sp-4);}
.sec-head__lead b{color:var(--ink); font-weight:700;}
.news-list__meta{font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--orange-700);}
.news-list__title{font-size:18px; font-weight:800; line-height:1.4; letter-spacing:-.01em; color:var(--ink);}
.consult{padding:var(--sp-16) var(--gutter); margin:0 var(--gutter) var(--sp-4); border-radius:24px; background:var(--ink); color:#fff; text-align:center;}
.consult .container{padding-left:0; padding-right:0;}
.consult .sec-head__title{font-family:var(--font-display); font-size:28px; font-weight:800; margin-bottom:10px; letter-spacing:normal; text-align:center;}
.consult .sec-head__lead{color:rgba(255,255,255,.72); margin:0 auto var(--sp-6); max-width:38em;}
.consult .faq-links{margin-top:var(--sp-4); display:flex; gap:var(--sp-6); justify-content:center; flex-wrap:wrap;}
.consult .faq-links a{font-size:13px; color:rgba(255,255,255,.72); text-decoration:underline; text-underline-offset:3px;}
.consult .faq-links a:hover{color:#fff;}
footer{background:#F2F0EC; color:var(--ink-soft); padding:var(--sp-12) 0 var(--sp-8); font-size:13px;}
.footer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); max-width:var(--container); margin:0 auto var(--sp-8); padding:0 var(--gutter);}
.footer-col__title{font-weight:800; color:var(--ink); margin-bottom:10px; font-size:13px;}
.footer-col ul{display:flex; flex-direction:column; gap:6px;}
.footer-col li{display:flex; align-items:center; gap:7px;}
.footer-col li::before{content:""; flex:none; width:8px; height:8px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='6' r='2.6' fill='none' stroke='%23FF6905' stroke-width='1.7'/%3E%3Crect x='7.6' y='9' width='8.4' height='5' rx='1.6' fill='%23FF6905' transform='rotate(22 7.6 9)'/%3E%3C/svg%3E"); background-size:contain; background-repeat:no-repeat;}
.footer-col a{text-decoration:none;}
.footer-col a:hover{color:var(--ink);}
.footer-biz, .footer-bottom{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
.footer-biz{border-top:1px solid var(--line); padding-top:var(--sp-6); padding-bottom:var(--sp-4); font-size:12px; line-height:1.7;}
.footer-bottom{font-size:12px; color:var(--ink-soft); padding-top:var(--sp-2);}
.gsap-ready .reveal{opacity:0; transform:translateY(24px);}
.gsap-ready .reveal.is-in{opacity:1; transform:translateY(0);}
@media (max-width:640px){
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .list-block{padding:var(--sp-12) 0;}
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}
.sec-head{margin-bottom:56px;}
.sec-head__title{font-size:44px; font-weight:700; line-height:1.22; letter-spacing:-.02em;}
.sec-head__lead{font-size:20px; line-height:1.6; max-width:44em;}
.news-list__title{font-size:22px; font-weight:700;}
.list-block{padding:140px 0;}
@media (max-width:640px){
  .sec-head__title{font-size:30px;}
  .sec-head__lead{font-size:18px;}
  .list-block{padding:88px 0;}
}
:root{--dur-r13:600ms; --ease-r13:cubic-bezier(.22,1,.36,1);}
.btn--orange:hover, .btn--dark:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(26,26,26,.16);}
.footer-col a{position:relative;}
.footer-col a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out);}
.footer-col a:hover::after{transform:scaleX(1);}
.container{max-width:1200px;}
.btn{border-radius:12px;}
/* DG3-A6 — 다른 3페이지(promotion·faq·contact)·index.html은 `.gnb .btn`이 pill(999px)인데 guide만
   위 12px 규칙을 그대로 물려받아 GNB 버튼이 사각으로 보였다(렌즈1 P0-1). */
.gnb .btn{border-radius:var(--r-pill);}
.sec-head__lead{letter-spacing:-0.3px;}
@media (min-width:641px){
  .sec-head__title{font-size:48px;}
}
.gsap-ready .reveal{transition:opacity 500ms cubic-bezier(.25,.46,.45,.94), transform 500ms cubic-bezier(.25,.46,.45,.94);}
.gsap-ready .r-d0{transition-delay:0ms;}
.gsap-ready .r-d1{transition-delay:100ms;}
.gsap-ready .r-d2{transition-delay:200ms;}
.sec-head__title{margin-bottom:28px;}
.sec-head__lead{font-size:16px; line-height:1.4;}
@media (max-width:640px){
  .sec-head__lead{font-size:15px;}
}
@media not all{
  .gnb{background:#fff; border-bottom-color:var(--line);}
  .gnb::before{display:none;}
  .wordmark__sub{color:var(--ink); border-left-color:var(--line);}
  .gnb__nav a, .gnb__nav .gnb__soon{color:var(--ink-soft);}
  .gnb__nav a[aria-current="page"]{color:var(--ink);}
}
#reads.list-block{padding:0; margin:0 0 24px;}
#reads > .container{max-width:none; margin:0 24px; padding:64px; border-radius:32px;}
#reads .sec-head__title{font-size:48px; font-weight:700; line-height:1.2; letter-spacing:-.02em;}
#reads .sec-head__lead{font-size:20px; font-weight:500; line-height:1.5; max-width:34em;}
@media (max-width:1024px){
  #reads > .container{margin:0 16px; padding:32px; border-radius:24px;}
  #reads .sec-head__title{font-size:32px;}
  #reads .sec-head__lead{font-size:18px;}
}
#reads .news-list__meta{font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--orange-700);}
#reads .news-list__title{font-size:24px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--ink);}
.consult{margin:0 24px 24px; padding:96px; border-radius:32px;}
#consult .sec-head__title{font-size:40px; font-weight:700; line-height:1.25; letter-spacing:-.02em; margin-bottom:16px;}
#consult .sec-head__lead{font-size:20px; font-weight:400; line-height:1.5; color:rgba(255,255,255,.8); margin:0 auto 32px; max-width:34em;}
#consult .btn{min-height:52px; padding:0 28px; font-size:16px; font-weight:700; border-radius:var(--r-pill);} /* R33r2 P1-10 — 56은 GNB48/푸터44/홈·faq·contact52 중 고아값(r2-lens #10) */
#consult .faq-links{margin-top:32px;}
#consult .faq-links a{font-size:16px; color:rgba(255,255,255,.8);}
#consult .faq-links a:hover{color:#fff;}
@media (max-width:1024px){
  .consult{margin:0 16px 24px; padding:48px 24px; border-radius:24px;}
  #consult .sec-head__title{font-size:30px;}
  #consult .sec-head__lead{font-size:18px;}
}
footer{font-size:14px;}
footer .footer-col__title{font-size:14px;}
footer .footer-col li{font-size:16px;}
footer .badge-soon{font-size:14px; padding:2px 8px;}
footer .footer-biz{font-size:14px;}
footer .footer-bottom{font-size:14px;}
#tips.list-block{padding:0; margin:0 0 24px;}
#tips > .container{max-width:none; margin:0 24px; padding:64px; border-radius:32px;}
#tips > .container{background:#F4F4F2;}
#tips .sec-head__title{font-size:48px; font-weight:700; line-height:1.2; letter-spacing:-.02em; margin-bottom:16px;}
@media (max-width:1024px){
  #tips > .container{margin:0 16px; padding:32px; border-radius:24px;}
  #tips .sec-head__title{font-size:32px;}
}
#tips .tips-grid{display:grid; grid-template-columns:repeat(2,1fr); column-gap:64px; row-gap:40px; margin-top:48px;}
#tips .tips-item{border-top:1px solid rgba(26,26,26,.12); padding:24px 0 0;}
#tips .tips-item__title{font-size:24px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--ink); margin:0 0 12px;}
#tips .tips-item__body{font-size:18px; font-weight:400; line-height:1.6; color:var(--ink-soft); margin:0;}
#tips .tips-item__link{display:inline-flex; align-items:center; min-height:44px; margin:-4px 0 -12px; font-size:16px; font-weight:700; color:var(--orange-700); text-decoration:none;}
#tips .tips-item__link:hover{text-decoration:underline;}
@media (max-width:1024px){
  #tips .tips-grid{grid-template-columns:1fr; row-gap:32px;}
}
footer .badge-soon{font-size:11px; padding:2px 8px;}
#tips > .container{background-color:#F5F5F5; background-image:none;}
footer{background:#F5F5F5;}
.cta-bar{position:fixed; bottom:0; inset-inline:0; z-index:900; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid rgba(26,26,26,.12); transform:translateY(110%); visibility:hidden; transition:transform 260ms var(--ease-out), visibility 0s linear 260ms;}
.cta-bar.is-on{transform:none; visibility:visible; transition:transform 260ms var(--ease-out), visibility 0s;}
.cta-bar .btn{display:flex; width:100%; min-height:52px; height:52px; padding:0 24px; border-radius:var(--r-pill); font-size:16px; font-weight:700;}
@media (min-width:1025px){
  .cta-bar{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .cta-bar{transition:none;}
}
/* R72 fix round 2(2026-09-24) — 2.4.11: ≤1024는 고정 GNB(위)와 .cta-bar(아래, 77px=padding 12+btn 52+border 1+padding 12)가
   뷰포트 상/하단을 가려 키보드 포커스 타깃을 완전히 덮는다(a11y-report §2 "완전 가림 1건"). 실제 높이로 스크롤 여유를 둔다. */
@media (max-width:1024px){
  html{ scroll-padding-top:var(--gnb-h); scroll-padding-bottom:calc(77px + env(safe-area-inset-bottom)); }
}
#consult .consult__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
/* R33r3 P1-3 — 5페이지 주 버튼 중 guide만 56(특이성으로 149행의 52를 이겼다), 52로 통일 */
#consult .consult__cta .btn{min-height:52px; padding:0 28px; font-size:16px; font-weight:700; border-radius:var(--r-pill);}
@media (max-width:560px){
  #consult .consult__cta{flex-direction:column;}
  #consult .consult__cta .btn{width:100%;}
}
main:focus{outline:none;}
.wordmark{min-height:44px;}
#consult .faq-links a, footer .footer-col a, footer .footer-col .gnb__soon{min-height:44px; display:inline-flex; align-items:center;}
#reads > .container{background:none; border-radius:0; max-width:var(--container); margin:0 auto; padding:96px var(--gutter);}
#reads .sec-head{text-align:center;}
#reads .sec-head__title{text-align:center;}
#reads .sec-head__lead{margin-left:auto; margin-right:auto;}
@media (max-width:1024px){
  #reads > .container{margin:0 auto; padding:64px var(--gutter); border-radius:0;}
}
.btn{transition:transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background-color 150ms var(--ease-out), color 150ms var(--ease-out);}
.btn--orange:hover, .btn--dark:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(26,26,26,.16);}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none;}
  .btn--orange:hover, .btn--dark:hover{transform:none;}
}
#tips > .container{background:none; background-image:none; border-radius:0; max-width:var(--container); margin:0 auto; padding:80px var(--gutter);}
@media (max-width:1024px){
  #tips > .container{margin:0 auto; padding:56px var(--gutter); border-radius:0;}
}
#consult.consult{background:none; background-image:none; color:var(--ink); margin:0; border-radius:0; padding:96px var(--gutter);}
#consult .sec-head__title{color:var(--ink);}
#consult .sec-head__lead{color:var(--ink-soft);}
#consult .btn--outline-light{background:transparent; border:1.5px solid var(--ink); color:var(--ink);}
#consult .btn--outline-light:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
#consult .faq-links a{color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;}
#consult .faq-links a:hover{color:var(--ink);}
@media (max-width:1024px){
  #consult.consult{margin:0; border-radius:0; padding:56px var(--gutter);}
}
footer{background:#fff; border-top:1px solid var(--line);}
#reads .tips-grid{display:grid; grid-template-columns:repeat(2,1fr); column-gap:64px; row-gap:40px; margin-top:48px;}
#reads .tips-item{border-top:1px solid rgba(26,26,26,.12); padding:24px 0 0; text-align:left;}
#reads .tips-item__title{font-size:24px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--ink); margin:0 0 12px;}
#reads .tips-item__body{font-size:18px; font-weight:400; line-height:1.6; color:var(--ink-soft); margin:0;}
#reads .tips-item__link{display:inline-flex; align-items:center; min-height:44px; margin:-4px 0 -12px; font-size:16px; font-weight:700; color:var(--orange-700); text-decoration:none;}
#reads .tips-item__link:hover{text-decoration:underline;}
@media (max-width:1024px){
  #reads .tips-grid{grid-template-columns:1fr; row-gap:32px;}
}
#reads .reads-hr{border-top:1px solid rgba(26,26,26,.12); margin:40px 0 0;}
#reads .reads-links{display:flex; flex-wrap:wrap; gap:32px; margin-top:24px; text-align:left;}
#reads .reads-link{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:16px; font-weight:600; line-height:1.4; color:var(--ink); text-decoration:none;}
#reads .reads-link .news-list__meta{font-size:14px; font-weight:700; letter-spacing:.06em; color:#B34400;}
#reads .reads-link .news-list__title{font-size:16px; font-weight:600; line-height:1.4; letter-spacing:-.01em; color:var(--ink);}
#reads .reads-link::after{content:'→'; font-size:16px; font-weight:600; color:var(--ink);}
#reads .reads-link:hover .news-list__title{text-decoration:underline; text-underline-offset:3px;}
#reads .sec-head, #reads .sec-head__title{text-align:left;}
#reads .sec-head__lead{margin-left:0; margin-right:0;}
#reads.list-block{padding-top:120px; padding-bottom:120px; margin-top:0; margin-bottom:0;}
#consult.consult{padding-top:120px; padding-bottom:140px; margin-top:0; margin-bottom:0;}
#reads > .container, #consult > .container{padding-top:0; padding-bottom:0;}
#reads .sec-head{margin-bottom:56px;}
#reads .sec-head__title, #consult .sec-head__title{font-family:var(--font-display); font-size:48px; font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:16px;}
#reads .sec-head__title{text-align:left;}
#reads .sec-head{text-align:left;}
#reads .sec-head__lead{margin-left:0; margin-right:0;}
#consult .sec-head__title{text-align:center;}
#reads .sec-head__lead{font-size:20px; font-weight:500; line-height:1.5; max-width:34em; color:var(--ink-soft);}
#consult .sec-head__lead{font-size:20px; line-height:1.5; max-width:34em;}
.news-list__meta{font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--orange-700);}
#reads .tips-item{border-top:1px solid rgba(26,26,26,.10);}
#reads .tips-item__title{font-size:22px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--ink);}
#reads .tips-item__body{font-size:16px; line-height:1.6; color:var(--ink-soft);}
.gsap-ready .r-d1{transition-delay:80ms;}
.gsap-ready .r-d2{transition-delay:160ms;}
@media (max-width:1024px){
  #reads.list-block{padding-top:72px; padding-bottom:72px;}
  #consult.consult{padding-top:72px; padding-bottom:72px;}
  #reads > .container, #consult > .container{padding-top:0; padding-bottom:0;}
  #reads .sec-head{margin-bottom:40px;}
  #reads .sec-head__title, #consult .sec-head__title{font-size:32px;}
  #reads .sec-head__lead, #consult .sec-head__lead{font-size:18px;}
}

/* ---- R30sync(2026-09-16) — GNB 5메뉴 뷰포트 중앙 정렬(index.html R30 실측 이식) ---- */
@media (min-width:1025px){
  .gnb__inner{position:relative;}
  .gnb__nav{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
}
@media (min-width:1100px) and (max-width:1239px){
  .gnb__nav ul{gap:20px;}
}
@media (min-width:1025px) and (max-width:1099px){
  .gnb__nav{position:static; transform:none;}
}
@media (max-width:1024px){
  .gnb__sheet .gnb__actions{display:flex; flex-direction:column; gap:12px;}
  .gnb__sheet .gnb__actions .btn{width:100%;}
}

/* ---- R30sync(2026-09-16) — 신규 푸터(footer-row1/footer-biz/footer-stores, index.html R30 실측 이식).
        구 footer-grid/footer-col 규칙(위)은 새 마크업에 대응 클래스가 없어 무해 잔존(index.html과 동일하게 그대로 둠). ---- */
/* DG3-A10(폐기, R33r2 P0-1) — 당시 footer max-width 1280을 1200으로 줄였으나 지금은 반대로
   footer가 GNB·본문(모두 --container=1280 직결, x=120)과 40px 어긋난 쪽(R33 r2-lens #1·#9). var(--container)로
   되돌리고 padding도 index.html(64/48) 규격에 동기(row #9 — guide만 40/32로 뒤처져 있었다). */
/* R33r3 P0-1(재정정) — 5페이지 한 규칙: 1200 박스+패딩 0(링크 x=120@1440). ≤1024는 박스가 뷰포트보다
   넓어져 좌우 패딩이 사라지므로 --gutter로 되돌린다(index.html·생성기 CSS_LANDING_GRAMMAR 같은 배치). */
footer{max-width:1200px; padding:64px 0 48px; margin:0 auto;}
@media (max-width:1024px){ footer{max-width:none; padding:64px var(--gutter) 48px;} }
/* R33r2 P0-1(재적용) — `.container{max-width:1200px}`(110행, R13-c)가 `.gnb__inner`(38행)보다 소스
   순서상 늦어 이겨버렸다 — element+class로 특이성을 올려 확정 승리시킨다. */
header.gnb .gnb__inner{max-width:var(--container);}
footer .footer-biz, footer .footer-bottom{max-width:none; margin:0; padding:0;}
.footer-row1{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
/* R33r3 P1-2 — guide만 13/600(index.html은 14/700, r2 "done" 미적용분) */
.footer-row1 a{font-size:14px; font-weight:700; color:var(--ink-soft); text-decoration:none;}
.footer-row1 a:hover{color:var(--ink); text-decoration:underline;}
.footer-row1__div{width:1px; height:12px; background:var(--line); display:inline-block;}
footer .footer-biz{margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
footer .footer-biz p{font-size:13px; line-height:1.7; color:var(--ink-soft); margin:0;}
.footer-stores{display:flex; gap:12px; margin-top:20px;}
.footer-store{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-sm);
  border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink); text-decoration:none;
}
.footer-store:hover{border-color:var(--ink);}
.footer-store__glyph{width:14px; height:14px; display:inline-block; background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.55C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.5 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.82M13 3.5c.73-.83 1.94-1.47 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.55C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.5 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.82M13 3.5c.73-.83 1.94-1.47 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}
.footer-store__glyph--play{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3.5c0-.6.32-1.12.8-1.4l10.6 9.9-10.6 9.9c-.48-.28-.8-.8-.8-1.4v-17zm12.1 9.9L4.1 23.1l9.9-5.7 3.6-2.1-2.5-1.9zm0-1.8l2.5-1.9-3.6-2.1-9.9-5.7 10.99 9.6z' fill='black'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3.5c0-.6.32-1.12.8-1.4l10.6 9.9-10.6 9.9c-.48-.28-.8-.8-.8-1.4v-17zm12.1 9.9L4.1 23.1l9.9-5.7 3.6-2.1-2.5-1.9zm0-1.8l2.5-1.9-3.6-2.1-9.9-5.7 10.99 9.6z' fill='black'/%3E%3C/svg%3E");
}
footer .footer-bottom{margin-top:24px; font-size:13px; color:var(--ink-soft); opacity:.7;}
/* DG3-A10 — opacity .7 on #FFF = 3.93:1(AA 미달, 렌즈4 #3). 다른 3페이지는 이미 opacity:1(8.86:1). */
footer .footer-bottom{opacity:1;}
@media (max-width:640px){
  .footer-row1{flex-direction:column; align-items:flex-start; gap:8px;}
  .footer-row1__div{display:none;}
  .footer-stores{flex-direction:row; flex-wrap:wrap;} /* R33r2 P2-24 */
  .footer-store{width:max-content;}
}

/* ============================== §2 하위 페이지 전용 추가(홈 무영향) ============================== */
/* 홈 인라인에 있으나 §1 추출 whitelist에서 개별 셀렉터로 잡히지 않은 리셋 2줄(원문 동일) */
h1,h2,h3{ margin:0; }
ul,ol{ list-style:none; margin:0; padding:0; }

/* ---- 하위 페이지 GNB = 처음부터 흰 바(is-solid 고정). .gnb는 position:fixed라 본문 상단 오프셋이 필요 ---- */
.page-hero{ padding:calc(var(--gnb-h) + 96px) 0 0; }
.page-hero__h1{
  font-family:var(--font-display); font-size:48px; font-weight:700; line-height:1.15;
  letter-spacing:-.02em; color:var(--ink); text-align:left; margin:0 0 16px;
}
.page-hero__lead{ font-size:20px; font-weight:500; line-height:1.5; max-width:34em; color:var(--ink-soft); margin:0; }
@media (max-width:1024px){
  .page-hero{ padding-top:calc(var(--gnb-h) + 56px); }
  .page-hero__h1{ font-size:32px; }
  .page-hero__lead{ font-size:18px; }
}

/* ---- 신규 섹션 id에 홈 #reads/#consult와 같은 섹션 규격(120 / h2 48 좌 / 리드 20)을 건다 ---- */
#promos.list-block, #faqs.list-block, #channels.list-block{ padding-top:120px; padding-bottom:120px; }
#promos > .container, #faqs > .container, #channels > .container{ padding-top:0; padding-bottom:0; }
#promos .sec-head, #faqs .sec-head, #channels .sec-head{ margin-bottom:56px; text-align:left; }
#promos .sec-head__title, #faqs .sec-head__title, #channels .sec-head__title{
  font-family:var(--font-display); font-size:48px; font-weight:700; line-height:1.15;
  letter-spacing:-.02em; margin-bottom:16px; text-align:left;
}
#promos .sec-head__lead, #faqs .sec-head__lead, #channels .sec-head__lead{
  font-size:20px; font-weight:500; line-height:1.5; max-width:34em; color:var(--ink-soft); margin-left:0; margin-right:0;
}
@media (max-width:1024px){
  #promos.list-block, #faqs.list-block, #channels.list-block{ padding-top:72px; padding-bottom:72px; }
  #promos .sec-head, #faqs .sec-head, #channels .sec-head{ margin-bottom:40px; }
  #promos .sec-head__title, #faqs .sec-head__title, #channels .sec-head__title{ font-size:32px; }
  #promos .sec-head__lead, #faqs .sec-head__lead, #channels .sec-head__lead{ font-size:18px; }
}

/* ---- 카드 1종 = 흰 바닥 + 1px #ECECEC + r24 (R24 규격). 키커 14/700 #B34400 ---- */
.card{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  background:#fff; border:1px solid #ECECEC; border-radius:24px; padding:32px;
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card__kicker{ font-size:14px; font-weight:700; letter-spacing:.06em; color:#B34400; }
.card__title{ font-size:22px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--ink); margin:0; }
.card__body{ font-size:16px; font-weight:400; line-height:1.6; color:var(--ink-soft); margin:0; }
.card__meta{ font-size:15px; font-weight:500; line-height:1.5; color:var(--ink-soft); margin:0; }
.card__link{
  display:inline-flex; align-items:center; min-height:44px; margin-top:auto;
  font-size:16px; font-weight:700; color:var(--orange-700); text-decoration:none;
}
.card__link:hover{ text-decoration:underline; }
.card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:1024px){
  .card-grid{ grid-template-columns:1fr; gap:16px; }
  .card{ padding:24px; border-radius:20px; }
  .card__title{ font-size:20px; }
}

/* ---- `종료` 잉크 아웃라인 배지 ---- */
.badge-ended{
  display:inline-flex; align-items:center; align-self:flex-start;
  font-size:14px; font-weight:700; line-height:1; letter-spacing:-.01em;
  color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; padding:6px 12px;
}

/* ---- FAQ 아코디언 = <details>/<summary>, JS 0 ---- */
.qa-cat + .qa-cat{ margin-top:64px; }
.qa-cat__title{
  font-family:var(--font-display); font-size:28px; font-weight:700; line-height:1.3;
  letter-spacing:-.02em; color:var(--ink); margin:0 0 8px;
}
.qa-list{ border-top:1px solid #ECECEC; }
.qa{ border-bottom:1px solid #ECECEC; }
.qa__q{
  display:flex; align-items:flex-start; gap:12px; justify-content:space-between;
  list-style:none; cursor:pointer; padding:24px 0; min-height:44px;
  font-size:18px; font-weight:700; line-height:1.5; letter-spacing:-.01em; color:var(--ink);
}
.qa__q::-webkit-details-marker{ display:none; }
.qa__q::after{
  content:'+'; flex:none; font-size:22px; font-weight:400; line-height:1.3; color:var(--ink-soft);
  transition:transform var(--dur-base) var(--ease-out);
}
.qa[open] > .qa__q::after{ transform:rotate(45deg); }
.qa__q:hover{ color:var(--orange-700); }
.qa__a{ padding:0 44px 24px 0; animation:qaOpen 200ms var(--ease-out); }
.qa__a p{ font-size:16px; font-weight:400; line-height:1.7; color:var(--ink-soft); margin:0 0 12px; }
.qa__a p:last-child{ margin-bottom:0; }
.qa__a ul{ list-style:disc; padding-left:20px; margin:0 0 12px; }
.qa__a ul:last-child{ margin-bottom:0; }
.qa__a li{ font-size:16px; font-weight:400; line-height:1.7; color:var(--ink-soft); margin-bottom:4px; }
.qa__a a{ color:var(--orange-700); }
@keyframes qaOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .qa__a{ animation:none; }
  .qa[open] > .qa__q::after{ transition:none; }
}
@media (max-width:1024px){
  .qa-cat + .qa-cat{ margin-top:48px; }
  .qa-cat__title{ font-size:22px; }
  .qa__q{ font-size:16px; padding:20px 0; }
  .qa__a{ padding-right:0; padding-bottom:20px; }
}

/* ---- 보조 링크 1줄(임차인 FAQ 바로가기 등) ---- */
.side-link{
  display:inline-flex; align-items:center; min-height:44px; margin-top:40px;
  font-size:16px; font-weight:700; color:var(--orange-700); text-decoration:underline; text-underline-offset:3px;
}
.side-link:hover{ color:var(--ink); }

/* ============================== §3 R25-A 후속(2026-09-15) — 리더 육안 교정 ============================== */
/* ---- ① 위계 역전 교정: 히어로 h1 48 < 섹션 h2 56이던 것을 홈 규격(h1 56 / h2 48)으로.
        `#values` 막 제목 56은 홈 전용이라 하위 페이지엔 들어오지 않는다. ---- */
.page-hero__h1{ font-size:56px; font-weight:700; }
/* R47 A3(2026-09-21) — 9/17 03:20 「계약 변경」(48→40)을 되돌린다: 홈 48px와 페이지 간 제목 스케일
   불일치(P0-7, qa/R32/grammar_r32.py의 fs==40 계약은 이 브리프로 superseded — R47 게이트 목록 밖).
   ≤1024 h1(다음 줄, 죽은 선언 — R32 블록이 최종 승)은 값 유지. */
@media (max-width:1024px){
  .page-hero__h1{ font-size:36px; }
}

/* ---- ② 좌단 정렬: 히어로·섹션·푸터가 같은 `.container` 좌단(max 1280 · 좌우 gutter)을 쓴다.
        원인 = 히어로와 `.consult` 내부는 `.container`(max 1200)인데 `#reads`·`#tips`는 max 1280으로 덮여 있었고,
        `.consult .container`는 좌우 패딩 0 + 섹션이 gutter를 대신 줘 계산이 또 달랐다. 여기서 한 줄로 통일. ---- */
.page-hero > .container,
#reads > .container, #tips > .container, #consult > .container,
#promos > .container, #faqs > .container, #channels > .container,
.detail-cross > .container{
  max-width:var(--container); margin-left:auto; margin-right:auto;
  padding-left:var(--gutter); padding-right:var(--gutter);
}
/* R72 L2b(2026-09-24) — 위 목록에 `.detail-cross`(가이드 3페이지 신규 교차링크)가 빠져 기본 `.container`
   (max 1200)로 폴백 → PC에서만 40px 안쪽으로 밀림(1440 x=160 vs h1/로고 120). 목록에 추가해 해소. */
#consult.consult{ padding-left:0; padding-right:0; }   /* gutter는 내부 .container가 준다(이중 패딩 제거) */
/* R30sync(2026-09-16) — 구 footer-grid 전용 오버라이드 폐기. 새 footer(footer-row1/-biz/-stores)는
   `footer` 요소 자체에 max-width+padding을 주므로(§R30 footer 블록, 파일 말미) 자식에 재적용하면 이중 인셋이 된다. */

/* ---- ③ 히어로 ↔ 첫 섹션 간격 = 64(리드 없는 promotion은 48).
        히어로 하단을 0으로 두고 **바로 다음 섹션의 top만** 줄인다 — 섹션끼리의 120 리듬은 건드리지 않는다. ---- */
.page-hero{ padding-bottom:0; }
.page-hero + section.list-block, .page-hero + section.consult{ padding-top:64px; }
.page-hero--noLead + section.list-block, .page-hero--noLead + section.consult{ padding-top:48px; }
@media (max-width:1024px){
  .page-hero + section.list-block, .page-hero + section.consult{ padding-top:48px; }
  .page-hero--noLead + section.list-block, .page-hero--noLead + section.consult{ padding-top:40px; }
}

/* ============================================================
   DG2-A (2026-09-15) — 담금질 2회차 배치 A. 정본 = docs/planning/pages/DG2-A-brief-20260915.md
   홈 인라인 블록의 A1·A2와 **같은 선언**(셸 공용 = guide·promotion). 파일 최말미 = 이 블록이 승.
   ============================================================ */

/* ---- P1(렌즈4 결함 #5) — computed color-scheme 계측용 선언(meta와 병행) ---- */
:root{color-scheme:light;}

/* ---- A1 — 폴드 영상 위(`is-solid` 없음) GNB 아웃라인 CTA = 흰 테두리·흰 글자 · hover 흰 10% 채움.
   하위 페이지 GNB는 `is-solid` 고정이라 실제로는 매칭되지 않지만, 셸 선언은 홈과 동일하게 둔다. ---- */
.gnb:not(.is-solid) .gnb__cta{background:transparent; border-color:#FFFFFF; color:#FFFFFF;}
.gnb:not(.is-solid) .gnb__cta:hover{background:rgba(255,255,255,.10); border-color:#FFFFFF; color:#FFFFFF;}

/* ---- A2 — 햄버거 + 전폭 시트(≤1024). `.gnb__sheet`는 기존 nav+actions를 감싼 래퍼 ---- */
.gnb__sheet{display:flex; align-items:center; gap:12px; min-width:0;}
.gnb__burger{display:none;}

@media (max-width:1024px){
  .gnb__burger{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; padding:0; margin:0; border:0; border-radius:8px; background:none; cursor:pointer;
    -webkit-appearance:none; appearance:none;
  }
  .gnb__burger:focus-visible{outline:2px solid var(--orange-700); outline-offset:2px;}
  .gnb:not(.is-solid) .gnb__burger:focus-visible{outline-color:#FFFFFF;}
  .gnb__burger-i{position:relative; display:block; width:22px; height:2px; border-radius:2px; background:var(--ink);}
  .gnb__burger-i::before{content:""; position:absolute; left:0; top:-7px; display:block; width:22px; height:2px; border-radius:2px; background:var(--ink);}
  .gnb:not(.is-solid) .gnb__burger-i,
  .gnb:not(.is-solid) .gnb__burger-i::before{background:#FFFFFF;}
  .gnb.is-open .gnb__burger-i,
  .gnb.is-open .gnb__burger-i::before{background:var(--ink);}

  .gnb__sheet{
    position:fixed; left:0; right:0; top:var(--gnb-h);
    display:none; flex-direction:column; align-items:stretch; gap:0;
    max-height:calc(100dvh - var(--gnb-h)); overflow-y:auto;
    padding:8px var(--gutter) 24px;
    background:#FFFFFF; border-bottom:1px solid var(--line);
    box-shadow:0 12px 32px rgba(26,26,26,.06);
  }
  .gnb.is-open .gnb__sheet{display:flex;}
  .gnb.is-open{background:#FFFFFF; border-bottom-color:transparent;}
  .gnb.is-open::before{opacity:0;}
  .gnb.is-open .wordmark__sub{color:var(--ink); border-left-color:var(--line);}

  .gnb.is-open .gnb__nav{display:block;}
  .gnb__sheet .gnb__nav ul{display:block;}
  .gnb__sheet .gnb__nav li + li{border-top:1px solid rgba(26,26,26,.08);}
  .gnb__sheet .gnb__nav a,
  .gnb__sheet .gnb__nav .gnb__soon{display:flex; width:100%; min-height:52px; padding:12px 2px; font-size:17px; font-weight:700; color:var(--ink-soft);}
  .gnb__sheet .gnb__nav a[aria-current="page"]{color:var(--ink);}
  .gnb__sheet .gnb__nav a::after{display:none;}

  .gnb__sheet .gnb__actions{display:block; width:100%; margin-top:16px;}
  .gnb.is-open .gnb__cta,
  .gnb:not(.is-solid).is-open .gnb__cta{
    display:flex; width:100%; justify-content:center; min-height:52px;
    background:var(--orange-500); border-color:var(--orange-500); color:var(--ink);
  }
  .gnb.is-open .gnb__cta:hover,
  .gnb:not(.is-solid).is-open .gnb__cta:hover{background:var(--orange-500); border-color:var(--orange-500); color:var(--ink);}
}
@media (min-width:1025px){
  .gnb__sheet{position:static; display:flex; flex-direction:row; padding:0; background:none; border:0; box-shadow:none; max-height:none; overflow:visible;}
}

/* ---- A2 후속(빌더 실측 2026-09-15) — 셸 GNB 원 규칙 `@media (min-width:960px)`와 햄버거(≤1024)가
   960~1024에서 겹쳐 내비게이션이 두 벌이 된다. 경계를 1025로 통일. ---- */
@media (max-width:1024px){
  .gnb__nav{display:none;}
  .gnb__cta{display:none;}
}
@media (min-width:1025px){
  .gnb__nav{display:block;}
  .gnb__cta{display:inline-flex;}
}

/* ============================================================
   R28-B H4 (2026-09-16) — 마이크로 인터랙션 1종(하위 페이지 공용). 정본 = docs/planning/pages/R28-B-brief-20260915.md §H4.
   홈(index.html)은 이 파일을 로드하지 않으므로 동일 블록이 index.html 인라인 CSS 말미에도 있다(§R28-B).
   ① 버튼 누름 1px/80ms ② 오렌지 CTA hover 밝기 +4% ③ 아웃라인 hover 잉크 6% 채움
   ④ 텍스트 링크 hover 시 꼬리 `→` 4px/160ms ⑤ GNB 밑줄 scaleX 200ms ⑥ 앵커 smooth. 카드 hover는 기존 유지.
   ============================================================ */
html{scroll-behavior:smooth;}
.btn:active{transition-duration:80ms;}
.btn--orange:hover{filter:brightness(1.04);}
.btn--outline-ink:hover{background-color:rgba(26,26,26,.06); color:var(--ink);}
/* ④ 꼬리 `→`는 문자열 안의 리터럴이라 감싸면 문구 diff가 난다(가시 텍스트 노드 분할) →
   마크업 무변경 수단 = `word-spacing`. 대상 링크는 전부 공백 1칸(`자세히 →`)이라 4px = 꼬리 이동 4px. */
.card__link,
.tips-item__link,
.qa__consult,
.reg__eliglink,
.guard__link{transition:word-spacing 160ms var(--ease-out), color 200ms var(--ease-out);}
.card__link:hover,
.tips-item__link:hover,
.qa__consult:hover,
.reg__eliglink:hover{word-spacing:4px;}
.guard__link:hover{word-spacing:2px;} /* 공백 2칸(`자주묻는질문 보기 →`) → 꼬리 이동 합 4px */
#reads .reads-link::after{display:inline-block; transition:transform 160ms var(--ease-out);}
#reads .reads-link:hover::after{transform:translateX(4px);}
.gnb__nav a::after{transition:transform 200ms var(--ease-out);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn:active{transform:none;}
  .btn--orange:hover{filter:none;}
  .card__link,
  .tips-item__link,
  .qa__consult,
  .reg__eliglink,
  .guard__link{transition:none;}
  .card__link:hover,
  .tips-item__link:hover,
  .qa__consult:hover,
  .reg__eliglink:hover,
  .guard__link:hover{word-spacing:normal;}
  #reads .reads-link::after{transition:none;}
  #reads .reads-link:hover::after{transform:none;}
  .gnb__nav a::after{transition:none;}
}

/* ============================================================
   R32 (2026-09-16) — 하위 페이지 본문을 홈(R31) 문법으로 통일.
   정본 = docs/planning/pages/R32-brief-20260916.md. 파일 최말미 = 이 블록이 승.
   ============================================================ */
:root{
  --r31-shadow-rest: 0 2px 8px rgba(26,26,26,.06);
  --r31-shadow-hover: 0 8px 24px rgba(26,26,26,.08);
}

/* ---- §1 섹션 리듬 120/120(≤640 88) ---- */
.list-block{ padding:120px 0; }
@media (max-width:640px){ .list-block{ padding:88px 0; } }

/* ---- 계약 변경(9/17 03:20, R33r2 리더 결정 — R32-brief §1 갱신) — h1 56/800(≤640 36) ·
   패딩 상 120/하 64(≤640 88/40) · 헤더 직후 첫 섹션 padding-top 0(헤더 하단 64가 간격, gap ≤80) ---- */
.page-hero{ padding:calc(var(--gnb-h) + 120px) 0 64px; }
.page-hero__h1{ font-size:56px; font-weight:800; line-height:1.15; }
.page-hero + section.list-block, .page-hero + section.consult{ padding-top:0; }
/* #reads.list-block(구 135/248/266행, id+class 특이성)가 위 클래스 셀렉터보다 우선해 pt가 여전히 120/72로
   렌더되던 실측(grammar_r32 FAIL 픽스처로 발견) — 같은 특이성으로 여기서 재선언(파일 최말미 승). */
#reads.list-block{ padding-top:0; }
@media (max-width:640px){
  .page-hero{ padding:calc(var(--gnb-h) + 88px) 0 40px; }
  .page-hero + section.list-block, .page-hero + section.consult{ padding-top:0; }
}
@media (max-width:640px){ .page-hero__h1{ font-size:36px; } }

/* ---- #consult 하단 패딩 120(구 140) ---- */
#consult.consult{ padding-bottom:120px; }
@media (max-width:1024px){ #consult.consult{ padding-bottom:72px; } }

/* ---- §1 타일 — #reads/#tips 카드를 홈 R30 타일 문법(bg-band r22, 프래그 60%)으로 통일.
   guide.html은 카드 4장(#reads, 구 `.card`)과 텍스트 목록 2×2(#tips)를 모두 이 한 컴포넌트로 흡수한다.
   프래그 마크업·CSS = index.html #reads 타일(R30~R31) 그대로 포팅(§1 "홈 #reads 패턴을 그대로 이식"). ---- */
#reads .tips-grid, #tips .tips-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
/* R33r2 P2-21 — guide 1024에서도 1열로 떨어져 일러스트가 떴다(r2-lens #21). 769~1024는 2열 유지. */
@media (min-width:769px) and (max-width:1024px){ #reads .tips-grid, #tips .tips-grid{ grid-template-columns:repeat(2,1fr); } }
/* R33r3 P2-10 — 위 769~1024 예외가 뒤(649행) `@media(max-width:1024px){1fr}`에 덮여 무효였다(r2 #21 재발).
   649행 조건을 769 미만으로 좁혀 이 예외와 안 겹치게 한다(아래 재선언). */
#reads .tips-item, #tips .tips-item{
  background:var(--bg-band); border-top:0; border-radius:22px; padding:24px;
  display:flex; flex-direction:column; transition:transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
#reads .tips-item__frag, #tips .tips-item__frag{ height:200px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
#reads .tips-item__title, #tips .tips-item__title{ font-size:22px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--ink); margin:0 0 8px; }
#reads .tips-item__body, #tips .tips-item__body{ font-size:16px; font-weight:400; line-height:1.6; color:var(--ink-soft); margin:0 0 14px; }
#reads .tips-item__body, #tips .tips-item__body{ text-wrap:pretty; } /* R51 §3 — 후속 선언(동순위) 무손상 추가 */
#tips .tips-item__title{ text-wrap:balance; } /* R55 §2(2026-09-21) — #tips 전용(index.html #reads 무접촉) 고아줄 처리 */
#reads .tips-item__link, #tips .tips-item__link{ display:inline-flex; align-items:center; min-height:44px; margin-top:auto; font-size:16px; font-weight:700; color:var(--orange-700); text-decoration:none; }
#reads .tips-item__link:hover, #tips .tips-item__link:hover{ text-decoration:underline; }
#reads .card__kicker, #tips .card__kicker{ font-size:14px; font-weight:700; letter-spacing:.06em; color:#B34400; margin-bottom:4px; }
@media (min-width:1025px){ #reads .tips-item:hover, #tips .tips-item:hover{ transform:scale(1.02); box-shadow:var(--r31-shadow-hover); } }
@media (max-width:768px){ #reads .tips-grid, #tips .tips-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ #reads .tips-item:hover, #tips .tips-item:hover{ transform:none; box-shadow:none; } }

/* 프래그 4종(홈 §12 리더 픽스4 원문 그대로) + 신규 ⑤ 세그먼트(guide 「서비스 소개」 전용, 텍스트 0)
   DG3-A7 — 폭을 60%/max220(타일의 ~37%, 회색 위 회색 스켈레톤)에서 100%/max320(≥44%)로 확대.
   사진 프래그는 회색 자리표시자 대신 실매물 썸네일(흰 카드+`--line`+그림자, data/listings-snapshot.json,
   창작 0)로 교체 — 마크업은 index.html #reads와 동일(`.tips-item__photogrid > .tips-item__photobox`). */
#reads .tips-item__frag--photos, #tips .tips-item__frag--photos{ gap:8px; width:100%; }
#reads .tips-item__photogrid, #tips .tips-item__photogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; max-width:320px; }
#reads .tips-item__photobox, #tips .tips-item__photobox{ position:relative; display:block; border-radius:10px; overflow:hidden; border:1px solid #CCCCCC; box-shadow:var(--r31-shadow-rest); background:#FFFFFF; box-sizing:border-box; }
#reads .tips-item__photo, #tips .tips-item__photo{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
#reads .tips-item__chk, #tips .tips-item__chk{ position:absolute; right:-6px; bottom:-6px; width:20px; height:20px; border-radius:50%; background:var(--orange-500); display:block; z-index:1; }
#reads .tips-item__chk::before, #tips .tips-item__chk::before{ content:''; position:absolute; left:6px; top:9px; width:9px; height:5px; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(-45deg); }
#reads .tips-item__bubble, #tips .tips-item__bubble{ position:relative; width:100%; max-width:320px; background:#FFFFFF; border:1px solid #CCCCCC; border-radius:16px 16px 16px 4px; padding:16px; box-sizing:border-box; box-shadow:var(--r31-shadow-rest); }
#reads .tips-item__bubble::after, #tips .tips-item__bubble::after{ content:''; position:absolute; left:0; bottom:-7px; width:14px; height:14px; background:#FFFFFF; border-left:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; border-radius:0 0 0 4px; clip-path:polygon(0 0, 100% 100%, 0 100%); }
#reads .tips-item__bbar, #tips .tips-item__bbar{ display:block; height:8px; border-radius:4px; background:rgba(26,26,26,.3); }
#reads .tips-item__bbar + .tips-item__bbar, #tips .tips-item__bbar + .tips-item__bbar{ margin-top:8px; }
#reads .tips-item__bbar--sm, #tips .tips-item__bbar--sm{ width:60%; }
#reads .tips-item__calmini, #tips .tips-item__calmini{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; width:100%; max-width:320px; }
#reads .tips-item__calcell, #tips .tips-item__calcell{ display:block; aspect-ratio:1; border-radius:50%; background:#FFFFFF; border:1px solid #CCCCCC; box-sizing:border-box; }
#reads .tips-item__calcell.is-on, #tips .tips-item__calcell.is-on{ background:var(--orange-100); border-color:var(--orange-100); }
#reads .tips-item__ratecard, #tips .tips-item__ratecard{ width:100%; max-width:320px; background:#FFFFFF; border:1px solid #CCCCCC; border-radius:12px; padding:16px; box-sizing:border-box; box-shadow:var(--r31-shadow-rest); }
#reads .tips-item__raterow, #tips .tips-item__raterow{ display:flex; align-items:center; gap:8px; }
#reads .tips-item__raterow + .tips-item__raterow, #tips .tips-item__raterow + .tips-item__raterow{ margin-top:12px; }
#reads .tips-item__ratebar, #tips .tips-item__ratebar{ display:block; height:8px; border-radius:4px; }
#reads .tips-item__ratebar--label, #tips .tips-item__ratebar--label{ width:32px; background:rgba(26,26,26,.3); }
#reads .tips-item__ratebar--value, #tips .tips-item__ratebar--value{ flex:1 1 auto; background:var(--orange-500); }
/* 세그먼트 — 두 알약(좌 활성 오렌지·우 비활성 밴드), 텍스트 0(장식). 폭·톤은 다른 프래그와 동일 100%/320 상한 */
#reads .tips-item__frag--seg{ width:100%; max-width:320px; display:flex; gap:8px; }
#reads .tips-item__seg{ flex:1; height:40px; border-radius:var(--r-pill); background:#FFFFFF; border:1px solid var(--line); box-sizing:border-box; }
#reads .tips-item__seg.is-on{ background:var(--orange-500); border-color:var(--orange-500); }

/* ---- 카드급 요소 정지 그림자 토큰 통일(§1 그림자 2종) ---- */
#reads .tips-item, #tips .tips-item{ box-shadow:none; }

/* ---- #tips 구 「회색 박스 패널」 레이아웃(id 특이성 — §1보다 앞선 R2x대 레거시) 무력화.
   `#tips.list-block{padding:0}`(구 161행) + `#tips > .container{padding:80px}`(구 212행)가 섹션 리듬을
   0/80으로 깨고 있었다(§1 120/120 위반, 실측). #reads와 동일한 표준 컨테이너로 되돌린다. ---- */
#tips.list-block{ padding:120px 0; margin:0; }
#tips > .container{ padding:0 var(--gutter); max-width:var(--container); margin:0 auto; border-radius:0; background:none; }
@media (max-width:640px){ #tips.list-block{ padding:88px 0; } }
#reads .sec-head__title, #tips .sec-head__title{ line-height:1.22; }

/* ============================================================
   R33 라운드1(2026-09-17) — guide.html 잔여 렌즈1/4 결함(index.html DG3-A 흡수 대상 밖 · shell.css는
   guide 전용이라 여기서 직접 고친다). ============================================================ */

/* 렌즈1 #15(guide h1=h2 위계) — 시도했으나 되돌림: qa/R32/grammar_r32.py가 h2를 fs==48/fw==700로
   프리징(R32 계약, ①②체크)해 h2를 40으로 낮추면 게이트가 깨진다. h1(48/800)·h2(48/700)는 굵기로만
   구분되게 이미 굳어 있다 — 진짜 위계 차별화는 이 게이트 자체를 바꿔야 하는데 오너 승인 없이 프리징된
   검증기를 건드리지 않는다(CLAUDE.md "검증기 편집=생존 증명"). 기록만 하고 되돌림 — 재렌더 후보 아님,
   **오너 판단 필요**(h2=48 계약을 바꿀지 결정 후 진행). */

/* ---- 렌즈4 #6 — GNB 「홈」 등 2글자 링크 히트폭 ~20px(사내 44 기준 미달). 밑줄(::after) 인셋도
   같은 값으로 맞춰 밑줄 폭 자체는 그대로 유지(index.html R33 동일 조치). ---- */
.gnb__nav a{ padding-inline:14px; }
.gnb__nav a::after{ left:14px; right:14px; }
/* R47 A7(2026-09-21) — 위 14px로도 「홈」(1글자) 실측 40px(P1-15, §7 실측). 첫 항목만 17px로 보강. */
.gnb__nav ul li:first-child a{ padding-left:17px; padding-right:17px; }
.gnb__nav ul li:first-child a::after{ left:17px; right:17px; }

/* ---- 라운드1 항목2 — footer 링크·스토어 버튼 44px 터치 타깃(index.html R31에서 이미 44인 항목을 guide에도). ---- */
.footer-row1 a{ padding:12px 0; margin:-12px 0; display:inline-flex; align-items:center; }
.footer-store{ height:44px; border-radius:var(--r-pill); }

/* ---- R33r3 P1-4 — 섹션 리듬: 641–1024는 홈과 같은 72/72(tips가 120으로 처져 있었다) ·
   ≤640은 88(reads/consult가 72로 처져 있었다, tips는 이미 88) ---- */
@media (min-width:641px) and (max-width:1024px){
  #tips.list-block{ padding-top:72px; padding-bottom:72px; }
}
@media (max-width:640px){
  #reads.list-block{ padding-bottom:88px; }
  #consult.consult{ padding-bottom:88px; }
}

/* ---- R33r3 P2-18 — guide 사진 프래그 배지가 photobox `overflow:hidden` 밖으로 나가 1/4만 노출
   (index.html 03:45 수정값과 동기: right/bottom 6px·12px, ::before 비례 축소). ---- */
#reads .tips-item__chk, #tips .tips-item__chk{ right:6px; bottom:6px; width:12px; height:12px; }
#reads .tips-item__chk::before, #tips .tips-item__chk::before{ left:4px; top:5px; width:5px; height:3px; border-width:1.5px; }

/* ---- R33r3 P2-16 — guide 리드 고아줄(text-wrap:balance) ---- */
.page-hero__lead{ text-wrap:balance; }

/* ============================================================
   R33r4(2026-09-17) — 임대인가이드 카드 프래그를 실제 가이드 사진(4종)으로 교체.
   대상: guide.html #reads(4장)·#tips(href 겹치는 3장 재사용) + index.html #reads tips-grid(동일 3장).
   변형 A/B는 body.v-b 클래스(또는 ?v=B 쿼리, guide.html/index.html 인라인 스크립트)로 전환.
   기본(A 미지정)=A. 이미지는 aria-hidden 프래그 안(alt="" 장식) — 제목/본문이 의미를 전달. ============================================================ */
#reads .tips-item__frag--realimg, #tips .tips-item__frag--realimg{ height:240px; }
.tips-item__realimg{
  display:block; width:240px; height:240px; margin:0 auto; flex:0 0 auto;
  border-radius:22px; overflow:hidden; box-shadow:var(--r31-shadow-rest);
}
.tips-item__realphoto{ display:block; width:100%; height:100%; object-fit:cover; }
.tips-item__realimg .rimg-b{ display:none; }

/* 변형 B — 흰 매트: 200×200 이미지 + 흰 카드(r14, hairline var(--line)), 사진가이드는 동일 카드에 16px 인셋 */
body.v-b .tips-item__realimg{
  width:200px; height:200px; padding:16px; box-sizing:content-box;
  background:#FFFFFF; border:1px solid var(--line); border-radius:14px; box-shadow:none;
}
body.v-b .tips-item__realimg .rimg-a{ display:none; }
body.v-b .tips-item__realimg .rimg-b{ display:block; }
body.v-b .tips-item__realphoto{ object-fit:contain; }
body.v-b .tips-item__realimg--photo .tips-item__realphoto{ object-fit:cover; }

/* ============================================================
   R47 A6(2026-09-21) — 「지금 볼 수 있는 가이드」(#reads) 5장, 1440에서 3열(3+2, P1-14).
   #tips는 대상 밖(카드 3장, 기존 2열 유지). 정본 = docs/planning/pages/R47-brief-20260921.md §A6.
   ============================================================ */
@media (min-width:1025px){
  #reads .tips-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---- R47 A6 후속(2026-09-21) — #tips 텍스트 전용 카드(프래그 없음, P1-14 신규 2장)가 사진 카드와
   같은 행에서 그리드 stretch로 늘어나 안 빈 공간이 크게 남았다(육안 확인) — align-self:start로 제자리. ---- */
@media (min-width:1025px){
  #tips .tips-item--text{ align-self:start; }
}

/* ============================================================
   R47 A7(2026-09-21) — 스킵 링크 착지 보정(P1-19). 정본 = docs/planning/pages/R47-brief-20260921.md §A7.
   ============================================================ */
#main{ scroll-margin-top:72px; }

/* R55 addendum3(2026-09-21 오너) — 기준일 층(`.date-basis-note`, guide) CSS 삭제(마크업 함께 걷음). */

/* ============================================================
   R79 §6(2026-09-29) — 모바일 GNB 시트 통일(홈 index.html R79 블록과 같은 선언). R77 L2·L4:
   ① 「임대인 가입하기」(btn--outline-ink)가 주황 채움+잉크 글자로 렌더 — 시트 규칙(551행대)이 두 CTA를 한꺼번에 덮었다.
      시트 안에서도 버튼 class 표현 그대로: outline-ink = 잉크 테두리·잉크 글자 / orange = .btn--orange 정의(30행) 그대로.
      (가이드 4페이지만 잉크 글자였던 「방 등록하기」가 다른 4페이지와 같아진다 — .btn--orange 글씨색 자체는 오너 결정 대기.)
   ② 「홈」만 좌우 17px(723행 데스크톱 규칙이 시트까지 번짐) → 시트에선 다른 항목과 같은 2px.
   ③ 두 버튼 간격 12px — 296행 flex·gap이 545행 display:block에 져서 0이었다.
   ============================================================ */
@media (max-width:1024px){
  .gnb__sheet .gnb__nav ul li:first-child a{ padding-left:2px; padding-right:2px; }
  .gnb__sheet .gnb__actions{ display:flex; flex-direction:column; gap:12px; }
  .gnb.is-open .gnb__cta.btn--outline-ink,
  .gnb:not(.is-solid).is-open .gnb__cta.btn--outline-ink{ background:transparent; border-color:var(--ink); color:var(--ink); }
  .gnb.is-open .gnb__cta.btn--outline-ink:hover,
  .gnb:not(.is-solid).is-open .gnb__cta.btn--outline-ink:hover{ background:rgba(26,26,26,.06); border-color:var(--ink); color:var(--ink); }
  .gnb.is-open .gnb__cta.btn--orange,
  .gnb:not(.is-solid).is-open .gnb__cta.btn--orange,
  .gnb.is-open .gnb__cta.btn--orange:hover,
  .gnb:not(.is-solid).is-open .gnb__cta.btn--orange:hover{ background:var(--orange-500); border-color:var(--orange-500); color:#fff; }
}
/* R79 §6 — 고정 GNB 아래로 숨는 앵커·키보드 포커스(R77 L4: /guide/register/ 포커스 top −15). 루트 scroll-padding 하나로
   GNB 높이 + 16 = 80px(대상별 scroll-margin은 ≤1024 기존 scroll-padding-top 64와 더해져 144가 되므로 쓰지 않는다). */
html{ scroll-padding-top:calc(var(--gnb-h) + 16px); }

/* R80(2026-09-29) — AA 바닥: 주황 채움면 위 글자는 잉크(#1A1A1A on #FF6905 = 6.03:1). 흰 글자(2.89:1) 선언이 GNB 열림·고정 바·
   최종 CTA 등 여러 층에 흩어져 있어 바닥 조건 하나로 덮는다 — 색만 !important. 홈(index.html)·생성기 3페이지에도 같은 규칙. */
.btn--orange, .btn--orange:hover, .btn--orange:focus, .btn--orange:focus-visible, .btn--orange:active{ color:var(--ink) !important; }