/* ============================================================
   여름에 눈썹문신 창원점 — Clear Summer Editorial
   디자인 토큰 (PRD 5.4 / 5.5)
   ============================================================ */
:root{
  --clear-white:#FFFFFF;
  --milk:#FAFBFC;
  --ice:#EAF5F8;
  --mist:#EDE8F7;
  --lilac:#DCD2EE;
  --water:#DDE3E6;
  --charcoal:#222222;
  --caption:#797979;
  --line:#E4E7EA;

  --serif:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif;

  --max:1280px;
  --pad:40px;
  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--clear-white);color:var(--charcoal);
  font-family:var(--sans);font-size:16px;line-height:1.8;
  letter-spacing:-.01em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* 한글이 단어 중간에서 잘리지 않도록 어절 단위로 줄바꿈 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 단어만 남지 않도록 */
.display,.h-en,.h-ko,.hero-ko,.quote,.card h3,.m4 h4,.why-i h4,.step h4,.faq summary{
  text-wrap:balance;
}
.body,.hero-sub,.caption,.card p,.m4 p,.why-i p,.step p,.rec li,.care li,.faq p,.info span,.spec span{
  text-wrap:pretty;
}
/* 데스크톱에서만 유지하는 의도적 줄바꿈 — 좁은 화면에서는 자연스럽게 흐르도록 */
.br-m{display:inline;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit;}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}
.section{padding:140px 0;position:relative;}
.section--tight{padding:100px 0;}
.bg-milk{background:var(--milk);}
.bg-ice{background:var(--ice);}
.bg-mist{background:var(--mist);}

/* ---------- 타이포 ---------- */
.display{
  font-family:var(--serif);font-weight:300;line-height:1.02;
  letter-spacing:-.015em;font-size:clamp(38px,7.2vw,92px);margin:0;
}
.display em{font-style:italic;}
.h-en{
  font-family:var(--serif);font-weight:300;line-height:1.08;
  font-size:clamp(30px,4.6vw,58px);margin:0;letter-spacing:-.01em;
}
.h-ko{
  font-size:clamp(19px,2.1vw,27px);font-weight:500;line-height:1.55;
  margin:18px 0 0;letter-spacing:-.03em;
}
.body{font-size:16px;line-height:1.95;color:#3a3a3a;margin:22px 0 0;letter-spacing:-.015em;}
.caption{font-size:13px;color:var(--caption);line-height:1.7;letter-spacing:-.01em;}
.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--caption);display:flex;align-items:center;gap:12px;margin:0 0 26px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--charcoal);opacity:.35;}
.num{
  font-family:var(--serif);font-size:12px;letter-spacing:.2em;color:var(--caption);
}

