.contact-page { background: var(--white); }
.contact-page .site-header { color: var(--ink); }
.contact-main { overflow: hidden; }

.contact-hero { position: relative; display: flex; min-height: 560px; align-items: end; padding: calc(var(--header-height) + 80px) 0 90px; overflow: hidden; background: var(--greige); }
.contact-hero::before { content: "CONTACT"; position: absolute; left: -.035em; bottom: -.2em; color: rgba(41,41,35,.055); font-size: clamp(8rem, 19vw, 19rem); font-weight: 800; line-height: 1; letter-spacing: -.07em; white-space: nowrap; }
.contact-hero::after { content: ""; position: absolute; right: 0; inset-block: 0; width: 28%; background: var(--navy); }
.contact-hero-inner { position: relative; z-index: 1; width: 100%; }
.contact-breadcrumb { margin: 0 0 60px; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.contact-hero h1 { max-width: 70%; margin: 0; font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 600; line-height: 1; letter-spacing: -.065em; }
.contact-hero h1 span { display: block; margin-top: 22px; font-size: .82rem; font-weight: 500; letter-spacing: .12em; }

.contact-intro { padding: clamp(100px, 13vw, 180px) 0; }
.contact-intro-grid { display: grid; grid-template-columns: .6fr 1.4fr; gap: clamp(60px, 10vw, 150px); }
.contact-intro h2 { margin: 0 0 36px; font-size: clamp(2.4rem, 4.8vw, 5rem); font-weight: 500; line-height: 1.35; letter-spacing: -.045em; }
.contact-intro-grid > div > p { max-width: 680px; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.18rem); }

.form-section { padding: clamp(90px, 10vw, 135px) 0; background: var(--white); }
.form-panel { position: relative; display: flex; min-height: 290px; align-items: center; justify-content: space-between; padding: clamp(38px, 5vw, 64px); overflow: hidden; color: var(--greige); background: var(--navy); border-top: 1px solid rgba(214,210,196,.18); border-bottom: 1px solid rgba(214,210,196,.18); }
.form-panel::before { content: "SEND"; position: absolute; right: -.03em; bottom: -.3em; color: rgba(214,210,196,.03); font-size: clamp(8rem, 17vw, 17rem); font-weight: 800; line-height: 1; letter-spacing: -.08em; }
.form-panel > div, .form-mark { position: relative; z-index: 1; }
.form-panel > div { width: min(760px, 100%); }
.form-label { margin: 0 0 24px; color: rgba(214,210,196,.58); font-size: .7rem; font-weight: 700; letter-spacing: .18em; }
.form-button { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 22px; border-bottom: 1px solid rgba(214,210,196,.48); color: var(--white); font-size: clamp(1.35rem, 3vw, 2.65rem); font-weight: 500; line-height: 1.35; letter-spacing: -.025em; }
.form-button span:last-child { transition: transform .25s; }
.form-button:hover span:last-child { transform: translate(5px, -5px); }
.form-hint { margin: 20px 0 0; color: rgba(214,210,196,.52); font-size: .78rem; }
.form-mark { display: grid; width: clamp(66px, 7vw, 92px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(214,210,196,.34); border-radius: 50%; font-size: .62rem; font-weight: 700; letter-spacing: .13em; transition: color .25s, background .25s, transform .25s; }
.form-panel:hover .form-mark { color: var(--navy); background: var(--greige); transform: rotate(8deg); }

.inquiry-guide { padding: clamp(100px, 12vw, 170px) 0; background: var(--mist); }
.contact-heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 10vw, 140px); align-items: start; margin-bottom: 70px; }
.contact-heading h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 500; line-height: 1.35; letter-spacing: -.04em; }
.contact-heading > p:last-child { max-width: 620px; margin: 50px 0 0; color: var(--muted); }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.guide-card { position: relative; min-height: 355px; padding: clamp(28px, 3.5vw, 42px); overflow: hidden; background: var(--white); transition: color .3s ease, background .3s ease, transform .3s ease; }
.guide-card:hover { z-index: 2; color: var(--white); background: var(--navy); transform: translateY(-6px); }
.guide-card span { color: var(--blue); font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.guide-card h3 { margin: 64px 0 18px; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; }
.guide-card p { margin: 0; color: var(--muted); }
.guide-card small { display: block; margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; line-height: 1.7; }
.guide-card i { position: absolute; right: 26px; top: 27px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-style: normal; transition: transform .25s ease; }
.guide-card:hover span { color: var(--greige); }
.guide-card:hover p, .guide-card:hover small { color: rgba(255,255,255,.65); }
.guide-card:hover small, .guide-card:hover i { border-color: rgba(255,255,255,.24); }
.guide-card:hover i { transform: translate(3px,-3px); }
.guide-card-global { color: var(--white); background: var(--navy); }
.guide-card-global span { color: var(--greige); }
.guide-card-global p, .guide-card-global small { color: rgba(255,255,255,.65); }
.guide-card-global small, .guide-card-global i { border-color: rgba(255,255,255,.24); }

.international-inquiry { padding: clamp(100px,12vw,170px) 0; background: var(--white); }
.international-grid { display: grid; grid-template-columns: .6fr 1.4fr; gap: clamp(60px,10vw,150px); }
.international-inquiry h2 { margin: 0; font-size: clamp(2.5rem,5vw,5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.055em; }
.international-grid > div:last-child > p { max-width: 760px; color: var(--muted); }
.international-grid .international-lead { margin-top: 0; color: var(--ink); font-size: clamp(1.12rem,1.55vw,1.4rem); line-height: 1.75; }
.international-grid strong { color: var(--ink); }
.international-grid ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin: 38px 0; padding: 0; border: 1px solid var(--line); background: var(--line); list-style: none; }
.international-grid li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 20px; background: var(--white); }
.international-grid li span { color: var(--blue); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.international-grid .international-note { margin: 28px 0; padding-left: 18px; border-left: 2px solid var(--greige); font-size: .85rem; }
.international-button { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 36px; padding: 19px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: clamp(1.05rem,1.7vw,1.3rem); font-weight: 600; }
.international-button span:last-child { transition: transform .25s; }
.international-button:hover span:last-child { transform: translate(5px,-5px); }

.contact-notice { padding: clamp(100px, 12vw, 170px) 0; color: var(--greige); background: var(--navy); }
.notice-grid { display: grid; grid-template-columns: .6fr 1.4fr; gap: clamp(60px, 10vw, 150px); }
.notice-grid h2 { margin: 0 0 38px; color: var(--white); font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.04em; }
.notice-grid ul { margin: 0; padding: 0; border-top: 1px solid rgba(214,210,196,.22); list-style: none; }
.notice-grid li { padding: 24px 0; border-bottom: 1px solid rgba(214,210,196,.22); color: rgba(214,210,196,.7); }

@media (max-width: 900px) {
  .contact-hero { min-height: 460px; }
  .contact-hero::after { width: 14px; }
  .contact-hero h1 { max-width: 100%; }
  .contact-intro-grid, .contact-heading, .notice-grid, .international-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-heading > p:last-child { margin-top: 0; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 0; }
}

@media (max-width: 560px) {
  .form-panel { min-height: 250px; }
  .form-mark { display: none; }
  .guide-card h3 { margin-top: 38px; }
  .international-grid ul { grid-template-columns: 1fr; }
}