/* 카페센트 — 나노센트 자동분사방향제
   구조·형태는 참고 사이트(curl 확보)를 따르고, 컬러는 카페 톤으로 새로 선정 */
:root{
  --bg:#ffffff; --bg-ivory:#fbf7f1; --bg-mist:#f3ece3;
  --ink:#2a211c; --ink-soft:#5e534b; --ink-mute:#8c8178;
  --heading:#241a15; --line:#e6dccf; --line-soft:#efe7db;
  --brand:#8a5a3c; --brand-dark:#6e4529; --brand-soft:#f4e9df;
  --maxw:1180px; --gutter:24px; --section-py:88px; --section-py-sm:56px;
  --radius:8px; --btn-radius:4px; --header-h:88px;
  --font-serif:"Noto Serif KR","Nanum Myeongjo","Apple SD Gothic Neo",serif;
  --font-sans:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --fs-h1:clamp(32px,4.6vw,52px); --fs-h2:clamp(26px,2.6vw,40px); --fs-h3:clamp(19px,1.6vw,24px);
  --fs-body:17px; --fs-sm:15px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.7;word-break:keep-all}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{margin:0;color:var(--heading);font-family:var(--font-serif);font-weight:500;line-height:1.35}
p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border:1px solid transparent;border-radius:var(--btn-radius);font-family:var(--font-sans);font-size:16px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn--sm{height:44px;padding:0 20px;font-size:14.5px}
.btn--lg{padding:0 34px}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-dark)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--outline:hover{border-color:var(--brand);color:var(--brand)}
.btn--light{background:#fff;color:var(--heading)}
.btn--light:hover{background:var(--brand-soft)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* 헤더 */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line-soft);backdrop-filter:blur(6px)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.site-logo img{width:112px;height:auto}
.site-nav ul{display:flex;align-items:center;gap:28px;list-style:none}
.site-nav a:not(.btn){font-size:15px;font-weight:500;color:var(--ink-soft)}
.site-nav a:not(.btn):hover{color:var(--brand)}
.nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle__bar{display:block;width:22px;height:2px;background:var(--heading)}

/* 히어로 */
.hero-intro{padding:72px 0 40px;background:var(--bg)}
.hero-intro__inner{max-width:680px;margin:0 auto;text-align:center}
.hero-intro__eyebrow{font-family:var(--font-sans);font-size:13px;letter-spacing:.14em;color:var(--brand);font-weight:600;margin-bottom:18px}
.hero-intro__title{font-size:var(--fs-h1);letter-spacing:-.01em;margin-bottom:22px}
.hero-intro__desc{font-size:18px;color:var(--ink-soft);margin-bottom:28px}
.hero-fact{max-width:680px;margin:0 auto;padding-top:22px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-soft);text-align:center}
.hero-image{padding:0 0 var(--section-py)}
.hero-image img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
.intro-statement{padding:0 0 var(--section-py);text-align:center}
.intro-statement p{max-width:760px;margin:0 auto;font-family:var(--font-serif);font-size:clamp(21px,2.2vw,30px);line-height:1.6;color:var(--heading)}

/* 섹션 공통 */
.section{padding:var(--section-py) 0}
.section--alt{background:var(--bg-ivory)}
.section--mist{background:var(--bg-mist)}
.section__title{font-size:var(--fs-h2);margin-bottom:14px}
.section__lead{max-width:720px;color:var(--ink-soft);margin-bottom:36px}
.section__head{margin-bottom:36px}
.section__head .section__lead{margin-bottom:0}
.center{text-align:center}.center .section__lead{margin-left:auto;margin-right:auto}

/* 이미지+텍스트 분할 (브랜드·서비스 정의) */
.feature-split{padding:var(--section-py) 0;background:var(--bg-ivory)}
.feature-split__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature-split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.feature-split__title{font-size:var(--fs-h2);margin-bottom:18px}
.feature-split__def{font-family:var(--font-serif);font-size:20px;line-height:1.65;color:var(--heading);margin-bottom:20px}
.sub-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.sub-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.sub-card h3{font-size:17px;margin-bottom:6px;font-family:var(--font-sans);font-weight:700}
.sub-card p{font-size:14.5px;color:var(--ink-soft);margin:0}

