/* ===== 셀로직 selllogic — Editorial Luxury ===== */
:root{
  --ink:#111111;
  --ink-soft:#43423f;
  --ink-faint:#8f8d87;
  --paper:#faf9f6;
  --paper-2:#f2efe9;
  --line:rgba(17,17,17,.12);
  --line-soft:rgba(17,17,17,.07);
  --indigo:#3538cd;
  --indigo-soft:#5a5de0;
  --on-dark:#f5f3ee;
  --on-dark-faint:#9d9b95;
  --ease:cubic-bezier(.32,.72,0,1);
  --pad:clamp(20px,6vw,120px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans KR",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
em{font-style:normal}
h1,h2,h3{font-weight:900;line-height:1.12;letter-spacing:-.02em;word-break:keep-all}
p{word-break:keep-all}
a{color:inherit;text-decoration:none}

/* film grain */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== nav ===== */
.nav{
  position:fixed;top:clamp(12px,2vw,22px);left:50%;transform:translateX(-50%);
  z-index:40;width:min(1080px,calc(100% - 24px));
  display:flex;align-items:center;gap:22px;
  padding:10px 12px 10px 24px;border-radius:999px;
  background:rgba(250,249,246,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line-soft);
  transition:box-shadow .6s var(--ease),background .6s var(--ease);
}
.nav.is-scrolled{box-shadow:0 12px 40px -22px rgba(17,17,17,.35)}
.nav__brand{
  font-family:"Noto Sans Mono",monospace;font-weight:500;
  font-size:15px;letter-spacing:.02em;margin-right:auto;
}
.nav__links{display:flex;gap:26px}
.nav__links a{
  font-size:14px;color:var(--ink-soft);font-weight:500;
  position:relative;transition:color .4s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;
  background:var(--indigo);transition:width .4s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--paper);
  border-radius:999px;font-weight:700;letter-spacing:-.01em;
  padding:15px 16px 15px 26px;
  transition:transform .5s var(--ease),background .5s var(--ease);
  will-change:transform;
}
.btn--sm{padding:9px 10px 9px 18px;font-size:14px;gap:8px}
.btn--lg{font-size:17px;padding:18px 20px 18px 30px}
.btn__ico{
  width:30px;height:30px;flex:0 0 auto;border-radius:999px;
  background:rgba(250,249,246,.16);
  display:grid;place-items:center;font-size:14px;line-height:1;
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.btn--sm .btn__ico{width:24px;height:24px;font-size:12px}
.btn:hover{background:var(--indigo)}
.btn:hover .btn__ico{transform:translate(3px,-2px) scale(1.06)}
.btn:active{transform:scale(.97)}
.btn--invert{background:var(--indigo)}
.btn--invert .btn__ico{background:rgba(255,255,255,.2)}
.btn--invert:hover{background:var(--on-dark);color:var(--ink)}
.btn--invert:hover .btn__ico{background:rgba(17,17,17,.1)}

.link-under{
  font-size:15px;color:var(--ink-soft);font-weight:500;
  border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.link-under:hover{color:var(--indigo);border-color:var(--indigo)}

/* ===== eyebrow / section shell ===== */
.eyebrow{
  font-family:"Noto Sans Mono",monospace;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--indigo);font-weight:500;margin-bottom:26px;
}
.eyebrow--light{color:var(--indigo-soft)}
.section{padding:clamp(90px,13vw,190px) var(--pad)}
.section__title{font-size:clamp(30px,6vw,60px);margin-bottom:8px}
.muted{color:var(--ink-faint)}

/* ===== hero ===== */
.hero{
  min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:140px var(--pad) 90px;
}
.hero__title{font-size:clamp(38px,9.5vw,116px);letter-spacing:-.035em;margin-bottom:34px}
.hero__title em{color:var(--indigo)}
.hero__sub{
  font-size:clamp(16px,2.2vw,22px);color:var(--ink-soft);font-weight:400;
  max-width:640px;line-height:1.65;margin-bottom:46px;
}
.hero__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

/* ===== problem ===== */
.problem__turn{
  font-size:clamp(22px,3.6vw,38px);font-weight:700;line-height:1.35;
  letter-spacing:-.02em;margin-top:clamp(60px,8vw,110px);max-width:900px;
}
.problem__turn em{color:var(--indigo)}
.plist{list-style:none;margin-top:clamp(40px,6vw,72px)}
.plist__item{
  display:flex;gap:clamp(18px,4vw,56px);align-items:baseline;
  padding:clamp(26px,3.5vw,44px) 0;border-top:1px solid var(--line);
}
.plist__item:last-child{border-bottom:1px solid var(--line)}
.plist__num{
  font-family:"Noto Sans Mono",monospace;font-size:clamp(15px,1.6vw,18px);
  color:var(--indigo);font-weight:500;flex:0 0 auto;padding-top:6px;
}
.plist__body h3{font-size:clamp(19px,2.7vw,28px);margin-bottom:10px;font-weight:700}
.plist__body p{font-size:clamp(15px,1.7vw,18px);color:var(--ink-soft);max-width:640px}

/* ===== services ===== */
.services .mod{
  display:grid;grid-template-columns:minmax(230px,1fr) 1.6fr;gap:clamp(16px,4vw,64px);
  padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--line);align-items:start;
}
.services .mod:first-of-type{margin-top:clamp(40px,6vw,72px)}
.services .mod:last-child{border-bottom:1px solid var(--line)}
.mod__index{display:flex;align-items:baseline;gap:16px}
.mod__index span{font-size:clamp(26px,3vw,40px);color:var(--indigo);font-weight:400;line-height:1}
.mod__index em{font-size:clamp(21px,2.7vw,30px);font-weight:900;letter-spacing:-.02em}
.mod__desc{font-size:clamp(15px,1.7vw,18px);color:var(--ink-soft);padding-top:6px}

/* ===== method ===== */
.method{background:var(--paper-2)}
.method__lead{
  font-size:clamp(18px,2.4vw,26px);font-weight:500;color:var(--ink);
  max-width:820px;margin-top:26px;line-height:1.5;letter-spacing:-.01em;
}
.steps{list-style:none;margin-top:clamp(50px,7vw,84px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.4vw,56px)}
.steps__item{border-top:2px solid var(--ink);padding-top:22px}
.steps__k{
  font-family:"Noto Sans Mono",monospace;font-size:14px;color:var(--indigo);
  font-weight:500;display:block;margin-bottom:14px;
}
.steps__item h3{font-size:clamp(18px,2.2vw,24px);margin-bottom:10px;font-weight:700}
.steps__item p{font-size:clamp(14px,1.6vw,17px);color:var(--ink-soft)}

/* ===== proof (dark) ===== */
.proof{background:var(--ink);color:var(--on-dark)}
.proof .section__title{color:var(--on-dark)}
.proof__block{margin-top:clamp(48px,6vw,80px)}
.proof__label{
  font-family:"Noto Sans Mono",monospace;font-size:13px;letter-spacing:.06em;
  color:var(--on-dark-faint);margin-bottom:30px;
}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px) clamp(20px,3vw,40px)}
.stats--three{grid-template-columns:repeat(3,1fr)}
.stat{border-top:1px solid rgba(245,243,238,.18);padding-top:20px}
.stat__n{
  display:block;font-size:clamp(38px,6vw,72px);font-weight:900;
  letter-spacing:-.04em;line-height:1;color:var(--on-dark);
}
.stat__n em{color:var(--indigo-soft);font-size:.5em;font-weight:700;letter-spacing:0}
.stat__u{display:block;margin-top:14px;font-size:clamp(13px,1.5vw,15px);color:var(--on-dark-faint)}
.proof__foot{
  margin-top:clamp(56px,7vw,90px);font-size:clamp(18px,2.6vw,28px);
  font-weight:700;line-height:1.4;letter-spacing:-.02em;max-width:900px;color:var(--on-dark);
}

