/*
Theme Name: YK Fold
Description: 접이식슬라이딩도어 전용 테마
Version: 1.0
*/
:root{
  --black:#000; --ink:#111; --white:#fff; --sand:#e6e3d9; --accent:#9b8e68;
  --muted:#5b5b57; --line:#d6d2c6; --line-d:rgba(255,255,255,.28);
  --max:1280px; --gut:clamp(20px,4.2vw,56px); --hh:96px;
  --sec:clamp(72px,9vw,128px);
  --font:"Helvetica Neue","Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.75;color:var(--ink);background:var(--white);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;line-height:1.3;letter-spacing:.01em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--white);color:var(--black);padding:10px 16px;z-index:200}
.skip:focus{left:0}
.wrap{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0}
.bg-black{background:var(--black);color:var(--white)}
.bg-sand{background:var(--sand)}
.eyebrow{font-size:14px;letter-spacing:.08em;color:var(--muted);margin-bottom:20px}
.bg-black .eyebrow{color:#a9a69b}
h2{font-size:clamp(26px,3vw,36px);font-weight:300}
h3{font-size:18px;font-weight:500}
.lead{font-size:18px;line-height:1.8;max-width:760px}

/* header */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hh);color:var(--white);background:var(--black);border-bottom:1px solid var(--line-d);transition:background .3s}
.hd.is-clear{background:transparent}
.hd.is-clear.is-solid,.hd.is-open{background:var(--black)}
.hd .in{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);gap:24px}
.logo{display:flex;align-items:center;gap:0;text-decoration:none;height:48px}
.logo .sym{padding:0 16px 0 0;border-left:1px solid var(--line-d);padding-left:16px;display:flex}
.logo .nm{font-size:15px;letter-spacing:.14em;padding:0 20px 0 0;border-right:1px solid var(--line-d);height:48px;display:flex;align-items:center;font-weight:400}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px)}
.nav a{font-size:14px;text-decoration:none;letter-spacing:.04em;padding:8px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--white)}
.nav a.cta{border:1px solid var(--white);padding:10px 20px;margin-left:8px}
.nav a.cta:hover{background:var(--white);color:var(--black)}
.burger{display:none;width:44px;height:44px;background:none;border:0;color:inherit;cursor:pointer;position:relative}
.burger i{position:absolute;left:8px;right:8px;height:1px;background:currentColor;transition:transform .25s,top .25s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:27px}
.hd.is-open .burger i:nth-child(1){top:21px;transform:rotate(45deg)}
.hd.is-open .burger i:nth-child(2){top:21px;transform:rotate(-45deg)}
main{display:block}
body.sub main{padding-top:var(--hh)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.03em;text-decoration:none;padding:17px 30px;border:1px solid var(--accent);background:var(--accent);color:var(--black);transition:background .2s,color .2s,border-color .2s;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.bg-black .btn:hover,.hero .btn:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.btn.ghost{background:transparent;border-color:var(--white);color:var(--white)}
.btn.ghost:hover{background:var(--white);color:var(--black)}
.btn.dark{background:var(--black);border-color:var(--black);color:var(--white)}
.btn.dark:hover{background:var(--accent);border-color:var(--accent);color:var(--black)}
.arrow::after{content:"→";font-size:1.05em}
.tlink{display:inline-flex;gap:10px;font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.tlink::after{content:"→"}

/* hero (home) */
.hero{position:relative;height:100svh;min-height:600px;max-height:980px;color:var(--white);background:var(--black);overflow:hidden}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 52%,rgba(0,0,0,.62) 100%)}
.hero .txt{position:absolute;z-index:2;left:0;right:0;bottom:clamp(40px,7vh,84px)}
.hero h1{font-size:clamp(38px,5.2vw,64px);font-weight:300;letter-spacing:.02em;line-height:1.2;margin-bottom:18px}
.hero p{font-size:17px;max-width:560px;margin-bottom:28px;color:#f1efe8}
.hero .acts{display:flex;flex-wrap:wrap;gap:16px}

/* intro */
.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,96px);align-items:start}
.intro .lead{margin-bottom:28px}

