/* 배움나루 문화센터 — 레퍼런스 n40c(ascc.bornfight.com) 1:1 제작 · 2026-09-24
   어두운 지면 · 화면을 가득 채우는 굵은 대문자 · 작은 라벨 열 · 원형 도장 — 레퍼런스의 성격은 유지하고
   색(남보라 → 따뜻한 먹빛 + 금빛)과 아래 구획의 짜임을 바꾼다. */

:root{
  --bg:#14120D;        /* 따뜻한 먹빛 지면 (레퍼런스의 남보라를 온도만 옮긴 어두운 지면) */
  --bg2:#1E1B14;       /* 살짝 밝은 판 */
  --bg3:#2A251A;       /* 더 밝은 판 · 표 머리 */
  --ink:#F5F1E5;
  --mut:#B3AB93;
  --mut2:#8F886F;
  --acc:#EBC230;       /* 금빛 — 흙·나무·조명이 도는 수업 사진에서 뽑았다 */
  --acc-d:#B08D14;
  --acc-s:#5A4A12;
  --line:rgba(245,241,229,.15);
  --line2:rgba(245,241,229,.09);
  --sn-bg:#14120D; --sn-fg:#F5F1E5; --sn-line:rgba(245,241,229,.16);
  --wrap:1280px;
  --disp:"Special Gothic Expanded One","Pretendard Variable",system-ui,sans-serif;
  --body:"Pretendard Variable",system-ui,-apple-system,"Malgun Gothic",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.85; letter-spacing:-.015em;
  overflow-x:hidden;
}
/* 레퍼런스의 거친 입자감을 외부 파일 없이 흉내 낸다 */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:
    radial-gradient(rgba(255,255,255,.035) .5px,transparent .6px),
    radial-gradient(rgba(0,0,0,.05) .5px,transparent .6px);
  background-size:3px 3px,5px 5px; background-position:0 0,1px 2px;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.25}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}
.wrap{width:min(100% - 44px,var(--wrap)); margin-inline:auto}
.en{font-family:var(--disp); font-weight:400; letter-spacing:.01em; text-transform:uppercase}
main{position:relative; z-index:2}

/* 나타나기 */
.pop{opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.7,.3,1)}
.pop.go,.reduce .pop{opacity:1; transform:none}
.js .pop{will-change:opacity,transform}
html:not(.js) .pop{opacity:1; transform:none}

