/* 학원철거업체이전 전용 스타일 - 이 페이지에서만 사용, 다른 페이지와 공유 금지 */

:root {
  --color-primary: #1E3A8A;
  --color-bg: #EFF6FF;
  --color-accent: #60A5FA;
  --color-ink: #1E293B;
  --color-ink-soft: #475569;
  --color-white: #FFFFFF;
  --color-border: #C7D9F5;

  --radius: 12px;
  --section-pad: 96px;

  /* type scale 1.250 */
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-h2: 1.5625rem;
  --fs-h1: 2.44rem;

  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  font-display: swap;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: var(--color-primary);
  line-height: 1.35;
  margin: 0 0 0.6em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-top: 1.4em; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; color: var(--color-ink-soft); }

a { color: var(--color-primary); }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.section-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: var(--section-pad) 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  height: 68px;
  display: flex;
  align-items: center;
}

.header-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn-header {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 10px 18px;
  font-size: 0.9rem;
}

.btn-header:hover { background: #16296b; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 14px 28px;
  font-size: 1rem;
}

.btn-primary:hover { background: #16296b; }

.btn-lg { padding: 16px 34px; font-size: 1.05rem; }

/* ---------- Hero: left-right split ---------- */
.hero {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%);
  padding: 64px 0 var(--section-pad);
}

.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: 40px;
}

.hero-text .hero-summary {
  font-size: var(--fs-lead);
  color: var(--color-ink);
  max-width: 46ch;
}

.hero-split {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-panel {
  flex: 1;
  border-radius: var(--radius);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
  justify-content: center;
  text-align: center;
}

.hero-old {
  background: var(--color-white);
  border: 2px dashed var(--color-border);
}

.hero-new {
  background: var(--color-primary);
  color: var(--color-white);
}

.hero-panel-label { font-weight: 700; font-size: 1.05rem; }
.hero-old .hero-panel-label { color: var(--color-primary); }
.hero-new .hero-panel-label { color: var(--color-white); }
.hero-panel-sub { font-size: 0.85rem; color: var(--color-ink-soft); }
.hero-new .hero-panel-sub { color: #DBEAFE; }

.hero-arrow {
  color: var(--color-accent);
  flex-shrink: 0;
  animation: arrow-slide 1.6s ease-in-out infinite;
}

@keyframes arrow-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-arrow { animation: none; }
}

/* ---------- Problem / lead ---------- */
.section-problem .lead {
  font-size: var(--fs-lead);
  color: var(--color-ink);
  background: var(--color-white);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 24px 28px;
}

/* ---------- Core section ---------- */
.section-core { background: var(--color-white); }

/* ---------- Diagram ---------- */
.diagram-desc { max-width: 60ch; }

.diagram-wrap {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 20px;
  overflow-x: auto;
}

.diagram-wrap svg { display: block; width: 100%; height: auto; min-width: 560px; }

.node-box {
  fill: var(--color-bg);
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.node-start { fill: #FDE68A22; stroke: var(--color-accent); }
.node-end { fill: var(--color-primary); stroke: var(--color-primary); }

.node-title { font-size: 15px; font-weight: 700; fill: var(--color-primary); font-family: 'Pretendard', 'Noto Sans KR', sans-serif; }
.node-title-white { fill: var(--color-white); }
.node-sub { font-size: 12px; fill: var(--color-ink-soft); font-family: 'Pretendard', 'Noto Sans KR', sans-serif; }
.node-sub-white { fill: #DBEAFE; }

.route-arrow { stroke: var(--color-accent); stroke-width: 3; }
.arrowhead-fill { fill: var(--color-accent); }

/* ---------- Table ---------- */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--color-white);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
}

caption {
  text-align: left;
  padding: 16px 20px 8px;
  font-weight: 700;
  color: var(--color-primary);
}

th, td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 0.92rem;
}

thead th {
  background: var(--color-bg);
  color: var(--color-primary);
  font-weight: 700;
}

tbody tr:last-child td { border-bottom: none; }

/* ---------- Photos ---------- */
.photo-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.photo-item {
  margin: 0;
  max-width: 320px;
  width: 100%;
  text-align: center;
}

.photo-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.photo-item figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }

details {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--color-primary);
}

details p { margin: 12px 0 0; }

/* ---------- CTA ---------- */
.section-cta {
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
}

.cta-inner h2 { color: var(--color-white); }
.cta-inner p { color: #DBEAFE; max-width: 50ch; margin-left: auto; margin-right: auto; }
.section-cta .btn-primary {
  background: var(--color-white);
  color: var(--color-primary);
}
.section-cta .btn-primary:hover { background: var(--color-bg); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 40px 0;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.footer-links a {
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--color-ink-soft);
}

.footer-links a:hover { color: var(--color-primary); }

.footer-info {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  margin: 0;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .hero-inner { padding: 0 32px; }
  .photo-grid { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .photo-item { width: calc(50% - 12px); }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 3.05rem;
    --fs-h2: 1.95rem;
  }
  .hero-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .photo-item { width: calc(33.333% - 16px); }
}

@media (min-width: 1280px) {
  .section-inner, .hero-inner, .header-inner, .footer-inner {
    max-width: 1180px;
  }
}