/*
 * KOSMO 테마 레이어 — "에디토리얼 모노크롬" (D-39, 2026-09-28)
 * 참고: assets/웹디자인/Revolut/DESIGN.md — 무채색 UI, 알약(pill) 컨트롤, 그림자 대신 헤어라인,
 *       제목은 굵기 500(크기와 자간으로 위계), 색은 전면 사진이 담당, 유채색은 상단 안내 띠 하나.
 * 모든 페이지 스타일 뒤에 불러온다(layouts/base.php). 구조는 app.css·메뉴별 css, 이 파일은 모양만 덮어쓴다.
 * 되돌리기: base.php에서 이 파일을 빼고 tokens.css를 assets/웹디자인/backup-2026-09-28-teal/ 에서 복원.
 */

/* ---------- Base ---------- */
body { background: var(--paper); font-feature-settings: "ss06"; letter-spacing: -0.005em; }
a { color: var(--ink); }
a:hover { color: var(--ink); opacity: .72; }
h1, h2, h3, h4 { font-weight: 500; }
.t-display { font-weight: 500; letter-spacing: -0.024em; line-height: 1.1; }
.t-h1 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.t-h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
.t-h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.t-h4 { font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.t-lead { font-size: 18px; line-height: 1.65; color: var(--ink-muted); }
.t-caption { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }
.heading-link:hover { color: var(--ink); }

/* 로고 L자 장식은 쓰지 않는다 — 장식 그래픽 없이 사진과 타이포로만 (로고 자체는 유지) */
.tape, .page-head .tape::after { display: none !important; }

/* ---------- Sections: 흰 캔버스 · Mist 오목 면 · 잉크 띠 ---------- */
.section { background: var(--skin-tint); padding: 104px 0; }
.section--white { background: var(--white); }
.section--ink, .core { background: var(--ink); color: var(--white); }
.section-head { margin-bottom: 48px; }
.section-head .t-lead { color: var(--ink-muted); }
@media (max-width: 767px) { .section { padding: 64px 0; } }

/* ---------- Brand ribbon (유일한 유채색 면) ---------- */
.ribbon { background: var(--brand-ribbon); color: var(--white); font-size: 14px; line-height: 1.4; }
.ribbon .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; min-height: 40px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
.ribbon a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ribbon a:hover { color: var(--white); opacity: .85; }

/* ---------- Buttons: 알약 4종 ---------- */
.btn { border-radius: var(--radius-pill); min-height: 48px; padding: 10px 24px; font-weight: 600; font-size: 16px; letter-spacing: -0.005em; border-width: 2px; box-shadow: none; }
.btn--sm { min-height: 40px; padding: 6px 18px; font-size: 15px; }
.btn--primary, .btn--donate { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--primary:hover, .btn--donate:hover { background: var(--ink); color: var(--white); opacity: .82; }
.btn--outline { background: var(--white); border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); opacity: 1; }
.btn--light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--white); color: var(--ink); opacity: .86; }
.btn--ghost-light { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .9); color: var(--white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .22); color: var(--white); opacity: 1; }
.link-strong { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- Header: 잉크 띠 ---------- */
.site-header { background: var(--ink); border-bottom: 0; color: var(--white); }
.logo, .logo__brand { color: var(--white); }
.gnb__link { color: var(--white); font-weight: 500; font-size: 16px; border-radius: var(--radius-pill); padding: 8px 14px; }
.gnb__link:hover, .gnb__item:focus-within > .gnb__link { color: var(--white); background: rgba(255, 255, 255, .1); }
.gnb__link[aria-current="true"] { color: var(--white); background: rgba(255, 255, 255, .14); box-shadow: none; border-radius: var(--radius-pill); }
.gnb__sub { border-radius: var(--radius-md); border-color: var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); padding: 10px; }
.gnb__sub a { border-radius: var(--radius-sm); }
.gnb__sub a:hover { background: var(--skin-tint); color: var(--ink); }
.gnb__subitem a { color: var(--ink-muted); }
.lang__button { background: transparent; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-pill); color: var(--white); padding: 6px 14px; }
.lang__button:hover { border-color: var(--white); }
.lang__list { border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.lang__list a { border-radius: var(--radius-sm); }
.lang__list a:hover { background: var(--skin-tint); }
.lang__list a[aria-current="true"] { color: var(--ink); }
.header-actions .btn--donate { background: var(--white); border-color: var(--white); color: var(--ink); }
.header-actions .btn--donate:hover { opacity: .86; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { background: var(--white); }
.site-header :focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--white); }
.drawer summary { font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.drawer__langs a[aria-current="true"] { color: var(--ink); }
.lang-banner { background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line); }
.lang-banner a { color: var(--ink); }
.lang-banner button { color: var(--ink-muted); }