/* ─────────── 헤더 ─────────── */
.hd{position:relative; z-index:60}
.hd-in{
  width:min(100% - 44px,var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:22px; padding:26px 0 8px;
}
.brand{display:inline-flex; flex-direction:column; justify-content:center; min-height:46px; text-decoration:none; line-height:1}
.b-top{font-family:var(--disp); font-size:22px; letter-spacing:.005em}
.b-bot{margin-top:6px; font-size:11px; letter-spacing:.18em; color:var(--mut2); text-transform:uppercase}
.dnav{display:flex; gap:26px; margin-left:auto}
/* 2026-09-27 메뉴 한 언어(한글만) — 영문 윗줄 em 삭제에 맞춰 한 줄로 */
.dnav a{
  text-decoration:none; font-size:15px; font-weight:600; letter-spacing:-.02em;
  display:flex; align-items:center; min-height:44px; padding:8px 0; color:var(--ink); opacity:.85;
}
.dnav a:hover,.dnav a[aria-current]{opacity:1; color:var(--acc)}
.hd-tools{display:flex; align-items:center; gap:10px}
.hd-pill{
  display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 24px;
  border-radius:999px; background:var(--ink); color:#14120D; text-decoration:none;
  font-size:13px; font-weight:800; letter-spacing:.01em; transition:background .2s,color .2s;
}
.hd-pill svg{width:16px; height:16px}
.hd-pill:hover{background:var(--acc)}
.burger{
  display:none; width:46px; height:46px; border-radius:999px; border:1px solid var(--line);
  background:transparent; cursor:pointer; padding:0; place-items:center;
}
.burger i{display:block; width:17px; height:1.6px; background:var(--ink); margin:3.5px auto; transition:transform .25s}
.mm-open .burger i:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
.mm-open .burger i:nth-child(2){opacity:0}
.mm-open .burger i:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(88vw,380px); background:#1A1711; z-index:2147483100;
  transform:translateX(102%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  padding:84px 26px 30px; overflow:auto; border-left:1px solid var(--line);
}
.mobile-nav.open{transform:none}
.mobile-nav ul li a{
  display:flex; align-items:baseline; gap:10px; padding:15px 2px; text-decoration:none;
  border-bottom:1px solid var(--line2); font-size:17px; font-weight:700; min-height:46px;
}
.mobile-nav ul li a span{font-family:var(--disp); font-size:10.5px; letter-spacing:.16em; color:var(--acc)}
.mnav-foot{display:grid; gap:9px; margin-top:22px}
.mnav-foot a{
  display:flex; align-items:center; gap:9px; min-height:48px; padding:0 16px; border-radius:12px;
  border:1px solid var(--line); text-decoration:none; font-size:14px; font-weight:600;
}
.mnav-foot a svg{width:18px; height:18px}
.mnav-foot a.fill{background:var(--acc); color:#14120D; border-color:var(--acc)}
.mnav-hours{margin-top:14px; font-size:12px; color:var(--mut)}

/* ─────────── 첫 화면 ─────────── */
.hero{padding:26px 0 78px; position:relative}
.meta{
  width:min(100% - 44px,var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 30px; padding:14px 0 0;
}
.meta div{min-width:0}
.meta dt{font-family:var(--disp); font-size:11.5px; letter-spacing:.11em; color:var(--acc)}
.meta dd{margin-top:5px; font-size:14px; color:var(--ink); line-height:1.65}
.meta dd small{display:block; font-size:12.5px; color:var(--mut)}

.stamp{
  width:96px; height:96px; margin:22px 0 6px 2px; position:relative;
  border:1px solid var(--line); border-radius:50%; display:grid; place-items:center;
}
.stamp svg{width:100%; height:100%; animation:spin 22s linear infinite}
.reduce .stamp svg{animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.stamp b{position:absolute; font-family:var(--disp); font-size:15px; color:var(--acc)}
.stamp text{font-family:var(--body); font-size:8.1px; letter-spacing:.24em; fill:var(--mut); font-weight:600}

.big{
  margin:6px 0 0; font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(38px,6.3vw,92px); line-height:1; letter-spacing:-.012em;
  padding-left:clamp(14px,3vw,40px);
}
.big span{display:block; white-space:nowrap}
.big span:nth-child(2){padding-left:clamp(20px,6vw,96px)}
.big span:nth-child(3){color:var(--acc); padding-left:clamp(40px,12vw,186px)}

.hero-low{
  width:min(100% - 44px,var(--wrap)); margin:30px auto 0;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr); gap:40px 56px; align-items:start;
}
.hero-lead{font-size:18.5px; line-height:1.95; color:var(--ink)}
.hero-lead b{color:var(--acc); font-weight:700}
.hero-note{margin-top:18px; font-size:15px; color:var(--mut); line-height:1.95}
.hero-dl{display:grid; gap:0; border-top:1px solid var(--line)}
.hero-dl div{display:grid; grid-template-columns:104px minmax(0,1fr); gap:16px; padding:15px 0; border-bottom:1px solid var(--line2)}
.hero-dl dt{font-size:13px; color:var(--mut); font-weight:600}
.hero-dl dd{font-size:15px; font-weight:600}
.hero-dl dd small{display:block; font-weight:400; font-size:13px; color:var(--mut)}
.hero-cta{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px}
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px;
  background:var(--acc); color:#14120D; text-decoration:none; font-size:14px; font-weight:800;
  transition:transform .2s,box-shadow .2s;
}
.btn svg{width:13px; height:13px}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 30px -16px rgba(235,194,48,.9)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--acc); color:var(--acc); box-shadow:none}

/* ─────────── 공통 구획 ─────────── */
.sec{padding:84px 0}
.sec-head{max-width:820px; margin-bottom:38px}
.sec-head .kick{font-family:var(--disp); font-size:12px; letter-spacing:.14em; color:var(--acc)}
.sec-head h2{margin-top:12px; font-size:clamp(26px,3.5vw,38px); line-height:1.35}
.sec-head p{margin-top:15px; font-size:15.5px; color:var(--mut); line-height:1.95}

