/* [소개 페이지의 장면과 읽기 흐름 / About scenes and reading rhythm]
   기존 foundation을 사용하며 이 파일은 story 소유 요소만 다룹니다.
   Reuse the existing foundation and keep this layer scoped to story elements. */
.sejong-story {
    --story-ink: var(--color-detail-161a21);
    --story-muted: var(--color-detail-555e69);
    --story-accent: var(--color-detail-08627b);
    color: var(--story-ink);
    font-size: max(var(--text-min), 18px);
    line-height: 1.75;
}
.sejong-story h1,
.sejong-story h2,
.sejong-story h3,
.sejong-story p,
.sejong-story figure {
    margin: 0;
}
.sejong-story h1,
.sejong-story h2 {
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 1.22;
    overflow-wrap: break-word;
}
.sejong-story h2 {
    font-size: max(var(--text-min), clamp(36px, 4.5vw, 64px));
}
.sejong-story h3 {
    font-size: max(var(--text-min), clamp(26px, 2.2vw, 32px));
    font-weight: 650;
    line-height: 1.4;
}
.sejong-story p {
    line-height: 1.75;
}
.sejong-story figcaption {
    margin-top: 12px;
    color: var(--story-muted);
    font-size: max(var(--text-min), 16px);
    line-height: 1.6;
}
.sejong-story .story-kicker {
    margin-bottom: 24px;
    color: var(--story-muted);
    font-size: max(var(--text-min), 16px);
    font-weight: 600;
}
.story-opening {
    padding-top: clamp(56px, 7vw, 112px);
    padding-bottom: 56px;
}
.story-opening h1 {
    max-width: 1100px;
    font-size: max(var(--text-min), clamp(48px, 6.8vw, 100px));
}
.story-opening-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-top: 40px;
}
.story-opening-bottom p {
    max-width: 680px;
    color: var(--story-muted);
    font-size: max(var(--text-min), 20px);
}
.story-scroll-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 0;
    border: 0;
    background: var(--color-detail-j5afio);
    color: var(--story-ink);
    font-size: max(var(--text-min), 18px);
    font-weight: 600;
}
.story-scroll-button .material-icon {
    transform: rotate(180deg);
}
.sejong-story .story-hero-media {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}
.story-hero-frame {
    overflow: hidden;
    -webkit-clip-path: inset(0 var(--story-media-inset, 0%) 0);
    clip-path: inset(0 var(--story-media-inset, 0%) 0);
}
.story-hero-frame img {
    width: 100%;
    height: auto;
    max-height: 820px;
    aspect-ratio: 1160 / 680;
    object-fit: cover;
    object-position: center;
    transform: scale(var(--story-media-scale, 1));
}
.story-scene {
    padding-block: clamp(96px, 11vw, 176px);
    scroll-margin-top: 112px;
}
.story-experience,
.story-history-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    grid-gap: clamp(48px, 9vw, 144px);
    gap: clamp(48px, 9vw, 144px);
}
.story-sticky-copy {
    position: -webkit-sticky;
    position: sticky;
    top: 136px;
}
.story-sticky-copy > p:not(.story-kicker),
.story-company-stage > div > p:not(.story-kicker) {
    margin-top: 32px;
    color: var(--story-muted);
}
.story-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding-block: 10px;
    color: inherit;
    font-size: max(var(--text-min), 18px);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    text-underline-offset: 5px;
}
.story-sticky-copy > .story-link,
.story-company-stage > div > .story-link {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 24px;
}
.story-sticky-copy > .story-link + .story-link {
    margin-top: 0;
}
.story-experience-list > article {
    padding-block: 44px;
    border-top: 1px solid var(--border-default);
}
.story-experience-list > article:first-child {
    padding-top: 0;
    border-top: 0;
}
.story-experience-list > article:last-child {
    padding-bottom: 0;
}
.story-experience-list p {
    margin-top: 20px;
    color: var(--story-muted);
}
.story-experience-list .story-link {
    margin-top: 18px;
}
.story-emphasis {
    transition: color 240ms ease;
}
.story-scene.is-current-scene .story-emphasis {
    color: var(--story-accent);
}
.story-spaces {
    background: var(--color-detail-f3f5f7);
}
.story-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    grid-gap: clamp(32px, 7vw, 112px);
    gap: clamp(32px, 7vw, 112px);
}
.story-section-heading > p,
.story-section-heading > div > p:not(.story-kicker) {
    max-width: 480px;
    color: var(--story-muted);
}
.story-space-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    min-width: 0;
    margin: 52px 0 32px;
    padding: 0;
    border: 0;
}
.story-space-picker legend {
    margin-bottom: 12px;
    padding: 0;
    color: var(--story-muted);
    font-size: max(var(--text-min), 16px);
}
.story-space-choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    cursor: pointer;
}
.story-space-choice input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--story-accent);
}
.story-space-choice span {
    color: var(--story-ink);
    font-size: max(var(--text-min), 18px);
    font-weight: 600;
}
.story-space-choice input:checked + span {
    color: var(--story-accent);
}
.story-space-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
    align-items: center;
    grid-gap: clamp(32px, 5vw, 80px);
    gap: clamp(32px, 5vw, 80px);
}
.story-space-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1160 / 680;
    object-fit: cover;
}
.story-space-illustration img {
    background: var(--color-detail-e9edf0);
    object-fit: contain;
}
.story-space-copy .story-kicker {
    margin-bottom: 12px;
}
.story-space-copy h3 {
    font-size: max(var(--text-min), clamp(30px, 3vw, 42px));
}
.story-space-copy > p:not(.story-kicker) {
    margin-top: 20px;
    color: var(--story-muted);
}
.story-space-copy .story-space-use {
    font-size: max(var(--text-min), 16px);
}
.story-space-copy .story-link {
    margin-top: 20px;
}
.story-space-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
}
.story-space-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 32px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border-default);
}
.story-company-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    grid-gap: clamp(40px, 7vw, 112px);
    gap: clamp(40px, 7vw, 112px);
}
.story-company-stage img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--color-black);
}
.story-company-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 0 48px;
    gap: 0 48px;
    margin: 64px 0 0;
    padding: 0;
    list-style: none;
}
.story-company-list li {
    border-bottom: 1px solid var(--border-default);
}
.story-company-list a {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 76px;
    padding-block: 18px;
    color: inherit;
    text-decoration: none;
}
.story-company-list a > span:first-child {
    flex: 1 1;
    font-size: max(var(--text-min), 20px);
    font-weight: 600;
}
.story-company-genre {
    color: var(--story-muted);
    font-size: max(var(--text-min), 16px);
}
.story-history {
    background: var(--color-detail-f7f6f3);
}
.story-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}
.story-timeline li {
    padding-block: 40px;
    border-top: 1px solid var(--border-default);
}
.story-timeline li:first-child {
    padding-top: 0;
    border-top: 0;
}
.story-timeline li:last-child {
    padding-bottom: 0;
}
.story-timeline .story-year {
    margin-bottom: 20px;
    font-size: max(var(--text-min), clamp(52px, 6.5vw, 88px));
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.story-timeline h3 {
    font-size: max(var(--text-min), 24px);
}
.story-timeline p:not(.story-year) {
    margin-top: 16px;
    color: var(--story-muted);
}
.story-identity {
    --story-muted: var(--color-detail-c1c8d0);
    color: var(--color-white);
    background: var(--color-detail-171b22);
}
.story-identity .story-link {
    margin-top: 24px;
}
.story-identity-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: clamp(24px, 7vw, 112px);
    gap: clamp(24px, 7vw, 112px);
    margin-top: 88px;
}
.story-identity-channel {
    min-width: 0;
}
.story-identity-symbol {
    display: block;
    width: 100%;
    max-width: 290px;
    aspect-ratio: 1;
    margin-bottom: 32px;
}
.story-identity-sky .story-identity-symbol {
    border-radius: 50%;
    background: var(--sky);
}
.story-identity-earth .story-identity-symbol {
    background: var(--earth);
    -webkit-clip-path: polygon(0 55%, 100% 55%, 100% 85%, 0 85%);
    clip-path: polygon(0 55%, 100% 55%, 100% 85%, 0 85%);
}
.story-identity-human .story-identity-symbol {
    background: var(--human);
    -webkit-clip-path: polygon(40% 0, 60% 0, 100% 100%, 75% 100%, 50% 38%, 25% 100%, 0 100%);
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 75% 100%, 50% 38%, 25% 100%, 0 100%);
}
.story-identity-channel strong {
    display: block;
    font-size: max(var(--text-min), 26px);
    font-weight: 500;
}
.story-identity-channel > span:last-child {
    display: block;
    margin-top: 8px;
    color: var(--story-muted);
    font-size: max(var(--text-min), 18px);
}
.story-value-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 0 64px;
    gap: 0 64px;
    margin-top: 64px;
}
.story-value-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 32px;
    border-top: 1px solid var(--border-default);
    color: inherit;
    text-decoration: none;
}
.story-value-links h3 {
    font-size: max(var(--text-min), 26px);
}
.story-value-links p {
    margin-top: 12px;
    color: var(--story-muted);
}
.story-closing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
    margin-top: 88px;
    padding-top: 48px;
    border-top: 1px solid var(--border-default);
}
.story-closing > p {
    flex: 1 1 100%;
    margin-bottom: 12px;
    font-size: max(var(--text-min), clamp(28px, 3vw, 40px));
    font-weight: 600;
    letter-spacing: -0.04em;
}
.story-primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 56px;
    padding: 14px 24px;
    background: var(--story-ink);
    color: var(--color-white);
    font-size: max(var(--text-min), 18px);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}
.sejong-story :is(a, button, input):focus-visible {
    outline: var(--focus-width) solid var(--border-focus);
    outline-offset: var(--focus-offset);
}
.story-identity a:focus-visible {
    outline-color: var(--border-focus);
}
@media (hover: hover) and (pointer: fine) {
    .story-link:hover,
    .story-company-list a:hover > span:first-child,
    .story-value-links a:hover h3 {
        text-decoration: underline;
        text-underline-offset: 5px;
    }
    .story-scroll-button:hover {
        color: var(--story-accent);
    }
    .story-primary-link:hover {
        background: var(--color-detail-303a47);
    }
}
/* [좁은 화면의 순서와 정적 대체 / Narrow layout and static fallback]
   이미지·본문·행동을 읽기 순서로 놓고 작은 화면에서는 고정을 해제합니다.
   Keep imagery, copy and actions in reading order and release sticky panels on phones. */