/* ---------- Page head ---------- */
.page-head { background: var(--white); border-bottom: 1px solid var(--line); padding: 56px 0 64px; }
.breadcrumb, .breadcrumb a { color: var(--ink-muted); }
.page-head--photo { min-height: 440px; padding: 120px 0 64px; border-bottom: 0; }
.page-head--photo::after { background: linear-gradient(90deg, rgba(15, 15, 15, .78) 0%, rgba(15, 15, 15, .5) 48%, rgba(15, 15, 15, .12) 100%), linear-gradient(0deg, rgba(15, 15, 15, .45) 0%, rgba(15, 15, 15, 0) 45%); }
.page-head--photo .t-h1 { font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -0.024em; line-height: 1.1; }
.page-head--photo .t-lead { color: rgba(255, 255, 255, .9); }
@media (max-width: 767px) { .page-head--photo { min-height: 300px; padding: 80px 0 40px; } }

/* ---------- Hero ---------- */
.hero-full { min-height: min(92vh, 820px); background: var(--ink); }
.hero-full::after {
  background:
    linear-gradient(90deg, rgba(15, 15, 15, .74) 0%, rgba(15, 15, 15, .46) 42%, rgba(15, 15, 15, 0) 78%),
    linear-gradient(0deg, rgba(15, 15, 15, .7) 0%, rgba(15, 15, 15, 0) 40%);
}
.hero-full__legal { font-size: 14px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .82); }
.hero-full__title { font-size: clamp(42px, 6.6vw, 88px); line-height: 1.04; font-weight: 500; letter-spacing: -0.03em; }
.hero-full__lead { color: rgba(255, 255, 255, .9); }
.hero-full__quick { border-top-color: rgba(255, 255, 255, .25); }
.quick-tile__label { font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.quick-tile__desc { color: rgba(255, 255, 255, .78); }
@media (max-width: 767px) {
  .hero-full::after { background: linear-gradient(0deg, rgba(15, 15, 15, .9) 0%, rgba(15, 15, 15, .62) 55%, rgba(15, 15, 15, .3) 100%); }
}

/* ---------- Statement · counters · quote ---------- */
.statement__label { border-top: 0; padding-top: 12px; color: var(--ink-muted); font-weight: 500; font-size: 16px; }
.statement__text { font-weight: 500; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.45; letter-spacing: -0.02em; }
.counters { border-color: var(--line); }
.counters dd { font-weight: 500; font-size: 40px; letter-spacing: -0.02em; }
.counters__item + .counters__item { border-left-color: var(--line); }
.quote-block__photo { border-radius: var(--radius-lg); }
.quote-block q { font-weight: 500; letter-spacing: -0.015em; }
.quote-block cite span { color: var(--on-ink-muted); }

/* ---------- 사진 카드: 22.5px, 중립 그라데이션 ---------- */
.pcard > a, .tile, .news-feature__card, .mosaic__item, .split-media__img, .program-photo img, .program-section__figure img { border-radius: var(--radius-lg); }
.pcard > a::after { background: linear-gradient(0deg, rgba(15, 15, 15, .86) 0%, rgba(15, 15, 15, .38) 52%, rgba(15, 15, 15, 0) 100%); }
.pcard__name, .tile__label, .news-feature__title { font-weight: 500; letter-spacing: -0.015em; }
.pcard__group, .news-feature__kicker { color: rgba(255, 255, 255, .78); font-weight: 500; }
.tile::after { background: linear-gradient(0deg, rgba(15, 15, 15, .78) 0%, rgba(15, 15, 15, 0) 52%); }
.mosaic__item::after { background: linear-gradient(0deg, rgba(15, 15, 15, .72) 0%, rgba(15, 15, 15, 0) 45%); }
.news-feature__card::after { background: linear-gradient(0deg, rgba(15, 15, 15, .86) 0%, rgba(15, 15, 15, .12) 62%); }
.involve { background: var(--ink); }
.involve::after { background: linear-gradient(90deg, rgba(15, 15, 15, .82) 0%, rgba(15, 15, 15, .6) 45%, rgba(15, 15, 15, .15) 100%); }
.involve__content .t-h1 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -0.024em; line-height: 1.1; }

