/* ============================================================
   1hour (원아워) — Colors & Type  (홈페이지 리뉴얼 적용본)
   학원용 영어 학습 OS · Mint + Dark + White system
   원본: 1hour Design System / colors_and_type.css
   ============================================================ */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/PretendardVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/InterVariable.woff2") format("woff2-variations");
}

:root {
  /* ---------- Mono · Gray ---------- */
  --white:    #FFFFFF;
  --gray-00:  #F9F9F9;
  --gray-01:  #F2F2F2;
  --gray-02:  #E5E5E5;
  --gray-03:  #CCCCCC;
  --gray-04:  #B2B2B2;
  --gray-05:  #999999;
  --gray-06:  #808080;
  --gray-07:  #666666;
  --gray-08:  #4D4D4D;
  --gray-09:  #333333;
  --gray-10:  #1A1A1A;
  --black:    #000000;

  /* ---------- Brand · Mint ---------- */
  --brand-01: #E7FFFB;
  --brand-02: #D0F8F3;
  --brand-03: #B5F4EC;
  --brand-04: #92EEE2;
  --brand-05: #7DE3D8;
  --brand-06: #55D7C9;
  --brand-07: #2CCBBA;
  --brand-08: #10B9A7;
  --brand-09: #00A18E;
  --brand-10: #008C7B;
  --brand-11: #007163;
  --brand-12: #005B4F;

  --green-02: #ECFDF3;
  --green-07: #12B76A;
  --red-02:   #FFEAE9;
  --red-08:   #FF5A50;
  --lblue-08: #00B2FF;
  --yellow-09:#FFA800;

  /* ---------- Semantic ---------- */
  --primary:        var(--brand-08); /* #10B9A7 */
  --primary-hover:  var(--brand-09); /* #00A18E */
  --primary-pressed:var(--brand-10); /* #008C7B */
  --primary-dark:   var(--brand-11); /* #007163 */
  --primary-light:  var(--brand-01); /* #E7FFFB */
  --primary-tint:   var(--brand-02); /* #D0F8F3 */
  --on-primary:     var(--white);

  --success:        var(--green-07);
  --success-bg:     var(--green-02);
  --danger:         var(--red-08);
  --danger-bg:      var(--red-02);

  --ink:            var(--gray-10); /* #1A1A1A — premium dark */
  --ink-soft:       var(--gray-09);

  --text-1:         var(--gray-10);
  --text-2:         var(--gray-07);
  --text-3:         var(--gray-05);
  --text-on-dark:   var(--white);
  --text-on-dark-2: var(--gray-03);

  --border:         var(--gray-02);
  --border-strong:  var(--gray-03);

  --bg-page:        var(--gray-00);
  --bg-card:        var(--white);
  --bg-row-rec:     var(--brand-01);

  /* ---------- Gradient (only for accent bars / hero) ---------- */
  --grad-mint:      linear-gradient(90deg, var(--brand-08) 0%, var(--brand-06) 100%);
  --grad-mint-cyan: linear-gradient(90deg, var(--brand-08) 0%, var(--lblue-08) 100%);

  /* ---------- Type ---------- */
  --font-kr:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
              system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  /* 숫자 전용: 브랜드 규칙에 따라 Inter 우선 */
  --font-num: "Inter", "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;

  /* ---------- Spacing ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* ---------- Radii ---------- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.18);
  --shadow-mint: 0 12px 32px -8px rgba(16,185,167,0.35);
}

html, body {
  margin: 0;
  font-family: var(--font-kr);
  font-feature-settings: "ss01","ss02","tnum","case";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-1);
  background: var(--bg-card);
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* numbers */
.tnum { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings:"tnum","case"; letter-spacing:-0.02em; }

/* eyebrow */
.eyebrow {
  font-family: var(--font-num);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--primary);
}

/* ============================================================
   반응형 (모바일 ~480 · 태블릿 ~768 · 데스크톱 1024+)
   데스크톱 디자인은 그대로, 모바일/태블릿만 적응
   ============================================================ */

/* 모바일 햄버거 / 데스크톱 액션 토글 */
.hamburger { display: none; }
@media (max-width: 768px) {
  .nav-actions-desktop { display: none !important; }
  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: none; border: 1px solid var(--border); border-radius: var(--r-md);
    color: var(--text-1); cursor: pointer; padding: 0;
  }
  .hamburger:hover { border-color: var(--primary); color: var(--primary); }
}

/* 모바일 드로어 */
.mobile-drawer {
  display: none;
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 8px 24px 16px;
  flex-direction: column;
}
.mobile-drawer.is-open { display: flex; }
@media (min-width: 769px) { .mobile-drawer { display: none !important; } }
.mobile-drawer .navlink {
  display: flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--gray-01);
}
.mobile-drawer .drawer-cta {
  margin-top: 12px; width: 100%; min-height: 48px; font-size: 15px;
}
.mobile-drawer .drawer-login {
  min-height: 44px; border-bottom: none;
}

/* 좌우 여백 16px (모바일) */
@media (max-width: 480px) {
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
}

/* 히어로 타이포 축소 (모바일) */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.95rem !important; line-height: 1.26 !important; letter-spacing: -0.02em !important; }
  .hero .hero-sub { font-size: 15px !important; }
}

/* CTA 풀폭 + 터치 44px (모바일) */
@media (max-width: 480px) {
  .btn-xl { width: 100%; min-height: 48px; }
  .cta-row { flex-direction: column; width: 100%; }
  .cta-row > a { width: 100%; min-height: 48px; }
}

/* 후기 카드 패딩 축소 (모바일) */
@media (max-width: 480px) {
  .review-card { padding: 22px !important; min-height: 0 !important; }
  .review-card .review-quote { font-size: 16px !important; }
}

/* 상단 띠 (모바일) */
@media (max-width: 480px) {
  .top-banner { padding-left: 16px !important; padding-right: 16px !important; }
  .top-banner .top-banner-label { font-size: 12.5px !important; }
}

/* 기능 페이지 시연 무대 — 모바일에서 축소(절대배치 요소 겹침 방지) */
@media (max-width: 480px) {
  .demo-frame { overflow: hidden; height: 292px; }
  .demo-stage { width: 460px; transform: scale(0.76); transform-origin: top left; }
}