@media (max-width: 900px) {
    .story-opening-bottom,
    .story-section-heading,
    .story-company-stage {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-gap: 32px;
        gap: 32px;
    }
    .story-opening-bottom {
        justify-items: start;
    }
    .story-experience,
    .story-history-layout {
        gap: 48px;
    }
    .story-space-panel {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: start;
        gap: 28px;
    }
    .story-company-stage figure {
        max-width: 680px;
    }
    .story-company-list {
        gap: 0 28px;
    }
}
@media (max-width: 767px) {
    .story-opening {
        padding-block: 48px 36px;
    }
    .story-opening h1 {
        font-size: max(var(--text-min), clamp(42px, 8.2vw, 60px));
    }
    .story-opening-bottom {
        margin-top: 28px;
        gap: 20px;
    }
    .story-opening-bottom p {
        font-size: max(var(--text-min), 18px);
    }
    .sejong-story .story-kicker {
        margin-bottom: 18px;
    }
    .story-hero-frame {
        -webkit-clip-path: none;
        clip-path: none;
    }
    .story-hero-frame img {
        aspect-ratio: 5 / 4;
        transform: none;
        object-position: 46% center;
    }
    .story-scene {
        padding-block: 88px;
    }
    .story-experience,
    .story-history-layout,
    .story-space-panel,
    .story-company-list,
    .story-value-links {
        grid-template-columns: minmax(0, 1fr);
    }
    .story-sticky-copy {
        position: static;
    }
    .story-experience-list > article:first-child {
        padding-top: 32px;
        border-top: 1px solid var(--border-default);
    }
    .story-space-picker {
        margin-top: 36px;
        gap: 8px 20px;
    }
    .story-space-choice {
        flex-basis: calc(50% - 10px);
    }
    .story-space-copy .story-kicker {
        margin-bottom: 12px;
    }
    .story-company-list {
        margin-top: 40px;
    }
    .story-identity-channels {
        gap: 20px;
        margin-top: 48px;
    }
    .story-identity-symbol {
        margin-bottom: 24px;
    }
    .story-identity-channel strong {
        font-size: max(var(--text-min), 22px);
    }
    .story-identity-channel > span:last-child {
        font-size: max(var(--text-min), 16px);
    }
    .story-value-links {
        margin-top: 40px;
    }
    .story-value-links a {
        padding-block: 28px;
    }
    .story-closing {
        margin-top: 48px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .story-hero-frame {
        -webkit-clip-path: none;
        clip-path: none;
    }
    .story-hero-frame img {
        transform: none;
    }
    .story-emphasis {
        transition: none;
    }
    .story-sticky-copy {
        position: static;
    }
}
/* [여정을 준비하는 화면 / Screens for planning a visit and choosing a venue]
   입력의 위치를 유지하고 결과·안내·다음 행동을 읽는 순서대로 배치합니다.
   Keep controls stable and order results, guidance and next actions for reading. */
.journey-page {
    --journey-line: var(--color-detail-dce3e6);
    --journey-soft: var(--color-detail-f3f7f8);
    --journey-accent: var(--color-detail-075f7b);
    padding-bottom: 6rem;
}
.journey-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin: 0 0 3rem;
}
.journey-intro > p {
    margin: 0;
    color: var(--color-detail-69767e);
    font-size: max(var(--text-min), clamp(1.75rem, 3vw, 2.75rem));
    line-height: 1.45;
    letter-spacing: -0.035em;
}
.journey-intro strong {
    color: var(--ink, var(--color-detail-172329));
    font-weight: 700;
}
.journey-intro > span {
    max-width: 24rem;
    color: var(--color-detail-4d5c65);
    font-size: max(var(--text-min), var(--text-body));
}
.journey-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: flex-start;
    grid-gap: clamp(2rem, 5vw, 5rem);
    gap: clamp(2rem, 5vw, 5rem);
}
.journey-editor,
.journey-result,
.comparison-card {
    min-width: 0;
}
.journey-editor > h2 {
    margin: 0 0 2rem;
    font-size: max(var(--text-min), 1.5rem);
    letter-spacing: -0.025em;
}
.journey-field {
    display: grid;
    grid-gap: 0.65rem;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
    min-width: 0;
}
.journey-field label {
    font-size: max(var(--text-min), var(--text-body));
    font-weight: 600;
}
.journey-field input,
.journey-field select,
.journey-share-address input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    box-sizing: border-box;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-control);
    padding: 0.8rem 0.85rem;
    background: var(--color-white);
    color: var(--color-detail-172329);
    font: inherit;
    font-size: max(var(--text-min), var(--text-body));
    line-height: 1.5;
}
.journey-field select {
    padding-right: 2rem;
    text-overflow: ellipsis;
}
.journey-field select:disabled {
    opacity: 100%;
    color: var(--color-detail-53626d);
    background: var(--color-detail-f1f4f5);
    cursor: default;
}
.journey-field-pair {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
}
.journey-field-pair .journey-field {
    margin-bottom: 0.5rem;
}
.journey-meta,
.journey-field p,
.journey-status {
    font-size: max(var(--text-min), var(--text-sm));
    color: var(--color-detail-53616b);
    line-height: 1.65;
}
.journey-field-help {
    margin: 0 0 1.5rem;
}
.journey-field p {
    margin: 0;
}
.journey-submit {
    width: 100%;
    justify-content: center;
}
.journey-help {
    margin-top: 1.25rem;
}
.journey-notice {
    margin-bottom: 1.5rem;
    border-left: 1px solid var(--border-default);
    padding: 0.7rem 1rem;
    background: var(--color-detail-fff9ec);
    color: var(--color-detail-5c4723);
}
.journey-notice p {
    margin: 0;
    font-size: max(var(--text-min), var(--text-sm));
}
/* [선택한 일정의 결과 / Results for the chosen itinerary]
   시간 수치를 임의로 만들지 않고 준비 순서와 등록 회차를 표시합니다.
   Use preparation stages and real catalog sessions without inventing timings. */
.journey-result {
    border-radius: var(--radius-dialog);
    padding: clamp(1.5rem, 3vw, 2.75rem);
    background: var(--journey-soft);
}
.journey-empty {
    display: flex;
    min-height: 26rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.journey-empty-icon {
    display: inline-flex;
    margin-bottom: 1.5rem;
    color: var(--journey-accent);
}
.journey-empty h2,
.journey-itinerary > h2 {
    margin: 0 0 1rem;
    font-size: max(var(--text-min), clamp(1.6rem, 2.3vw, 2.2rem));
    line-height: 1.4;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.journey-empty > p {
    margin: 0 0 1.5rem;
}
.journey-date {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1rem;
    color: var(--journey-accent);
    font-weight: 650;
}
.journey-destination {
    margin: 0 0 2rem;
    color: var(--color-detail-53616b);
    font-size: max(var(--text-min), var(--text-sm));
}
.journey-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.journey-timeline > li {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    grid-gap: 1.25rem;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-default);
}
.journey-step-label {
    padding-top: 0.1rem;
    color: var(--journey-accent);
    font-size: max(var(--text-min), var(--text-sm));
    font-weight: 650;
}
.journey-timeline h3 {
    margin: 0 0 0.6rem;
    font-size: max(var(--text-min), 1.25rem);
    line-height: 1.5;
}
.journey-timeline p {
    margin: 0 0 0.6rem;
    color: var(--color-detail-4a5963);
    font-size: max(var(--text-min), var(--text-body));
}
.journey-timeline .text-link,
.comparison-facts .text-link {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.5rem;
    font-size: max(var(--text-min), var(--text-sm));
}
.journey-timeline .text-link svg,
.comparison-facts .text-link svg {
    flex: 0 0 auto;
}
.journey-parking {
    margin: 0.5rem 0 1.5rem;
}
/* [저장과 공유 / Saving and sharing]
   읽기 전용 주소와 네이티브 버튼을 사용해 복사 실패에도 계획을 남길 수 있습니다.
   A visible read-only address keeps sharing available when clipboard access fails. */
.journey-share {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    grid-gap: 1.5rem 2rem;
    gap: 1.5rem 2rem;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--journey-line);
}
.journey-share h2,
.journey-consultation h2 {
    margin: 0 0 0.6rem;
    font-size: max(var(--text-min), clamp(1.4rem, 2.2vw, 1.75rem));
    letter-spacing: -0.025em;
}
.journey-share p,
.journey-consultation p {
    margin: 0;
    color: var(--color-detail-53616b);
}
.journey-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.journey-share-actions .button:disabled {
    background: var(--color-detail-e1e7e9);
    color: var(--color-detail-66727a);
    border-color: var(--border-default);
    cursor: not-allowed;
}
.journey-share-address {
    grid-column: 1 / -1;
    display: grid;
    grid-gap: 0.5rem;
    gap: 0.5rem;
    min-width: 0;
}
.journey-share-address label {
    font-size: max(var(--text-min), var(--text-sm));
}
.journey-share-address input {
    font-size: max(var(--text-min), var(--text-sm));
}
.journey-status {
    min-height: 1.65em;
    margin: 1.5rem 0 0;
}
.journey-saved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--journey-line);
    padding: 0 0 1.5rem;
    margin-bottom: 2rem;
}
.journey-saved > div {
    display: grid;
    grid-gap: 0.5rem;
    gap: 0.5rem;
    min-width: 0;
}
.journey-saved strong {
    font-size: max(var(--text-min), var(--text-sm));
    font-weight: 500;
    color: var(--color-detail-53616b);
}
.journey-text-button {
    min-height: 3rem;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--color-detail-j5afio);
    color: var(--color-detail-334b5a);
    font: inherit;
    font-size: max(var(--text-min), var(--text-sm));
    text-decoration: underline;
    text-underline-offset: 0.25em;
    cursor: pointer;
}
.journey-text-button:hover {
    background: var(--color-detail-eef3f5);
}
/* [가로 비교와 좁은 화면의 읽기 순서 / Comparison columns and narrow-screen reading order]
   공간별 정보는 같은 순서로 정렬하고 모바일에서는 한 공간씩 이어집니다.
   Align comparable facts on desktop and stack complete venue records on mobile. */
