/*
Theme Name: W.N 소신
Theme URI: https://countertop.koreajibsuri.com/
Author: W.N 소신
Description: 싱크대 설치·수납장·리폼 전문 W.N 소신 사이트. Cabinet Rhythm Studio 콘셉트.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: wn-sosin
*/

:root{
	--sage:#829B78;
	--pistachio:#C8DA9D;
	--grey-green:#E1E7DD;
	--lavender:#D9CBEA;
	--coral:#E77D70;
	--butter:#E6CD62;
	--charcoal:#303735;
	--graphite:#4A514E;
	--radius:14px;
	--container:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
	color:var(--charcoal);
	background:var(--grey-green);
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{line-height:1.3;margin:0 0 .5em;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:24px;}
.eyebrow{font-family:'JetBrains Mono', monospace;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--graphite);}
.section-head{max-width:680px;margin-bottom:32px;}
.section-head h2{font-size:clamp(24px,3.2vw,34px);}
.section-head p{color:var(--graphite);font-size:16px;}
.emphasis{font-size:clamp(19px,2.4vw,26px);font-weight:700;border-left:4px solid var(--charcoal);padding-left:16px;margin:24px 0;}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;}

.btn{
	display:inline-flex;align-items:center;gap:8px;
	padding:15px 30px;border-radius:999px;font-weight:700;font-size:15px;
	text-decoration:none;background:var(--butter);color:var(--charcoal);
	transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(48,55,53,.18);}
.btn.coral{background:var(--coral);color:var(--grey-green);}
.btn.outline{background:transparent;border:2px solid var(--charcoal);}
.btn.small{padding:10px 20px;font-size:13px;}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--grey-green);border-bottom:1px solid rgba(48,55,53,.14);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo{font-weight:800;font-size:20px;text-decoration:none;letter-spacing:-.01em;}
.primary-menu{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.primary-menu a{text-decoration:none;font-weight:500;font-size:15px;color:var(--graphite);}
.primary-menu a:hover{color:var(--charcoal);}
.primary-menu .menu-call a{background:var(--butter);color:var(--charcoal);padding:10px 20px;border-radius:999px;font-weight:700;}
.nav-toggle{display:none;}
.nav-toggle-label{display:none;flex-direction:column;gap:5px;width:26px;cursor:pointer;}
.nav-toggle-label span{height:2px;background:var(--charcoal);border-radius:2px;}
.mobile-call-fixed{display:none;}

@media (max-width:860px){
	.primary-menu{
		position:fixed;inset:72px 0 0 0;background:var(--grey-green);
		flex-direction:column;align-items:flex-start;gap:22px;padding:32px 24px;
		transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
	}
	.nav-toggle:checked ~ .wrap .primary-menu{transform:translateX(0);}
	.nav-toggle-label{display:flex;}
	.primary-menu .menu-call{margin-top:8px;}
	.mobile-call-fixed{
		display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;height:56px;
		background:var(--butter);color:var(--charcoal);align-items:center;justify-content:center;
		font-weight:800;text-decoration:none;box-shadow:0 -3px 12px rgba(48,55,53,.18);
	}
	body{padding-bottom:56px;}
}

/* 짧은 SEO 인트로 */
.intro{padding:52px 0 44px;}
.intro h1{font-size:clamp(26px,4vw,38px);}
.intro p{max-width:620px;font-size:16px;color:var(--graphite);}
.intro-frame{border:1px solid rgba(48,55,53,.18);border-radius:var(--radius);padding:2px 0 0;margin-top:8px;}

/* 사진 월 */
.photo-wall{padding:56px 0 64px;background:var(--pistachio);}
.photo-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:210px;gap:16px;margin-top:28px;}
.photo-card{
	position:relative;display:block;overflow:hidden;border-radius:10px;
	border:2px solid var(--charcoal);background:var(--grey-green);
	transition:transform .18s ease;
}
.photo-card:hover{transform:translateY(-3px);}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.photo-card:hover img{transform:scale(1.045);}
.photo-card::before{
	content:"";position:absolute;top:14px;left:14px;width:3px;height:22px;
	background:var(--butter);border-radius:2px;z-index:2;
}
.photo-card span{
	position:absolute;left:0;right:0;bottom:0;padding:12px 16px;
	background:linear-gradient(0deg, rgba(48,55,53,.85), rgba(48,55,53,0));
	color:#fff;font-weight:700;font-size:14px;
}
.photo-card.big{grid-column:1/4;grid-row:1/3;}
.photo-card.med-a{grid-column:4/7;grid-row:1/2;}
.photo-card.med-b{grid-column:4/6;grid-row:2/3;}
.photo-card.small-a{grid-column:6/7;grid-row:2/3;}
.photo-card.small-b{grid-column:1/3;grid-row:3/4;}

