/* =========================================================
   여울투어 YEOUL TOUR — 공통 스타일 (레퍼런스: 참좋은여행)
   토큰 고정: 4px 스케일 / 아이콘 16·20·24·40·48 / 버튼 38·44·52
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gutter:40px;
  --maxw:1440px;
  --header-h:80px;
  --sec-pad:96px;
  --sec-head-gap:48px;
  --box-pad:24px;
  --icon:24px;

  --brand:#1B5FD9;
  --brand-d:#12439E;
  --brand-l:#EAF1FE;
  --accent:#FF2D74;
  --accent-l:#FFF0F5;
  --mint:#00B5A5;
  --amber:#FF9F0A;
  --violet:#6E56CF;
  --coral:#FF6B4A;

  --ink:#101828;
  --ink-2:#475467;
  --ink-3:#8A94A6;
  --line:#E4E9F0;
  --line-2:#EFF2F7;
  --bg:#FFFFFF;
  --soft:#F4F7FB;
  --dark:#12203A;

  --radius:10px;
  --radius-lg:16px;
  --shadow:0 2px 10px rgba(16,24,40,.06);
  --shadow-2:0 8px 28px rgba(16,24,40,.10);
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",system-ui,sans-serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.7;color:var(--ink);background:var(--bg);
  word-break:keep-all;overflow-wrap:break-word;
}
img,video,iframe,svg,table{max-width:100%}
[hidden]{display:none!important}
img{height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.5;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:target{scroll-margin-top:calc(var(--header-h) + var(--s-4))}
[id]{scroll-margin-top:calc(var(--header-h) + var(--s-4))}

/* ---------- 레이아웃 ---------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.section--soft{background:var(--soft)}
.section--dark{background:var(--dark);color:#fff}
.sec-head{margin-bottom:var(--sec-head-gap);text-align:center}
.sec-head h2{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.sec-head p{margin-top:var(--s-3);font-size:16px;color:var(--ink-3);max-width:56ch;margin-left:auto;margin-right:auto}
.section--dark .sec-head h2{color:#fff}
.section--dark .sec-head p{color:#B8C4DA}
.sec-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);text-align:left}
.sec-head--row p{margin-left:0;margin-right:0}

/* ---------- 아이콘 ---------- */
.icon{width:var(--icon);height:var(--icon);flex:0 0 auto;display:block;stroke-width:1.75}
.icon--16{--icon:16px}
.icon--20{--icon:20px}
.icon--24{--icon:24px}
.icon--40{--icon:40px}
.icon--48{--icon:48px}
.ico-txt{display:inline-flex;align-items:center;gap:var(--s-2)}
.ico-txt--top{align-items:flex-start}
.ico-txt--top .icon{margin-top:calc((1lh - var(--icon)) / 2)}
.ico-circle{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--brand-l);color:var(--brand);flex:0 0 auto}
.ico-circle .icon{--icon:24px}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius);
  font-size:15px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;
  background:var(--brand);color:#fff;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn .icon{--icon:20px}