.comparison-picker {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: var(--surface-radius-panel);
    background: var(--journey-soft);
}
.comparison-picker fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
    margin: 0;
}
.comparison-picker legend {
    margin-bottom: 1rem;
    padding: 0;
    font-size: max(var(--text-min), var(--text-body));
    font-weight: 650;
}
.comparison-picker legend span {
    margin-left: 0.6rem;
    color: var(--color-detail-53616b);
    font-size: max(var(--text-min), var(--text-sm));
    font-weight: 400;
}
.comparison-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.comparison-choice {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-control);
    padding: 0.6rem 0.85rem;
    background: var(--color-white);
    cursor: pointer;
    font-size: max(var(--text-min), var(--text-sm));
}
.comparison-choice:has(input:checked) {
    border-color: var(--stroke-selected);
    background: var(--color-detail-e6f3f8);
    color: var(--color-detail-054e66);
}
.comparison-choice input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    accent-color: var(--journey-accent);
}
.comparison-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 1.5rem;
}
.comparison-status-row p {
    margin: 0;
    font-weight: 600;
}
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}
.comparison-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--journey-line);
    border-radius: var(--surface-radius-panel);
    overflow: hidden;
    background: var(--color-white);
}
.comparison-card > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 4.8;
    object-fit: cover;
}
.comparison-heading {
    padding: 1.5rem 1.5rem 0;
}
.comparison-heading p {
    margin: 0 0 0.35rem;
    font-size: max(var(--text-min), var(--text-sm));
    color: var(--color-detail-53616b);
}
.comparison-heading h2 {
    margin: 0 0 1rem;
    font-size: max(var(--text-min), 1.5rem);
}
.comparison-facts {
    margin: 0;
    padding: 0 1.5rem;
}
.comparison-facts > div {
    min-height: 7.25rem;
    border-top: 1px solid var(--border-default);
    padding: 1rem 0;
}
.comparison-facts dt {
    color: var(--color-detail-53616b);
    font-size: max(var(--text-min), var(--text-sm));
    margin-bottom: 0.4rem;
}
.comparison-facts dd {
    margin: 0;
    font-size: max(var(--text-min), var(--text-body));
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.comparison-facts strong {
    display: block;
    font-size: max(var(--text-min), 1.5rem);
    font-weight: 650;
}
.comparison-facts dd > span {
    display: block;
    color: var(--color-detail-53616b);
    font-size: max(var(--text-min), var(--text-sm));
}
.comparison-actions {
    display: grid;
    grid-gap: 0.6rem;
    gap: 0.6rem;
    padding: 0.5rem 1.5rem 1.5rem;
    margin-top: auto;
}
.comparison-actions .button {
    display: flex;
    justify-content: space-between;
    min-width: 0;
    white-space: normal;
}
.comparison-actions .text-link {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comparison-empty {
    min-height: 20rem;
    border-top: 1px solid var(--journey-line);
    border-bottom: 1px solid var(--journey-line);
}
.journey-consultation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-gap: 2rem;
    gap: 2rem;
    padding: 2rem;
    margin: 3rem 0 1.5rem;
    border-radius: var(--surface-radius-panel);
    background: var(--journey-soft);
}
.journey-consultation > div:last-child {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
    align-content: start;
}
/* [모바일과 확대 글자 / Mobile layouts and enlarged text]
   작은 글자로 줄이지 않고 입력과 비교 정보를 세로로 재배치합니다.
   Reflow controls and comparisons vertically instead of shrinking type. */
@media (max-width: 1050px) {
    .journey-layout {
        gap: 2rem;
    }
    .journey-field-pair {
        grid-template-columns: minmax(0, 1fr);
    }
    .journey-timeline > li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.65rem;
    }
    .journey-share {
        grid-template-columns: minmax(0, 1fr);
    }
    .comparison-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .journey-intro {
        display: block;
        margin-bottom: 2rem;
    }
    .journey-intro > span {
        display: block;
        margin-top: 1rem;
    }
    .journey-layout,
    .comparison-grid,
    .journey-consultation {
        grid-template-columns: minmax(0, 1fr);
    }
    .journey-result {
        padding: 1.5rem;
    }
    .journey-empty {
        min-height: 18rem;
    }
    .journey-share-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .journey-share-actions .button {
        justify-content: center;
    }
    .journey-saved {
        align-items: flex-start;
    }
    .comparison-picker {
        display: block;
        padding: 1.25rem;
    }
    .comparison-picker > button {
        margin-top: 1rem;
    }
    .comparison-choices {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .comparison-facts > div {
        min-height: 0;
    }
    .journey-consultation {
        padding: 1.5rem;
    }
}
/* [공통 리퀴드 글래스 / Shared liquid glass]
   맑은 굴절 테두리와 불투명한 중심을 분리합니다. / Separate the clear refracting rim from the frosted center. */
.liquid-glass {
    --glass-tint: color-mix(in srgb, var(--color-white) calc(var(--glass-opacity) * 100%), var(--color-transparent));
    --glass-solid: var(--surface-default);
    --glass-sheen-start: color-mix(in srgb, var(--color-white) 32%, var(--color-transparent));
    --glass-sheen-middle: color-mix(in srgb, var(--color-white) 8%, var(--color-transparent));
    --glass-sheen-end: color-mix(in srgb, var(--color-white) 28%, var(--color-transparent));
    --glass-reflection-glow: color-mix(in srgb, var(--color-white) 70%, var(--color-transparent));
    --glass-reflection-edge: color-mix(in srgb, var(--color-white) 90%, var(--color-transparent));
    --glass-reflection-rim: color-mix(in srgb, var(--color-white) 98%, var(--color-transparent));
    --glass-reflection-center: color-mix(in srgb, var(--color-white) 56%, var(--color-transparent));
    --glass-edge-shadow: color-mix(in srgb, var(--color-black) 12%, var(--color-transparent));
    position: relative;
    z-index: 0;
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-dialog);
    color: var(--text-primary);
    background: var(--color-transparent);
    box-shadow: var(--glass-shadow),
        inset 0 1px 0 var(--glass-reflection-rim),
        inset 0 -2px 1px var(--glass-edge-shadow);
}
/* [서랍형의 짙고 두꺼운 유리 / Denser, thicker glass for the drawer variant] */
.liquid-glass[data-glass-variant="drawer"] {
    --glass-opacity: var(--glass-drawer-opacity);
    --glass-refraction: var(--glass-drawer-refraction);
    --glass-blur: var(--glass-drawer-blur);
    --glass-thickness: var(--glass-drawer-thickness);
}
/* [히어로 정보의 유리 / Glass for hero information] */
.liquid-glass[data-glass-variant="hero"] {
    --glass-opacity: var(--glass-hero-opacity);
    --glass-refraction: var(--glass-hero-refraction);
    --glass-blur: var(--glass-hero-blur);
    --glass-thickness: var(--glass-hero-thickness);
}
/* [알림소형모달과 같은 렌즈의 흰 유리 / White glass with the notification capsule's lens]
   인라인 안내에는 옅은 안쪽 경계와 작은 그림자를 사용합니다.
   Inline notices use a soft inset rim and a compact shadow. */
.liquid-glass[data-glass-variant="white"] {
    --glass-opacity: var(--glass-white-opacity);
    --glass-refraction: var(--glass-white-refraction);
    --glass-blur: var(--glass-white-blur);
    --glass-thickness: var(--glass-white-thickness);
    --glass-shadow: var(--surface-shadow-elevated);
    border: 0;
    box-shadow: var(--glass-shadow),
        inset 0 0 0 var(--stroke-width) var(--glass-edge),
        inset 0 1px 0 var(--glass-reflection-rim),
        inset 0 -2px 1px var(--glass-edge-shadow);
}
/* [브랜드 오프블랙 렌즈와 절제된 반사 / Brand off-black lens with restrained reflections]
   같은 굴절 지도를 사용하며 재질 밀도와 반사광을 함께 바꿉니다.
   Reuse the refraction map while changing material density and reflected light. */
