@import url("/css/font/pretendard.css");

:root { --doosan-blue:#005eb8; --header-height:89px; }
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; word-break:keep-all; }
#fullpage > section { color:#111; }
#fullpage > section p, #fullpage > section h2, #fullpage > section h3 { word-break:keep-all; }
html.vision-page { background:#fff; }
#fullpage > section figure, #fullpage > section p, #fullpage > section h1, #fullpage > section h2, #fullpage > section h3 { margin:0; }
html.vision-page em { color:var(--doosan-blue); font-style:normal; }

.page-hero.fp-section, .page-hero .fp-tableCell { display:block !important; position:relative; z-index:6; height:638px !important; overflow:hidden; background:#172433; }
.hero-frame { position:relative; width:100%; height:638px; overflow:hidden; background:#172433; }
.hero-frame .hero-media { position:absolute; inset:var(--header-height) 0 0; background:url("/assets/vision/hero-toned.png") center/cover no-repeat; }
.hero-frame > h1 { position:absolute; top:333px; left:50%; color:#fff; font-size:43px; font-weight:700; line-height:1.35; letter-spacing:-.04em; transform:translateX(-50%); }
.breadcrumb { position:absolute; right:8.95vw; bottom:39px; display:flex; gap:34px; color:#fff; font-size:20px; line-height:27px; }
.breadcrumb span, .breadcrumb strong { position:relative; }
.breadcrumb span::after { content:">"; position:absolute; right:-22px; color:rgba(255,255,255,.75); }

#fullpage { position:relative; isolation:isolate; background:#fff; }
#fullpage .section:not(.fp-auto-height) { position:relative; height:100vh !important; min-height:100vh; overflow:visible !important; background:#fff; }
#fullpage .key-vision, #fullpage .section-category { background:transparent; }
.design-stage { position:absolute; z-index:5; top:calc(50% + var(--header-height) / 2); left:50%; container-type:inline-size; transform:translate(-50%,-50%); }
.stage-940 { width:min(100vw, calc((100vh - var(--header-height)) * 1920 / 940)); aspect-ratio:1920/940; }
.stage-1073 { width:min(100vw, calc((100vh - var(--header-height)) * 1920 / 1073)); aspect-ratio:1920/1073; }
.stage-1074 { width:min(100vw, calc((100vh - var(--header-height)) * 1920 / 1074)); aspect-ratio:1920/1074; }

/* Figma Group 9 원본: vision 기준 x 83px / y -385.3048px */
.vision-category-metaphor { --metaphor-width:min(100vw, calc(100vh * 1920 / 940)); position:absolute; z-index:3; top:0; left:0; width:100%; height:200vh; overflow:hidden; pointer-events:none; }
.vision-category-metaphor img { position:absolute; top:calc(var(--metaphor-width) * -385.3048 / 1920); left:calc((100% - var(--metaphor-width)) / 2 + var(--metaphor-width) * 83 / 1920); display:block; width:calc(var(--metaphor-width) * 1804.4767 / 1920); max-width:none; height:auto; filter:brightness(1) invert(0); transition:filter var(--reveal-duration) var(--reveal-ease); }
#fullpage:has(.section-category.is-revealed) .vision-category-metaphor img { filter:brightness(0) invert(1); }

.story-image { position:absolute; z-index:1; overflow:hidden; }
.story-image img, .slogan-image img { display:block; width:100%; height:100%; object-fit:cover; }
.vision-image { top:17.4468%; left:8.9583%; width:37.2917%; height:62.4468%; }
.story-copy { position:absolute; }
.vision-copy { top:28.8298%; left:55%; width:36.0417%; height:42.3404%; }
.story-label { position:absolute; top:0; color:var(--doosan-blue); font-size:2.1875cqw; font-weight:700; line-height:1.35; }
.vision-copy .story-label { right:0; }
.story-copy h2 { position:absolute; color:#000; font-size:2.5cqw; font-weight:700; line-height:1.35; letter-spacing:-.045em; }
.vision-copy h2 { top:21.1055%; left:0; width:100%; text-align:right; }
.story-description { position:absolute; color:#323232; font-size:1.3021cqw; font-weight:400; line-height:1.36; }
.vision-copy .story-description { top:65.8291%; right:0; width:79.7688%; text-align:right; }

.section-category .design-stage > h2 { position:absolute; top:8.552%; left:22.2917%; width:55.3125%; color:#000; font-size:1.7708cqw; font-weight:500; line-height:1.35; letter-spacing:-.04em; }
.section-category .design-stage > h2 em { font-weight:700; }
.category-list { position:absolute; top:21.9233%; left:9.6875%; display:flex; width:80.625%; height:68.8276%; }
.category-card { position:relative; flex:1 1 25%; min-width:0; overflow:hidden; background-position:center; background-size:cover; }
.category-card::before { content:""; position:absolute; inset:0; background:rgba(5,18,28,.25); }
.category-tech { background-image:url("/assets/vision/value-tech.jpg"); }
.category-materials { background-image:url("/assets/vision/value-materials.jpg"); }
.category-customer { background-image:url("/assets/vision/value-customer.jpg"); }
.category-scale { background-image:url("/assets/vision/value-scale.jpg"); }
.card-copy { position:absolute; z-index:1; top:44.4323%; right:5%; left:5%; color:#fff; text-align:center; }
.card-copy p { font-size:1.5625cqw; font-weight:600; line-height:1.36; }
.card-copy h3 { margin-top:.15625cqw; font-size:2.8646cqw; font-weight:700; line-height:1.36; letter-spacing:-.04em; }

.mission-copy { top:27.4468%; left:8.9583%; width:31.0938%; height:43.2979%; }
.mission-copy .story-label { left:0; }
.mission-copy h2 { top:20.6388%; left:0; width:100%; }
.mission-copy .story-description { top:74.9386%; left:0; width:100%; }
.mission-image { top:19.8936%; left:53.75%; width:37.2917%; height:62.4468%; }

.slogan-image { position:absolute; top:33.7989%; left:33.9063%; width:32.1875%; height:32.4022%; overflow:hidden; border-radius:.4167cqw; }
.slogan-image img { object-position:center 51%; }
.slogan .design-stage h2 { position:absolute; top:16.5736%; left:50%; transform:translateX(-50%); width:66.8229%; height:14.432%; display:flex; align-items:center; justify-content:center; color:var(--doosan-blue); font-size:4.1667cqw; font-style:italic; font-weight:700; line-height:1.2; letter-spacing:-.045em; text-align:center; }
.slogan .design-stage h2 img { display:block; width:100%; height:auto; max-height:100%; object-fit:contain; transition:filter var(--reveal-duration) var(--reveal-ease); }
.slogan.is-revealed .design-stage h2 img { filter:brightness(0) invert(1); }
.slogan .design-stage > p { position:absolute; top:73.4637%; left:31.0989%; width:37.8125%; font-size:1.5625cqw; line-height:1.36; text-align:center; }


.site-footer.fp-section { height:auto !important; }

/* FullPage owns scrolling. These transitions only change a section's artwork. */
:root { --reveal-duration:1400ms; --reveal-ease:cubic-bezier(.22,.61,.36,1); }
/* One-pixel artwork bleed covers fractional-pixel seams during FullPage movement. */
.section-visual { position:absolute; z-index:4; inset:-1px 0; overflow:hidden; pointer-events:none; visibility:hidden; clip-path:inset(calc(var(--image-top) + 1px) var(--image-right) calc(var(--image-bottom) + 1px) var(--image-left) round var(--image-radius,0px)); transition:clip-path var(--reveal-duration) var(--reveal-ease); }
.visual-ready .section-visual { visibility:visible; }
.visual-ready .story-image, .visual-ready .slogan-image { visibility:hidden; }
.section-visual img { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; transition:none; }
.is-revealed .section-visual { clip-path:inset(0px 0px 0px 0px round 0px); }
.story-label, .story-copy h2, .story-copy em, .story-description, .section-category .design-stage > h2, .section-category .design-stage > h2 em { transition:color var(--reveal-duration) var(--reveal-ease); }
.is-revealed .story-label, .is-revealed .story-copy h2, .is-revealed .story-copy em, .is-revealed .story-description, .section-category.is-revealed .design-stage > h2, .section-category.is-revealed .design-stage > h2 em { color:#fff; }
.category-backdrop { position:absolute; z-index:2; inset:-1px 0; background:#05243f url("/assets/vision/values-bg.jpg") center/cover no-repeat; opacity:0; pointer-events:none; transition:opacity var(--reveal-duration) var(--reveal-ease); }
.section-category .design-stage > h2 { text-align:center; }
.section-category.is-revealed .category-backdrop { opacity:1; }
.slogan .design-stage h2, .slogan .design-stage > p { transition:top var(--reveal-duration) var(--reveal-ease),color var(--reveal-duration) var(--reveal-ease); }
.slogan.is-revealed .design-stage h2 { top:35.2886%; color:#fff; }
.slogan.is-revealed .design-stage > p { top:53.2588%; color:#fff; }

/* Card copy is laid out against the fixed list width, not the expanding card. */
.category-list { container-type:inline-size; }
.category-card { flex:1 1 0; cursor:pointer; transition:flex-grow 650ms var(--reveal-ease); }
.category-card::before { background:transparent; }
.category-card.is-selected { flex-grow:1.6982; }
.category-card:focus-visible { outline:3px solid #fff; outline-offset:-5px; }
.card-copy { left:50%; right:auto; width:16cqw; transform:translateX(-50%); opacity:1; transition:opacity 300ms ease; }
.card-copy p, .card-copy h3 { white-space:nowrap; }
.card-detail { position:absolute; z-index:1; top:20.0873%; left:3.75cqw; width:29cqw; height:23.3333cqw; color:#fff; opacity:0; pointer-events:none; transition:opacity 350ms ease; }
.card-detail > img { display:block; width:3.3333cqw; height:3.3333cqw; object-fit:contain; }
.card-detail .detail-en { position:absolute; top:4.1667cqw; left:0; font-size:3.125cqw; font-weight:600; line-height:1.3667; white-space:nowrap; letter-spacing:-.01em; }
.card-detail h3 { position:absolute; top:8.125cqw; font-size:2.0833cqw; line-height:1.35; font-weight:500; }
.card-detail .detail-description { position:absolute; top:18.75cqw; font-size:1.6667cqw; line-height:1.375; font-weight:500; }
.category-card.is-selected .card-copy { opacity:0; }
.category-card.is-selected .card-detail { opacity:1; transition-delay:100ms; }
/* Final multilingual labels may be longer than the original design copy. */
.card-copy p, .card-copy h3 { white-space:normal; overflow-wrap:anywhere; }
.card-detail { display:flex; flex-direction:column; align-items:flex-start; gap:.5cqw; }
.card-detail > img { flex-shrink:0; }
.card-detail .detail-en, .card-detail h3, .card-detail .detail-description { position:static; }
.card-detail .detail-en { font-size:2.5cqw; line-height:1.2; white-space:normal; overflow-wrap:anywhere; }
.card-detail .detail-description { margin-top:auto !important; }
html[lang="en"] .card-copy h3 { font-size:2cqw; }
html:not([lang="ko"]) #fullpage > section p,
html:not([lang="ko"]) #fullpage > section h2,
html:not([lang="ko"]) #fullpage > section h3 { word-break:normal; overflow-wrap:normal; text-wrap:pretty; }
@media (min-width:1081px) {
 .category-tech .card-copy { width:90%; }
 .category-tech .card-copy p, .category-tech .card-copy h3 { white-space:nowrap; }
 html:not([lang="ko"]) .story-copy { display:flex; flex-direction:column; justify-content:center; gap:1.2cqw; top:20%; height:65%; }
 html:not([lang="ko"]) .story-copy > * { position:static; }
 html:not([lang="ko"]) .vision-copy { align-items:flex-end; }
 html:not([lang="ko"]) .story-copy h2 { font-size:2.2cqw; }
 html:not([lang="ko"]) .story-description { font-size:1.25cqw; line-height:1.5; width:100%; }
 /* Keep the approved copy on its specified lines as the design stage scales. */
 .copy-line { white-space:nowrap; }
 html[lang="ko"] .vision-copy { left:46.875%; width:44.1667%; }
 html[lang="ko"] .vision-copy .story-description { width:65.0943%; }
 html[lang="en"] .vision-copy { left:48.9583%; width:42.0834%; }
 html[lang="en"] .vision-copy h2 { font-size:2cqw; }
 html[lang="ja"] .vision-copy h2 { font-size:2cqw; }
 html[lang="zh"] .card-copy h3 { font-size:2.35cqw; white-space:nowrap; }
 html[lang="ja"] .card-copy h3 { font-size:1.65cqw; white-space:nowrap; }
 html:not([lang="ko"]) .slogan .design-stage > p { left:50%; width:54%; transform:translateX(-50%); }
 html[lang="zh"] .section-category .design-stage > h2,
 html[lang="ja"] .section-category .design-stage > h2 { left:50%; width:80.625%; transform:translateX(-50%); font-size:1.35cqw; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce) {
 :root { --reveal-duration:1ms; }
 .category-card, .card-copy, .card-detail { transition-duration:1ms; transition-delay:0ms; }
}
@media (max-width:1080px) {
 /* Desktop art-directed line breaks yield to natural wrapping on smaller screens. */
 #fullpage .design-stage br { display:none; }
 :root { --header-height:77px; --page-gutter:32px; }
 .page-hero.fp-section, .hero-frame { height:calc(var(--header-height) + 420px) !important; }
 .hero-frame > h1 { top:calc(var(--header-height) + 170px); font-size:36px; }
 .breadcrumb { right:var(--page-gutter); gap:24px; font-size:14px; }
 .design-stage { top:var(--header-height); width:100%; height:calc(100vh - var(--header-height)); aspect-ratio:auto; transform:translateX(-50%); }
 .vision-category-metaphor { --metaphor-width:calc(100vh * 1920 / 940); }
 .vision-image, .mission-image { top:5%; left:var(--page-gutter); width:calc(100% - 2 * var(--page-gutter)); height:35%; }
 .vision-copy, .mission-copy { top:44%; left:var(--page-gutter); width:calc(100% - 2 * var(--page-gutter)); height:52%; display:flex; flex-direction:column; justify-content:center; gap:20px; }
 .story-label { position:static; font-size:26px; line-height:1.35; }
 .vision-copy .story-label { text-align:right; }
 .story-copy h2 { position:static; font-size:clamp(24px,3.5vw,34px); line-height:1.4; letter-spacing:-.04em; }
 .vision-copy .story-description, .mission-copy .story-description { position:static; width:100%; font-size:16px; line-height:1.5; }
 .story-description br { display:none; }
 .section-category .design-stage > h2 { top:5%; left:var(--page-gutter); width:calc(100% - 2 * var(--page-gutter)); font-size:24px; line-height:1.45; }
 .category-list { top:22%; left:var(--page-gutter); width:calc(100% - 2 * var(--page-gutter)); height:73%; flex-direction:column; }
 .category-card { min-height:0; background-position:center 50%; }
 .category-card.is-selected { flex-grow:2.8; }
 .card-copy { top:50%; left:24px; width:calc(100% - 48px); transform:translateY(-50%); text-align:left; }
 .card-copy p { font-size:15px; line-height:1.3; white-space:normal; }
 .card-copy h3 { margin-top:4px; font-size:24px; line-height:1.3; }
 .card-detail { top:20px; left:24px; width:calc(100% - 48px); height:calc(100% - 40px); }
 .card-detail { display:block; }
 .card-detail > img { width:32px; height:32px; }
 .card-detail .detail-en { top:0; left:48px; width:calc(100% - 48px); font-size:26px; line-height:1.25; white-space:normal; }
 .card-detail .detail-en, .card-detail h3, .card-detail .detail-description { position:absolute; }
 html[lang="en"] .card-copy h3 { font-size:24px; }
 .card-detail h3 { top:42px; left:48px; font-size:18px; }
 .card-detail .detail-description { top:auto; bottom:0; font-size:16px; line-height:1.5; }
 .card-detail .detail-description br { display:none; }
 .slogan .design-stage h2 { top:12%; left:50%; width:calc(100% - 2 * var(--page-gutter)); height:18%; font-size:clamp(28px,5vw,48px); line-height:1.2; }
 .slogan-image { top:35%; left:15%; width:70%; height:32%; border-radius:5px; }
 .slogan .design-stage > p { top:76%; left:var(--page-gutter); width:calc(100% - 2 * var(--page-gutter)); font-size:16px; line-height:1.5; }
 .slogan .design-stage > p br { display:none; }
 .slogan.is-revealed .design-stage h2 { top:35%; }
 .slogan.is-revealed .design-stage > p { top:56%; }
}
@media (max-width:767px) {
 :root { --header-height:65px; --page-gutter:16px; }
 .page-hero.fp-section, .hero-frame { height:calc(var(--header-height) + 320px) !important; }
 .hero-frame > h1 { top:calc(var(--header-height) + 120px); font-size:30px; }
 .breadcrumb { bottom:24px; font-size:13px; }
 .vision-copy, .mission-copy { gap:12px; }
 .story-label { font-size:22px; }
 .story-copy h2 { font-size:clamp(20px,5.4vw,26px); line-height:1.35; }
 .vision-copy .story-description, .mission-copy .story-description { font-size:14px; line-height:1.5; }
 .section-category .design-stage > h2 { top:4%; font-size:18px; }
 .category-list { top:23%; height:73%; }
 .card-copy { left:16px; width:calc(100% - 32px); }
 .card-copy p { font-size:13px; }
 .card-copy h3 { font-size:20px; }
 .card-detail { top:14px; left:16px; width:calc(100% - 32px); height:calc(100% - 28px); }
 .card-detail > img { width:24px; height:24px; }
 .card-detail .detail-en { left:36px; width:calc(100% - 36px); font-size:20px; }
 html[lang="en"] .card-copy h3 { font-size:20px; }
 .card-detail h3 { top:50px; left:36px; font-size:16px; }
 .card-detail .detail-description { font-size:14px; }
 .slogan .design-stage h2 { font-size:28px; }
 .slogan .design-stage > p { font-size:14px; }
}
@media (max-width:1080px) and (max-height:600px) and (orientation:landscape) {
 .vision-image { top:12%; left:var(--page-gutter); width:38%; height:76%; }
 .mission-image { top:12%; left:58%; width:38%; height:76%; }
 .vision-copy { top:6%; left:48%; width:48%; height:88%; gap:10px; }
 .mission-copy { top:6%; left:4%; width:48%; height:88%; gap:10px; }
 .story-label { font-size:20px; }
 .story-copy h2 { font-size:20px; }
 .vision-copy .story-description, .mission-copy .story-description { font-size:14px; line-height:1.4; }
 .section-category .design-stage > h2 { top:4%; font-size:18px; }
 .category-list { top:26%; height:70%; flex-direction:row; }
 .category-card.is-selected { flex-grow:2.5; }
 .card-copy { left:8px; width:calc(100% - 16px); }
 .card-copy p { font-size:12px; }
 .card-copy h3 { font-size:18px; white-space:normal; }
 .card-detail { top:12px; left:12px; width:calc(100% - 24px); height:calc(100% - 24px); }
 .card-detail > img { width:22px; height:22px; }
 .card-detail .detail-en { left:30px; width:calc(100% - 30px); font-size:18px; }
 .card-detail h3 { left:30px; top:48px; font-size:14px; }
 .card-detail .detail-description { font-size:13px; line-height:1.3; }
 .slogan .design-stage h2 { top:4%; height:20%; font-size:28px; }
 .slogan-image { top:28%; left:38%; width:24%; height:40%; }
 .slogan .design-stage > p { top:76%; font-size:14px; }
 .slogan.is-revealed .design-stage h2 { top:26%; }
 .slogan.is-revealed .design-stage > p { top:62%; }
}