.btn--sm{height:38px;padding:0 16px;font-size:14px}
.btn--sm .icon{--icon:16px}
.btn--lg{height:52px;padding:0 28px;font-size:16px}
.btn--block{width:100%}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--line{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn--accent{background:var(--accent);color:#fff}
.btn--dark{background:var(--ink);color:#fff}
.btn--white{background:#fff;color:var(--brand)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-group{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center}
.btn-icon .icon{--icon:20px}
@media (hover:hover){
  .btn:hover{background:var(--brand-d)}
  .btn--ghost:hover{background:var(--soft);border-color:#CFD8E6}
  .btn--line:hover{background:var(--brand-l)}
  .btn--accent:hover{background:#E01A5F}
  .btn--white:hover{background:#EEF3FF}
  .btn--dark:hover{background:#000}
}

/* ---------- 칩 · 배지 ---------- */
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink-2);line-height:1;white-space:nowrap;cursor:pointer
}
.chip.is-on{border-color:var(--brand);color:var(--brand);background:var(--brand-l)}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:24px;padding:0 8px;border-radius:4px;border:1px solid transparent;
  font-size:12px;font-weight:700;line-height:1;background:var(--brand);color:#fff;white-space:nowrap
}
.badge--accent{background:var(--accent)}
.badge--mint{background:var(--mint)}
.badge--amber{background:var(--amber)}
.badge--violet{background:var(--violet)}
.badge--line{background:#fff;color:var(--brand);border-color:var(--brand)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:4px;background:var(--soft);color:var(--ink-2);font-size:12px;font-weight:600;line-height:1}
.num{font-variant-numeric:tabular-nums}

/* ---------- 헤더 ---------- */
.header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hdr-inner{display:flex;align-items:center;height:var(--header-h);transition:height .25s ease}
.header.is-shrink{box-shadow:0 1px 12px rgba(0,0,0,.10)}
.header.is-shrink .hdr-inner{height:64px}
.header.is-shrink .util{display:none}
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo svg{height:26px;width:auto;display:block;transition:height .25s ease}
.header.is-shrink .logo svg{height:22px}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-4)}
.gnb{display:flex;align-items:center;gap:var(--s-5)}
.gnb>li>a{display:inline-flex;align-items:center;height:40px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.gnb>li>a.is-active{color:var(--brand)}
.util{display:flex;align-items:center;gap:var(--s-4);padding-left:var(--s-4);border-left:1px solid var(--line)}
.util a:not(.btn){font-size:14px;font-weight:600;color:var(--ink-3)}
.hamburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;padding:0}
.hamburger .icon{--icon:24px;color:var(--ink)}
@media (hover:hover){
  .gnb>li>a:hover{color:var(--brand)}
  .util a:not(.btn):hover{color:var(--ink)}
}

/* ---------- 모바일 드로어 ---------- */
.mm-dim{position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s ease}
.mm-dim.is-open{opacity:1;pointer-events:auto}
.mmenu{
  position:fixed;top:0;right:0;bottom:0;width:min(360px,88%);background:#fff;z-index:90;
  transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;
}
.mmenu.is-open{transform:translateX(0)}
.mmenu__head{display:flex;align-items:center;height:64px;padding:0 var(--s-5);border-bottom:1px solid var(--line);flex:0 0 auto}
.mmenu__head .logo svg{height:22px}
.mmenu__close{margin-left:auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;padding:0}
.mmenu__body{flex:1 1 auto;overflow-y:auto;padding:var(--s-4) var(--s-5) var(--s-5)}
.mmenu__nav>li+li{border-top:1px solid var(--line-2)}
.mmenu__nav a:not(.btn):not(.chip):not(.badge){display:flex;align-items:center;min-height:52px;font-size:17px;font-weight:700;color:var(--ink)}
.mmenu__nav a.is-active{color:var(--brand)}
.mmenu__sub{margin-top:var(--s-5);padding-top:var(--s-5);border-top:2px solid var(--line)}
.mmenu__sub h3{font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;margin-bottom:var(--s-2)}
.mmenu__sub a:not(.btn):not(.chip):not(.badge){display:flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--ink-2)}
.mmenu__act{flex:0 0 auto;padding:var(--s-5);border-top:1px solid var(--line);background:var(--soft);display:flex;flex-direction:column;gap:var(--s-3)}
.mmenu__act .btn{width:100%}
.mmenu__act .mm-hours{font-size:13px;color:var(--ink-3);text-align:center;margin-top:var(--s-1)}
body.is-locked{overflow:hidden}

/* ---------- 서브 히어로 ---------- */
.subhero{background:var(--soft);border-bottom:1px solid var(--line)}
.subhero__inner{padding-top:var(--s-7);padding-bottom:var(--s-7)}
.subhero h1{font-size:38px;font-weight:800;letter-spacing:-.03em}
.subhero p{margin-top:var(--s-3);color:var(--ink-2);max-width:80ch}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);font-size:13px;color:var(--ink-3)}
.crumb .sep{color:#C7CFDC}
.crumb a{color:var(--ink-3)}

/* ---------- 서브 레이아웃 (사이드 + 본문) ---------- */
.sub-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s-8);align-items:start}
.side{position:sticky;top:calc(var(--header-h) + var(--s-5))}
.side>h2{font-size:24px;font-weight:800;padding-bottom:var(--s-4);border-bottom:2px solid var(--ink)}
.side__nav li+li{border-top:1px solid var(--line-2)}
.side__nav a:not(.btn){display:flex;align-items:center;min-height:48px;font-size:15px;font-weight:600;color:var(--ink-2)}
.side__nav a.is-active{color:var(--brand);font-weight:700}
.side-cs{margin-top:var(--s-6);background:var(--soft);border-radius:var(--radius);padding:var(--box-pad)}
.side-cs h3{font-size:14px;font-weight:700;color:var(--ink-2)}
.side-cs .tel{display:block;margin-top:var(--s-2);font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.02em}
.side-cs .hours{margin-top:var(--s-2);font-size:13px;color:var(--ink-3)}
.side-cs .btn-group{margin-top:var(--s-5);flex-direction:column;align-items:stretch}
.side-cs .btn{width:100%}
@media (hover:hover){.side__nav a:not(.btn):hover{color:var(--brand)}}