/* 제품 슬라이더 */
.case-slider{padding:var(--section-py) 0;background:#fff}
.case-slider__inner{display:flex;align-items:center;gap:48px}
.case-slider__head{flex:0 0 34%;max-width:34%}
.case-slider__title{font-size:var(--fs-h2);margin-bottom:14px}
.case-slider__controls{display:flex;align-items:center;gap:18px;margin-top:28px}
.case-slider__arrow{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;font-size:18px;color:var(--ink)}
.case-slider__arrow:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.case-slider__arrow:disabled{opacity:.35;cursor:default}
.case-slider__label{font-size:14px;color:var(--ink-mute)}
.case-slider__track{flex:1 1 0;min-width:0;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.case-slider__track::-webkit-scrollbar{display:none}
.case-slider__slide{flex:0 0 46%;scroll-snap-align:start}
.case-slider__media{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-ivory);border-radius:var(--radius)}
.case-slider__media img{width:100%;height:100%;object-fit:cover}
.case-slider__caption{display:block;margin-top:16px}
.case-slider__name{display:block;font-family:var(--font-serif);font-size:19px;color:var(--heading)}
.case-slider__meta{display:block;font-size:14px;color:var(--ink-soft);margin-top:2px}
.case-slider__price{display:block;margin-top:6px;font-family:var(--font-serif);font-size:17px;color:var(--brand-dark)}
.case-slider__view{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--brand)}

/* 캡션 모자이크 갤러리 */
.gallery-mosaic{padding:var(--section-py) 0;background:var(--bg-ivory)}
.gallery-mosaic__head{margin-bottom:32px}
.gallery-mosaic__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery-mosaic__item{display:block}
.gallery-mosaic__img{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);background:#fff}
.gallery-mosaic__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-mosaic__item:hover img{transform:scale(1.04)}
.gallery-mosaic__keyword{display:block;margin-top:10px;font-size:15px;font-weight:600;color:var(--heading)}

/* 카드 그리드 */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--brand);transform:translateY(-3px)}
.card__media,.gallery-mosaic__img,.rel-card__media,.case-slider__media{display:block}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--bg-ivory)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:20px 22px 24px}
.card__title{font-size:var(--fs-h3);margin-bottom:8px}
.card__text{font-size:15px;color:var(--ink-soft);margin:0}

/* 과정 */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.steps li{counter-increment:step;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-serif);font-size:28px;color:var(--brand);margin-bottom:10px}
.steps h3{font-size:18px;margin-bottom:8px;font-family:var(--font-sans);font-weight:700}
.steps p{font-size:14.5px;color:var(--ink-soft);margin:0}

/* 표 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
caption{caption-side:top;text-align:left;padding:14px 18px;font-weight:700;color:var(--heading)}
th,td{padding:14px 18px;text-align:left;border-top:1px solid var(--line-soft);vertical-align:top}
thead th{background:var(--bg-ivory);font-weight:700;color:var(--heading);border-top:0}
tbody th{font-weight:600;color:var(--heading);white-space:nowrap}

/* 체크 목록 */
.check-list{list-style:none;display:grid;gap:12px}
.check-list li{position:relative;padding-left:26px;color:var(--ink-soft)}
.check-list li::before{content:"";position:absolute;left:4px;top:.7em;width:8px;height:8px;background:var(--brand);border-radius:50%}
.check-list strong{color:var(--heading)}

/* FAQ */
.faq{display:grid;gap:10px;max-width:860px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:22px;color:var(--brand);flex:0 0 auto}
.faq__item[open] summary::after{content:"\2212"}
.faq__item h3{font-family:var(--font-sans);font-size:17px;font-weight:600;line-height:1.5}
.faq__item p{margin:0;padding:0 22px 20px;color:var(--ink-soft)}

