/* 서체: rubi.kr과 같은 체계
   영문·숫자·기호는 Pretendard, 한글은 에스코어 드림(4 Regular). 웨이트는 400 하나로 통일합니다.
   Pretendard에는 한글 글리프가 있으므로 라틴 unicode-range를 지정해 한글이 Pretendard로 나오지 않게 합니다. */
@font-face{font-family:"RubiLatin";font-weight:400;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2") format("woff2");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+2190-2199,U+2212,U+2215}
@font-face{font-family:"RubiKo";font-weight:400;font-display:swap;src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff") format("woff")}

/* rubi.kr(Polestar 문법): 흑백 위주, 각진 버튼, 얇은 라인, 가벼운 헤드라인, 포인트 컬러는 아주 드물게 */
:root{
  --bg:#ffffff;
  --surface:#f4f4f4;
  --shot:#fafafa;
  --fg:#101114;
  --muted:#6e6f73;
  --line:#e3e3e3;
  --dark:#101114;
  --on-dark:#ffffff;
  --accent:#c9a36a;
  --font:"RubiLatin","RubiKo","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  /* 글자 크기 체계 (PC / 모바일)
     제목 28/32 · 24/28, 강조 수치 24, 카드 제목 18, 본문 15/22 · 14/21, 버튼·메뉴 14, 캡션 13, 라벨 12 (12px 미만 없음) */
  --ls:-0.3px;
  --ls-title:-1px;
  --ls-label:.08em;
  --gutter:clamp(16px,4vw,56px);
  --max:1440px;
  --header-h:64px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#101114;--surface:#1a1b1f;--fg:#f2f2f2;--muted:#9a9ba0;--line:#2a2b30;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#101114;--surface:#1a1b1f;--fg:#f2f2f2;--muted:#9a9ba0;--line:#2a2b30;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:400;font-size:15px;line-height:22px;letter-spacing:var(--ls);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all;overflow-wrap:anywhere}
html[lang="en"] body,html[lang="ja"] body{word-break:normal}
html[lang="ja"] body{line-break:strict}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,b,strong,th{font-weight:400}
p,figure,dl,dd,ol,ul{margin:0}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.mt{margin-top:clamp(40px,6vw,80px)}

/* ---------- 헤더 ---------- */
header.site{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .2s}
header.site.scrolled,body.menu-open header.site{border-bottom-color:var(--line)}
.bar{height:var(--header-h);display:flex;align-items:center;gap:40px}
.logo{flex:none;display:block;height:17px}
.logo img{height:17px;width:auto;max-width:none;filter:brightness(0)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo img{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .logo img{filter:brightness(0) invert(1)}
.menu{display:flex;gap:4px;margin:0;padding:0;list-style:none;height:100%}
.menu li{height:100%;display:flex;align-items:center}
.menu a{font-size:14px;line-height:20px;padding:8px 12px;position:relative;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu a.on::after,.menu a:hover::after{transform:scaleX(1)}
.tools{margin-left:auto;display:flex;align-items:center;gap:20px}
.lang{display:flex;gap:2px}
.lang a{font-size:12px;line-height:16px;letter-spacing:var(--ls-label);color:var(--muted);padding:4px 6px}
.lang a.on,.lang a:hover{color:var(--fg)}
.shop{display:inline-flex;align-items:center;min-height:36px;padding:0 18px;font-size:14px;line-height:1;background:var(--fg);color:var(--bg);border:1px solid var(--fg);transition:background .2s,color .2s}
.shop:hover{background:transparent;color:var(--fg)}
.icon-btn{all:unset;cursor:pointer;display:grid;place-items:center;width:36px;height:36px}
.icon-btn svg{width:20px;height:20px}
.burger{display:none}
.drawer{display:none}
@media (max-width:1080px){
  .menu,.tools .lang{display:none}
  .burger{display:grid}
  .bar{gap:16px}
  .tools{gap:8px}
  .drawer{position:fixed;inset:var(--header-h) 0 0 0;background:var(--bg);z-index:49;overflow-y:auto;padding:8px var(--gutter) 40px;transform:translateX(100%);transition:transform .3s ease;display:block;visibility:hidden}
  body.menu-open .drawer{transform:none;visibility:visible}
  .dlist{list-style:none;margin:0;padding:0}
  .dlist a{display:flex;justify-content:space-between;padding:18px 0;font-size:18px;line-height:24px;border-bottom:1px solid var(--line)}
  .dlist small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .drawer .lang{display:flex;margin-top:24px;gap:8px}
  .drawer .lang a{font-size:14px}
}
.ico-close{display:none}
body.menu-open .ico-menu{display:none}
body.menu-open .ico-close{display:block}

/* ---------- 버튼, 링크 ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;font-size:14px;line-height:1;border:1px solid currentColor;transition:background .2s,color .2s,border-color .2s}
.btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.solid:hover{background:transparent;color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}
.on-dark .btn.solid{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.on-dark .btn.solid:hover{background:transparent;color:var(--on-dark)}
.on-dark .btn.ghost{color:var(--on-dark)}
.on-dark .btn.ghost:hover{background:var(--on-dark);color:var(--dark)}
.link{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;border-bottom:1px solid currentColor;padding-bottom:2px}
.link svg{width:14px;height:14px;transition:transform .2s}
.link:hover svg{transform:translateX(3px)}

/* ---------- 히어로 슬라이드 (루비워크샵 메인 히어로와 같은 구조) ---------- */
.rh{--rh-fg:#fff;--rh-fg-sub:rgba(255,255,255,.6);--rh-line:rgba(255,255,255,.35);--rh-max:1600px;--rh-gutter:clamp(20px,6.5vw,112px);--rh-side:max(0px,calc((100% - var(--rh-max)) / 2));--rh-h:clamp(520px,52vw,860px);position:relative;overflow:hidden;background:#0e0d0b;height:min(var(--rh-h),calc(100vh - var(--header-h)));min-height:480px;color:var(--rh-fg)}
.rh-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s,visibility 0s linear 1s}
.rh-slide.is-active{opacity:1;visibility:visible;transition:opacity 1s;z-index:1}
.rh-inner{position:absolute;top:0;bottom:0;left:50%;width:min(100%,var(--rh-max));transform:translateX(-50%)}
.rh-media{position:absolute;inset:0;overflow:hidden}
.rh-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 7s cubic-bezier(.2,.6,.2,1)}
.rh-slide.is-active .rh-media img{transform:scale(1)}
.rh-media.fit-stage{inset:0 0 0 34%;overflow:visible}
.rh-media.fit-stage img{position:absolute;top:0;right:0;width:auto;height:100%;max-width:none;transform-origin:right bottom;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
@media (min-width:1601px){.rh-media.fit-stage img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 82%,transparent 100%)}}
.rh-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 34%,rgba(0,0,0,0) 55%),linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 26%)}
.rh-copy{position:absolute;z-index:2;top:clamp(32px,7vw,72px);left:var(--rh-gutter);max-width:480px;padding-right:20px}
.rh-eyebrow{font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--rh-fg-sub);margin:0 0 14px}
.rh-title,.rh-sub{font-size:28px;line-height:32px;font-weight:400;letter-spacing:-1px;margin:0}
.rh-sub{color:var(--rh-fg-sub)}
.rh-sub:empty{display:none}
.rh-desc{margin:12px 0 0;font-size:15px;line-height:22px}
.rh-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.rh-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 16px;border:1px solid rgba(255,255,255,.4);color:var(--rh-fg);font-size:14px;line-height:1;background:transparent;transition:background .25s,color .25s,border-color .25s}
.rh-btn svg{width:14px;height:14px;transition:transform .25s}
.rh-btn:hover{background:#fff;border-color:#fff;color:#111}
.rh-btn:hover svg{transform:translateX(3px)}
.rh-nav{position:absolute;z-index:3;left:calc(var(--rh-side) + var(--rh-gutter));right:calc(var(--rh-side) + var(--rh-gutter));bottom:clamp(20px,3vw,40px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.rh-dots{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.rh-dot{appearance:none;border:0;background:none;cursor:pointer;color:inherit;font:inherit;text-align:left;width:clamp(48px,9vw,140px);padding:10px 0 0}
.rh-bar{display:block;position:relative;height:2px;background:var(--rh-line);overflow:hidden}
.rh-bar i{position:absolute;inset:0;background:var(--rh-fg);transform:scaleX(0);transform-origin:left center}
.rh-dot.is-done .rh-bar i{transform:scaleX(1)}
.rh-dot.is-active .rh-bar i{animation:rh-fill var(--rh-dur,6s) linear forwards}
.rh.is-paused .rh-dot.is-active .rh-bar i{animation-play-state:paused}
.rh-label{display:block;margin-top:10px;font-size:12px;line-height:16px;opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.rh-dot.is-active .rh-label,.rh-dot:hover .rh-label{opacity:1}
@keyframes rh-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rh-ctrl{display:flex;gap:8px}
.rh-icon{appearance:none;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border:1px solid var(--rh-line);background:transparent;color:inherit;padding:0;transition:background .25s,color .25s}
.rh-icon svg{width:14px;height:14px}
.rh-icon:hover{background:#fff;color:#111}
.rh-icon .ic-play{display:none}
.rh.is-paused .rh-icon .ic-play{display:block}
.rh.is-paused .rh-icon .ic-pause{display:none}
@media (max-width:767px){
  .rh{height:min(170vw,calc(100svh - var(--header-h)));min-height:560px}
  .rh-title,.rh-sub{font-size:24px;line-height:28px}
  .rh-desc{font-size:14px;line-height:21px}
  .rh-btn{height:44px}
  .rh-label{display:none}
  .rh-dots{gap:8px}
  .rh-dot{width:28px}
  .rh-ctrl .rh-prev,.rh-ctrl .rh-next{display:none}
  .rh-icon{width:36px;height:36px}
  .rh-media.fit-stage{inset:40% 0 0}
  .rh-media.fit-stage img{top:auto;bottom:0;left:0;right:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
  .rh-shade{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 60%),linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 26%)}
}
@media (prefers-reduced-motion:reduce){.rh-media img{transition:none;transform:none}}

.eyebrow{font-size:12px;line-height:16px;letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 14px}

/* ---------- 퀵링크 ---------- */
.quick{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.quick a{display:flex;align-items:center;gap:16px;padding:28px 24px;font-size:15px;line-height:22px;transition:background .2s}
.quick a+a{border-left:1px solid var(--line)}
.quick a:hover{background:var(--surface)}
.quick svg{width:24px;height:24px;flex:none}
.quick .arrow{margin-left:auto;width:16px;height:16px;opacity:.5}
@media (max-width:760px){.quick{grid-template-columns:1fr}.quick a+a{border-left:0;border-top:1px solid var(--line)}.quick a{padding:20px 0}}

/* ---------- 섹션 공통 ---------- */
.sec{padding-block:clamp(64px,9vw,128px)}
.sec+.sec{padding-top:0}
.kicker{font-size:12px;line-height:16px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin:0 0 14px}
h2,.h2{font-size:28px;line-height:32px;letter-spacing:var(--ls-title);margin:0;text-wrap:balance}
.lead{font-size:15px;line-height:22px;color:var(--muted);max-width:56ch;margin:12px 0 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px;flex-wrap:wrap}

/* 스토리 (텍스트 2단): 왼쪽 번호와 키커, 오른쪽 헤드라인과 본문 */
.story{display:grid;grid-template-columns:1fr 2.2fr;gap:clamp(24px,6vw,96px);padding-top:32px;background:linear-gradient(var(--line),var(--line)) no-repeat var(--gutter) 0/calc(100% - 2 * var(--gutter)) 1px}
.story .num{font-size:12px;line-height:16px;letter-spacing:var(--ls-label);color:var(--muted);margin:0 0 6px;font-variant-numeric:tabular-nums}
.story .model{font-size:18px;line-height:24px;letter-spacing:-.5px;margin:0}
.story .model span{display:block;font-size:13px;line-height:18px;color:var(--muted);margin-top:4px;letter-spacing:var(--ls)}
.copy p{color:var(--muted);font-size:15px;line-height:24px;max-width:60ch;margin:16px 0 0}
.copy h2+p{margin-top:16px}
.copy .btns,.copy .stats,.copy>.link{margin-top:28px}
@media (max-width:860px){.story{grid-template-columns:1fr;gap:8px}.story .num{margin-bottom:4px}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats b{display:block;font-size:24px;line-height:28px;letter-spacing:var(--ls-title);font-variant-numeric:tabular-nums;margin-bottom:6px}
.stats span{display:block;font-size:13px;line-height:18px;color:var(--muted)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;row-gap:24px}}

/* 이미지 */
.bleed{width:100%;aspect-ratio:21/9;overflow:hidden;background:var(--surface)}
.bleed img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.bleed{aspect-ratio:4/3}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo figure{aspect-ratio:8/9;overflow:hidden;background:var(--surface)}
.duo img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.duo{gap:8px}}

/* 카드 그리드 (rubi.kr 채널 문법) */
.cols{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--fg)}
.cols.c3{grid-template-columns:repeat(3,1fr)}
.cols.c2{grid-template-columns:repeat(2,1fr)}
.cell{display:flex;flex-direction:column;padding:28px 28px 32px 0;border-bottom:1px solid var(--line)}
.cell+.cell{padding-left:28px;border-left:1px solid var(--line)}
.c3 .cell:nth-child(3n+1){padding-left:0;border-left:0}
.cell .idx{font-size:12px;line-height:16px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:40px;font-variant-numeric:tabular-nums}
.cell figure{aspect-ratio:4/5;overflow:hidden;background:var(--surface);margin-bottom:24px}
.cell figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cell:hover figure img{transform:scale(1.03)}
.cell h3{font-size:18px;line-height:24px;letter-spacing:-.5px;margin:0 0 8px}
.cell h3 small{display:block;font-size:12px;line-height:16px;letter-spacing:var(--ls-label);color:var(--muted);margin-bottom:10px}
.cell p{color:var(--muted);font-size:14px;line-height:21px}
@media (max-width:1080px){
  .cols{grid-template-columns:1fr 1fr}
  .cols .cell:nth-child(odd){padding-left:0;border-left:0}
  .cols .cell:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}
}
@media (max-width:760px){
  .cols,.cols.c3,.cols.c2{grid-template-columns:1fr}
  .cols .cell,.cols .cell:nth-child(even){padding:24px 0 28px;border-left:0}
  .cell .idx{margin-bottom:16px}
}

/* 비교 스펙 */
.cell dl{margin-top:24px;display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line)}
.cell dt,.cell dd{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:20px}
.cell dt{color:var(--muted);font-size:12px;letter-spacing:var(--ls-label);padding-right:24px}
.cell dd{text-align:right;font-variant-numeric:tabular-nums}

/* 제품 컷 */
.shots-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--fg);margin-bottom:16px;font-size:14px}
.shots-head span{color:var(--muted)}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shots figure{cursor:zoom-in}
.shots .ph{background:var(--shot);aspect-ratio:8/9;overflow:hidden}
.shots img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.shots figure:hover img{transform:scale(1.04)}
.shots figcaption{font-size:12px;line-height:16px;letter-spacing:var(--ls-label);color:var(--muted);margin-top:10px}
@media (max-width:760px){.shots{grid-template-columns:1fr 1fr;gap:8px 8px}.shots figcaption{margin-bottom:8px}}