/* 1 · 학기 요약 — 좌우 2단 */
.term{background:var(--bg2); padding:78px 0; border-block:1px solid var(--line2)}
.term-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px 64px; align-items:start}
.term h2{font-size:clamp(25px,3.2vw,35px); line-height:1.4}
.term h2 em{font-style:normal; display:block; font-family:var(--disp); font-size:.44em; letter-spacing:.1em; color:var(--acc); margin-bottom:12px}
.term-p{margin-top:18px; font-size:15.5px; color:var(--mut); line-height:2}
.term-rows{display:grid; gap:12px}
.term-rows article{
  background:var(--bg); border:1px solid var(--line2); border-radius:18px; padding:20px 24px;
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:18px; align-items:baseline;
}
.term-rows article:nth-child(2n){background:#191610}
.term-rows h3{font-size:15px; color:var(--acc)}
.term-rows h3 small{display:block; font-family:var(--disp); font-size:10px; letter-spacing:.13em; color:var(--mut2); margin-top:4px}
.term-rows p{font-size:14.5px; color:var(--ink); line-height:1.9}
.term-rows p span{display:block; color:var(--mut); font-size:13.5px}

/* 2 · 개설 강좌 — 옅은 색면 카드(레퍼런스의 가는 선 목록을 면으로 바꿨다) */
.courses{padding:90px 0}
.cgrid{display:grid; gap:14px}
.crow{
  background:var(--bg2); border-radius:20px; padding:24px 28px;
  display:grid; grid-template-columns:minmax(0,1.5fr) 150px 116px 132px; gap:22px; align-items:center;
  transition:background .22s,transform .22s;
}
.crow:hover{background:var(--bg3); transform:translateX(5px)}
.crow .cname{min-width:0}
.crow h3{font-size:17.5px; line-height:1.4}
.crow .ctag{margin-top:8px; display:flex; flex-wrap:wrap; gap:7px}
.ctag span{
  font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px;
  border:1px solid var(--line); color:var(--mut);
}
.ctag span.on{background:var(--acc-s); border-color:transparent; color:var(--acc)}
.crow .cwhen{font-size:14px; color:var(--ink)}
.crow .cwhen small{display:block; color:var(--mut); font-size:12.5px}
.crow .ccap{font-size:14px; color:var(--mut)}
.crow .cfee{font-family:var(--disp); font-size:19px; color:var(--acc); text-align:right}
.crow .cfee small{display:block; font-family:var(--body); font-size:12px; color:var(--mut); letter-spacing:0; margin-top:4px}
.c-note{margin-top:26px; font-size:14px; color:var(--mut); line-height:1.95; max-width:820px}

/* 3 · 수업 사진 — 레퍼런스의 가로 슬라이더를 엇갈린 격자로 펼쳤다 */
.gal{padding:0 0 92px}
.ggrid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px}
.gcell{position:relative; border-radius:22px; overflow:hidden; background:var(--bg2)}
.gcell img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gcell:hover img{transform:scale(1.05)}
.gcell figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:44px 20px 17px; font-size:13.5px; font-weight:600;
  background:linear-gradient(to top,rgba(10,9,6,.9),rgba(10,9,6,0));
}
.gcell figcaption b{display:block; font-family:var(--disp); font-size:10.5px; letter-spacing:.14em; color:var(--acc); margin-bottom:5px; font-weight:400}
.g1{grid-column:span 4; aspect-ratio:16/9}
.g2{grid-column:span 2; aspect-ratio:3/4}
.g3{grid-column:span 2; aspect-ratio:1/1; margin-top:-64px}
.g4{grid-column:span 2; aspect-ratio:1/1}
.g5{grid-column:span 2; aspect-ratio:4/5}