@media (max-width:1024px){
	.photo-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:230px;}
	.photo-card.big,.photo-card.med-a,.photo-card.med-b,.photo-card.small-a,.photo-card.small-b{grid-column:auto;grid-row:auto;}
	.photo-card.big{grid-column:1/3;grid-row:auto;height:340px;}
}
@media (max-width:600px){
	.photo-grid{grid-template-columns:1fr 1fr;grid-auto-rows:190px;}
	.photo-card.big{height:260px;}
}

/* 브랜드 히어로 */
.brand-hero{padding:72px 0;background:var(--lavender);}
.hero-heading{margin-bottom:40px;}
.hero-heading .eyebrow{display:block;margin-bottom:14px;}
.hero-title{font-size:clamp(28px,4.2vw,44px);font-weight:800;}
.hero-subtitle{font-size:clamp(16px,2vw,20px);font-weight:600;color:var(--graphite);}
.brand-hero .body-copy{font-size:16px;color:var(--graphite);}
.body-copy-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;}
.body-copy-grid .lead-text{max-width:600px;}
.emphasis-block{padding-top:4px;}
.emphasis-block .emphasis{margin-top:0;}
@media (max-width:860px){
	.body-copy-grid{grid-template-columns:1fr;gap:24px;}
}

/* 이동 리본 */
.ribbon{overflow:hidden;background:var(--sage);padding:16px 0;}
.ribbon-track-wrap{display:flex;width:max-content;animation:ribbon-scroll 42s linear infinite;}
.ribbon:hover .ribbon-track-wrap,.ribbon:focus-within .ribbon-track-wrap{animation-play-state:paused;}
.ribbon-track{display:flex;gap:56px;padding-right:56px;}
.ribbon-item{display:flex;align-items:center;gap:10px;white-space:nowrap;font-weight:700;color:var(--charcoal);font-size:15px;}
.ribbon-item svg{width:26px;height:26px;flex:none;}
@keyframes ribbon-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:600px){
	.ribbon{padding:11px 0;}
	.ribbon-item{font-size:12px;gap:6px;}
	.ribbon-item svg{width:18px;height:18px;}
	.ribbon-track{gap:32px;padding-right:32px;}
}

/* 배치 형태 */
.layouts{padding:72px 0;}
.layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.layout-card{
	border:1px solid rgba(48,55,53,.2);border-radius:12px;padding:26px;text-align:center;
	background:rgba(255,255,255,.18);transition:border-color .2s ease, transform .2s ease;
}
.layout-card:hover{border-color:var(--sage);transform:translateY(-3px);}
.layout-card svg{width:60px;height:60px;color:var(--graphite);margin:0 auto 14px;transition:color .2s ease;}
.layout-card img{width:100%;height:260px;object-fit:cover;object-position:center;border-radius:8px;border:2px solid var(--charcoal);margin-bottom:14px;}
.layout-card:hover svg{color:var(--sage);}
.layout-card h3{font-size:16px;margin-bottom:6px;}
.layout-card p{font-size:13px;color:var(--graphite);margin:0;}
@media (max-width:720px){.layout-grid{grid-template-columns:repeat(2,1fr);}}

/* 스토리 */
.story{padding:76px 0;background:var(--coral);}
.story-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;}
.story h2{font-size:clamp(24px,3.6vw,36px);}
.story .emphasis{border-left-color:var(--charcoal);}
.door-panels{display:flex;gap:10px;}
.door-panels .door{flex:1;aspect-ratio:3/4;border:2px solid var(--charcoal);border-radius:10px;background:var(--grey-green);overflow:hidden;}
.door-panels .door img{width:100%;height:100%;object-fit:cover;display:block;}
.door-panels .door:nth-child(1){transform:rotate(-3deg);}
.door-panels .door:nth-child(2){background:var(--butter);transform:translateY(10px);}
@media (max-width:860px){.story-grid{grid-template-columns:1fr;}.door-panels{max-width:320px;margin-top:24px;}}

/* 셀프 시공 */
.self-build{padding:72px 0;}
.issue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;}
.issue-card{
	background:rgba(255,255,255,.2);border:1px solid rgba(48,55,53,.15);
	border-radius:12px;padding:22px;
}
.issue-card svg{width:52px;height:52px;color:var(--coral);margin-bottom:10px;}
.issue-card p{font-size:14px;color:var(--graphite);margin:0;}
@media (max-width:720px){.issue-grid{grid-template-columns:1fr 1fr;}}

/* 전문가 기준 */
.criteria{padding:72px 0;background:var(--pistachio);}
.criteria-list{display:flex;flex-direction:column;gap:14px;margin-top:32px;}
.criteria-item{
	display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;
	background:rgba(225,231,221,.55);border:1px solid rgba(48,55,53,.15);
	border-radius:10px;padding:20px 24px;transition:transform .15s ease;
}
.criteria-item:hover{transform:translateX(4px);}
.criteria-num{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;}
.criteria-item h3{font-size:16px;margin-bottom:4px;}
.criteria-item p{font-size:14px;color:var(--graphite);margin:0;}
@media (max-width:600px){.criteria-item{grid-template-columns:44px 1fr;padding:16px;}.criteria-num{font-size:20px;}}

