/* Photographic sections use distinct light, dark and open compositions. */
.story-why { background: #fff; color: #152a4b; padding-block: 75px; }
.story-why::before { display: none; }
.story-guide { background: #eff3fa; }
.story-guide > .story-shell { padding-block: 100px; width: 94%; max-width: 1760px; }
.procedure-board { max-width: none; padding-block: 0; }
.procedure-heading { text-align: center; margin-bottom: 45px; }
.procedure-heading h2 { font-size: 44px; line-height: 1.25; letter-spacing: -.045em; margin: 0 0 16px; }
.procedure-heading > p { font-size: 18px; line-height: 1.6; color: #617087; margin: 0; }
.procedure-cards { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin-bottom: 35px; }
.procedure-step { width: 100%; display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; gap: 0; border: 0; box-shadow: none; border-radius: 20px; overflow: hidden; background: #fff; }
.procedure-step:nth-child(even) { margin: 0; background: #103d91; }
.procedure-step-copy { padding: 34px 30px 28px; min-height: 260px; }
.procedure-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 0; background: #e1f2ff; }
.procedure-number { font-size: 25px; margin-bottom: 20px; }
.procedure-step h3 { font-size: clamp(25px,1.75vw,32px); margin-bottom: 15px; }
.procedure-step p { font-size: 16px; line-height: 1.65; }
.procedure-board > .story-button { display: flex; width: fit-content; margin-inline: auto; }
@media (min-width: 1440px) {
 .story-guide.reveal-procedure > .story-shell { min-height: calc(100svh + 2400px); }
 .reveal-procedure .procedure-board { position: sticky; top: 30px; }
 .reveal-procedure .procedure-heading { margin-bottom: 30px; }
 .reveal-procedure .procedure-step-copy { min-height: 240px; padding: 28px 26px 24px; }
 .reveal-procedure .procedure-photo { max-height: max(140px,calc(100svh - 510px)); }
}
@media (min-width: 1440px) and (max-height: 799px) {
 .reveal-procedure .procedure-heading h2 { font-size: 34px; margin-bottom: 10px; }
 .reveal-procedure .procedure-heading { margin-bottom: 20px; }
 .reveal-procedure .procedure-step-copy { min-height: 220px; padding: 22px 26px; }
 .reveal-procedure .procedure-number { margin-bottom: 12px; }
 .reveal-procedure .procedure-photo { max-height: max(140px,calc(100svh - 470px)); }
}
@media (max-width: 1439px) {
 .story-guide > .story-shell { width: 100%; max-width: none; }
 .procedure-heading { padding-inline: 24px; }
 .procedure-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw,440px); gap: 24px; padding-inline: max(11vw,calc((100vw - 440px)/2)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
 .procedure-cards::-webkit-scrollbar { display: none; }
 .procedure-cards.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
 .procedure-step { scroll-snap-align: center; }
 .procedure-photo { user-select: none; -webkit-user-drag: none; }
 .procedure-cards:focus-visible { outline: 2px solid #103d91; outline-offset: 5px; }
}
.comparison-band { background: radial-gradient(ellipse at 70% 45%,#1d4c88,#081a34 75%); }
.comparison-band #comparison { width: min(1440px,100%); min-height: 720px; padding-block: 80px; column-gap: 55px; }
.comparison-band .comparison-hero-copy h2 { font-size: clamp(38px,3.4vw,54px); font-weight: 700; }
.comparison-band .comparison-carousel { --comparison-height: 510px; --comparison-columns: 1.15fr 1fr; --comparison-gap: 25px; --comparison-title-height: 150px; --comparison-other-height: 130px; }
.comparison-band .comparison-slide { height: var(--comparison-height); grid-template-columns: var(--comparison-columns); align-items: center; gap: var(--comparison-gap); }
.comparison-band .comparison-watch img { height: 470px; width: 100%; }
.comparison-band .comparison-prices, .comparison-band .comparison-fixed-labels { height: var(--comparison-height); display: grid; grid-template-rows: var(--comparison-title-height) var(--comparison-other-height) 1fr; gap: 0; text-align: left; }
.comparison-band .comparison-watch-name { position: static; grid-row: 1; align-self: center; min-height: 0; font-size: 27px; line-height: 1.4; font-weight: 650; word-break: keep-all; }
.comparison-band .comparison-other, .comparison-band .comparison-ours { position: static; margin: 0; padding-top: 32px; align-self: start; }
.comparison-band .comparison-other { grid-row: 2; }
.comparison-band .comparison-ours { grid-row: 3; }
.comparison-band .comparison-label-grid { position: absolute; top: 0; left: 0; right: 0; height: var(--comparison-height); display: grid; grid-template-columns: var(--comparison-columns); gap: var(--comparison-gap); pointer-events: none; }
.comparison-band .comparison-fixed-labels { position: static; grid-column: 2; font-size: 16px; font-weight: 400; color: #bed0eb; }
.comparison-band .comparison-fixed-labels > span:first-child { grid-row: 2; align-self: start; }
.comparison-band .comparison-fixed-labels > span:last-child { grid-row: 3; align-self: start; }
.comparison-band .comparison-other s { font-size: 27px; font-weight: 500; }
.comparison-band .comparison-ours strong { font-size: 56px; margin: 0; }
.comparison-band .comparison-ours strong { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.comparison-band .comparison-hero-copy h2 { word-break: keep-all; }
.comparison-band .comparison-carousel > .comparison-example { position: static; max-width: none; width: 100%; text-align: right; margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: #bed0eb; }
.comparison-band .comparison-end { margin-top: 20px; font-weight: 400; word-break: keep-all; text-align: right; }
.comparison-final-note { display: block; margin-top: 6px; font-size: .85em; color: #a9bdd9; }
@media (max-width: 760px) {
 .comparison-band #comparison { min-height: 0; padding-block: 55px; gap: 24px; }
 .comparison-band .comparison-hero-copy { text-align: left; }
 .comparison-band .comparison-hero-copy h2 { font-size: clamp(28px,8vw,34px); line-height: 1.35; margin-bottom: 22px; }
 .comparison-band .comparison-carousel { --comparison-height: 370px; --comparison-columns: .95fr 1.05fr; --comparison-gap: 12px; --comparison-title-height: 110px; --comparison-other-height: 110px; }
 .comparison-band .comparison-watch img { height: 330px; }
 .comparison-band .comparison-watch-name { font-size: 18px; }
 .comparison-band .comparison-fixed-labels { font-size: 13px; }
 .comparison-band .comparison-other, .comparison-band .comparison-ours { padding-top: 28px; }
 .comparison-band .comparison-other s { font-size: 23px; }
 .comparison-band .comparison-ours strong { font-size: clamp(26px,8.8vw,35px); }
 .comparison-band .comparison-ours small { font-size: 15px; margin-left: 0; }
 .comparison-band .comparison-end { font-size: 13px; word-break: keep-all; }
 .comparison-band .comparison-carousel > .comparison-example { text-align: left; }
}
.journal-band { background: #fff; color: #152a4b; }
.journal-band #journal { padding-block: 110px; }
.journal-label-row { align-items: center; gap: 25px; margin-bottom: 35px; }
.journal-label-row .editorial-section-label { font-size: 42px; line-height: 1.25; letter-spacing: -.04em; margin: 0; }
.journal-label-row .journal-all-link { color: #103d91; border-color: #becdeb; margin: 0; }
.journal-band .journal-card, .journal-band .journal-lead { flex-basis: calc((100% - 36px)/3); border: 0; border-radius: 14px; background: #f1f4f8; color: #152a4b; }
.journal-carousel .journal-grid { gap: 18px; scrollbar-color: #a9bddf #eef2f8; }
.journal-band .journal-card img, .journal-band .journal-lead img { height: 245px; object-fit: cover; }
.journal-band .journal-card h3, .journal-band .journal-lead h3 { font-size: 21px; color: #152a4b; line-height: 1.5; }
.journal-band .journal-copy, .journal-band .journal-lead .journal-copy { padding: 25px; }
.journal-band .journal-card time, .journal-band .feed-caption { color: #6a7b93; }
.journal-band .editorial-controls { color: #103d91; }
.journal-band .editorial-controls button { color: #103d91; border-color: #bdcbe4; background: #fff; }
.story-faq { background: #eef4ff; padding-block: 100px; }
.story-faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 75px; align-items: start; }
.story-faq .story-eyebrow { font-size: 12px; }
.story-faq .story-heading h2 { margin: 20px 0; font-size: 46px; }
.faq-watch-photo { display: block; height: 270px; width: 240px; object-fit: contain; margin: 25px 0; }
.story-faq-list { border-top: 1px solid #c3d2ec; }
.story-faq-list details { background: transparent; border: 0; border-bottom: 1px solid #c3d2ec; border-radius: 0; padding: 0; margin: 0; }
.story-faq-list summary { padding: 24px 0; font-size: 18px; }
.story-faq-list .story-answer { padding: 0 0 24px; font-size: 16px; }
.story-location { background: #fff; padding-block: 100px; }
.story-location-head { margin-bottom: 35px; }
.story-location-head h2 { font-size: 46px; line-height: 1.2; }
.story-visit-panel { background: #0d2f67; border-radius: 16px; padding: 50px; }
.visit-route-card h3 { font-size: 38px; }
.visit-route-card p { font-size: 20px; }
.story-location .story-visit-layout { border: 0; border-radius: 0; padding: 40px 0 0; box-shadow: none; background: #fff; gap: 60px; }
.story-visit-copy h3 { font-size: 25px; }
.story-visit-hours { border-left: 1px solid #d6e0f0; padding-left: 45px; }
.story-footer-lead { padding-block: 30px 60px; }
@media (max-width: 760px) {
 .story-why, .story-faq, .story-location { padding-block: 65px; }
 .story-guide > .story-shell { padding-block: 65px; }
 .procedure-heading h2 { font-size: 34px; }
 .procedure-heading > p { font-size: 16px; }
 .procedure-cards { grid-auto-columns: 86vw; gap: 16px; padding-inline: 7vw; }
 .procedure-step-copy { min-height: 255px; padding: 30px 25px; }
 .procedure-photo { max-height: none; }
 .procedure-step h3 { font-size: 28px; }
 .procedure-step p { font-size: 16px; }
 .journal-band #journal { padding-block: 65px; }
 .journal-label-row { align-items: start; flex-direction: column; margin-bottom: 25px; }
 .journal-label-row .editorial-section-label { font-size: 34px; }
 .journal-band .journal-card, .journal-band .journal-lead { flex-basis: 86%; }
 .journal-band .journal-card img, .journal-band .journal-lead img { height: 220px; }
 .story-faq-layout { grid-template-columns: 1fr; gap: 35px; }
 .story-faq .story-heading { position: relative; padding-right: 110px; }
 .story-faq .story-heading h2 { font-size: 34px; }
 .faq-watch-photo { position: absolute; right: 0; top: 45px; width: 100px; height: 175px; margin: 0; }
 .story-faq-list summary { font-size: 17px; padding-block: 22px; }
 .story-location-head { display: block; }
 .story-location-head h2 { font-size: 34px; }
 .story-direction-tabs { margin-top: 25px; }
 .story-visit-panel { padding: 30px 22px; }
 .visit-route-card h3 { font-size: 29px; }
 .visit-route-card p { font-size: 18px; }
 .story-location .story-visit-layout { gap: 30px; padding-top: 30px; }
 .story-visit-hours { border-left: 0; border-top: 1px solid #d6e0f0; padding: 30px 0 0; }
}


.why-feature-heading { text-align: center; margin: 0 auto 55px; }
.why-feature-heading h2 { margin: 0 0 20px; font-size: 44px; line-height: 1.25; letter-spacing: -.045em; }
.why-feature-heading p { font-size: 18px; line-height: 1.65; color: #617087; margin: 0; }
.story-why > .story-shell { max-width: none; width: 100%; padding-inline: 0; }
.why-feature-carousel { margin-bottom: 0; }
.why-feature-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(64vw,1100px); gap: 24px; padding-inline: max(18vw,calc((100vw - 1100px)/2)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.why-feature-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.why-feature-track img { user-select: none; -webkit-user-drag: none; }
.why-feature-track::-webkit-scrollbar { display: none; }
.why-feature-card { background: #103d91; border-radius: 22px; overflow: hidden; scroll-snap-align: center; }
.why-feature-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; }
.why-feature-controls { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.why-feature-controls button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #eaf0f9; color: #103d91; cursor: pointer; }
@media (min-width: 761px) and (max-width: 1100px) {
 .why-feature-track { grid-auto-columns: 78vw; padding-inline: 11vw; }
}
@media (max-width: 760px) {
 .why-feature-heading { margin-bottom: 30px; padding-inline: 20px; }
 .why-feature-heading h2 { font-size: 33px; }
 .why-feature-heading p { font-size: 16px; }
 .why-feature-track { grid-auto-columns: 90vw; gap: 14px; padding-inline: 5vw; }
}

.why-feature-card { position: relative; container-type: inline-size; }
.why-card-copy { position: absolute; left: 4%; bottom: 9%; width: 42%; color: #102647; }
.why-feature-card--dark .why-card-copy { color: #fff; }
.why-feature-card--light { background: #e0f0fc; }
.why-feature-card--dark { background: #103d91; }
.why-feature-card--wear .why-card-copy p { max-width: 90%; }
.why-card-copy h3 { margin: 0 0 0.55em; font-size: clamp(17px, 5.2cqw, 56px); line-height: 1.3; font-weight: 800; letter-spacing: -.045em; word-break: keep-all; }
.why-card-copy p { margin: 0; font-size: clamp(10px, 2.7cqw, 25px); line-height: 1.5; letter-spacing: -.035em; word-break: keep-all; }

/* Distinct chapter backgrounds, oversized magazine cards and a single address. */
.trade-section { background: #edf3fb; padding-block: 40px 64px; border-top: 1px solid #d8e3f3; border-bottom: 1px solid #d8e3f3; }
.trade-section .trade-board-top h2 { font-size: clamp(30px,3vw,44px); font-weight: 700; letter-spacing: -.04em; }
.trade-section .trade-board-top { margin-bottom: 24px; }
.trade-section .trade-live { font-size: 24px; font-weight: 800; gap: 10px; }
.trade-section .trade-live-dot { position: relative; width: 10px; height: 10px; }
.trade-section .trade-live-dot::after { content: ''; position: absolute; inset: -5px; border: 2px solid #103d91; border-radius: 50%; animation: trade-live-signal 1.8s ease-out infinite; }
@keyframes trade-live-signal { from { transform: scale(.5); opacity: .7; } to { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trade-section .trade-live-dot::after { animation: none; opacity: .3; } }
.story-why { padding-block: 120px; border-bottom: 1px solid #d8e3f3; }
.reveal-procedure .procedure-step.is-past { transform: translateY(-65px) scale(.94); }
.journal-band { background: #f3f1ec; border-block: 1px solid #e2dfd6; }
.journal-band::before { display: none; }
.journal-band #journal { width: min(1480px,100%); padding-block: 140px; }
.journal-label-row { align-items: end; margin-bottom: 60px; }
.journal-section-label { display: block; color: #103d91; font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.journal-label-row .editorial-section-label { font-size: clamp(42px,4vw,60px); }
.journal-band .journal-label-row h2 { font-size: clamp(42px,4vw,60px); }
.journal-label-row p { font-size: 20px; color: #617087; line-height: 1.65; margin: 22px 0 0; }
.journal-carousel .journal-grid { gap: 28px; padding: 12px 4px 30px; scrollbar-width: none; }
.journal-carousel .journal-grid::-webkit-scrollbar { display: none; }
.journal-band .journal-card, .journal-band .journal-lead { display: flex; flex-direction: column; flex-basis: calc((100% - 56px)/3); min-height: 0; border-radius: 22px; background: #fff; border: 1px solid #e0e4ea; box-shadow: 0 8px 0 #dedfdf; }
.journal-band .journal-card img, .journal-band .journal-lead img { height: 340px; min-height: 0; flex-shrink: 0; object-fit: contain; background: #eaf0f8; }
.journal-band .journal-copy, .journal-band .journal-lead .journal-copy { min-height: 285px; padding: 32px; }
.journal-band .journal-card h3, .journal-band .journal-lead h3 { font-size: 25px; line-height: 1.5; margin: 20px 0 28px; word-break: keep-all; }
.journal-band .journal-page { font-size: 30px; color: #103d91; }
.journal-band .journal-category { font-size: 13px; }
.journal-band .journal-read { font-size: 15px; }
.story-faq { background: #102b51; color: #fff; padding-block: 140px; }
.story-faq > .story-shell { width: min(1380px,100%); }
.story-faq .story-heading h2 { font-size: 54px; color: #fff; }
.story-faq .story-heading > p { color: #b9cde7; font-size: 18px; }
.story-faq .story-text-link { color: #c4dcff; margin-top: 24px; }
.story-faq .story-eyebrow { color: #a9c8f3; }
.story-faq-list { border: 0; }
.story-faq-list details { background: #fff; color: #152a4b; border: 0; border-radius: 18px; padding-inline: 28px; margin-bottom: 12px; }
.story-faq-list details[open] { background: #fff; }
.story-faq .story-answer p { color: #52657e; }
.story-faq-list summary { font-size: 20px; padding-block: 24px; }
.story-faq-list .story-answer { padding-bottom: 28px; line-height: 1.8; }
.story-location { background: #f8faff; padding-block: 140px 170px; border-bottom: 1px solid #d8e3f3; }
.story-location > .story-shell { width: min(1380px,100%); }
.jongno-location { display: grid; grid-template-columns: 1fr 1.15fr; gap: 90px; align-items: center; }
.jongno-heading h2 { font-size: clamp(40px,3.5vw,56px); line-height: 1.3; letter-spacing: -.045em; margin: 24px 0; color: #152a4b; }
.jongno-heading p { font-size: 19px; color: #617087; }
.jongno-address-card { position: relative; background: #fff; border: 2px solid #cddcf2; padding: 65px 55px 45px; border-radius: 32px; box-shadow: 10px 10px 0 #e6edf8; }
.jongno-pin { position: absolute; top: -30px; right: 36px; width: 65px; height: 65px; border-radius: 50%; display: grid; place-items: center; background: #103d91; color: #fff; font-size: 45px; }
.jongno-address-label { color: #103d91; font-size: 13px; letter-spacing: .08em; font-weight: 700; }
.jongno-address-card address { font-style: normal; font-size: 32px; line-height: 1.4; color: #152a4b; margin: 25px 0 35px; }
.jongno-address-card strong { font-size: clamp(40px,3.5vw,56px); letter-spacing: -.045em; }
.jongno-address-card address > span { display: block; font-size: 23px; color: #617087; margin-top: 12px; }
.jongno-map-links { display: flex; gap: 12px; flex-wrap: wrap; }
.jongno-map-links a { padding: 13px 19px; background: #edf3fb; color: #103d91; border-radius: 12px; font-size: 15px; font-weight: 700; }
.story-footer { padding-block: 70px 110px; }
.location-sale-bar { position: fixed; z-index: 90; bottom: 24px; left: 50%; width: min(602px,calc(70% - 25.2px)); display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #c4d9f8; border-radius: 18px; background: #fff; color: #152a4b; box-shadow: 0 12px 40px #071b3d24; opacity: 0; visibility: hidden; transform: translate(-50%,calc(100% + 50px)); transition: transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,visibility .5s; }
.location-sale-bar.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.location-sale-bar > div { flex: 1; min-width: 0; word-break: keep-all; }
.location-sale-bar strong { display: block; font-size: 17px; }
.location-sale-bar div > span { display: block; font-size: 13px; margin-top: 6px; color: #617087; }
.location-sale-bar > a { flex-shrink: 0; background: #103d91; color: #fff; font-size: 16px; font-weight: 700; padding: 18px 20px; border-radius: 12px; word-break: keep-all; }
.location-sale-bar button { flex: 0 0 28px; border: 0; background: transparent; color: #7b889a; font-size: 28px; width: 28px; height: 40px; cursor: pointer; }
@media (max-width: 1000px) {
 .journal-band .journal-card, .journal-band .journal-lead { flex-basis: 65%; }
 .jongno-location { gap: 35px; }
 .jongno-address-card { padding: 55px 30px 35px; }
}
@media (max-width: 760px) {
 .trade-section { padding-block: 30px 45px; }
 .trade-section .trade-live { font-size: 20px; gap: 8px; }
 .story-why { padding-block: 75px; }
 .journal-band #journal { padding-block: 85px; }
 .journal-label-row { gap: 28px; margin-bottom: 35px; align-items: start; }
 .journal-label-row .editorial-section-label { font-size: 40px; }
 .journal-band .journal-label-row h2 { font-size: 40px; }
 .journal-label-row p { font-size: 17px; }
 .journal-band .journal-card, .journal-band .journal-lead { flex-basis: 90%; }
 .journal-band .journal-card img, .journal-band .journal-lead img { height: 300px; }
 .journal-band .journal-copy, .journal-band .journal-lead .journal-copy { padding: 26px; min-height: 275px; }
 .journal-band .journal-card h3, .journal-band .journal-lead h3 { font-size: 23px; }
 .story-faq { padding-block: 85px; }
 .story-faq .story-heading h2 { font-size: 40px; }
 .story-faq-list details { padding-inline: 20px; }
 .story-faq-list summary { font-size: 17px; }
 .story-location { padding-block: 90px 120px; }
 .jongno-location { grid-template-columns: 1fr; gap: 45px; }
 .jongno-heading h2 { font-size: 38px; }
 .jongno-address-card address { font-size: 26px; }
 .jongno-address-card strong { font-size: 39px; }
 .location-sale-bar { bottom: 14px; gap: 10px; padding: 10px; border-radius: 16px; }
 .location-sale-bar > div { display: none; }
 .location-sale-bar > a { flex: 1; min-width: 0; font-size: 15px; padding: 14px 10px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
 .location-sale-bar { transition: none; }
}
