/* ============================================================
   RHYME 웹사이트 — 단일 스타일시트
   구성: 0 폰트 → 1 토큰 → 2 기본 → 3 컴포넌트 → 4 섹션(홈·About·약관·404) → 5 모션·인쇄
   HTML 의 site.css?v= 값은 tools/build.py 가 파일 해시로 자동 갱신한다.
   ============================================================ */

/* 0. 폰트 ------------------------------------------------------
   Sofia Pro(자체 호스팅, 회사 앱과 같은 파일) — 라틴 문자 범위에만 적용하고
   한글·일본어·중국어는 unicode-range 밖이라 뒤의 Noto Sans KR/JP/SC(구글 폰트)·시스템 글꼴로 넘어간다.
   Regular(400) 파일이 없어 400 은 Medium 으로, 800~900 은 Bold 로 매핑한다.                  */
@font-face{font-family:"Sofia Pro";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/sofia-pro-light.woff2) format("woff2");unicode-range:U+0000-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2113,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Pro";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/sofia-pro-medium.woff2) format("woff2");unicode-range:U+0000-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2113,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/sofia-pro-semibold.woff2) format("woff2");unicode-range:U+0000-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2113,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Pro";font-style:normal;font-weight:700 900;font-display:swap;src:url(/assets/fonts/sofia-pro-bold.woff2) format("woff2");unicode-range:U+0000-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2113,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}

