/* KMS 홈페이지 — 리셋·폰트·타이포·레이아웃 유틸·리빌 */

/* ---------- Fonts (전부 자체 호스팅) ---------- */
/* Pretendard 는 KS X 1001 한글 2,350자 + 라틴·기호 서브셋(*.subset.woff2, build 시 fontTools 로 생성) — 전체 글리프 2MB 대신 ~475KB */
@font-face{font-family:"Pretendard";src:url(/assets/fonts/PretendardVariable.subset.woff2?v=293c3535) format("woff2-variations"),url(/assets/fonts/PretendardVariable.subset.woff2?v=293c3535) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-latin-400-normal.woff2?v=ad42ff0a) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-latin-400-italic.woff2?v=e5a45d53) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2?v=edfa21ab) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2?v=384df4e1) format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-latin-600-normal.woff2?v=a65fe668) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-latin-600-italic.woff2?v=20f04746) format("woff2");font-weight:600;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Fallback";src:local("Georgia");size-adjust:90%;ascent-override:92%;descent-override:26%;line-gap-override:0%}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-variant-numeric:lining-nums}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.75;font-weight:400;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all;overflow-wrap:normal}
img,picture,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--kms-blue);outline-offset:4px}
.on-dark :focus-visible,.on-dark:focus-visible{outline-color:var(--orange)}

/* ---------- Layout utils ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;top:8px;left:8px;z-index:100;background:var(--paper);color:var(--kms-blue);font-weight:600;font-size:var(--fs-small);padding:10px 14px;transform:translateY(-200%);transition:transform var(--dur) var(--ease);border:1px solid var(--kms-blue)}
.skip:focus{transform:none}
.section{padding:var(--s6) 0}
@media (min-width:1024px){.section{padding:var(--s7) 0}}
.on-dark{color:var(--on-dark)}

/* ---------- Type ---------- */
.eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--kms-blue)}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;flex:none;opacity:.8}
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--on-dark-2)}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.serif em,.serif i{font-style:italic;font-weight:400}
.h2{font-family:var(--sans);font-size:var(--fs-h2);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--ink);margin-top:14px;text-wrap:balance}
.h2:lang(en){font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.1;font-size:clamp(40px,4.4vw,56px)}
.on-dark .h2{color:#fff}
.h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.lead{font-size:var(--fs-lead);line-height:1.7;color:var(--ink-2)}
.body{font-size:var(--fs-body);line-height:1.8;color:var(--ink-2)}
.body p+p,.body+.body,.lead+.body{margin-top:var(--s3)}
.on-dark .lead,.on-dark .body{color:var(--on-dark-2)}
.idx,.no,.step{font-family:var(--serif);font-weight:400;font-variant-numeric:oldstyle-nums;letter-spacing:.06em;color:var(--gray)}

/* ---------- Section head ---------- */
.sec-head{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
@media (min-width:1024px){.sec-head{grid-template-columns:5fr 7fr;gap:var(--s5);align-items:end}}
.sec-head .lead{max-width:60ch}
.sec-head .serif-line{font-family:var(--serif);font-size:20px;line-height:1.5;font-style:italic;font-weight:400;color:var(--gray)}
.on-dark .sec-head .serif-line{color:var(--on-dark-2)}

/* ---------- Reveal ---------- */
/* 첫 화면(히어로) 요소: JS 에 의존하지 않는 CSS 진입 애니메이션 — LCP 가 main.js 도착에 종속되지 않음 */
@keyframes fx-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fx{animation:fx-up var(--dur-reveal) var(--ease) both}
.fx-d1{animation-delay:.08s}.fx-d2{animation-delay:.16s}.fx-d3{animation-delay:.24s}.fx-d4{animation-delay:.32s}
/* 뷰포트 아래 섹션: 스크롤 리빌 */
.rv{opacity:0;transform:translateY(12px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
}