/* 홈 전용 스타일 — 시안 v4 index.html 에서 옮김(공통 부분은 theme.css). 규칙 순서는 v4의 덮어쓰기 순서를 따른다. */

/* 첫 화면 */
.hero{background:var(--night);color:var(--hero-ink);padding-block:28px 40px}
.hero .wrap{display:flex;flex-direction:column;gap:18px}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(1.75rem,6vw,2.4rem);color:#fff}
.hero .lead{color:var(--hero-muted);font-size:1.02rem;max-width:36em}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.strip div{border-radius:8px;padding:7px 2px 6px;text-align:center;font-size:.7rem;line-height:1.35;color:#fff;font-variant-numeric:tabular-nums}
.strip b{display:block;font-family:"Gowun Batang",serif;font-size:1.02rem}
.strip-cap{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.76rem;color:var(--hero-muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.btn.main{flex:1 1 220px}
.btn.ghost{flex:1 1 160px}

/* 본문 묶음 */
main.home{display:flex;flex-direction:column;gap:56px;padding-block:44px 120px}
main.home section{display:flex;flex-direction:column;gap:16px}
.head{display:flex;flex-direction:column;gap:6px}

/* 샘플 표지 */
.sample-cover{background:var(--night);color:var(--hero-ink);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:14px}
.sample-cover .tag-line{font-size:.74rem;letter-spacing:.2em;color:var(--gold)}
.sample-cover h3{color:#fff;font-size:1.2rem}
.sample-cover ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.sample-cover li{padding-left:16px;position:relative;font-size:.95rem;color:#e7e3d8}
.sample-cover li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:2px;background:var(--gold)}
.qs{border-left:3px solid var(--gold);padding-left:14px;display:flex;flex-direction:column;gap:4px;font-size:.92rem;color:var(--hero-muted)}
.qs b{color:#fff;font-family:"Gowun Batang",serif;font-weight:700}

/* 샘플 달력 */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:600px;font-size:.86rem;line-height:1.5}
.table-wrap th,.table-wrap td{padding:9px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table-wrap th{font-weight:500;color:var(--muted);font-size:.76rem;white-space:nowrap;background:var(--paper)}
.table-wrap td:first-child{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums;border-left:5px solid transparent}
tr.good td{background:var(--good-bg)} tr.good td:first-child{border-left-color:var(--good)}
tr.mixed td{background:var(--mixed-bg)} tr.mixed td:first-child{border-left-color:var(--mixed)}
tr.bad td{background:var(--bad-bg)} tr.bad td:first-child{border-left-color:var(--bad)}
tr.worst td{background:var(--worst-bg)} tr.worst td:first-child{border-left-color:var(--worst)}
.table-wrap tr:last-child td{border-bottom:0}
.pill{display:inline-block;font-size:.72rem;font-weight:700;padding:1px 9px;border-radius:999px;white-space:nowrap;color:#fff}
.table-wrap td small{display:block;color:var(--muted);font-weight:400;font-size:.74rem}

/* 받는 것 */
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.toc li{display:grid;grid-template-columns:4.2rem 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.toc .no{font-family:"Gowun Batang",serif;color:var(--gold-ink);font-weight:700;font-size:.92rem}
.toc small{display:block;color:var(--muted);font-size:.82rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.fact b{display:block;font-family:"Gowun Batang",serif;font-size:1.3rem;font-variant-numeric:tabular-nums}
.fact span{font-size:.82rem;color:var(--muted)}

/* 만드는 방법 */
.how{display:grid;gap:12px}
.how div{display:grid;grid-template-columns:6.5rem 1fr;gap:12px;font-size:.94rem}
.how dt{font-weight:700}
.how dd{margin:0;color:var(--muted)}
.how{margin:0}

/* 주문 순서 */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--night);color:var(--gold);display:grid;place-items:center;font-size:.82rem;font-weight:700}
.steps small{display:block;color:var(--muted);font-size:.84rem}
.form-box{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.form-col{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.form-col h3{font-size:.95rem;margin-bottom:6px}
.form-col ul{margin:0;padding-left:1.1em;font-size:.88rem;color:var(--muted)}

/* 가격 */
.price{background:var(--card);border:2px solid var(--gold);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.price .amt{font-family:"Gowun Batang",serif;font-size:2rem;font-variant-numeric:tabular-nums}
.price .amt small{font-size:.85rem;font-family:"Noto Sans KR",sans-serif;color:var(--accent);margin-left:6px}
.price ul{margin:0;padding-left:1.1em;font-size:.9rem}

/* 다루지 않는 것 */
.notcover{background:var(--card);border:1px dashed var(--muted);border-radius:12px;padding:16px;font-size:.92rem}
.notcover ul{margin:6px 0 0;padding-left:1.1em}

/* 자주 묻는 질문 */
.faq details{border-bottom:1px solid var(--line);padding:13px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:.96rem}
.faq details p{margin-top:8px;font-size:.9rem;color:var(--muted)}

/* 아래 고정 버튼 */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px))}
.bar .in{max-width:680px;margin:0 auto;display:flex;gap:10px;align-items:center}
.bar .in span{font-size:.8rem;color:var(--muted);flex:0 0 auto}
.bar .btn{min-height:46px;flex:1}

/* v2 편집: 먹빛 서재, 종이 여백, 책력의 선 */
.hero{position:relative;isolation:isolate;background-color:#1a2131;padding-block:88px 84px}
.hero .wrap{max-width:1120px;align-items:flex-start;gap:18px}
.hero .eyebrow{display:flex;align-items:center;gap:11px;color:#e6c88e;letter-spacing:.12em}
.hero .eyebrow::before{content:"";display:inline-block;width:28px;border-top:1px solid #d9bb83}
.hero .lead{max-width:34em;color:#f0ebe1;line-height:1.85}
.hero .strip,.hero .strip-cap,.hero .cta-row{width:min(100%,590px)}
.strip{gap:4px;margin-top:12px}
.strip div{border:1px solid rgba(255,255,255,.17);border-radius:2px;padding:9px 2px;font-size:.72rem}
.strip b{font-size:1rem;margin-bottom:3px}
.strip .good{background:#395f50}.strip .mixed{background:#6a5b42}.strip .bad{background:#644d48}.strip .worst{background:#69483f;box-shadow:none;border-color:#caaa7a}
.strip-cap{color:#ebe4d7;line-height:1.65}
.cta-row{margin-top:8px}
main.home{gap:90px;padding-block:88px 120px}
main.home section{gap:20px;min-width:0}
.head{gap:9px}
.head::before{content:"";width:35px;height:5px;border-top:1px solid var(--gold-ink);border-bottom:1px solid var(--gold-ink);margin-bottom:7px}
.head p{max-width:48em}
.sample-cover{position:relative;overflow:hidden;border-radius:2px;border:1px solid #a58a5c;box-shadow:inset 0 0 0 7px #1e2340,inset 0 0 0 8px rgba(201,164,92,.38);padding:38px 40px;gap:19px}
.sample-cover .tag-line{color:#e6ca91}
.sample-cover h3{font-size:1.4rem}
.sample-cover li{line-height:1.8}
.qs{border-left:1px solid var(--gold);margin-top:4px;gap:7px}
.section-art{height:220px;border:1px solid var(--line);background-color:#eee6d9;background-position:center;background-size:cover}
.calendar-art{object-position:center 53%}
.ink-art{height:190px;object-position:center 52%}
.table-wrap{border-radius:2px;max-width:100%;overscroll-behavior-x:contain}
.table-wrap table{min-width:730px}
.table-wrap th,.table-wrap td{padding:12px 13px}
.table-wrap th{color:#514c43;background:#eee8de}
.pill{border-radius:2px;padding:3px 8px}
.pill.good{background:#386355}.pill.mixed{background:#776139}.pill.bad{background:#76564e}.pill.worst{background:#714a43}
.facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.fact{border:0;border-radius:0;padding:26px 22px;min-width:0}
.fact b{color:var(--night);font-size:1.55rem}
.fact span{line-height:1.6}
.toc li{grid-template-columns:5rem 1fr;padding:16px 0}
.how{gap:0;border-top:1px solid var(--line)}
.how div{grid-template-columns:8rem 1fr;padding:18px 0;border-bottom:1px solid var(--line)}
.how dt{color:var(--night)}
.form-box{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-col{border-radius:2px;padding:24px}
.form-col h3{font-size:1.05rem;margin-bottom:12px}
.form-col li{margin-bottom:5px}
.steps{gap:18px;margin-top:6px}
.steps li::before{border-radius:1px;font-family:"Gowun Batang",serif}
.price{border:1px solid #b99a63;border-radius:2px;padding:32px;gap:20px;background:#fffdf8}
.price .amt{color:var(--night);font-weight:700;font-size:2.4rem}
.price li{margin-block:6px}
.notcover{border:1px solid var(--line);border-left:3px solid #978d7c;border-radius:2px;padding:22px}
.faq details{padding:17px 0}
.faq summary{line-height:1.6}
.bar{z-index:10;background:rgba(251,248,242,.98);box-shadow:0 -6px 20px rgba(30,35,64,.07)}
.bar .in{max-width:912px}
.bar .in span{color:var(--night);font-weight:700;font-size:.95rem}
.bar .btn{min-height:48px}
.site-foot{padding-bottom:120px} /* 아래 고정 버튼에 가리지 않게 */

/* v3: 노을빛 정자와 옥색 한복, 남색 리포트의 차분한 조합 */
.hero{position:relative;isolation:isolate;background:#1a2131;padding:0;overflow:hidden}
.hero-visual{position:absolute;inset:0;z-index:-2;display:block}
.hero-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(24,30,43,.99) 0%,rgba(24,30,43,.94) 33%,rgba(24,30,43,.74) 48%,rgba(24,30,43,.12) 78%)}
.hero .wrap{min-height:650px;padding-block:76px;justify-content:center}
.hero h1{max-width:570px;font-family:"Gowun Batang","Batang",serif;font-size:clamp(2rem,3.25vw,3rem);font-weight:700;line-height:1.43;letter-spacing:-.045em}
.hero .lead{max-width:35em;color:#f3eee4}
.hero .strip,.hero .strip-cap,.hero .cta-row{width:min(100%,560px)}
.hero .strip-cap{color:#f1ebe0}
main.home{gap:88px;padding-block:86px 120px}
.head::before{width:40px;border-color:#b08a51}
.head h2{color:#1e2340}
.sample-cover{background:#1e2340;box-shadow:inset 0 0 0 7px #1e2340,inset 0 0 0 8px rgba(210,174,112,.42)}
.section-art{display:block;width:100%;height:auto;aspect-ratio:2.4 / 1;object-fit:cover;border:1px solid #d8c6ae;border-radius:4px}
.calendar-art{aspect-ratio:2 / 1}
.ink-art{aspect-ratio:5 / 2}
.table-wrap{border-color:#d8cfbf}
.facts{background:#d8dfd5;border-color:#d8dfd5}
.fact{background:#f4f8f2}
.form-col{border-color:#d9d7c8;background:#fffefa}
.price{border-color:#b7955e;background:linear-gradient(135deg,#fffdf9 55%,#f7efdf)}
.price .amt{color:#1e2340}
.notcover{background:#f5efea;border-left-color:#b18b7e}
.bar{background:rgba(251,248,242,.98);border-color:#ded6c8}

@media(max-width:700px){
  .hero{padding:0}
  .hero::before{display:none}
  .hero-visual{position:relative;inset:auto;height:auto;aspect-ratio:4 / 5;max-height:560px;z-index:0;overflow:hidden}
  .hero-visual::after{content:"";position:absolute;inset:82% 0 0;background:linear-gradient(0deg,#1a2131,transparent)}
  .hero-visual img{object-position:center}
  .hero .wrap{min-height:0;padding-block:16px 40px;gap:15px}
  .hero h1{font-size:clamp(1.7rem,6.5vw,2.1rem);line-height:1.4}
  .hero .lead{font-size:.95rem}
  .strip{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:4px}
  .strip div{padding:7px 1px;font-size:.66rem}
  .strip b{font-size:.92rem}
  .cta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cta-row .btn{padding-inline:8px;font-size:.9rem}
  main.home{gap:66px;padding-block:62px 110px}
  .section-art,.ink-art{height:auto}
}
@media(max-width:600px){
  .sample-cover{padding:28px 24px}
  .facts{grid-template-columns:1fr}
  .fact{display:grid;grid-template-columns:7rem 1fr;align-items:center;gap:10px;padding:18px}
  .fact b{font-size:1.35rem}
  .form-box{grid-template-columns:1fr}
  .how div{grid-template-columns:1fr;gap:5px}
  .price{padding:25px 22px}
}
@media(min-width:701px) and (max-width:900px){
  .hero::before{display:none}
  .hero-visual{position:relative;inset:auto;aspect-ratio:16 / 9;z-index:0;overflow:hidden}
  .hero-visual::after{content:"";position:absolute;inset:82% 0 0;background:linear-gradient(0deg,#1a2131,transparent)}
  .hero .wrap{min-height:0;padding-block:28px 55px}
}