/* ---------- 헤더 ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;transition:background .4s, box-shadow .4s, backdrop-filter .4s;
}
header.solid{
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.hd{display:flex;align-items:center;justify-content:space-between;width:100%;}
.logo{display:flex;align-items:baseline;gap:10px;}
.logo b{font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:.28em;}
.logo span{font-size:9.5px;letter-spacing:.2em;color:var(--caption);text-transform:uppercase;}
.nav{display:flex;gap:30px;align-items:center;}
.nav a{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;position:relative;padding:4px 0;}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--charcoal);transition:width .35s;
}
.nav a:hover::after{width:100%;}
.btn-book{
  border:1px solid var(--charcoal);padding:11px 22px;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;transition:.3s;white-space:nowrap;
}
.btn-book:hover{background:var(--charcoal);color:#fff;}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;}
.burger i{display:block;width:22px;height:1px;background:var(--charcoal);position:relative;transition:.3s;}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;width:22px;height:1px;background:var(--charcoal);transition:.3s;
}
.burger i::before{top:-7px;} .burger i::after{top:7px;}
body.menu-open .burger i{background:transparent;}
body.menu-open .burger i::before{top:0;transform:rotate(45deg);}
body.menu-open .burger i::after{top:0;transform:rotate(-45deg);}

.drawer{
  position:fixed;inset:0;background:var(--clear-white);z-index:99;
  padding:calc(var(--header-h) + 40px) var(--pad) 40px;
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;justify-content:space-between;
}
body.menu-open .drawer{transform:translateY(0);}
.drawer nav{display:flex;flex-direction:column;gap:4px;}
.drawer nav a{
  font-family:var(--serif);font-size:34px;font-weight:300;padding:10px 0;
  display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);
}
.drawer nav a small{font-family:var(--sans);font-size:11px;color:var(--caption);letter-spacing:.1em;}
.drawer .dr-foot{font-size:13px;color:var(--caption);line-height:2;}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:47% 53%;align-items:stretch;}
.hero-l{
  background:linear-gradient(160deg,var(--mist) 0%,var(--ice) 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + 60px) 56px 60px 6vw;position:relative;
}
.hero-l::after{
  content:"";position:absolute;right:-90px;top:14%;width:190px;height:190px;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(255,255,255,.05) 62%);
  pointer-events:none;
}
.hero-num{position:absolute;top:calc(var(--header-h) + 26px);left:6vw;}
.hero .display{max-width:9ch;}
.hero-ko{font-size:clamp(17px,1.9vw,23px);font-weight:500;margin:26px 0 0;letter-spacing:-.03em;}
.hero-sub{font-size:14.5px;color:#4a4a4a;line-height:1.9;margin:16px 0 0;max-width:34ch;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;font-size:13px;letter-spacing:.04em;transition:.3s;
  border:1px solid var(--charcoal);min-height:48px;
}
.btn-solid{background:var(--charcoal);color:#fff;}
.btn-solid:hover{background:#000;}
.btn-ghost{background:rgba(255,255,255,.55);}
.btn-ghost:hover{background:#fff;}
.hero-r{position:relative;overflow:hidden;background:var(--mist);}
/* 영상·이미지 모두 자리를 꽉 채우도록 (히어로 높이는 화면 높이가 결정) */
.hero-r video,.hero-r img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%;
}
.hero-tag{
  position:absolute;left:0;bottom:38px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);padding:11px 20px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}

/* ---------- 공용 그리드 ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.grid-asym{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;}
.ratio{position:relative;overflow:hidden;background:var(--water);}
.ratio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.r-45{padding-top:125%;}
.r-11{padding-top:100%;}
.r-34{padding-top:133%;}
.r-169{padding-top:62%;}

/* ---------- 키워드 캡션 ---------- */
.keywords{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;}
.keywords span{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#444;
  border:1px solid rgba(34,34,34,.16);background:rgba(255,255,255,.6);
  padding:8px 14px;border-radius:999px;
}

/* ---------- 스토리 ---------- */
.sign{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--serif);font-size:20px;letter-spacing:.04em;
}
.sign small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--caption);text-transform:uppercase;margin-top:6px;}
.quote{
  font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1.5;
  margin:36px 0 0;padding-left:22px;border-left:2px solid var(--lilac);
}

/* ---------- 메뉴 카드 ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:64px;}
.card{background:#fff;display:flex;flex-direction:column;transition:.4s;}
.card:hover{transform:translateY(-5px);}
.card .ratio{margin-bottom:24px;}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.card h3{font-family:var(--serif);font-size:27px;font-weight:400;margin:0;letter-spacing:.01em;}
.price{
  font-size:14px;letter-spacing:.02em;white-space:nowrap;
  background:var(--ice);padding:6px 13px;border-radius:999px;
}
.card p{font-size:14px;color:#454545;line-height:1.85;margin:14px 0 20px;}
.spec{border-top:1px solid var(--line);margin-top:auto;}
.spec div{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;}
.spec dt,.spec b{flex:0 0 76px;color:var(--caption);font-weight:400;letter-spacing:.02em;}
.spec span{color:#333;flex:1;}
.card-link{
  margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.card-link::after{content:"→";transition:transform .3s;}
.card:hover .card-link::after{transform:translateX(5px);}

/* ---------- 시술 상세 ---------- */
.detail{padding:120px 0;border-top:1px solid var(--line);}
.detail .h-en{font-size:clamp(28px,4vw,50px);}
.detail-price{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  border:1px solid rgba(34,34,34,.2);border-radius:999px;padding:10px 22px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(4px);
}
.detail-price b{font-size:19px;font-weight:500;letter-spacing:.01em;}
.detail-price small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--caption);}
.rec{list-style:none;padding:0;margin:34px 0 0;}
.rec li{
  padding:13px 0 13px 26px;border-bottom:1px solid var(--line);
  font-size:14.5px;position:relative;color:#3a3a3a;
}
.rec li::before{
  content:"";position:absolute;left:2px;top:22px;width:9px;height:1px;background:var(--charcoal);opacity:.45;
}
.stack{display:grid;gap:14px;}
.stack-2{grid-template-columns:1fr 1fr;}

