/**
 * UI/UX Pro Max — accessibility, interaction, typography & layout
 * Preserves each concept's brand colors / fonts / motifs.
 */

/* —— Spacing scale (rhythm tokens; concepts keep own max-width) —— */
:root {
  --ux-space-1: 0.5rem;   /* 8 */
  --ux-space-2: 0.75rem;  /* 12 */
  --ux-space-3: 1rem;     /* 16 */
  --ux-space-4: 1.5rem;   /* 24 */
  --ux-space-5: 2rem;     /* 32 */
  --ux-space-6: 3rem;     /* 48 */
  --ux-space-7: 4rem;     /* 64 */
  /* CJK-friendly measures (ch is Latin-biased) */
  --ux-prose: 40rem;          /* ~ readable paragraph width */
  --ux-measure-title: 28rem;  /* section titles */
  --ux-measure-display: 28rem;/* display titles */
}

/* —— Focus —— */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent, var(--primary, #0D5C63));
  outline-offset: 3px;
}

.btn:focus-visible,
.nav-main a:focus-visible,
.sub-nav a:focus-visible,
.logo:focus-visible,
.panel-link:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent, var(--primary, #0D5C63));
  outline-offset: 3px;
}

body.theme-dark :focus-visible,
body.theme-dark .btn:focus-visible {
  outline-color: var(--gold, var(--accent, #C9A227));
}

/* —— Cursor & interaction —— */
a,
button,
.btn,
summary,
.nav-toggle,
label[for],
select,
input[type="submit"],
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

a,
.btn,
.nav-main a,
.sub-nav a,
.panel-link,
.nav-toggle {
  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    opacity 200ms ease,
    transform 200ms ease;
}

/* —— Touch —— */
html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn,
.nav-main a,
.sub-nav a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}

/* Mobile menu button: hidden on PC/tablet; shown only <=768px */
.nav-toggle {
  display: none !important;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

.nav-main a,
.sub-nav a {
  min-width: auto;
  padding-block: 10px;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex !important;
  }
}

.btn-group {
  gap: max(12px, var(--ux-space-2));
  align-items: center;
}

.nav-main {
  gap: max(8px, var(--ux-space-1)) 28px;
}

.sub-nav-inner {
  gap: max(8px, var(--ux-space-1)) 22px;
}

/* —— Skip link —— */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--primary, #0D5C63);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 4px;
  transform: translateY(-160%);
  transition: transform 200ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.theme-dark .skip-link {
  background: var(--gold, #C9A227);
  color: #0F1419 !important;
}

/* —— Header —— */
.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

body.theme-dark .site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

#main-content:focus,
#main-content:focus-visible {
  outline: none;
}

/* =========================================================
   TYPOGRAPHY — alignment, measure, wrap, hierarchy
   ========================================================= */

body {
  font-size: max(16px, 1rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  /* 한국어: 어절/단어 중간에서 끊지 않음. 긴 URL 등만 필요 시 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

h1 {
  max-inline-size: min(100%, var(--ux-measure-title));
  text-align: start;
  line-height: 1.3;
}

h2 {
  text-align: start;
}

/* Balanced headings (progressive; natural wrap still works) */
h1,
h2,
.master-msg,
.hero-brand {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: none;
}

h3,
.badge-label {
  text-wrap: pretty;
  word-break: keep-all;
}

p,
li,
.lead,
.panel p,
.step p,
.cta-band p,
.section-head p,
.faq details p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Readable line length for body copy */
.section-head,
.section-head p,
.hero-content .lead,
.hero-content > p:not(.framework-inline):not(.hero-brand):not(.master-msg):not(.badge-label),
.cta-band p,
.form-note,
.faq details p,
.timeline-item p,
.principle-item p,
.personality-card p,
.step p,
.panel > p,
.name-node p {
  max-inline-size: var(--ux-prose);
}

.section-head {
  max-width: min(640px, 100%);
}

.section-head h2 {
  max-inline-size: min(100%, var(--ux-measure-title));
  margin-block: 0 var(--ux-space-3);
  text-align: start;
}

.section-head p {
  margin-block: 0;
  text-align: start;
}

.hero-content {
  text-align: start;
}

.hero-content .lead {
  max-inline-size: min(40rem, 100%);
  line-height: 1.7;
}

.master-msg {
  max-inline-size: min(100%, var(--ux-measure-display));
  line-height: 1.35;
}

/* Avoid clipping / fixed heights on text */
h1, h2, h3, h4, p, li, label, summary, .badge, .badge-label {
  height: auto;
  overflow: visible;
  white-space: normal;
}

/* Badges / chips stay on one line */
.badge,
.badge-label,
.step-num,
.module-name,
.timeline-year,
.footer-title,
.framework-inline {
  white-space: nowrap;
}

.badge {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Framework chips may wrap as a group, not mid-label */
.framework-inline {
  white-space: normal;
  row-gap: var(--ux-space-1);
}

.framework-inline span {
  white-space: nowrap;
}

.flow-item {
  white-space: nowrap;
}

.flow-row {
  gap: max(10px, var(--ux-space-2));
  align-items: center;
}

/* =========================================================
   LAYOUT — alignment, position, stacking, rhythm
   ========================================================= */

.container {
  width: min(100% - clamp(32px, 5vw, 56px), var(--max, 1200px));
  margin-inline: auto;
}

/* Vertical section rhythm */
.section {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.section-head {
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.section-media-row .section-head {
  margin-bottom: 0;
  align-self: center;
}

.section-media-row {
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* Hero split: consistent vertical alignment */
.hero-split {
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 2.5rem);
}

.hero-split .hero-content {
  justify-content: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.hero-media {
  align-self: center;
}

.hero-bleed .hero-content {
  width: min(100% - clamp(32px, 5vw, 56px), var(--max, 1140px));
  margin-inline: auto;
}

/* Grids align tops consistently */
.grid-2,
.grid-3,
.grid-5,
.steps,
.status-list,
.personality-grid {
  align-items: stretch;
}

.panel,
.step,
.status-block,
.personality-card,
.module {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: start;
}

.module {
  text-align: center;
  align-items: center;
}

.panel .panel-link,
.panel .btn-group {
  margin-top: auto;
  padding-top: var(--ux-space-3);
}

.panel-media {
  margin-inline: 0;
  width: calc(100% + 0px);
}

/* Name story / timeline left-aligned copy */
.name-flow {
  align-items: stretch;
}

.name-node {
  text-align: center;
}

.timeline {
  text-align: start;
}

/* CTA band: left-aligned copy, flex CTA group */
.cta-band .container {
  text-align: start;
}

.cta-band h2 {
  max-inline-size: min(100%, var(--ux-measure-title));
  text-wrap: balance;
  margin-bottom: var(--ux-space-3);
}

.cta-band p {
  margin-bottom: 0;
}

.cta-band .btn-group {
  margin-top: var(--ux-space-5);
}

/* Footer alignment */
.footer-grid {
  align-items: start;
  text-align: start;
}

.footer-bottom {
  align-items: center;
}

/* Form stack alignment */
.form {
  width: min(100%, 560px);
  text-align: start;
}

.form-group label {
  text-align: start;
}

/* Principle list alignment */
.principle-item {
  align-items: start;
  text-align: start;
}

/* =========================================================
   Images / media positioning
   ========================================================= */

.media-frame img,
.panel-media img,
.product-shot img,
.hero-media img {
  background: color-mix(in srgb, var(--border, #e2e8f0) 60%, transparent);
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.hero-media img {
  min-height: 280px;
  height: 100%;
}

.product-shot,
.media-frame {
  width: 100%;
}

/* =========================================================
   Forms / FAQ
   ========================================================= */

.btn.is-loading {
  opacity: 0.72;
  pointer-events: none;
  position: relative;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-group input:invalid:not(:placeholder-shown):not(:focus),
.form-group textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #DC2626;
}

.form-error {
  display: none;
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: #DC2626;
  line-height: 1.4;
}

.form-group.has-error .form-error {
  display: block;
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: #DC2626;
}

.faq summary {
  min-height: 44px;
  align-items: center;
  text-align: start;
  gap: var(--ux-space-3);
}

.faq details p {
  text-align: start;
}

/* —— Contrast helpers —— */
p,
.step p,
.panel p,
.module p {
  color: color-mix(in srgb, var(--secondary, #64748B) 88%, var(--text, #1E293B));
}

body.theme-dark p,
body.theme-dark .step p,
body.theme-dark .panel p,
body.theme-dark .module p {
  color: color-mix(in srgb, var(--muted, #8B9AAB) 85%, var(--cream, #F5F0E8));
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-bg,
  .hero-bleed .hero-photo img {
    animation: none !important;
  }
}

body.nav-open {
  overflow: hidden;
}

@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   Responsive: stack order & text reflow
   ========================================================= */

@media (max-width: 900px) {
  .section-media-row,
  .hero-split {
    grid-template-columns: 1fr;
  }

  /* Photo first on mobile for visual anchor, then copy */
  .hero-split .hero-media {
    order: -1;
    margin: 0;
    min-height: 220px;
  }

  .hero-split .hero-content {
    padding-block: clamp(2rem, 6vw, 3rem);
  }

  .section-media-row .media-frame {
    order: -1;
  }

  .section-head h2,
  .cta-band h2,
  .master-msg {
    max-inline-size: min(100%, var(--ux-measure-title));
  }

  .badge,
  .badge-label,
  .step-num,
  .module-name {
    white-space: nowrap;
  }

  .flow-row {
    align-items: stretch;
  }

  .flow-item {
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.7;
  }

  h1 {
    line-height: 1.3;
  }

  h2 {
    line-height: 1.35;
  }

  .framework-inline {
    justify-content: flex-start;
  }

  .btn-group {
    width: 100%;
  }

  .btn-group .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux-space-2);
  }

  /* Sub-nav: keep labels whole, allow horizontal scroll */
  .sub-nav a {
    flex-shrink: 0;
  }
}

/* Very narrow: prevent label clipping */
@media (max-width: 375px) {
  .container {
    width: min(100% - 24px, var(--max, 1200px));
  }

  .badge {
    font-size: 0.65rem;
    padding-inline: 8px;
  }

  .header-cta {
    padding-inline: 10px;
  }
}

/* Z-index stack tokens */
.site-header { z-index: 100; }
.sub-nav { z-index: 90; }
.skip-link { z-index: 1000; }
.nav-main.is-open { z-index: 200; }

body.nav-open .site-header {
  box-shadow: none;
}

/* —— Utility spacing (replaces inline layout styles) —— */
.ux-mt-xs { margin-top: 0.75rem; }
.ux-mt-sm { margin-top: 1.5rem; }
.ux-mt-md { margin-top: 2rem; }
.ux-mt-lg { margin-top: 2.5rem; }
.ux-mb-lg { margin-bottom: 2.5rem; }
.ux-pt-md { padding-top: 2rem; }
.ux-align-center { align-items: center; }
.grid-2.ux-align-center,
.section-media-row.ux-align-center {
  align-items: center;
}

/* Fullscreen hero — wide copy, no tight measure */
.hero.hero-fullscreen,
.hero-bleed.hero-fullscreen {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.hero-fullscreen .hero-content {
  width: min(100% - clamp(32px, 5vw, 64px), var(--max, 1200px));
  margin-inline: auto;
  max-width: none;
  padding-block: clamp(5rem, 12vh, 7.5rem);
}

.hero-fullscreen .master-msg,
.hero-fullscreen h1,
.hero-fullscreen .lead,
.hero-fullscreen .hero-brand,
.hero-fullscreen .badge-label {
  max-inline-size: none;
}

.hero-fullscreen .master-msg {
  max-width: min(100%, var(--hero-copy-width, 40rem));
}

.hero-fullscreen h1 {
  max-width: min(100%, var(--hero-copy-width, 40rem));
}

.hero-fullscreen .lead {
  max-width: min(100%, var(--hero-lead-width, 38rem));
  max-inline-size: none;
}

@media (max-width: 900px) {
  .hero-fullscreen .hero-media { display: none; }
}