.liquid-glass[data-glass-variant="black"] {
    --glass-opacity: var(--glass-black-opacity);
    --glass-refraction: var(--glass-black-refraction);
    --glass-blur: var(--glass-black-blur);
    --glass-thickness: var(--glass-black-thickness);
    --glass-tint: color-mix(in srgb, var(--color-glass-ink) calc(var(--glass-opacity) * 100%), var(--color-transparent));
    --glass-solid: var(--surface-inverse);
    --glass-sheen-start: color-mix(in srgb, var(--color-white) 12%, var(--color-transparent));
    --glass-sheen-middle: color-mix(in srgb, var(--color-white) 2%, var(--color-transparent));
    --glass-sheen-end: color-mix(in srgb, var(--color-white) 7%, var(--color-transparent));
    --glass-reflection-glow: color-mix(in srgb, var(--color-white) 6%, var(--color-transparent));
    --glass-reflection-edge: color-mix(in srgb, var(--color-white) 20%, var(--color-transparent));
    --glass-reflection-rim: color-mix(in srgb, var(--color-white) 28%, var(--color-transparent));
    --glass-reflection-center: color-mix(in srgb, var(--color-white) 10%, var(--color-transparent));
    --glass-edge-shadow: color-mix(in srgb, var(--color-glass-ink) 36%, var(--color-transparent));
    border-color: var(--color-glass-edge);
    color: var(--text-inverse);
}
.glass-lens-definitions {
    position: absolute;
    pointer-events: none;
}
.liquid-glass-optics {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
            140deg,
            var(--glass-sheen-start),
            var(--color-transparent) 38%,
            var(--glass-sheen-middle) 66%,
            var(--glass-sheen-end)
        ),
        var(--glass-tint);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: var(--glass-filter, blur(var(--glass-blur))) saturate(var(--glass-saturation));
    backdrop-filter: var(--glass-filter, blur(var(--glass-blur))) saturate(var(--glass-saturation));
}
/* [안쪽 반사와 모서리의 두께 / Inner reflection and the beveled edge] */
.liquid-glass-optics::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 14px var(--glass-reflection-glow),
        inset 2px 2px 3px var(--glass-reflection-edge),
        inset -2px -3px 5px var(--glass-edge-shadow);
}
.liquid-glass-optics::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        var(--glass-reflection-rim),
        var(--color-transparent) 26%,
        var(--glass-reflection-center) 48%,
        var(--color-transparent) 72%,
        var(--glass-reflection-edge)
    );
    padding: 2px;
    -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box,
        linear-gradient(var(--color-white) 0 0);
    -webkit-mask-composite: xor;
    -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box,
        linear-gradient(var(--color-white) 0 0);
    mask: linear-gradient(var(--color-white) 0 0) content-box,
        linear-gradient(var(--color-white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
@supports not (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
    .liquid-glass-optics {
        background: var(--glass-solid);
    }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
    .liquid-glass-optics {
        background: var(--glass-solid);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .liquid-glass-optics::before,
    .liquid-glass-optics::after {
        display: none;
    }
    .liquid-glass {
        border-color: currentColor;
    }
}
/* [배경을 덮지 않는 유리 창 / A glass window without a page-covering layer]
   헤더 밖의 독립된 표면만 그립니다. / Only the detached menu paints a surface. */
.floating-panel {
    position: fixed;
    z-index: 140;
    inset: 0 auto auto 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    width: min(1180px, calc(100vw - 24px));
    max-height: calc(100dvh - 120px);
    margin: 0;
    padding: 0;
    visibility: hidden;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: pan-y;
    transition-property: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
}
.floating-panel[data-ready] {
    visibility: visible;
}
.floating-panel[data-phase="open"] {
    opacity: 1;
    pointer-events: auto;
}
.floating-panel-webgl {
    position: fixed;
    inset: 0;
    z-index: 141;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
    visibility: hidden;
}
/* [왼쪽 벽에 붙는 세로 메뉴 / Vertical navigation attached to the left edge] */
.floating-panel[data-presentation="drawer"] {
    width: min(24rem, calc(100vw - 24px));
    height: calc(100dvh - 96px);
    max-height: calc(100dvh - 96px);
    grid-template-rows: auto minmax(0, 1fr);
    border-left: 0;
    border-radius: 0 var(--radius-dialog) var(--radius-dialog) 0;
    cursor: default;
}
.floating-panel[data-presentation="drawer"] .glass-menu-content a {
    cursor: pointer;
}
.floating-panel[data-dragging] {
    cursor: -webkit-grabbing;
    cursor: grabbing;
    will-change: transform;
}
.floating-panel[data-dragging] * {
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
}
.floating-panel[data-move-mode] {
    touch-action: none;
}
.glass-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-10) var(--space-6);
    touch-action: none;
}
.glass-menu-brand {
    margin: 0 0 var(--space-1);
    font-size: max(var(--text-min), var(--text-sm));
    font-weight: var(--weight-label);
}
.glass-menu-header h2 {
    margin: 0;
    font-size: max(var(--text-min), var(--text-title));
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    font-weight: var(--weight-heading);
}
.glass-menu-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.glass-menu-actions .round-button {
    width: var(--control-size);
    height: var(--control-size);
}
.glass-menu-move {
    flex-shrink: 0;
}
/* [정보 위계와 내부 스크롤 / Information hierarchy and an independently scrolling body] */
.glass-menu-content {
    grid-row: 4;
    min-height: 0;
    padding: 0 var(--space-10) var(--space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-detail-139beaa) var(--color-detail-j5afio);
    border-radius: 0 0 var(--radius-dialog) var(--radius-dialog);
}
.glass-menu-content a {
    color: var(--text-primary);
    cursor: -webkit-grab;
    cursor: grab;
}
.glass-menu-journeys {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: var(--space-8);
    gap: var(--space-8);
    margin-bottom: var(--space-6);
}
.glass-menu-journeys a {
    display: grid;
    grid-gap: var(--space-2);
    gap: var(--space-2);
    padding: var(--space-4) 0 var(--space-5);
    border-block: 1px solid var(--border-default);
}
.glass-menu-journeys span {
    font-size: max(var(--text-min), var(--text-sm));
    line-height: var(--leading-label);
}
.glass-menu-journeys strong {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: max(var(--text-min), var(--text-heading));
    font-weight: var(--weight-title);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
}
.glass-menu-columns {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-gap: var(--space-5);
    gap: var(--space-5);
}
.glass-menu-columns > div {
    display: grid;
    align-content: start;
    grid-gap: 0;
    gap: 0;
    min-width: 0;
}
.glass-menu-columns a {
    display: flex;
    align-items: center;
    min-height: var(--control-size);
    padding-block: var(--space-2);
    font-size: max(var(--text-min), var(--text-menu-link));
    line-height: var(--leading-label);
    font-weight: var(--weight-label);
    overflow-wrap: anywhere;
}
.glass-menu-columns .glass-menu-title {
    margin-bottom: var(--space-2);
    font-size: max(var(--text-min), var(--text-menu-group));
    font-weight: var(--weight-heading);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
}
.glass-menu-utilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-6);
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}
.glass-menu-utilities a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-size);
    font-size: max(var(--text-min), var(--text-sm));
    font-weight: var(--weight-label);
}
.glass-menu a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}
.glass-menu a:active {
    text-decoration-thickness: 2px;
}
.glass-menu-actions .round-button:hover {
    background: var(--color-detail-14lw51r);
}
@media (max-width: 1100px) {
    .glass-menu-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
    }
}
@media (max-width: 700px) {
    .glass-menu-header {
        padding: var(--space-5) var(--space-5) var(--space-4);
        gap: var(--space-2);
    }
    .glass-menu-header h2 {
        font-size: max(var(--text-min), var(--text-heading));
    }
    .glass-menu-content {
        padding: 0 var(--space-5) var(--space-4);
    }
    .glass-menu-move {
        padding: var(--space-2);
    }
    .glass-menu-move span {
        display: none;
    }
    .glass-menu-journeys {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .glass-menu-journeys a {
        gap: var(--space-1);
        padding-block: var(--space-4);
    }
    .glass-menu-journeys a + a {
        border-top: 0;
    }
    .glass-menu-journeys strong {
        font-size: max(var(--text-min), var(--text-subheading));
    }
    .glass-menu-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .glass-menu-columns .glass-menu-title {
        font-size: max(var(--text-min), var(--text-item-title));
    }
    .glass-menu-utilities {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0;
        gap: 0;
    }
    .glass-menu-journeys span {
        display: none;
    }
    .glass-menu-journeys strong {
        font-size: max(var(--text-min), var(--text-item-title));
    }
    .glass-menu-group {
        border-bottom: 1px solid var(--border-default);
    }
    .glass-menu-group summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 64px;
        gap: var(--space-3);
        font-size: max(var(--text-min), var(--text-item-title));
        font-weight: var(--weight-heading);
        cursor: pointer;
        list-style: none;
    }
    .glass-menu-group summary::-webkit-details-marker {
        display: none;
    }
    .glass-menu-group summary svg {
        transition: transform 180ms var(--ease-out);
    }
    .glass-menu-group[open] summary svg {
        transform: rotate(90deg);
    }
    .glass-menu-group-links {
        display: grid;
        padding: 0 0 var(--space-4) var(--space-3);
    }
    .glass-menu-group-links a {
        font-size: max(var(--text-min), var(--text-body));
    }
    .glass-menu-group-links .glass-menu-overview {
        color: var(--text-secondary);
    }
}
@media (prefers-reduced-motion: reduce) {
    .glass-menu-group summary svg {
        transition: none;
    }
}
/* [문서 탐색과 읽기 영역 / Documentation navigation and reading area]
   왼쪽 분류, 가운데 문서, 오른쪽 현재 문서 목차를 분리합니다.
   Keep chapter navigation, the document and its local outline distinct. */
.design-system-page {
    min-height: 100vh;
    padding-top: 72px;
    background: var(--surface-default);
    color: var(--text-primary);
    font-size: max(var(--text-min), 1rem);
    line-height: 1.7;
    letter-spacing: var(--tracking-body);
}
.design-system-page,
.design-system-page * {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}
.design-system-page button {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.design-system-page .card,
.design-system-page .card * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.design-system-page :is(p, li, dt, dd, code, kbd, label, input, select, textarea, summary, th, td) {
    font-size: max(var(--text-min), 1rem);
}
.ds-doc-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    height: 72px;
    padding-inline: 28px;
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-default);
}
.ds-doc-brand {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: max(var(--text-min), 1rem);
    font-weight: 600;
    white-space: nowrap;
}
.ds-doc-brand img {
    width: 160px;
    height: auto;
}
.ds-doc-brand span {
    padding-left: 16px;
    border-left: 1px solid var(--border-default);
}
.ds-doc-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ds-search-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 248px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: var(--surface-default);
    font-size: max(var(--text-min), 1rem);
    text-align: left;
}
.ds-search-trigger kbd {
    margin-left: auto;
    color: var(--text-secondary);
    font-family: var(--font);
}
.ds-site-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
    text-decoration: none;
}
.ds-menu-trigger {
    display: none;
}
.ds-sidebar {
    position: fixed;
    inset: 72px auto 0 0;
    z-index: 30;
    width: 256px;
    overflow-y: auto;
    padding: 28px 20px 36px;
    border-right: 1px solid var(--border-default);
    background: var(--surface-default);
    scrollbar-width: thin;
}
.ds-nav-group + .ds-nav-group {
    margin-top: 28px;
}
.ds-nav-group > p {
    margin: 0 12px 10px;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
    font-weight: 500;
}
.ds-nav-group a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
    text-decoration: none;
}
.ds-nav-group a:hover {
    color: var(--text-primary);
    background: var(--surface-subtle);
}
.ds-nav-group a[aria-current="page"] {
    color: var(--text-primary);
    background: var(--surface-subtle);
    font-weight: 700;
}
.ds-nav-group a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 20px;
    transform: translateY(-50%);
    border-radius: var(--radius-pill);
    background: var(--text-primary);
}
.ds-sidebar-note {
    margin: 36px 12px 0;
    padding-top: 24px;
    border-top: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-content-area {
    margin-left: 256px;
}
.ds-doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 800px) 192px;
    justify-content: center;
    grid-gap: 64px;
    gap: 64px;
    max-width: 1256px;
    margin-inline: auto;
    padding: 64px 48px 80px;
}
.ds-document {
    min-width: 0;
}
.ds-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 42px;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}
.ds-page-heading {
    padding-bottom: 44px;
    border-bottom: 1px solid var(--border-default);
}
.ds-version {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
    font-weight: 500;
}
.ds-page-heading h1 {
    margin: 0 0 20px;
    font-size: max(var(--text-min), var(--text-title));
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: var(--tracking-heading);
    text-wrap: pretty;
}
.ds-page-heading h1:focus,
.ds-section > h2:focus {
    outline: none;
}
.ds-page-heading > p:last-child {
    max-width: 44rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), var(--text-lead));
    line-height: var(--leading-body);
}
.ds-section {
    margin-top: 64px;
    scroll-margin-top: 104px;
}
.ds-section > h2 {
    margin: 0 0 18px;
    font-size: max(var(--text-min), var(--text-heading));
    font-weight: 700;
    line-height: var(--leading-heading);
}
.ds-section > p {
    margin: 0 0 24px;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
    line-height: var(--leading-body);
}
.ds-section h3 {
    margin: 32px 0 14px;
    font-size: max(var(--text-min), 1.25rem);
    font-weight: 700;
    line-height: 1.5;
}
.ds-outline {
    position: -webkit-sticky;
    position: sticky;
    top: 112px;
    align-self: start;
    max-height: calc(100vh - 144px);
    overflow-y: auto;
    padding: 0 0 20px 20px;
    border-left: 1px solid var(--border-default);
}
.ds-outline > p {
    margin: 0 0 16px;
    font-size: max(var(--text-min), 1rem);
    font-weight: 600;
}
.ds-outline a {
    display: block;
    min-height: 48px;
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
    line-height: 1.5;
    text-decoration: none;
}
.ds-outline a[aria-current="location"] {
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 6px;
}
.ds-chapter-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 72px;
    padding-top: 28px;
    border-top: 1px solid var(--border-default);
}
.ds-chapter-footer a {
    display: grid;
    grid-gap: 6px;
    gap: 6px;
    color: var(--text-primary);
    font-size: max(var(--text-min), 1rem);
    text-decoration: none;
}
.ds-chapter-footer a span {
    color: var(--text-secondary);
}
.ds-chapter-footer a:last-child {
    margin-left: auto;
    text-align: right;
}
/* [원칙·브랜드·색의 실제 예제 / Principles, brand and color specimens] */
.ds-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 20px;
    gap: 20px;
}
.ds-principle {
    padding-top: 20px;
    border-top: 1px solid var(--border-default);
}
.ds-principle > span {
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-principle h3 {
    margin: 14px 0 10px;
    font-size: max(var(--text-min), 1.25rem);
}
.ds-principle p {
    margin: 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-chapter-list a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    grid-gap: 16px;
    gap: 16px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-default);
    color: var(--text-primary);
    text-decoration: none;
}
.ds-chapter-list a > span {
    color: var(--text-secondary);
}
.ds-chapter-list strong {
    display: block;
    font-size: max(var(--text-min), 1.125rem);
}
.ds-chapter-list p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-brand-stage {
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: 48px 24px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}
.ds-brand-stage img {
    width: 236px;
    max-width: 100%;
    height: auto;
}
.ds-brand-stage-inverse {
    background: var(--surface-inverse);
}
.ds-brand-stage-inverse img {
    filter: invert(1);
    mix-blend-mode: screen;
}
.ds-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 24px;
    gap: 24px;
}
.ds-two-columns > * {
    min-width: 0;
}
.ds-caption {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
    line-height: 1.7;
}
.ds-clearspace-stage {
    padding: 48px 32px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}
