:root{--ink:#13130A;--yellow:#FEEB8F;--accent:#3D4F5D;--soft:#E6EAED;--line:#E5E5E5;--bg1:#FAF7EE;--bg2:#F3F3F1;--bg3:#F4F8FC}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body,p,li,h1,h2,h3,h4,a,button,.card,footer,nav,td,th{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
body{font-family:"Inter","Pretendard",-apple-system,"Noto Sans KR",sans-serif;color:var(--ink);background:#fff;line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.ic{flex:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:860px}
.eyebrow{font-size:13px;letter-spacing:.14em;font-weight:600;color:var(--accent);margin-bottom:10px}

/* 탑: 흰 배경 + 검정 글, 중앙 로고, 하단 1px 선 */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #000}
.hd-in{max-width:1200px;margin:0 auto;padding:0 24px;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hd nav{display:flex;gap:30px;font-size:15px;font-weight:500}
.hd nav.r{justify-content:flex-end;align-items:center}
.hd a{text-decoration:none;white-space:nowrap}
.hd nav a:hover{color:var(--accent)}
.logo{font-size:22px;font-weight:700;letter-spacing:-.02em}
.hd .cta{background:var(--accent);color:#fff;padding:9px 20px}
.hd .cta:hover{color:#fff;opacity:.88}

/* 히어로: 밝은 실사 위 큰 검정 타이포, 암막 없음 */
.hero{position:relative;min-height:700px;background-size:cover;background-position:center bottom;display:flex;align-items:flex-start}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,0) 68%)}
.hero-in{position:relative;max-width:1200px;margin:0 auto;padding:96px 24px 0;width:100%}
.hero h1{font-size:clamp(44px,6.4vw,84px);line-height:1.1;font-weight:700;letter-spacing:-.035em;margin-bottom:22px;white-space:nowrap}
.hero .lead{max-width:640px;font-size:18px;font-weight:500;color:#13130A}
.hero-btn{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn,.btn-o,.btn-w{display:inline-block;padding:13px 30px;font-size:15px;font-weight:600;text-decoration:none;border:1px solid var(--ink);cursor:pointer;font-family:inherit;background:none;color:var(--ink)}
.btn{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-o:hover{background:var(--ink);color:#fff}
.btn:hover{opacity:.88}
.btn-w{border:1px solid #fff;color:#fff;border-radius:0;padding:14px 44px}
.btn-w:hover{background:#fff;color:#000}

/* 섹션 */
.sec{padding:96px 0}
.bg1{background:var(--bg1)}.bg2{background:var(--bg2)}.bg3{background:var(--bg3)}
.st{font-size:clamp(26px,3.1vw,38px);line-height:1.3;font-weight:700;letter-spacing:-.03em;margin-bottom:12px}
.sd{color:#555;margin-bottom:40px}
.mid{text-align:center;margin-top:40px}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}
.g3.wide{max-width:1280px;margin:0 auto}
.card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);transition:border-color .2s}
.card:hover{border-color:#000}
.card[hidden]{display:none}
.thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:#eee}
.thumb img{width:100%;height:100%;object-fit:cover}
.badge{display:inline-flex;align-items:center;gap:6px;margin:18px 20px 0;font-size:12px;letter-spacing:.1em;font-weight:600;color:var(--accent)}
.badge .ic{width:22px;height:22px}
.card strong{display:block;margin:6px 20px 0;font-size:20px;line-height:1.4;font-weight:700;letter-spacing:-.02em}
.card em{display:block;margin:6px 20px 0;font-style:normal;font-size:14.5px;color:#555;line-height:1.6}
.card .more{display:inline-flex;gap:6px;align-items:center;margin:14px 20px 22px;font-size:14px;font-weight:600;color:var(--accent)}
.card .more svg{width:16px;height:16px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sp-t p{margin-bottom:14px;color:#333}
.sp-t .btn-o{margin-top:10px}
.sp-i img{width:100%;aspect-ratio:4/3;object-fit:cover}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s;margin-top:36px}
.steps li{background:#fff;border:1px solid var(--line);padding:28px 24px;display:flex;flex-direction:column;gap:8px;color:var(--accent)}
.steps strong{color:var(--ink);font-size:18px}
.steps span{color:#444;font-size:14.5px;line-height:1.7}

/* 본문 문서 */
.doc{padding-top:36px;padding-bottom:80px;max-width:980px}
.crumb{font-size:13px;color:#777;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.crumb a{text-decoration:none;color:#555}.crumb a:hover{color:var(--accent)}.crumb b{font-weight:500;color:#111}
.dh h1{font-size:clamp(30px,4vw,46px);line-height:1.25;font-weight:700;letter-spacing:-.035em;margin-bottom:18px}
.dh .lead{font-size:18px;font-weight:500;color:#222;margin-bottom:32px}
.doc section{margin-top:56px}
.doc h2{font-size:clamp(21px,2.4vw,27px);line-height:1.4;font-weight:700;letter-spacing:-.03em;margin-bottom:16px}
.doc h3{font-size:18px;margin:22px 0 8px;line-height:1.5}
.doc p{margin-bottom:14px;color:#2a2a2a}
.doc ul{margin:10px 0 14px 20px}
.doc li{margin-bottom:6px;color:#2a2a2a}
.inl{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-left:0!important}
.inl a{display:inline-block;border:1px solid var(--line);padding:8px 16px;text-decoration:none;font-size:14.5px}
.inl a:hover{border-color:#000}
.doc .grid .card strong{font-size:18px}
.gal{display:grid;gap:10px;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;margin:0}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.gal img:first-child{grid-row:1/3;aspect-ratio:auto;min-height:360px}
.gal.n1,.gal.n2{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}
.gal.n1{grid-template-columns:1fr}
.gal.n1 img:first-child,.gal.n2 img:first-child{grid-row:auto;aspect-ratio:4/3}
.gal.n4,.gal.n5,.gal.n6{grid-template-columns:repeat(3,1fr);grid-template-rows:auto}
.gal.n4 img:first-child,.gal.n5 img:first-child,.gal.n6 img:first-child{grid-row:auto;grid-column:1/3;min-height:0;aspect-ratio:auto;height:100%}
.gal figcaption{grid-column:1/-1;font-size:13px;color:#777}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
caption{text-align:left;font-size:13px;color:#777;padding-bottom:8px}
th,td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.65}
thead th{background:var(--bg2)}
tbody th{background:var(--bg2);white-space:nowrap}
.faq h3{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}
.faq h3:first-of-type{border-top:0;margin-top:0;padding-top:0}
.sec .faq{margin-top:0}

/* Closing */
.closing{background-size:cover;background-position:center;position:relative;min-height:650px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.closing::before{content:"";position:absolute;inset:0;background:rgba(19,19,19,.55)}
.cl-in{position:relative;padding:0 24px}
.cl-in h2{font-size:var(--fs,34px);font-weight:700;letter-spacing:-.03em;line-height:1.35;white-space:nowrap;margin-bottom:18px}
.cl-in p{margin-bottom:34px;font-size:17px;color:#fff}

/* 푸터: 검정 */
.ft{background:#000;color:#ddd;padding:64px 0 90px;font-size:14px}
.ft-in{max-width:1200px;margin:0 auto;padding:0 24px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.fb strong{display:block;font-size:22px;color:#fff;margin-bottom:6px}
.fcols h4{color:#fff;font-size:14px;margin-bottom:12px}
.fcols a{display:block;text-decoration:none;color:#bbb;padding:3px 0}
.fcols a:hover{color:#fff}
.biz{font-style:normal;display:flex;flex-wrap:wrap;gap:4px 18px;color:#aaa;border-top:1px solid #333;padding-top:24px;line-height:1.8}
.biz a{color:#ccc}
.cp{margin-top:16px;color:#777}
.float{position:fixed;right:22px;bottom:22px;z-index:60;background:var(--yellow);color:var(--ink);font-weight:700;text-decoration:none;padding:15px 26px;border-radius:40px;box-shadow:0 4px 16px rgba(0,0,0,.18);font-size:15px}

/* 라이트박스 */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lb img{max-width:92vw;max-height:90vh;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:44px;cursor:pointer;padding:12px 20px;line-height:1}
.lb-p{left:8px}.lb-n{right:8px}.lb-x{top:8px;right:12px}
.lb.one .lb-p,.lb.one .lb-n{display:none}

@media(min-width:768px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .doc h2,.st{white-space:nowrap}
}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){
  .hd-in{height:auto;padding:12px 16px 0;grid-template-columns:repeat(4,1fr);row-gap:8px}
  .logo{grid-column:1/-1;grid-row:1;text-align:center;font-size:20px}
  .hd nav{display:grid;grid-template-columns:1fr 1fr;gap:0;font-size:14px;text-align:center;grid-row:2;border-top:1px solid #eee}
  .hd nav.l{grid-column:1/3}.hd nav.r{grid-column:3/5}
  .hd nav a{padding:10px 2px}
  .hd .cta{padding:10px 2px}
  .wrap{padding:0 18px}
  .hero{min-height:560px}
  .hero-in{padding:56px 18px 0}
  .hero h1{font-size:clamp(34px,10.5vw,52px)}
  .hero .lead{font-size:16px}
  .sec{padding:60px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr}
  .gal,.gal.n4,.gal.n5,.gal.n6{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gal img:first-child{grid-column:1/-1;grid-row:auto;min-height:0;aspect-ratio:4/3;height:auto}
  .doc h2,.st{font-size:22px}
  .cl-in h2{white-space:normal;font-size:clamp(19px,5.4vw,24px)}
  .closing{min-height:520px}
  .fcols{grid-template-columns:1fr 1fr;gap:28px 20px}
  .fb{grid-column:1/-1}
  .float{right:14px;bottom:14px;padding:13px 22px}
}
.hero .btn-o{background:#fff}
.hero .btn-o:hover{background:var(--ink)}
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split .st{white-space:normal;font-size:clamp(24px,2.6vw,32px)}
@media(max-width:767px){.split{grid-template-columns:1fr}}
@media(min-width:768px){
  .gal{grid-template-rows:240px 240px}
  .gal img:first-child{min-height:0}
  .gal.n1,.gal.n2,.gal.n4,.gal.n5,.gal.n6{grid-template-rows:none;grid-auto-rows:260px}
  .gal.n1 img:first-child,.gal.n2 img:first-child{aspect-ratio:auto}
  .doc .g4 .thumb{aspect-ratio:16/9}
}