:root {
  --bg: #f7f6f0;
  --surface: rgba(255,255,255,.86);
  --ink: #17362c;
  --muted: #697a73;
  --line: rgba(23,54,44,.12);
  --brand: #1d6c4d;
  --brand-deep: #104b36;
  --accent: #b4d984;
  --gold: #c69a31;
  --shadow: 0 20px 60px rgba(20,65,48,.10);
  --radius: 24px;
  --max: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(180,217,132,.20), transparent 30rem),
    radial-gradient(circle at 92% 22%, rgba(198,154,49,.10), transparent 30rem),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR",
               "Noto Sans SC", "Noto Sans JP", Arial, sans-serif;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, select { font: inherit; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(247,246,240,.90);
  backdrop-filter: blur(18px);
}
.nav {
  min-height: 112px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px;
}
.brand { display: inline-flex; align-items: center; min-width: 170px; }
.brand-logo { height: 92px; width: auto; object-fit: contain; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 10px 13px; border-radius: 999px;
  color: #3d594f; font-size: 14px; font-weight: 700;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--brand-deep); background: rgba(29,108,77,.09);
}
.nav-cta {
  color: white !important; background: var(--brand) !important;
  box-shadow: 0 9px 20px rgba(29,108,77,.18);
}
.language-wrap { position: relative; }
.language-select {
  min-height: 42px; padding: 0 34px 0 13px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--brand-deep); background: rgba(255,255,255,.82);
  font-weight: 750; cursor: pointer;
}
.menu-button {
  display: none; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.8); cursor: pointer;
}
.hero { padding: 106px 0 78px; }
.hero-grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: 72px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 13px; border: 1px solid rgba(29,108,77,.14);
  border-radius: 999px; color: var(--brand);
  background: rgba(255,255,255,.64);
  font-size: 13px; font-weight: 800;
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 5px rgba(180,217,132,.18);
}
h1,h2,h3,p { margin-top: 0; }
h1 {
  margin: 24px 0 22px; font-size: clamp(46px,6vw,76px);
  line-height: 1.08; letter-spacing: -.055em;
}
h1 .highlight { display: block; color: var(--brand); }
.hero-copy {
  max-width: 690px; color: var(--muted);
  font-size: clamp(17px,2vw,20px); line-height: 1.85;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px; border: 1px solid transparent;
  border-radius: 15px; font-weight: 800;
}
.button-primary { color: white; background: var(--brand); box-shadow: 0 12px 28px rgba(29,108,77,.20); }
.button-secondary { border-color: var(--line); background: rgba(255,255,255,.76); }
.logo-showcase {
  width: min(100%, 520px); margin: 0 auto; padding: 20px;
  border: 1px solid rgba(23,54,44,.09); border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.64), rgba(255,255,255,.24));
  box-shadow: var(--shadow);
}
.logo-showcase img { width: 100%; height: auto; object-fit: contain; }
.section { padding: 90px 0; }
.section-tight { padding: 64px 0; }
.section-heading { max-width: 780px; margin-bottom: 38px; }
.section-heading.center { margin-left:auto; margin-right:auto; text-align:center; }
.kicker {
  margin-bottom: 12px; color: var(--brand);
  font-size: 13px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase;
}
h2 {
  margin-bottom: 14px; font-size: clamp(32px,4vw,50px);
  line-height: 1.2; letter-spacing: -.042em;
}
.section-heading p { color: var(--muted); font-size: 17px; }
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.card {
  min-height: 250px; padding: 30px;
  border: 1px solid rgba(23,54,44,.09); border-radius: 20px;
  background: var(--surface); box-shadow: 0 8px 34px rgba(20,65,48,.06);
}
.card-icon {
  width: 48px; height: 48px; display:grid; place-items:center;
  margin-bottom: 28px; border-radius: 15px;
  color: var(--brand); background: rgba(29,108,77,.09); font-size: 22px;
}
.card h3 { margin-bottom: 9px; font-size: 21px; letter-spacing: -.02em; }
.card p { margin-bottom: 0; color: var(--muted); font-size: 15px; }
.panel {
  overflow: hidden; display:grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line); border-radius: 28px;
  background: linear-gradient(145deg,rgba(255,255,255,.92),rgba(247,246,240,.86));
  box-shadow: var(--shadow);
}
.panel-copy { padding: 58px; }
.panel-copy p { color: var(--muted); }
.panel-art {
  min-height: 430px; position: relative;
  background:
    linear-gradient(180deg,rgba(16,75,54,.10),rgba(16,75,54,.28)),
    radial-gradient(circle at 72% 28%,rgba(255,239,190,.68),transparent 18%),
    linear-gradient(145deg,#bfd6c5 0 34%,#759a81 35% 52%,#28513f 53% 100%);
}
.panel-art::after {
  content: attr(data-label); position:absolute; right:26px; bottom:24px;
  padding:8px 12px; border-radius:999px; color:white;
  background:rgba(16,75,54,.54); font-size:12px; font-weight:750;
}
.page-hero { padding: 88px 0 54px; }
.page-hero h1 { max-width: 880px; font-size: clamp(40px,5vw,64px); }
.page-hero p { max-width: 760px; color: var(--muted); font-size: 18px; }
.prose {
  padding: 42px; border: 1px solid var(--line); border-radius: 20px;
  background: rgba(255,255,255,.80);
}
.prose h2 { margin-top: 38px; font-size: 28px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: #4f635b; }
.prose table { width:100%; border-collapse:collapse; margin:20px 0; }
.prose th,.prose td {
  padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line);
}
.prose th { width: 180px; color: var(--muted); font-size: 13px; }
.company-facts {
  display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:0 34px;
}
.fact { padding:17px 0; border-bottom:1px solid var(--line); }
.fact dt { color:var(--muted); font-size:12px; font-weight:750; }
.fact dd { margin:4px 0 0; font-weight:750; }
.notice {
  padding:22px 24px; border-left:4px solid var(--accent);
  border-radius:0 14px 14px 0; color:#3d584e; background:rgba(180,217,132,.14);
}
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; }
.contact-card {
  padding:34px; border:1px solid var(--line); border-radius:20px;
  background:rgba(255,255,255,.80);
}
.contact-list { display:grid; gap:16px; margin-top:26px; }
.contact-item { padding:16px; border-radius:14px; background:rgba(29,108,77,.06); }
.contact-item small { display:block; color:var(--muted); }
.contact-item strong { display:block; margin-top:2px; }
.tag {
  display:inline-flex; margin:0 5px 5px 0; padding:6px 10px;
  border-radius:999px; color:var(--brand); background:rgba(29,108,77,.08);
  font-size:12px; font-weight:750;
}
.cta {
  padding:62px; border-radius:28px; color:white;
  background:
    radial-gradient(circle at 85% 20%,rgba(180,217,132,.35),transparent 22rem),
    linear-gradient(135deg,var(--brand-deep),var(--brand));
  box-shadow:var(--shadow);
}
.cta p { max-width:680px; color:rgba(255,255,255,.76); }
.cta .button-secondary { color:var(--brand-deep); background:white; }
.site-footer {
  margin-top:70px; padding:56px 0 26px;
  border-top:1px solid var(--line); background:rgba(255,255,255,.38);
}
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:50px; }
.footer-brand .brand-logo { height:110px; }
.footer-brand p { max-width:420px; margin-top:16px; color:var(--muted); font-size:14px; }
.footer-links strong { display:block; margin-bottom:12px; }
.footer-links a { display:block; width:fit-content; margin:8px 0; color:var(--muted); font-size:14px; }
.copyright {
  margin-top:38px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12px;
}
@media (max-width: 1040px) {
  .menu-button { display:grid; place-items:center; }
  .nav-right { margin-left:auto; }
  .nav-links {
    display:none; position:absolute; top:104px; left:20px; right:20px;
    padding:14px; border:1px solid var(--line); border-radius:18px;
    background:rgba(255,255,255,.97); box-shadow:var(--shadow);
  }
  .nav-links.open { display:grid; }
}
@media (max-width: 920px) {
  .hero-grid,.panel,.contact-grid { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr; }
  .panel-art { min-height:330px; order:-1; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
}
@media (max-width: 620px) {
  .container { width:min(calc(100% - 26px),var(--max)); }
  .nav { min-height:88px; }
  .brand-logo { height:68px; }
  .language-select { max-width:110px; }
  .hero { padding:58px 0 48px; }
  h1 { font-size:44px; }
  .section { padding:68px 0; }
  .panel-copy,.prose,.contact-card { padding:28px; }
  .company-facts { grid-template-columns:1fr; }
  .cta { padding:36px 28px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .footer-brand .brand-logo { height:92px; }
}

/* 한국어 사이트 전용 배경음악 */
.music-consent[hidden] { display: none; }
.music-consent {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9,28,21,.62);
  backdrop-filter: blur(10px);
}
.music-consent-card {
  width: min(100%,520px);
  padding: 34px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 26px;
  text-align: center;
  background: rgba(255,255,255,.97);
  box-shadow: 0 26px 80px rgba(7,33,23,.25);
}
.music-consent-card img {
  width: 132px;
  margin: 0 auto 16px;
}
.music-consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.music-player {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
}
.music-toggle {
  min-width: 104px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: #fff;
  background: rgba(16,75,54,.92);
  box-shadow: 0 12px 30px rgba(16,75,54,.25);
  cursor: pointer;
}
.music-toggle.is-playing .music-icon {
  animation: musicPulse 1.4s ease-in-out infinite;
}
@keyframes musicPulse {
  0%,100% { transform: scale(1); opacity:.8; }
  50% { transform: scale(1.18); opacity:1; }
}
@media (max-width:620px) {
  .music-player { right:14px; bottom:14px; }
  .music-toggle { min-width:54px; padding:0 14px; }
  .music-status { display:none; }
}

/* Global-language background music */
.music-consent[hidden] { display: none; }
.music-consent {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9,28,21,.62);
  backdrop-filter: blur(10px);
}
.music-consent-card {
  width: min(100%,520px);
  padding: 34px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 26px;
  text-align: center;
  background: rgba(255,255,255,.97);
  box-shadow: 0 26px 80px rgba(7,33,23,.25);
}
.music-consent-card img {
  width: 132px;
  margin: 0 auto 16px;
}
.music-consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.music-player {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
}
.music-toggle {
  min-width: 104px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: #fff;
  background: rgba(16,75,54,.92);
  box-shadow: 0 12px 30px rgba(16,75,54,.25);
  cursor: pointer;
}
.music-toggle.is-playing .music-icon {
  animation: musicPulse 1.4s ease-in-out infinite;
}
@keyframes musicPulse {
  0%,100% { transform: scale(1); opacity:.8; }
  50% { transform: scale(1.18); opacity:1; }
}
@media (max-width:620px) {
  .music-player { right:14px; bottom:14px; }
  .music-toggle { min-width:54px; padding:0 14px; }
  .music-status { display:none; }
}