.ds-clearspace {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 16px auto;
    padding: 24px;
    border: 1px dashed var(--border-strong);
    background: var(--surface-default);
}
.ds-clearspace img {
    width: 236px;
    height: auto;
}
.ds-clearspace span {
    position: absolute;
    top: -30px;
    left: 0;
    font-size: max(var(--text-min), 1rem);
}
.ds-rules-list {
    margin: 20px 0 0;
    padding-left: 22px;
}
.ds-rules-list li {
    margin: 12px 0;
    padding-left: 4px;
    font-size: max(var(--text-min), 1rem);
}
.ds-rule-example {
    padding: 24px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}
.ds-rule-example > strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: max(var(--text-min), 1rem);
}
.ds-rule-example img {
    width: 160px;
    height: auto;
    margin: 24px auto;
}
.ds-rule-example p {
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-rule-example[data-incorrect] img {
    transform: scaleX(1.2);
    opacity: 45%;
}
.ds-palette {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 24px 16px;
    gap: 24px 16px;
}
.ds-color-card {
    min-width: 0;
}
.ds-color-swatch {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: max(var(--text-min), 1.75rem);
    font-weight: 600;
}
.ds-color-card h3 {
    margin: 14px 0 4px;
    font-size: max(var(--text-min), 1rem);
}
.ds-color-card p {
    margin: 6px 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-token {
    color: var(--text-secondary);
    font: 400 max(var(--text-min), 1rem)/1.6 var(--font-mono);
    overflow-wrap: anywhere;
}
.ds-copy-color {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 8px 0;
    border: 0;
    color: var(--text-primary);
    background: var(--color-detail-j5afio);
    font: 500 max(var(--text-min), 1rem)/1.5 var(--font);
    text-align: left;
}
.ds-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border-top: 1px solid var(--border-default);
    overscroll-behavior-inline: contain;
}
.ds-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    text-align: left;
}
.ds-table th,
.ds-table td {
    padding: 16px 14px 16px 0;
    border-bottom: 1px solid var(--border-default);
    font-size: max(var(--text-min), 1rem);
    line-height: 1.6;
    vertical-align: top;
}
.ds-table th {
    color: var(--text-primary);
    font-weight: 600;
}
.ds-table td {
    color: var(--text-secondary);
}
.ds-table code {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}
.ds-contrast-sample {
    display: inline-block;
    min-width: 64px;
    padding: 6px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    text-align: center;
}
/* [서체·간격·조작 예제 / Type, spacing and interaction specimens] */
.ds-type-intro {
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}
.ds-type-intro > strong {
    display: block;
    font-size: max(var(--text-min), clamp(2.5rem, 5vw, 4rem));
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.03em;
}
.ds-type-intro p {
    margin: 24px 0 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-type-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
    grid-gap: 24px;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--border-default);
}
.ds-type-row p {
    margin: 0;
    font-size: max(var(--text-min), 1rem);
}
.ds-type-row .ds-type-meta {
    display: grid;
    grid-gap: 6px;
    gap: 6px;
    color: var(--text-secondary);
}
.ds-type-meta strong {
    color: var(--text-primary);
    font-size: max(var(--text-min), 1rem);
}
.ds-type-sample {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.ds-specimen {
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}
.ds-specimen-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-default);
}
.ds-specimen-controls .ds-field {
    grid-template-columns: auto 1fr;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: max(var(--text-min), 1rem);
}
.ds-specimen-controls select {
    width: auto;
    min-width: 88px;
}
.ds-live-type {
    display: grid;
    align-content: center;
    min-height: 220px;
    padding: 32px;
    background: var(--surface-subtle);
    overflow-wrap: anywhere;
}
.ds-grid-sample {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 12px;
    gap: 12px;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}
.ds-grid-sample span {
    display: grid;
    place-items: center;
    min-height: 120px;
    background: var(--color-gray-300);
    color: var(--text-primary);
    font-size: max(var(--text-min), 1rem);
}
.ds-space-row {
    display: grid;
    grid-template-columns: 90px 120px minmax(0, 1fr);
    align-items: center;
    grid-gap: 24px;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-default);
    font-size: max(var(--text-min), 1rem);
}
.ds-space-bar {
    display: block;
    height: 24px;
    background: var(--color-sky);
}
.ds-shape-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 20px;
    gap: 20px;
}
.ds-shape-sample {
    display: grid;
    place-items: center;
    min-height: 140px;
    margin-bottom: 16px;
    border: 0;
    box-shadow: inset 0 0 0 var(--stroke-width) var(--border-default);
    background: var(--surface-subtle);
    font-size: max(var(--text-min), 1rem);
}
.ds-demo {
    padding: 28px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}
.ds-demo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.ds-overlay-controls {
    padding: var(--space-5);
    border-radius: var(--radius-media);
    background: var(--surface-inverse);
    color: var(--text-inverse);
}
.ds-demo-stack {
    display: grid;
    grid-gap: 24px;
    gap: 24px;
}
.ds-card-example {
    width: min(100%, 280px);
}
.ds-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 16px;
    gap: 16px;
}
.ds-icon-grid > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    border-bottom: 1px solid var(--border-default);
}
.ds-icon-grid span {
    font-size: max(var(--text-min), 1rem);
}
.ds-feedback-line {
    min-height: 28px;
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
/* [공통 유리 컴포넌트의 실제 예제 / Live example of the shared glass component] */
.ds-glass-variant {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-6);
    font-size: max(var(--text-min), var(--text-body));
    font-weight: var(--weight-label);
}
.ds-glass-variant select {
    min-height: var(--control-size);
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-default);
    color: var(--text-primary);
    font: inherit;
}
.ds-glass-stage {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 400px;
    padding: clamp(16px, 4vw, 48px);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}