/* 이미지 + 텍스트 */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,96px);align-items:center}
.row figure{aspect-ratio:8/9;overflow:hidden;background:var(--surface);cursor:zoom-in}
.row figure img{width:100%;height:100%;object-fit:cover}
.row.flip figure{order:2}
.row .copy{max-width:560px}
@media (max-width:860px){.row{grid-template-columns:1fr}.row.flip figure{order:0}}

/* 스펙 */
.spec{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,6vw,96px);padding-top:32px;border-top:1px solid var(--fg)}
.spec .btns{margin-top:28px}
.spec dl{display:grid;grid-template-columns:8em 1fr}
.spec dt,.spec dd{padding:16px 0;border-bottom:1px solid var(--line)}
.spec dt{color:var(--muted);font-size:14px;line-height:22px}
.spec dd{font-size:15px;line-height:22px}
.spec dl>:nth-child(-n+2){padding-top:0}
@media (max-width:860px){.spec{grid-template-columns:1fr}}
@media (max-width:480px){.spec dl{grid-template-columns:1fr}.spec dt{border:0;padding-bottom:0}.spec dd{padding-top:2px}.spec dl>:nth-child(2){padding-top:2px}}

/* 라인업 리스트 */
.range{border-top:1px solid var(--fg)}
.range a{display:grid;grid-template-columns:48px 1.1fr 1.6fr 140px 24px;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:background .2s}
.range a:hover{background:var(--surface)}
.range .idx{font-size:12px;letter-spacing:var(--ls-label);color:var(--muted);font-variant-numeric:tabular-nums;padding-left:8px}
.range b{display:block;font-size:18px;line-height:24px;letter-spacing:-.5px}
.range small{display:block;font-size:12px;line-height:16px;letter-spacing:var(--ls-label);color:var(--muted);margin-top:6px;text-transform:uppercase}
.range p{color:var(--muted);font-size:14px;line-height:21px}
.range dl{font-size:13px;line-height:18px;color:var(--muted);display:grid;grid-template-columns:auto auto;justify-content:start;gap:2px 12px}
.range dd{color:var(--fg);font-variant-numeric:tabular-nums}
.range svg{width:16px;height:16px;opacity:.4;transition:transform .2s,opacity .2s}
.range a:hover svg{transform:translateX(4px);opacity:1}
@media (max-width:960px){
  .range a{grid-template-columns:40px 1fr 24px;gap:8px 16px;padding:24px 0}
  .range .idx{padding-left:0;grid-row:span 3;align-self:start;padding-top:4px}
  .range p,.range dl{grid-column:2}
  .range svg{grid-column:3;grid-row:1}
}