.music-toggle {
  max-width: 260px;
}
.music-track-title {
  max-width: 128px;
  overflow: hidden;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width:620px) {
  .music-track-title { display:none; }
}

.music-production-credit {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}


/* Product-centered HopeTree homepage */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.feature-card{padding:26px;border:1px solid rgba(16,75,54,.12);border-radius:22px;background:#fff;box-shadow:0 14px 36px rgba(16,75,54,.06)}
.feature-card h3{margin:0 0 10px;font-size:21px}
.feature-card p{margin:0;color:var(--muted);line-height:1.75}
.section-soft{background:#f4f8f5}
.section-dark{background:#103f30;color:#fff}
.section-dark p{color:rgba(255,255,255,.78)}
.kicker.light{color:#dff0ce}
.split-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}
.split-feature.compact{margin-top:30px;padding-top:28px;border-top:1px solid rgba(16,75,54,.12)}
.feature-highlight{padding:30px;border-radius:24px;background:#fff;border:1px solid rgba(16,75,54,.12);box-shadow:0 16px 42px rgba(16,75,54,.07)}
.dark-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.principle-box{margin-top:28px;padding:22px 24px;border-left:5px solid #6aa779;border-radius:12px;background:#eef6ef;line-height:1.75}
.center-actions{text-align:center;margin-top:28px}
.status-panel{padding:36px;border-radius:26px;background:#e8f2e9;text-align:center}
.text-link{display:inline-block;margin-top:14px;font-weight:800;color:#104b36;text-decoration:none}
@media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.split-feature{grid-template-columns:1fr}}
@media(max-width:620px){.feature-grid{grid-template-columns:1fr}.feature-card{padding:22px}}

/* Unified navigation and persistent music fix */
.nav {
  flex-wrap: nowrap;
}
.nav-right {
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
}
.nav-links {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-links a {
  flex: 0 0 auto;
}
.nav-links a[aria-current="page"] {
  color: var(--brand-deep);
  background: #e5eee7;
}
.language-wrap {
  flex: 0 0 auto;
}
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-links a {
    padding: 10px 9px;
    font-size: 13px;
  }
  .language-select {
    min-width: 112px;
  }
}

/* Music consent click reliability */
.music-consent {
  pointer-events: auto;
}
.music-consent-card {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.music-consent-actions,
.music-consent-actions button {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.music-consent-actions button {
  touch-action: manipulation;
}

/* Route-correct final navigation */
.nav-links a,
.nav-links a.active {
  color: var(--brand-deep);
  background: transparent;
  box-shadow: none;
}
.nav-links a[aria-current="page"] {
  color: var(--brand-deep);
  background: #e5eee7;
  box-shadow: none;
}
.nav-links a:not([aria-current="page"]):hover {
  background: rgba(16,75,54,.06);
}

/* App introduction candidate - source-grounded July 2026 */
.app-intro-hero { padding-bottom: 3rem; }
.app-intro-hero .hero-slogan { margin-top: 1.5rem; font-size: 1.1rem; line-height: 1.8; }
.intro-notice { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid rgba(189,145,47,.35); background: #fff9e9; border-radius: 14px; line-height: 1.7; }
.app-intro-toc { position: sticky; top: 0; z-index: 20; background: rgba(250,249,244,.96); border-top: 1px solid #e6e5df; border-bottom: 1px solid #e6e5df; backdrop-filter: blur(12px); }
.toc-scroll { display: flex; gap: .65rem; overflow-x: auto; padding-top: .75rem; padding-bottom: .75rem; scrollbar-width: none; }
.toc-scroll::-webkit-scrollbar { display:none; }
.toc-scroll a { white-space: nowrap; padding: .55rem .8rem; border-radius: 999px; background: #edf3ee; font-size: .88rem; font-weight: 700; }
.app-intro-section { scroll-margin-top: 90px; }
.intro-lead blockquote, .app-intro-section blockquote { margin: 1.5rem 0; padding: 1.2rem 1.4rem; border-left: 4px solid #cba74f; background: #edf5f0; font-size: 1.08rem; font-weight: 700; line-height: 1.8; }
.value-grid, .problem-solution-grid, .emotion-media-grid, .organization-grid, .principle-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:1rem; }
.value-grid > div, .problem-solution-grid > div, .emotion-media-grid > div, .organization-grid > div, .principle-grid > div { display:flex; flex-direction:column; gap:.5rem; padding:1.1rem; border:1px solid #e1e5e1; background:#fff; border-radius:16px; }
.value-grid strong, .problem-solution-grid strong, .organization-grid strong, .principle-grid strong { color:#14513d; }
.value-grid span, .problem-solution-grid span, .emotion-media-grid span, .organization-grid span, .principle-grid span { line-height:1.65; color:#60706a; }
.value-grid.compact { grid-template-columns: repeat(4,minmax(0,1fr)); }
.value-grid.compact > div { align-items:center; text-align:center; }
.flow-panel, .principle-panel { margin-top:1.5rem; padding:1.4rem; background:#f2f6f2; border-radius:18px; }
.intro-steps { display:grid; gap:.8rem; padding-left:1.4rem; }
.intro-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
.intro-card { background:#fff; border:1px solid #dfe4df; border-radius:18px; padding:1.25rem; }
.intro-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.intro-card h3 { margin:0; color:#163f33; }
.intro-card p { line-height:1.75; color:#60706a; }
.status-chip { display:inline-flex; flex-shrink:0; padding:.35rem .65rem; border-radius:999px; background:#e6f1e9; color:#176547; font-size:.76rem; font-weight:800; }
.status-chip.muted { background:#f0f0ec; color:#6d746f; }
.intro-list { margin:.8rem 0 0; padding-left:1.2rem; display:grid; gap:.45rem; color:#53665f; line-height:1.55; }
.section-copy { max-width:850px; line-height:1.8; }
.roadmap-table { display:grid; grid-template-columns:1fr 2fr 1.2fr; border:1px solid #dfe4df; border-radius:16px; overflow:hidden; background:#fff; }
.roadmap-table > div { padding:.9rem 1rem; border-right:1px solid #e4e8e4; border-bottom:1px solid #e4e8e4; }
.roadmap-table > div:nth-child(3n) { border-right:0; }
.roadmap-table .head { background:#154b3b; color:#fff; font-weight:800; }
.roadmap-note { margin-top:1rem; color:#6c7772; line-height:1.7; }
@media (max-width: 800px) {
  .value-grid, .problem-solution-grid, .emotion-media-grid, .organization-grid, .principle-grid,
  .value-grid.compact, .intro-card-grid { grid-template-columns:1fr; }
  .roadmap-table { grid-template-columns:1fr; }
  .roadmap-table .head { display:none; }
  .roadmap-table > div { border-right:0; }
  .intro-card-head { flex-direction:column; }
  .app-intro-hero h1 { font-size:clamp(2rem,10vw,3.2rem); }
}