/* ===== pricing ===== */
.tier{
  display:grid;grid-template-columns:minmax(200px,.9fr) 1.7fr auto;
  gap:clamp(14px,3vw,48px);align-items:center;
  padding:clamp(28px,3.6vw,46px) 0;border-top:1px solid var(--line);
}
.tier:first-of-type{margin-top:clamp(40px,6vw,72px)}
.pricing .tier:last-of-type{border-bottom:1px solid var(--line)}
.tier--hi .tier__head h3{color:var(--indigo)}
.tier__head h3{font-size:clamp(24px,3.4vw,40px);font-weight:900;display:flex;align-items:center;gap:12px}
.tier__tag{
  font-family:"Noto Sans Mono",monospace;font-size:11px;letter-spacing:.12em;
  color:var(--paper);background:var(--indigo);border-radius:999px;
  padding:4px 11px;font-weight:500;transform:translateY(-2px);
}
.tier__for{display:block;margin-top:8px;font-size:14px;color:var(--ink-faint)}
.tier__inc{font-size:clamp(15px,1.7vw,18px);color:var(--ink-soft);line-height:1.7}
.tier__inc span{color:var(--indigo);font-weight:700;margin:0 4px}
.tier__price{
  font-family:"Noto Sans Mono",monospace;font-size:clamp(14px,1.6vw,16px);
  font-weight:500;white-space:nowrap;color:var(--ink);
}
.onboard{margin-top:clamp(56px,7vw,96px);border-top:2px solid var(--ink);padding-top:36px;max-width:840px}
.onboard__title{font-size:clamp(19px,2.4vw,26px);font-weight:900;margin-bottom:24px}
.onboard__row{display:flex;gap:22px;padding:14px 0;align-items:baseline}
.onboard__k{
  font-family:"Noto Sans Mono",monospace;font-size:14px;color:var(--indigo);
  font-weight:500;flex:0 0 64px;
}
.onboard__row p{font-size:clamp(15px,1.7vw,17px);color:var(--ink-soft)}
.dot{color:var(--ink-faint);margin:0 4px}