/* ---------- 기타 시술 ---------- */
.menu4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:60px;}
.m4 .ratio{margin-bottom:18px;}
.m4 .m4-cap{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--caption);}
.m4 h4{font-size:17px;font-weight:600;margin:8px 0 6px;letter-spacing:-.02em;}
.m4 .m4-price{font-size:14px;letter-spacing:.01em;}
.m4 p{font-size:13px;color:#555;line-height:1.8;margin:10px 0 0;}

/* ---------- WHY ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;border-top:1px solid var(--line);}
.why-i{padding:44px 34px 44px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.why-i:nth-child(3n){border-right:0;padding-right:0;}
.why-i:nth-child(3n+2),.why-i:nth-child(3n+3){padding-left:34px;}
.why-i .n{font-family:var(--serif);font-size:44px;font-weight:300;color:var(--lilac);line-height:1;}
.why-i h4{font-size:17px;font-weight:600;margin:16px 0 8px;letter-spacing:-.02em;}
.why-i p{font-size:13.5px;color:#555;line-height:1.8;margin:0;}

/* ---------- 포트폴리오 ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:44px 0 40px;}
.filters button{
  padding:9px 18px;font-size:12px;letter-spacing:.08em;border:1px solid var(--line);
  border-radius:999px;transition:.25s;color:#555;min-height:40px;
}
.filters button:hover{border-color:var(--charcoal);color:var(--charcoal);}
.filters button.on{background:var(--charcoal);border-color:var(--charcoal);color:#fff;}
/* 전후 사진이 잘리지 않도록 원본 비율 그대로 쌓는 방식 */
.gallery{column-count:4;column-gap:16px;}
.g-item{
  display:block;width:100%;padding:0;position:relative;overflow:hidden;
  cursor:zoom-in;background:var(--water);text-align:left;
  break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px;
}
.g-item .ph{display:block;position:relative;line-height:0;}
.g-item img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.6,.2,1);}
.g-item:hover img{transform:scale(1.045);}
.g-cap{
  display:block;position:absolute;left:0;right:0;bottom:0;padding:16px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent);
  color:#fff;font-size:11.5px;letter-spacing:.02em;opacity:0;transition:.35s;
}
.g-item:hover .g-cap,.g-item:focus-visible .g-cap{opacity:1;}
.photo-note{margin-top:34px;font-size:12px;color:var(--caption);}

/* 라이트박스 */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(20,20,22,.92);
  display:none;align-items:center;justify-content:center;padding:5vh 5vw;
}
.lb.on{display:flex;}
.lb img{max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;}
.lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;font-size:13px;letter-spacing:.06em;padding:0 60px;}
.lb-x{position:absolute;top:24px;right:26px;color:#fff;font-size:30px;line-height:1;width:44px;height:44px;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:34px;width:56px;height:56px;}
.lb-prev{left:12px;} .lb-next{right:12px;}

/* ---------- INSTAGRAM ---------- */
.insta{text-align:center;}
.eyebrow--center{justify-content:center;}
.insta .handle{
  font-family:var(--serif);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(34px,5.4vw,62px);margin:0;line-height:1.05;
}
.insta .h-ko{margin-top:16px;}
.insta .btn{margin-top:34px;}
.insta .btn svg{flex:0 0 auto;}
.insta-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:66px;}
.insta-strip a{display:block;position:relative;overflow:hidden;background:var(--water);}
.insta-strip .ph{display:block;position:relative;padding-top:100%;}
.insta-strip img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.insta-strip a:hover img{transform:scale(1.06);}

