/* ko.css — Korean localisation layer.
   Loaded last. Keeps brand assets and English pages unchanged. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

.ko {
  --ko-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --en-display: 'Cormorant Garamond', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', serif;
  --en-body: 'Spectral', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', serif;
}

body.ko {
  font-family: var(--ko-sans);
  font-weight: 400;
  letter-spacing: -0.012em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.ko .method p,
.ko .process p,
.ko .section-title,
.ko .check,
.ko .check.all,
.ko input,
.ko textarea,
.ko select,
.ko button,
.ko label{
  font-family: var(--ko-sans);
}
.ko .hm-line-image,
.ko .site-trigger,
.ko .lang-switch,
.ko .mb-motion-letters{
  font-family: var(--en-display);
}

.ko .choice-axis{
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(13.2px, 1.42vw, 15px);
  line-height: 1.42;
  color: var(--soft);
}

.ko .section-sub,
.ko .sec-sub,
.ko .note,
.ko .menu-foot,
.ko .mdesc,
.ko .guard-text,
.ko .choice-desc,
.ko .usage-list,
.ko .field label,
.ko .privacy-consent{
  font-family: var(--ko-sans);
  font-style: normal;
}
.ko p,
.ko .method p,
.ko .process p{
  font-weight: 400;
  font-size: clamp(12.2px, 1.36vw, 13.8px);
  line-height: 1.64;
  letter-spacing: -0.008em;
  word-break: keep-all;
}
.ko .hm-line-text {
  font-family: var(--ko-sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(17px, 2.4vw, 24px);
  line-height: 1.28;
  letter-spacing: -0.028em;
}
.ko .intro p {
  font-size: clamp(13.4px, 1.58vw, 15px);
  line-height: 1.62;
}
.ko h1, .ko .hero h1 {
  font-size: clamp(30px, 5.4vw, 44px);
  line-height: 1.1;
}
.ko .contact-wrap h1 {
  font-size: clamp(29px, 5.1vw, 42px);
  font-family: var(--ko-sans);}
.ko .axis-line,
.ko .lead,
.ko .section-sub,
.ko .note{
  font-size: clamp(12.4px, 1.42vw, 14px);
  line-height: 1.62;
}
.ko .wrap > .sec-sub,
.ko .type-system-note{
  font-size: clamp(11.8px, 1.28vw, 13px);
  line-height: 1.58;
}
.ko .label {
  font-weight: 500;
  font-size: clamp(10px, 1vw, 11.4px);
  letter-spacing: .04em;
}
.ko .check.all{
  font-style: normal;
}

.ko .site-menu a {
  font-family: 'Spectral', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  display: flex;
  align-items: baseline;
  gap: .5em;
}
.ko .nav-ko {
  font-family: 'Spectral', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: .72em;
  letter-spacing: -0.01em;
  color: var(--faint, #6A7280);
}
.ko .section {
  padding-top: clamp(22px, 3.6vw, 32px);
  padding-bottom: clamp(22px, 3.6vw, 32px);
}
.ko .card,
.ko .usage-card,
.ko .choice,
.ko .guard-card,
.ko .subgroup{
  padding: clamp(12px, 2.2vw, 18px);
}

.ko .section-title {
  font-size: clamp(18px, 3vw, 23px);
}
.ko .choice-name {
  font-size: clamp(17px, 2.7vw, 21px);
  font-style: normal;
}
.ko .enq-cta-ko {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  line-height: 1;
  font-family: var(--ko-sans);
}
.ko .enq-cta-ko .enq-cta-label {
  font-size: clamp(13px, 1.24vw, 15.5px);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink, #19223A);
}
.ko .enq-cta-ko .enq-arrow-img {
  display: block;
  width: auto;
  height: clamp(8px, .86vw, 10px);
  margin: 0;
  transition: transform .25s ease;
}
.ko .enq-cta-ko:hover .enq-arrow-img, .ko .enq-cta-ko:focus-visible .enq-arrow-img {
  transform: translateX(3px);
}

.ko #contact-form .choice {
  padding: 10px 11px;
}
.ko #contact-form .subgroup {
  margin-top: 12px;
  padding: 11px;
}
.ko #contact-form input[type="text"], .ko #contact-form input[type="email"], .ko #contact-form input[type="url"], .ko #contact-form textarea, .ko #contact-form select {
  padding: 7px 9px;
  font-size: 12.4px;
  line-height: 1.35;
}
.ko #contact-form textarea {
  min-height: 78px;
}
.ko #contact-form .field-spaced {
  margin-top: 10px;
}
.ko #contact-form .fields {
  gap: 12px;
}
.ko #contact-form .section {
  padding: clamp(20px, 3.2vw, 28px) 0;
}
.ko #contact-form .section-title {
  font-size: clamp(16px, 2.5vw, 20px);
}
.ko #contact-form .section-sub, .ko #contact-form .choice-desc, .ko #contact-form .hint, .ko #contact-form .check {
  font-size: clamp(11.4px, 1.18vw, 12.5px);
  line-height: 1.48;
}
.ko #contact-form .choice-grid {
  gap: 10px;
}
.ko #contact-form .choice-name {
  font-size: clamp(14.2px, 1.75vw, 16.5px);
  line-height: 1.16;
}
.ko #contact-form .choice-axis {
  font-size: clamp(12px, 1.35vw, 13.6px);
  margin-bottom: 7px;
}
.ko #contact-form .field label, .ko #contact-form .subgroup-title {
  font-size: 9.2px;
  letter-spacing: .14em;
  margin-bottom: 6px;
}
.ko #contact-form .handover-section, .ko #contact-form .send-section {
  border-bottom: 0;
}
.ko #contact-form .send-section {
  padding: 18px 0 0;
}
.ko #contact-form .privacy-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  margin: 0 0 12px auto;
  font-size: 11.6px;
  line-height: 1.52;
  letter-spacing: -0.008em;
  color: var(--soft);
  text-align: right;
}
.ko #contact-form .privacy-consent input {
  flex: 0 0 auto;
  margin-top: 3px;
}
.ko #contact-form .privacy-consent a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(74, 82, 96, .32);
}
.ko #contact-form .privacy-consent a:hover, .ko #contact-form .privacy-consent a:focus-visible {
  border-color: var(--slate);
}
.ko #contact-form .send-row {
  align-items: flex-end;
  margin-top: 0;
}
.ko .guard-title {
  font-size: clamp(12.4px, 1.42vw, 14px);
  line-height: 1.34;
}
.ko .guard-text {
  font-size: clamp(11px, 1.12vw, 12.2px);
  line-height: 1.48;
}
.ko .menu-row .mname,
.ko .usage-title{
  font-family: var(--ko-sans);
  font-weight: 600;
  font-size: clamp(13.2px, 1.55vw, 16px);
  line-height: 1.32;
  letter-spacing: -0.012em;
}
.ko .menu-row {
  padding: 14px 0;
}
.ko .logo-verdict {
  padding: clamp(14px, 2.4vw, 20px);
}
.ko .logo-verdict .vtitle {
  font-family: var(--ko-sans);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(12.6px, 1.34vw, 14.4px);
  line-height: 1.34;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.ko .logo-verdict p {
  font-family: var(--ko-sans);
  font-size: clamp(11.4px, 1.14vw, 12.4px);
  line-height: 1.52;
  letter-spacing: -0.008em;
}
.ko .motion-stage {
  padding: clamp(18px, 3.2vw, 34px);
}
.ko .motion-stage .mb-logo-motion {
  width: min(100%, 460px);
}
.ko .tiu {
  padding: clamp(15px, 2.6vw, 26px) clamp(14px, 2.5vw, 26px);
}
.ko .tiu-row {
  padding: clamp(8px, 1.35vw, 12px) 0;
  gap: 4px;
}.ko .tiu-eyebrow,
.ko .tiu-body,
.ko .tiu-btn,
.ko .tiu-cap{
  font-family: var(--ko-sans);
  font-style: normal;
}
.ko .tiu-cap { font-size: 10.6px; letter-spacing: -0.006em; }
.ko .tiu-eyebrow {
  font-size: 10.4px;
  letter-spacing: .12em;
}

.ko .tiu-sub,
.ko .tiu-body {
  font-size: clamp(11.4px, 1.14vw, 12.6px);
  line-height: 1.48;
  letter-spacing: -0.008em;
  max-width: 100%;
}

.ko .tiu-btn {
  font-weight: 600;
  font-size: 10.6px;
  letter-spacing: .02em;
  padding: 9px 16px;
}

.ko .type-system-item {
  padding: clamp(14px, 2.4vw, 22px);
}
.ko .type-system-note {
  margin-top: 10px;
  padding-top: 10px;
}
.ko #typography + .sec-sub,
.ko .section-sub-spaced,
.ko #standards-in-use + .sec-sub{
  font-size: clamp(10.8px, 1.08vw, 12px);
  line-height: 1.48;
  letter-spacing: -0.006em;
  font-style: normal;
  color: var(--soft);
}

@media (min-width: 680px) {
  .ko .tiu-row {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 16px;
  }
}
@media (max-width: 679px) {
  .ko .tiu-row {
    grid-template-columns: 1fr;
  }
}
/* Korean document rhythm */
body.ko .enq-privacy,
body.ko .privacy-mail,
body.ko .notice-item,
body.ko .notice-item p,
body.ko .notice-item .nt,
body.ko .notice-item .nk,
body.ko .form-error,
body.ko .form-error a{
  font-family: var(--ko-sans);
  font-style: normal;
}