/* ===== kits (pricing 하단 저가 라인) ===== */
.kits{margin-top:clamp(56px,7vw,96px);border-top:2px solid var(--ink);padding-top:36px}
.kits__title{font-size:clamp(19px,2.4vw,26px);font-weight:900;margin-bottom:10px}
.kits__lead{font-size:clamp(14px,1.6vw,17px);color:var(--ink-soft);margin-bottom:26px;max-width:640px}
.kit{
  display:grid;grid-template-columns:minmax(160px,.8fr) 1.7fr auto;
  gap:clamp(12px,3vw,48px);align-items:baseline;
  padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--line);
  transition:color .4s var(--ease);
}
.kit:last-of-type{border-bottom:1px solid var(--line)}
.kit:hover .kit__name,.kit:hover .kit__price{color:var(--indigo)}
.kit__name{font-size:clamp(16px,2vw,21px);font-weight:700;transition:color .4s var(--ease)}
.kit__desc{font-size:clamp(14px,1.6vw,16px);color:var(--ink-soft)}
.kit__price{
  font-family:"Noto Sans Mono",monospace;font-size:clamp(14px,1.6vw,16px);
  font-weight:500;white-space:nowrap;transition:color .4s var(--ease);
}
.tier__price em{color:var(--ink-faint);font-weight:400;font-size:.85em}

/* ===== maker ===== */
.maker{background:var(--paper-2)}
.maker__body{
  font-size:clamp(17px,2.3vw,24px);font-weight:500;color:var(--ink);
  max-width:820px;margin-top:26px;line-height:1.6;letter-spacing:-.01em;
}
.maker__note{margin-top:22px;font-size:clamp(14px,1.6vw,17px);color:var(--ink-soft)}

/* ===== faq ===== */
.faq__list{margin-top:clamp(40px,6vw,72px);max-width:840px}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:clamp(16px,2vw,21px);font-weight:700;padding:clamp(20px,2.6vw,30px) 0;
  transition:color .4s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";font-family:"Noto Sans Mono",monospace;font-size:20px;font-weight:400;
  color:var(--indigo);flex:0 0 auto;transition:transform .4s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--indigo)}
.faq__item p{
  font-size:clamp(15px,1.7vw,18px);color:var(--ink-soft);
  padding:0 0 clamp(20px,2.6vw,30px);max-width:700px;
}

/* ===== contact ===== */
.contact{background:var(--ink);color:var(--on-dark);text-align:left}
.contact__title{font-size:clamp(32px,6.5vw,68px);color:var(--on-dark);letter-spacing:-.03em;margin-bottom:26px}
.contact__title em{color:var(--indigo-soft)}
.contact__sub{font-size:clamp(16px,2.1vw,21px);color:var(--on-dark-faint);max-width:640px;margin-bottom:44px;line-height:1.6}
.contact__note{margin-top:26px;font-size:14px;color:var(--on-dark-faint)}

/* ===== footer ===== */
.foot{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:34px var(--pad);background:var(--ink);color:var(--on-dark-faint);
  border-top:1px solid rgba(245,243,238,.1);
}
.foot__brand{font-family:"Noto Sans Mono",monospace;font-size:15px;color:var(--on-dark)}
.foot__tag{font-size:13px}

/* ===== scroll reveal (JS-gated: without JS all content stays visible) ===== */
.js .reveal{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none;filter:none}

/* ===== responsive ===== */
@media (max-width:860px){
  .steps{grid-template-columns:1fr}
  .services .mod{grid-template-columns:1fr;gap:14px}
  .tier{grid-template-columns:1fr;gap:12px;align-items:start}
  .tier__price{justify-self:start}
  .kit{grid-template-columns:1fr;gap:6px}
  .kit__price{justify-self:start}
  .stats,.stats--three{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .nav{padding:8px 8px 8px 18px;gap:12px}
  .nav__links{display:none}
  .hero__cta{gap:18px}
  .plist__item{gap:14px}
  .onboard__row{flex-direction:column;gap:4px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;filter:none;transition:none}
  *{transition-duration:.001ms !important}
}

/* print / pdf review only — no effect on the live screen site */
@media print{
  @page{margin:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hero{min-height:auto;padding-top:180px}
  .grain{display:none}
}