/* ==========================================================================
   ABLE.D — Global styles
   Warm deep charcoal + cream + brand red. Pretendard throughout.
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --ink: #1A1714;
  --ink-deep: #13100D;
  --ink-soft: #211C18;
  --cream: #F4EFE7;
  --brand: #E11D14;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

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

/* Mobile safety: prevent horizontal scroll without breaking position:sticky.
   overflow-x: clip (vs hidden) does not create a scroll container. */
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }

html, body {
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--ink);
  color: var(--cream);
  font-feature-settings: "ss01", "cv01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--brand); color: #fff; }

/* ---- Scrollbar (subtle, warm) ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb { background: #3a332c; border-radius: 999px; border: 3px solid var(--ink-deep); }
::-webkit-scrollbar-thumb:hover { background: #4a4239; }

/* ---- Display helpers ---- */
/* One serif for Korean + Latin headings — no mid-heading font switch */
.font-display { font-family: 'Pretendard', sans-serif; font-weight: 700; }
.font-latin { font-family: 'Pretendard', sans-serif; }
.tracking-eyebrow { letter-spacing: 0.22em; }

/* Latin/number accents inside Korean headings */
.tabular { font-family: 'Pretendard', sans-serif; font-feature-settings: "tnum"; }

/* ---- Eyebrow label ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: 'Pretendard', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #C8584F;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.7;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-weight: 600; font-size: 0.95rem; line-height: 1;
  /* 한글 라벨 광학 보정: 디센더가 없어 떠 보이므로 1px 하향 */
  padding: calc(0.95rem + 1px) 1.6rem calc(0.95rem - 1px); border-radius: 999px;
  cursor: pointer; transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: #F5443B; }
.btn-ghost { border: 1px solid rgba(244,239,231,0.22); color: var(--cream); }
.btn-ghost:hover { border-color: rgba(244,239,231,0.5); background: rgba(244,239,231,0.04); }
.btn .arrow { transition: transform .22s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- Hairline rule ---- */
.hairline { height: 1px; background: rgba(244,239,231,0.10); border: 0; }

/* ---- Animated underline link ---- */
.ulink { position: relative; }
.ulink::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
}
.ulink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Nav link (header) ---- */
.nav-link { position: relative; color: rgba(244,239,231,0.72); transition: color .2s ease; }
.nav-link:hover { color: var(--cream); }
.nav-link[aria-current] { color: var(--cream); }
.nav-link[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--brand);
}

/* ---- Nav dropdown (커리큘럼) ---- */
.nav-dropdown { position: relative; }
.nav-dropdown .chev { transition: transform .2s ease; }
.nav-dropdown:hover .chev, .nav-dropdown:focus-within .chev { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  padding-top: 1.6rem; /* hover bridge: link → panel */
  transform: translateX(-50%) translateY(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}
.nav-menu-panel {
  min-width: 240px; padding: 6px;
  background: rgba(19,16,13,0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(244,239,231,0.10); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.nav-menu-item {
  display: block; padding: 0.7rem 0.9rem; border-radius: 10px;
  font-size: 0.92rem; color: rgba(244,239,231,0.72);
  transition: background-color .15s ease, color .15s ease;
}
.nav-menu-item:hover { background: rgba(244,239,231,0.06); color: var(--cream); }
.nav-menu-item[aria-current="page"] { color: var(--cream); }

/* ---- Header scroll state ---- */
.site-header { transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.site-header.is-scrolled {
  background: rgba(19,16,13,0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(244,239,231,0.08);
}

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Card ---- */
.card {
  background: var(--ink-soft);
  border: 1px solid rgba(244,239,231,0.08);
  border-radius: 18px;
  transition: border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.card-hover:hover { border-color: rgba(225,29,20,0.45); transform: translateY(-4px); }

/* ---- Grain / texture overlay for warmth ---- */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Body copy measure ---- */
.measure { max-width: 65ch; }

/* ---- Timeline connector ---- */
.stage-rail { background: linear-gradient(180deg, rgba(225,29,20,0.6), rgba(244,239,231,0.06)); }

/* ---- Marquee ---- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ==========================================================================
   v2 refinements — type hierarchy, layout variation, tonal depth, motif
   ========================================================================== */

/* ---- Korean-aware line breaking (word-unit) — headings + body ---- */
h1, h2, h3, h4, .font-display { word-break: keep-all; }
p, li, dd, dt, blockquote, figcaption { word-break: keep-all; }

.display-xl { font-family: 'Pretendard',sans-serif; font-weight: 700;
  font-size: clamp(2.1rem, 5.4vw, 3.95rem); line-height: 1.24; letter-spacing: -0.02em; }
.display-lg { font-family: 'Pretendard',sans-serif; font-weight: 700;
  font-size: clamp(1.85rem, 4.4vw, 2.9rem); line-height: 1.32; letter-spacing: -0.018em; }
.t-h2 { font-family: 'Pretendard',sans-serif; font-weight: 600;
  font-size: clamp(1.55rem, 3.2vw, 2.25rem); line-height: 1.36; letter-spacing: -0.015em; }

/* Three-tier body hierarchy (Korean word-unit line breaking) */
.lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.72; color: #B8AE9F; word-break: keep-all; }
.copy { font-size: 0.97rem; line-height: 1.72; color: #B8AE9F; word-break: keep-all; }
.caption { font-size: 0.76rem; letter-spacing: 0.05em; color: #9A9184; word-break: keep-all; }

/* ---- Tonal depth: warm panel (breaks the ink / ink-deep monotony) ---- */
.panel-warm { background: linear-gradient(158deg, #241A13 0%, #16110D 60%, #130F0C 100%); }

/* ---- Outlined editorial numerals (large layout-break accents) ---- */
.num-outline {
  font-family: 'Pretendard',sans-serif; font-weight: 800; line-height: 0.86;
  font-size: clamp(3.4rem, 8.5vw, 6.6rem); color: transparent;
  -webkit-text-stroke: 1.4px rgba(225,29,20,0.55); text-stroke: 1.4px rgba(225,29,20,0.55);
}

/* ---- Bracket-D motif (signature, from the ABLE.D logo) ---- */
.bracket-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 2px solid var(--brand);
  border-left: none; border-radius: 0 14px 14px 0;
}
.bracket-watermark { color: rgba(225,29,20,0.06); }

/* ---- Edge row (asymmetric alternating) ---- */
.edge-row { border-top: 1px solid rgba(244,239,231,0.10); }
.edge-row:last-child { border-bottom: 1px solid rgba(244,239,231,0.10); }
.edge-row .edge-title { transition: color .25s ease; }
.edge-row:hover .edge-title { color: var(--brand); }

/* ---- Proof gallery: gentle warm grade to unify mixed on-site photos ---- */
.proof-img { filter: sepia(0.05) saturate(1.03) contrast(1.02) brightness(0.99); }

/* ---- Testimonial mark ---- */
.quote-mark { font-family: 'Pretendard',sans-serif; font-weight: 800; font-size: 3rem; line-height: 0.5; color: rgba(225,29,20,0.4); }