/* 창립자 */
.founder{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.founder .pics{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.founder .pics figure{aspect-ratio:4/5;overflow:hidden;background:var(--surface);cursor:zoom-in}
.founder .pics img{width:100%;height:100%;object-fit:cover}
.founder .quote{font-size:24px;line-height:32px;letter-spacing:var(--ls-title);margin:0 0 8px;text-wrap:pretty}
.founder cite{display:block;font-style:normal;font-size:13px;line-height:18px;color:var(--muted);margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:860px){.founder{grid-template-columns:1fr}.founder .quote{font-size:20px;line-height:28px}}

/* 다크 스트립 */
.strip{background:var(--dark);color:var(--on-dark)}
.strip .container{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:56px;flex-wrap:wrap}
.strip h3{font-size:28px;line-height:32px;letter-spacing:var(--ls-title);margin:0;max-width:24ch}
.strip .eyebrow{margin-bottom:10px}

/* 사이즈 표 */
.size-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--fg)}
table.size{width:100%;border-collapse:collapse;min-width:820px;font-variant-numeric:tabular-nums}
table.size th,table.size td{padding:14px 8px;border-bottom:1px solid var(--line);text-align:center;font-size:14px;line-height:20px;white-space:nowrap}
table.size thead th{font-size:12px;letter-spacing:var(--ls-label);color:var(--muted)}
table.size tbody th{text-align:left;color:var(--muted);font-size:13px;padding-left:0;white-space:normal;min-width:180px}
table.size thead th:first-child{text-align:left;padding-left:0}
table.size tbody tr:hover{background:var(--surface)}
.note{font-size:13px;line-height:20px;color:var(--muted);max-width:80ch;margin-top:20px}