/* ---------- 핵심 사업: 잉크 띠 위 흰 카드 (요금제 카드 패턴) ---------- */
.core-badge { display: inline-flex; padding: 4px 14px; border-radius: var(--radius-pill); background: var(--skin-tint); color: var(--ink); font-size: 13px; font-weight: 600; border: 1px solid var(--line); }
.core-badge::before { display: none; }
.core .core-badge { background: rgba(255, 255, 255, .08); color: var(--white); border-color: rgba(255, 255, 255, .3); }
.core__head .t-h1 { font-size: clamp(36px, 5vw, 72px); letter-spacing: -0.028em; line-height: 1.06; }
.core__intro .t-lead { color: var(--on-ink-muted); }
.tm-sub__link { border-radius: var(--radius-lg); border-color: var(--line); }
.tm-sub__name { font-weight: 500; font-size: 24px; letter-spacing: -0.015em; }
.tm-sub__short { color: var(--ink-muted); font-weight: 500; }
.tm-sub__status { border-radius: var(--radius-pill); background: rgba(255, 255, 255, .92); color: var(--ink); padding: 4px 12px; font-weight: 600; }
.tm-sub__points { border-top-color: var(--line-soft); }
.tm-sub__point::before { border-color: var(--ink); width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--ink); top: .7em; }
.tm-sub__more { color: var(--ink); text-decoration-thickness: 1.5px; }
.core-panel { background: var(--skin-tint); border-radius: var(--radius-lg); }

/* ---------- 태그·배지 ---------- */
.tag { border-radius: var(--radius-pill); background: var(--skin-tint); color: var(--ink); border: 1px solid var(--line); padding: 2px 12px; font-weight: 500; }

/* ---------- 패널·목록: Mist 오목 면, 그림자 없음 ---------- */
.summary-box { background: var(--skin-tint); border-left: 0; border-radius: var(--radius-md); padding: 24px 28px; font-size: 17px; }
.callout { background: var(--skin-tint); border-radius: var(--radius-md); color: var(--ink-soft); }
.callout--info { background: var(--skin-tint); color: var(--ink); border: 1px solid var(--line); }
.cta-panel { border-radius: var(--radius-lg); border-color: var(--line); }
.cta-panel--skin { background: var(--skin-tint); border-color: var(--skin-tint); }
.source-box { background: var(--skin-tint); border-radius: var(--radius-md); }
.detail-aside { border-radius: var(--radius-lg); border-color: var(--line); box-shadow: none; }
.table-wrap { border-radius: var(--radius-md); border-color: var(--line); }
.check-list li { background: var(--skin-tint); border-color: transparent; border-radius: var(--radius-sm); }
.check-list li::before { border-color: var(--ink); border-radius: 50%; }
.point-list, .point-list li { border-color: var(--line-soft); }
.point-list li::before { border: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); top: 1.45em; }
.fact-grid dl { border-radius: var(--radius-lg); background: var(--line); }
.fact-grid dt { color: var(--ink-muted); font-weight: 500; }
.fact-grid dd { font-weight: 500; }
.format-cards li { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.format-cards h3 { font-weight: 500; }
.steps li { border-top-width: 2px; }
.steps li:first-child { border-top-color: var(--ink); }
.faq summary { font-weight: 500; }
.faq summary::after { color: var(--ink); }

/* ---------- 탭·하위 메뉴: 알약 ---------- */
.sub-tabs { border-bottom: 1px solid var(--line); }
.sub-tabs ul { gap: 8px; padding: 12px 0; }
.sub-tabs a { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 18px; border-bottom-width: 1px; font-size: 15px; }
.sub-tabs a:hover { border-color: var(--ink); }
.sub-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 600; }
.local-nav a { border-radius: var(--radius-pill); border-left: 0; }
.local-nav a[aria-current="page"] { background: var(--ink); color: var(--white); border-radius: var(--radius-pill); }
.local-nav a:hover { background: var(--skin-tint); }
.local-nav a[aria-current="page"]:hover { background: var(--ink); color: var(--white); opacity: .9; }

/* ---------- 입력: 알약 ---------- */
.input, .select { border-radius: var(--radius-pill); padding-left: 18px; padding-right: 18px; }
.textarea { border-radius: var(--radius-md); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(31, 31, 31, .12); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-muted); }
.site-footer a { color: var(--on-ink-muted); }
.site-footer a:hover { color: var(--white); opacity: 1; }
.detail-aside > .tag { justify-self: start; }