@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:url(../fonts/Pretendard-Regular.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:500;font-display:swap;src:url(../fonts/Pretendard-Medium.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:600;font-display:swap;src:url(../fonts/Pretendard-SemiBold.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:700;font-display:swap;src:url(../fonts/Pretendard-Bold.woff2) format("woff2")}
:root{--ink:#1d2321;--sub:#4b5753;--mute:#7a8681;--bg:#fbfaf7;--alt:#f1eee7;--line:#e2ded3;--pri:#1c4e97;--pri-d:#143a72;--acc:#c8552b;--card:#fff;--r:20px;--w:1120px;--hd:64px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Pretendard,-apple-system,"Malgun Gothic",sans-serif;color:var(--ink);background:var(--bg);line-height:1.8;font-size:17px;word-break:keep-all;overflow-wrap:break-word;padding-top:var(--hd)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:var(--pri);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 28px}
.narrow{max-width:820px}
.center{text-align:center}

/* header */
.hd{position:fixed;top:0;left:0;right:0;height:var(--hd);z-index:100;background:rgba(251,250,247,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.hd.on{border-color:var(--line);box-shadow:0 4px 18px rgba(20,30,28,.06)}
.hd-in{max-width:none;margin:0;height:100%;padding:0 clamp(20px,3.4vw,56px);display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center}
.logo img{height:46px;width:auto;border-radius:8px}
.hd-act{display:flex;align-items:center;gap:10px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:#fff;font-weight:700;border-radius:999px;padding:12px 22px;font-size:16px;border:2px solid var(--acc);transition:transform .25s,background .25s,box-shadow .25s;cursor:pointer;line-height:1.3}
.btn:hover{background:#ae431c;border-color:#ae431c;transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,85,43,.28)}
.btn-sm{padding:9px 18px;font-size:15px}
.btn-lg{padding:16px 30px;font-size:18px}
.btn-line{background:transparent;color:var(--pri);border-color:var(--pri)}
.btn-line:hover{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 10px 24px rgba(28,78,151,.22)}

/* hero */
.hero{padding:48px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.crumb{display:flex;gap:8px;font-size:14px;color:var(--mute);margin-bottom:18px;flex-wrap:wrap}
.crumb a:hover{color:var(--pri)}
h1{font-size:clamp(38px,5.2vw,60px);line-height:1.15;letter-spacing:-.04em;font-weight:700;color:var(--pri-d);margin-bottom:22px}
.lead{font-size:19px;line-height:1.85;color:var(--sub)}
.lead strong{color:var(--ink);font-weight:700;background:linear-gradient(transparent 62%,rgba(200,85,43,.22) 62%)}
.hero-act{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:30px}
.hero-note{font-size:15px;color:var(--mute);font-weight:500}
.mod{margin-top:22px;font-size:14px;color:var(--mute)}
.hero-fig{border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(20,40,36,.16);aspect-ratio:4/3;background:var(--alt)}
.hero-fig img{width:100%;height:100%;object-fit:cover}
.hero-home{padding-top:56px}
.hero-home h1{font-size:clamp(46px,7vw,84px)}

/* sections */
.sec{padding:88px 0}
.sec-alt{background:var(--alt)}
.sec-h{font-size:clamp(26px,3.4vw,38px);line-height:1.35;letter-spacing:-.03em;margin-bottom:20px;font-weight:700}
.sec-p{color:var(--sub);margin-bottom:28px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .fig{order:2}
.fig{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:0 16px 44px rgba(20,40,36,.12);background:var(--alt)}
.fig img{width:100%;height:100%;object-fit:cover}
.txt h2{font-size:clamp(25px,3vw,34px);line-height:1.35;letter-spacing:-.03em;margin-bottom:18px;font-weight:700}
.txt p,.narrow p{margin-bottom:14px;color:var(--sub)}
.list{margin:6px 0 4px;display:grid;gap:10px}
.list li{position:relative;padding:14px 18px 14px 44px;background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.list li::before{content:"";position:absolute;left:18px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--pri)}
.list-num{counter-reset:n}
.list-num li{counter-increment:n}
.list-num li::before{content:counter(n);width:22px;height:22px;margin-top:-11px;left:12px;background:var(--pri);color:#fff;font-size:13px;font-weight:700;text-align:center;line-height:22px}
.sec-alt .list li{background:#fff}

/* steps */
.steps{display:grid;gap:18px}
.step{display:grid;grid-template-columns:52px 1fr 240px;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,40,36,.09)}
.step:not(:has(figure)){grid-template-columns:52px 1fr}
.step-no{width:44px;height:44px;border-radius:50%;background:var(--pri);color:#fff;font-weight:700;display:grid;place-items:center;font-size:18px}
.step-opt .step-no{background:var(--acc)}
.step-b strong{display:block;font-size:20px;letter-spacing:-.02em;margin-bottom:4px}
.step-b p{color:var(--sub);font-size:16px;line-height:1.7;margin:0}
.step figure{border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.step figure img{width:100%;height:100%;object-fit:cover}

/* table */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.tbl{width:100%;border-collapse:collapse;min-width:520px;font-size:16px}
.tbl caption{text-align:left;padding:16px 20px;font-weight:700;background:var(--alt);caption-side:top}
.tbl th,.tbl td{padding:16px 20px;text-align:left;border-top:1px solid var(--line);vertical-align:top;line-height:1.6}
.tbl thead th{background:var(--pri);color:#fff;border-top:0;font-weight:600}
.tbl tbody th{font-weight:700;white-space:nowrap}
.tbl td a{color:var(--pri);font-weight:700;text-decoration:underline}
.note{margin:14px 0 26px;font-size:14px;color:var(--mute)}

/* faq */
.faq{display:grid;gap:14px}
.faq-i{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq-i[open]{border-color:var(--pri);box-shadow:0 10px 28px rgba(28,78,151,.1)}
.faq-i summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 24px}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i h3{font-size:18px;line-height:1.5;letter-spacing:-.02em;display:flex;gap:12px;align-items:flex-start;margin:0}
.faq-ic{flex:none;position:relative;width:32px;height:32px;border-radius:50%;background:var(--alt);transition:background .3s,transform .3s}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:9px;top:15px;width:14px;height:2px;background:var(--ink);transition:transform .3s,background .3s}
.faq-ic::after{transform:rotate(90deg)}
.faq-i[open] .faq-ic{background:var(--pri)}
.faq-i[open] .faq-ic::before,.faq-i[open] .faq-ic::after{background:#fff}
.faq-i[open] .faq-ic::after{transform:rotate(0)}
.faq-a{display:flex;gap:12px;padding:0 24px 24px;color:var(--sub);font-size:16.5px;animation:faqIn .35s ease}
.faq-a p{margin:0}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.q,.a{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;color:#fff}
.q{background:var(--pri)}.a{background:var(--acc)}

/* related */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:28px 0}
.card{display:flex;flex-direction:column;gap:8px;height:100%;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,40,36,.1);border-color:var(--pri)}
.card-no{font-size:13px;font-weight:700;color:var(--acc);letter-spacing:.08em}
.card strong{font-size:21px;letter-spacing:-.02em}
.card-d{font-size:15px;color:var(--sub);line-height:1.6;flex:1}
.card-more{font-size:14px;font-weight:700;color:var(--pri)}
.card-more::after{content:" \2192"}
.banners{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.banner{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;display:block}
.banner img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.banner:hover img{transform:scale(1.05)}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(10,30,28,.82))}
.banner-t{position:absolute;left:24px;bottom:20px;z-index:2;color:#fff;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.banner-t small{display:block;font-size:13px;font-weight:600;opacity:.85;margin-bottom:2px}

/* footer */
.ft{background:#16201e;color:#c4cdc9;padding:56px 0 130px;margin-top:0}
.ft-brand{font-size:22px;font-weight:700;color:#fff;margin-bottom:16px}
.ft-info{font-style:normal;display:grid;gap:4px;font-size:15px;line-height:1.7}
.ft-info .sep{margin:0 8px;opacity:.4}
.ft-copy{margin-top:22px;font-size:13px;color:#8a9894}

/* floating / bar */
.cta-bar{display:none}
.float-home{position:fixed;right:20px;bottom:24px;z-index:90;background:var(--pri);color:#fff;font-weight:700;font-size:15px;padding:13px 20px;border-radius:999px;box-shadow:0 10px 28px rgba(28,78,151,.35);transition:transform .25s,background .25s}
.float-home:hover{background:var(--pri-d);transform:translateY(-3px)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}*{transition:none!important}}

@media (max-width:960px){
  .hero-grid,.split{grid-template-columns:1fr;gap:28px}
  .split.rev .fig{order:0}
  .step{grid-template-columns:44px 1fr}
  .step figure{grid-column:1/-1}
}
@media (max-width:768px){
  :root{--hd:58px}
  body{font-size:16px;padding-bottom:74px}
  .wrap{padding:0 20px}.hd-in{padding:0 20px}
  .hero{padding:24px 0 48px}
  .hero-grid{gap:24px}
  .hero-fig{order:-1;margin:0 -20px;border-radius:0;box-shadow:none;aspect-ratio:4/3}
  .hero-txt{padding-top:4px}
  h1{font-size:40px}
  .hero-home h1{font-size:46px}
  .lead{font-size:17px}
  .hero-act .btn{width:100%}
  .hero-note{width:100%;text-align:center}
  .sec{padding:56px 0}
  .fig{margin:0 -20px;border-radius:0;box-shadow:none}
  .sec-h{font-size:26px}
  .txt h2{font-size:25px}
  .step{padding:16px;gap:14px}
  .step-b strong{font-size:18px}
  .faq-i summary{padding:18px 16px}.faq-a{padding:0 16px 20px}
  .faq-i h3{font-size:17px}
  .banners{grid-template-columns:1fr}
  .banner{margin:0 -20px;border-radius:0}
  .cards{grid-template-columns:1fr;margin:20px 0}
  .btn-sm{padding:8px 14px;font-size:14px}
  .logo img{height:40px}
  .ft{padding-bottom:140px}
  .cta-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:95;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(251,250,247,.97);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(20,30,28,.08)}
  .cta-bar a{display:grid;place-items:center;height:50px;border-radius:14px;font-weight:700;font-size:17px}
  .cta-bar-a{background:var(--acc);color:#fff}
  .cta-bar-b{background:var(--pri);color:#fff}
  .float-home{bottom:88px;right:14px;padding:11px 16px;font-size:14px}
  body.contact{padding-bottom:0}
  body.contact .float-home{bottom:20px}
  body.contact .ft{padding-bottom:120px}
}

/* photo cards */
.pcards{display:grid;gap:18px;margin:28px 0 0}
.pcards-4{grid-template-columns:repeat(4,1fr)}
.pcards-6{grid-template-columns:repeat(3,1fr)}
.pcards-5{grid-template-columns:repeat(6,1fr)}
.pcards-5 li{grid-column:span 2}
.pcards-5 li:nth-child(n+4){grid-column:span 3}
.pcard{position:relative;display:block;height:100%;min-height:300px;border-radius:var(--r);overflow:hidden;background:#16201e;isolation:isolate;transition:transform .35s,box-shadow .35s}
.pcards-5 li:nth-child(n+4) .pcard{min-height:340px}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s}
.pcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(8,24,22,.05) 25%,rgba(8,24,22,.88))}
.pcard:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(20,40,36,.22)}
.pcard:hover img{transform:scale(1.06)}
.pcard-b{position:absolute;left:0;right:0;bottom:0;padding:24px;color:#fff;display:flex;flex-direction:column;gap:6px}
.pcard-b small{font-size:13px;font-weight:700;letter-spacing:.1em;color:#ffc9b3}
.pcard-b strong{font-size:23px;letter-spacing:-.02em;line-height:1.3}
.pcard-d{font-size:14.5px;line-height:1.55;opacity:.92}
.pcard-b em{font-style:normal;font-size:14px;font-weight:700;margin-top:4px}
.pcard-b em::after{content:" \2192"}
@media (max-width:960px){.pcards-4,.pcards-6{grid-template-columns:repeat(2,1fr)}.pcards-5{grid-template-columns:repeat(2,1fr)}.pcards-5 li,.pcards-5 li:nth-child(n+4){grid-column:auto}.pcards-5 li:last-child{grid-column:1/-1}}
@media (max-width:768px){.pcards{grid-template-columns:1fr!important;gap:12px;margin:20px -20px 0}.pcards li{grid-column:auto!important}.pcard,.pcards-5 li:nth-child(n+4) .pcard{min-height:240px;border-radius:0}.pcard-b{padding:22px 20px}}
@media (max-width:768px){.table-wrap{margin:0 -20px;border-radius:0;border-left:0;border-right:0}.tbl{min-width:0;font-size:14.5px}.tbl th,.tbl td{padding:12px 10px}.tbl caption{padding:14px 10px}.tbl tbody th{white-space:normal}}

.bul{display:grid;gap:12px;margin:4px 0 6px}
.bul li{position:relative;padding-left:26px;color:var(--sub);line-height:1.75}
.bul li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;border-radius:50%;background:var(--pri)}
.bul li:nth-child(even)::before{background:var(--acc)}
.sec-h+.bul{margin-bottom:28px}

/* 좌우 균형: 좁은 섹션도 동일한 1120px 기준선, 소제목(좌) + 내용(우) 2열 */
@media (min-width:961px){
  .wrap.narrow{max-width:var(--w)}
  .wrap.narrow:has(> .sec-h){display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);column-gap:72px;align-items:start}
  .wrap.narrow > .sec-h{grid-column:1;grid-row:1 / span 8;position:sticky;top:96px;margin:0}
  .wrap.narrow > :not(.sec-h){grid-column:2}
  .wrap.narrow > .center,.wrap.narrow > p.center{text-align:center}
  .hero-grid{grid-template-columns:1fr 1fr;gap:72px}
  .split{gap:72px}
}
.wrap.narrow.center{text-align:center}

/* 줄바꿈/띄어쓰기 */
h1,h2,h3,.card strong,.pcard-b strong,.menu li a{text-wrap:balance}
p,li,td,th,.lead,.faq-q,.pcard-d,.card-d{text-wrap:pretty}
.lead,.bul li,.faq-a p,.step-b p{word-break:keep-all;line-break:strict}
.tbl td,.tbl th{word-break:keep-all}
@media (max-width:768px){.tbl td,.tbl th{hyphens:none}.lead{line-height:1.8}}

/* 태블릿(769~960px) 사진 크기 보정 */
@media (min-width:769px) and (max-width:960px){
  .fig,.hero-fig{aspect-ratio:16/9}
  .hero-grid,.split{gap:32px}
  .step{grid-template-columns:44px 1fr 210px}
  .step figure{grid-column:auto}
  .step:not(:has(figure)){grid-template-columns:44px 1fr}
  .pcard{min-height:260px}
}
@media (max-width:768px){.step figure{aspect-ratio:16/10}}
@media (min-width:541px) and (max-width:768px){.hero-fig,.fig{aspect-ratio:16/10}.step figure{max-width:420px}}

/* 확장 페이지 텍스트 링크(칩) */
.chips{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.chips-t{font-size:15px;font-weight:700;color:var(--mute);margin-bottom:14px}
.chips-l{display:flex;flex-wrap:wrap;gap:10px}
.chips-l a{display:inline-block;padding:9px 18px;background:#fff;border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:15px;transition:background .25s,color .25s,border-color .25s,transform .25s}
.chips-l a:hover{background:var(--pri);border-color:var(--pri);color:#fff;transform:translateY(-2px)}