/* 대표 시공 사례 */
.case-study{padding:72px 0;background:var(--lavender);}
.case-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:start;}
.case-photo img{border-radius:14px;border:2px solid var(--charcoal);width:100%;}
.case-before-after{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.case-before-after figure{margin:0;}
.case-before-after figcaption{font-size:12px;color:var(--graphite);margin-top:6px;text-align:center;}
.case-detail-thumb{margin-bottom:20px;max-width:340px;}
.case-detail-thumb img{width:100%;height:190px;object-fit:cover;border-radius:8px;border:2px solid var(--charcoal);}
.case-info ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:20px 0;}
.case-info li{position:relative;padding-left:18px;font-size:15px;}
.case-info li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--sage);border-radius:2px;}
@media (max-width:860px){.case-grid{grid-template-columns:1fr;}}

/* 작업 흐름 */
.process{padding:72px 0;}
.process-list{max-width:640px;margin:32px auto 0;position:relative;}
.process-list::before{content:"";position:absolute;left:27px;top:8px;bottom:8px;width:2px;background:rgba(48,55,53,.22);}
.process-step{display:grid;grid-template-columns:56px 1fr;gap:20px;padding-bottom:36px;position:relative;}
.process-step:last-child{padding-bottom:0;}
.process-num{
	width:56px;height:56px;border-radius:12px;background:var(--charcoal);color:var(--grey-green);
	display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;z-index:1;
}
.process-step h3{font-size:17px;margin-bottom:6px;}
.process-step p{font-size:14px;color:var(--graphite);margin:0;}

/* FAQ */
.faq{padding:72px 0;background:var(--pistachio);}
.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:32px;}
details.faq-item{
	background:rgba(225,231,221,.6);border:1px solid rgba(48,55,53,.15);
	border-radius:10px;padding:18px 22px;
}
details.faq-item summary{
	cursor:pointer;font-weight:700;list-style:none;
	display:flex;justify-content:space-between;align-items:center;gap:12px;
}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::after{content:"+";font-size:22px;font-weight:400;}
details.faq-item[open] summary::after{content:"\2212";}
details.faq-item .faq-answer{margin-top:12px;font-size:14px;color:var(--graphite);}
.faq-cta{margin-top:28px;text-align:center;}

/* 하부장형 CTA */
.cta-lower{background:var(--graphite);}
.cabinet{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:6px;max-width:var(--container);margin:0 auto;padding:64px 24px 0;}
.cabinet-door{position:relative;min-height:260px;background:var(--charcoal);border:1px solid rgba(225,231,221,.14);border-radius:8px 8px 0 0;}
.cabinet-door .handle{position:absolute;top:42%;width:4px;height:50px;background:var(--butter);border-radius:2px;}
.cabinet-door.left .handle{right:14px;}
.cabinet-door.right .handle{left:14px;}
.cabinet-door.center{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;padding:26px;gap:14px;
}
.cabinet-door.center h2{color:var(--grey-green);font-size:clamp(22px,3vw,30px);}
.cabinet-door.center p{color:var(--pistachio);font-size:15px;}
.kickplate{max-width:var(--container);margin:0 auto;height:26px;background:var(--charcoal);border-top:2px solid rgba(225,231,221,.18);}
@media (max-width:860px){
	.cabinet{grid-template-columns:1fr;padding-top:44px;}
	.cabinet-door{min-height:auto;padding:20px 0;}
	.cabinet-door.left .handle,.cabinet-door.right .handle{display:none;}
}

/* 푸터 */
.site-footer{background:var(--grey-green);border-top:4px solid var(--charcoal);padding:36px 0 26px;}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;font-size:14px;color:var(--graphite);}
.footer-biz p{margin:2px 0;}
.footer-biz strong{color:var(--charcoal);}
.footer-sitemap a{color:var(--charcoal);}

/* 상세 페이지 공용 */
.page-hero{padding:52px 0 40px;}
.page-hero h1{font-size:clamp(26px,4vw,38px);}
.related-links{padding:52px 0;}
.related-links ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px;}
.related-links a{
	display:inline-block;padding:10px 18px;border:1px solid rgba(48,55,53,.25);
	border-radius:999px;text-decoration:none;font-size:14px;
}
.related-links a:hover{border-color:var(--sage);}
.check-list{display:flex;flex-direction:column;gap:10px;margin:20px 0;}
.check-list li{list-style:none;position:relative;padding-left:20px;font-size:15px;}
.check-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--sage);border-radius:2px;}

/* 사이트맵 페이지 */
.sitemap-page{padding:60px 0 80px;}
.sitemap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px;}
.sitemap-grid a{
	display:block;padding:20px 22px;border:1px solid rgba(48,55,53,.2);border-radius:12px;
	text-decoration:none;font-weight:600;background:rgba(255,255,255,.18);
}
.sitemap-grid a:hover{border-color:var(--sage);}
@media (max-width:600px){.sitemap-grid{grid-template-columns:1fr;}}

@media (prefers-reduced-motion: reduce){
	*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}