/* 4 · 접수 안내 — 안쪽으로 들인 둥근 판 */
.apply{padding:0 0 92px}
.apply-in{
  background:linear-gradient(140deg,#241F14,#191610 62%);
  border:1px solid var(--line2); border-radius:34px; padding:clamp(30px,5vw,60px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px 60px; align-items:center;
}
.apply h2{font-size:clamp(24px,3vw,34px); line-height:1.4}
.apply h2 em{font-style:normal; display:block; font-family:var(--disp); font-size:.42em; letter-spacing:.11em; color:var(--acc); margin-bottom:11px}
.apply-p{margin-top:16px; font-size:15px; color:var(--mut); line-height:2}
.steps{display:grid; gap:11px}
.steps li{
  background:rgba(245,241,229,.045); border-radius:16px; padding:17px 22px;
  display:grid; grid-template-columns:86px minmax(0,1fr); gap:16px; align-items:baseline;
}
.steps b{font-size:13px; color:var(--acc); font-weight:700}
.steps p{font-size:14.5px; line-height:1.85}
.steps p span{display:block; color:var(--mut); font-size:13px}

/* 5 · 공지 */
.notice{padding:0 0 100px}
.nlist{display:grid; gap:0; border-top:1px solid var(--line)}
.nlist a{
  display:grid; grid-template-columns:110px minmax(0,1fr) 92px; gap:22px; align-items:center;
  padding:22px 6px; border-bottom:1px solid var(--line2); text-decoration:none; transition:padding .22s,background .22s;
}
.nlist a:hover{padding-left:16px; background:rgba(245,241,229,.03)}
.nlist time{font-family:var(--disp); font-size:13px; color:var(--mut2)}
.nlist h3{font-size:16px}
.nlist p{margin-top:5px; font-size:13.5px; color:var(--mut); line-height:1.8}
.nlist .tag{font-size:11.5px; font-weight:700; color:var(--acc); text-align:right}

/* ─────────── 하위 페이지 ─────────── */
.ph{padding:44px 0 56px; border-bottom:1px solid var(--line2)}
.ph .kick{font-family:var(--disp); font-size:12px; letter-spacing:.14em; color:var(--acc)}
.ph h1{margin-top:16px; font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:clamp(38px,7.6vw,96px); line-height:.98; letter-spacing:-.012em}
.ph .ph-ko{margin-top:18px; font-size:17px; color:var(--ink); max-width:760px; line-height:1.95}
.ph .ph-sub{margin-top:12px; font-size:14.5px; color:var(--mut); max-width:760px; line-height:1.95}

.two{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:38px 60px; align-items:start}
.panel{background:var(--bg2); border:1px solid var(--line2); border-radius:24px; padding:clamp(22px,3vw,34px)}
.panel + .panel{margin-top:14px}
.panel h3{font-size:18px}
.map h3{font-size:18px}
.panel h3 em,.map h3 em{font-style:normal; display:block; font-family:var(--disp); font-size:.6em; letter-spacing:.12em; color:var(--acc); margin-bottom:8px}
.panel p{margin-top:12px; font-size:14.5px; color:var(--mut); line-height:2}
.panel ul.dots{margin-top:14px; display:grid; gap:9px}
.panel ul.dots li{position:relative; padding-left:16px; font-size:14.5px; line-height:1.9}
.panel ul.dots li::before{content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:var(--acc)}
.panel ul.dots li span{color:var(--mut)}

.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px}
.tbl caption{text-align:left; font-size:13.5px; color:var(--mut); padding-bottom:12px}
.tbl th,.tbl td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line2)}
.tbl thead th{background:var(--acc-s); color:var(--acc); font-size:13px; letter-spacing:.02em}
.tbl thead th:first-child{border-radius:14px 0 0 0}
.tbl thead th:last-child{border-radius:0 14px 0 0}
.tbl tbody tr:nth-child(2n) td{background:rgba(245,241,229,.03)}
.tbl td b{color:var(--acc); font-weight:700}
.tbl td small{display:block; color:var(--mut); font-size:12.5px}

