@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap");

:root { --ink: #172524; --deep: #102f2f; --teal: #1d5551; --accent: #ef6a4b; --paper: #f4f1e9; --sand: #e3dccd; --white: #fff; --muted: #66716e; --line: rgba(23,37,36,.16); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Sans KR", sans-serif; line-height: 1.75; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
.site-header { display: flex; height: 78px; align-items: center; padding: 0 clamp(22px,6vw,86px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
.brand-mark { display: block; width: 44px; height: 44px; flex: 0 0 auto; overflow: hidden; background: url("assets/logo-mark.svg") center / contain no-repeat; color: transparent; font-size: 0; }
.brand small { display: block; color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .22em; }
.back-link { margin-left: auto; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 700; }
.hero { position: relative; display: flex; min-height: 590px; flex-direction: column; justify-content: center; overflow: hidden; padding: 90px clamp(24px,10vw,170px); color: var(--white); background: linear-gradient(90deg,rgba(8,38,37,.95),rgba(8,38,37,.4)),url("https://images.unsplash.com/photo-1453738773917-9c3eff1db985?auto=format&fit=crop&w=2000&q=88") center/cover; }
.hero::after { position: absolute; right: 3vw; bottom: -5vw; color: rgba(255,255,255,.07); content: attr(data-region); font: 700 clamp(90px,16vw,230px)/1 "Gowun Batang",serif; white-space: nowrap; }
.eyebrow { margin: 0 0 20px; color: #ff9c84; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.hero h1 { position: relative; z-index: 1; max-width: 920px; margin: 0; font: 700 clamp(39px,5.4vw,74px)/1.3 "Gowun Batang",serif; letter-spacing: 0; }
.hero h1 em { color: #ff9c84; font-style: normal; }
.hero-copy { position: relative; z-index: 1; max-width: 620px; margin: 25px 0 0; color: rgba(255,255,255,.76); }
.hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin-top: 35px; }
.primary-button { display: inline-flex; min-height: 55px; align-items: center; padding: 0 25px; color: var(--white); background: var(--accent); font-weight: 700; }
.phone-link { border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 5px; font-size: 13px; }
.section { padding: 105px clamp(24px,9vw,150px); }
.intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; }
.section h2 { margin: 0; font: 700 clamp(34px,4vw,55px)/1.35 "Gowun Batang",serif; }
.intro-copy { align-self: end; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 75px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.feature-grid article { min-height: 245px; padding: 30px; }
.feature-grid article + article { border-left: 1px solid var(--line); }
.feature-grid span { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.feature-grid h3 { margin: 45px 0 12px; font: 700 24px "Gowun Batang",serif; }
.feature-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.grade-guide { color: var(--white); background: var(--deep); }
.grade-heading { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px 9vw; }
.grade-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.grade-heading > p:last-child { align-self: end; margin: 0; color: rgba(255,255,255,.67); }
.transition-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 70px; border-top: 1px solid rgba(255,255,255,.28); }
.transition-grid article { min-height: 190px; padding: 28px; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.transition-grid article:nth-child(3n) { border-right: 0; }
.transition-grid span { color: #ff9c84; font-weight: 700; }
.transition-grid p { margin: 25px 0 0; color: rgba(255,255,255,.65); font-size: 13px; }
.fit { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; background: var(--sand); }
.fit-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fit-list li { padding: 20px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.fit-list li::before { margin-right: 14px; color: var(--accent); content: "+"; }
.area-nav { color: var(--white); background: var(--teal); }
.area-nav .eyebrow { color: #ff9c84; }
.area-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 35px; }
.area-links a { border: 1px solid rgba(255,255,255,.34); padding: 10px 15px; font-size: 13px; }
.area-links a:hover,.area-links a[aria-current="page"] { border-color: var(--accent); background: var(--accent); }
.cta { padding: 92px 24px; text-align: center; background: var(--accent); color: var(--white); }
.cta h2 { margin: 0 0 27px; font: 700 clamp(33px,4vw,54px)/1.4 "Gowun Batang",serif; }
.cta .primary-button { color: var(--ink); background: var(--white); }
.site-footer { display: flex; justify-content: space-between; gap: 25px; padding: 42px clamp(24px,6vw,86px); color: rgba(255,255,255,.6); background: #0a2322; font-size: 11px; }
.floating-phone { display: none; }
@media (max-width:720px) {
  .site-header { height: 66px; }
  .hero { min-height: 640px; padding: 78px 23px 120px; }
  .hero h1 { font-size: 35px; }
  .hero-copy { font-size: 14px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .section { padding: 78px 23px; }
  .intro,.fit,.grade-heading { grid-template-columns: 1fr; gap: 35px; }
  .grade-heading .eyebrow { grid-column: auto; margin-bottom: -18px; }
  .feature-grid { grid-template-columns: 1fr; margin-top: 50px; }
  .feature-grid article { min-height: 0; padding: 27px 0; }
  .feature-grid article + article { border-top: 1px solid var(--line); border-left: 0; }
  .feature-grid h3 { margin-top: 18px; }
  .transition-grid { grid-template-columns: 1fr; margin-top: 50px; }
  .transition-grid article,.transition-grid article:nth-child(3n) { min-height: 0; padding: 25px 0; border-right: 0; }
  .site-footer { flex-direction: column; padding-bottom: 92px; }
  .floating-phone { position: fixed; z-index: 10; right: 14px; bottom: 14px; left: 14px; display: flex; height: 54px; align-items: center; justify-content: center; color: var(--white); background: var(--accent); box-shadow: 0 8px 25px rgba(0,0,0,.24); font-weight: 700; }
}