/* 1. 토큰 ------------------------------------------------------ */
:root{
  color-scheme:dark;
  --bg:#000000;            /* 페이지 바탕 */
  --bg-2:#0E0E10;          /* 프레임 자리표시자, 404 카드, 언어 메뉴 */
  --bg-3:#151517;          /* 호버 표면 */
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.24);
  --text:#F5F5F7;          /* 19.3:1 on #000 */
  --text-2:#B3B3B8;        /* 10.1:1 — 본문 */
  --text-3:#8A8A90;        /* 6.1:1 — 아이브로/캡션; #7A7A82 보다 어둡게 쓰지 말 것 */
  --accent:#2AE8C4;        /* 13.4:1 */
  --accent-hover:#5FF0D6;
  --accent-press:#21C9A9;
  --on-accent:#000000;
  --overlay:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.05) 100%);
  /* 글꼴: 라틴은 항상 Sofia Pro, CJK 는 html[lang] 별로 아래에서 덧붙인다 */
  --font-sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Sofia Pro",var(--font-sys);
  --font-display:var(--font-body);
  --fs-hero:clamp(2.5rem, 1.6rem + 2.4vw, 4rem);      /* 40→64px Sofia Pro 700 (1024에서 "NEW PLATFORM" 한 줄 유지) */
  --fs-h1:clamp(2.5rem, 1.8rem + 3vw, 4.5rem);        /* 40→72px 700 (About 히어로) */
  --fs-h2:clamp(1.225rem, .77rem + 1.68vw, 2.1rem);   /* 19.6→33.6px 700 — 30% 축소 (2026-09-08) */
  --fs-quote:clamp(1.5rem, 1rem + 2vw, 2.5rem);       /* 24→40px 700 */
  --fs-closing:clamp(1.75rem, 1.2rem + 3vw, 3.5rem);  /* 28→56px 700 (About 마무리) */
  --fs-lead:clamp(1.125rem, 1rem + .5vw, 1.375rem);   /* 18→22px 400 */
  --fs-body:clamp(1rem, .95rem + .2vw, 1.0625rem);    /* 16→17px 400 */
  --fs-small:.875rem;   /* 14px 푸터 */
  --fs-eyebrow:.8125rem;/* 13px 400 대문자 ls .28em */
  --fs-nav:.875rem;     /* 14px 400 ls .08em (13px <768) */
  --fs-brand:.9375rem;  /* 15px 600 ls .38em (14px <768) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --section-y:clamp(72px, 10vw, 136px);
  --gutter:clamp(20px, 5vw, 48px);
  --container:1200px;
  --grid-gap:24px;      /* 16px <768 */
  --header-h:56px;      /* 64px ≥768 */
  --radius-sm:12px;--radius:16px;--radius-lg:24px;--pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);--dur:.6s;
}
html[lang="ko"]{--font-body:"Sofia Pro","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",Roboto,sans-serif}
html[lang="ja"]{--font-body:"Sofia Pro","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
html[lang="zh"]{--font-body:"Sofia Pro","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
/* 일본어·중국어는 띄어쓰기가 없어 글자 단위로 줄을 바꾼다(normal). body 의 keep-all(한국어용)을 두면 문장부호에서만 줄이 바뀌어 제목·본문이 들쭉날쭉해진다 */
html[lang="ja"] body,html[lang="zh"] body{word-break:normal}
@media (min-width:768px){:root{--header-h:64px}}
@media (max-width:767px){:root{--grid-gap:16px;--fs-nav:.8125rem;--fs-brand:.875rem}}

/* 2. 기본 ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:400 var(--fs-body)/1.75 var(--font-body);color:var(--text-2);background:var(--bg);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
h1,h2,p{margin:0}
h1,h2{color:var(--text);font-weight:700;text-wrap:balance}
h2{font:700 var(--fs-h2)/1.25 var(--font-body);letter-spacing:-.01em;color:var(--text)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--accent);color:#000}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap)}
.grid>*{grid-column:1/-1;min-width:0}
@media (min-width:768px){.grid{grid-template-columns:repeat(12,minmax(0,1fr))}}
.section{padding-block:var(--section-y)}
.section>.section-rule{border-top:1px solid var(--line);padding-top:var(--section-y);margin-top:calc(-1*var(--section-y))}
.br-lg{display:none}
@media (min-width:768px){.br-lg{display:inline}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lead a,.legal a{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lead a:hover,.legal a:hover{color:var(--accent)}

/* 3. 컴포넌트 -------------------------------------------------- */
/* 건너뛰기 링크 */
.skip{position:absolute;left:16px;top:-48px;z-index:100;padding:10px 14px;background:var(--accent);color:#000;border-radius:8px;font:600 14px var(--font-display);text-decoration:none}
.skip:focus{top:12px}

/* 헤더: 왼쪽 워드마크 + 메뉴, 오른쪽 언어 선택 */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid transparent;transition:border-color .3s,background .2s}
@supports not (backdrop-filter:blur(1px)){.site-header{background:rgba(0,0,0,.92)}}
.site-header.is-scrolled{border-color:var(--line);background:rgba(0,0,0,.82)}
.site-header .container{display:flex;align-items:center;gap:16px;height:100%}
.head-left{display:flex;align-items:center;gap:32px;min-width:0}
@media (min-width:768px){.site-header .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.head-left{display:contents}.brand{justify-self:start}.site-nav{justify-self:center;position:relative}.site-nav ul{gap:0}.site-nav li:last-child{position:absolute;left:calc(100% + 140px);top:0}.lang-nav{justify-self:end}}
.brand{display:inline-block;font:600 var(--fs-brand)/1 var(--font-display);letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:var(--text);text-decoration:none;padding-block:8px;white-space:nowrap}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;font:400 var(--fs-nav)/1 var(--font-display);letter-spacing:.064em;color:var(--text-2);text-decoration:none;padding-block:0;white-space:nowrap}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--text)}
.site-nav a[aria-current="page"]{color:var(--accent);text-decoration:none;font-weight:700} /* 현재 페이지: 민트+볼드 (2026-09-08) */
@media (max-width:767px){.site-nav ul{gap:20px}}
@media (max-width:479px){.head-left{gap:20px}.site-nav ul{gap:16px}.lang .globe{display:none}}

/* 언어 선택 — <details> 디스클로저. JS 없이도 열리고, 항목은 진짜 링크(같은 페이지의 다른 언어) */
.lang-nav{margin-left:auto;flex:none}
.lang{position:relative}
.lang>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px 0 10px;margin-right:-6px;border-radius:8px;font:400 var(--fs-nav)/1 var(--font-body);letter-spacing:.02em;color:var(--text-2);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::marker{content:""}
.lang>summary:hover,.lang[open]>summary{color:var(--text)}
.lang svg{width:16px;height:16px;flex:none}
.lang .chev{width:14px;height:14px;transition:transform .2s}
.lang[open] .chev{transform:rotate(180deg)}
.lang-list{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:184px;margin:0;padding:6px;list-style:none;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.lang-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border-radius:8px;font:400 15px/1.2 var(--font-body);color:var(--text-2);text-decoration:none;white-space:nowrap}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--bg-3);color:var(--text)}
.lang-list a:focus-visible{outline-offset:-2px}
.lang-list a[aria-current]{color:var(--text)}
.lang-list .check{color:var(--accent)}