.ds-glass-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ds-glass-example {
    width: 100%;
    padding: clamp(24px, 3vw, 40px);
}
.ds-glass-component-name {
    font-size: max(var(--text-min), var(--text-sm));
    font-weight: var(--weight-label);
}
.ds-glass-example h3 {
    margin: var(--space-4) 0 var(--space-3);
    font-size: max(var(--text-min), var(--text-heading));
}
.ds-glass-example p {
    margin: 0;
    color: inherit;
}
.ds-glass-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: var(--space-6);
    gap: var(--space-6);
    margin-block: var(--space-6);
}
.ds-glass-controls label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: max(var(--text-min), var(--text-body));
    font-weight: var(--weight-label);
}
.ds-glass-controls output {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.ds-glass-controls input {
    width: 100%;
    min-height: var(--control-size);
    padding: 0;
    accent-color: var(--action-primary);
}
@media (max-width: 600px) {
    .ds-glass-controls {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}
.ds-code-sample {
    margin-block: var(--space-5);
    min-width: 0;
}
.ds-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--control-size);
    padding: var(--space-2) clamp(var(--space-4), 3vw, var(--space-6));
    box-shadow: inset 0 -1px 0 var(--border-default);
}
.ds-code-title, .ds-code-tools {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.ds-code-title > span {
    overflow-wrap: anywhere;
}
.ds-code-tools {
    flex-shrink: 0;
}
.ds-code-language {
    color: var(--text-secondary);
}
.ds-code-sample .ds-code-block {
    max-height: 440px;
    max-width: 100%;
    overflow: auto;
    margin: 0;
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    border: 0;
    border-radius: 0 0 var(--surface-radius-panel) var(--surface-radius-panel);
    color: var(--text-primary);
    font: 400 max(var(--text-min), 1rem)/1.8 var(--font-mono);
    letter-spacing: 0;
    text-align: left;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    overscroll-behavior: contain;
    -moz-tab-size: 4;
    tab-size: 4;
}
.ds-code-block [data-text] {
    font: inherit;
    letter-spacing: inherit;
}
.ds-code-block:focus-visible {
    outline: var(--focus-width) solid var(--border-focus);
    outline-offset: var(--focus-offset);
}
.ds-syntax-comment {
    color: var(--code-comment);
}
.ds-syntax-keyword, .ds-syntax-tag {
    color: var(--code-keyword);
}
.ds-syntax-string {
    color: var(--code-string);
}
.ds-syntax-property, .ds-syntax-number {
    color: var(--code-property);
}
.ds-quick-menu {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}
.ds-quick-menu :is(a, button, p, span) {
    font-size: max(var(--text-min), 1rem);
}
.ds-inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 24px;
}
.ds-inline-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    color: var(--text-primary);
    font-size: max(var(--text-min), 1rem);
    text-underline-offset: 5px;
}
/* [문서 검색·모바일 탐색·대화상자 / Search, mobile navigation and dialogs] */
.ds-dialog {
    width: min(560px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    overflow: auto;
    padding: 28px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-dialog);
    color: var(--text-primary);
    background: var(--surface-default);
}
.ds-dialog::-webkit-backdrop {
    background: var(--color-detail-1iq0iqd);
}
.ds-dialog::backdrop {
    background: var(--color-detail-1iq0iqd);
}
.ds-dialog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.ds-dialog-heading h2 {
    margin: 0;
    font-size: max(var(--text-min), var(--text-subheading));
    line-height: 1.4;
}
.ds-dialog-close {
    flex: none;
    width: 48px;
    padding-inline: 0;
}
.ds-dialog p {
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.ds-search-dialog {
    width: min(680px, calc(100% - 32px));
}
.ds-search-results {
    display: grid;
    grid-gap: 8px;
    gap: 8px;
    margin-top: 20px;
}
.ds-search-results a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: max(var(--text-min), 1rem);
    text-decoration: none;
}
.ds-search-results a:hover,
.ds-search-results a:focus-visible {
    background: var(--surface-subtle);
}
.ds-search-results strong,
.ds-search-results span {
    display: block;
    font-size: max(var(--text-min), 1rem);
}
.ds-search-results span {
    margin-top: 4px;
    color: var(--text-secondary);
}
.ds-navigation-dialog {
    width: min(320px, calc(100% - 32px));
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
}
@media (max-width: 1280px) {
    .ds-doc-layout {
        grid-template-columns: minmax(0, 800px);
        padding-inline: 40px;
    }
    .ds-outline {
        display: none;
    }
}
@media (max-width: 980px) {
    .ds-sidebar {
        display: none;
    }
    .ds-content-area {
        margin-left: 0;
    }
    .ds-menu-trigger {
        display: inline-flex;
        width: 48px;
        padding-inline: 0;
    }
    .ds-doc-actions {
        gap: 8px;
    }
    .ds-site-link {
        display: none;
    }
}
@media (min-width: 768px) and (max-width: 1279px) {
    .ds-grid-sample {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .ds-grid-sample span:nth-child(n+9) {
        display: none;
    }
}
@media (max-width: 767px) {
    .ds-grid-sample {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .ds-grid-sample span:nth-child(n+5) {
        display: none;
    }
}
@media (max-width: 600px) {
    .ds-doc-header {
        padding-inline: 16px;
        gap: 8px;
    }
    .ds-doc-brand img {
        width: 128px;
    }
    .ds-doc-brand span {
        display: none;
    }
    .ds-search-trigger {
        justify-content: center;
        min-width: 48px;
        min-height: 48px;
        padding: 0;
        border: 0;
    }
    .ds-search-trigger span,
    .ds-search-trigger kbd {
        display: none;
    }
    .ds-doc-layout {
        padding: 32px 20px 56px;
    }
    .ds-breadcrumbs {
        margin-bottom: 28px;
    }
    .ds-page-heading {
        padding-bottom: 32px;
    }
    .ds-page-heading h1 {
        font-size: max(var(--text-min), var(--text-title));
    }
    .ds-section {
        margin-top: 44px;
    }
    .ds-principles,
    .ds-two-columns {
        grid-template-columns: 1fr;
    }
    .ds-palette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ds-icon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ds-type-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ds-type-intro,
    .ds-live-type {
        padding: 24px;
    }
    .ds-space-row {
        grid-template-columns: 58px 84px minmax(0, 1fr);
        gap: 12px;
    }
    .ds-shape-grid {
        grid-template-columns: 1fr;
    }
    .ds-demo {
        padding: 20px;
    }
    .ds-clearspace-stage {
        padding-inline: 16px;
    }
    .ds-dialog {
        padding: 20px;
    }
}
@media print {
    .ds-color-swatch,
    .ds-brand-stage,
    .ds-contrast-sample {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .ds-doc-header,
    .ds-sidebar,
    .ds-outline,
    .ds-chapter-footer,
    .ds-no-print {
        display: none;
    }
    .design-system-page {
        padding-top: 0;
    }
    .ds-content-area {
        margin-left: 0;
    }
    .ds-doc-layout {
        display: block;
        max-width: none;
        padding: 0;
    }
    .ds-section {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .ds-table-wrap {
        overflow: visible;
    }
}
/* [컴포넌트의 공식 축과 상태 표본 / Official component axes and state specimens] */
.component-contract-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    grid-gap: var(--space-4);
    gap: var(--space-4);
    margin-block: var(--space-6);
}
.component-contract-group > h4 {
    grid-column: 1 / -1;
}
.component-contract-example {
    min-width: 0;
    padding: var(--space-4);
    border-radius: var(--surface-radius-compact);
    box-shadow: inset 0 0 0 var(--stroke-width) var(--border-default);
    scroll-margin-top: var(--space-8);
}
.component-contract-example > p:first-child {
    margin-block: 0 var(--space-3);
}
.component-contract-example.is-inverse {
    color: var(--text-inverse);
    background: var(--color-black);
}
.component-contract-group:has([data-component-example="hero-slide"]),
.component-contract-group:has([data-component-example="account-ticket"]),
.component-contract-group:has([data-component-example="account-mini-room"]),
.component-contract-group:has([data-component-example="glass"]) {
    grid-template-columns: 1fr;
}
/* [v4의 둥근 하단 알림 / The rounded bottom notification from v4] */
.small-notification-modal {
    position: fixed;
    z-index: 500;
    left: 50%;
    bottom: max(2rem, env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100vw - 2rem);
    min-height: var(--control-size);
    padding: 0.875rem 1.75rem;
    border: 1px solid var(--color-glass-edge);
    border-radius: var(--radius-pill);
    background: var(--color-transparent);
    color: var(--text-inverse);
    font-size: max(var(--text-min), var(--text-body));
    line-height: var(--leading-body);
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, 1rem, 0);
    transition: opacity 180ms ease, transform 240ms var(--ease-out), visibility 0s linear 240ms;
}
.small-notification-modal.visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
    transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
    .small-notification-modal, .small-notification-modal.visible {
        transform: translate3d(-50%, 0, 0);
        transition: opacity 180ms ease, visibility 0s linear 180ms;
    }
    .small-notification-modal.visible {
        transition-delay: 0s;
    }
}
/* [가운데 작품과 양옆의 다음 장면 / A central work with its neighbouring scenes]
   가운데 카드의 소개와 유리 정보 영역은 유지하고 양옆 작품의 이름을 드러냅니다.
   Keep the central copy and glass information rail while revealing both neighbouring titles. */
.home-v4-wrap .season-hero {
    position: relative;
    container-type: inline-size;
    --slide-width: min(var(--hero-card-width), calc(100cqw - var(--hero-peek) * 2 - var(--hero-gap) * 2));
    --slide-gap: var(--hero-gap);
}
.home-v4-wrap .season-stage {
    width: 100%;
    margin-inline: auto;
    overflow: clip;
}
.home-v4-wrap .season-track {
    width: max-content;
    gap: var(--slide-gap);
    margin-left: calc((100% - var(--slide-width)) / 2);
    transform: translate3d(calc(-2 * (var(--slide-width) + var(--slide-gap)) + var(--drag-x, 0px)), 0, 0);
}
.home-v4-wrap .season-track.is-moving {
    transition: transform var(--duration-carousel) var(--ease-carousel);
}
.home-v4-wrap .season-track.is-returning {
    transition: transform var(--duration-hero-settle) var(--ease-out);
}
.home-v4-wrap .season-slide {
    width: var(--slide-width);
    flex: 0 0 var(--slide-width);
    min-height: 42rem;
    border-radius: var(--radius-dialog);
}
.home-v4-wrap .season-slide::before {
    opacity: 48%;
    transition: opacity var(--duration-hero-copy) ease;
}
.home-v4-wrap .season-slide:is(.is-active, .is-entering)::before {
    opacity: 0%;
}
.home-v4-wrap .season-copy {
    width: calc(100% - 24rem);
    padding: clamp(2rem, 4vw, 3.5rem);
    pointer-events: none;
    transition: opacity var(--duration-hero-copy) ease;
}
.home-v4-wrap .season-slide.is-entering .season-copy {
    opacity: 100%;
}
.home-v4-wrap .season-track.is-moving .season-slide.is-active .season-copy {
    opacity: 0%;
}
.home-v4-wrap .season-copy h2 {
    margin-bottom: var(--space-8);
    font-size: max(var(--text-min), var(--text-hero-with-companion));
}
.home-v4-wrap .season-slide[data-layout="standalone"] .season-copy h2 {
    font-size: max(var(--text-min), var(--text-hero-standalone));
}
.home-v4-wrap .season-meta {
    margin-bottom: var(--space-4);
}
.season-description {
    max-width: 32rem;
    margin: 0 0 var(--space-8);
    font-size: max(var(--text-min), var(--text-body));
    line-height: var(--leading-body);
    text-wrap: pretty;
}
.season-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    pointer-events: auto;
}
.season-slide:not(.is-active) .season-actions {
    pointer-events: none;
}
.season-slide[data-preview] .season-peer-title {
    position: absolute;
    z-index: 3;
    bottom: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    width: max(3rem, min(12rem, calc((100vw - var(--slide-width)) / 2 - var(--slide-gap) - 2rem)));
    min-width: 0;
    padding: var(--space-3) 0;
    color: var(--text-inverse);
    background: var(--color-detail-j5afio);
    white-space: normal;
    text-align: left;
    transition: opacity var(--duration-feedback) ease;
}
.season-slide[data-preview="previous"] .season-peer-title {
    right: var(--space-4);
}
.season-slide[data-preview="next"] .season-peer-title {
    left: var(--space-4);
}
.season-peer-title strong {
    font-size: max(var(--text-min), var(--text-item-title));
    font-weight: var(--weight-heading);
    line-height: var(--leading-label);
    overflow-wrap: anywhere;
}
.season-slide.is-entering .season-peer-title {
    opacity: 0%;
    pointer-events: none;
}
.hero-neighbor-navigation {
    display: none;
}
.season-actions :is(.button, .ds-button) {
    min-height: var(--control-size);
    padding: var(--space-3) var(--space-6);
}
.season-slide[data-layout="standalone"] .season-copy {
    width: 100%;
}
.season-actions .season-booking-button {
    border: 1px solid var(--color-detail-xl0sze);
    color: var(--text-inverse);
    background: var(--color-detail-1j5u0jr);
}
/* [참고의 흰 목록과 유리 시계 / A white information list and a glass clock]
   기존 흑백 팔레트와 공통 LiquidGlass 표면을 사용합니다.
   Use the existing neutral palette and the shared LiquidGlass surface. */