/* CTA */
.cta{padding:var(--section-py) 0;background:var(--heading);color:#fff;text-align:center}
.cta h2{color:#fff;font-size:var(--fs-h2);margin-bottom:14px}
.cta p{color:#e7ddd3;max-width:620px;margin:0 auto 28px}
.cta .btn--outline{color:#fff;border-color:rgba(255,255,255,.4)}
.cta .btn--outline:hover{border-color:#fff;color:#fff}

/* 하위 페이지 (article) */
.breadcrumb{padding:22px 0 0;font-size:14px;color:var(--ink-mute)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--line)}
.breadcrumb a:hover{color:var(--brand)}
.page-hero{padding:40px 0 48px}
.page-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.page-hero h1{font-size:var(--fs-h1);margin-bottom:20px}
.page-hero__lead{font-size:18px;color:var(--ink-soft);margin-bottom:12px}
.page-hero__fact{font-size:var(--fs-sm);color:var(--ink-soft);padding-top:16px;border-top:1px solid var(--line);margin-bottom:24px}
.page-hero__price{font-family:var(--font-serif);font-size:22px;color:var(--heading);margin-bottom:24px}
.page-hero__price small{font-family:var(--font-sans);font-size:13px;color:var(--ink-mute);margin-left:6px}
.page-hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.page-hero__media--wide img{aspect-ratio:3/2}
.article{max-width:820px}
.article h2{font-size:var(--fs-h2);margin:40px 0 16px}
.article h2:first-child{margin-top:0}
.article h3{font-size:var(--fs-h3);margin:28px 0 10px}
.article p{color:var(--ink-soft)}
.article .check-list{margin-bottom:1em}
.figure{margin:28px 0}
.figure img{width:100%;border-radius:var(--radius)}
.figure figcaption{margin-top:10px;font-size:14px;color:var(--ink-mute)}
.pair{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:28px 0}
.pair img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.callout{background:var(--brand-soft);border-left:3px solid var(--brand);padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;margin:24px 0;color:var(--ink)}
.callout p{margin:0;color:var(--ink)}
.spec-photo{max-width:420px;margin:28px 0}
.spec-photo img{width:100%;border:1px solid var(--line);border-radius:var(--radius)}

/* 관련 카드 */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.rel-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s}
.rel-card:hover{border-color:var(--brand)}
.rel-card__media{display:block;aspect-ratio:4/3;overflow:hidden}
.rel-card__media img{width:100%;height:100%;object-fit:cover}
.rel-card__title{display:block;padding:16px 18px 2px;font-family:var(--font-serif);font-size:18px;color:var(--heading)}
.rel-card__text{display:block;padding:0 18px 18px;font-size:14.5px;color:var(--ink-soft)}

/* 상담 */
.consult-steps{list-style:none;display:grid;gap:14px;counter-reset:c}
.consult-steps li{counter-increment:c;display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.consult-steps li::before{content:counter(c);flex:0 0 32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.consult-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.notfound{padding:120px 0;text-align:center}

/* 푸터 */
.site-footer{background:var(--bg-ivory);border-top:1px solid var(--line);padding:48px 0 40px;font-size:14.5px;color:var(--ink-soft)}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:24px}
.site-footer__nav a:hover{color:var(--brand)}
.site-footer__biz{font-style:normal;display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:16px}
.site-footer__biz strong{color:var(--heading);flex:0 0 100%}
.site-footer__copy{margin:0;font-size:13px;color:var(--ink-mute)}

/* 반응형 */
@media (max-width:1024px){
  .case-slider__inner{flex-direction:column;align-items:stretch;gap:32px}
  .case-slider__head{flex:0 0 auto;max-width:none}
  .case-slider__slide{flex-basis:44%}
  .gallery-mosaic__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  :root{--header-h:64px;--section-py:56px;--fs-body:16px}
  .nav-toggle{display:flex}
  .site-nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:12px var(--gutter) 20px}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-nav li{border-bottom:1px solid var(--line-soft)}
  .site-nav li:last-child{border:0;padding-top:14px}
  .site-nav a:not(.btn){display:block;padding:14px 0}
  .site-nav .btn{width:100%}
  .site-logo img{width:92px}
  .hero-intro{padding:48px 0 32px}
  .hero-image img{aspect-ratio:4/3}
  .feature-split__inner,.page-hero__grid{grid-template-columns:1fr;gap:28px}
  .feature-split__media img{aspect-ratio:4/3}
  .card-grid,.rel-grid{grid-template-columns:1fr}
  .case-slider__slide{flex-basis:78%}
  .sub-cards{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .btn--sm{width:auto}
  .consult-cta{flex-direction:column}
}
@media (max-width:640px){
  .table-fit table{min-width:0}
  .table-fit th,.table-fit td{padding:12px 14px}
  .table-fit tbody th{white-space:normal}
  .table-cards{border:0;background:transparent;overflow:visible}
  .table-cards table{min-width:0;display:block}
  .table-cards caption{display:block;width:100%;padding:0 0 12px}
  .table-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-cards tbody{display:grid;gap:14px}
  .table-cards tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .table-cards tbody th{display:block;white-space:normal;background:var(--bg-ivory);border:0;padding:14px 16px;font-size:16px}
  .table-cards td{display:flex;gap:14px;border-top:1px solid var(--line-soft);padding:11px 16px;font-size:14.5px}
  .table-cards td::before{content:attr(data-label);flex:0 0 74px;font-weight:700;color:var(--heading)}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}