/* ===== design tokens ===== */
:root{
  color-scheme: light;
  --ink:#101314;
  --ink-2:#2A2F31;
  --body:#4A4F52;
  --muted:#8A9094;
  --line:#E7E7E3;
  --line-2:#D6D7D1;
  --bg:#FFFFFF;
  --soft:#F7F7F5;
  --accent:#FF4552;      /* 로고 빨강. 버튼, 강조 바탕 */
  --accent-2:#E02D3A;    /* 눌림, 흰 바탕 위 작은 빨간 글씨 (명도대비 4.5 이상) */
  --accent-soft:#FFF0F1;
  --dark:#141414;
  --wrap: min(1296px, calc(100% - 44px));
  --r-lg:22px; --r-md:14px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:18px; line-height:1.68; letter-spacing:-0.012em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{color:var(--ink); margin:0; font-weight:600; letter-spacing:-0.035em; line-height:1.24}
h1{font-size:clamp(34px,5.6vw,68px)}
h2{font-size:clamp(26px,3.6vw,46px); letter-spacing:-0.032em}
h3{font-size:clamp(19px,1.7vw,24px); letter-spacing:-0.028em; line-height:1.38}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
::selection{background:#FFDDE0; color:var(--ink)}

.wrap{width:var(--wrap); margin-inline:auto}
.sec{padding:clamp(68px,9.5vw,138px) 0}
.sec--tight{padding:clamp(52px,6vw,88px) 0}
.eyebrow{font-size:14px; color:var(--muted); letter-spacing:-0.01em; margin-bottom:18px}
.lede{font-size:clamp(17px,1.35vw,20px); color:var(--body); max-width:62ch}
.muted{color:var(--muted)}
.mb0{margin-bottom:0}
.hd-wrap{max-width:70ch}
.sec__head{margin-bottom:clamp(34px,4vw,60px)}
.sec__head .lede{margin-top:18px}

/* skip link */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ===== header ===== */
.hd{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86);
    backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid transparent; transition:border-color .3s var(--ease)}
.hd.is-stuck{border-bottom-color:var(--line)}
.hd__in{display:flex; align-items:center; gap:28px; height:74px}
.logo{display:inline-flex; align-items:center; gap:9px; font-weight:800; color:#111; font-size:20px; letter-spacing:-0.045em}
.logo svg{display:block; flex:none}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{padding:10px 15px; border-radius:8px; font-size:15.5px; color:var(--ink-2); transition:color .2s, background .2s}
.nav a:hover{background:var(--soft)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600}
.nav .nav__cta{display:none}
.hd__cta{display:flex; align-items:center; gap:10px}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; align-items:center; justify-content:center; cursor:pointer}
.burger span{display:block; width:17px; height:1.5px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink)}
.burger span::before{top:-5.5px} .burger span::after{top:5.5px}

/* ===== buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:16px; font-weight:600; letter-spacing:-0.02em; border-radius:10px;
  padding:15px 28px; border:1px solid transparent; cursor:pointer; transition:.25s var(--ease);
  font-family:inherit; white-space:nowrap}
.btn--pri{background:var(--accent); color:#fff}
.btn--pri:hover{background:var(--accent-2); transform:translateY(-1px)}
.btn--line{border-color:var(--line-2); color:var(--ink); background:#fff}
.btn--line:hover{border-color:var(--ink)}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:#000}
.btn--sm{padding:11px 20px; font-size:14.5px}
.btn--lg{padding:18px 34px; font-size:17px}
.btn--wide{width:100%}
.btn--onDark{background:#fff; color:var(--ink)}
.btn--onDark:hover{background:#EFEFEB}
.btn--ghostDark{border-color:rgba(255,255,255,.28); color:#fff}
.btn--ghostDark:hover{border-color:#fff}

/* ===== hero ===== */
.hero h1 em{font-style:normal}

/* browser mockup */
.bw{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff;
    box-shadow:0 30px 70px -40px rgba(16,19,20,.5), 0 3px 10px -6px rgba(16,19,20,.18)}