/* 타임라인 */
.timeline{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-top:1px solid var(--fg);cursor:grab;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.timeline::-webkit-scrollbar{display:none}
.timeline.drag{cursor:grabbing;scroll-snap-type:none}
.timeline article{scroll-snap-align:start;padding:28px 28px 32px 0;user-select:none}
.timeline article+article{padding-left:28px;border-left:1px solid var(--line)}
.timeline b{display:block;font-size:24px;line-height:28px;letter-spacing:var(--ls-title);font-variant-numeric:tabular-nums;margin-bottom:40px}
.timeline h3{font-size:18px;line-height:24px;letter-spacing:-.5px;margin:0 0 8px}
.timeline p{color:var(--muted);font-size:14px;line-height:21px}
.wide-wrap{max-width:var(--max);margin:0 auto}
.rail-meta{display:flex;justify-content:space-between;font-size:12px;letter-spacing:var(--ls-label);color:var(--muted);margin-bottom:14px}

.names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:24px;border-top:1px solid var(--fg)}
.names li{padding:16px 0;border-bottom:1px solid var(--line);min-width:0}
.names b{display:block;font-size:15px;line-height:22px}
.names span{display:block;font-size:13px;line-height:18px;color:var(--muted);margin-top:2px}
@media (max-width:860px){.names{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.names{grid-template-columns:1fr}}

/* 쇼룸, 연락처 */
.contact{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,6vw,96px)}
.contact dl{display:grid;grid-template-columns:8em 1fr}
.contact dt,.contact dd{padding:16px 0;border-bottom:1px solid var(--line)}
.contact dt{color:var(--muted);font-size:14px;line-height:22px}
.contact dd{font-size:15px;line-height:22px}
.contact dd a{border-bottom:1px solid var(--line)}
.contact dd a:hover{border-color:var(--fg)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:480px){.contact dl{grid-template-columns:1fr}.contact dt{border:0;padding-bottom:0}.contact dd{padding-top:2px}}

