/* Scene art direction. Hero, documents, scratch and later sections retain their existing design. */
/* Sticky header switches to #10121D while career (night-sky) is active, so the scene reads as
   one continuous frame instead of a light header sitting on top of a dark section. Layout
   (height/padding/position) is untouched. */
.site-header { transition: background-color .35s ease, border-color .35s ease; }
.site-header.is-on-dark { background: #10121d; border-bottom-color: #322f3d; }
.site-header.is-on-dark .top-nav a { color: #c9c2d6; }
.site-header.is-on-dark .top-nav a:hover { color: #f7f3ff; }
.site-header.is-on-dark .top-nav a.is-active { color: #ffcd47; }
.site-header.is-on-dark .brand-logo { filter: brightness(0) invert(1); }
@media (prefers-reduced-motion:reduce) {
  .site-header { transition: none; }
}

/* The regenerated wide object keeps its native image geometry, including margins. */
#scratch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); height: var(--scene-height); padding: 32px var(--page-gutter); }
#scratchTop { width: 100%; }
#scratchTop .tds-top__title { max-width: none; }
#scratch .scratch-ticket { width: min(1180px,100%); height: auto; aspect-ratio: 3 / 1; background: none; transform: rotate(-2deg); flex: none; isolation: isolate; }
/* Remove surplus blank stock between two equal-scale image slices. No axis stretching. */
#scratch .scratch-ticket::before, #scratch .scratch-ticket::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: url('./assets/generated/ticket-modern.png'); background-repeat: no-repeat; background-size: 165% 165%; pointer-events: none; }
#scratch .scratch-ticket::before { background-position: left center; clip-path: inset(0 50% 0 0); }
#scratch .scratch-ticket::after { background-position: right center; clip-path: inset(0 0 0 50%); }
#scratch .ticket-heading { left: 9%; right: auto; top: 33%; width: 23%; }
#scratch .ticket-heading > span { color: #fff; font-weight: 700; letter-spacing: -.045em; }
#scratch .ticket-heading br { display: block; }
#scratch .scratch-card { left: 39%; top: 19%; width: 52%; height: 62%; border: 0; border-radius: 0; background: #f5f3ef; transform: none; clip-path: polygon(0 2%,99% 0,100% 97%,1% 100%); }
#scratch .scratch-content { background: #f5f3ef; padding: 12px 20px; }
#scratch .scratch-content p { gap: 8px; }

@media (max-width:980px) {
  #scratch { gap: 28px; padding-inline: 12px; }
  #scratchTop { padding-inline: 8px; }
  #scratch .scratch-ticket { width: 100%; height: auto; }
  #scratch .ticket-heading { left: 9%; top: 33%; width: 23%; }
  #scratch .scratch-content { padding: 4px 8px; }
  #scratch .scratch-content p { gap: 4px; }
}

/* 2026-09-11: rapid document race replaces the hover-organize interaction - extra sheets whip
   past (film-frame reference only, no filmstrip chrome) in front of the real three-sheet stack.
   Transit sheets reuse .document-sheet sizing so they scale for free at every breakpoint
   already tuned above. */
/* 진짜 더미 세 장: 평소엔 부채꼴로 흩어져 있고(editorial.css 기본값), .is-organized일 때만
   반듯하게 겹친다. 진입 시 정리된 채로 시작 → 촤라락이 지나가며 흩뜨림 → 호버/탭으로 다시 정리
   (src/editorial.js). */
.document-sheet--transit { pointer-events: none; opacity: 0; z-index: 5; }
.document-composition.is-playing .document-sheet--transit {
  animation: doc-transit-race .42s cubic-bezier(.5,0,.75,.35) both;
  animation-delay: calc(var(--doc-i,0) * 85ms);
}
.document-composition.is-playing .document-sheet--transit:last-child {
  animation-name: doc-transit-race-final;
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(.16,1,.3,1);
}
@keyframes doc-transit-race {
  0% { opacity: 0; transform: translateX(var(--race-from)) rotate(6deg); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: translateX(-8%) rotate(-2deg); }
  100% { opacity: 0; transform: translateX(var(--race-to)) rotate(-6deg); }
}
@keyframes doc-transit-race-final {
  0% { opacity: 0; transform: translateX(var(--race-from)) rotate(5deg); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translateX(0) rotate(-4deg); }
  100% { opacity: 0; transform: translateX(0) rotate(-4deg); }
}
.document-sheet__diagram { display: block; width: 46px; height: 30px; margin-top: 8px; border: 1.5px solid currentColor; border-radius: 4px; position: relative; opacity: .55; }
.document-sheet__diagram::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 1.5px; background: currentColor; }

@media (prefers-reduced-motion:reduce) { .document-sheet--transit { display: none; } }

/* 펼쳐질 때(정리 해제)만 한 박자 늦게, 천천히. 정리될 때는 기존 속도 그대로 즉시 반응 */
.document-composition:not(.is-organized) .document-sheet:not(.document-sheet--transit) { transition: transform .9s cubic-bezier(.2,.7,.3,1) .15s, background .4s; }
@media (prefers-reduced-motion:reduce) { .document-composition .document-sheet { transition: none; } }

/* 앞장 문서: 정책서 라벨은 좌측 상단, 25건은 가운데, 아래는 옅은 줄 */
.document-sheet--front > span { font-weight: 700; letter-spacing: -.06em; }
.document-sheet--front > strong { align-self: center; }

/* 타이틀 칸은 내용 너비 + 좌측 패딩만큼의 우측 여백만 차지하고, 나머지(오른쪽 화면 끝까지)는
   전부 문서 촤라락 영역이다. 문서 더미는 보이는 영역의 가운데, 촤라락은 그 영역 양 끝까지 */
@media (min-width:761px) {
  .strength-scene--documents { grid-template-columns: max-content minmax(0,1fr); gap: 0; }
  .strength-scene--documents .strength-copy { padding-right: var(--scene-inset); }
  .document-composition { width: auto; margin-right: calc(-1 * var(--scene-inset)); --race-from: calc(50cqw + 50% + var(--scene-inset) / 2); --race-to: calc(-50cqw + 50%); }
  .document-sheet { left: calc(50% - var(--scene-inset) / 2 - var(--sheet-w) / 2); }
}

/* 문서 크기: 모든 폭에서 --sheet-w/--sheet-h로 정하고, 더미는 영역 세로 가운데에 둔다 */
.document-composition { --sheet-w: 320px; --sheet-h: 420px; }
.document-sheet { width: var(--sheet-w); height: var(--sheet-h); top: calc(50% - var(--sheet-h) / 2); }
@media (min-width:981px) { .document-composition { height: clamp(480px,64vh,560px); } }
@media (max-width:1050px) { .document-composition { --sheet-w: 275px; --sheet-h: 380px; }}
@media (max-width:760px) {
  .document-composition { --sheet-w: 232px; --sheet-h: 306px; height: 410px; }
  .document-sheet { left: calc(50% - var(--sheet-w) / 2); }
}
@media (max-width:380px) { .document-composition { --sheet-w: 214px; --sheet-h: 284px; }}

/* 뒷장 두 장: 실제 글자 없이 "뭔가 적혀 있는" 느낌만 준다. 앞장과 같은 5단 구성
   (라벨 / 본문 / 줄 3개)이라 space-between 리듬과 아래 줄 위치가 앞장과 맞는다 */
.document-sheet__skeleton { display: flex; flex-direction: column; gap: 8px; }
.document-sheet__skeleton span { display: block; width: 32%; height: 12px; background: currentColor; opacity: .16; border-radius: 4px; }
.document-sheet__skeleton--body span { height: 7px; opacity: .12; }
.document-sheet__skeleton--body span:nth-child(1) { width: 88%; }
.document-sheet__skeleton--body span:nth-child(2) { width: 76%; }
.document-sheet__skeleton--body span:nth-child(3) { width: 84%; }
.document-sheet__skeleton--body span:nth-child(4) { width: 52%; }

/* Doubts the visitor already has, named before they have to ask - a typography composition, not a
   UI component. No box, no border, no icon, no cell divider - a 2-column/3-row alignment axis holds
   the six questions in order, invisibly, so the group reads as one editorial block first and six
   individual lines second. Even items nudge right so the block doesn't read as a rigid table.
   No entrance animation - everything is visible immediately, always. */
#intro { height: var(--scene-height); min-height: 0; padding: 0; display: block; background: #f5f3f7; }
.intro-sticky { position: relative; top: 0; height: var(--scene-height); min-height: 500px; padding: 40px var(--page-gutter); display: flex; align-items: center; overflow: clip; }
.intro-thoughts { width: min(1180px,100%); margin-inline: auto; }

.doubt-grid { display: grid; grid-template-columns: repeat(2,1fr); column-gap: var(--layout-gap); row-gap: var(--space-10); margin: 0; padding: 0; list-style: none; }
.doubt-item { display: flex; flex-direction: column; gap: 4px; }
.doubt-item:nth-child(2n) { margin-left: var(--space-8); }
.doubt-context { margin: 0; color: #9891a3; font-weight: 500; letter-spacing: -.015em; }
.doubt-question { margin: 0; color: #211c29; font-weight: 700; letter-spacing: -.03em; word-break: keep-all; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.doubt-question em { color: #7042bf; font-style: normal; transition: color .25s ease; }
.doubt-mark { display: inline-block; color: #7042bf; font-weight: 800; transition: color .25s ease, transform .25s ease; }

@media (hover:hover) and (pointer:fine) {
  .doubt-item:hover .doubt-question { transform: translateY(-6px); }
  .doubt-item:hover .doubt-question em { color: #5b32a8; }
  .doubt-item:hover .doubt-mark { color: #5b32a8; transform: translateY(-3px) rotate(-6deg); }
}

/* One complete composition, with no alternate palette or scroll effect. */
#capybara { height: var(--scene-height); }
#capybara .capybara-sticky { position: relative; top: 0; display: grid; grid-template-columns: 1.45fr .55fr; grid-template-areas: 'portrait copy'; align-items: center; padding: 36px var(--page-gutter); background: #fff; isolation: isolate; transition: none; }
#capybara .strength-copy { grid-area: copy; padding-left: var(--space-6); z-index: 2; }
#capybara .capybara-portrait { grid-area: portrait; width: min(100%,940px); margin: 0; justify-self: center; }
#capybara .capybara-portrait img { width: 100%; max-height: calc(var(--scene-height) - 30px); object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.02); } /* 그림 자체 배경(251~254)을 흰 배경과 같은 255로 */

/* Image-only horn scene. */
#dozer { display: flex; flex-direction: column; height: var(--scene-height); min-height: 640px; padding: 32px var(--page-gutter) 36px; background: #6f42c1; overflow: clip; }
.dozer-composition { position: relative; display: grid; grid-template-columns: .38fr 1.62fr; align-items: center; flex: 1; min-height: 0; width: min(1180px,100%); margin: 0 auto 24px; }
.dozer-copy { position: relative; padding-bottom: 16px; z-index: 1; }
#dozer .scene-title { color: #fff; }
#dozer .scene-title em { color: #ffdb55; }
.dozer-copy .text-action { min-height: 44px; padding: 4px 16px; margin-left: -16px; gap: 32px; color: #ffdc54; }
.dozer-copy .text-action:hover { background: rgba(255,255,255,.14); color: #ffdc54; } /* 진한 보라 배경: 연보라 틴트 대신 반투명 흰색, 글자는 노랑 유지 */
.dozer-copy .text-action:focus-visible { outline-color: #ffdc54; }
.horn-stage { position: relative; align-self: stretch; min-width: 0; min-height: 0; }
.horn-well { position: absolute; inset: 0; clip-path: inset(-100vh -100vw -100vh 0); pointer-events: none; z-index: 2; } /* 벽·팔은 위아래·오른쪽으로 이어지되 카피가 있는 왼쪽에서는 잘린다 */
.horn-object { position: absolute; width: min(100%,820px); aspect-ratio: 1; left: 50%; top: 45%; transform: translate(-50%,-50%); }
/* 쇠뿔은 왼쪽 벽에 가로로 박혀 있다: 이미지를 눕혀 손이 아래에서 올라오고, 밑동(19% 50%)을 축으로 오른쪽으로 당긴다. */
.horn-flight { position: absolute; inset: 0; transform: translate(13%,2%) rotate(-8deg); transform-origin: 19% 50%; }
.horn-flex { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; transform: rotate(90deg); }
.horn-arm { position: absolute; left: 37.1%; top: 76%; width: 7.8%; height: 200%; background: #e9e5e3; transform: rotate(6.6deg); transform-origin: 50% 0; } /* 잘린 팔뚝을 화면 밖까지 잇는다 */
.horn-wall { position: absolute; z-index: 1; top: -50vh; bottom: -50vh; left: 6%; right: 74%; border-radius: 0 8px 8px 0; background: #a17bd4; border-right: 10px solid #855bc1; transform-origin: 0 50%; }
.horn-snap { position: absolute; inset: 0; opacity: 0; }
.horn-snap::before, .horn-snap::after { content: ''; position: absolute; right: 69%; width: 6%; height: 4px; border-radius: 4px; background: #ffdb55; }
.horn-snap::before { top: 34%; transform: rotate(35deg); }
.horn-snap::after { bottom: 34%; transform: rotate(-35deg); }
#dozer.is-motion-ready .horn-flight { transform: translate(0,0) rotate(-4deg); }

/* Night, not a chart: subpixel light, layered depth, and a path only while exploring. */
#career { position: relative; isolation: isolate; height: var(--scene-height); min-height: 600px; padding-block: 36px; background: #10121d; overflow: clip; cursor: default; }
#career > .section-copy { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; width: 100%; }
#careerTop .tds-top__title { max-width: none; }
.career-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
#career .career-night { position: relative; z-index: 1; min-height: 440px; flex: 1; }
#career .career-night::before { content: none; }
#career .career-experience { position: absolute; width: 110px; left: var(--star-x); top: var(--star-y); transform: translateX(-50%); z-index: 1; }
#career .career-experience:nth-child(1) { --star-x: 11%; --star-y: 29%; --light-size: 19px; --beacon-delay: -.5s; }
#career .career-experience:nth-child(2) { --star-x: 36%; --star-y: 13%; --light-size: 17px; --beacon-delay: -2.2s; }
#career .career-experience:nth-child(3) { --star-x: 76%; --star-y: 25%; --light-size: 21px; --beacon-delay: -3.4s; }
#career .career-experience:nth-child(4) { --star-x: 24%; --star-y: 64%; --light-size: 17px; --beacon-delay: -1.1s; }
#career .career-experience:nth-child(5) { --star-x: 54%; --star-y: 72%; --light-size: 19px; --beacon-delay: -2.8s; }
#career .career-experience:nth-child(6) { --star-x: 89%; --star-y: 60%; --light-size: 21px; --beacon-delay: -4.1s; }
#career .career-star { position: relative; padding: 48px 0 8px; min-height: 74px; display: block; color: #b6b5c7; border: 0; border-radius: 0; background: transparent; font-weight: 400; text-shadow: none; cursor: pointer; transition: color .25s, opacity .25s; }
#career .career-star::before { content: ''; position: absolute; left: 50%; top: 18px; width: var(--light-size,9px); height: var(--light-size,9px); border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(ellipse,#fffef2 0 12%,#fff3c8 24%,#f9e5b28c 43%,#ddd2ff30 65%,transparent 74%); box-shadow: 0 0 10px 1px #fff5d95e,0 0 28px 5px #e0ddfa45,0 0 62px 14px #bec5ff16; }
#career .career-star::after { content: ''; position: absolute; left: 50%; top: 18px; width: 76px; height: 76px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(ellipse 4% 45%,#ffefc594,transparent 100%),radial-gradient(ellipse 38% 3%,#ffefc570,transparent 100%),radial-gradient(circle,#ede5ff28,transparent 65%); opacity: .7; transition: transform .3s,opacity .3s; }
#career.is-sky-visible .career-star::before { animation: career-beacon 4.8s ease-in-out var(--beacon-delay,0s) infinite; }
@keyframes career-beacon { 0%,100% { opacity: .85; transform: translate(-50%,-50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }
#career .career-star:hover, #career .career-star[aria-expanded="true"] { color: #fff4cd; }
#career .career-star[aria-expanded="true"]::after { opacity: 1; transform: translate(-50%,-50%) scale(1.65); }
#career .career-star:focus-visible { outline: 1px solid #e4d9b5; outline-offset: 3px; }
#career .career-experience.is-active { z-index: 4; }
#career .career-experience.is-connected .career-star { color: #d3cce0; }
#career .career-experience.is-connected .career-star::after { opacity: 1; transform: translate(-50%,-50%) scale(1.16); transition-delay: .1s; }
.career-connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#career .career-discovery { position: absolute; left: 50%; right: auto; top: 71px; bottom: auto; width: 340px; max-width: calc(100vw - 40px); transform: translateX(calc(-50% + var(--discovery-shift,0px))); margin: 0; padding: 12px 16px 16px; background: #141725; color: #f4f1fb; border: 0; border-radius: 0; backdrop-filter: none; box-shadow: none; pointer-events: auto; }
#career .career-experience:nth-child(n+4) .career-discovery { top: auto; bottom: 74px; }
#career .career-discovery::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
#career .career-experience:nth-child(n+4) .career-discovery::before { top: auto; bottom: -12px; }
#career .career-discovery strong { font-weight: 700; }
#career .career-discovery span { color: #a6a4bb; margin-top: 8px; }
#career .career-discovery p { display: block; color: #e1dced; margin: 16px 0 0; word-break: keep-all; }

@media (max-width:980px) {
  #capybara .capybara-sticky { grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: 'copy' 'portrait'; align-content: center; gap: 36px; padding-block: 32px; }
  #capybara .strength-copy { justify-self: end; padding-left: 0; text-align: right; }
  #capybara .capybara-portrait { width: min(100%,700px,max(240px,calc((var(--scene-height) - 380px) * 1.7))); align-self: center; }
  #capybara .capybara-portrait img { max-height: calc(var(--scene-height) - 280px); }
  .horn-arm { display: none; } /* 좁은 화면에서 팔을 화면 밖까지 이으면 장대처럼 보인다 */
  #career { min-height: 650px; }
  #career > .section-copy { display: block; }
}
@media (max-width:600px) {
  .intro-sticky { min-height: 500px; padding-block: 24px; }
  .doubt-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .doubt-item { gap: 4px; }
  #capybara .capybara-sticky { padding-block: 28px; }
  #dozer { padding-block: 24px 28px; min-height: 640px; }
  .dozer-composition { grid-template-columns: 1fr; grid-template-rows: auto 1fr; row-gap: 16px; margin-block: 24px 16px; }
  .dozer-copy { padding: 0; }
  .horn-well { clip-path: inset(0 -100vw -100vh -100vw); } /* 세로 배치에선 카피 아래에서 시작해 화면 왼쪽까지 벽이 이어진다 */
  .horn-object { width: 105%; right: 4%; left: auto; transform: translateY(-50%); } /* 좁은 화면에선 왼쪽 벽에 붙여 키운다 */
  .horn-wall { left: -50vw; border-right-width: 6px; }
  #career { min-height: 690px; padding-block: 32px; }
  #careerTop .tds-top__title { max-width: 290px; }
  #career .career-night { min-height: 490px; }
  #career .career-experience { width: 90px; }
  #career .career-experience:nth-child(1) { --star-x: 14%; --star-y: 18%; }
  #career .career-experience:nth-child(2) { --star-x: 59%; --star-y: 5%; }
  #career .career-experience:nth-child(3) { --star-x: 86%; --star-y: 36%; }
  #career .career-experience:nth-child(4) { --star-x: 16%; --star-y: 53%; }
  #career .career-experience:nth-child(5) { --star-x: 47%; --star-y: 77%; }
  #career .career-experience:nth-child(6) { --star-x: 86%; --star-y: 69%; }
}
@media (max-height:580px) {
  #intro { height: auto; }
  .intro-sticky { position: relative; top: 0; height: auto; min-height: 500px; }
  #capybara { height: auto; }
  #capybara .capybara-sticky { position: relative; top: 0; height: auto; min-height: 500px; }
  #capybara .capybara-portrait { width: min(100%,480px); }
  #capybara .capybara-portrait img { max-height: 320px; }
  #dozer { min-height: 500px; }
}
@media (prefers-reduced-motion:reduce) {
  #intro { height: auto; }
  .intro-sticky { position: relative; top: 0; height: auto; min-height: var(--scene-height); }
  #career .career-star, #career .career-star::after { transition: none; }
  #career .career-star::before, #career .career-star::after { animation: none !important; }
}

/* 세 강점 씬의 좌우 여백은 --scene-inset 하나로 맞춘다(문서화 왼쪽 = 카피바라 오른쪽 = 쇠뿔 왼쪽) */
#documents { padding-inline: var(--scene-inset); }
#capybara .capybara-sticky { padding-inline: var(--scene-inset); }
#capybara .strength-copy { justify-self: end; }
#dozer { padding-inline: var(--scene-inset); }
.dozer-composition { width: 100%; }