:root { --forest:#14362f; --forest-light:#24584d; --ink:#17231f; --coral:#e86f51; --paper:#f5f3ec; --mist:#dce6df; --white:#fff; --muted:#68736e; --line:rgba(23,35,31,.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.7; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:2; top:0; left:0; display:flex; width:100%; height:84px; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); color:var(--white); border-bottom:1px solid rgba(255,255,255,.2); }
.brand { display:flex; align-items:center; gap:12px; font-size:16px; font-weight:700; line-height:1.15; }
.brand-symbol { display:grid; width:42px; height:42px; place-items:center; border:1px solid currentColor; font-family:Georgia,serif; font-size:27px; }
.brand small { display:block; margin-top:5px; font-size:8px; font-weight:500; letter-spacing:.25em; opacity:.65; }
.back-link { border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:5px; font-size:12px; font-weight:600; }
.hero { position:relative; display:grid; min-height:680px; align-items:center; overflow:hidden; color:var(--white); background:linear-gradient(90deg,rgba(10,39,33,.96),rgba(15,55,46,.72) 55%,rgba(8,31,27,.18)),url("https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=2000&q=88") center 42%/cover; }
.hero-content { width:min(820px,86%); margin-left:clamp(22px,10vw,165px); padding-top:55px; }
.eyebrow { margin:0 0 18px; color:#ff9a7e; font-size:10px; font-weight:800; letter-spacing:.2em; }
.eyebrow.dark { color:#b94b34; }
h1,h2 { margin:0; font-family:"Gowun Batang",serif; line-height:1.3; letter-spacing:0; }
h1 { font-size:clamp(38px,5vw,66px); }
h1 em { color:#ff9a7e; font-style:normal; }
.hero-copy { max-width:680px; margin:25px 0 0; color:rgba(255,255,255,.78); }
.hero-actions,.cta>div { display:flex; align-items:center; gap:28px; margin-top:38px; }
.primary-button { display:inline-flex; min-height:56px; align-items:center; justify-content:center; padding:0 26px; color:var(--white); background:var(--coral); font-weight:700; }
.phone-link { font-weight:700; }
.section { padding:110px clamp(22px,8vw,135px); }
.diagnosis { display:grid; grid-template-columns:.85fr 1.15fr; gap:7vw; }
.section-heading h2,.local-band h2,.region-navigation h2,.cta h2 { font-size:clamp(34px,4vw,53px); }
.section-copy { max-width:640px; align-self:end; margin:0; color:var(--muted); }
.feature-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); margin-top:55px; border-top:1px solid var(--line); }
.feature-grid article { min-height:230px; padding:35px 9% 25px 0; border-right:1px solid var(--line); }
.feature-grid article+article { padding-left:9%; }
.feature-grid article:last-child { border-right:0; }
.feature-grid span { color:#b94b34; font-size:9px; font-weight:700; letter-spacing:.12em; }
.feature-grid h3 { margin:24px 0 9px; font-size:20px; }
.feature-grid p,.grade-grid p { margin:0; color:var(--muted); font-size:14px; }
.local-band { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:8vw; padding:88px clamp(22px,10vw,165px); color:var(--white); background:var(--forest-light); }
.place-list { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(255,255,255,.3); }
.place-list span { padding:18px 4px; border-bottom:1px solid rgba(255,255,255,.22); font-weight:600; }
.grade-guide { background:var(--mist); }
.grade-transition { max-width:760px; margin:28px 0 0; color:var(--muted); font-size:14px; }
.grade-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:55px; background:rgba(23,35,31,.15); }
.grade-grid article { min-height:250px; padding:38px; background:var(--paper); }
.grade-grid strong { color:#b94b34; font-size:12px; }
.grade-grid h3 { margin:35px 0 10px; font-size:21px; }
.region-navigation { text-align:center; }
.region-links { display:grid; grid-template-columns:repeat(5,1fr); max-width:1080px; margin:48px auto 0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.region-links a { display:grid; min-height:62px; place-items:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13px; font-weight:600; }
.region-links a:hover,.region-links a[aria-current="page"] { color:var(--white); background:var(--forest-light); }
.cta { padding:105px 22px; color:var(--white); background:var(--forest); text-align:center; }
.cta>p { color:#ff9a7e; font-size:10px; font-weight:800; letter-spacing:.2em; }
.cta>div { justify-content:center; }
.site-footer { display:flex; justify-content:space-between; gap:25px; padding:40px clamp(22px,5vw,76px); color:rgba(255,255,255,.6); background:#09241e; font-size:11px; }
.floating-contact { position:fixed; z-index:5; right:18px; bottom:18px; display:none; padding:13px 17px; color:var(--white); background:var(--coral); box-shadow:0 8px 24px rgba(0,0,0,.2); font-size:12px; font-weight:700; }
@media (max-width:800px) { .diagnosis,.local-band { grid-template-columns:1fr; } .section-copy { margin-top:22px; } .feature-grid { grid-template-columns:1fr; } .feature-grid article,.feature-grid article+article { min-height:0; padding:30px 3px; border-right:0; border-bottom:1px solid var(--line); } .grade-grid { grid-template-columns:1fr; } .region-links { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px) { .site-header { height:72px; padding:0 18px; } .brand-symbol { width:38px; height:38px; } .brand { font-size:13px; } .back-link { font-size:11px; } .hero { min-height:660px; align-items:end; padding-bottom:86px; background-position:58% center; } .hero-content { width:auto; margin:0; padding:0 21px; } h1 { font-size:33px; } .hero-copy { font-size:14px; } .hero-actions { align-items:stretch; flex-direction:column; gap:17px; } .hero-actions .phone-link { text-align:center; } .section { padding:82px 21px; } .section-heading h2,.local-band h2,.region-navigation h2,.cta h2 { font-size:33px; } .local-band { padding:75px 21px; } .place-list { grid-template-columns:1fr 1fr; } .grade-grid article { min-height:210px; padding:30px; } .region-links { grid-template-columns:repeat(2,1fr); margin-top:37px; } .region-links a { font-size:12px; } .cta>div { align-items:stretch; flex-direction:column; gap:18px; } .site-footer { flex-direction:column; padding-bottom:90px; } .floating-contact { display:block; } }