/* ==========================================================
   원목 식탁 샌딩 — 디자인 토큰
   팔레트: 딥 네이비 + 앰버 + 순백 (가독성 우선)
   ink #1F242A / navy #1C3D5E / amber #FFB020 / paper #FCFDFE
   - 네이비: 브랜드·제목·어두운 배경 (신뢰감)
   - 앰버: 전화·견적 버튼 등 행동 유도만 (한눈에 띄게)
   - 본문: 순백 배경 + 진회색 텍스트 (대비 4.5:1 이상)
   ========================================================== */
:root{
  --ink:#1F242A;
  --ink-soft:#5A6672;
  --bark:#1C3D5E;
  --honey:#FFB020;
  --honey-deep:#245B8F;
  --paper:#FCFDFE;
  --card:#FFFFFF;
  --line:#E0E7ED;
  --grain:#DAE4ED;
  --radius:14px;
  --maxw:1020px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.75;font-size:16.5px;
  padding-bottom:64px; /* mobile call bar */
}
h1,h2,h3,.serif{font-family:"Noto Serif KR",serif;letter-spacing:-.01em}
a{color:var(--honey-deep);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block;border-radius:10px}
:focus-visible{outline:3px solid var(--honey);outline-offset:2px}

/* 나뭇결 상단 스트립 */
.grainbar{height:7px;background:
  repeating-linear-gradient(90deg,
    var(--bark) 0 18px, #2A527A 18px 23px,
    var(--bark) 23px 55px, #35648F 55px 58px);
}

/* 레이아웃 */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:64px 0}
.eyebrow{display:inline-block;font-size:.82rem;font-weight:700;color:var(--honey-deep);
  letter-spacing:.14em;margin-bottom:10px}
h2{font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:900;margin-bottom:14px;color:var(--bark)}
.lead{color:var(--ink-soft);max-width:640px}