.hero-companion {
    position: absolute;
    z-index: 3;
    top: 3rem;
    right: calc((100% - var(--slide-width)) / 2 + var(--space-6));
    display: grid;
    grid-gap: var(--space-4);
    gap: var(--space-4);
    width: 21rem;
    color: var(--text-primary);
}
/* [글자 확대에도 내용에 맞춰 재배치 / Reflow intrinsic content when text is enlarged] */
.hero-companion > * {
    min-width: 0;
    overflow-wrap: anywhere;
}
.season-controls {
    flex-wrap: wrap;
}
.season-progress {
    min-width: 0;
}
.hero-release-list {
    padding: var(--space-5) var(--space-6) var(--space-3);
    border-radius: var(--radius-dialog);
    background: var(--surface-default);
}
.hero-companion-heading,
.hero-clock-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.hero-companion-heading h2 {
    margin: 0;
    font-size: max(var(--text-min), var(--text-item-title));
    font-weight: var(--weight-heading);
}
.hero-companion-more {
    display: grid;
    flex: 0 0 var(--control-size);
    width: var(--control-size);
    height: var(--control-size);
    margin-right: calc(-1 * var(--space-3));
    place-items: center;
    border-radius: var(--radius-pill);
}
.hero-release-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hero-release-list li + li {
    border-top: 1px solid var(--border-default);
}
.hero-release-list li > a {
    display: block;
    padding-block: var(--space-4);
}
.hero-release-list strong {
    display: block;
    font-size: max(var(--text-min), var(--text-body));
    font-weight: var(--weight-action);
    line-height: var(--leading-label);
}
.hero-release-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: max(var(--text-min), var(--text-sm));
    line-height: var(--leading-label);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.hero-time-glass {
    padding: var(--space-6);
    --glass-shadow: 0 8px 32px var(--color-detail-xx4fx2);
}
.hero-clock-heading {
    font-size: max(var(--text-min), var(--text-sm));
    font-weight: var(--weight-label);
}
.hero-clock {
    display: block;
    margin-top: var(--space-2);
    font-size: max(var(--text-min), 2.75rem);
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: -0.035em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.hero-clock-date {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), var(--text-sm));
}
.hero-next-release {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-detail-1ch9bqq);
}
.hero-next-release > p {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: max(var(--text-min), var(--text-sm));
    font-weight: var(--weight-action);
}
.hero-next-release > p > span {
    font-weight: var(--weight-body);
}
.hero-next-release > a {
    display: block;
    min-height: var(--control-size);
}
.hero-next-release time {
    font-size: max(var(--text-min), var(--text-item-title));
    font-weight: var(--weight-heading);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.hero-next-release a > span {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: max(var(--text-min), var(--text-sm));
    line-height: var(--leading-label);
}
.hero-next-release a > span svg {
    flex: 0 0 1.25rem;
    margin-top: 0.125rem;
}
@media (hover: hover) {
    .season-peer-title:hover {
        color: var(--text-inverse);
        background: var(--color-detail-j5afio);
    }
    .season-peer-title:hover strong {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
    .hero-companion-more:hover {
        background: var(--state-hover);
    }
    .hero-release-list li > a:hover strong,
    .hero-next-release a:hover > span {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
    .season-booking-button:hover {
        background: var(--color-detail-1iq0iqd);
    }
}
/* [작은 화면에서는 문서 순서로 / In-flow information on smaller screens] */
@media (max-width: 1100px) {
    .home-v4-wrap .season-copy {
        width: 100%;
    }
    .home-v4-wrap .season-slide {
        min-height: 36rem;
    }
    .season-slide[data-preview] .season-peer-title {
        display: none;
    }
    .hero-neighbor-navigation {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: var(--space-4);
        padding-top: var(--space-3);
    }
    .hero-neighbor-navigation .ds-button {
        display: flex;
        flex: 1 1;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-2);
        min-width: 0;
        padding: var(--space-2) 0;
        white-space: normal;
        text-align: left;
    }
    .hero-neighbor-navigation .ds-button:last-child {
        justify-content: flex-end;
        text-align: right;
    }
    .hero-companion {
        position: relative;
        inset: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        width: min(var(--container), calc(100% - var(--page-gutter) * 2));
        margin: var(--space-4) auto 0;
    }
    .hero-release-list {
        background: var(--surface-subtle);
    }
}
@media (max-width: 600px) {
    .home-v4-wrap .season-hero {
        --hero-peek: 0.5rem;
    }
    .home-v4-wrap .season-slide {
        min-height: 37rem;
    }
    .home-v4-wrap .season-copy {
        justify-content: flex-end;
        padding: var(--space-8) var(--space-6);
    }
    .home-v4-wrap .season-copy h2 {
        margin-bottom: var(--space-6);
        font-size: max(var(--text-min), var(--text-hero-with-companion));
    }
    .season-description {
        margin-bottom: var(--space-6);
    }
    .season-actions {
        width: 100%;
        gap: var(--space-2);
    }
    .season-actions :is(.button, .ds-button) {
        flex: 1 1;
        padding-inline: var(--space-3);
    }
    .hero-companion {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-v4-wrap .season-track,
    .home-v4-wrap .season-copy,
    .home-v4-wrap .season-slide::before,
    .season-peer-title {
        transition: none;
    }
}
/* [공통 조작 / Shared controls]
   기존 색상과 서체를 보존하고 모든 화면의 조작 크기를 토큰으로 통일합니다.
   Preserve the palette and font while sharing token based control dimensions. */
.ds-button[data-context] {
    --control-target-size: var(--control-size);
    --control-stroke-color: var(--color-transparent);
    --control-focus-color: var(--border-focus);
    --control-selected-background: var(--action-primary);
    --control-selected-color: var(--text-inverse);
    --control-selected-hover-background: var(--action-primary-hover);
    --control-selected-focus: var(--focus-on-dark);
    --control-selected-stroke: var(--color-transparent);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: var(--control-target-size);
    min-height: var(--control-target-size);
    padding: 10px 20px;
    border: 0;
    border-radius: var(--radius-control);
    box-shadow: inset 0 0 0 var(--stroke-width) var(--control-stroke-color);
    font: 600 max(var(--text-min), 1rem)/1.5 var(--font);
    letter-spacing: var(--tracking-body);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--duration-feedback) var(--ease-standard), color var(--duration-feedback) var(--ease-standard), box-shadow var(--duration-feedback) var(--ease-standard);
}
.ds-button[data-context="flow"] {
    --control-target-size: var(--control-flow-button-size);
    padding: 14px 22px;
    border-radius: var(--radius-flow);
    line-height: 1.45;
}
.ds-button.ds-button-primary[data-context] {
    --control-focus-color: var(--focus-on-dark);
    color: var(--text-inverse);
    background: var(--action-primary);
}
.ds-button.ds-button-secondary[data-context] {
    --control-stroke-color: var(--stroke-control);
    color: var(--text-primary);
    background: var(--surface-default);
}
.ds-button.ds-button-accent[data-context] {
    --control-focus-color: var(--focus-on-brand);
    color: var(--text-on-brand);
    background: var(--action-secondary);
}
.ds-button.ds-button-highlight[data-context] {
    --control-focus-color: var(--focus-on-brand);
    color: var(--text-on-brand);
    background: var(--accent-highlight);
}
.ds-button.ds-button-quiet[data-context] {
    color: var(--text-primary);
    background: var(--color-transparent);
}
.ds-button.ds-button-inverse[data-context] {
    color: var(--text-primary);
    background: var(--surface-default);
}
.ds-button.ds-button-inverse-outline[data-context] {
    --control-focus-color: var(--focus-on-dark);
    --control-stroke-color: var(--stroke-inverse);
    color: var(--text-inverse);
    background: var(--color-transparent);
}
.ds-button.ds-button-inverse-quiet[data-context] {
    --control-focus-color: var(--focus-on-dark);
    color: var(--text-inverse);
    background: var(--color-transparent);
}
/* [밝은/어두운 토글과 브랜드 선택 / Paired neutral inversion and retained brand fills]
   배경·전경·초점·경계를 같은 상태에서 결정합니다. / Resolve the whole palette from one state. */
.ds-button:is(.ds-button-primary, .ds-button-inverse-outline, .ds-button-inverse-quiet)[data-context] {
    --control-selected-background: var(--surface-default);
    --control-selected-color: var(--text-primary);
    --control-selected-hover-background: var(--surface-subtle);
    --control-selected-focus: var(--border-focus);
    --control-selected-stroke: var(--stroke-control);
}
.ds-button.ds-button-accent[data-context] {
    --control-selected-background: var(--action-secondary);
    --control-selected-color: var(--text-on-brand);
    --control-selected-hover-background: var(--action-secondary);
    --control-selected-focus: var(--focus-on-brand);
    --control-selected-stroke: var(--stroke-control);
}
.ds-button.ds-button-highlight[data-context] {
    --control-selected-background: var(--accent-highlight);
    --control-selected-color: var(--text-on-brand);
    --control-selected-hover-background: var(--accent-highlight);
    --control-selected-focus: var(--focus-on-brand);
    --control-selected-stroke: var(--stroke-control);
}
.ds-button[data-context][data-shape="pill"] {
    border-radius: var(--radius-pill);
}
.ds-button[data-context][data-shape="circle"] {
    flex: none;
    width: var(--control-target-size);
    height: var(--control-target-size);
    padding: 0;
    border-radius: 50%;
}
.ds-button.ds-icon-button[data-context] {
    flex: none;
    min-width: var(--control-target-size);
    min-height: var(--control-target-size);
    padding: 0;
}
@media (hover: hover) {
    .ds-button.ds-button-primary[data-context]:hover:not(:disabled):not([aria-pressed="true"]) {
        color: var(--text-inverse);
        background: var(--action-primary-hover);
    }
    .ds-button:is(.ds-button-secondary, .ds-button-quiet, .ds-button-inverse)[data-context]:hover:not(:disabled):not([aria-pressed="true"]) {
        color: var(--text-primary);
        background: var(--surface-subtle);
    }
    .ds-button:is(.ds-button-accent, .ds-button-highlight)[data-context]:hover:not(:disabled):not([aria-pressed="true"]) {
        color: var(--text-on-brand);
        --control-stroke-color: var(--stroke-control);
    }
    .ds-button:is(.ds-button-inverse-outline, .ds-button-inverse-quiet)[data-context]:hover:not(:disabled):not([aria-pressed="true"]) {
        color: var(--text-inverse);
        background: var(--color-detail-1rqvsa);
    }
}
/* [선택과 hover의 결합 / Selection with hover]
   선택된 버튼에 기본 hover 팔레트가 섞이지 않게 합니다. / Never mix resting hover with selected foreground. */
.ds-button[data-context][aria-pressed] {
    /* 반전 중 중간 회색끼리 겹치는 프레임을 만들지 않습니다.
       Switch both faces atomically; hover remains a tone change within the selected palette. */
    transition-property: box-shadow;
}
.ds-button[data-context][aria-pressed="true"]:not(:disabled) {
    --control-focus-color: var(--control-selected-focus);
    --control-stroke-color: var(--control-selected-stroke);
    color: var(--control-selected-color);
    background: var(--control-selected-background);
}
@media (hover: hover) {
    .ds-button[data-context][aria-pressed="true"]:hover:not(:disabled) {
        color: var(--control-selected-color);
        background: var(--control-selected-hover-background);
    }
}
.ds-button[data-context]:active:not(:disabled) {
    filter: brightness(88%);
}
.ds-button[data-context]:disabled {
    --control-stroke-color: var(--color-transparent);
    color: var(--action-disabled-text);
    background: var(--action-disabled);
    cursor: not-allowed;
    opacity: 1;
}
.ds-button[data-context]:focus-visible,
.ds-tabs [role="tab"]:focus-visible,
.ds-tabpanel:focus-visible,
.ds-disclosure summary:focus-visible {
    outline: var(--focus-width) solid var(--control-focus-color, var(--border-focus));
    outline-offset: var(--focus-offset);
}
/* [폼과 선택 / Forms and selection] */
.ds-field[data-component="field"] {
    display: grid;
    align-content: start;
    grid-gap: var(--space-2);
    gap: var(--space-2);
    min-width: 0;
}
.ds-field[data-component="field"] > label {
    color: var(--text-primary);
    font-size: max(var(--text-min), 1rem);
    font-weight: var(--weight-label);
}
.ds-field[data-component="field"] > [data-component="field-control"],
.flow-page .ds-field[data-variant="flow"] > [data-component="field-control"] {
    --field-stroke-color: var(--stroke-control);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--control-size);
    padding: 11px 14px;
    border: 0;
    border-radius: var(--radius-control);
    box-shadow: inset 0 0 0 var(--stroke-width) var(--field-stroke-color);
    color: var(--text-primary);
    background: var(--surface-default);
    font: 400 max(var(--text-min), 1rem)/1.5 var(--font);
    transition: box-shadow var(--duration-feedback) var(--ease-standard), background-color var(--duration-feedback) var(--ease-standard), color var(--duration-feedback) var(--ease-standard);
}
.ds-field[data-component="field"][data-variant="flow"] > [data-component="field-control"],
.flow-page .ds-field[data-variant="flow"] > [data-component="field-control"] {
    min-height: var(--control-flow-field-size, 54px);
    padding: 14px 16px;
    border-radius: var(--radius-flow);
}
.ds-field[data-component="field"] > textarea {
    resize: vertical;
}
.ds-field[data-component="field"] > [data-component="field-control"]::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}
.ds-field[data-component="field"] > [data-component="field-control"]:disabled {
    color: var(--text-secondary);
    background: var(--surface-subtle);
    cursor: not-allowed;
}
.ds-field[data-component="field"] > [data-component="field-control"]:focus,
.flow-page .ds-field[data-variant="flow"] > [data-component="field-control"]:focus {
    outline: var(--focus-width) solid var(--border-focus);
    outline-offset: var(--focus-offset);
}
.ds-field[data-component="field"] > [data-component="field-control"][aria-invalid="true"],
.flow-page .ds-field[data-variant="flow"] > [data-component="field-control"][aria-invalid="true"] {
    --field-stroke-color: var(--semantic-error-border);
}
.ds-field[data-component="field"] > :is(.ds-field-error, .ds-field-hint) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
    line-height: 1.5;
}
.ds-field[data-component="field"] > .ds-field-error {
    color: var(--semantic-error);
    font-weight: 500;
}
.ds-check[data-component="checkbox"] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--control-size);
    font-size: max(var(--text-min), 1rem);
    cursor: pointer;
}
.ds-check[data-component="checkbox"] input {
    flex: none;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    accent-color: var(--text-primary);
}
.ds-check[data-component="checkbox"] input:focus-visible {
    outline: var(--focus-width) solid var(--border-focus);
    outline-offset: var(--focus-offset);
}
.ds-check[data-component="checkbox"]:has(input:disabled) {
    color: var(--action-disabled-text);
    cursor: not-allowed;
}
.ds-field.site-search-field {
    flex: 1 1;
    min-width: 0;
}
.site-search .ds-field > input[data-component="field-control"] {
    --field-stroke-color: var(--color-transparent);
    padding: 14px 0;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--color-detail-j5afio);
    font-size: max(var(--text-min), clamp(18px, 2vw, 26px));
}
.ds-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    padding: 0 !important;
    border: 0 !important;
}
/* [상태와 안내 / Status and feedback] */
.ds-badge[data-component="badge"] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--surface-subtle);
    font: 500 max(var(--text-min), 1rem)/1.5 var(--font);
}
.ds-badge.ds-badge-highlight[data-component="badge"] {
    background: var(--accent-highlight);
}
.ds-badge.ds-badge-info[data-component="badge"] {
    background: var(--accent-information);
}
.ds-badge[data-component="badge"][data-appearance="plain"] {
    padding: 0;
    border-radius: 0;
    background: var(--color-detail-j5afio);
}
.ds-notice[data-component="notice"] {
    --notice-stroke-color: var(--border-default);
    --glass-edge: var(--notice-stroke-color);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 0;
    border-radius: var(--radius-control);
    background: var(--color-transparent);
    color: var(--text-primary);
    font: 400 max(var(--text-min), 1rem)/1.5 var(--font);
}
.ds-notice[data-component="notice"] > svg {
    flex: none;
}
.ds-notice[data-component="notice"] > div {
    min-width: 0;
}
.ds-notice[data-component="notice"] strong {
    display: block;
    font-size: max(var(--text-min), 1rem);
    line-height: 1.5;
}
.ds-notice .ds-notice-content {
    color: var(--text-primary);
    font-size: max(var(--text-min), 1rem);
    line-height: 1.5;
}
.ds-notice strong + .ds-notice-content {
    margin-top: 6px;
}
.ds-notice .ds-notice-content > p {
    margin: 0;
}
.ds-notice[data-component="notice"][data-variant="flow"] {
    display: block;
    padding: 20px 22px;
    border-radius: var(--radius-flow);
    line-height: 1.7;
}
.ds-notice[data-component="notice"][data-variant="flow"][data-error="true"] {
    --notice-stroke-color: var(--semantic-error-border);
    padding: 14px 18px;
    margin: 0 0 22px;
    color: var(--semantic-error);
}
.ds-notice[data-component="notice"][data-variant="flow"][data-error="true"] .ds-notice-content {
    color: inherit;
}
.ds-notice[data-component="notice"]:focus {
    outline: var(--focus-width) solid var(--border-focus);
    outline-offset: var(--focus-offset);
}
.ds-notice[data-component="notice"][hidden] {
    display: none;
}
/* [탭과 기본 펼침 / Tabs and native disclosure] */
.ds-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    border-bottom: 1px solid var(--border-default);
}
.ds-tabs[aria-orientation="vertical"] {
    flex-direction: column;
}
.ds-tabs [role="tab"] {
    min-width: var(--control-size);
    min-height: var(--control-size);
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
    color: var(--text-secondary);
    background: var(--color-transparent);
    font: 400 max(var(--text-min), 1rem)/1.5 var(--font);
    cursor: pointer;
}
.ds-tabs [role="tab"][aria-selected="true"] {
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--stroke-selected);
    background: var(--surface-subtle);
    font-weight: 700;
}
.ds-tabs [role="tab"]:disabled {
    color: var(--action-disabled-text);
    cursor: not-allowed;
}
.ds-tabpanel {
    min-height: 110px;
    padding: 24px 0;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
.ds-tabpanel[hidden] {
    display: none;
}
.ds-disclosure[data-component="disclosure"] {
    border-block: 1px solid var(--border-default);
    background: var(--surface-default);
}
.ds-disclosure[data-component="disclosure"] > summary {
    min-height: 56px;
    padding: 16px;
    font-size: max(var(--text-min), 1rem);
    font-weight: 600;
    cursor: pointer;
}
.ds-disclosure[data-component="disclosure"] > p {
    margin: 0;
    padding: 0 16px 20px;
    color: var(--text-secondary);
    font-size: max(var(--text-min), 1rem);
}
/* [네이티브 모달 / Native modal]
   탐색 모달은 기존 너비를 유지하고 일반 모달만 공통 기본값을 사용합니다.
   Navigation dialogs retain their existing dimensions. */
.ds-dialog[data-component="dialog"]:not(.navigation-dialog):not(.ds-navigation-dialog) {
    max-height: calc(100dvh - 48px);
    overflow: auto;
    padding: 28px;
    border: 0;
    border-radius: var(--radius-dialog);
    box-shadow: inset 0 0 0 var(--stroke-width) var(--border-default);
    color: var(--text-primary);
    background: var(--surface-default);
}
.ds-dialog[data-component="dialog"]:not(.navigation-dialog):not(.ds-search-dialog):not(.ds-navigation-dialog) {
    width: min(560px, calc(100% - 32px));
}
.ds-dialog[data-component="dialog"]:not(.navigation-dialog)::-webkit-backdrop {
    background: var(--color-detail-1iq0iqd);
}
.ds-dialog[data-component="dialog"]:not(.navigation-dialog)::backdrop {
    background: var(--color-detail-1iq0iqd);
}
.ds-dialog.navigation-dialog {
    width: min(1100px, calc(100% - 40px));
    max-height: calc(100dvh - 80px);
    padding: clamp(24px, 4vw, 56px);
}
.ds-dialog.navigation-dialog::-webkit-backdrop {
    background: var(--color-detail-179bjkg);
}
.ds-dialog.navigation-dialog::backdrop {
    background: var(--color-detail-179bjkg);
}
.ds-dialog[data-component="dialog"][open] {
    animation: ds-dialog-enter var(--duration-feedback) var(--ease-standard);
}
@keyframes ds-dialog-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ds-button[data-context],
    .ds-field[data-component="field"] > [data-component="field-control"] {
        transition: none;
    }
    .ds-dialog[data-component="dialog"][open] {
        animation: none;
    }
}
@media (max-width: 600px) {
    .ds-dialog[data-component="dialog"]:not(.navigation-dialog):not(.ds-navigation-dialog) {
        padding: 20px;
    }
}
@media (max-width: 700px) {
    .ds-dialog.navigation-dialog {
        max-height: calc(100dvh - 32px);
        width: calc(100% - 24px);
        padding: 24px;
    }
}
/* [공통 비율 분배 / Shared proportional control layout]
   픽셀 폭 대신 전체 너비에서 간격을 뺀 비율을 사용합니다.
   Divide the available width after gaps instead of assigning pixel widths. */
.system-control-group {
    --control-group-gap: var(--space-3);
    --control-group-columns: var(--control-group-columns-compact);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--control-group-gap);
    inline-size: 100%;
    min-inline-size: 0;
    margin-inline: 0;
    padding: 0;
    list-style: none;
}
.system-control-group > .system-control-group-item {
    display: flex;
    flex: 1 1 calc((100% - var(--control-group-gap) * (var(--control-group-columns) - 1)) / var(--control-group-columns));
    min-inline-size: 0;
    max-inline-size: 100%;
}
.system-control-group-item > :is(a, button) {
    flex: 1 1 auto;
    align-self: stretch;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: var(--control-size);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}
/* [중간 화면과 넓은 화면 / Medium and wide viewports] */
@media (min-width: 48rem) {
    .system-control-group {
        --control-group-columns: var(--control-group-columns-medium);
    }
}
@media (min-width: 64rem) {
    .system-control-group {
        --control-group-columns: var(--control-group-columns-wide);
    }
}

/*# sourceMappingURL=design-system_1.css.map*/