.tabs{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px}
.tabs button{
  min-height:44px; padding:0 20px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.tabs button:hover{border-color:var(--acc); color:var(--acc)}
.tabs button.on{background:var(--acc); color:#14120D; border-color:var(--acc)}

.faq{display:grid; gap:10px}
.faq .q{
  width:100%; text-align:left; background:var(--bg2); border:1px solid var(--line2); color:var(--ink);
  border-radius:16px; padding:18px 22px; font:inherit; font-size:15.5px; font-weight:700; cursor:pointer;
  display:flex; justify-content:space-between; gap:18px; align-items:center; min-height:52px;
}
.faq .q::after{content:"+"; color:var(--acc); font-size:20px; line-height:1}
.faq .open .q::after{content:"–"}
.faq .a{display:none; padding:4px 24px 20px; font-size:14.5px; color:var(--mut); line-height:2}
.faq .open .a{display:block}

.imgbox{border-radius:24px; overflow:hidden; background:var(--bg2)}
.imgbox img{width:100%; aspect-ratio:4/3; object-fit:cover}
.imgbox figcaption{padding:15px 20px 19px; font-size:13.5px; color:var(--mut)}

.map{background:var(--bg2); border:1px solid var(--line2); border-radius:24px; padding:clamp(22px,3vw,34px)}
.map dl{display:grid; gap:0}
.map dl div{display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; padding:15px 0; border-bottom:1px solid var(--line2)}
.map dl div:last-child{border-bottom:0}
.map dt{font-size:13px; color:var(--mut); font-weight:600}
.map dd{font-size:14.5px; line-height:1.9}
.map dd small{display:block; color:var(--mut); font-size:13px}

/* ─────────── 푸터 ─────────── */
.to-top{
  position:fixed; right:18px; bottom:96px; z-index:80; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--bg3); border:1px solid var(--line); color:var(--ink);
  text-decoration:none; opacity:0; pointer-events:none; transition:opacity .25s;
}
.to-top svg{width:19px; height:19px}
.is-scrolled .to-top{opacity:1; pointer-events:auto}
.ft{background:#0E0C08; padding:74px 0 34px; position:relative; z-index:2; border-top:1px solid var(--line2)}
.ft-in{width:min(100% - 44px,var(--wrap)); margin-inline:auto}
.ft-top{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:38px 60px; padding-bottom:40px; border-bottom:1px solid var(--line2)}
.ft-ko{font-size:clamp(21px,2.6vw,29px); font-weight:700; line-height:1.5}
.ft-note{margin-top:14px; font-size:14.5px; color:var(--mut); line-height:2; max-width:560px}
.ft-links{margin-top:20px; display:flex; flex-wrap:wrap; gap:9px}
.ft-links a{
  min-height:44px; display:inline-flex; align-items:center; padding:0 18px; border-radius:999px;
  border:1px solid var(--line); text-decoration:none; font-size:13px; font-weight:600;
}
.ft-links a:hover{border-color:var(--acc); color:var(--acc)}
.ft-call{padding:16px 0; border-bottom:1px solid var(--line2)}
.ft-call:first-child{padding-top:0}
.ft-lab{font-family:var(--disp); font-size:11px; letter-spacing:.14em; color:var(--acc)}
.ft-num{display:inline-flex; align-items:center; min-height:46px; margin-top:4px; font-family:var(--disp); font-size:clamp(22px,2.6vw,30px); text-decoration:none}
.ft-num.sm{font-size:19px}
.ft-time{margin-top:6px; font-size:13px; color:var(--mut)}
.ft-bar{display:flex; flex-wrap:wrap; gap:16px 26px; justify-content:space-between; align-items:center; padding:24px 0}
.ft-policy{display:flex; flex-wrap:wrap; gap:18px}
.ft-policy a{display:inline-flex; align-items:center; min-height:46px; font-size:13px; color:var(--mut); text-decoration:none}
.ft-policy a:hover{color:var(--acc)}
.ft-mark{font-family:var(--disp); font-size:15px; letter-spacing:.02em; color:var(--mut2)}
.ft-legal{font-size:12.5px; color:var(--mut2); line-height:2.1}
.ft-legal i{font-style:normal; margin:0 9px; opacity:.4}
.ft-copy{margin-top:8px}

.mbar{display:none}

/* ─────────── 반응형 ─────────── */
@media (max-width:1080px){
  .hero-low,.term-in,.apply-in,.two,.ft-top{grid-template-columns:1fr}
  .crow{grid-template-columns:minmax(0,1fr) 140px; row-gap:14px}
  .crow .ccap{display:none}
  .crow .cfee{text-align:left}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .dnav{display:none}
  .hd-pill span{display:none}
  .hd-pill{padding:0 16px}
  .burger{display:grid}
  .mbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; background:#0E0C08;
    border-top:1px solid var(--line);
  }
  .mbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    min-height:58px; text-decoration:none; font-size:11.5px; font-weight:700; color:var(--ink);
  }
  .mbar a svg{width:19px; height:19px}
  .mbar a.tel{background:var(--acc); color:#14120D}
  body{padding-bottom:58px}
  .to-top{bottom:74px}
  .ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g1{grid-column:span 2; aspect-ratio:16/10}
  .g2,.g3,.g4,.g5{grid-column:span 1; aspect-ratio:1/1; margin-top:0}
  .sec,.courses{padding:60px 0}
  .term{padding:58px 0}
}
@media (max-width:620px){
  .hd-in{gap:12px; padding:18px 0 6px}
  .meta{grid-template-columns:1fr; gap:18px}
  .big{padding-left:0}
  .big span:nth-child(2){padding-left:14px}
  .big span:nth-child(3){padding-left:28px}
  .crow{grid-template-columns:1fr; row-gap:10px}
  .crow .cfee{font-size:17px}
  .ggrid{grid-template-columns:1fr}
  .g2,.g3,.g4,.g5{aspect-ratio:4/3}
  .tbl{display:block}
  .tbl thead{display:none}
  .tbl tbody,.tbl tr,.tbl td{display:block; width:100%}
  .tbl tr{background:var(--bg2); border-radius:16px; padding:8px 4px; margin-bottom:11px}
  .tbl tbody tr:nth-child(2n) td{background:transparent}
  .tbl td{border-bottom:1px solid var(--line2); padding:11px 16px}
  .tbl tr td:last-child{border-bottom:0}
  .tbl td::before{content:attr(data-label); display:block; font-size:11.5px; color:var(--acc); margin-bottom:3px}
  .hero{padding-bottom:52px}
  .term-rows article{grid-template-columns:1fr; gap:8px}
  .steps li{grid-template-columns:1fr; gap:6px}
  .nlist a{grid-template-columns:1fr; gap:8px}
  .nlist .tag{text-align:left}
}