/* 10/18 디자인 시스템 정렬 레이어(2026-10-21). 스토리·AI·렌즈·EVO 맨 마지막에 로드.
   기준: source/designsystem_20261018 README 2·4절, 정본 시안 home·vision 실측값. */

/* 토큰: 페이지별 옛 변수 덮어쓰기 */
:root{--muted:#6f6e69;--pale:#e7fbfb;--mint:#0FDFDD}

/* 글자 굵기: 제목 400·500, 숫자 40px/400(정본 상세 "4일") */
html body #main .anniversary-caption h2{font-weight:500!important}
html body #main .anniversary>strong{font-weight:400!important;letter-spacing:-.02em!important}
html body #main .bv-metric-card .bv-metric-value{font-weight:400!important}
@media(min-width:1100px){html body #main .scene-copy h2{font-size:42px!important}}
html body #main .scene-copy h2{font-weight:500!important;letter-spacing:-.035em!important;line-height:1.35!important}
html body #main .signature strong{letter-spacing:-.02em!important}
/* 라벨·칩은 12px/500, 자간 0 */
html body #main .signature span:first-child{font-size:12px!important;font-weight:500!important;letter-spacing:0!important}

/* 최소 글자 12px(11px 은 홈 티커 라벨 하나뿐) */
html body #main .scene-nav span{font-size:12px!important}
@media(min-width:800px){html body #main .equipment-photo .image-note{font-size:12px!important}}
@media(max-width:799px){html body .footer-bottom p,html body #main .scene-nav a{font-size:12px!important}}

/* AI 스캔 도식 안 브랜드 글자: 정본 서체 Pretendard */
html body #main .ai-focus-brand{font-family:'Pretendard Variable',Pretendard,sans-serif!important}

/* 장면 내비 = 정본 점프 바(회색 글자, 2px 연한 바닥선, 현재는 검정 굵게 + 민트 선) */
html body #main .scene-nav a{opacity:1!important;color:#8a8984!important;font-weight:500;border-bottom:2px solid rgba(17,17,16,.08)!important;transition:color .25s cubic-bezier(.4,0,.2,1)!important}
html body #main .scene-nav a:hover{color:#111110!important}
html body #main .scene-nav a[aria-current]:not([aria-current="false"]){color:#111110!important;font-weight:700!important;border-bottom-color:#0FDFDD!important}

/* 연도 탭 = 정본 이야기 필터(글자 버튼: 기본 #8a8984/400, 선택 #111110/700, hover 글자 검정 + 연회색 면) */
html body #main .history-tabs button{background:transparent!important;color:#8a8984!important;font-weight:400!important;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)!important}
html body #main .history-tabs button[aria-selected=true]{background:transparent!important;color:#111110!important;font-weight:700!important}
html body #main .history-tabs button:hover{background:rgba(17,17,16,.08)!important;color:#111110!important}

/* 경로 줄(브레드크럼)은 10/18 시스템에 없는 부품. 정본 시력교정과 같이 두지 않음 */
html body #main .local-nav{display:none!important}

/* 언어 팝오버 그림자 = 정본 shadow-panel */
html body .language-popover{box-shadow:0 16px 40px rgba(17,17,16,.14),0 2px 6px rgba(17,17,16,.06)!important}

/* 글자 버튼 + 네모(.research-more) = 정본 .bv-textbtn: 뒤 연회색 면 + 네모 반전 + 막대 90도 */
html body #main .research-more{position:relative;isolation:isolate;padding:7px 14px!important;margin:-7px -14px;margin-top:calc(20px - 7px)}
html body #main .research-more::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(17,17,16,.08);opacity:0;transform:scale(.9);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
html body #main .research-more:hover::before,html body #main .research-more:focus-visible::before{opacity:1;transform:scale(1)}
html body #main .research-more:hover .plus-bars,html body #main .research-more:focus-visible .plus-bars{transform:rotate(90deg)}

/* 상담 바 드롭다운 버튼 포커스 = 정본 전역 링 2px #087b85 */
html body #main .bv-sel-btn:focus-visible{outline:2px solid #087b85!important;outline-offset:5px!important}

/* 긴 리드문은 PC 에서 문장 단위 두 줄(정본 .bv-br-pc 규칙, 모바일은 자연 줄바꿈) */
.bv-br-pc{display:inline}
@media(max-width:799px){.bv-br-pc{display:none}}

/* 교정 원리 카드 hover: 회색 카드는 surface-2 #ebebe8, 투명 카드는 surface #f5f5f5 (정본 2-3 면 규칙) */
html body #main[data-location-page="lens"] #principle .card,html body #main:has(#lens-title) #principle .card{transition:background .25s cubic-bezier(.4,0,.2,1)}
html body #main #principle .card{transition:background .25s cubic-bezier(.4,0,.2,1)}
html body #main #principle .card:hover{background:#ebebe8}

/* EVO Point 05: 가로 2칸 카드(이미지 좌·글 우 가운데 정렬, 빈 공간 큼)를 다른 Point 카드와 같은 1칸 카드로 */
@media(min-width:800px){
 html body #main .features .bv-sys-card:last-child{grid-column:auto!important}
 html body #main #features .feature-card:last-child .feature-content{display:block!important;margin-top:0!important}
 html body #main #features .feature-card:last-child .feature-illustration{display:block!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;padding:0!important;margin-top:24px!important;overflow:hidden}
 html body #main #features .feature-card:last-child .feature-illustration>img{display:block;width:100%;height:auto;aspect-ratio:3/2;max-width:100%;max-height:none;margin:0;object-fit:contain;object-position:center}
 html body #main #features .feature-card:last-child .feature-illustration>figcaption{position:static;width:100%;margin:12px 0 0;padding:0 12px 12px;text-align:center;font-size:14px;line-height:1.7;color:#6f6e69}
 html body #main #features .feature-card:last-child .feature-copy>.bv-sys-body{margin-top:24px!important}
}

/* 렌즈·EVO 히어로 = 정본 시력교정 히어로 틀(PC): 1200 틀, 사진은 오른쪽 62% 위부터 끝까지 cover, 가로 흰 스크림 + 위쪽 흰 페이드, 글은 GNB 왼쪽 끝(78px)에서 시작. 사진 소재는 교체 전 임시 */
@media(min-width:800px){
 html body #main .hero>.container,html body #main .cover.hero>.container{position:relative;display:block!important;height:100%;min-height:0;padding:0!important}
 html body #main .hero .hero-copy{position:absolute;left:calc((100% - var(--dock-w,1044px)) / 2);top:calc(106px + clamp(16px,2vw,28px) + 28px);z-index:2;max-width:640px;padding:clamp(40px,4vw,56px) clamp(40px,4vw,56px) clamp(40px,4vw,56px) 0}
 html body #main .hero .hero-visual{position:absolute;left:auto;right:0;top:0;bottom:0;width:62%;height:auto;margin:0;display:block}
 html body #main .hero .hero-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#ffffff 0%,#ffffff 50%,#ffffffcc 62%,#ffffff55 80%,#ffffff00 100%)}
 html body #main .hero>.container::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#ffffff 0%,#ffffffd9 10%,#ffffff80 24%,#ffffff00 44%)}
 html body #main .hero .hero-image{width:100%;height:100%;object-fit:cover;object-position:center 30%;margin:0}
}
@media(min-width:800px){html body #main .hero h1,html body #main .hero .lead,html body #main .hero .cover-description p{word-break:keep-all;max-width:460px}html body #main .hero h1{max-width:none}}

/* 렌즈 "렌즈삽입술을 경험한 고객들의 이야기": 메인 스타 마퀴를 복제했는데 소재가 김민선(스마일프로)·최민정(스마일) 2명 반복이라 제목과 어긋남.
   12명 중 렌즈삽입술은 조정석 1명뿐이라 렌즈 소재가 모일 때까지 섹션을 숨김(마크업은 유지, 10/21 대표 확인용) */
html body #main #reviews.lens-star-reviews{display:none!important}

/* 접힘 카드(AI 분석 5단계 .analysis-step, 렌즈·EVO 수술 계획 .plan-card): 카드 전체가 호버·클릭 대상.
   호버 = 회색 카드 면 #ebebe8 + 토글 네모 반전(정본 2-3 면 규칙), 클릭 = 토글과 같음(click-1018.js) */
html body #main .analysis-step,html body #main .system-card.plan-card{cursor:pointer;transition:background .25s cubic-bezier(.4,0,.2,1)}
html body #main .analysis-step:hover,html body #main .system-card.plan-card:hover{background:#ebebe8}
html body #main .analysis-step:hover .step-toggle,html body #main .system-card.plan-card:hover .square-toggle{background:#111110;color:#fff}
html body #main .analysis-step a,html body #main .system-card.plan-card a{cursor:pointer}
@media(hover:none){html body #main .analysis-step:hover,html body #main .system-card.plan-card:hover{background:#f5f5f5}}

/* AI 연혁 카드: 연도 아래 헤어라인 삭제(10/21 대표 지시 "줄 없애") */
html body #main .history-card .year{border-bottom:0!important;padding-bottom:0!important}

/* AI 연구 성과 카드: 정본 VS 카드 틀(사진 위 딤 + 흰 제목, 오른쪽 아래 흰 네모, hover 사진 블러 6px·1.04 확대 + 네모 반전). 10/21 대표 지시 "텍스트를 이미지 위에 딤드해서 올리자" */
html body #main #ai-research .research-cards article{position:relative;aspect-ratio:1.25;overflow:hidden;background:#f0efec;color:#fff;display:block}
html body #main #ai-research .research-cards article>img,html body #main #ai-research .research-cards article .official-photo-frame,html body #main #ai-research .research-cards article .official-photo-window{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none;aspect-ratio:auto!important;margin:0;padding:0;display:block;overflow:hidden}
html body #main #ai-research .research-cards article .official-photo-window>img{position:absolute!important;inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:cover;object-position:center 15%}
html body #main #ai-research .research-cards article>img{object-fit:cover;transition:filter .45s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
html body #main #ai-research .research-cards article .official-photo-window>img{transition:filter .45s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
html body #main #ai-research .research-cards article::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#00000033 0%,#00000026 35%,#00000059 65%,#000000b3 100%)}
html body #main #ai-research .research-cards h3{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0!important;min-height:0!important;padding:clamp(22px,2.6vw,36px);padding-right:calc(clamp(22px,2.6vw,36px) + 28px + 20px);font-size:clamp(17px,1.5vw,20px)!important;line-height:1.45!important;font-weight:500!important;letter-spacing:-.02em;color:#fff;word-break:keep-all}
html body #main #ai-research .research-cards .research-more{position:absolute;right:clamp(22px,2.6vw,36px);bottom:clamp(22px,2.6vw,36px);z-index:2;margin:0!important;padding:0!important;font-size:0;line-height:0;gap:0;color:#fff;isolation:auto}
html body #main #ai-research .research-cards .research-more::before{display:none}
html body #main #ai-research .research-cards .research-more .plus-square{width:28px;height:28px;border:1px solid #fff;color:#fff;background:transparent;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}
html body #main #ai-research .research-cards article:hover>img,html body #main #ai-research .research-cards article:hover .official-photo-window>img{filter:blur(6px);transform:scale(1.04)}
html body #main #ai-research .research-cards article:hover .plus-square,html body #main #ai-research .research-cards .research-more:hover .plus-square,html body #main #ai-research .research-cards .research-more:focus-visible .plus-square{background:#fff;color:#111110}
html body #main #ai-research .research-cards .research-more:hover .plus-bars{transform:none}
@media(prefers-reduced-motion:reduce){html body #main #ai-research .research-cards article:hover>img,html body #main #ai-research .research-cards article:hover .official-photo-window>img{filter:none;transform:none}}

/* AI 연혁 카드: 큰 회색 연도 글자(32px) 대신 정본 라벨 칩(.bv-sys-label 값: 흰 바탕 13px/500 #323232, 6px 10px)을 이미지 안 왼쪽 위에 배지로. 10/21 대표 지시 */
html body #main .history-card{position:relative}
html body #main .history-card .year{position:absolute;top:12px;left:12px;z-index:2;margin:0!important;padding:6px 10px!important;background:#fff;border:0!important;font-size:13px!important;font-weight:500;line-height:1.15!important;letter-spacing:-.01em;color:#323232!important}
html body #main #ai-research .research-cards article>img[data-focus="left"]{object-position:22% center}
html body #main #ai-research .research-cards article>img[data-focus="left"]{object-position:22% center}

/* AI 연구 성과: 카드 위 사진 몽타주(4장 엇갈림) 삭제. 10/21 대표 지시 */
html body #main #ai-research .research-montage,html body #main #ai-research .research-visuals>.research-montage{display:none!important}

/* 연구 성과 카드 세로형(3:4, 정본 연예인 카드 232×316 비율 근사). 모바일은 1.2장 가로 스냅 스와이프(이미 트랙) */
html body #main #ai-research .research-cards article{aspect-ratio:3/4}
@media(max-width:799px){
 html body #main #ai-research .research-cards{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:12px!important;scrollbar-width:none;padding-bottom:0}
 html body #main #ai-research .research-cards article{flex:0 0 calc((100% - 12px)/1.2)!important;scroll-snap-align:start}
}

/* 렌즈 종류 카드(KPL·EVO ICL·ECHO): 제목 아래 한 줄 설명을 본문과 구분. 민트 글자 대신 정본 위계(카드 소제목 17px/500 #111110, 본문 15px #6f6e69). 10/21 */
html body #main .products .card>p:first-of-type{font-size:17px;font-weight:500;line-height:1.5;letter-spacing:-.02em;color:#111110;margin:12px 0 0}
html body #main .products .card>p:first-of-type+p{font-size:15px;line-height:1.85;color:#6f6e69;margin-top:16px}

/* EVO "특징은 내 눈에서 어떻게 적용될까요?": Point 카드 5장을 2×2 격자 대신 가로 스냅 트랙으로(PC 2.2장, 모바일 1.2장, 마우스 드래그는 drag-1018.js). 10/21 대표 지시 */
html body #main #features .bv-sys.features{display:flex!important;flex-wrap:nowrap;gap:24px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;align-items:stretch!important;grid-auto-rows:auto}
html body #main #features .bv-sys.features::-webkit-scrollbar{display:none}
html body #main #features .bv-sys.features>.bv-sys-card{flex:0 0 calc((100% - 24px*1.2) / 2.2)!important;min-width:0;scroll-snap-align:start;grid-column:auto!important;height:auto}
@media(max-width:799px){
 html body #main #features .bv-sys.features{gap:12px!important}
 html body #main #features .bv-sys.features>.bv-sys-card{flex:0 0 calc((100% - 12px) / 1.2)!important}
}
/* Point 05 이미지(1200×600, 2:1)는 3:2 상자에 contain 하면 위아래 흰 띠가 생김 → 원본 비율 그대로 */
@media(min-width:800px){html body #main #features .feature-card:last-child .feature-illustration>img{aspect-ratio:auto!important;height:auto!important}}

/* 스토리 발자취: 소개(사진·제목·글)와 연표를 PC 에서 좌우 2단으로(10/21 대표 지시 "콘텐츠와 연혁 2단으로") */
@media(min-width:800px){
 html body #history .period-panel{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,80px);align-items:start}
 html body #history .period-intro{display:block!important;min-width:0}
 html body #history .period-intro>div{margin-top:28px}
 html body #history .period-intro .history-record{margin:0}
 html body #history .period-intro .history-record img{width:100%;height:auto}
 html body #history .timeline{margin-top:0!important;min-width:0}
}

/* 스토리 발자취 연표 루페(10/21): 전체 연표 한 목록, 오른쪽 열(7/12)에 회색 면 카드로. 홈 10/07 소식 티커 규격(행 56px, 칩 11px/600, 맨 위 행 16~18px/600 검정 + 유리 렌즈, 72% 부터 딤). 행은 story.js 가 만든다 */
@media(min-width:800px){
 html.scroll-motion #history .history-timeline-source{display:none!important}
 html.scroll-motion #history .period-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
 html.scroll-motion #history .history-roller{position:absolute;top:0;right:0;width:calc((100% - clamp(40px,5vw,80px)) * 7 / 12);height:392px;padding:18px 0;background:#f5f5f5;overflow:hidden;z-index:3}
 html.scroll-motion #history .history-roller::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;background:linear-gradient(180deg,rgba(245,245,245,0),#f5f5f5)}
 html.scroll-motion #history .history-lens{position:absolute;z-index:0;left:18px;right:18px;top:18px;height:56px;border-radius:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.3));box-shadow:0 8px 24px rgba(17,17,16,.07),0 0 0 1px rgba(17,17,16,.06),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -6px 14px rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.6)}
 html.scroll-motion #history .history-lens.lg-fallback{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.18))}
 html.scroll-motion #history .history-ticker-track{position:relative;z-index:1;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform}
 html.scroll-motion #history .bv-ticker-row{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;width:100%;height:56px;padding:0 36px;color:#8a8984;transition:color .35s ease}
 html.scroll-motion #history .bv-ticker-tag{display:inline-block;background:#d6d5d0;color:#fff;font-size:11px;font-weight:600;line-height:1;padding:6px 10px;letter-spacing:0;transition:background .35s ease}
 html.scroll-motion #history .bv-ticker-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;font-size:13px;line-height:1.5;letter-spacing:-.02em;transition:font-size .35s cubic-bezier(.2,.8,.2,1),font-weight .35s}
 html.scroll-motion #history .bv-ticker-row.is-top{color:#111110}
 html.scroll-motion #history .bv-ticker-row.is-top .bv-ticker-tag{background:#111110}
 html.scroll-motion #history .bv-ticker-row.is-top .bv-ticker-title{font-size:clamp(16px,1.4vw,18px);font-weight:600}
}
@media(prefers-reduced-motion:reduce){html.scroll-motion #history .history-ticker-track{transition:none}}

/* EVO Point 카드: 글(본문·검사에서 확인할 점)을 제목 바로 아래로, 이미지는 카드 맨 아래로(10/21 대표 지시) */
html body #main #features .feature-card .feature-content{display:flex!important;flex-direction:column;margin-top:0!important}
html body #main #features .feature-card .feature-content>.feature-copy{order:1}
html body #main #features .feature-card .feature-content>.feature-illustration{order:2;margin-top:24px!important}
html body #main #features .feature-card .feature-copy>.bv-sys-body{margin-top:20px!important}

/* 모바일 1.2장 가로 스냅: EVO·렌즈 "어떻게 시력을 교정하나요?"(#principle), 렌즈 "어떤 렌즈가 있나요?"(#lenses .products). 10/21 대표 지시 */
@media(max-width:799px){
 html body #main #principle .cards,html body #main #lenses .products{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap;gap:12px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;align-items:stretch}
 html body #main #principle .cards::-webkit-scrollbar,html body #main #lenses .products::-webkit-scrollbar{display:none}
 html body #main #principle .cards>*,html body #main #lenses .products>*{flex:0 0 calc((100% - 12px) / 1.2)!important;min-width:0;scroll-snap-align:start}
}

/* 렌즈·EVO 수술 계획(#planning) 모바일: 디자이너는 전부 펼치고 토글을 숨겼음 → PC 처럼 접힘 카드로(첫 장만 열림, 토글 보임). 동작은 click-1018.js. 10/21 대표 지시 */
@media(max-width:799px){
 html body #main #planning.planning-mobile .square-toggle{display:grid!important}
 html body #main #planning.planning-mobile .system-fold:not(.is-open){grid-template-rows:0fr!important}
 html body #main #planning.planning-mobile .system-fold{transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)!important}
 html body #main #planning.planning-mobile .system-body{height:auto;max-height:none;overflow:hidden}
}
/* 롤러 위 여백(18px)에 직전 행이 비치지 않게 덮개 */
@media(min-width:800px){html.scroll-motion #history .history-roller::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:#f5f5f5;z-index:3}}

/* 10/21 18:16 대표 지시: 롤러 회색 배경 삭제, 세로 높이는 왼쪽 소개 블록과 같게(story.js 가 맞춤), 아래는 흰색으로 딤 */
@media(min-width:800px){
 html.scroll-motion #history .history-roller{background:transparent;height:auto;min-height:392px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 68%,transparent 100%)}
 html.scroll-motion #history .history-roller::before,html.scroll-motion #history .history-roller::after{display:none}
 html.scroll-motion #history .bv-ticker-row{padding:0 18px}
 html.scroll-motion #history .history-lens{left:0;right:0}
}
/* 렌즈 그림자가 롤러 좌우 경계에서 잘리지 않게: 상자를 24px 넓히고 안쪽 여백으로 되돌림 */
@media(min-width:800px){
 html.scroll-motion #history .history-roller{margin-inline:-40px;padding:18px 40px;width:calc((100% - clamp(40px,5vw,80px)) * 7 / 12 + 80px)}
 html.scroll-motion #history .history-lens{left:40px;right:40px}
}

/* 10/21 18:19 대표 지시: 발자취 고정 무대의 빈 아래 여백 삭제. 무대 높이를 100svh 대신 내용(가장 긴 소개 블록, 최소 392)에 맞춤(--hv 는 story.js 가 넣음) */
@media(min-width:800px){
 html.scroll-motion #history{height:auto!important}
 html.scroll-motion #history .history-viewport{flex:none!important;height:var(--hv,560px)!important}
}

/* 10/21 18:20 대표 지시: 발자취 기록 사진 캡션을 사진 위로, 라인 칩(1px #d6d5d0 테두리, 12px/500, 채움 없음)으로 */
html body #history .history-record{display:flex;flex-direction:column;align-items:flex-start;margin:0}
html body #history .history-record figcaption{order:-1;display:inline-block;align-self:flex-start;margin:0 0 16px!important;padding:6px 10px;border:1px solid #d6d5d0;background:transparent;font-size:12px;font-weight:500;line-height:1.15;letter-spacing:0;color:#323232;text-align:left}
html body #history .history-record img{width:100%;height:auto}

/* 10/21 18:25 대표 지시: 발자취 소개 블록(칩·사진·제목·글)을 정본 시스템 카드 한 장으로(회색 면 #f5f5f5, 패딩 clamp(28,3.2vw,44)/clamp(24,3vw,40), 모서리 0) */
@media(min-width:800px){
 html body #history .period-intro{display:flex!important;flex-direction:column;gap:0;padding:clamp(28px,3.2vw,44px) clamp(24px,3vw,40px);background:#f5f5f5;min-width:0}
 html body #history .period-intro .history-record{width:100%;margin:0;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}
 html body #history .period-intro .history-record img{width:100%;max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover}
 html body #history .period-intro .history-record figcaption{margin:0 0 16px!important;background:#fff;border:1px solid #d6d5d0}
 html body #history .period-intro>div{margin-top:24px!important}
 html body #history .period-intro h3{font-size:clamp(20px,2vw,24px)!important;line-height:1.45!important;font-weight:500!important;color:#111110;margin:0}
 html body #history .period-intro p{font-size:15px!important;line-height:1.85!important;color:#6f6e69!important;margin-top:12px!important}
}

/* 10/21 18:27 대표 지시 "아래 섹션과 거리": 무대를 화면 높이로 되돌리되 빈 곳 없이 채움. 카드와 롤러가 남은 높이를 같이 채우고(롤러는 행이 더 보임), 내용이 화면보다 길면 무대가 늘어남 */
@media(min-width:800px){
 html.scroll-motion #history{height:auto!important;min-height:100svh}
 html.scroll-motion #history .history-viewport{flex:1 1 auto!important;height:auto!important;min-height:var(--hv,560px)!important}
 html.scroll-motion #history .period-panel{height:100%}
 html.scroll-motion #history .period-intro{height:100%;box-sizing:border-box}
 html.scroll-motion #history .history-roller{min-height:0}
}
/* 10/21 18:31: 큰 화면에서 카드가 빈 회색으로 늘어나던 것 → 카드는 내용 높이, 롤러만 남은 높이를 채움(행이 더 보임) */
@media(min-width:800px){html body #history .period-intro{height:auto!important}}

/* 10/21 18:34 재정의: 발자취를 페이지 고정 없이 내용 높이로. 롤러는 목록 자체 스크롤(세로 스냅), 노출 높이 = 왼쪽 카드 */
@media(min-width:800px){
 html.scroll-motion #history{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;padding-top:0!important}
 html.scroll-motion #history .history-viewport{flex:none!important;height:var(--hv,560px)!important;min-height:0!important;mask-image:none!important;-webkit-mask-image:none!important}
 html.scroll-motion #history .period-panel{height:auto}
 html.scroll-motion #history .history-roller{position:absolute;top:0;right:-40px;width:calc((100% - clamp(40px,5vw,80px)) * 7 / 12 + 80px);margin:0;padding:0;height:auto;min-height:392px;background:transparent;overflow:visible;z-index:3;mask-image:none;-webkit-mask-image:none}
 html.scroll-motion #history .history-roller::before,html.scroll-motion #history .history-roller::after{display:none}
 html.scroll-motion #history .history-ticker-scroll{position:relative;z-index:1;height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior-y:auto;padding:18px 40px 0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 68%,transparent 100%)}
 html.scroll-motion #history .history-ticker-scroll::-webkit-scrollbar{display:none}
 html.scroll-motion #history .history-ticker-scroll:focus-visible{outline:2px solid #087b85;outline-offset:5px}
 html.scroll-motion #history .history-ticker-track{transition:none;transform:none!important;will-change:auto}
 html.scroll-motion #history .bv-ticker-row{scroll-snap-align:start;scroll-margin-top:18px;padding:0 18px}
 html.scroll-motion #history .history-lens{position:absolute;z-index:0;left:40px;right:40px;top:18px;height:56px;pointer-events:none}
}

/* 10/22 대표 지시 "모바일도 그렇게 해": 모바일 발자취도 PC 와 같은 구조. 활성 기간 카드 1장(회색 면 카드) 아래에 연표 롤러(392px, 목록 자체 스크롤·세로 스냅, 맨 위 행 유리 렌즈, 아래 흰 딤). 머리글 고정(sticky)은 섹션이 짧아져 해제. 모션 꺼짐이면 롤러 숨기고 원래 목록 */
html:not(.scroll-motion) #history .history-roller{display:none}
@media(max-width:799px){
 html.scroll-motion #history.mobile-history.has-roller>.history-heading{position:static;padding:0;margin:0 0 24px}
 html.scroll-motion #history.mobile-history.has-roller .history-glass{display:none}
 html.scroll-motion #history.mobile-history.has-roller .period-panel+.period-panel{margin-top:0}
 html.scroll-motion #history.mobile-history .history-timeline-source{display:none!important}
 html.scroll-motion #history.mobile-history.has-roller .period-intro{display:flex!important;flex-direction:column;gap:0;padding:24px 20px;background:#f5f5f5;min-width:0}
 html.scroll-motion #history.mobile-history.has-roller .period-intro .history-record{width:100%;margin:0;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}
 html.scroll-motion #history.mobile-history.has-roller .period-intro .history-record img{width:100%;max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover}
 html.scroll-motion #history.mobile-history.has-roller .period-intro .history-record figcaption{margin:0 0 12px!important;background:#fff;border:1px solid #d6d5d0}
 html.scroll-motion #history.mobile-history.has-roller .period-intro>div{margin-top:20px!important}
 html.scroll-motion #history.mobile-history .history-roller{position:relative;top:auto;right:auto;width:auto;margin:16px 0 0;padding:0;height:392px;min-height:0;background:transparent;overflow:visible;z-index:3;mask-image:none;-webkit-mask-image:none}
 html.scroll-motion #history.mobile-history .history-roller::before,html.scroll-motion #history.mobile-history .history-roller::after{display:none}
 html.scroll-motion #history.mobile-history .history-ticker-scroll{position:relative;z-index:1;height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;padding:18px 0 0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 68%,transparent 100%)}
 html.scroll-motion #history.mobile-history .history-ticker-scroll::-webkit-scrollbar{display:none}
 html.scroll-motion #history.mobile-history .history-ticker-scroll:focus-visible{outline:2px solid #087b85;outline-offset:5px}
 html.scroll-motion #history.mobile-history .history-ticker-track{position:relative;z-index:1;display:flex;flex-direction:column;transition:none;transform:none!important;will-change:auto}
 html.scroll-motion #history.mobile-history .bv-ticker-row{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;width:100%;height:56px;padding:0 14px;color:#8a8984;scroll-snap-align:start;scroll-margin-top:18px;transition:color .35s ease}
 html.scroll-motion #history.mobile-history .bv-ticker-tag{display:inline-block;background:#d6d5d0;color:#fff;font-size:11px;font-weight:600;line-height:1;padding:6px 10px;letter-spacing:0;transition:background .35s ease}
 html.scroll-motion #history.mobile-history .bv-ticker-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;font-size:13px;line-height:1.5;letter-spacing:-.02em;transition:font-size .35s cubic-bezier(.2,.8,.2,1),font-weight .35s}
 html.scroll-motion #history.mobile-history .bv-ticker-row.is-top{color:#111110}
 html.scroll-motion #history.mobile-history .bv-ticker-row.is-top .bv-ticker-tag{background:#111110}
 html.scroll-motion #history.mobile-history .bv-ticker-row.is-top .bv-ticker-title{font-size:16px;font-weight:600}
 html.scroll-motion #history.mobile-history .history-lens{position:absolute;z-index:0;left:0;right:0;top:18px;height:56px;border-radius:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.3));box-shadow:0 8px 24px rgba(17,17,16,.07),0 0 0 1px rgba(17,17,16,.06),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -6px 14px rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.6)}
 html.scroll-motion #history.mobile-history .history-lens.lg-fallback{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.18))}
}

/* 10/22 대표 지시 "세로 값이 너무 길어서 안 보일 것 같은데, UX 고도화": 모바일 카드가 세로로 길어(≈475) 롤러가 화면 아래로 밀리던 것 → 카드를 가로형 컴팩트 카드로(사진 120px 왼쪽, 오른쪽에 칩·제목, 본문은 아래 전체 폭). 롤러 높이는 story.js 가 화면에 카드와 함께 들어가도록 298~392 사이로 맞춤 */
@media(max-width:799px){
 html.scroll-motion #history.mobile-history.has-roller .period-intro{display:grid!important;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:16px;row-gap:0;align-items:start;padding:20px}
 html.scroll-motion #history.mobile-history.has-roller .period-intro .history-record,html.scroll-motion #history.mobile-history.has-roller .period-intro>div{display:contents}
 html.scroll-motion #history.mobile-history.has-roller .period-intro .history-record img{grid-column:1;grid-row:1/3;width:120px;max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover}
 html.scroll-motion #history.mobile-history.has-roller .period-intro .history-record figcaption{grid-column:2;grid-row:1;margin:0!important;background:#fff;border:1px solid #d6d5d0}
 html.scroll-motion #history.mobile-history.has-roller .period-intro h3{grid-column:2;grid-row:2;margin:10px 0 0!important;font-size:18px!important;line-height:1.45!important;font-weight:500!important;color:#111110;white-space:normal}
 html.scroll-motion #history.mobile-history.has-roller .period-intro p{grid-column:1/-1;grid-row:3;margin:16px 0 0!important;font-size:14px!important;line-height:1.8!important;color:#6f6e69!important}
}