/* Korean typography and responsive UI examples, matching the desktop labels. */
html:lang(ko) {
  --font-display: 'General Sans', 'Noto Sans KR', sans-serif;
  --font-ui: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans KR', monospace;
  --display: 'General Sans', 'Noto Sans KR', sans-serif;
  --sans: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:lang(ko) .h-display, :lang(ko) .closer__title { line-height: 1.25; letter-spacing: -.035em; }
:lang(ko) .h-sub { line-height: 1.85; }
:lang(ko) .eyebrow { letter-spacing: .08em; }
:lang(ko) .event-feature h3 { line-height: 1.3; }
:lang(ko) .al-note { max-width: 300px; }
:lang(ko) .lm-stats { gap: 24px; }
:lang(ko) .lm-swap { min-width: 76px; }
:lang(ko) .inner-page h1, :lang(ko) .inner-page h2 { line-height:1.3; letter-spacing:-.035em; }
:lang(ko) .inner-page .eyebrow { letter-spacing:.02em; }
:lang(ko) .inner-page .market-price > strong { white-space:normal; }

.product-preview { overflow: hidden; text-align: left; background: #080b13; font-size: 12px; }
.preview-shell { display: grid; grid-template-columns: 148px minmax(0, 1fr); }
.preview-sidebar { padding: 24px 10px; border-right: 1px solid #29303f; }
.preview-brand { display: flex; align-items: center; gap: 7px; margin: 0 6px 26px; color: #b6d9fc; font-size: 17px; font-weight: 600; }
.preview-brand img { width: 22px; height: 22px; flex-shrink: 0; }
.preview-nav { display: flex; align-items: center; gap: 9px; padding: 11px 10px; margin: 3px 0; color: #aeb9cc; border: 1px solid transparent; border-radius: 7px; }
.preview-nav i { width: 16px; font-style: normal; text-align: center; }
.preview-nav--active { color: #d8ecf8; background: #182438; border-color: #365575; }
.preview-nav--break { margin-top: 16px; }
.preview-main { min-width: 0; padding: 0 16px 20px; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 65px; }
.preview-toolbar > strong { font-size: 16px; }
.preview-toolbar > span { display: flex; align-items: center; gap: 9px; font-size: 10px; color: #aeb9cc; }
.preview-toolbar b { color: #d8ecf8; font-size: 12px; font-weight: 500; }
.preview-avatar { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #394354; border-radius: 50%; background: #222c3b; color: #d8ecf8; font-style: normal; }
.preview-dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.preview-card { min-width: 0; padding: 18px; border: 1px solid #303544; border-radius: 9px; background: #11141f; }
.preview-card h3 { font-size: 14px; font-weight: 600; color: #d8ecf8; }
.preview-company { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.preview-company img { max-width: 126px; padding: 8px; background: #f5f7fb; border-radius: 5px; }
.preview-tag { display: inline-block; padding: 5px 8px; border: 1px solid #344762; border-radius: 5px; background: #1b293e; color: #bed8f5; font-size: 9px; white-space: nowrap; }
.preview-pilot h3 { margin: 24px 0; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.6; }
.preview-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preview-metrics > div { padding: 10px; border: 1px solid #282e3b; border-radius: 7px; background: #151a27; }
.preview-card dt { margin-bottom: 5px; font-size: 10px; color: #919bad; }
.preview-card dd { color: #cce2ff; font-size: 12px; font-weight: 500; }
.preview-progress-label { display: flex; justify-content: space-between; gap: 10px; margin-top: 30px; font-size: 10px; }
.preview-progress-label span:last-child { color: #b6d9fc; }
.preview-progress { height: 4px; margin-top: 12px; background: #29303f; border-radius: 4px; }
.preview-progress span { display: block; width: 18.7%; height: 100%; border-radius: inherit; background: #c5e1ff; box-shadow: 0 0 9px #7bafe880; }
.preview-xp { margin-top: 8px; text-align: right; font-size: 9px; color: #919bad; }
.preview-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.preview-action { display: inline-block; border: 1px solid #343b4a; border-radius: 4px; padding: 7px 9px; color: #c4d5ed; font-size: 9px; white-space: nowrap; }
.preview-action--primary { background: #35445b; color: #f0f5ff; border-color: #435571; }
.preview-leg { display: flex; align-items: center; gap: 12px; min-height: 75px; border-top: 1px solid #252d3b; }
.preview-leg > img { width: 44px; padding: 4px; background: #f5f7fb; border-radius: 3px; }
.preview-leg > div { flex: 1; }
.preview-leg strong { display: block; color: #d6e6fa; font-weight: 500; font-size: 13px; white-space: nowrap; }
.preview-leg strong span { margin: 0 7px; color: #7894b5; }
.preview-leg small, .preview-airport small { display: block; color: #919bad; font-size: 9px; margin-top: 6px; }
.preview-leg > span { font-size: 9px; color: #a4b0c5; white-space: nowrap; }
.preview-roster-note { margin-top: 20px; color: #8fa4c2; font-size: 10px; }
.preview-muted { color: #919bad; font-size: 11px; }
.preview-next { background: linear-gradient(155deg, #111a28, #11141f 65%); }
.preview-route { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: start; gap: 12px; margin-top: 12px; }
.preview-route strong { display: block; color: #f1f5fc; font-family: var(--font-display); font-size: 27px; font-weight: 500; }
.preview-route span { display: block; color: #aebbd0; font-size: 9px; line-height: 1.5; margin-top: 5px; }
.preview-route i { font-size: 25px; font-style: normal; color: #b6d9fc; }
.preview-flight-data { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; margin-top: 24px; }
.preview-flight-actions { display: flex; gap: 8px; margin-top: 26px; }
.preview-clocks { display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: 18px; }
.preview-clocks dd { font-size: 22px; color: #e7f2ff; font-weight: 400; }
.preview-airport { display: flex; align-items: center; gap: 9px; min-height: 88px; border-top: 1px solid #252d3b; }
.preview-airport > div { flex: 1; }
.preview-airport strong { font-weight: 400; font-size: 11px; color: #d6e6fa; }
.preview-country { font-size: 9px; color: #b6d9fc; }
.preview-airport .preview-action { display: none; }
.preview-caption { padding: 12px 18px; text-align: right; border-top: 1px solid #252d3b; color: #8592a8; font-size: 11px; }
.preview-career-company { display: flex; align-items: center; gap: 18px; background: #191e2a; }
.preview-airline-mark { display: grid; place-items: center; background: #f5f7fb; border-radius: 8px; width: 90px; height: 80px; padding: 10px; flex-shrink: 0; }
.preview-career-company h3 { font-size: 24px; margin-bottom: 5px; }
.preview-company-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.preview-fleet { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: flex-start; margin-left: auto; }
.preview-fleet strong { font-size: 11px; }
.preview-career-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 14px; }
.preview-route-diagram { width: 100%; height: auto; }
.preview-map-note { color: #8592a8; font-size: 10px; margin-top: 12px; }
.preview-job { display: flex; align-items: center; gap: 10px; padding: 19px 0; border-top: 1px solid #29303d; }
.preview-job-logo { width: 45px; height: 40px; padding: 6px; display: grid; place-items: center; flex-shrink: 0; background: #fff; border-radius: 5px; }
.preview-job > div:nth-child(2) { flex: 1; min-width: 0; }
.preview-job strong { color: #dbeaff; font-size: 12px; font-weight: 500; }
.preview-job small { display: block; margin: 4px 0; color: #919bad; font-size: 10px; }
.preview-stars { color: #facc15; font-size: 9px; letter-spacing: 1px; }
.preview-job-note { margin-top: 12px; color: #919bad; font-size: 10px; line-height: 1.8; }

/* Detail-page illustrations adapt to their column, independent of viewport size. */
.product-media__frame { container: preview / inline-size; }
.detail-preview { color:#b3bac9; border-radius:6px; line-height:1.6; }
.detail-preview .preview-shell { display:block; }
.detail-preview .preview-sidebar, .detail-preview .preview-roster, .detail-preview .preview-airports { display:none; }
.detail-preview .preview-main { padding:0 12px 12px; }
.detail-preview .preview-toolbar { min-height:56px; }
.detail-preview .preview-card { padding:12px; }
.detail-preview .preview-dashboard { grid-template-columns:1fr 1fr; gap:10px; }
.detail-preview .preview-company img { max-width:90px; }
.detail-preview .preview-pilot h3 { font-size:15px; margin:20px 0; }
.detail-preview .preview-flight-actions { flex-wrap:wrap; }
.detail-preview .preview-career-grid { grid-template-columns:1fr; }
.detail-preview .preview-routes, .detail-preview .preview-fleet { display:none; }
.detail-preview .preview-career-company h3 { font-size:20px; }
.detail-preview .preview-job { padding-block:12px; }
.detail-preview .preview-caption { margin:0; padding:9px 12px; font-size:10px; }
.preview-live-map { overflow:hidden; border:1px solid #29303f; border-radius:8px; }
.preview-live-map svg { width:100%; height:auto; aspect-ratio:1280/809; }
.preview-map-flight { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:18px 4px 14px; }
.preview-map-flight > strong { font-size:19px; color:#e1efff; }
.preview-map-flight > strong span { color:#8397b2; padding-inline:8px; }
.preview-map-flight > span { font-size:10px; color:#aeb9cc; }
.preview-map-data { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; border-top:1px solid #29303f; padding-top:12px; }
.preview-map-data dt { font-size:10px; color:#919bad; }
.preview-map-data dd { font-size:16px; color:#d6e6fa; margin-top:5px; }
@container preview (max-width:400px) {
  .detail-preview .preview-dashboard { grid-template-columns:1fr; }
  .detail-preview .preview-pilot { display:none; }
  .detail-preview .preview-airline-mark { width:54px; height:54px; }
  .detail-preview .preview-career-company { gap:10px; }
  .detail-preview .preview-career-company h3 { font-size:18px; }
  .detail-preview .preview-company-actions { gap:5px; margin-top:10px; }
  .detail-preview .preview-company-actions .preview-action { padding:5px; font-size:8px; }
  .detail-preview .preview-card-heading { flex-wrap:wrap; }
  .preview-map-data dd { font-size:14px; }
}

@media (max-width: 900px) {
  .preview-shell { grid-template-columns: 115px minmax(0, 1fr); }
  .preview-sidebar { padding: 22px 7px; }
  .preview-brand { font-size: 13px; gap: 4px; }
  .preview-brand img { width: 18px; height: 18px; }
  .preview-nav { font-size: 10px; gap: 5px; padding: 10px 5px; }
  .preview-main { padding: 0 12px 14px; }
  .preview-card { padding: 14px; }
  .preview-leg > img { display: none; }
  .preview-card-heading { flex-wrap: wrap; }
  .preview-fleet { display: none; }
}
@media (max-width: 720px) {
  .preview-shell { display: block; }
  .preview-sidebar { display: none; }
  .preview-dashboard { gap: 10px; }
  .preview-career-grid { gap: 10px; }
  .preview-pilot h3 { font-size: 16px; }
}
@media (max-width: 560px) {
  .preview-dashboard, .preview-career-grid { grid-template-columns: 1fr; }
  .preview-pilot { order: 0; }
  .preview-next { order: 1; }
  .preview-roster { order: 2; }
  .preview-airports { order: 3; }
  .preview-card-heading { flex-wrap: nowrap; }
  .preview-card { padding: 16px; }
  .preview-leg > img { display: block; }
  .preview-flight-data { grid-template-columns: 1fr 1fr; }
  .preview-career-company { align-items: flex-start; gap: 12px; }
  .preview-airline-mark { width: 58px; height: 54px; }
  .preview-career-company h3 { font-size: 19px; }
  .preview-company-actions .preview-action { font-size: 9px; padding: 6px; }
  .preview-toolbar > span { font-size: 9px; }
  :lang(ko) .h-display { font-size: 30px; }
  :lang(ko) .event-feature h3 { font-size: 30px; }
}