/* Pretendard는 index.html 에서 로 직접 불러온다.
여기서 @import를 쓰면 style.css 파싱이 끝난 뒤에야 폰트 요청이 나가 왕복이 직렬로 쌓인다. */
/* ── 브랜드 토큰 ── 로고 PNG에서 픽셀 추출한 실측값 (PLAN.md §3) ── */
:root {
--navy: #29519B; /* Primary — 심볼 하단 로브 */
--blue: #287BBB; /* Secondary — 심볼 중간 띠 */
--sky: #7FCCEE; /* Accent — 심볼 상단 초승달 */
--sky2: #3A94CD; /* Accent 2 — 심볼 우측 슬라이버 */
--ink: #0F172A;
--ink2: #475569;
--muted: #94A3B8;
--line: #E2E8F0;
--bg: #FFFFFF;
--tint: #F7FAFD; /* 섹션 교차 배경 (네이비를 아주 옅게) */
--wrap: 1160px;
--radius: 14px;
--font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
"Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
/* ── 언어 전환 ── JS 없이 CSS만으로 동작한다 ── */
html[data-lang="ko"] [lang="en"] { display: none !important; }
html[data-lang="en"] [lang="ko"] { display: none !important; }
/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
word-break: keep-all;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3 { line-height: 1.3; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
figure { margin: 0; }
/* OS의 '애니메이션 줄이기'는 전환 효과와 무한 반복 애니메이션에만 적용한다.
히어로 차트(.pk)는 한 번 그리고 끝나는 4초짜리 선 그리기라 예외 — 새로고침 때도 항상 재생.
(Windows 원격 데스크톱 세션은 애니메이션 효과가 꺼져 있는 경우가 많아, 예외가 없으면 핵심 장면이 사라진다.)
'다시 보기'를 누르면(html.motion-on) 나머지도 재생된다. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html:not(.motion-on) *:not(.pk):not(.pk *) { transition: none !important; animation: none !important; }
}
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
/* ───────────────────────── NAV ───────────────────────── */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, .88);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav__inner {
width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
height: 68px; display: flex; align-items: center; gap: 28px;
}
.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { width: auto; height: 30px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a {
color: var(--ink2); text-decoration: none; font-size: 15px; font-weight: 500;
white-space: nowrap; transition: color .15s ease;
}
.nav__links a:hover { color: var(--navy); }
.langtoggle {
display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
}
.langtoggle button {
border: 0; background: none; padding: 0; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em;
color: var(--muted); transition: color .15s ease;
}
.langtoggle button:hover { color: var(--ink2); }
.langtoggle button[aria-pressed="true"] { color: var(--navy); }
.langtoggle__sep { width: 1px; height: 12px; background: var(--line); }
/* ───────────────────────── BUTTONS ───────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 22px; border-radius: 10px;
font-size: 15px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none;
transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn--primary {
background: var(--navy); color: #fff;
box-shadow: 0 10px 24px -14px rgba(41, 81, 155, .7);
}
.btn--primary:hover { background: #22448a; transform: translateY(-1px); }
.btn--ghost { color: var(--navy); border: 1px solid #C7DAF0; background: #fff; }
.btn--ghost:hover { border-color: var(--blue); background: var(--tint); }
.btn__arrow { font-size: 14px; opacity: .8; }
/* ───────────────────────── HERO ──────────────────────── */
.hero {
position: relative; overflow: hidden;
background:
radial-gradient(900px 520px at 88% 30%, rgba(127, 204, 238, .18), transparent 65%),
var(--bg);
}
.hero__glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(520px 360px at 70% 110%, rgba(41, 81, 155, .08), transparent 70%);
}
/* 사이트 공통 3열 그리드(gap 20px) 위에 놓는다. 텍스트 = 1열, 차트 패널 = 2~3열.
→ 패널의 왼쪽 선이 가치 섹션 도입문·두 번째 카드의 왼쪽 선과 같은 세로선에 온다. */
.hero__inner {
position: relative;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 20px; align-items: stretch;
padding-top: 88px; padding-bottom: 96px;
}
/* 텍스트 블록: 첫 줄(eyebrow) 윗선 = 패널 윗선, 마지막 줄(회사명) 밑선 = 패널 밑선 */
.hero__copy {
grid-column: 1; padding-right: 12px; display: flex; flex-direction: column; position: relative;
/* 1440px 헤드리스 실측 보정값 — 제목 글자 윗선 = 프레임 윗선(+8px→-8), 회사명 글자 밑선(괄호 포함) = 프레임 밑선(+1px→+1) */
--title-shift: -8px; --meta-shift: 1px;
}
.hero__meta { margin-top: auto; }
.hero__panel { grid-column: 2 / -1; }
.hero__eyebrow {
font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--blue); white-space: nowrap; line-height: 1;
/* 프레임 윗선 위에 떠 있다 — 제목이 프레임 윗선에서 시작하도록 흐름 밖으로 뺀다 */
position: absolute; left: 0; bottom: calc(100% + 26px); margin: 0;
}
.hero__title {
font-size: clamp(40px, 4vw, 58px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06;
margin-top: var(--title-shift, 0px);
background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 55%, var(--sky2) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead {
margin-top: 24px;
font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; color: var(--ink2); line-height: 1.65;
text-wrap: balance; /* 미지원 브라우저는 무시 — 영문에서 마지막 단어만 남는 것을 막는다 */
}
/* 두 버튼 같은 폭 — 1열(≈345px) 안에서 2등분. 글자가 줄바꿈되지 않게 살짝 작게 */
.hero__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px;
/* 오른쪽 끝을 eyebrow 문구의 오른쪽 끝에 맞춘다. 1440px 실측: eyebrow 글자 폭 295.6px(자간 꼬리 0.84px 제외). */
width: var(--eyebrow-w, 295.6px); max-width: 100%; }
.hero__meta { width: var(--eyebrow-w, 295.6px); max-width: 100%; } /* 구분선 끝도 같은 세로선 */
.hero__cta .btn { justify-content: center; padding: 13px 12px; font-size: 14px; white-space: nowrap; }
.hero__meta {
padding-top: 20px; border-top: 1px solid var(--line);
/* 글자 밑선이 패널 프레임 밑선과 같은 y에 오도록: 줄 높이 여백 제거 + 실측 보정(--meta-shift) */
line-height: 1; margin-bottom: var(--meta-shift, 0px);
font-size: 14px; color: var(--muted); letter-spacing: .01em;
}
/* ─────────────────────── HERO PANEL ──────────────────── */
.panel {
background: rgba(255, 255, 255, .86);
border: 1px solid #DCE7F4; border-radius: 18px;
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 30px 60px -36px rgba(41, 81, 155, .45),
0 8px 24px -16px rgba(15, 23, 42, .18);
backdrop-filter: blur(6px);
overflow: hidden;
display: flex; flex-direction: column;
}
.panel__foot { margin-top: auto; }
.panel__head {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px; border-bottom: 1px solid var(--line);
font-size: 13px; font-weight: 600; color: var(--ink2); letter-spacing: .01em;
}
.panel__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.panel__sep { color: var(--muted); }
.panel__live {
width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: 0 0 auto;
box-shadow: 0 0 0 0 rgba(40, 123, 187, .45);
animation: panel-live 2.4s ease-out infinite;
}
@keyframes panel-live {
0% { box-shadow: 0 0 0 0 rgba(40, 123, 187, .45); }
70% { box-shadow: 0 0 0 9px rgba(40, 123, 187, 0); }
100% { box-shadow: 0 0 0 0 rgba(40, 123, 187, 0); }
}
.panel__replay {
margin-left: auto; flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink2); cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.panel__replay:hover { border-color: var(--blue); color: var(--navy); }
.panel__replay span[aria-hidden] { font-size: 14px; line-height: 1; }
.pk { display: block; width: 100%; height: auto; padding: 14px 12px 2px; }
.panel__foot { padding: 6px 18px 18px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend__key { display: inline-block; width: 18px; height: 0; border-top: 2px solid; border-radius: 2px; }
.legend__key--pop { border-color: var(--muted); border-top-style: solid; opacity: .8; }
.legend__key--ind { border-color: var(--blue); border-top-width: 2.5px; }
.panel__note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--ink2); }
/* ── 차트 마크 ── */
.pk-axis { stroke: var(--line); stroke-width: 1; }
.pk-tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.pk-label { font-size: 12px; font-weight: 600; letter-spacing: -0.005em; }
.pk-label--muted{ fill: var(--muted); font-weight: 600; }
.pk-label--ink { fill: var(--ink); }
.pk-band__edge { stroke: var(--sky); stroke-opacity: .55; stroke-width: 1; }
.pk-dose { stroke: #B8C4D3; stroke-width: 2; stroke-linecap: round; }
.pk-dose--adj { stroke: var(--navy); }
.pk-pop { fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: .38; }
.pk-ind { fill: none; stroke: url(#pkStroke); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pk-decision line { stroke: var(--navy); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.pk-tag__bg { fill: #fff; stroke: #D3E3F6; }
.pk-dot { fill: var(--navy); stroke: #fff; stroke-width: 2; }
.pk-pulse { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0; }
/* ── 애니메이션 타임라인 (합계 ≈ 4초) ──
기본 상태 = 최종 상태. 애니메이션은 '숨김 → 최종'으로 진행하므로
prefers-reduced-motion에서 animation:none이 걸리면 그대로 완성된 그림이 보인다. */
.pk-band { animation: pk-fade .7s ease-out .15s both, pk-band-glow 1.6s ease-in-out 3.7s 1; }
.pk-doses, .pk-tick { animation: pk-fade .6s ease-out .3s both; }
.pk-pop { stroke-dasharray: 1; stroke-dashoffset: 0;
animation: pk-draw 2.4s linear calc(.45s + var(--i, 0) * .06s) both, pk-fade-pop 2.4s linear calc(.45s + var(--i, 0) * .06s) both; }
.pk-ind { stroke-dasharray: 1; stroke-dashoffset: 0; animation: pk-draw 3s linear .7s both; }
/* 실측점: 곡선이 x=36h를 지나는 순간(0.7s + 3s × 0.292 ≈ 1.58s) */
.pk-sample .pk-dot { animation: pk-pop .5s cubic-bezier(.2, 1.4, .4, 1) 1.58s both; transform-origin: var(--cx) var(--cy); }
.pk-sample .pk-pulse{ animation: pk-pulse 1.4s ease-out 1.64s 2; transform-origin: var(--cx) var(--cy); }
.pk-sample text { animation: pk-fade .5s ease-out 1.82s both; }
.pk-decision { animation: pk-fade .6s ease-out 2.05s both; }
.pk-decision .pk-tag{ animation: pk-rise .6s cubic-bezier(.2, 1, .3, 1) 2.15s both; }
.pk-end .pk-dot { animation: pk-pop .5s cubic-bezier(.2, 1.4, .4, 1) 3.7s both; transform-origin: 622.5px 204.5px; }
.pk-end text { animation: pk-fade .5s ease-out 3.85s both; }
@keyframes pk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pk-fade-pop { from { opacity: 0; } 12% { opacity: .38; } to { opacity: .38; } }
@keyframes pk-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pk-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes pk-rise { from { opacity: 0; transform: translate(266.5px, 44px); } to { opacity: 1; transform: translate(266.5px, 36px); } }
@keyframes pk-band-glow{ 0% { filter: brightness(1); } 35% { filter: brightness(.9) saturate(1.5); } 100% { filter: brightness(1); } }
/* 다시 보기는 i18n.js가 SVG 노드를 복제·교체해서 처리한다 */
/* ─────────────────────── SECTIONS ─────────────────────── */
.section { padding: 104px 0; }
.section--tint { background: var(--tint); border-block: 1px solid var(--line); }
.section__label {
font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--blue); margin-bottom: 14px;
}
.section__title {
font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: var(--ink);
}
.section__desc {
margin-top: 18px; max-width: 62ch; font-size: 17px; color: var(--ink2);
}
/* ──────────────────────── VALUES ──────────────────────── */
/* 헤더와 기둥 카드가 같은 3열 그리드(gap 20px)를 쓴다.
제목은 1열, 도입문은 2~3열 → 도입문의 왼쪽 선이 두 번째 카드의 왼쪽 선과 맞는다. */
.values__head {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
align-items: end;
}
.values__title .section__title { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; }
.values__intro { grid-column: 2 / -1; max-width: 62ch; padding-bottom: 6px; }
.values__intro p { font-size: 17px; color: var(--ink2); }
.values__intro strong { color: var(--navy); font-weight: 800; letter-spacing: -0.01em; }
.pillars {
margin-top: 40px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.pillar {
position: relative; padding: 30px 30px 32px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pillar::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, var(--sky), var(--blue), var(--navy));
opacity: .9;
}
.pillar:hover {
border-color: #C7DAF0;
box-shadow: 0 12px 32px -18px rgba(41, 81, 155, .38);
transform: translateY(-2px);
}
.pillar__num {
display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
color: var(--muted); font-variant-numeric: tabular-nums;
}
.pillar__word {
margin-top: 8px; font-size: clamp(26px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em;
color: var(--navy);
}
.pillar__text { margin-top: 14px; font-size: 15.5px; color: var(--ink2); line-height: 1.7; }
/* ─────────────────────── BUSINESS ─────────────────────── */
.cards {
margin-top: 48px;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; /* 두 카드 같은 폭 — 사용자 선택 */
}
.card {
display: flex; flex-direction: column;
padding: 34px; background: #fff;
border: 1px solid var(--line); border-radius: var(--radius);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover {
border-color: #C7DAF0;
box-shadow: 0 12px 32px -18px rgba(41, 81, 155, .38);
transform: translateY(-2px);
}
.card__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.card__name { font-size: 25px; font-weight: 750; letter-spacing: -0.02em; }
.card__body { font-size: 16px; color: var(--ink2); }
.card__body strong { color: var(--ink); font-weight: 650; }
.badge {
display: inline-flex; align-items: center;
padding: 4px 11px; border-radius: 999px;
font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.badge--dev { background: #EEF4FC; color: var(--navy); border: 1px solid #D3E3F6; }
.badge--live { background: #ECFDF3; color: #15803D; border: 1px solid #BBF7D0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips li {
padding: 5px 12px; border-radius: 8px;
background: var(--tint); border: 1px solid var(--line);
font-size: 13px; font-weight: 500; color: var(--ink2); white-space: nowrap;
}
.card__links { margin-top: 22px; }
.card__links a {
font-size: 15px; font-weight: 600; color: var(--blue); text-decoration: none;
}
.card__links a:hover { text-decoration: underline; }
.card__owner {
margin-top: auto; padding-top: 26px;
font-size: 13px; color: var(--muted);
}
/* ──────────────────────── COMPANY ─────────────────────── */
.facts {
margin-top: 44px; background: #fff;
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.facts__row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
padding: 20px 0; border-bottom: 1px solid var(--line);
}
.facts dt { grid-column: 1; padding-left: 30px; }
.facts dd { grid-column: 2 / -1; padding-right: 30px; }
.facts__row:last-child { border-bottom: 0; }
.facts dt { font-size: 14px; font-weight: 600; color: var(--ink2); }
.facts dd { font-size: 16px; color: var(--ink); }
.facts dd strong { font-weight: 700; }
.facts__sub {
display: block; margin-top: 4px; font-size: 14px; color: var(--muted);
}
.facts dd a { color: var(--blue); text-decoration: none; }
.facts dd a:hover { text-decoration: underline; }
/* ──────────────────────── CONTACT ─────────────────────── */
.contact {
margin-top: 44px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
.contact__card {
display: block; padding: 28px 30px;
border: 1px solid var(--line); border-radius: var(--radius);
text-decoration: none; background: #fff;
transition: border-color .18s ease, box-shadow .18s ease;
}
.contact__card:hover {
border-color: #C7DAF0;
box-shadow: 0 12px 32px -18px rgba(41, 81, 155, .38);
}
.contact__label {
display: block; font-size: 13px; font-weight: 600; color: var(--muted);
letter-spacing: .02em; margin-bottom: 8px;
}
.contact__mail {
display: block; font-size: clamp(16px, 2.2vw, 19px); font-weight: 650; color: var(--navy);
letter-spacing: -0.01em; word-break: break-all;
}
/* ───────────────────────── FOOT ──────────────────────── */
.foot { background: var(--tint); border-top: 1px solid var(--line); }
.foot__inner {
padding-top: 56px; padding-bottom: 40px;
display: flex; gap: 48px; justify-content: space-between; flex-wrap: wrap;
}
.foot__brand { max-width: 380px; }
.foot__brand img { width: auto; height: 28px; }
.foot__slogan { margin-top: 18px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); }
.foot__addr { margin-top: 10px; font-size: 13px; color: var(--muted); max-width: 46ch; }
.foot__links { display: flex; flex-direction: column; gap: 12px; }
.foot__links-title {
font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.foot__links a {
font-size: 14px; color: var(--ink2); text-decoration: none;
}
.foot__links a:hover { color: var(--navy); text-decoration: underline; }
.foot__domain { color: var(--muted); font-size: 13px; }
.foot__copy {
padding-top: 22px; padding-bottom: 40px;
border-top: 1px solid var(--line);
font-size: 13px; color: var(--muted);
}
/* ──────────────────────── RESPONSIVE ──────────────────── */
@media (max-width: 1024px) {
.hero__inner { grid-template-columns: 1fr; gap: 44px; padding-top: 80px; padding-bottom: 88px; }
.hero__copy, .hero__panel { grid-column: 1; padding-right: 0; }
.hero__copy { --title-shift: 0px; --meta-shift: 0px; }
.hero__eyebrow { position: static; margin: 0 0 20px; }
.hero__cta, .hero__meta { width: auto; } /* 스택 레이아웃에선 전체 폭 */
.hero__meta { margin-top: 36px; }
.hero__title { font-size: clamp(42px, 8vw, 64px); }
.hero__lead { max-width: 44ch; font-size: clamp(17px, 2.2vw, 20px); }
.hero__eyebrow { font-size: 13px; letter-spacing: .1em; white-space: normal; }
.values__head { grid-template-columns: 1fr; gap: 20px; }
.values__intro { grid-column: 1; }
.values__title .section__title br { display: none; }
.pillars { grid-template-columns: 1fr; margin-top: 32px; }
}
@media (max-width: 900px) {
.cards, .contact { grid-template-columns: 1fr; }
.facts__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
.facts dt, .facts dd { grid-column: 1; padding-left: 22px; padding-right: 22px; }
.section { padding: 76px 0; }
}
@media (max-width: 720px) {
.nav__inner { height: 60px; gap: 14px; padding: 0 18px; }
.nav__logo img { height: 24px; }
.nav__links { display: none; }
/* 메뉴가 사라지면 margin-left:auto도 함께 사라진다 — 토글을 직접 우측으로 민다 */
.langtoggle { margin-left: auto; }
.wrap { padding: 0 18px; }
.hero__inner { padding-top: 64px; padding-bottom: 72px; }
.panel__head { padding: 12px 14px; }
.panel__replay span:not([aria-hidden]) { display: none; }
.pk { padding: 8px 4px 0; }
.pk-label { font-size: 13px; } /* 좁은 화면에서 SVG가 축소되므로 라벨을 상대적으로 키운다 */
.pk-tick { font-size: 12px; }
.panel__foot { padding: 6px 14px 16px; }
.card { padding: 26px 22px; }
.pillar { padding: 24px 22px 26px; }
}