:root{
  --ink:#171717; --paper:#FAF9F6; --gray:#555; --mid:#8a8884; --line:#d9d6cf; --box:#EFEEEA;
  --max:1180px; --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{letter-spacing:-0.035em;line-height:1.12;font-weight:800}
h1{font-size:clamp(44px,7.4vw,96px)}
h2{font-size:clamp(32px,4.6vw,58px)}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin-bottom:18px}
.eyebrow--light{color:#9c9a95}
section{padding:clamp(72px,11vw,140px) var(--pad);max-width:var(--max);margin:0 auto}
.section-head{margin-bottom:clamp(36px,5vw,64px)}

/* nav */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;padding:14px var(--pad);background:rgba(250,249,246,.86);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav__brand{font-weight:800;font-size:20px;letter-spacing:-0.03em;text-decoration:none;margin-right:auto}
.nav__links{display:flex;gap:24px}
.nav__links a{text-decoration:none;font-size:15px;color:var(--gray)}
.nav__links a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700;font-size:17px;padding:16px 28px;border-radius:999px;transition:transform .15s,opacity .15s}
.btn:hover{transform:translateY(-1px);opacity:.9}
.btn--small{font-size:14px;padding:10px 18px}
.btn--light{background:var(--paper);color:var(--ink)}
.link{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:2px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(40px,6vw,80px)}
.hero__lead{font-size:clamp(18px,1.7vw,22px);color:var(--gray);margin:28px 0 40px}
.hero__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero__art img{border-radius:6px;box-shadow:0 40px 80px -40px rgba(0,0,0,.35)}

/* statement */
.statement{border-top:1px solid var(--line)}
.statement__small{font-size:15px;color:var(--mid);font-weight:600;margin-bottom:22px}
.statement__big{font-size:clamp(26px,3.4vw,42px);font-weight:700;letter-spacing:-0.03em;line-height:1.35;max-width:900px}
.mask{background:var(--ink);color:var(--ink);border-radius:4px;padding:0 .12em;transition:color .3s,background .3s;cursor:default}
.mask:hover{background:transparent;color:var(--ink)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(48px,6vw,80px)}
.trio b{display:block;font-size:20px;margin-bottom:10px;padding-top:18px;border-top:2px solid var(--ink)}
.trio p{color:var(--gray);font-size:16px}

/* week */
.days{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.days li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 18px 30px;min-height:210px;display:flex;flex-direction:column;gap:18px}
.days__d{font-size:30px;font-weight:800;letter-spacing:-0.03em}
.days__t{font-size:15px;color:var(--gray);line-height:1.5}
.days__weekend{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)}
.days__weekend .days__t{color:#c8c6c1}
.note{margin-top:28px;color:var(--gray);max-width:720px}

/* inside */
.inside{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,96px);align-items:center;border-top:1px solid var(--line)}
.inside__cover{display:flex;justify-content:center;align-items:center}
.inside__cover img{margin:0 auto;box-shadow:0 30px 60px -28px rgba(0,0,0,.4);transform:rotate(-2deg)}
.inside__lead{font-size:18px;color:var(--gray);margin:22px 0 40px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:34px 28px;margin-bottom:44px}
.stats dt{font-size:clamp(48px,5.4vw,72px);font-weight:800;letter-spacing:-0.045em;line-height:1}
.stats dd{font-weight:700;font-size:18px;margin-top:8px}
.stats small{display:block;font-weight:400;font-size:14px;color:var(--mid);margin-top:2px}
.books{list-style:none;border-top:1px solid var(--line)}
.books li{padding:18px 0;border-bottom:1px solid var(--line);color:var(--gray);display:flex;gap:20px}
.books b{color:var(--ink);min-width:120px}

/* preview */
.preview{background:var(--box);max-width:none}
.preview>*{max-width:calc(var(--max) - 2*var(--pad));margin-left:auto;margin-right:auto}
.preview__page img{width:100%;box-shadow:0 30px 60px -36px rgba(0,0,0,.35)}
.preview__page figcaption{margin-top:16px;font-size:14px;color:var(--mid)}

/* name */
.name{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.name__art img{background:#fff;border:1px solid var(--line);padding:28px}
.name__body p{color:var(--gray);font-size:17px;margin-top:20px;max-width:520px}
.name__body h2{margin-bottom:8px}

/* faq */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line);padding:24px 0}
.faq summary{cursor:pointer;font-size:19px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:26px;line-height:1;color:var(--mid)}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--gray);margin-top:14px;max-width:720px}

/* notify */
.notify{background:var(--ink);color:var(--paper);max-width:none;text-align:center}
.notify h2{font-size:clamp(40px,6vw,80px)}
.notify p{color:#c8c6c1;margin:22px auto 40px;font-size:18px}

/* footer */
.footer{max-width:var(--max);margin:0 auto;padding:56px var(--pad) 72px;display:flex;flex-direction:column;gap:10px}
.footer p{color:var(--gray);font-size:15px}
.footer__small{font-size:13px!important;color:var(--mid)!important}

/* responsive */
@media (max-width:960px){
  .hero,.inside,.name{grid-template-columns:1fr}
  .hero__art{max-width:520px}
  .inside__cover{max-width:380px;margin:0 auto;width:100%}
  .days{grid-template-columns:repeat(3,1fr)}
  .trio{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav__links{display:none}
  .days{grid-template-columns:repeat(2,1fr)}
  .days li{min-height:150px}
  .stats{grid-template-columns:1fr 1fr}
  .books li{flex-direction:column;gap:4px}
  .hero__cta .btn{width:100%}
}