/* ============================================================
   REELCONOMY · SHARED STYLESHEET v1.0
   Editorial journal tone — Noto Serif KR + Nanum Myeongjo + JetBrains Mono
   Mobile-first. Used across all pages.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Serif+KR:wght@400;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --ink: #0E0D0B;
  --paper: #F4F1EA;
  --cream: #E8E2D3;
  --accent: #6ED3CB;
  --mute: #8A847C;
  --line: #1C1A17;
  --warn: #E8573F;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { -webkit-font-smoothing: antialiased; box-sizing: border-box; }
html, body { background: var(--paper); color: var(--ink); }
body { font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; padding-bottom: calc(72px + var(--safe-bottom)); margin: 0; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.serif { font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; font-weight: 900; letter-spacing: -0.02em; }
.myeongjo { font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif; }
.mono { font-family: 'JetBrains Mono', 'Space Grotesk', monospace; }

/* ============ NAV (shared) ============ */
.topnav { position: sticky; top: 0; z-index: 50; background: rgba(244,241,234,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(14,13,11,.08); }
.topnav-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.topnav-brand { font-family: 'Noto Serif KR', serif; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.topnav-brand em { font-style: normal; color: var(--accent); font-family: 'Nanum Myeongjo', serif; }
.topnav-menu { display: none; gap: 28px; font-size: 14px; font-weight: 500; }
.topnav-menu a:hover { color: var(--accent); }
.topnav-account { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.topnav-account button { color: rgba(14,13,11,.7); }
.topnav-account button:hover { color: var(--accent); }
.topnav-mobile { display: flex; gap: 2px; padding: 0 16px 10px; overflow-x: auto; font-size: 13px; -webkit-overflow-scrolling: touch; }
.topnav-mobile::-webkit-scrollbar { display: none; }
.topnav-mobile a { white-space: nowrap; padding: 6px 10px; border-radius: 4px; color: rgba(14,13,11,.7); }
.topnav-mobile a.is-current { background: var(--ink); color: var(--paper); }
@media (min-width: 820px) {
  .topnav-inner { height: 68px; padding: 0 32px; }
  .topnav-brand { font-size: 26px; }
  .topnav-menu { display: flex; }
  .topnav-mobile { display: none; }
}

/* ============ PAGE HEAD (masthead for sub-pages) ============ */
.page-head { background: var(--ink); color: var(--paper); padding: 40px 20px 32px; border-bottom: 2px solid var(--accent); }
.page-head-inner { max-width: 1240px; margin: 0 auto; }
.page-head .edition-bar { display: flex; justify-content: space-between; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: rgba(244,241,234,.55); padding: 8px 0; border-top: 1px solid rgba(244,241,234,.25); border-bottom: 1px solid rgba(244,241,234,.25); text-transform: uppercase; flex-wrap: wrap; }
.page-head h1 { font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: clamp(44px, 10vw, 104px); line-height: .92; letter-spacing: -0.04em; margin: 28px 0 16px; }
.page-head h1 em { font-style: normal; color: var(--accent); }
.page-head .lede { font-family: 'Nanum Myeongjo', serif; font-size: clamp(16px, 2.2vw, 22px); color: rgba(244,241,234,.78); line-height: 1.6; max-width: 720px; }
.page-head .lede b { color: var(--paper); font-weight: 700; border-bottom: 1.5px solid var(--accent); }

/* ============ SECTIONS ============ */
section.editorial { max-width: 1240px; margin: 0 auto; padding: 72px 20px; }
@media (min-width: 820px) { section.editorial { padding: 120px 32px; } }

.sec-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mute); letter-spacing: 0.25em; text-transform: uppercase; }
.sec-head { font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: clamp(30px, 6vw, 64px); letter-spacing: -0.03em; line-height: 1.08; margin: 14px 0 28px; text-wrap: balance; }
.sec-head em { font-style: normal; font-family: 'Nanum Myeongjo', serif; color: var(--accent); }
.sec-lede { font-family: 'Nanum Myeongjo', serif; font-size: clamp(15px, 2vw, 18px); color: var(--mute); line-height: 1.7; max-width: 680px; margin-bottom: 40px; text-wrap: pretty; }

/* Dark section variant */
section.ink { background: var(--ink); color: var(--paper); }
section.ink .sec-num { color: var(--accent); }
section.ink .sec-head { color: var(--paper); }
section.ink .sec-lede { color: rgba(244,241,234,.7); }
section.cream { background: var(--cream); }

/* ============ BUTTONS ============ */
.btn-primary { display: inline-block; background: var(--accent); color: var(--ink); font-weight: 800; padding: 16px 28px; border: 2px solid var(--accent); transition: all .2s; font-size: 15px; text-align: center; }
.btn-primary:hover { background: transparent; color: var(--accent); }
.btn-primary.dark-bg:hover { color: var(--paper); border-color: var(--paper); }
.btn-ghost { display: inline-block; border: 1px solid rgba(14,13,11,.4); color: var(--ink); padding: 16px 28px; font-weight: 500; transition: all .2s; font-size: 15px; text-align: center; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost.on-dark { border-color: rgba(244,241,234,.4); color: var(--paper); }
.btn-ghost.on-dark:hover { border-color: var(--accent); color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn-primary, .btn-row .btn-ghost { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* ============ PULLQUOTE ============ */
.pullquote { border-left: 4px solid var(--ink); padding: 8px 0 8px 24px; font-family: 'Nanum Myeongjo', serif; font-size: clamp(22px, 3vw, 36px); line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
.pullquote footer { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mute); letter-spacing: 0.2em; margin-top: 14px; text-transform: uppercase; }
section.ink .pullquote { border-left-color: var(--accent); color: var(--paper); }
section.ink .pullquote footer { color: rgba(244,241,234,.5); }

/* ============ PROGRAM ROWS (reuse) ============ */
.prog-stack { display: flex; flex-direction: column; gap: 0; border-top: 2px solid var(--ink); }
.prog-row { display: grid; grid-template-columns: 50px 1fr auto; gap: 14px; padding: 24px 0; border-bottom: 1px solid rgba(14,13,11,.15); align-items: center; transition: background .3s; }
.prog-row:hover { background: var(--cream); padding-left: 12px; padding-right: 12px; }
.prog-row .pr-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--mute); letter-spacing: 0.2em; }
.prog-row .pr-name { font-family: 'Noto Serif KR', serif; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.prog-row .pr-name small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--mute); letter-spacing: 0.15em; margin-top: 4px; font-weight: 400; text-transform: uppercase; }
.prog-row .pr-desc { grid-column: 1 / -1; padding-left: 64px; font-family: 'Nanum Myeongjo', serif; font-size: 15px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.prog-row .pr-arrow { font-family: 'JetBrains Mono', monospace; font-size: 22px; color: var(--ink); transition: transform .2s; }
.prog-row:hover .pr-arrow { transform: translateX(8px); color: var(--accent); }
@media (min-width: 820px) {
  .prog-row { grid-template-columns: 80px 1fr 2fr auto; gap: 32px; padding: 36px 0; }
  .prog-row .pr-name { font-size: 28px; }
  .prog-row .pr-desc { grid-column: auto; padding-left: 0; font-size: 16px; }
}

/* ============ CARDS (generic) ============ */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 2px solid var(--ink); }
.card-cell { padding: 28px 24px; border-bottom: 1px solid rgba(14,13,11,.15); }
.card-cell:last-child { border-bottom: none; }
.card-cell .c-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mute); letter-spacing: 0.25em; margin-bottom: 10px; text-transform: uppercase; }
.card-cell h3 { font-family: 'Noto Serif KR', serif; font-size: 22px; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 10px; }
.card-cell h3 em { font-style: normal; color: var(--accent); }
.card-cell p { font-family: 'Nanum Myeongjo', serif; font-size: 15px; color: var(--mute); line-height: 1.7; margin: 0; text-wrap: pretty; }
@media (min-width: 820px) {
  .card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .card-grid.cols-2 .card-cell { border-right: 1px solid rgba(14,13,11,.15); border-bottom: 1px solid rgba(14,13,11,.15); }
  .card-grid.cols-2 .card-cell:nth-child(2n) { border-right: none; }
  .card-grid.cols-2 .card-cell:nth-last-child(-n+2) { border-bottom: none; }
  .card-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .card-grid.cols-3 .card-cell { border-right: 1px solid rgba(14,13,11,.15); border-bottom: 1px solid rgba(14,13,11,.15); }
  .card-grid.cols-3 .card-cell:nth-child(3n) { border-right: none; }
  .card-cell { padding: 36px 32px; }
  .card-cell h3 { font-size: 26px; }
}
section.ink .card-grid { border-color: rgba(244,241,234,.3); }
section.ink .card-cell { border-color: rgba(244,241,234,.2) !important; }
section.ink .card-cell h3 { color: var(--paper); }
section.ink .card-cell p { color: rgba(244,241,234,.6); }