/* types list (black) */
.types{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,6vw,96px);align-items:start}
.trow{display:block;text-decoration:none;border-top:1px solid var(--line-d);padding:26px 56px 26px 0;position:relative}
.trow:last-child{border-bottom:1px solid var(--line-d)}
.trow h3{font-size:20px;font-weight:400;margin-bottom:8px}
.trow p{font-size:15px;color:#c9c6bb;margin:0;max-width:520px}
.trow::after{content:"→";position:absolute;right:6px;top:26px;width:34px;height:34px;border:1px solid var(--line-d);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .2s,color .2s}
.trow:hover::after,.trow:focus-visible::after{background:var(--white);color:var(--black)}
.types .pic{position:sticky;top:calc(var(--hh) + 24px);aspect-ratio:4/3;overflow:hidden;background:#111}
.types .pic img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}

/* case showcase */
.cs-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.cs-feature{display:block;text-decoration:none;position:relative;margin-bottom:clamp(24px,3vw,40px)}
.cs-feature img{width:100%;aspect-ratio:21/9;object-fit:cover}
.cs-cap{display:flex;justify-content:space-between;gap:20px;padding-top:16px;font-size:15px;align-items:baseline}
.cs-cap strong{font-weight:400;font-size:18px}
.cs-cap span{color:var(--muted);font-size:14px}
.cs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.cs-grid a{text-decoration:none;display:block}
.cs-grid .a{grid-column:span 7}.cs-grid .b{grid-column:span 5}
.cs-grid .c{grid-column:span 5}.cs-grid .d{grid-column:span 7}
.cs-grid .a img,.cs-grid .d img{aspect-ratio:3/2}
.cs-grid .b img,.cs-grid .c img{aspect-ratio:4/5}
.cs-grid img{width:100%;object-fit:cover}
.cs-more{text-align:center;margin-top:56px}
.cs a:hover strong{text-decoration:underline;text-underline-offset:4px}

/* checks */
.checks{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,96px)}
.chk{border-top:1px solid var(--line);padding:24px 0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px}
.chk:last-child{border-bottom:1px solid var(--line)}
.chk h3{font-size:18px}
.chk p{margin:0;font-size:16px;color:var(--muted)}

/* faq */
.faq{max-width:900px}
details.q{border-top:1px solid var(--line)}
details.q:last-child{border-bottom:1px solid var(--line)}
.bg-black details.q{border-color:var(--line-d)}
details.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:17px;line-height:1.5}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";flex:none;width:32px;height:32px;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;opacity:.8}
details.q[open] summary::after{content:"−"}
details.q .ans{padding:0 56px 26px 0;font-size:16px;color:var(--muted)}
.bg-black details.q .ans{color:#c9c6bb}
.ans p{margin:0}

/* closing CTA */
.cta-band{position:relative;color:var(--white);text-align:center;overflow:hidden;background:#000}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.cta-band .in{position:relative;padding:clamp(80px,12vw,150px) var(--gut)}
.cta-band h2{margin-bottom:16px}
.cta-band p{margin:0 auto 28px;max-width:560px;color:#eceae2}

/* footer */
.ft{background:var(--black);color:var(--white);padding:72px 0 0;font-size:14px;line-height:1.9}
.ft .top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;padding-bottom:56px}
.ft .brand{display:flex;gap:16px;align-items:flex-start}
.ft .brand b{display:block;font-weight:400;font-size:16px;letter-spacing:.1em;margin-bottom:10px}
.ft .info{color:#bdbaaf}
.ft .info a{text-decoration:none}
.ft nav{display:flex;flex-wrap:wrap;gap:6px 32px;justify-content:flex-end;align-content:flex-start}
.ft nav a{text-decoration:none;padding:4px 0;color:#ddd9cd}
.ft nav a:hover{color:var(--white);text-decoration:underline}
.ft .bot{border-top:1px solid var(--line-d);padding:22px 0 28px;color:#9a978c;font-size:14px}

/* sub pages */
.phero{position:relative;background:var(--black)}
.phero img{width:100%;height:clamp(260px,46vw,560px);object-fit:cover}
.ptitle{padding:clamp(40px,5vw,64px) 0 clamp(24px,3vw,40px)}
.crumb{font-size:14px;color:var(--muted);margin-bottom:22px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.crumb span{margin:0 8px;opacity:.6}
.ptitle h1{font-size:clamp(30px,4.2vw,52px);font-weight:300;margin-bottom:22px;line-height:1.25}
.meta-line{font-size:14px;color:var(--muted);margin-top:18px}

table.tbl{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 0}
.tbl th,.tbl td{text-align:left;padding:16px 18px 16px 0;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:1px solid var(--line)}
.tbl th{font-weight:500;width:22%;white-space:nowrap}
.tbl thead th{font-size:14px;color:var(--muted);font-weight:400}
.tblw{overflow-x:auto}

.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,96px);align-items:start}
.two.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.two img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ol{counter-reset:s}
.ol li{counter-increment:s;border-top:1px solid var(--line);padding:20px 0 20px 56px;position:relative}
.ol li:last-child{border-bottom:1px solid var(--line)}
.ol li::before{content:counter(s);position:absolute;left:0;top:20px;width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}
.ol b{display:block;font-weight:500}
.ol span{color:var(--muted);font-size:15px}

.dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:8px}
.dl div{padding:18px 18px 18px 0}
.dl dt{font-size:14px;color:var(--muted)}
.dl dd{margin:0;font-size:17px}

.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.gal figure{margin:0}
.gal img{width:100%;height:auto;object-fit:cover}
.gal .w{grid-column:span 12}.gal .h{grid-column:span 6}.gal .p{grid-column:span 4}
.gal .w img{aspect-ratio:16/9}.gal .h img{aspect-ratio:4/3}.gal .p img{aspect-ratio:3/4}
.gal figcaption{font-size:14px;color:var(--muted);padding-top:8px;line-height:1.5}
.facts li{border-top:1px solid var(--line);padding:14px 0;font-size:16px}
.facts li:last-child{border-bottom:1px solid var(--line)}

.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px)}
.gc{text-decoration:none;display:block}
.gc img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .25s}
.gc:hover img{opacity:.88}
.gc .cap{display:flex;justify-content:space-between;gap:12px;padding-top:14px;align-items:baseline}
.gc strong{font-weight:400;font-size:17px;line-height:1.4}
.gc .cap::after{content:"→";flex:none}
.gc small{display:block;color:var(--muted);font-size:14px;line-height:1.5;margin-top:4px}
.back{margin-top:56px}

