/* 띄어쓰기 우선 줄정리 + PC·모바일 레이아웃 최적화 */

:root {
  --shell-pad: clamp(16px, 4vw, 48px);
  --section-pad-y: clamp(72px, 9vw, 128px);
  --header-h: 78px;
  --touch-min: 44px;
  --prose-max: 42em;
  --heading-max: 16em;
}

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

body {
  overflow-x: clip;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

/* 본문·설명: 띄어쓰기 단위 줄바꿈 */
p,
li,
td,
th,
figcaption,
.plan-lead,
.plan-subtitle,
.plan-card p,
.plan-card li,
.plan-steps p,
.about-copy,
.section-sidecopy,
.business-card p,
.detail-panel p,
.detail-step p,
.detail-lead,
.research-item p,
.research-aside p,
.brief-bullets p,
.source-card__desc,
.media-copy p,
.subnote,
.tiny-note,
.hero-lead,
.promise-list p,
.roadmap-list p {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

/* 제목: 짧은 줄은 균형, 모바일에서 강제 <br> 해제 */
h1,
h2,
h3,
.plan-heading,
.plan-title,
.brief-title,
.section-heading h2,
.section-head-row h2 {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: balance;
  max-width: var(--heading-max);
}

/* URL·긴 영문만 필요 시 줄바꿈 */
a[href^="http"]:not(.source-card):not(.button):not(.button-primary):not(.nav-plan),
.plan-foot span:last-child,
.fact-table td[colspan] {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.shell {
  width: min(1180px, calc(100% - var(--shell-pad) * 2));
}

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

/* PC: 읽기 폭·클릭 영역 */
@media (min-width: 921px) {
  :root {
    --header-h: 78px;
  }

  .site-nav a,
  .toolbar-link,
  .brief-home {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
  }

  .plan-lead,
  .plan-subtitle,
  .about-copy p,
  .hero-lead,
  .detail-panel p,
  .research-hero p {
    max-width: var(--prose-max);
  }

  .plan-band .hero-actions {
    flex-wrap: wrap;
  }

  .business-cards {
    align-items: stretch;
  }

  .source-grid {
    gap: 16px;
  }
}

/* 태블릿·모바일 공통 (네비 충돌 해소) */
@media (max-width: 920px) {
  :root {
    --header-h: 74px;
  }

  .header-inner {
    height: var(--header-h);
    position: relative;
  }

  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 8px;
    margin: 0 -8px 0 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .site-header .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 90;
    background: rgba(251, 250, 246, 0.98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(22, 44, 35, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .site-header .site-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .site-header .site-nav ul {
    display: grid;
    gap: 0;
    padding: 8px 16px 14px;
  }

  .site-header .site-nav li {
    border-bottom: 1px solid var(--line);
  }

  .site-header .site-nav li:last-child {
    border-bottom: 0;
  }

  .site-header .site-nav a {
    display: flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 10px 4px;
  }

  .site-header .nav-plan {
    border: 0;
    border-radius: 0;
    padding: 10px 4px;
  }

  /* 상세페이지: 가로 메뉴 유지 */
  .page-detail .menu-toggle {
    display: none !important;
  }

  .page-detail .site-nav {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .page-detail .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 0;
  }

  .page-detail .site-nav li {
    border: 0;
  }

  .plan-toolbar-inner,
  .brief-nav-inner {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .fact-table,
  .company-table,
  .matrix {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hero-grid,
  .split-layout,
  .ecosystem-layout,
  .story-grid,
  .plan-band-grid,
  .media-card,
  .system-grid,
  .detail-grid {
    gap: clamp(28px, 5vw, 42px);
  }

  /* 모바일: 강제 줄바꿈 제거 → 띄어쓰기 기준 자연 줄바꿈 */
  .hero h1 br,
  .section-heading h2 br,
  .section-head-row h2 br,
  .plan-band h2 br,
  .plan-heading br,
  .plan-title br,
  .brief-title br,
  .research-hero h1 br,
  .detail-hero h1 br,
  .eco-copy h2 br,
  .story-panel h2 br,
  .plan-cta h2 br,
  #cta-title br {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --header-h: 66px;
  }

  .hero {
    margin-top: calc(-1 * var(--header-h));
    padding-top: calc(52px + var(--header-h));
  }

  .button,
  .button-primary,
  .print-button,
  .brief-print,
  .source-card__cta {
    min-height: 48px;
  }

  .plan-band .hero-actions,
  .hero-actions,
  .plan-actions,
  .plan-cta-inner .plan-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .plan-band .hero-actions .button,
  .hero-actions .button {
    width: 100%;
    justify-content: center;
  }

  .business-card {
    min-height: 0;
  }

  .source-card {
    min-height: 0;
  }

  .page-detail .site-nav ul {
    gap: 10px 14px;
  }

  .page-detail .site-nav a {
    font-size: 13px;
    min-height: auto;
    padding: 4px 0;
  }

  .plan-toolbar .brand strong,
  .brief-nav .brand strong {
    font-size: 1rem;
  }

  .footer-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (min-width: 921px) {
  .menu-toggle {
    display: none !important;
  }
}

@media print {
  br {
    display: inline;
  }

  body {
    text-wrap: wrap;
  }
}

/* Animated brand logo — all header types */
.plan-toolbar .brand .brand-mark,
.brief-nav .brand .brand-mark {
  width: 39px;
  height: 39px;
  flex-shrink: 0;
}

.plan-toolbar .brand .brand-mark {
  color: var(--ink);
}

.brief-nav .brand .brand-mark {
  color: var(--sun-light);
}

.site-header--solid .brand .brand-mark,
.research-page .site-header .brand .brand-mark {
  color: var(--ink);
}

.site-header--solid .brand .brand-mark--live .logo-sun,
.plan-toolbar .brand .brand-mark--live .logo-sun,
.research-page .site-header .brand .brand-mark--live .logo-sun,
.brief-nav .brand .brand-mark--live .logo-sun {
  fill: #ffd980;
}