/* 푸터 */
.site-footer{border-top:1px solid var(--line);padding:64px 0 40px;font:400 var(--fs-small)/1.6 var(--font-body);color:var(--text-2)}
.site-footer .grid{gap:32px}
.site-footer p.brand{display:block;padding-block:0}
.foot-mail{display:block;margin-top:16px;color:var(--text-2);text-decoration:none;width:fit-content}
.foot-mail:hover{text-decoration:underline;text-underline-offset:4px}
.foot-h{font:400 12px/1 var(--font-display);text-transform:uppercase;letter-spacing:.2em;color:var(--text-3);margin-bottom:12px}
.site-footer nav ul{list-style:none;margin:0;padding:0}
.site-footer nav a{display:block;line-height:2;color:var(--text-2);text-decoration:none;width:fit-content}
.site-footer nav a:hover{color:var(--text)}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.copy{font-size:13px;color:var(--text-3)}
.social{list-style:none;margin:0;padding:0;display:flex;gap:4px}
/* .site-footer 를 앞에 붙여 위의 `.site-footer nav a`(display:block; width:fit-content)보다 우선하게 한다 — 40×40 원형 터치 영역 유지 */
.site-footer .social a{display:grid;place-items:center;width:40px;height:40px;line-height:1;border-radius:50%;color:var(--text-3);transition:color .2s,background .2s}
.site-footer .social a:hover,.site-footer .social a:focus-visible{color:var(--text);background:rgba(255,255,255,.06)}
.social svg{width:20px;height:20px}
@media (max-width:639px){.site-footer{padding:48px 0 32px}.foot-bottom{flex-direction:column-reverse;align-items:flex-start}}
@media (min-width:768px){.site-footer .grid{gap:var(--grid-gap)}.foot-brand{grid-column:1/span 6}.foot-menu{grid-column:7/span 3}.foot-legal{grid-column:10/span 3}}
@media (min-width:1024px){.foot-brand{grid-column:1/span 5}}

/* 버튼·링크 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--pill);border:1px solid transparent;font:600 14px/1 var(--font-display);letter-spacing:.04em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
@media (max-width:639px){.btn{height:44px;padding:0 18px}}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--on-accent);letter-spacing:0}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{background:var(--accent-press)}
.btn-secondary{background:transparent;border-color:var(--line-strong);color:var(--text)}
:root{--wiggly-green:#19D5B1}
.btn-secondary:hover,.btn-secondary:focus-visible{border-color:var(--wiggly-green);background:rgba(25,213,177,.06)} /* hover 라인 = 위글리 메인 초록 (2026-09-08) */
.ext{font-size:.9em;opacity:.7;margin-left:2px}
.btn-ico{gap:10px;padding-left:18px}.btn-ico .ico{width:18px;height:18px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-arrow{display:inline-flex;align-items:center;gap:4px;font:400 14px var(--font-display);letter-spacing:.06em;color:var(--text-3);text-decoration:none}
.link-arrow:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}

/* 아이브로·리드·인용 */
.eyebrow{font:400 var(--fs-eyebrow)/1 var(--font-display);letter-spacing:.28em;text-transform:uppercase;color:var(--text-3)}
.num::before{content:"";display:inline-block;width:24px;height:1px;background:var(--accent);vertical-align:middle;margin-right:12px}
.sec-title .num{margin-bottom:var(--eyebrow-gap)} /* 번호 단락 ↔ 제목 간격 (2026-09-08) */
.lead{font:400 var(--fs-lead)/1.6 var(--font-body);color:var(--text-2)}
.lead-sm{font-size:var(--fs-body);font-weight:400;line-height:1.75}
.quote{max-width:760px;margin-inline:auto;text-align:center;font:700 var(--fs-h2)/1.35 var(--font-body); /* 가운데 문구 = 단락 제목 크기 (2026-09-08) */letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.quote::before{content:"";display:block;width:40px;height:2px;background:var(--accent);margin:0 auto 28px}
.sec-text h2{margin-top:16px}
.sec-text .lead{margin-top:20px}
.sec-text .lead+.lead{margin-top:12px}
.sec-text .btn{margin-top:32px}

/* 프레임(이미지 액자) */
.frame{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--bg-2);margin:0}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.frame>img{width:100%;height:100%;object-fit:cover}
@media (min-width:768px){.frame{border-radius:var(--radius)}}
.square{aspect-ratio:1}.wide{aspect-ratio:16/9}.photo{aspect-ratio:3/2}.portrait{aspect-ratio:4/5}