/* 헤더 */
header.site{position:sticky;top:0;z-index:50;background:rgba(252,253,254,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:"Noto Serif KR",serif;font-weight:900;font-size:1.12rem;color:var(--bark)}
.logo small{font-weight:600;color:var(--honey-deep);font-size:.72rem;display:block;line-height:1;letter-spacing:.08em}
nav.main a{margin-left:18px;font-size:.92rem;font-weight:600;color:var(--ink)}
.btn-call{display:inline-block;background:var(--honey);color:#33260A;font-weight:800;
  padding:9px 16px;border-radius:999px;font-size:.92rem;white-space:nowrap}
.btn-call:hover{background:#F0A000;text-decoration:none}
@media(max-width:760px){nav.main{display:none}}

/* 히어로 */
.hero{padding:72px 0 56px}
.hero .kicker{font-weight:700;color:var(--honey-deep);font-size:.95rem;margin-bottom:14px}
.hero h1{font-size:clamp(1.9rem,5.4vw,3rem);font-weight:900;line-height:1.28;color:var(--bark)}
.hero h1 em{font-style:normal;color:var(--bark);
  background:linear-gradient(transparent 60%, #FFD98A 60% 94%, transparent 94%)}
.hero p.sub{margin:18px 0 26px;color:var(--ink-soft);max-width:560px;font-size:1.04rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-big{display:inline-block;background:var(--honey);color:#33260A;font-weight:800;
  padding:14px 26px;border-radius:999px;font-size:1.05rem;box-shadow:0 5px 16px rgba(255,176,32,.32)}
.btn-big:hover{background:#F0A000;text-decoration:none}
.btn-ghost{display:inline-block;font-weight:700;color:var(--bark);padding:14px 10px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.badge{background:#EDF3F8;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.85rem;font-weight:700;color:#3A5268}

/* 시그니처: 그릿(사포 방수) 진행 바 */
.gritline{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:40px}
.grit{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px;text-align:center;position:relative}
.grit .num{font-family:"Noto Serif KR",serif;font-weight:900;font-size:1.55rem;color:var(--bark);line-height:1.1}
.grit .lab{font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-top:4px}
.grit .tex{height:8px;border-radius:4px;margin-top:10px}
.grit.g80  .tex{background:radial-gradient(circle,var(--bark) 1.4px,transparent 1.6px) 0 0/7px 7px,var(--grain)}
.grit.g120 .tex{background:radial-gradient(circle,var(--bark) 1.1px,transparent 1.3px) 0 0/5px 5px,var(--grain)}
.grit.g240 .tex{background:radial-gradient(circle,var(--bark) .8px,transparent 1px) 0 0/3.4px 3.4px,var(--grain)}
.grit.goil .tex{background:linear-gradient(90deg,#FFB020,#E08E00)}
.grit.goil .num{color:#8A5B00}
@media(max-width:640px){.gritline{grid-template-columns:repeat(2,1fr)}}

/* 카드 그리드 */
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid.c2,.grid.c3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  border-top:3px solid var(--bark)}
.card h3{font-size:1.08rem;font-weight:800;color:var(--bark);margin-bottom:8px}
.card p{font-size:.95rem;color:var(--ink-soft)}
.card .tag{display:inline-block;margin-top:12px;font-size:.78rem;font-weight:700;
  color:#1F4E79;background:#E3EEF7;border-radius:999px;padding:3px 11px}

/* 갤러리 */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery figure{margin:0}
.gallery figcaption{font-size:.83rem;color:var(--ink-soft);margin-top:7px}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* 후기 */
.review{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.review .stars{color:#F5A300;letter-spacing:2px;font-size:.9rem}
.review p{font-size:.94rem;margin:10px 0 14px;color:var(--ink)}
.review .who{font-size:.83rem;font-weight:700;color:var(--ink-soft)}

/* 리스트 링크(가이드/지역) */
.linkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.linkgrid{grid-template-columns:1fr}}
.linkcard{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px}
.linkcard:hover{border-color:var(--honey-deep);text-decoration:none;box-shadow:0 3px 12px rgba(28,61,94,.14)}
.linkcard .t{font-weight:800;color:var(--bark)}
.linkcard .d{font-size:.87rem;color:var(--ink-soft);margin-top:4px}
.linkcard .m{font-size:.78rem;color:var(--honey-deep);font-weight:700;margin-top:8px;display:inline-block}
.regionchips{display:flex;flex-wrap:wrap;gap:8px}
.regionchips a{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:.9rem;font-weight:700;color:var(--ink)}
.regionchips a:hover{border-color:var(--honey-deep);color:var(--honey-deep);text-decoration:none}

/* FAQ */
details.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:4px 20px;margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;color:var(--bark)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"Q. ";color:var(--honey-deep)}
details.faq div{padding:0 0 16px;color:var(--ink-soft);font-size:.96rem}

/* 아티클(가이드/지역 본문) */
article.doc{max-width:760px;margin:0 auto}
article.doc .meta{font-size:.85rem;color:var(--ink-soft);margin:8px 0 26px}
article.doc h1{font-size:clamp(1.65rem,4.5vw,2.35rem);font-weight:900;color:var(--bark);line-height:1.32}
article.doc h2{font-size:1.28rem;margin:38px 0 12px;padding-top:10px}
article.doc p{margin-bottom:14px}
article.doc ul{margin:0 0 14px 22px}
article.doc li{margin-bottom:6px}
article.doc img{margin:10px 0 6px}
.docbox{background:#F1F6FA;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin:26px 0;font-size:.95rem}
table.cmp{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.cmp th,table.cmp td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:center}
table.cmp td:first-child{text-align:left;font-weight:700;color:var(--bark)}
table.cmp th{background:var(--bark);color:#EFF5FA;font-weight:700}
table.cmp th:last-child,table.cmp td:last-child{background:#FFF6E3}
table.cmp tr:last-child td{border-bottom:none}
@media(max-width:600px){table.cmp{font-size:.8rem}table.cmp th,table.cmp td{padding:8px 6px}}
.docbox strong{color:var(--bark)}
.crumb{font-size:.85rem;margin-bottom:14px}
.crumb a{color:var(--ink-soft)}

/* CTA 밴드 */
.ctaband{background:var(--bark);color:#EFF5FA;text-align:center;border-radius:var(--radius);
  padding:44px 24px}
.ctaband h2{color:#FFFFFF;margin-bottom:8px}
.ctaband p{color:#D5E2ED;margin-bottom:22px}
.ctaband .btn-big{background:var(--honey);color:#33260A;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ctaband small{display:block;margin-top:14px;color:#A9BFD2;font-size:.83rem}

/* 푸터 */
footer.site{background:#12283C;color:#C5D3DF;padding:40px 0 32px;margin-top:70px;font-size:.9rem}
footer.site .brand{font-family:"Noto Serif KR",serif;font-weight:900;color:#FFFFFF;font-size:1.05rem;margin-bottom:10px}
footer.site strong{color:#FFFFFF}
footer.site a{color:#8FC1E9;font-weight:700}
footer.site .links{margin-top:16px;display:flex;flex-wrap:wrap;gap:14px}
footer.site .fine{margin-top:18px;font-size:.8rem;color:#8298AB}

/* 모바일 하단 전화 바 */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--honey);color:#33260A;text-align:center;font-weight:800;
  padding:15px 10px;font-size:1.02rem}
.callbar:hover{text-decoration:none;background:#F0A000}
@media(max-width:760px){.callbar{display:block}}
@media(min-width:761px){body{padding-bottom:0}}