/* [코대리] 네이비·시안·골드 장면 조명과 별도 표면 층으로 본문 각도를 유지하는 입체 효과를 제공한다. */
.depth-scene { position: relative; isolation: isolate; }
.depth-stage-light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; border-radius: inherit; contain: paint; }
.depth-stage-light i { position: absolute; display: block; pointer-events: none; animation-play-state: paused; }
.depth-stage-light i:first-child { width: 75%; height: 125%; left: -24%; top: -32%; background: radial-gradient(ellipse, #39cde81f, #1d608a0a 45%, transparent 70%); transform: translateY(var(--depth-light-shift, 0px)) rotate(-26deg); animation: depth-light-drift 17s ease-in-out infinite alternate; animation-delay: var(--depth-scene-phase); }
.depth-stage-light i:nth-child(2) { width: 68%; height: 115%; right: -25%; bottom: -30%; background: radial-gradient(ellipse, #e2c48e13, #47789509 44%, transparent 68%); animation: depth-light-drift 21s ease-in-out infinite alternate-reverse; animation-delay: var(--depth-scene-phase); }
.depth-stage-light i:last-child { left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #6ad9eb75 40%, #e5cf9f70 63%, transparent); box-shadow: 0 5px 25px #59d0ed35, 0 0 70px #71cde42a; opacity: .68; }
.depth-scene:nth-of-type(3n) .depth-stage-light i:first-child { background: radial-gradient(ellipse, #caa97018, transparent 67%); }
.depth-scene[data-depth-visible="true"] > .depth-stage-light i { animation-play-state: running; }
.depth-scene:not([data-depth-visible="true"]) > .depth-stage-light i { animation-play-state: paused; }
.depth-surface { position: relative; isolation: isolate; translate: 0 var(--depth-lift, 0px); }
.depth-surface-skin { position: absolute; inset: 0; z-index: 2; display: block; border-radius: inherit; pointer-events: none; border: 1px solid #97dceb24; background: linear-gradient(135deg, #b1edff0c, transparent 30%, transparent 78%, #ebd3a512); box-shadow: inset 0 1px 0 #e2f8ff35, inset -1px -2px 0 #06101fd9, 0 2px 0 #25435b, 0 4px 0 #12283e, 0 6px 0 #091626, 0 22px 32px -20px #000b; transform: perspective(850px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)); transform-origin: 50% 65%; }
.depth-surface-skin::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, #b8efff13 47%, transparent 62%); opacity: .65; pointer-events: none; }
.depth-surface[data-depth-visible="true"] > .depth-surface-skin { will-change: transform; }
.app-frame.depth-object { rotate: 1 .3 0 var(--depth-object-angle, 0deg); box-shadow: 1px 1px 0 #ffffff, 3px 3px 0 #9cabb7, 5px 5px 0 #b4c5cf, 8px 9px 0 #182b3b, 15px 21px 30px #02081266, 30px 45px 85px #0b203d66; }
.app-frame > .depth-surface-skin { border-color: #fff6; border-radius: 14px; box-shadow: inset 1px 1px 8px #e9f7ff35; }
.benefit-pass.depth-surface { box-shadow: 0 2px 0 #dfd3b682, 0 4px 0 #5a675e, 0 7px 0 #0e2331, 0 16px 30px #0008, 0 30px 65px #1a88be25; }
.benefit-pass > .depth-surface-skin { border-color: #fff0c54d; box-shadow: inset 0 1px 0 #fff5d65c, inset 0 -3px 0 #05141d75; }
.cycle-visual > .depth-surface-skin { inset: 10%; border-radius: 50%; border: 1px solid #65dce82e; box-shadow: inset 0 3px 20px #0b4c6942, 0 2px 0 #234c6266, 0 7px 0 #061c2c88, 0 22px 60px -20px #38b3df40; z-index: -1; background: radial-gradient(circle, #1b456a26, transparent 64%); }
.asia-map-panel > .depth-surface-skin { inset: 5% 2% 13%; border-radius: 50%; z-index: -1; border-color: #5cc4df20; transform: perspective(850px) rotateX(calc(53deg + var(--depth-x, 0deg))) rotateY(var(--depth-y, 0deg)); box-shadow: inset 0 0 35px #2d9eb51c, 0 4px 0 #1c526b55, 0 12px 0 #092c4540, 0 30px 60px #0003; }
.whitepaper-panel.depth-surface { box-shadow: 0 2px 0 #314456, 0 5px 0 #172638, 0 9px 0 #07111e, 0 30px 70px #0005; }
.whitepaper-file.depth-surface { box-shadow: 0 3px 0 #27394c, 0 5px 0 #091420; }
.whitepaper-file > .depth-surface-skin { border-color: #d8bf8e30; background: linear-gradient(125deg, #efcd8310, transparent 40%); }
.destination-card.depth-surface { box-shadow: 0 3px 0 #213c50, 0 7px 0 #061522, 0 20px 42px #0004; }
.film-feature > .depth-surface-skin { box-shadow: inset 0 1px 0 #c1eeff55, inset 0 -3px 0 #061120, 0 7px 0 #07121e; }
.depth-surface:focus-within { --depth-lift: 0px !important; --depth-object-angle: 0deg !important; }
@keyframes depth-light-drift { from { translate: -2% -2%; opacity: .62; } to { translate: 10% 7%; opacity: 1; } }
html[data-depth-motion="paused"] .depth-stage-light i, html[data-motion="paused"] .depth-stage-light i, html[data-reduced-motion="true"] .depth-stage-light i { animation-play-state: paused !important; }
html[data-depth-motion="paused"] .depth-surface, html[data-motion="paused"] .depth-surface, html[data-reduced-motion="true"] .depth-surface { translate: none; rotate: none; }
html[data-depth-motion="paused"] .depth-surface-skin, html[data-motion="paused"] .depth-surface-skin, html[data-reduced-motion="true"] .depth-surface-skin { transform: none; will-change: auto; }
@media (max-width: 600px) {
  .depth-stage-light i:first-child { width: 120%; left: -55%; opacity: .75; }
  .depth-stage-light i:nth-child(2) { width: 100%; right: -55%; }
  .depth-surface-skin { box-shadow: inset 0 1px 0 #e2f8ff30, inset -1px -2px 0 #06101fd9, 0 2px 0 #25435b, 0 4px 0 #0b1c2f, 0 20px 28px -20px #000b; }
  .app-frame.depth-object { box-shadow: 2px 2px 0 #c4d5df, 5px 5px 0 #213a4b, 9px 12px 0 #0d2334, 16px 25px 40px #02081266; }
}
@media (prefers-reduced-motion: reduce) {
  .depth-stage-light i { animation: none !important; }
  .depth-surface { translate: none !important; rotate: none !important; }
  .depth-surface-skin { transform: none !important; will-change: auto !important; }
}
@media print { .depth-stage-light, .depth-surface-skin { display: none !important; } .depth-surface { translate: none !important; rotate: none !important; box-shadow: none !important; } }
/* 장식 광원이 버튼을 가로채지 않고 큰 글자에서도 제목이 화면 안에 줄바꿈된다. */
.app-glow { pointer-events: none; }
.cinematic-home main :is(h1, h2, h3), .overview-page :is(h1, h2, h3) { overflow-wrap: anywhere; }
@media (max-width: 370px) {
  body:has(main.overview-page) .site-header { height: auto; }
  body:has(main.overview-page) .nav-shell { height: auto; min-height: 73px; padding-block: 5px; }
  body:has(main.overview-page) .nav-actions { flex: 1; min-width: 0; gap: 8px; }
  body:has(main.overview-page) .nav-actions .text-link { min-width: 0; gap: 6px; }
  body:has(main.overview-page) .nav-actions .text-link > span:first-child { min-width: 0; overflow-wrap: anywhere; }
}