/* 레일(모바일 가로 스냅 → ≥md 그리드) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);margin-inline:calc(-1*var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.cols-3{--cols:3}
@media (min-width:768px){.rail{grid-auto-flow:row;grid-template-columns:repeat(var(--cols,3),1fr);gap:16px;overflow:visible;padding-inline:0;margin-inline:0}}

/* 페더(About 마무리 이미지) */
.feather{-webkit-mask-image:radial-gradient(ellipse 80% 72% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 80% 72% at 50% 50%,#000 55%,transparent 100%)}

/* 4. 섹션 — 홈 ------------------------------------------------ */
.hero{padding:16px 0 64px}
.hero .container{display:flex;flex-direction:column}
.hero .frame-hero{order:-1;aspect-ratio:4/5;border-radius:var(--radius)}
.hero .frame-hero>img{object-position:50% 42%}
.hero .eyebrow{margin-top:32px}
.hero-title{font:700 var(--fs-hero)/1.02 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:var(--text);margin-top:20px;text-wrap:balance}
.dash{display:block;width:0;height:0;margin:.06em 0;background:none;overflow:hidden;text-indent:-999px;color:transparent} /* 민트 라인 제거, 줄 간격 80% 축소 (2026-09-08) */
.hero .btn-row{margin-top:40px}
.hero-link{margin-top:20px}
:root{--eyebrow-gap:24px}
@media (min-width:768px){
  .hero{padding:32px 0 64px}
  .hero .container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
  .hero-text{grid-column:1/span 12}
  .hero .frame-hero{order:0;grid-column:1/span 12;aspect-ratio:16/10;max-height:560px;border-radius:var(--radius-lg);margin-top:24px}
  .hero .frame-hero>img{object-position:50% 45%}
  .hero .eyebrow{margin-top:0}
}
@media (min-width:1280px){.hero-text{padding-right:48px}}
@media (min-width:1024px){
  .hero{padding:0}
  .hero .container{min-height:min(calc(100svh - var(--header-h)),880px);align-items:center;padding-block:48px 64px}
  .hero-text{grid-column:1/span 6;padding-right:24px}
  .hero .frame-hero{grid-column:7/span 6;aspect-ratio:4/5;max-height:min(720px,calc(100svh - 160px));margin-top:0}
  .hero .frame-hero>img{object-position:50% 42%}
}

/* 01 브랜드 컨셉 */
.sec-head .sec-lead{margin-top:20px}
@media (min-width:768px){.sec-head .sec-lead{margin-top:calc(var(--fs-eyebrow) + var(--eyebrow-gap))}} /* 리드 상단 = 제목 상단 (2026-09-08) */
#brand .rail{margin-top:40px}
#brand .quote{margin-top:64px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:800px;margin:56px auto 0}
@media (min-width:768px){
  #brand .sec-title{grid-column:1/span 7}
  #brand .sec-lead{grid-column:9/span 4;align-self:start;padding-bottom:0;margin-top:calc(var(--fs-eyebrow) + var(--eyebrow-gap))} /* 리드 상단 = 제목 상단 (2026-09-08) */
  #brand .rail{margin-top:56px}
  #brand .quote{margin-top:96px}
  .grid-2{gap:16px}
}

/* 02 놀거리 */
#play .sec-title{grid-column:1/-1}
#play .lead{margin-top:16px;max-width:640px}
.bento{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
.bento-tall{aspect-ratio:4/5}
.bento-tall>img{object-position:50% 0}
#play .rail{margin-top:16px}
@media (min-width:768px){
  #play .sec-title{grid-column:1/span 9}
  .bento{grid-template-columns:8fr 4fr;align-items:stretch;margin-top:56px}
  .bento-tall{aspect-ratio:auto;min-height:100%}
  .bento-tall>img{position:absolute;inset:0;width:100%;height:100%}
}

/* 03 협업 */
#collab .frame{margin-top:40px}
@media (min-width:1024px){
  #collab .grid{align-items:center}
  #collab .sec-text{grid-column:1/span 5}
  #collab .frame{grid-column:7/span 6;margin-top:0}
}

/* 4. 섹션 — About --------------------------------------------- */
.page-hero{position:relative;min-height:480px;height:70svh;overflow:hidden;background:var(--bg-2)}
.page-hero .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%}
.page-hero::after{content:"";position:absolute;inset:0;background:var(--overlay)}
.page-hero .container{position:absolute;left:0;right:0;bottom:0;z-index:1;padding-bottom:40px}
.page-hero-content{max-width:640px}
.page-hero h1{font:700 var(--fs-h1)/1.1 var(--font-body);letter-spacing:-.01em;color:var(--text)}
.page-hero .lead{margin-top:20px;color:var(--text)}
@media (min-width:768px){
  .page-hero{height:clamp(440px,62vh,680px);min-height:0}
  .page-hero .cover{object-position:62% 50%}
  .page-hero .container{padding-bottom:64px}
}
/* 01 창조와 평등(#equality)·03 주인공(#join): 글 왼쪽/이미지 오른쪽, 02 단순한 시작(#simple): 이미지 왼쪽/글 오른쪽. 모바일은 항상 이미지 먼저 */
.about-row .sec-text{margin-top:32px}
.about-row .frame{max-height:640px}
.about-row .frame>img.crop-top{object-position:50% 30%}
@media (max-width:1023px){#equality .frame,#join .frame{order:-1}}
@media (min-width:768px) and (max-width:1023px){.about-row .sec-text{max-width:640px}}
@media (min-width:1024px){
  .about-row{align-items:center}
  .about-row .sec-text{margin-top:0}
  #simple .frame{grid-column:1/span 6}
  #simple .sec-text{grid-column:8/span 5}
  #equality .sec-text,#join .sec-text{grid-column:1/span 5}
  #equality .frame,#join .frame{grid-column:7/span 6}
}
.closing{padding-bottom:0}
.closing-line{max-width:760px;margin-inline:auto;text-align:center;font:700 var(--fs-closing)/1.25 var(--font-body);letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.closing figure{margin:8px auto 0;max-width:1100px}
.closing figure img{width:100%}

/* 4. 섹션 — 약관 --------------------------------------------- */
.legal-note{max-width:720px;margin:48px auto 0;font-size:14px;color:var(--text-3)}
.legal-note+.legal{padding-top:16px}
.legal{max-width:720px;margin-inline:auto;padding-top:56px}
@media (max-width:767px){.legal{padding-top:32px}.legal-note{margin-top:32px}}
.legal h1{font:700 clamp(2rem,1.5rem + 2vw,3rem)/1.15 var(--font-display);letter-spacing:-.01em;color:var(--text);margin:0}
.legal h1::after{content:"";display:block;width:40px;height:2px;background:var(--accent);margin:20px 0 40px}
.legal h2{font:700 20px/1.3 var(--font-display);color:var(--text);margin:44px 0 12px;scroll-margin-top:calc(var(--header-h) + 16px)}
.legal p{font:400 16px/1.75 var(--font-body);color:var(--text-2);margin:0 0 12px;overflow-wrap:anywhere}
.legal ul{margin:4px 0 16px;padding-left:22px}
.legal li{margin:6px 0;color:var(--text-2)}
.legal li::marker{color:var(--text-3)}
.legal p.kv{border-left:2px solid var(--accent);padding-left:14px;color:var(--text)}
.legal p.note{font-size:15px;color:var(--text-3)}
.legal address.officer{font-style:normal;border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:12px 0 16px}
.legal address.officer p{margin:0 0 4px}
.legal-nav{max-width:720px;margin:64px auto 0;padding-bottom:var(--section-y);font-size:14px;color:var(--text-3)}
.legal-nav a{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.legal-nav a:hover{color:var(--accent)}

/* 4. 섹션 — 404 ---------------------------------------------- */
.nf{min-height:calc(100svh - var(--header-h) - 320px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;padding:var(--section-y) var(--gutter)}
.nf .code{font:300 clamp(72px,10vw,160px)/1 var(--font-display);color:var(--text-3)}
.nf h1{font:700 28px/1.3 var(--font-body)}
.nf .btn-row{justify-content:center;margin-top:12px}

/* 5. 모션·인쇄 ------------------------------------------------ */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}
@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.skip{display:none}
  .legal *{color:#000!important}
}
/* reveal 안전망: site.js 로드 실패 시에도 2.5초 뒤 표시 (2026-09-07) */
@keyframes revealFallback{to{opacity:1;transform:none}}
.js .reveal{animation:revealFallback .01s 2.5s forwards}