:root{
  --navy:#1c2b4a;
  --navy-deep:#101a30;
  --beige:#efe7d8;
  --beige-deep:#e2d6bd;
  --ink:#20242c;
  --muted:#5b5f6b;
  --line:#c9beA6;
  --paper:#faf8f3;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'IBM Plex Sans KR','Noto Sans KR',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.75;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

a{color:inherit;}
img{max-width:100%;height:auto;display:block;}

/* ---------- utility strip ---------- */
.util-strip{
  background:var(--navy-deep);
  color:#cfd6e6;
  font-size:.82rem;
  border-bottom:1px solid var(--beige-deep);
}
.util-inner{
  max-width:1180px;
  margin:0 auto;
  padding:9px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.crumb a{
  color:#cfd6e6;
  text-decoration:none;
  min-height:32px;
  display:inline-flex;
  align-items:center;
}
.crumb a:hover{ text-decoration:underline; }
.crumb span[aria-hidden]{
  margin:0 6px;
  color:#7c88a5;
}
.crumb span:last-child{ color:#fff; font-weight:600; }
.region-index{
  color:#8b96b3;
  letter-spacing:.02em;
}

/* ---------- split banner hero ---------- */
.split-banner{
  display:flex;
  min-height:280px;
  position:relative;
}
.band{
  flex:1 1 50%;
  display:flex;
  align-items:center;
  padding:44px 6vw;
  position:relative;
}
.band-navy{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;
  clip-path:polygon(0 0, 100% 0, 88% 100%, 0% 100%);
  padding-right:8vw;
  z-index:2;
}
.band-beige{
  background:var(--beige);
  color:var(--ink);
  margin-left:-6vw;
  padding-left:9vw;
  z-index:1;
}
.band-inner{ max-width:560px; }
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  color:#a9b6d6;
  margin:0 0 10px;
  font-weight:600;
}
.split-banner h1{
  font-family:'Noto Serif KR', serif;
  font-size:clamp(2rem,4.4vw,2.9rem);
  margin:0;
  line-height:1.25;
  letter-spacing:-.01em;
}
.band-beige .lead{
  margin:0;
  font-size:1.02rem;
  color:#333230;
  border-left:3px solid var(--navy);
  padding-left:16px;
}

/* ---------- main content ---------- */
main{
  max-width:880px;
  margin:0 auto;
  padding:48px 20px 60px;
}
.section-block{
  padding:8px 0 30px;
}
.section-block h2{
  font-family:'Noto Serif KR', serif;
  font-size:1.5rem;
  color:var(--navy);
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:3px double var(--navy);
  display:inline-block;
}
.section-block h3{
  font-size:1.08rem;
  color:var(--navy);
  margin:26px 0 8px;
}
.section-block h3:first-of-type{ margin-top:6px; }
.section-block p{
  margin:0 0 14px;
  color:var(--ink);
}
.rule{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

/* table */
.table-wrap{
  overflow-x:auto;
  margin:0 0 16px;
  border:1px solid var(--line);
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.94rem;
  min-width:480px;
}
thead tr{
  background:var(--navy);
  color:#fff;
}
th, td{
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
}
tbody tr:nth-child(even){ background:var(--beige); }
tbody tr:last-child td{ border-bottom:none; }

/* lists */
.procedure-list{
  margin:0 0 14px;
  padding-left:0;
  list-style:none;
  counter-reset:step;
}
.procedure-list li{
  counter-increment:step;
  position:relative;
  padding:10px 0 10px 44px;
  border-bottom:1px dashed var(--line);
}
.procedure-list li:last-child{ border-bottom:none; }
.procedure-list li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:8px;
  width:28px;
  height:28px;
  background:var(--navy);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
  font-weight:700;
}
.checklist{
  margin:0 0 14px;
  padding-left:0;
  list-style:none;
}
.checklist li{
  padding:9px 0 9px 30px;
  position:relative;
  border-bottom:1px dashed var(--line);
}
.checklist li:last-child{ border-bottom:none; }
.checklist li::before{
  content:"☐";
  position:absolute;
  left:0;
  color:var(--navy);
  font-size:1.1rem;
}

/* gallery */
.gallery-block h2{ display:block; }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  justify-items:center;
  margin-top:6px;
}
.gallery-grid picture{
  width:100%;
  max-width:400px;
  border:1px solid var(--line);
  background:#fff;
  padding:6px;
}
.gallery-grid img{ width:100%; height:auto; }

/* caution */
.caution-block{
  background:var(--beige);
  border-left:4px solid var(--navy);
  padding:20px 24px;
}
.caution-block h2{ border-bottom-color:var(--ink); }

/* faq */
.faq-block h3{
  cursor:default;
}

/* cta */
.cta-block{
  background:var(--navy);
  color:#fff;
  padding:32px 28px;
  text-align:center;
  border-radius:4px;
}
.cta-block h2{
  color:#fff;
  border-bottom-color:var(--beige);
}
.cta-block p{ color:#dfe4f0; }
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 28px;
  background:var(--beige);
  color:var(--navy-deep);
  font-weight:700;
  text-decoration:none;
  border-radius:3px;
  margin-top:10px;
}
.cta-btn:hover{ background:#fff; }

/* related links */
.related-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.related-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  min-height:44px;
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
  background:#fff;
}
.related-card:hover{
  border-color:var(--navy);
  background:var(--beige);
}
.related-card-title{ font-size:.92rem; }
.related-card-arrow{ color:var(--navy); }

.last-modified{
  font-size:.82rem;
  color:var(--muted);
  text-align:right;
  margin-top:10px;
}

/* footer */
footer{
  background:var(--navy-deep);
  color:#b9c1d6;
  font-size:.82rem;
  padding:18px 20px;
}
footer address{
  max-width:1180px;
  margin:0 auto;
  font-style:normal;
  line-height:1.6;
}
footer a{
  color:#e2d6bd;
  text-decoration:underline;
}

/* ---------- responsive ---------- */
@media (max-width:768px){
  .split-banner{ flex-direction:column; min-height:0; }
  .band{ flex:none; padding:32px 24px; }
  .band-navy{
    clip-path:polygon(0 0, 100% 0, 100% 88%, 0 100%);
    padding-bottom:40px;
  }
  .band-beige{
    margin-left:0;
    margin-top:-24px;
    padding:40px 24px 30px;
  }
  main{ padding:36px 16px 44px; }
  .gallery-grid{ grid-template-columns:1fr; }
  .related-cards{ grid-template-columns:1fr; }
  table{ min-width:420px; }
}

@media (max-width:480px){
  .split-banner h1{ font-size:1.6rem; }
  .util-inner{ flex-direction:column; align-items:flex-start; gap:4px; }
  .section-block h2{ font-size:1.24rem; }
  .cta-block{ padding:24px 18px; }
  .caution-block{ padding:16px 18px; }
}