/* ---------- 카드 (비박스형 / 박스형) ---------- */
.grid{display:grid;gap:var(--s-6)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid>*{min-width:0}

.card{display:flex;flex-direction:column;height:100%;background:transparent;min-width:0}
.card__thumb{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card__badges{position:absolute;top:var(--s-3);left:var(--s-3);display:flex;gap:var(--s-2);flex-wrap:wrap;max-width:calc(100% - var(--s-5))}
.card__body{display:flex;flex-direction:column;flex:1 1 auto;padding-top:var(--s-4)}
.card__title{font-size:17px;font-weight:700;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2lh}
.card__desc{margin-top:var(--s-3);font-size:14px;line-height:1.7;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__meta{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:var(--s-2);font-size:13px;color:var(--ink-3)}
.card__foot{margin-top:auto;padding-top:var(--s-5);display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.price{font-size:26px;font-weight:800;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price small{font-size:14px;font-weight:700;margin-left:2px}
.price-was{font-size:14px;color:var(--ink-3);text-decoration:line-through;font-variant-numeric:tabular-nums}
.rate{font-size:16px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
@media (hover:hover){
  .card:hover .card__thumb img{transform:scale(1.06)}
  .card:hover .card__title{text-decoration:underline;text-underline-offset:3px}
}
/* 박스형 카드 — 배경/테두리 있음, 이미지 full-bleed, 텍스트만 padding */
.card--boxed{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.card--boxed .card__thumb{border-radius:0}
.card--boxed .card__body{padding:var(--box-pad)}
.card--boxed .card__foot{padding-top:var(--s-5)}

/* 박스형 패널 공통 */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--box-pad)}
.panel--soft{background:var(--soft);border-color:transparent}
.panel--brand{background:var(--brand-l);border-color:transparent}
.panel h3{font-size:18px;font-weight:800}

/* ---------- 배너 ---------- */
.banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:200px}
.banner__txt{padding:var(--s-7)}
.banner__eyebrow{font-size:14px;font-weight:700;opacity:.85}
.banner__ttl{margin-top:var(--s-2);font-size:30px;font-weight:800;letter-spacing:-.03em}
.banner__txt .btn{margin-top:var(--s-5)}
.banner__img{height:100%;min-height:200px}
.banner__img img{width:100%;height:100%;object-fit:cover}
.banner--brand{background:var(--brand);color:#fff}
.banner--violet{background:var(--violet);color:#fff}
.banner--mint{background:var(--mint);color:#fff}

/* ---------- 폼 ---------- */
.form-row{margin-bottom:var(--s-4)}
.form-row>label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:var(--s-2)}
.req{color:var(--accent);margin-left:2px}
.input,.select,.textarea{
  width:100%;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
}
.textarea{height:auto;min-height:140px;padding:12px 14px;line-height:1.7;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='1.75'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px 20px;padding-right:40px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(27,95,217,.12)}
.err{display:block;font-size:12px;color:var(--accent);margin-top:var(--s-1);min-height:0}
.form-row.is-err .input,.form-row.is-err .select,.form-row.is-err .textarea{border-color:var(--accent)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-4)}
.form-grid>*{min-width:0}
.check{display:flex;align-items:center;gap:var(--s-2);min-height:48px}
.check input[type=checkbox],.check input[type=radio]{width:20px;height:20px;flex:0 0 auto;margin:0;accent-color:var(--brand)}
.check label{font-size:14px;color:var(--ink-2);margin:0}
.help{font-size:13px;color:var(--ink-3)}

/* 스텝 인디케이터 */
.steps{display:flex;gap:var(--s-2);margin-bottom:var(--s-7)}
.steps li{flex:1 1 0;display:flex;align-items:center;gap:var(--s-2);min-width:0}
.steps .no{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--line-2);color:var(--ink-3);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.steps .lb{font-size:14px;font-weight:700;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.steps li.is-on .no{background:var(--brand);color:#fff}
.steps li.is-on .lb{color:var(--brand)}
.steps li.is-done .no{background:var(--mint);color:#fff}

/* ---------- 탭 · 아코디언 ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:var(--s-2);border-bottom:1px solid var(--line);margin-bottom:var(--s-6)}
.tabs button{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  height:52px;padding:0 20px;font-size:16px;font-weight:700;color:var(--ink-3);cursor:pointer;line-height:1
}
.tabs button.is-on{color:var(--brand);border-bottom-color:var(--brand)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__q{
  width:100%;display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-4) 0;
  background:none;border:0;text-align:left;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer
}
.acc__q .qmark{color:var(--brand);font-weight:800;flex:0 0 auto}
.acc__q .icon{--icon:20px;margin-left:auto;color:var(--ink-3);transition:transform .2s ease}
.acc__item.is-open .acc__q .icon{transform:rotate(180deg)}
.acc__a{display:none;padding:0 0 var(--s-5) var(--s-6);color:var(--ink-2);font-size:15px;line-height:1.8}
.acc__item.is-open .acc__a{display:block}

/* ---------- 테이블 ---------- */
.tbl-wrap{width:100%;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.tbl th,.tbl td{padding:var(--s-4) var(--s-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl thead th{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap}
.tbl td.c,.tbl th.c{text-align:center}
.tbl td.num{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.tbl a:not(.btn):not(.chip):not(.badge){font-weight:600}
.tbl-hint{display:none;font-size:13px;color:var(--ink-3);margin-bottom:var(--s-2)}
@media (hover:hover){.tbl tbody tr:hover{background:var(--soft)}}

/* ---------- 페이지네이션 ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:var(--s-2);margin-top:var(--s-7);flex-wrap:wrap}
.pager a,.pager span{
  min-width:44px;height:44px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--radius);
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--ink-2);
  background:#fff;font-variant-numeric:tabular-nums
}
.pager .is-on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- 푸터 ---------- */
.footer{background:var(--soft);border-top:1px solid var(--line);color:var(--ink-2)}
.footer__top{padding-top:var(--s-8);padding-bottom:var(--s-8);display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:var(--s-8)}
.footer__brand .logo svg{height:26px}
.footer__brand p{margin-top:var(--s-4);font-size:14px;line-height:1.8;color:var(--ink-3)}
.footer__brand .btn-group{margin-top:var(--s-5)}
.footer h3{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:var(--s-4)}
.footer__col a:not(.btn):not(.chip):not(.badge){display:block;padding:6px 0;font-size:14px;color:var(--ink-2)}
.footer__info{display:flex;align-items:flex-start;gap:var(--s-2);padding:4px 0;font-size:14px;color:var(--ink-2)}
.footer__bottom{border-top:1px solid var(--line);padding-top:var(--s-5);padding-bottom:var(--s-5)}
.footer__bottom .row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.footer__bottom p{font-size:13px;line-height:1.8;color:var(--ink-3)}
.footer__legal{display:flex;gap:var(--s-4);flex-wrap:wrap}
.footer__legal a:not(.btn){font-size:13px;font-weight:600;color:var(--ink-2)}
.credit{margin-top:var(--s-3);font-size:12px;color:var(--ink-3)}
@media (hover:hover){.footer__col a:not(.btn):hover,.footer__legal a:not(.btn):hover{color:var(--brand)}}

/* ---------- 맨 위로 ---------- */
.totop{
  position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:50;padding:0
}
.totop.is-on{opacity:1;pointer-events:auto}
.totop .icon{--icon:20px}

/* ---------- 스크롤 등장 ---------- */
.reveal{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.reveal.is-hidden{opacity:0;transform:translateY(16px)}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
  .grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sub-layout{gap:var(--s-7)}
}
@media (max-width:1199px){
  .util{display:none}
  .gnb{gap:var(--s-4)}
  .gnb>li>a{font-size:15px}
}
@media (max-width:1023px){
  :root{--gutter:28px;--header-h:64px;--sec-pad:72px;--sec-head-gap:32px}
  .header.is-shrink .hdr-inner{height:56px}
  .gnb,.util{display:none}
  .hamburger{display:inline-flex}
  .hdr-right{gap:var(--s-3)}
  .sub-layout{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .side__nav{display:flex;flex-wrap:wrap;gap:var(--s-2)}
  .side__nav li{border:0}
  .side__nav li+li{border-top:0}
  .side__nav a:not(.btn){min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff}
  .side__nav a.is-active{border-color:var(--brand);background:var(--brand-l)}
  .side-cs{display:none}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}
  .sec-head h2{font-size:30px}
  .subhero h1{font-size:32px}
}
@media (max-width:767px){
  :root{--gutter:20px;--sec-pad:56px;--sec-head-gap:24px;--box-pad:16px}
  .grid{gap:var(--s-5)}
  .grid--4,.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .banner{grid-template-columns:minmax(0,1fr)}
  .banner__txt{padding:var(--s-6) var(--s-5)}
  .banner__img{min-height:180px;order:-1}
  .banner__ttl{font-size:24px}
  .sec-head--row{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .input,.select{height:44px}
  .tbl-hint{display:block}
  .sec-head h2{font-size:26px}
  .subhero h1{font-size:26px}
  .subhero__inner{padding-top:var(--s-6);padding-bottom:var(--s-6)}
  .footer__top{padding-top:var(--s-7);padding-bottom:var(--s-7);gap:var(--s-6)}
  .price{font-size:22px}
}
@media (max-width:479px){
  :root{--gutter:16px;--sec-pad:40px;--header-h:56px}
  .logo svg{height:22px}
  .hdr-right>.btn{display:none}
  .grid--4,.grid--3,.grid--2{grid-template-columns:minmax(0,1fr)}
  .footer__top{grid-template-columns:minmax(0,1fr)}
  .steps .lb{display:none}
  .steps{gap:var(--s-1)}
  .sec-head h2{font-size:23px}
  .subhero h1{font-size:23px}
  .card__title{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}