.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tile{background:var(--surface);padding:32px 28px;min-height:160px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;transition:background .2s,color .2s}
.tile:hover{background:var(--fg);color:var(--bg)}
.tile b{display:block;font-size:18px;line-height:24px;letter-spacing:-.5px}
.tile span{display:block;font-size:14px;line-height:20px;opacity:.7;margin-top:4px}
.tile svg{width:18px;height:18px;align-self:end}
@media (max-width:760px){.tiles{grid-template-columns:1fr}}

/* 푸터 */
footer{background:var(--surface);padding-block:64px 40px;font-size:14px;line-height:20px}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.fcols h4{font-size:12px;line-height:16px;letter-spacing:var(--ls-label);text-transform:uppercase;margin:0 0 16px}
.fcols ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.fcols a{color:var(--muted);transition:color .2s}
.fcols a:hover{color:var(--fg)}
.legal{padding-top:28px;display:grid;gap:10px;color:var(--muted);font-size:12px;line-height:20px}
.legal .row2{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:760px){.fcols{grid-template-columns:1fr 1fr}}

/* 라이트박스 */
.lb{position:fixed;inset:0;z-index:100;background:rgba(16,17,20,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lb.on{opacity:1;visibility:visible}
.lb img{max-width:92vw;max-height:84vh;width:auto;object-fit:contain}
.lb button{all:unset;cursor:pointer;position:absolute;color:#fff;font-size:14px;padding:16px}
.lb .x{top:12px;right:12px}.lb .pv{left:8px;top:50%;transform:translateY(-50%)}.lb .nx{right:8px;top:50%;transform:translateY(-50%)}
.lb .ct{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:var(--ls-label);color:rgba(255,255,255,.6)}

/* 모바일 글자 크기 (767px 기준) */
@media (max-width:767px){
  h2,.h2,.strip h3{font-size:24px;line-height:28px}
  .lead,.copy p{font-size:14px;line-height:21px}
  .copy p{line-height:22px}
  .btn{min-height:44px}
}

/* 등장 모션 */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- Spurcycle ---------- */
.logo.wordmark{height:auto;font-size:17px;line-height:17px;letter-spacing:.22em}
.ph-note{font-size:12px;color:var(--muted);letter-spacing:var(--ls-label)}
.rh-media.bright img{filter:brightness(.62)}