/* Korean display type: explicit families avoid synthetic, heavy fallback faces. */
:root {
  --display-sans: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
  --display-serif: 'Noto Serif KR', serif;
}

body { font-family: var(--display-sans); font-weight: 400; }

.hero-copy h1,
.brand-intro h1,
.mini-site > strong {
  font-synthesis: none;
  word-break: keep-all;
  overflow-wrap: normal;
  text-rendering: optimizeLegibility;
}

.hero-copy h1 {
  font-family: var(--display-sans);
  font-size: clamp(40px, 4.1vw, 62px);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -.045em;
  margin: 16px 0 22px;
  text-wrap: balance;
}

.hero-copy h1 .headline-line,
.section-heading h2 .copy-line {
  display: block;
}

.hero-copy .eyebrow {
  font-family: var(--display-sans);
  font-weight: 500;
  letter-spacing: .16em;
}

.hero-spec {
  font-family: var(--display-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -.015em;
}

.hero-actions .btn {
  font-family: var(--display-sans);
  font-weight: 500;
  font-size: 15px;
  min-height: 50px;
  padding: 13px 24px;
}

/* T1: a quiet, two-line brand statement. */
.t1 .hero-copy { top: 43%; }
.t1 .hero-copy h1 {
  font-family: var(--display-serif);
  font-size: clamp(40px, 4.1vw, 60px);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -.06em;
}
.t1 .hero-actions { margin-top: 38px; }

/* T2: generous leading for a cinematic serif title. */
.t2 .hero-copy { top: 39%; }
.t2 .hero-copy h1 {
  font-family: var(--display-serif);
  font-size: clamp(36px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -.045em;
}
.t2 .hero-copy .eyebrow { font-size: 10px; }
.t2 .hero-spec { font-size: 14px; }

/* T3: precise and contemporary, without a poster-like heavy weight. */
.t3 .hero-copy { top: 35%; }
.t3 .hero-copy h1 {
  font-family: var(--display-sans);
  font-size: clamp(40px, 4.3vw, 62px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.045em;
}
.t3 .hero-spec { margin-top: 22px; }

/* T4: Korean serif keeps the editorial direction of the original design. */
.t4 .hero-copy { top: 28%; }
.t4 .hero-copy h1 {
  font-family: var(--display-serif);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.055em;
}
.t4 .hero-caption {
  font-family: var(--display-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -.015em;
}

/* T5: a clear, approachable consultation headline. */
.t5 .hero-copy { top: 35%; }
.t5 .hero-copy h1 {
  font-family: var(--display-sans);
  font-size: clamp(40px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -.05em;
}
.t5 .hero-copy .eyebrow {
  font-weight: 500;
  letter-spacing: .08em;
}
.t5 .hero-spec { font-size: 15px; }

/* T6: restrained type and figures, rather than a countdown-style poster. */
.t6 .hero-copy { top: 23%; }
.t6 .hero-copy h1 {
  font-family: var(--display-serif);
  font-size: clamp(34px, 3.3vw, 46px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.045em;
  margin: 0 0 28px;
}
.area-guide > strong {
  font-family: var(--display-sans);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.area-guide > p { font-weight: 400; }
.area-guide .countdown-grid b {
  font-family: var(--display-sans);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.025em;
}
.t6 .hero-actions { margin-top: 32px; }

/* T7: the central header is echoed by a centered Korean wordmark. */
.t7 .hero-copy {
  top: 38%;
  left: 7%;
  width: 86%;
  max-width: none;
  text-align: center;
}
.t7 .hero-copy h1 {
  font-family: var(--display-serif);
  font-size: clamp(44px, 4.5vw, 66px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.055em;
  margin-bottom: 22px;
}
.t7 .hero-spec { margin-inline: auto; font-size: 15px; }

.brand-intro h1 {
  font-family: Georgia, var(--display-serif);
  font-size: clamp(30px, 5.3vw, 68px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .055em;
  max-width: calc(100vw - 48px);
}
.t6 .brand-intro h1 {
  font-family: var(--display-serif);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.045em;
  text-wrap: balance;
}

/* Collection previews carry the same type choices as the actual templates. */
.mini-site > strong {
  font-family: var(--display-sans);
  font-weight: 500;
  letter-spacing: -.045em;
}
.card-t1 .mini-site > strong,
.card-t2 .mini-site > strong,
.card-t4 .mini-site > strong,
.card-t6 .mini-site > strong,
.card-t7 .mini-site > strong {
  font-family: var(--display-serif);
  font-weight: 400;
}
.card-t5 .mini-site > strong { font-weight: 600; }
.card-t4 .mini-site > strong { font-size: clamp(18px, 1.9vw, 25px); }
.card-t7 .mini-site > strong { font-size: 32px; line-height: 1.4; }

@media (min-width: 601px) and (max-width: 900px) {
  .hero-copy h1 { font-size: 40px; }
  .t1 .hero-copy h1 { font-size: 38px; }
  .t2 .hero-copy h1 { font-size: 34px; }
  .t3 .hero-copy h1 { font-size: 42px; }
  .t5 .hero-copy h1 { font-size: 38px; }
  .t6 .hero-copy h1 { font-size: 34px; }
  .t7 .hero-copy h1 { font-size: 44px; }

  .t4 .hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .t4 .hero-media,
  .t4 .hero-shade { height: 480px; bottom: auto; }
  .t4 .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    min-height: 480px;
    padding: 136px 40px 120px;
  }
  .t4 .hero-copy h1 { font-size: 38px; margin: 0; }
  .t4 .hero-caption { top: 315px; left: 40px; max-width: 75%; }
  .t4 .image-note { top: 448px; bottom: auto; }
}

@media (max-width: 600px) {
  .hero,
  .t1 .hero,
  .t2 .hero {
    height: min(760px, 100svh);
    min-height: 560px;
  }
  .hero-copy,
  .t1 .hero-copy,
  .t2 .hero-copy,
  .t5 .hero-copy {
    left: 24px;
    width: calc(100% - 48px);
    max-width: none;
  }
  .hero-copy h1 {
    font-size: clamp(27px, 7.3vw, 32px);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -.045em;
    margin: 14px 0 16px;
  }
  .hero-copy .eyebrow {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .12em;
    margin-bottom: 14px;
  }
  .hero-spec,
  .t2 .hero-spec,
  .t3 .hero-spec,
  .t5 .hero-spec,
  .t7 .hero-spec {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
    max-width: none;
  }
  .hero-actions,
  .t1 .hero-actions,
  .t5 .hero-actions { gap: 9px; margin-top: 26px; }
  .hero-actions .btn,
  .t5 .hero-actions .btn,
  .t6 .hero-actions .btn {
    font-size: 12px;
    font-weight: 500;
    min-height: 44px;
    padding: 11px 16px;
  }

  .t1 .hero-copy { top: 37%; }
  .t1 .hero-copy h1 {
    font-size: clamp(27px, 7.2vw, 31px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.06em;
  }

  .t2 .hero-copy { top: 35%; }
  .t2 .hero-copy h1 {
    font-size: clamp(24px, 6.8vw, 29px);
    font-weight: 400;
    line-height: 1.62;
    letter-spacing: -.065em;
  }
  .t2 .hero-copy .eyebrow { font-size: 8px; letter-spacing: .11em; }
  .t2 .open-badge { width: 82px; height: 82px; bottom: 78px; }
  .t2 .open-badge b { font-size: 24px; }

  .t3 .hero { height: min(760px, calc(100svh - 32px)); min-height: 560px; }
  .t3 .hero-copy {
    top: 34%;
    left: 24px;
    width: calc(100% - 82px);
    max-width: none;
  }
  .t3 .hero-copy h1 {
    font-size: clamp(26px, 7.1vw, 30px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.055em;
  }
  .t3 .hero-spec { margin-top: 16px; font-size: 11px; }

  .t4 .hero { height: auto; min-height: 0; }
  .t4 .hero-media,
  .t4 .hero-shade { height: 400px; bottom: auto; }
  .t4 .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    min-height: 400px;
    padding: 112px 24px 110px;
  }
  .t4 .hero-copy h1 {
    font-size: clamp(26px, 7.1vw, 30px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -.055em;
    margin: 0;
  }
  .t4 .hero-caption {
    top: 266px;
    left: 24px;
    right: 24px;
    max-width: none;
    font-size: 11px;
    line-height: 1.6;
  }
  .t4 .image-note { top: 372px; bottom: auto; }

  .t5 .hero { height: min(700px, 100svh); min-height: 560px; }
  .t5 .hero-copy { top: 34%; }
  .t5 .hero-copy h1 {
    font-size: clamp(27px, 7.3vw, 31px);
    font-weight: 600;
    line-height: 1.42;
    letter-spacing: -.05em;
  }
  .t5 .hero-copy .eyebrow { font-size: 9px; letter-spacing: .07em; }

  .t6 .hero { height: min(730px, 100svh); min-height: 620px; }
  .t6 .hero-copy {
    top: 25%;
    left: 24px;
    width: calc(100% - 48px);
    max-width: none;
  }
  .t6 .hero-copy h1 {
    font-size: clamp(25px, 6.9vw, 29px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -.05em;
    margin: 0 0 25px;
  }
  .area-guide > strong {
    font-size: clamp(29px, 8vw, 35px);
    font-weight: 500;
  }
  .area-guide > p { font-size: 11px; margin: 14px 0 10px; }
  .area-guide .countdown-grid { gap: 9px; }
  .area-guide .countdown-grid > a { width: 79px; padding: 9px 6px; }
  .area-guide .countdown-grid b { font-size: 24px; }
  .area-guide .countdown-grid b span { font-size: 11px; }
  .t6 .hero-actions { margin-top: 24px; }

  .t7 .hero { height: min(720px, 100svh); min-height: 560px; }
  .t7 .hero-copy {
    top: 38%;
    left: 24px;
    width: calc(100% - 48px);
    max-width: none;
  }
  .t7 .hero-copy h1 {
    font-size: clamp(30px, 8vw, 35px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -.055em;
    margin-bottom: 19px;
  }

  .brand-intro { gap: 16px; }
  .brand-intro h1 {
    font-size: clamp(27px, 7.6vw, 33px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .035em;
    max-width: calc(100vw - 48px);
  }
  .brand-intro > small { font-size: 9px; letter-spacing: .03em; }
  .t6 .brand-intro h1 {
    font-size: clamp(24px, 6.8vw, 29px);
    line-height: 1.6;
    letter-spacing: -.05em;
    max-width: 12em;
    text-wrap: balance;
  }
  .card-t7 .mini-site > strong { font-size: 28px; }
}

@media (max-width: 600px) and (max-height: 680px) {
  .t1 .hero-copy { top: 31%; }
  .t2 .hero-copy { top: 30%; }
  .t3 .hero-copy { top: 31%; }
  .t5 .hero-copy { top: 30%; }
  .t6 .hero-copy { top: 23%; }
  .t7 .hero-copy { top: 36%; }
  .hero-actions,
  .t1 .hero-actions,
  .t5 .hero-actions { margin-top: 22px; }
}