@import url("../vision-fonts.css");
/* 2026-10-19: supplied 10/18 final Home/Vision is the visual authority.
   Ordinary heading 400/1.5 follows final Vision; documented system cards remain 500. */
:root{--page-w:1044px;--page-gutter:clamp(36px,5.6vw,80px);--reading-w:960px;--ink:#111110;--muted:#6f6e69;--mint:#0FDFDD;--card:#f5f5f5;--handoff-color:.25s cubic-bezier(.4,0,.2,1)}
body{color:#323232;letter-spacing:-.02em}
.site-footer{background:#f5f5f5;color:#323232;padding:clamp(56px,7vw,96px) 0}
.footer-inner{width:min(1200px,calc(100% - var(--page-gutter)));margin-inline:auto}
.footer-top{display:flex;flex-wrap:wrap;gap:48px clamp(40px,8vw,120px);padding-bottom:56px}
.contact{flex:1 1 300px;min-width:0}.contact>a{font-size:clamp(36px,4.4vw,56px);font-weight:400;line-height:1.2;letter-spacing:-.03em}
.contact p{font-size:14px;color:#323232;margin-top:20px}.contact>span{font-size:13px;color:#323232;margin-top:8px;line-height:1.5}
.footer-columns{flex:1.05 1 315px;min-width:0;width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);padding-top:8px;margin:0}
.footer-columns>div{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.footer-columns h3{font-size:14px;line-height:1.5;font-weight:400;color:#111110;margin-bottom:6px}
.footer-columns a,.footer-columns button{position:relative;isolation:isolate;display:inline-flex;font-size:13px;font-weight:400;line-height:1.5;padding:0;color:#323232;text-align:left}
.footer-columns a::before,.footer-columns button::before{content:'';position:absolute;inset:-6px -8px;z-index:-1;background:rgba(17,17,16,.08);opacity:0;transform:scale(.96);transition:opacity var(--handoff-color),transform var(--handoff-color);pointer-events:none}
.footer-columns a:hover::before,.footer-columns button:hover::before,.footer-columns a:focus-visible::before,.footer-columns button:focus-visible::before{opacity:1;transform:scale(1)}
.footer-bottom{position:relative;border-top:1px solid #11111021;display:flex;flex-wrap:wrap;justify-content:space-between;gap:13px 30px;padding:28px 70px 0 0}
.footer-bottom p{font-size:13px;line-height:1.8;color:#323232;margin:0}
.top-button{top:24px;width:40px;height:40px;border:1px solid #111110;color:#111110;background:transparent;transition:background var(--handoff-color),color var(--handoff-color);font-size:18px}
.top-button:hover,.top-button:focus-visible{background:#111110;color:#fff}
.dialog-confirm{min-height:48px;background:#0FDFDD;color:#111110;font-weight:600;transition:background var(--handoff-color),color var(--handoff-color)}
.dialog-confirm:hover,.dialog-confirm:focus-visible{background:#111110;color:#fff}
.dialog-close{width:40px;height:40px;display:grid;place-items:center;transition:background var(--handoff-color)}.dialog-close:hover{background:#f5f5f5}
@media(max-width:799px){.footer-top{gap:36px;padding-bottom:36px}.footer-columns{flex-basis:100%;padding-top:0}.footer-columns a,.footer-columns button,.footer-columns h3,.contact p,.contact>span,.footer-bottom p{font-size:14px}.footer-bottom{padding-right:52px;gap:18px}.footer-bottom p+p{margin:0}}

.wrap{width:min(1044px,calc(100% - var(--page-gutter)))}.news-inner{width:min(1200px,calc(100% - var(--page-gutter)))}
.section{padding-block:clamp(80px,9vw,130px)}
.meaning h2,.metrics h2,.history>h2,.news-head h2{font-size:clamp(26px,2.6vw,32px);font-weight:400;line-height:1.5;letter-spacing:-.02em;color:#323232}
.cover h1{font-size:clamp(30px,3.2vw,40px);line-height:1.45;font-weight:400;color:#323232;letter-spacing:-.02em}.cover-copy>p{font-size:17px;line-height:1.85;color:#6f6e69}
.muted{font-size:19px;line-height:1.85;color:#6f6e69;margin-top:20px;letter-spacing:-.01em}
.meaning-cards{gap:24px;margin-top:clamp(40px,5vw,64px)}.meaning-cards article{background:#f5f5f5;padding:clamp(28px,3.2vw,44px) clamp(24px,3vw,40px)}.meaning-cards h3{font-size:clamp(20px,2vw,26px);font-weight:500;line-height:1.45;color:#111110}.meaning-cards p{font-size:15px;line-height:1.85;color:#6f6e69}
.metric-cards{margin-top:clamp(40px,5vw,64px);gap:24px}.metric-cards>div{background:#f5f5f5}.metric-cards h3{font-size:15px;line-height:1.85;color:#6f6e69}.metric-cards span{color:#6f6e69}
.history-tabs button{background:#f5f5f5;color:#323232;transition:background var(--handoff-color),color var(--handoff-color)}.history-tabs button[aria-selected=true]{background:#0FDFDD;color:#111110}.history-tabs button:hover{background:#111110;color:white}
.period-intro h3{font-size:clamp(20px,2vw,26px);line-height:1.5;font-weight:400;color:#323232}.period-intro p,.timeline p{font-size:15px;line-height:1.85;color:#323232}.history-record figcaption{font-size:14px;line-height:1.6;color:#6f6e69}
/* Fixed history and illustration stages keep their approved viewport-dependent sizing. */
.scroll-motion .history>h2{font-size:clamp(26px,2.6vw,32px);font-weight:400;line-height:1.5}.scroll-motion .history>.muted{font-size:16px;color:#6f6e69}.scroll-motion .period-intro p,.scroll-motion .timeline p{font-size:15px;line-height:1.85}.scroll-motion .period-intro h3{font-weight:400}.scene-copy>p{color:#323232}
/* News uses delivered Vision related cards: four on desktop, 1.2 on mobile.
   Keep both desktop controls for the four-card set, disabled when it fits.
   Official article-photo crop coordinates remain in story.css. */
.news-head{align-items:flex-end;gap:16px 28px}.news-tools{gap:24px;margin:0}.news-tools>a{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;line-height:1.5;white-space:nowrap;padding:7px 14px;margin:-7px -14px}
.news-tools>a::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(17,17,16,.08);opacity:0;transform:scale(.9);transition:opacity var(--handoff-color),transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}.news-tools>a:hover::before,.news-tools>a:focus-visible::before{opacity:1;transform:scale(1)}
.news-arrows{display:flex;gap:6px}.news-arrows button{width:40px;height:40px;border:1px solid #111110;color:#111110;background:transparent;transition:background var(--handoff-color),color var(--handoff-color),opacity .2s}.news-arrows button:disabled{opacity:.35;cursor:default;background:transparent;color:#111110}.news-arrows button:not(:disabled):hover,.news-arrows button:not(:disabled):focus-visible{background:#111110;color:#fff}
.news-arrow{display:block;width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateX(-1.5px) rotate(45deg)}.news-arrow.is-prev{transform:translateX(1.5px) rotate(-135deg)}
.news-rail{position:relative;margin-top:40px}.news-track{width:100%;max-width:100%;padding:6px 0 0;margin-top:-6px;gap:clamp(16px,2.6vw,32px);overscroll-behavior-x:contain;scroll-behavior:smooth;cursor:grab}.news-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}.news-track.is-dragging *{cursor:grabbing}
.news-card{position:relative;display:block;align-self:start;flex:0 0 calc((100% - 3 * clamp(16px,2.6vw,32px))/4);min-width:0;scroll-snap-align:start}.news-card h3{font-size:clamp(15px,1.3vw,17px);font-weight:400;line-height:1.5;margin-top:20px;min-height:3em;letter-spacing:-.02em;padding-bottom:0}
.news-media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#f0efec}.news-veil{position:absolute;left:0;right:0;top:0;height:76px;padding:14px;display:flex;align-items:flex-start;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7) 45%,transparent);opacity:0;transition:opacity var(--handoff-color);pointer-events:none}
.news-tag{display:inline-block;background:#111110;color:white;font-size:12px;line-height:1;font-weight:500;padding:7px 10px;opacity:0;transition:opacity .2s cubic-bezier(.4,0,.2,1)}
.news-card:hover .news-veil,.news-card:focus-visible .news-veil{opacity:1}.news-card:hover .news-tag,.news-card:focus-visible .news-tag{opacity:1;transition-delay:.15s}
.news-edge{display:none;position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--handoff-color)}.news-edge.is-left{left:-1px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.85) 35%,transparent)}.news-edge.is-right{right:-1px;background:linear-gradient(270deg,#fff,rgba(255,255,255,.85) 35%,transparent)}.news[data-l="1"] .news-edge.is-left,.news[data-r="1"] .news-edge.is-right{opacity:1}
.equipment-photo .image-note{font-size:12px;line-height:1.5;color:#6f6e69;bottom:8px;left:8px;right:8px}
@media(max-width:799px){
 .section{padding-block:80px}.muted{font-size:16px}.cover h1{font-size:28px}.cover-copy>p{font-size:16px}
 .meaning-cards{margin-top:40px;gap:12px}.meaning-cards article{padding:24px 20px}.meaning-cards h3{font-size:19px}.meaning-cards p{font-size:15px}.metric-cards{margin-top:40px;gap:12px}.metric-cards h3{font-size:15px}.metric-cards strong{font-size:32px}.metric-cards span{font-size:16px}
 .history-tabs{margin-right:0;padding-right:0}.history-tabs button{font-size:14px}.period-intro p,.timeline p{font-size:15px}.scroll-motion .history>.muted{font-size:14px}.scroll-motion .period-intro p,.scroll-motion .timeline p{font-size:15px}
 .news-head{display:flex;flex-wrap:nowrap;align-items:flex-end}.news-head h2{flex:1;min-width:0;font-size:26px}.news-tools{margin:0}.news-tools>a{font-size:14px}.news .news-arrows{display:none}.news-track{gap:12px;padding-top:0;margin-top:0;padding-bottom:4px;-webkit-overflow-scrolling:touch}.news-card{flex-basis:calc((100% - 12px)/1.2)}.news-card h3{font-size:19px;line-height:1.5;margin-top:20px}.news-edge{display:block}.equipment-photo .image-note{font-size:14px}
}
@media(max-width:360px){.metric-cards strong{font-size:28px}.metric-cards span{font-size:14px}.metric-cards h3{font-size:14px}.anniversary-caption p{font-size:14px}.meaning-head h2{font-size:26px}}
@media(max-height:700px){.scroll-motion .history>h2{font-size:26px}.scroll-motion .history>.muted{display:none}}
@media(prefers-reduced-motion:reduce){.news-track{scroll-behavior:auto}.news-veil,.news-tag,.news-edge,.news-tools>a::before{transition:none}}
/* The delivered mobile breakpoint is 799px; bridge the old generic 760px rules.
   The approved story/history motion breakpoint remains independent. */
@media(min-width:761px) and (max-width:799px){
 .cover-inner{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:32px;padding-bottom:56px;gap:32px}.cover-copy>p{margin-top:24px}.anniversary{height:auto;gap:18px;justify-content:flex-start;align-items:center}.anniversary>strong{font-size:120px;line-height:1.15}.anniversary-caption h2{font-size:23px;line-height:1.5}.anniversary-caption p{font-size:14px;line-height:1.75;margin-top:10px}
 .meaning-head{align-items:start;flex-direction:column;gap:32px}.meaning-head>img{width:184px}.meaning-cards{grid-template-columns:1fr}.meaning-cards article{min-height:0;display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:center}.meaning-cards p{margin:0}
 .metric-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-cards>div{padding:24px 8px;min-height:136px}
}

/* 2026-10-19: Vision cover rhythm, preserving the Story anniversary visual. */
:root{--vision-cover-height:calc(clamp(520px,42vw,620px) + 106px + clamp(16px,2vw,28px));--vision-cover-offset:calc(106px + clamp(16px,2vw,28px))}
main{padding-top:0}.cover{height:var(--vision-cover-height);min-height:0;margin:0;padding:0}
.cover .cover-inner{height:100%;min-height:0;padding-top:var(--vision-cover-offset);padding-bottom:0;align-items:center}
.cover-copy{align-self:center}.cover h1{font-size:clamp(28px,3vw,38px);line-height:1.45}.cover-copy>p{margin-top:24px}
@media(max-width:799px){
 .cover{height:auto;min-height:0;margin-top:var(--vision-cover-offset);padding:0}
 .cover .cover-inner{width:min(640px,calc(100% - clamp(36px,5.6vw,80px)));height:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
 .cover-copy{align-self:stretch;padding:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0}.cover h1{font-size:28px}
 .cover .anniversary{height:240px;min-height:240px;justify-content:center;gap:14px;padding:24px 12px}
 .cover .anniversary>strong{font-size:112px}.cover .anniversary-caption h2{font-size:22px}.cover .anniversary-caption p{font-size:14px}
}
@media(max-width:359px){.cover .anniversary{gap:10px;padding-inline:8px}.cover .anniversary>strong{font-size:88px}.cover .anniversary-caption h2{font-size:19px}.cover .anniversary-caption p{font-size:14px}}

/* Same-role typography comes from delivered Vision, including mobile.
   Cover: .bv-hero .bv-lead; ordinary section intro: #surgeries h2 + p.
   History stage instructions and anniversary/scene display copy are separate roles. */
.cover .cover-copy>p{font-size:17px;font-weight:400;line-height:1.8;letter-spacing:-.02em;color:#323232}
.meaning-head .muted{font-size:16px;font-weight:400;line-height:1.85;letter-spacing:-.02em;color:#6f6e69}

/* Delivered Vision family stack and smoothing, using its original subset fonts. */
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased}

/* Reuse the same section, body and text-action roles as Vision. */
.history>.muted,.scroll-motion .history>.muted{font-size:16px;line-height:1.85;letter-spacing:-.02em}
.meaning-cards p{color:#323232}
.news-tools>a{font-weight:400;color:#111110}
.history-tabs button{line-height:1.2;letter-spacing:-.02em}
.history-record figcaption{line-height:1.7;letter-spacing:-.02em}
.scene-copy>p,.scroll-motion .scene-copy>p{font-size:clamp(15px,1.4vw,17px);line-height:1.8;letter-spacing:-.02em}
@media(max-width:799px){.scene-copy>p,.scroll-motion .scene-copy>p{font-size:15px;line-height:1.85}}

/* Mobile Story composition. Keep the approved desktop scenes and all original copy/assets. */
@media(max-width:799px){
 /* Replace the empty top margin with cover padding so the mint continues behind the header. */
 .cover{margin-top:0;padding-top:var(--vision-cover-offset)}
 .cover .anniversary{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);grid-template-rows:auto auto;align-items:center;align-content:center;height:auto;column-gap:14px;row-gap:12px}
 .cover .anniversary .year-flow{grid-column:1;grid-row:1}
 .cover .anniversary>strong{grid-column:2;grid-row:1}
 .cover .anniversary-caption{display:contents}
 .cover .anniversary-caption h2{grid-column:3;grid-row:1}
 .cover .anniversary-caption p{grid-column:1/-1;grid-row:2;margin:0;text-align:center;font-size:13px;line-height:1.7;white-space:normal}
 #meaning .meaning-head>img{align-self:center;margin-inline:auto}
 #main :is(.cover,.meaning,#brand-story,#metrics) :is(h1,h2,h3,p){word-break:keep-all;overflow-wrap:anywhere}
}
@media(max-width:359px){.cover .anniversary{column-gap:10px}}

/* 2026-10-27 major-6 feedback (story) */
.story-page-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 3번째 장면: 논문·수상 건수를 1994·수술 수와 같은 signature 방식으로 */
.signature-group{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:clamp(28px,3vw,48px);row-gap:4px;margin-top:36px}
.signature-group>.signature{margin-top:0}
.scene .signature-group .signature strong{min-width:0}
.scroll-motion .signature-group{margin-top:28px}
@media(min-width:761px) and (max-height:720px){.scroll-motion .signature-group{margin-top:22px}}
@media(max-width:799px){html body #brand-story .signature-group{margin-top:16px;column-gap:24px}html body #brand-story .signature-group .signature{margin-top:0}}
@media(max-width:360px){html body #brand-story .signature-group{margin-top:12px}}
.hero-variant-note{margin-top:20px}
/* 피드백 6: 흰 Gradient와 Badge를 시간차 없이 동시에(hover·focus) */
.news-veil,.news-tag{transition:opacity var(--handoff-color)}
.news-card:hover .news-tag,.news-card:focus-visible .news-tag{transition-delay:0s}
.news-card:hover .news-veil,.news-card:focus-visible .news-veil,.news-card:focus-within .news-veil,.news-card:hover .news-tag,.news-card:focus-visible .news-tag,.news-card:focus-within .news-tag{opacity:1}
@media(prefers-reduced-motion:reduce){.news-veil,.news-tag{transition:none}}
/* 상단 2개 섹션 제거로 장면이 첫 화면이 됨: 모바일은 떠 있는 GNB(top16+64) 아래에서 장면 메뉴·문구 시작 */
@media(max-width:799px){html.scroll-motion body #brand-story.mobile-scenes .scene-inner,html body #brand-story.mobile-scenes #story-start .scene-inner{padding-top:96px}}
@media(max-width:799px) and (max-height:700px){html.scroll-motion body #brand-story.mobile-scenes .scene-inner,html body #brand-story.mobile-scenes #story-start .scene-inner{padding-top:88px}}
/* 10/28 서브헤더(경로 줄)가 생겨 모바일 헤더가 36px 높아짐 → 장면 위 여백도 같은 만큼 내림(01 시작 진행줄이 헤더에 가리지 않게) */
@media(max-width:799px){html.m6-has-subnav.scroll-motion body #brand-story.mobile-scenes .scene-inner,html.m6-has-subnav body #brand-story.mobile-scenes #story-start .scene-inner{padding-top:132px}}
@media(max-width:799px) and (max-height:700px){html.m6-has-subnav.scroll-motion body #brand-story.mobile-scenes .scene-inner,html.m6-has-subnav body #brand-story.mobile-scenes #story-start .scene-inner{padding-top:124px}}
/* 10/29 사용자 지정: '더 알아보기' 카드가 4개 이하이면 넘기기 버튼을 만들지 않음(이벤트 허브·Story·렌즈·EVO ICL 공통) */
.news-inner:not(:has(.news-track > :nth-child(5))) .news-arrows{display:none}