body.ko .choice-desc,
body.ko .section-sub,
body.ko .hint,
body.ko .lead,
body.ko .axis-line {
  word-break: keep-all;
  overflow-wrap: break-word;
}
body.ko ::placeholder {
  font-family: var(--ko-sans);
  color: rgba(74, 82, 96, .55);
}

/* Translation and localisation comparison */

/* ── ko에서 영문 디자인(bd-/vog-/vpaper) 요소는 원래 타이포그래피 유지 ──
   영문 글자는 영문 폰트(Cormorant/Spectral),
한글은 Pretendard 폴백 */
/* Cormorant 제목 계열 (영문 디자인의 display 폰트) */
.ko .bd-method-line,
.ko .vog-lead,
.ko .vog-statement{
  font-family: 'Cormorant Garamond', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
/* Spectral 본문/라벨 계열 (영문 디자인의 body 폰트) */
.ko .bd-card-k,
.ko .bd-label,
.ko .bd-sub,
.ko .bd-card-p,
.ko .bd-cta-line,
.ko .bd-film-cap,
.ko .vog-feature-body,
.ko .vog-shot-cap,
.ko .vog-folio{
  font-family: 'Spectral', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* ── ko/verbal: 모던 한글 에디토리얼 (Pretendard 고딕 중심,
깔끔한 잡지) ── */
/* 제목 계열 — Pretendard semibold/bold (영문 세리프 대신 모던 고딕) */

.ko .vp-headline {
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(20px, 2.4vw, 27px);
}
/* deck/intro/lead 본문 — Pretendard regular */
.ko .vp-intro,
.ko .vp-block-body,
.ko .vp-brief-body,
.ko .vp-col-item{
  font-family: var(--ko-sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.6;
}

/* 라벨/키커/폴리오 — Pretendard medium,
약간 넓은 자간 */
.ko .vp-kicker,
.ko .vp-tag,
.ko .vp-folio,
.ko .vp-block-k,
.ko .vp-dateline{
  font-family: var(--ko-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── 누락됐던 영문 요소들 (영문판 원래 폰트 = Cormorant/Spectral) ── */
/* Cormorant 계열 (제목/디스플레이) */
.ko .logo-title,
.ko .type-system-name,
.ko .vog-cover-title,
.ko .subgroup-title {
  font-family: 'Cormorant Garamond', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
/* Spectral 계열 (라벨/본문/캡션) */
.ko .enq-privacy,
.ko .hint,
.ko .lead,
.ko .vp-bridge-link,
.ko .vp-pk,
.ko .vp-pv,
.ko .vp-item-k,
.ko .suite-k,
.ko .tone-name,
.ko .tiu-lab,
.ko .eyebrow,
.ko .vog-arrow,
.ko .vog-idx-no,
.ko .type-system-align-sample{
  font-family: 'Spectral', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* vp-block-lead = "Align brand intention" 영문 → Cormorant */
.ko .vp-block-lead {
  font-family: 'Cormorant Garamond', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* ── 폰트 시스템 명세에 추가된 Pretendard(한글) 항목 ── */
/* 한글 견본/샘플 = Pretendard */
.ko .ko-sample,
.ko .ko-spec {
  font-family: var(--ko-sans);
}
/* Pretendard 폰트명 라벨도 Pretendard로 (자기 폰트 보여주기) */
.ko .ko-system-name {
  font-family: var(--ko-sans);
  font-weight: 600;
}

/* ── ko verbal 1면 본문: 한글은 3단 신문 대신 단정한 단일 흐름 ── */
.ko .vp-lead-body {
  font-family: var(--ko-sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  columns: 1;
  column-gap: 0;
  column-rule: none;
  max-width: 62ch;
  font-size: clamp(13.5px, 1.5vw, 15.5px);
  line-height: 1.85;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.ko .vp-lead-body p {
  margin: 0 0 0.9em;
}

/* ── 한글 페이지 전체 이탤릭 제거 (강약은 폰트 모양·굵기·크기로) ── */
.ko .axis-line,
.ko .bd-italic,
.ko .bd-method-line,
.ko .guard-example,
.ko .hero,
.ko .logo-verdict,
.ko .method,
.ko .sec-label,
.ko .tiu-sub,
.ko .vp-proof-foot{
  font-style: normal;
}

/* 한글 제목·헤드라인: 고딕 중심의 단일 타이포그래피 시스템 */
.ko .bd-card-t,
.ko .bd-italic,
.ko .bd-lead-text,
.ko .axis-line,
.ko .guard-example,
.ko .guard-title,
.ko .sec-label,
.ko .tiu-sub,
.ko .vis-band-title,
.ko .vp-headline,
.ko .vp-name,
.ko .vp-proof-line,
.ko .vog-app-title,
.ko .vog-cover-sub,
.ko .vog-feature-title,
.ko .vog-lead-text,
.ko .vog-statement-text,
.ko .vog-use-k{
  font-family: var(--ko-sans);
}

/* 큰 메인 헤드라인 */
.ko .vp-name,
.ko .vog-feature-title {
  font-weight: 700;
}

/* 중간 제목·부제 */
.ko .vp-proof-line,
.ko .vog-app-title,
.ko .vog-use-k,
.ko .vog-lead-text,
.ko .vog-cover-sub,
.ko .vog-statement-text,
.ko .sec-label,
.ko .vis-band-title,
.ko .tiu-sub,
.ko .guard-title,
.ko .guard-example,
.ko .axis-line{
  font-weight: 400;
}

/* ── verbal 섹션 인덱스 강약 (제목 vs 설명) ── */
/* 제목(글/로컬라이제이션) = 약간 크게 + 굵게 */
.ko .section-nav .nav-text strong {
  font-family: var(--ko-sans);
  font-size: 1.05em;
  font-weight: 600;
  display: block;
  margin-bottom: 0;
}
/* 설명 = 작게 + 가늘게 */
.ko .section-nav .nav-text {
  font-family: var(--ko-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
/* A/B/C 라벨 = Cormorant 영문, 차분하게 */
.ko .nav-no {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 15px;
}

/* ── Verbal 제목/부제 위계 정리 ── */
/* 섹션 제목(활용범위/A·글/언어의 기준) = 명조 볼드, 제목답게 */
.ko .vp-story-title {
  font-family: var(--ko-sans);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 23px);
}
/* 부제/설명 = Pretendard 가늘게 (작은 글은 고딕이 읽기 좋음) */
.ko .vp-story-deck,
.ko .vp-standfirst {
  font-family: var(--ko-sans);
  font-style: normal;
  font-weight: 400;
}

/* ── Delivery 이탤릭 제거 (vog 클래스) ── */
.ko .vog-cover-sub,
.ko .vog-statement-text {
  font-style: normal;
}

/* ── thanks 이탤릭 제거 (ty-axis 등) ── */
body.ko .ty-axis {
  font-style: normal;
  font-family: var(--ko-sans);
  font-weight: 400;
}

/* ── Thanks 폰트 체계 통일 (다른 페이지와 동일) ── */
/* 메인 제목 */
.ko .ty-display {
  font-family: var(--ko-sans);
}
/* 부제(문의가 전송되었습니다) = Pretendard (작은 부제는 고딕) */