/* ---------- REVIEW (가로 스와이프) ---------- */
.rv-rail{
  display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;margin-top:56px;padding-bottom:14px;
  -webkit-overflow-scrolling:touch;
}
.rv-rail::-webkit-scrollbar{height:3px;}
.rv-rail::-webkit-scrollbar-thumb{background:rgba(34,34,34,.22);border-radius:99px;}
.rv-card{
  flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);padding:34px 30px 26px;
  display:flex;flex-direction:column;
}
.rv-card .mark{font-family:var(--serif);font-size:40px;line-height:.8;color:var(--lilac);}
.rv-card blockquote{
  margin:16px 0 0;font-size:14.5px;line-height:1.95;color:#3a3a3a;letter-spacing:-.015em;
}
.rv-meta{
  margin-top:auto;padding-top:22px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
}
.rv-tag{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--caption);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.rv-src{font-size:12px;color:var(--caption);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.rv-src:hover{color:var(--charcoal);}
/* 사진형 리뷰 카드 */
/* 사진이 카드 높이를 밀어올리지 않도록 (높이는 텍스트 카드가 결정) */
.rv-card--photo{padding:0;border:0;overflow:hidden;background:var(--water);cursor:zoom-in;position:relative;}
.rv-card--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.rv-hint{margin-top:22px;font-size:12px;color:var(--caption);}

/* ---------- DESIGN VIDEO ---------- */
.design-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center;}
.design-media{position:relative;overflow:hidden;background:var(--water);max-width:420px;}
.design-media video{display:block;width:100%;height:auto;}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:64px;}
.step{padding:0 22px 0 0;position:relative;}
.step::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line);}
.step::after{content:"";position:absolute;left:0;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--lilac);}
.step .sn{font-family:var(--serif);font-size:12px;letter-spacing:.2em;color:var(--caption);margin-top:22px;display:block;}
.step h4{font-family:var(--serif);font-size:22px;font-weight:400;margin:8px 0 10px;}
.step p{font-size:13px;color:#555;line-height:1.8;margin:0;}

/* ---------- CARE ---------- */
.care{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:56px;}
.care h4{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--caption);margin:0 0 22px;font-weight:400;}
.care ul{list-style:none;padding:0;margin:0;}
.care li{padding:16px 0 16px 30px;border-bottom:1px solid var(--line);font-size:14.5px;position:relative;line-height:1.8;color:#3a3a3a;}
.care li::before{
  content:"";position:absolute;left:4px;top:26px;width:10px;height:1px;background:var(--charcoal);opacity:.4;
}

/* ---------- FAQ ---------- */
.faq{margin-top:56px;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:16px;font-weight:500;letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:1px;background:var(--charcoal);
}
.faq summary::before{
  content:"";position:absolute;right:12px;top:calc(50% - 6px);width:1px;height:13px;
  background:var(--charcoal);transition:transform .3s;
}
.faq details[open] summary::before{transform:rotate(90deg);}
.faq p{margin:0;padding:0 40px 30px 0;font-size:14.5px;color:#555;line-height:1.95;}

/* ---------- LOCATION ---------- */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
.info{border-top:1px solid var(--line);margin-top:34px;}
.info div{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14.5px;}
.info b{flex:0 0 84px;font-weight:400;color:var(--caption);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px;}
.info span{flex:1;}
.cta-col{display:grid;gap:10px;margin-top:34px;}
.ask{background:var(--milk);padding:30px 32px;margin-top:36px;}
.ask h4{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--caption);margin:0 0 16px;font-weight:400;}
.ask ol{margin:0;padding-left:18px;font-size:14px;color:#3d3d3d;line-height:2;}

/* ---------- FOOTER ---------- */
footer{background:var(--charcoal);color:#e8e8e8;padding:90px 0 40px;}
footer .f-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:50px;}
footer .f-logo b{font-family:var(--serif);font-size:26px;letter-spacing:.28em;color:#fff;display:block;}
footer .f-logo span{font-size:10px;letter-spacing:.2em;color:#9a9a9a;text-transform:uppercase;}
footer h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8f8f8f;margin:0 0 16px;font-weight:400;}
footer p,footer a{font-size:13.5px;line-height:2;color:#d2d2d2;margin:0;}
footer a:hover{color:#fff;text-decoration:underline;}
.f-bot{
  margin-top:70px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11.5px;color:#8f8f8f;letter-spacing:.03em;
}
.f-bot a{font-size:11.5px;color:#8f8f8f;}

/* ---------- 모바일 고정 CTA ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:8px;
}
.sticky a{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:48px;font-size:13px;letter-spacing:.02em;border:1px solid var(--charcoal);
}
.sticky a.main{background:var(--charcoal);color:#fff;flex:1.4;}

/* ---------- 스크롤 리빌 ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1);}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1100px){
  :root{--pad:32px;}
  .section{padding:100px 0;}
  .grid2,.grid-asym{gap:48px;}
  .cards{grid-template-columns:1fr;gap:44px;}
  .menu4{grid-template-columns:repeat(2,1fr);gap:30px;}
  .why{grid-template-columns:1fr 1fr;}
  .why-i:nth-child(3n){border-right:1px solid var(--line);padding-right:34px;}
  .why-i:nth-child(2n){border-right:0;padding-right:0;padding-left:34px;}
  .why-i:nth-child(2n+1){padding-left:0;}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:44px;}
  .insta-strip{grid-template-columns:repeat(3,1fr);}
  .rv-card{flex:0 0 calc((100% - 20px)/2);}
  .design-wrap{grid-template-columns:1fr;gap:40px;}
  .design-media{max-width:340px;}
  .gallery{column-count:3;}
}
@media (max-width:900px){
  .nav,.btn-book{display:none;}
  .burger{display:flex;}
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-r{order:-1;height:56svh;}
  /* 모바일은 영상 위에 로고·햄버거가 겹치므로 상단만 살짝 밝게 */
  .hero-r::after{
    content:"";position:absolute;left:0;right:0;top:0;height:130px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,255,255,.82),rgba(255,255,255,0));
  }
  .hero-l{padding:44px var(--pad) 56px;}
  .hero-num{position:static;margin-bottom:18px;}
  .hero-l::after{display:none;}
  .hero .display{max-width:none;}
  .grid2,.grid-asym,.care,.loc{grid-template-columns:1fr;gap:40px;}
  .detail{padding:84px 0;}
  .detail .order-img{order:-1;}
  .sticky{display:flex;}
  body{padding-bottom:74px;}
}
@media (max-width:620px){
  :root{--pad:20px;--header-h:64px;}
  .br-m{display:none;}
  .h-ko{font-size:20px;line-height:1.6;}
  .hero-ko{font-size:18px;}
  .quote{font-size:21px;line-height:1.6;padding-left:16px;}
  .body,.rec li,.care li,.faq p{font-size:15px;}
  .faq summary{font-size:15.5px;line-height:1.6;padding-right:36px;}
  .section{padding:76px 0;}
  .section--tight{padding:64px 0;}
  .display{font-size:clamp(34px,10vw,52px);}
  .menu4{grid-template-columns:1fr;gap:36px;}
  .why{grid-template-columns:1fr;}
  .why-i{padding:32px 0 !important;border-right:0 !important;}
  .steps{grid-template-columns:1fr;row-gap:34px;}
  .rv-rail{gap:12px;margin-top:40px;}
  .rv-card{flex:0 0 84%;padding:28px 24px 22px;}
  .design-media{max-width:none;}
  .insta-strip{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:48px;}
  .insta .handle{font-size:34px;}
  .gallery{column-count:2;column-gap:10px;}
  .g-item{margin-bottom:10px;}
  .stack-2{grid-template-columns:1fr;}
  footer .f-top{grid-template-columns:1fr;gap:36px;}
  .drawer nav a{font-size:27px;}
}

/* ============================================================
   멀티페이지 공통 (2026-08-07 원페이지 → 8페이지 분리)
   ============================================================ */

/* 하위 페이지는 히어로가 없으므로 헤더를 항상 불투명하게 */
body.inner header{
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.06);
}
/* 첫 섹션이 고정 헤더에 가리지 않도록 */
body.inner main > .section:first-child,
body.inner main > .detail:first-child{padding-top:calc(var(--header-h) + 86px);}
body.inner main > .detail:first-child{border-top:0;}

/* 현재 페이지 표시 */
.nav a.on::after{width:100%;}
.drawer nav a.on span{font-style:italic;}

/* 페이지 하단 CTA 밴드 */
.band{text-align:center;}
.band .h-en{font-size:clamp(28px,3.8vw,46px);}
.band .h-ko{margin-top:14px;}
.band-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px;}

/* 후기 전용 페이지 — 레일 대신 그리드 */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
.rv-grid .rv-card{flex:none;}
.rv-grid .rv-card--photo{min-height:340px;}

@media (max-width:1100px){
  .rv-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  body.inner main > .section:first-child,
  body.inner main > .detail:first-child{padding-top:calc(var(--header-h) + 48px);}
  .rv-grid{grid-template-columns:1fr;gap:14px;}
  .rv-grid .rv-card--photo{min-height:300px;}
  .band-cta .btn{width:100%;}
}