.tsec{padding:48px 0;border-top:1px solid var(--line)}
.tsec .imgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.tsec .imgs a img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tsec .imgs a{display:block;text-decoration:none;font-size:14px}
.tsec .imgs span{display:block;padding-top:8px;line-height:1.5}

.cbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.cb{border:1px solid var(--ink);padding:clamp(28px,3.4vw,48px)}
.cb h2{font-size:24px;margin-bottom:10px}
.cb .num{font-size:22px;letter-spacing:.04em;margin:14px 0 24px}
.cb p{color:var(--muted);font-size:16px}

.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:1000px){
  :root{--hh:72px}
  .burger{display:block}
  .nav{position:fixed;top:var(--hh);left:0;right:0;bottom:0;background:var(--black);flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gut) 40px;display:none;overflow:auto}
  .hd.is-open .nav{display:flex}
  .nav a{font-size:18px;padding:20px 0;border-bottom:1px solid var(--line-d)}
  .nav a.cta{margin:24px 0 0;text-align:center;border:1px solid var(--white)}
  .logo .nm{padding-right:14px;font-size:14px}
  .intro,.types,.checks,.two,.two.rev{grid-template-columns:minmax(0,1fr)}
  .types .pic{display:none}
  .cs-feature img{aspect-ratio:16/9}
  .chk{grid-template-columns:minmax(0,1fr);gap:6px}
  .ft .top{grid-template-columns:minmax(0,1fr);gap:36px}
  .ft nav{justify-content:flex-start}
  .dl{grid-template-columns:minmax(0,1fr)}
  .dl div{padding:14px 0;border-top:1px solid var(--line)}
  .dl div:first-child{border-top:0}
  .gal .p{grid-column:span 6}
}
@media (max-width:760px){
  .cs-cap{flex-direction:column;gap:2px}
  .hero{height:82svh;min-height:520px}
  .hero .acts .btn{padding:15px 22px}
  .cs-grid{grid-template-columns:minmax(0,1fr)}
  .cs-grid .a,.cs-grid .b,.cs-grid .c,.cs-grid .d{grid-column:auto}
  .cs-grid .b img,.cs-grid .c img{aspect-ratio:3/2}
  .grid3{grid-template-columns:minmax(0,1fr)}
  .cbox{grid-template-columns:minmax(0,1fr)}
  .tsec .imgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tsec .imgs a:last-child:nth-child(odd){grid-column:span 2}
  .gal .h,.gal .p{grid-column:span 12}
  .gal .p img{aspect-ratio:4/3}
  .tbl th{white-space:normal;width:30%}
  .ft nav{justify-content:flex-start;flex-direction:column;gap:2px}
  details.q summary{font-size:16px}
  details.q .ans{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}