/* ============ CURRICULUM LIST (for /class) ============ */
.curriculum { border-top: 3px solid var(--ink); }
.curri-week { border-bottom: 1px solid rgba(14,13,11,.15); padding: 28px 0; }
.curri-week .w-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.curri-week .w-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mute); letter-spacing: 0.3em; }
.curri-week .w-title { font-family: 'Noto Serif KR', serif; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
.curri-week .w-title em { font-style: normal; color: var(--accent); }
.curri-week .w-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mute); letter-spacing: 0.15em; }
.curri-week ul { list-style: none; padding: 0; margin: 0; }
.curri-week li { font-family: 'Nanum Myeongjo', serif; font-size: 15px; color: var(--ink); padding: 6px 0; padding-left: 20px; position: relative; line-height: 1.6; }
.curri-week li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
@media (min-width: 820px) {
  .curri-week .w-title { font-size: 32px; }
  .curri-week li { font-size: 16px; }
}

/* ============ FOOTER (shared) ============ */
footer.paper-foot { border-top: 2px solid var(--ink); padding: 48px 20px 32px; max-width: 1240px; margin: 0 auto; }
footer.paper-foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
footer.paper-foot h5 { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mute); letter-spacing: 0.25em; text-transform: uppercase; margin: 0 0 14px; }
footer.paper-foot a { display: block; font-family: 'Pretendard Variable', sans-serif; font-size: 13px; color: var(--ink); padding: 4px 0; }
footer.paper-foot a:hover { color: var(--accent); }
footer.paper-foot .brand { font-family: 'Noto Serif KR', serif; font-size: 28px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 14px; color: var(--ink); }
footer.paper-foot .brand em { color: var(--accent); font-style: normal; }
footer.paper-foot .tagline { font-family: 'Nanum Myeongjo', serif; font-size: 14px; color: var(--mute); line-height: 1.7; max-width: 320px; }
footer.paper-foot .colophon { border-top: 1px solid rgba(14,13,11,.15); margin-top: 32px; padding-top: 20px; display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--mute); letter-spacing: 0.15em; text-transform: uppercase; flex-wrap: wrap; gap: 10px; }
@media (min-width: 820px) {
  footer.paper-foot { padding: 60px 32px 40px; }
  footer.paper-foot .cols { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  footer.paper-foot .brand { font-size: 32px; }
}

/* ============ COUNTDOWN BAR ============ */
.countdown-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--ink); color: var(--paper); padding: 10px 12px calc(10px + var(--safe-bottom)); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; border-top: 2px solid var(--accent); }
.countdown-bar .cb-text { font-family: 'Nanum Myeongjo', serif; font-weight: 700; font-size: 12px; }
.countdown-bar .cb-text em { font-style: normal; color: var(--accent); }
.countdown-bar .cb-timer { display: flex; gap: 3px; align-items: center; font-family: 'JetBrains Mono', monospace; }
.countdown-bar .cb-unit { background: var(--accent); color: var(--ink); font-weight: 700; font-size: 12px; padding: 3px 6px; min-width: 28px; text-align: center; }
.countdown-bar .cb-sep { color: rgba(244,241,234,.4); font-weight: 700; }
.countdown-bar .cb-btn { background: var(--accent); color: var(--ink); font-weight: 800; font-size: 12px; padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; }
.countdown-bar .cb-btn:hover { background: var(--paper); }
@media (min-width: 640px) {
  .countdown-bar { padding: 14px 20px calc(14px + var(--safe-bottom)); gap: 20px; }
  .countdown-bar .cb-text { font-size: 14px; }
  .countdown-bar .cb-unit { font-size: 14px; padding: 4px 8px; min-width: 32px; }
  .countdown-bar .cb-btn { font-size: 13px; padding: 10px 22px; }
}

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }

::selection { background: var(--accent); color: var(--ink); }


/* ============================================================
   MOBILE READABILITY HARDENING — appended for v1.0 deploy
   ============================================================ */
@media (max-width: 640px) {
  /* 1. tap targets ≥ 44px */
  button, a.btn, .btn, .topnav-mobile a, input[type="button"], input[type="submit"] {
    min-height: 44px;
  }
  /* 2. body 16px floor (prevents iOS zoom on input focus) */
  body, p, li { font-size: 16px; line-height: 1.65; }
  input, textarea, select { font-size: 16px; }
  /* 3. headline scale */
  h1, .h1 { font-size: clamp(28px, 8vw, 44px); line-height: 1.15; letter-spacing: -0.025em; }
  h2, .h2 { font-size: clamp(22px, 6vw, 32px); line-height: 1.2; }
  h3, .h3 { font-size: clamp(18px, 5vw, 22px); line-height: 1.3; }
  /* 4. comfortable side padding */
  .container, main, section { padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right)); }
  /* 5. wider tap area for nav */
  .topnav-mobile a { padding: 10px 14px; }
  /* 6. tables/code overflow */
  pre, code, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 7. avoid orphan words */
  h1, h2, h3, .serif { text-wrap: balance; word-break: keep-all; }
  p { text-wrap: pretty; word-break: keep-all; }
}

/* iOS standalone (PWA) — top safe area */
@media all and (display-mode: standalone) {
  .topnav { padding-top: env(safe-area-inset-top, 0px); }
  body { padding-top: 0; }
}

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