.bw__bar{display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--line); background:#FBFBFA}
.bw__dot{width:9px; height:9px; border-radius:50%; background:#DFDFDA}
.bw__url{margin-left:8px; flex:1; height:24px; border-radius:6px; background:#F1F1EE;
  display:flex; align-items:center; padding:0 12px; font-size:11.5px; color:var(--muted); letter-spacing:-0.01em}
.bw__shot{aspect-ratio:16/11; object-fit:cover; width:100%}
.wide{width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:var(--r-lg); background:var(--soft)}

/* ===== 브라우저 안에 들어가는 미니 사이트 프리뷰 ===== */
.mockup{position:relative; padding-bottom:34px}
.mini{background:#fff; font-size:10px; line-height:1.5; color:#5A5F62; letter-spacing:-0.02em}
.mini__nav{display:flex; align-items:center; gap:14px; padding:11px 18px; border-bottom:1px solid #EFEFEC}
.mini__logo{font-size:11px; font-weight:700; color:#18181A; letter-spacing:-0.04em}
.mini__nav i{font-style:normal; font-size:9px; color:#9A9A95}
.mini__nav .mini__btn{margin-left:auto; background:var(--mc,#2A2015); color:#fff; font-size:8.5px;
  padding:5px 11px; border-radius:999px; letter-spacing:-0.02em}
.mini__hero{position:relative}
.mini__hero img{width:100%; aspect-ratio:16/8.2; object-fit:cover; display:block}
.mini__hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,14,8,.62) 0%, rgba(20,14,8,.22) 62%, rgba(20,14,8,0) 100%)}
.mini__copy{position:absolute; left:18px; bottom:16px; z-index:2; color:#fff}
.mini__eyebrow{font-size:8px; opacity:.78; margin-bottom:6px}
.mini__h1{font-size:17px; font-weight:700; letter-spacing:-0.05em; line-height:1.22; color:#fff}
.mini__pill{display:inline-block; margin-top:10px; background:#fff; color:#18181A;
  font-size:8.5px; font-weight:700; padding:5px 12px; border-radius:999px}
.mini__cards{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:14px 18px 18px}
.mini__c{border:1px solid #EFEFEC; border-radius:7px; padding:9px 10px}
.mini__c b{display:block; font-size:9.5px; color:#18181A; letter-spacing:-0.03em; margin-bottom:4px; font-weight:700}
.mini__c span{font-size:8px; color:#9A9A95}
.mini__bar{height:3px; width:26px; border-radius:2px; background:var(--mc,#B4884E); margin-bottom:7px}






/* ===== 사이트 히어로 미리보기 =====
   각 사이트의 히어로를 측정해서 통째로 담았다. 비율 그대로 두어 잘리지 않는다. */
.pv{position:relative; border-radius:12px; overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow:0 26px 50px -34px rgba(16,19,20,.45)}
.pv__bar{display:flex; align-items:center; gap:5px; padding:7px 9px;
  border-bottom:1px solid var(--line); background:#FBFBFA}
.pv__bar i{width:6px; height:6px; border-radius:50%; background:#DFDFDA; flex:none}
.pv__url{margin-left:6px; flex:1; height:15px; border-radius:5px; background:#F1F1EE;
  display:flex; align-items:center; padding:0 7px; font-size:8px; color:var(--muted);
  letter-spacing:-0.01em; overflow:hidden; white-space:nowrap}
.pv__shot{display:block; width:100%; height:auto; background:var(--soft)}
.pv__stage{position:relative; width:100%; background:#0B0D0C; overflow:hidden}
.pv__stage video,.pv__slide,.pv__zoom{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block}
.pv__ovl{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:3}

/* 사진 슬라이드 히어로 */
.pv__slide{opacity:0; animation-iteration-count:infinite; animation-timing-function:ease-in-out}
.pv--s2{animation-name:pvS2} .pv--s3{animation-name:pvS3} .pv--s4{animation-name:pvS4}
@keyframes pvS2{0%{opacity:0}5%{opacity:1}45%{opacity:1}53%{opacity:0}100%{opacity:0}}
@keyframes pvS3{0%{opacity:0}3%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}}
@keyframes pvS4{0%{opacity:0}3%{opacity:1}22%{opacity:1}27%{opacity:0}100%{opacity:0}}

/* 정지 화면은 천천히 확대해서 움직임을 만든다 */
.pv__zoom{animation:pvZoom 18s ease-in-out infinite alternate; transform-origin:50% 40%}
@keyframes pvZoom{from{transform:scale(1)} to{transform:scale(1.09)}}

.pv:hover .pv__slide,.pv:hover .pv__zoom{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .pv__zoom{animation:none}
  .pv__slide{animation:none; opacity:0}
  .pv__slide:first-of-type{opacity:1}
}

.card .pv{border:0; border-radius:0; box-shadow:none}

/* ===== 히어로 =====
   뉴사이트(newsight.co.kr) 구조 참고: 흰 바탕, 좌측 대형 타이포, 배경 대각 워드마크.
   우측에는 실제 제작 화면을 기울여 세로로 흘린다. */
.hero{position:relative; background:#fff; overflow:hidden; display:block;
  min-height:min(90vh,860px);
  padding:clamp(64px,8vw,120px) 0 clamp(44px,5vw,76px)}

/* 배경 대각 워드마크 */
.hero__mark{position:absolute; right:-2%; bottom:-6%; z-index:0; pointer-events:none;
  font-size:clamp(150px,20vw,300px); font-weight:800; letter-spacing:-0.06em; line-height:.8;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,69,82,.16);
  transform:rotate(-8deg); white-space:nowrap; user-select:none}

/* 우측 화면 기둥 */
.hero__rail{position:absolute; top:-12%; right:0; bottom:-12%; z-index:0;
  width:min(54%,760px); display:flex; gap:18px; padding-right:clamp(8px,2vw,28px);
  transform:rotate(-7deg) translateX(4%); transform-origin:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%)}
.hero__col{flex:1; display:flex; flex-direction:column; gap:18px; height:max-content;
  animation:railUp 46s linear infinite}
.hero__col--b{animation:railDown 54s linear infinite}
.hero__col figure{margin:0}
@keyframes railUp{ from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes railDown{ from{transform:translateY(-50%)} to{transform:translateY(0)} }
.hero__rail::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,.72) 16%, rgba(255,255,255,0) 42%)}

.hero__in{position:relative; z-index:2}
.hero .eyebrow{color:var(--muted); font-size:15px; margin-bottom:22px}
.hero .eyebrow b{color:var(--accent-2); font-weight:600}
.hero h1{color:var(--ink); margin:0 0 30px; max-width:14ch;
  font-size:clamp(34px,5.4vw,76px); letter-spacing:-0.048em; line-height:1.12; font-weight:700}
.hero h1 .ul{background:linear-gradient(transparent 62%, rgba(255,69,82,.22) 62%)}
.hero__sub{color:var(--body); max-width:44ch; margin-bottom:38px;
  font-size:clamp(17px,1.35vw,20px)}
.hero__acts{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:clamp(44px,5vw,68px)}
.hero__meta{position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); max-width:min(58%,720px)}
.hero__meta > div{padding:24px clamp(14px,1.6vw,26px) 4px 0; border-right:1px solid var(--line)}
.hero__meta > div:last-child{border-right:0}
.hero__meta b{display:block; color:var(--ink); font-size:clamp(19px,2vw,28px); font-weight:700;
  letter-spacing:-0.04em; margin-bottom:5px}
.hero__meta span{font-size:13px; color:var(--muted)}

/* 심박 파형 */
.hero__ecg{position:absolute; left:0; right:0; bottom:clamp(14px,3vw,34px); z-index:1;
  height:64px; pointer-events:none; opacity:.5}
.hero__ecg path{fill:none; stroke:var(--accent); stroke-width:2;
  stroke-dasharray:1600; stroke-dashoffset:1600; animation:ecg 3.4s 1.1s ease-out forwards}
@keyframes ecg{ to{stroke-dashoffset:0} }

/* 줄 단위 마스크 등장 */
.rise{display:block; overflow:hidden}
.rise > span{display:block; transform:translateY(105%); opacity:0;
  animation:riseIn 1.05s cubic-bezier(.19,1,.22,1) forwards}
@keyframes riseIn{ to{transform:none; opacity:1} }
.fly{opacity:0; animation:flyUp 1.2s cubic-bezier(.19,1,.22,1) forwards}
@keyframes flyUp{ from{opacity:0; transform:translateY(46px)} to{opacity:1; transform:none} }
.d1{animation-delay:.10s} .d2{animation-delay:.22s} .d3{animation-delay:.34s}
.d4{animation-delay:.52s} .d5{animation-delay:.68s} .d6{animation-delay:.84s}
.hero__rail{opacity:0; animation:railIn 1.5s .25s cubic-bezier(.19,1,.22,1) forwards}
@keyframes railIn{ from{opacity:0; transform:rotate(-7deg) translateX(14%) scale(1.04)}
                   to{opacity:1; transform:rotate(-7deg) translateX(4%) scale(1)} }
.hero__mark{opacity:0; animation:flyUp 1.6s .6s cubic-bezier(.19,1,.22,1) forwards}

@media (max-width:1000px){
  .hero__in,.hero__meta{max-width:100%}
  .hero__rail{width:78%; top:-6%; bottom:-6%; animation:none; opacity:.13}
  .draft{right:auto; left:14px; bottom:14px}
  .hero__rail::after{background:linear-gradient(90deg,#fff 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.25) 100%)}
}
@media (max-width:760px){
  /* 모바일: 글 뒤에 사진을 깔지 않는다. 사진은 버튼 아래 가로로 흐르는 띠로 옮긴다 */
  .hero{min-height:auto; display:flex; flex-direction:column;
    padding:clamp(40px,11vw,56px) 0 36px}
  .hero__in{order:1}
  .hero__rail{order:3; position:relative; inset:auto; width:auto; height:auto;
    margin:4px 0 30px; padding:0; transform:none; opacity:1; animation:none;
    display:block; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .hero__rail::after{display:none}
  .hero__col{flex-direction:row; align-items:center; gap:12px; width:max-content; height:auto;
    animation:railLeft 34s linear infinite}
  .hero__col--b{display:none}
  .hero__col figure{width:min(74vw,300px); flex:none}
  .hero > .wrap:last-child{order:4}
  .hero__mark{display:none}
  .hero__ecg{order:2; position:relative; left:auto; right:auto; bottom:auto; display:block;
    width:100%; height:46px; margin:-8px 0 14px; opacity:.85}
  .hero__ecg path{stroke-width:2.4}

  .hero .eyebrow{font-size:14px; margin-bottom:16px}
  .hero h1{font-size:clamp(31px,8.6vw,40px); margin-bottom:20px; max-width:none}
  .hero__sub{font-size:16px; line-height:1.7; margin-bottom:26px}
  .hero__acts{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:30px}
  .hero__acts .btn{width:100%; justify-content:center}

  .hero__meta{grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line)}
  .hero__meta > div{padding:18px 12px 16px 0; border-right:0}
  .hero__meta > div:nth-child(odd){border-right:1px solid var(--line)}
  .hero__meta > div:nth-child(even){padding-left:16px}
  .hero__meta > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .hero__meta b{font-size:21px}
}
@keyframes railLeft{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .rise > span,.fly,.hero__rail,.hero__mark{opacity:1; transform:none; animation:none}
  .hero__col{animation:none}
  .hero__ecg path{stroke-dashoffset:0; animation:none}
}


/* ===== 자동 견적 ===== */
.q{display:grid; grid-template-columns:1.5fr .85fr; gap:clamp(24px,3vw,44px); align-items:start}
.q__list{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.q__row{display:grid; grid-template-columns:1fr auto 96px; gap:18px; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--line)}
.q__row:last-child{border-bottom:0}
.q__row--base{background:var(--soft)}
.q__row b{display:block; font-size:16.5px; color:var(--ink); letter-spacing:-0.025em; font-weight:600}
.q__row span{display:block; font-size:14px; color:var(--muted); margin-top:4px; line-height:1.5}
.q__price{font-size:15.5px; color:var(--ink-2); white-space:nowrap}
.q__ctrl{justify-self:end}
.q__fixed{font-size:13.5px; color:var(--muted)}
.q__n{font-family:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:10px; padding:9px 10px; width:96px}
.q__sw{display:inline-block; width:52px; height:30px; position:relative; cursor:pointer}
.q__sw input{position:absolute; opacity:0; width:0; height:0}
.q__sw span{position:absolute; inset:0; background:var(--line); border-radius:999px; transition:.22s}
.q__sw span::before{content:""; position:absolute; left:3px; top:3px; width:24px; height:24px;
  background:#fff; border-radius:50%; transition:.22s; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.q__sw input:checked + span{background:var(--accent)}
.q__sw input:checked + span::before{transform:translateX(22px)}
.q__sw input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.q__sum{position:sticky; top:100px}
.q__meta{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0 24px;
  padding-top:20px; border-top:1px solid var(--line)}
.q__meta > div:first-child{grid-column:1 / -1}
.q__meta dt{font-size:13px; color:var(--muted); margin-bottom:4px}
.q__meta dd{margin:0; font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-0.025em}
.q__notes li{font-size:14.5px; color:var(--muted)}
@media (max-width:980px){
  .q{grid-template-columns:1fr}
  .q__sum{position:static}
}
@media (max-width:620px){
  .q__row{grid-template-columns:1fr auto; gap:10px 14px}
  .q__price{grid-column:1; font-size:14.5px; color:var(--muted)}
  .q__ctrl{grid-row:1 / span 2; align-self:center}
}

/* ===== 자체코딩 대 템플릿 비교 ===== */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.vs__col{border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,40px)}
.vs__col--ours{border-color:var(--ink); background:#fff}
.vs__col--them{background:var(--soft)}
.vs__tag{font-size:13px; color:var(--muted); margin-bottom:10px}
.vs__col--ours .vs__tag{color:var(--accent-2); font-weight:600}
.vs__col h3{margin-bottom:22px}
.vs__col ul{display:grid; gap:14px}
.vs__col li{font-size:15.8px; padding-left:26px; position:relative; line-height:1.55}
.vs__col--ours li::before{content:""; position:absolute; left:0; top:8px; width:12px; height:7px;
  border-left:1.7px solid var(--accent); border-bottom:1.7px solid var(--accent); transform:rotate(-45deg)}
.vs__col--them li{color:var(--muted)}
.vs__col--them li::before{content:""; position:absolute; left:2px; top:11px; width:11px; height:1.7px;
  background:var(--line-2)}
@media (max-width:820px){ .vs{grid-template-columns:1fr} }

/* ===== 포함 내용 카드 ===== */
.inc{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.inc__c{background:#fff; padding:clamp(26px,2.6vw,38px)}
.inc__no{font-size:13px; color:var(--muted); margin-bottom:16px}
.inc__c h3{font-size:18.5px; margin-bottom:10px}
.inc__c p{font-size:15.2px; line-height:1.62}
@media (max-width:900px){ .inc{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .inc{grid-template-columns:1fr} }


/* ===== 히어로 등장 모션 =====
   webseller.co.kr 측정값 그대로: fade-up, translateY 80px, 1.4s, 딜레이 200/400/600/800ms */
@keyframes flyUp{ from{opacity:0; transform:translateY(80px)} to{opacity:1; transform:none} }
.hero .fly{ opacity:0; animation:flyUp 1.4s ease forwards }
.hero .fly--1{ animation-delay:.2s }
.hero .fly--2{ animation-delay:.4s }
.hero .fly--3{ animation-delay:.6s }
.hero .fly--4{ animation-delay:.8s }

/* 화면 타일이 아래에서 떠오르며 들어온다 */
@keyframes tileIn{ from{opacity:0; transform:translateY(34px) scale(.94)} to{opacity:1; transform:none} }
.hero__bg figure{ opacity:0; animation:tileIn .9s cubic-bezier(.22,.61,.36,1) forwards }
.hero__bg figure:nth-child(1){animation-delay:.05s}
.hero__bg figure:nth-child(2){animation-delay:.11s}
.hero__bg figure:nth-child(3){animation-delay:.17s}
.hero__bg figure:nth-child(4){animation-delay:.23s}
.hero__bg figure:nth-child(5){animation-delay:.29s}
.hero__bg figure:nth-child(6){animation-delay:.35s}
.hero__bg figure:nth-child(7){animation-delay:.41s}
.hero__bg figure:nth-child(8){animation-delay:.47s}
.hero__bg figure:nth-child(n+9){animation-delay:.53s}
/* 베일과 배경도 천천히 열린다 */
@keyframes veilIn{ from{opacity:1} to{opacity:.94} }
.hero__veil{ animation:veilIn 1.6s ease forwards }

@media (prefers-reduced-motion:reduce){
  .hero .fly, .hero__bg figure{ opacity:1; animation:none; transform:none }
  .hero__veil{ animation:none }
}

/* ===== 상단 공지바 ===== */
.notice{background:var(--dark); color:rgba(255,255,255,.8); font-size:13.5px; letter-spacing:-0.015em}
.notice .wrap{display:flex; align-items:center; justify-content:center; gap:8px; height:38px; text-align:center}
.notice b{color:#fff; font-weight:600}
@media (max-width:560px){ .notice{font-size:12.5px} .notice .wrap{height:34px} }

/* ===== 히어로: 타이포 중심, 고객사 화면 없음 ===== */

/* ===== 제작 화면이 흐르는 띠 (풀블리드) ===== */
.stripwrap .train{gap:10px}
.stripwrap .train__row{gap:10px; padding-right:10px}
.stripwrap .train figure{width:clamp(260px,30vw,460px); border-radius:12px}
.stripwrap .train img{aspect-ratio:16/10; object-position:top}

/* ===== 오픈 이벤트 가격 ===== */
.offer{display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.offer__main{padding:clamp(30px,3.4vw,52px); border-right:1px solid var(--line)}
.offer__name{font-size:16px; color:var(--muted); margin-bottom:12px}
.offer__was{font-size:15px; color:var(--muted); margin-bottom:6px}
.offer__was s{color:var(--muted)}
.offer__amt{display:flex; align-items:baseline; gap:4px; color:var(--ink)}
.offer__amt b{font-size:clamp(44px,5.6vw,76px); font-weight:600; letter-spacing:-0.05em; line-height:1}
.offer__amt span{font-size:clamp(20px,2vw,28px); font-weight:600; letter-spacing:-0.03em}
.offer__unit{font-size:14.5px; color:var(--muted); margin:16px 0 30px}
.offer__unit b{color:var(--accent-2); font-weight:600}
.offer__terms{margin:0; padding:clamp(30px,3.4vw,52px); background:var(--soft); display:grid;
  gap:22px; align-content:start}
.offer__terms dt{font-size:13.5px; color:var(--muted); margin-bottom:5px}
.offer__terms dd{margin:0; font-size:16px; color:var(--ink); letter-spacing:-0.022em; line-height:1.5}
@media (max-width:880px){
  .offer{grid-template-columns:1fr}
  .offer__main{border-right:0; border-bottom:1px solid var(--line)}
}

/* ===== 추가 기능 ===== */
.extras{margin-top:clamp(36px,4vw,60px); padding:clamp(26px,3vw,40px);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--soft)}
.extras h3{margin-bottom:8px}
.extras p{font-size:15.5px}
.tag--lg{font-size:15px; padding:9px 18px; background:#fff}

/* ===== 실제로 쓰는 모션. 구구단 건에서 쓴 기법을 이 사이트 색으로 옮긴 것 ===== */

/* 반짝이는 글자. 배경 300% 를 글자에 클립해서 왕복시킨다 */
.shine{
  background:linear-gradient(100deg, var(--ink) 0%, var(--ink) 34%, var(--accent) 44%,
    #FF9AA1 50%, var(--accent) 56%, var(--ink) 66%, var(--ink) 100%);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shine 5s ease-in-out infinite alternate;
}
@keyframes shine{0%{background-position:0% center}100%{background-position:100% center}}

/* 사진 두 줄이 서로 반대로 흐른다 */
.train{display:grid; gap:6px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.train__row{display:flex; gap:6px; padding-right:6px; width:max-content; animation:train 52s linear infinite}
.train__row--rev{animation-direction:reverse; animation-duration:58s}
.train figure{margin:0; flex:none; width:clamp(160px,22vw,290px); overflow:hidden;
  border:1px solid var(--line); border-radius:10px; background:var(--soft)}
.train img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  object-position:top; transition:transform .6s ease}
.train figure:hover img{transform:scale(1.04)}
.train:hover .train__row{animation-play-state:paused}
@keyframes train{to{transform:translateX(-50%)}}

/* 기술 소개 카드 */
.tech{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.tech__c{border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px 28px; background:#fff}
.tech__demo{min-height:76px; display:grid; place-items:center; margin-bottom:20px;
  border-bottom:1px solid var(--line); padding-bottom:20px}
.tech__demo b{font-size:clamp(22px,2.2vw,30px); font-weight:600; letter-spacing:-0.04em; color:var(--ink)}
.tech__c h3{font-size:17px; margin-bottom:8px}
.tech__c p{font-size:14.5px; line-height:1.6}
.tech__bar{width:100%; height:8px; border-radius:4px; background:var(--soft); overflow:hidden}
.tech__bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:4px;
  animation:fillbar 2.6s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes fillbar{0%{width:0}55%,100%{width:88%}}
@media (max-width:980px){ .tech{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .tech{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .shine{animation:none; -webkit-text-fill-color:currentColor; background:none; color:var(--ink)}
  .train__row, .tech__bar i{animation:none}
  .tech__bar i{width:88%}
}

/* 작업 메타 */
.workmeta{display:flex; flex-wrap:wrap; gap:0; margin-top:30px; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.workmeta > div{padding:18px 32px 18px 0; margin-right:32px; border-right:1px solid var(--line)}
.workmeta > div:last-child{border-right:0; margin-right:0}
.workmeta dt{font-size:13px; color:var(--muted); margin-bottom:5px}
.workmeta dd{margin:0; font-size:16.5px; font-weight:600; color:var(--ink); letter-spacing:-0.025em}
@media (max-width:700px){
  .workmeta > div{padding:14px 20px 14px 0; margin-right:20px}
}

/* 작업 캡처 */
.shots{display:grid; gap:clamp(16px,2vw,26px)}
.shots .shot:first-child{grid-column:1 / -1}
@media (min-width:900px){ .shots{grid-template-columns:repeat(2,1fr)} }
.shot{margin:0}
.shot{position:relative}
.shot__win{position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--soft); max-height:540px}
.shot__win img{width:100%; display:block}
.shot__win::after{content:""; position:absolute; left:0; right:0; bottom:0; height:90px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92))}
.shot figcaption{font-size:13.5px; color:var(--muted); margin-top:10px}
.shot__note{position:absolute; right:12px; bottom:12px; z-index:2; font-size:11.5px; color:var(--muted);
  background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:6px; padding:4px 9px}

/* 카드 안 화면 미리보기 */
.card__shot{background:var(--soft); border-bottom:1px solid var(--line); padding:22px 22px 0; overflow:hidden}
.card__shot .bw{border-radius:10px 10px 0 0; box-shadow:0 14px 30px -20px rgba(16,19,20,.5);
  transform:translateY(0); transition:transform .4s var(--ease)}
.card__shot .bw__bar{padding:7px 9px; gap:5px}
.card__shot .bw__dot{width:6px; height:6px}
.card__shot .bw__url{height:16px; font-size:8.5px; padding:0 8px}
.card__shot .mini{font-size:9px}
.card__shot .mini__nav{padding:8px 11px; gap:8px}
.card__shot .mini__logo{font-size:9.5px}
.card__shot .mini__nav i{font-size:7.5px}
.card__shot .mini__nav .mini__btn{font-size:7px; padding:4px 8px}
.card__shot .mini__hero img{aspect-ratio:16/7.4}
.card__shot .mini__copy{left:11px; bottom:11px}
.card__shot .mini__h1{font-size:12.5px}
.card__shot .mini__eyebrow{font-size:7px; margin-bottom:4px}
.card__shot .mini__pill{font-size:7px; padding:4px 9px; margin-top:7px}
.card__shot .mini__cards{padding:9px 11px 14px; gap:6px}
.card__shot .mini__c{padding:6px 7px; border-radius:5px}
.card__shot .mini__c b{font-size:7.5px; margin-bottom:2px}
.card__shot .mini__c span{font-size:6.5px}
a.card:hover .card__shot .bw{transform:translateY(-5px)}

/* 상세 페이지 큰 화면 */
.shot-stage{background:var(--soft); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,4vw,56px) clamp(20px,4vw,56px) 0}
.shot-stage .bw{border-radius:14px 14px 0 0}
.bw--lg .mini{font-size:13px}
.bw--lg .mini__nav{padding:15px 24px; gap:20px}
.bw--lg .mini__logo{font-size:15px}
.bw--lg .mini__nav i{font-size:12px}
.bw--lg .mini__nav .mini__btn{font-size:11px; padding:7px 15px}
.bw--lg .mini__hero img{aspect-ratio:16/7}
.bw--lg .mini__copy{left:26px; bottom:24px}
.bw--lg .mini__h1{font-size:26px}
.bw--lg .mini__eyebrow{font-size:11px; margin-bottom:8px}
.bw--lg .mini__pill{font-size:11px; padding:7px 16px; margin-top:14px}
.bw--lg .mini__cards{padding:20px 24px 28px; gap:14px}
.bw--lg .mini__c{padding:14px 15px; border-radius:9px}
.bw--lg .mini__c b{font-size:13px; margin-bottom:4px}
.bw--lg .mini__c span{font-size:11px}
@media (max-width:640px){
  .bw--lg .mini__h1{font-size:17px}
  .bw--lg .mini__cards{grid-template-columns:1fr; gap:8px}
}

/* 겹쳐 놓는 모바일 화면 */
.phone{position:absolute; right:-6px; bottom:0; width:128px; border-radius:17px; overflow:hidden;
  background:#fff; border:5px solid #15191A;
  box-shadow:0 22px 44px -24px rgba(16,19,20,.55)}
.phone .mini{font-size:9px}
.phone .mini__nav{padding:8px 10px; gap:0}
.phone .mini__nav i,.phone .mini__nav .mini__btn{display:none}
.phone .mini__hero img{aspect-ratio:3/3.4}
.phone .mini__copy{left:10px; bottom:10px}
.phone .mini__h1{font-size:12px}
.phone .mini__eyebrow{font-size:7px}
.phone .mini__cards{grid-template-columns:1fr; padding:9px 10px 12px; gap:6px}
.phone .mini__c:nth-child(n+3){display:none}
@media (max-width:520px){ .phone{display:none} .mockup{padding-bottom:0} }

/* ===== grid / cards ===== */
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.g2{grid-template-columns:1fr}}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden;
  transition:.35s var(--ease); display:flex; flex-direction:column}
a.card:hover{transform:translateY(-4px); border-color:var(--line-2);
  box-shadow:0 26px 50px -34px rgba(16,19,20,.42)}
.card__img{width:100%; height:auto; display:block; background:var(--soft);
  border-bottom:1px solid var(--line)}
.card__body{padding:26px 26px 28px; flex:1; display:flex; flex-direction:column}
.card__kicker{font-size:13.5px; color:var(--muted); margin-bottom:10px}
.card__body h3{margin-bottom:10px}
.card__body p{font-size:15.8px; line-height:1.62}
.card__tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:20px}
.tag{font-size:12.8px; color:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:5px 11px; letter-spacing:-0.01em}

/* feature rows */
.feat{display:grid; gap:0; border-top:1px solid var(--line)}
.feat__row{display:grid; grid-template-columns:64px 1fr 1.35fr; gap:24px; align-items:start;
  padding:30px 0; border-bottom:1px solid var(--line)}
.feat__no{font-size:14px; color:var(--muted); padding-top:5px}
.feat__row p{font-size:16.5px}

/* dark band */
.band{background:var(--soft); color:var(--body); border-radius:32px 32px 0 0; padding:clamp(60px,8vw,120px) 0}
.band h2,.band h3{color:var(--ink)}
.band p{color:var(--body)}
.band .eyebrow{color:var(--muted)}
.band .feat,.band .feat__row{border-color:var(--line-2)}
.band .feat__no{color:var(--muted)}
.band-flat{background:var(--dark); color:#fff; border-radius:32px; padding:clamp(44px,5.5vw,80px) clamp(28px,4vw,72px)}
.band-flat h2{color:#fff} .band-flat p{color:rgba(255,255,255,.72)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}

/* price */
.price{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.plan{border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px 32px; background:#fff; display:flex; flex-direction:column}
.plan--best{border-color:var(--ink); position:relative}
.plan__flag{position:absolute; top:-12px; left:30px; background:var(--accent); color:#fff; font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:var(--r-pill)}
.plan__name{font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-0.03em}
.plan__for{font-size:14.5px; color:var(--muted); margin-top:6px}
.plan__amt{font-size:clamp(30px,2.6vw,38px); font-weight:600; color:var(--ink); letter-spacing:-0.04em; margin:22px 0 4px}
.plan__amt small{font-size:16px; font-weight:500; color:var(--muted); letter-spacing:-0.02em}
.plan__was{font-size:14.5px; color:var(--muted)}
.plan__was s{color:var(--muted)}
.plan ul{margin:24px 0 28px; display:grid; gap:11px}
.plan li{font-size:15.5px; padding-left:24px; position:relative; line-height:1.55}
.plan li::before{content:""; position:absolute; left:0; top:9px; width:11px; height:6px;
  border-left:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent); transform:rotate(-45deg)}
.plan .btn{margin-top:auto}


/* ===== 단일 요금 박스 ===== */
.pricebox{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,3.5vw,56px);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(28px,3.5vw,52px); background:#fff}
.pricebox__label{font-size:15px; color:var(--muted); margin-bottom:14px}
.pricebox__amt{display:flex; align-items:baseline; gap:12px; color:var(--ink);
  font-size:clamp(38px,4.4vw,62px); font-weight:600; letter-spacing:-0.045em; line-height:1.1}
.pricebox__amt s{font-size:clamp(17px,1.5vw,21px); font-weight:500; color:var(--muted); letter-spacing:-0.02em}
.pricebox__unit{font-size:14.5px; color:var(--muted); margin-top:12px}
.pricebox__acts{display:flex; gap:10px; flex-wrap:wrap; margin:28px 0 16px}
.pricebox__inc{display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; align-content:start}
.pricebox__inc li{padding-left:24px; position:relative}
.pricebox__inc li::before{content:""; position:absolute; left:0; top:8px; width:11px; height:6px;
  border-left:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent); transform:rotate(-45deg)}
.pricebox__inc b{display:block; font-size:15.5px; font-weight:600; color:var(--ink); letter-spacing:-0.025em}
.pricebox__inc span{display:block; font-size:13.8px; color:var(--muted); line-height:1.55; margin-top:3px}
@media (max-width:980px){
  .pricebox{grid-template-columns:1fr}
  .pricebox__inc{grid-template-columns:1fr; gap:14px}
}

/* table */
.tbl{width:100%; border-collapse:collapse; font-size:15.8px}
.tbl th,.tbl td{text-align:left; padding:17px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl thead th{color:var(--ink); font-weight:600; font-size:15px}
.tbl tbody th{font-weight:600; color:var(--ink); width:32%}
.tbl-scroll{overflow-x:auto}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:26px 44px 26px 0; position:relative;
  font-size:clamp(17px,1.4vw,19px); font-weight:600; color:var(--ink); letter-spacing:-0.028em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:34px; width:11px; height:11px;
  border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg); top:38px}
.faq__a{padding:0 44px 28px 0; font-size:16.5px; max-width:80ch}
.faq__a p + p{margin-top:12px}
.faq__a ul{display:grid; gap:8px; margin-top:12px}
.faq__a li{padding-left:15px; position:relative}
.faq__a li::before{content:""; position:absolute; left:0; top:12px; width:4px; height:4px; border-radius:50%; background:var(--muted)}

/* steps */
.steps{display:grid; gap:0; border-top:1px solid var(--line)}
.step{padding:32px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:150px 1fr; gap:28px}
.step__d{font-size:14px; color:var(--muted); padding-top:6px}
.step h3{margin-bottom:9px}
.step p{font-size:16.5px}

/* form */
.form{display:grid; gap:18px}
.field{display:grid; gap:8px}
.field label{font-size:14.5px; color:var(--ink); font-weight:600; letter-spacing:-0.02em}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:14px 16px; width:100%;
  transition:border-color .2s}
.field textarea{min-height:150px; resize:vertical; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent)}
.field--2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.chk{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--body)}
.chk input{width:18px; height:18px; margin-top:3px; accent-color:var(--accent); flex:none}
.note{font-size:13.8px; color:var(--muted); line-height:1.6}

/* checkout */
.co{display:grid; grid-template-columns:1.35fr .95fr; gap:clamp(28px,3.5vw,54px); align-items:start}
.co__box{border:1px solid var(--line); border-radius:var(--r-lg); padding:30px}
.co__box + .co__box{margin-top:22px}
.co__box h3{margin-bottom:20px}
.co__sum{position:sticky; top:100px}
.co__line{display:flex; justify-content:space-between; gap:16px; padding:13px 0; font-size:15.8px; border-bottom:1px solid var(--line)}
.co__total{display:flex; justify-content:space-between; align-items:baseline; padding-top:20px; font-size:16px; color:var(--ink)}
.co__total b{font-size:28px; font-weight:600; letter-spacing:-0.035em}
.pays{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pay{border:1px solid var(--line-2); border-radius:var(--r-md); padding:15px 10px; text-align:center;
  font-size:14.5px; color:var(--ink); cursor:pointer; background:#fff; transition:.2s; font-family:inherit}
.pay[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-2); font-weight:600}

/* breadcrumb */
.bc{font-size:13.5px; color:var(--muted); padding:22px 0 0}
.bc a:hover{color:var(--ink)}
.bc span{margin:0 7px; color:var(--line-2)}

/* page head */
.ph{padding:clamp(40px,4.5vw,72px) 0 clamp(36px,4vw,60px)}
.ph h1{max-width:20ch; margin-bottom:20px}
.ph .lede{max-width:58ch}

/* article body */
.doc{max-width:78ch; font-size:16.5px}
.doc h2{font-size:clamp(21px,2vw,26px); margin:44px 0 14px}
.doc h3{font-size:18.5px; margin:28px 0 10px}
.doc p + p{margin-top:12px}
.doc ul{display:grid; gap:8px; margin:12px 0}
.doc li{padding-left:16px; position:relative}
.doc li::before{content:""; position:absolute; left:0; top:12px; width:4px; height:4px; border-radius:50%; background:var(--muted)}
.doc .note{margin-top:10px}

/* footer */
.ft{background:var(--soft); padding:clamp(56px,6vw,92px) 0 40px}
.ft__top{display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:34px; padding-bottom:48px}
.ft__col h4{font-size:14px; color:var(--ink); margin-bottom:16px; font-weight:600}
.ft__col li{margin-bottom:10px}
.ft__col a{font-size:15px; color:var(--body)}
.ft__col a:hover{color:var(--ink)}
.ft__brand p{font-size:15px; margin-top:14px; max-width:34ch}
.ft__biz{border-top:1px solid var(--line-2); padding-top:28px; font-size:13.2px; color:var(--muted); line-height:1.85}
.ft__biz b{color:var(--ink-2); font-weight:600}
.ft__legal{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px; font-size:13.5px}
.ft__legal a{color:var(--ink-2)}

/* mobile sticky cta */
.fab{position:fixed; right:20px; bottom:20px; z-index:95; display:flex; flex-direction:column; gap:10px}
.fab a{width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 10px 26px -10px rgba(16,19,20,.45); transition:transform .22s var(--ease)}
.fab a:hover{transform:translateY(-3px)}
.fab .fab--kakao{background:#FAE100}
.fab .fab--tel{background:var(--accent)}
.fab svg{display:block}
@media (max-width:860px){ .fab{right:14px; bottom:14px} .fab a{width:50px; height:50px} }

/* reveal */
[data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}

/* 홈의 제작 서비스 줄 */
.sv__grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.sv{display:flex; flex-direction:column; gap:8px; padding:26px 22px 22px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-md); color:var(--ink);
  transition:border-color .22s var(--ease), transform .22s var(--ease)}
.sv:hover{border-color:var(--ink); transform:translateY(-3px)}
.sv h3{font-size:17px; letter-spacing:-0.04em}
.sv p{font-size:14px; line-height:1.6; color:var(--body); word-break:keep-all; flex:1}
.sv__go{margin-top:6px; font-size:13.5px; font-weight:600; color:var(--accent-2); letter-spacing:-0.02em}
@media (max-width:1100px){ .sv__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .sv__grid{grid-template-columns:repeat(2,1fr)} .sv{padding:20px 18px 18px} }

/* 숨고 조건 */
.q__sg{display:flex; align-items:center; gap:10px; margin:12px 0 4px; cursor:pointer;
  padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--soft)}
.q__sg input{position:absolute; opacity:0; width:0; height:0}
.q__sg span{flex:none; width:18px; height:18px; border:1.5px solid var(--line-2); border-radius:5px;
  background:#fff; position:relative; transition:background .18s, border-color .18s}
.q__sg span::after{content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg) scale(0); transition:transform .18s}
.q__sg input:checked + span{background:var(--accent); border-color:var(--accent)}
.q__sg input:checked + span::after{transform:rotate(42deg) scale(1)}
.q__sg input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.q__sg em{font-style:normal; font-size:14px; color:var(--ink-2); letter-spacing:-0.02em}

.sg{margin-top:40px; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 32px 28px; background:var(--soft)}
.sg__head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.sg__badge{font-size:12.5px; font-weight:600; letter-spacing:-0.02em; color:#fff;
  background:var(--accent); border-radius:6px; padding:5px 10px}
.sg__head h2{font-size:clamp(20px,2.1vw,26px)}
.sg__lede{font-size:15.5px; line-height:1.72; color:var(--body); word-break:keep-all; max-width:62ch}
.sg__list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:22px 0 0}
.sg__list div{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px}
.sg__list dt{font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-0.03em; margin-bottom:7px}
.sg__list dd{margin:0; font-size:14.5px; line-height:1.66; color:var(--body); word-break:keep-all}
@media (max-width:760px){
  .sg{padding:24px 20px 22px}
  .sg__list{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- 후기 */
/* 채널 평점 배지 */
.rvsum{display:flex; flex-wrap:wrap; align-items:stretch; gap:14px; justify-content:center}
.rvsum__c{display:flex; align-items:center; gap:16px; padding:18px 26px;
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff}
.rvsum__ch{font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.03em;
  padding-right:16px; border-right:1px solid var(--line)}
.rvsum__n{display:flex; align-items:baseline; gap:3px}
.rvsum__n b{font-size:34px; font-weight:600; letter-spacing:-0.05em; color:var(--ink); line-height:1}
.rvsum__n span{font-size:15px; color:var(--muted)}
.rvsum__meta{display:flex; flex-direction:column; gap:4px}
.stars{display:inline-flex; gap:2px; color:#F5A623; font-size:15px; line-height:1; letter-spacing:1px}
.rvsum__cnt{font-size:13.5px; color:var(--muted)}

/* 기차처럼 흐르는 후기 줄 */
.rvt{margin-top:38px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.rvt + .rvt{margin-top:16px}
.rvt__row{display:flex; gap:16px; padding-right:16px; width:max-content;
  animation:rvTrain 72s linear infinite}
.rvt__row--rev{animation-direction:reverse; animation-duration:84s}
.rvt:hover .rvt__row, .rvt:focus-within .rvt__row{animation-play-state:paused}
@keyframes rvTrain{to{transform:translateX(-50%)}}

.rv{flex:none; width:clamp(286px,29vw,392px); background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px 22px 22px; display:flex; flex-direction:column; gap:11px;
  transition:border-color .25s var(--ease), transform .25s var(--ease)}
.rv:hover{border-color:var(--line-2); transform:translateY(-3px)}
.rv__top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.rv__ch{font-size:12.5px; font-weight:600; letter-spacing:-0.02em; color:var(--accent-2);
  background:var(--accent-soft); border-radius:6px; padding:5px 9px}
.rv__body{font-size:15px; line-height:1.7; color:var(--ink-2); word-break:keep-all; margin:0}

/* 후기 페이지의 전체 목록 */
.rvlist{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.rvlist .rv{width:auto}
@media (max-width:980px){ .rvlist{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .rvlist{grid-template-columns:1fr}
  .rvsum__c{width:100%; justify-content:center}
  .rv{width:clamp(250px,78vw,320px); padding:20px 20px 18px}
}
@media (prefers-reduced-motion:reduce){ .rvt__row{animation:none} }

@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1; transform:none; transition:none}}

.draft{position:fixed; right:14px; bottom:96px; z-index:120; font-size:11.5px; color:var(--muted);
  background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:6px; padding:5px 11px}

/* ===== responsive ===== */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .co{grid-template-columns:1fr}
  .co__sum{position:static}
  .ft__top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--wrap:min(1296px, calc(100% - 36px))}
  .nav{position:fixed; inset:74px 0 auto 0; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:10px 18px 22px; display:none}
  .nav.is-open{display:flex}
  .nav a{padding:15px 6px; font-size:17px; border-bottom:1px solid var(--line); border-radius:0}
  .nav a:hover{background:transparent}
  .burger{display:inline-flex}
  .hd__cta{margin-left:auto}
  .hd__cta .btn{display:none}
  .nav .nav__cta{display:flex; margin-top:14px; border:0; border-radius:10px; justify-content:center;
    background:var(--accent); color:#fff; font-weight:700; padding:15px}
  .g3,.g2,.price{grid-template-columns:1fr}
  .feat__row{grid-template-columns:44px 1fr; gap:14px}
  .feat__row p{grid-column:2}
  .step{grid-template-columns:1fr; gap:8px}
  .field--2{grid-template-columns:1fr}
  .ft__top{grid-template-columns:1fr; gap:26px}
  .band{border-radius:24px 24px 0 0}
  .band-flat{border-radius:24px}
}