@charset "utf-8";
/* Maker : H.J Jeon // E-Mail : jinia21@naver.com */

/* 버튼 · 폼은 form.css · 모달은 modal.css 에 따로 둠 */
@import "./form.css";
@import "./modal.css";

/* 반응형은 모바일 먼저 — 쿼리 밖이 폰, min-width 600 · 840 · 1240 에서 덮음 (theme-basic.css 기준표)
   넓은 쪽 쿼리의 inherit · revert · auto · none 은 「폰에서만 더한 값을 되돌림」 뜻 */

html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-thumb {
    background-color: var(--color-point);
    border-radius: 10px;
}

/* 콘텐츠 폭 · 헤더 높이는 theme-basic.css ① 프로젝트 설정 */
html,
body {
    word-break: keep-all;
}

body {
    overflow-x: hidden;
    background-color: var(--color-surface);
}

/* 헤더가 fixed 라 그만큼 아래로 밀어 줌 */
.wrapper {
    padding-top: var(--header-space, var(--header-height));
}


/* ============================================================ */
/* 공통 컴포넌트 */
/* ============================================================ */

.inner {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.inner.wide {
    max-width: var(--container-wide);
}

/* 본문 안 형제끼리의 기본 간격. 컴포넌트가 자기 여백을 안 들고 다니게 함.
   2차 메뉴 화면은 .side-body, 3차는 .snb-body, 메뉴가 없으면 .flow 를 붙여 씀.
   .sub-content 를 앞에 붙인 건 뒤에 오는 컴포넌트가 덮지 못하게 하려는 것 */
.sub-content .side-body>*+*,
.sub-content .snb-body>*+*,
.sub-content .flow>*+* {
    margin-top: var(--gap-flow);
}

/* 목록 끝과 페이지 이동 사이만 더 띄움 */
.sub-content .side-body>.paging,
.sub-content .side-body>.paging-row,
.sub-content .snb-body>.paging,
.sub-content .snb-body>.paging-row,
.sub-content .flow>.paging,
.sub-content .flow>.paging-row {
    margin-top: var(--space-3xl);
}

/* 섹션 제목 줄 — 제목 + 우측 컨트롤 */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

/* 제목과 우측 유틸의 높이를 맞추고 싶을 때 */
.section-head.center {
    align-items: center;
}

.section-tit {
    font-size: var(--text-title);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-title);
}

/* 좁은 자리(사이드 등)에서 쓰는 작은 제목 */
.section-tit.size-xs {
    font-size: var(--text-subtitle);
}

.section-tit.size-md {
    font-size: var(--text-title-lg);
}

.section-tit.size-lg {
    font-size: var(--text-headline);
}

.section-desc {
    margin: 6px 0 0;
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
    line-height: 1.4;
}

/* 제목 오른쪽에 버튼이 여러 개 올 때 묶는 상자 */
.section-util {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
}

/* 패널 안에 들어가는 작은 제목줄 */
.section-head.size-sm .section-tit {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

.section-head.size-sm .ctrl-btn {
    --ctrl-size: 44px;
}

/* 제목 크기는 --text-* 가 구간마다 저절로 줄임 */
.section-head .ctrl-btn {
    --ctrl-size: 42px;
}

@media screen and (min-width: 600px) {
    .section-head .ctrl-btn {
        --ctrl-size: inherit;
    }
}


/* 좌측 메뉴 2단 — 본문은 그대로 두고 감싸기만 하면 어느 페이지에나 붙음 */
.side-layout {
    display: block;
    grid-template-columns: var(--lnb-width) minmax(0, 1fr);
    gap: var(--space-3xl);

    --lnb-width: 240px;
}

.side-body {
    min-width: 0;
}

.lnb {
    position: relative;
    top: auto;
    align-self: start;

    --lnb-top: calc(var(--header-height-slim) + 20px);
}

body:has(.header.is-hidden) .lnb {
    --lnb-top: 20px;
}

.lnb-list {
    margin: 0;
    padding: 0;
    border-top: 0;
    list-style: none;
}

.lnb-item {
    border-bottom: 0;
}

.lnb-link {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 0 24px;
    font-size: var(--font-size-lg);
    color: var(--color-text-sub);
    text-decoration: none;
    transition: background-color var(--duration-fast), color var(--duration-fast);
}

.lnb-link:hover,
.lnb-link:focus-visible {
    background-color: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-text);
}

.lnb-item.active .lnb-link {
    background-color: var(--color-point);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

/* ------------------------------------------------------------ */
/* 3차 메뉴 (.snb) — 2차인 .lnb 와 섞이지 않게 배치부터 따로 둠 */
/* ------------------------------------------------------------ */

.snb-layout {
    display: block;
    grid-template-columns: var(--snb-width) minmax(0, 1fr);
    gap: var(--space-3xl);

    --snb-width: 200px;
}

.snb-body {
    min-width: 0;
}

.snb {
    position: static;
    top: calc(var(--header-height-slim) + 20px);
    align-self: start;
}

/* 어느 갈래 안인지 알려 주는 머리 */
.snb-tit {
    display: none;
    margin-bottom: var(--space-xl);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
}

.snb-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 테두리도 바탕도 없이 글자만. .lnb 와 무게가 확실히 갈림 */
.snb-link {
    display: block;
    padding: 12px 0;
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.snb-link:hover,
.snb-link:focus-visible {
    color: var(--color-text);
}

/* 고른 항목 — 넓은 화면에서는 색과 굵기만 */
.snb-item.active .snb-link {
    font-weight: var(--font-weight-bold);
    color: var(--color-point);
}


.snb {
    margin-bottom: var(--space-xl);
}

.snb-list {
    display: flex;
    overflow-x: auto;
    gap: var(--space-lg);
    scrollbar-width: none;
}

.snb-list::-webkit-scrollbar {
    display: none;
}

.snb-link {
    white-space: nowrap;
}

.snb-item.active .snb-link {
    border-bottom-color: var(--color-point);
}

body:has(.lnb) .sub-visual.line {
    border-bottom: 0;
}

body:has(.lnb) .sub-content {
    padding-top: 0;
}

.lnb {
    margin-bottom: var(--space-xl);
}

.lnb::before {
    position: absolute;
    left: 50%;
    width: 100vw;
    height: 1px;
    background-color: var(--color-line);
    transform: translateX(-50%);
    content: '';
    top: 0;
}

.lnb::after {
    position: absolute;
    left: 50%;
    width: 100vw;
    height: 1px;
    background-color: var(--color-line);
    transform: translateX(-50%);
    content: '';
    bottom: 0;
}

.lnb-list {
    display: flex;
    height: 50px;
    margin-inline: calc(var(--container-padding) * -1);
    padding-inline: var(--container-padding);
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.lnb-item {
    flex: 1 0 auto;
}

.lnb-link {
    justify-content: center;
    height: 100%;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

@media screen and (min-width: 600px) {
    .lnb-list {
        height: 56px;
    }
}

@media screen and (min-width: 840px) {
    .side-layout,
    .snb-layout {
        display: grid;
    }

    .snb {
        position: sticky;
        margin-bottom: 0;
    }

    .snb-tit {
        display: block;
    }

    .snb-list {
        display: revert;
        overflow-x: visible;
        gap: normal;
        scrollbar-width: auto;
    }

    .snb-list::-webkit-scrollbar {
        display: revert;
    }

    .snb-link {
        padding: 9px 0;
        white-space: inherit;
    }

    .snb-item.active .snb-link {
        border-bottom-color: currentcolor;
    }

    .lnb {
        position: sticky;
        top: var(--lnb-top);
        margin-bottom: 0;
    }

    .lnb::before {
        position: static;
        left: auto;
        width: auto;
        height: auto;
        background-color: transparent;
        transform: none;
        content: none;
        top: auto;
    }

    .lnb::after {
        position: static;
        left: auto;
        width: auto;
        height: auto;
        background-color: transparent;
        transform: none;
        content: none;
        bottom: auto;
    }

    .lnb-list {
        display: revert;
        height: auto;
        margin-inline: 0;
        padding-inline: 0;
        overflow-x: visible;
        overscroll-behavior-x: auto;
        border-top: 2px solid var(--color-text);
    }

    .lnb-item {
        flex: 0 1 auto;
        border-bottom: 1px solid var(--color-line);
    }

    .lnb-link {
        justify-content: normal;
        height: auto;
        min-height: 58px;
        padding: 14px var(--space-lg);
        font-size: var(--font-size-md);
        font-weight: inherit;
        white-space: inherit;
    }
}


/* 지도 — 네이버 지도가 이 안에 그려짐 (common.js naverMap). 비율은 --map-ratio 로 덮음 */
.map {
    position: relative;
    width: 100%;
    aspect-ratio: var(--map-ratio, 16 / 9);
    overflow: hidden;
    border-radius: var(--map-radius, var(--radius-lg));
    background-color: var(--color-bg-gray);
}

/* 키가 없거나 못 불러왔을 때 — 자리만 잡고 안내 */
.map.is-empty::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-weak);
    text-align: center;
    content: attr(data-empty);
}

/* 표시 이름 말풍선 */
.map-info {
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

.map {
    --map-ratio: 4 / 3;
}

@media screen and (min-width: 600px) {
    .map {
        --map-ratio: 16 / 9;
    }
}

/* 내용이 없을 때 — 목록·검색 결과 어디서나 씀 */
.empty {
    padding: var(--empty-pad) 20px;
    text-align: center;

    --empty-pad: 60px;
}

.empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: var(--space-lg);
    border-radius: 50%;
    background-color: var(--color-bg-soft);
    color: var(--color-text-weak);
}

.empty-ico :is(svg, i[class*="ph-"]) {
    width: 28px;
    font-size: 28px;
    height: 28px;
    stroke-width: 1.6;
}

.empty-text {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.empty-sub {
    margin: 10px 0 0;
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
    line-height: 1.6;
}

.empty-sub b {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-sub);
}

.empty .btn {
    margin-top: var(--space-2xl);
}

@media screen and (min-width: 600px) {
    .empty {
        --empty-pad: 90px;
    }

    .empty-ico {
        width: 84px;
        height: 84px;
    }

    .empty-ico :is(svg, i[class*="ph-"]) {
        width: 34px;
        font-size: 34px;
        height: 34px;
    }

    .empty-text {
        font-size: var(--font-size-xl);
    }
}


/* 아직 못 정한 화면에 잠깐 놓는 박스. 내용이 정해지면 통째로 지움 */
.ready {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: var(--ready-pad) var(--space-xl);
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-2xl);
    background-color: var(--color-bg-soft);
    text-align: center;

    --ready-pad: 50px;
}

.ready .chip {
    margin-bottom: var(--space-lg);
}

.ready-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: var(--space-lg);
    border-radius: 50%;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-point);
}

.ready-ico :is(svg, i[class*="ph-"]) {
    width: 30px;
    font-size: 30px;
    height: 30px;
    stroke-width: 1.5;
}

.ready-tit {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1.4;
}

.ready-text {
    max-width: 560px;
    margin: 12px 0 0;
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
    line-height: 1.7;
}

.ready-text b {
    font-weight: var(--font-weight-semibold);
    color: var(--color-point);
}

.ready-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-lg) 0 0;
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
}

.ready-note :is(svg, i[class*="ph-"]) {
    width: var(--icon-sm);
    font-size: var(--icon-sm);
    height: var(--icon-sm);
    flex-shrink: 0;
}

.ready {
    padding-inline: var(--space-lg);
}

@media screen and (min-width: 600px) {
    .ready {
        padding-inline: 0;
        --ready-pad: 80px;
    }

    .ready-ico {
        width: 88px;
        height: 88px;
    }

    .ready-ico :is(svg, i[class*="ph-"]) {
        width: 36px;
        font-size: 36px;
        height: 36px;
    }

    .ready-tit {
        font-size: var(--font-size-2xl);
    }
}


/* 라벨/값 표 */
.info-list {
    display: grid;
    grid-template-columns: var(--info-th-width) minmax(0, 1fr);
    row-gap: 8px;
    margin: 0;
    line-height: 1.4;

    --info-th-width: 80px;
}

.info-list dt,
.info-list dd {
    margin: 0;
}

.info-list-th {
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
}

.info-list-td {
    font-size: var(--font-size-md);
    color: var(--color-text-sub);
}

/* 좁은 칸에서는 한 줄로 자름 */
.info-list.one-line .info-list-td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* 알약 칩 — 태그, 배지 */
.chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    height: var(--chip-height);
    padding: 0 var(--chip-pad);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    font-size: var(--font-size-md);
    font-style: normal;
    color: var(--color-text-weak);
    white-space: nowrap;

    --chip-height: 34px;
    --chip-pad: 16px;
}

.chip :is(svg, i[class*="ph-"]) {
    flex-shrink: 0;
    width: var(--chip-ico);
    font-size: var(--chip-ico);
    height: var(--chip-ico);

    --chip-ico: 15px;
}

/* 크기 — 기본 34 · mini 28 · sm 20(뱃지) */
.chip.mini {
    --chip-height: 28px;
    --chip-pad: 12px;
    --chip-ico: 14px;
}

.chip.sm {
    line-height: 1;

    --chip-height: 20px;
    --chip-pad: 8px;
}

/* 사진 위에 올라가는 태그 */
.chip.on-photo {
    border-color: color-mix(in srgb, var(--color-white) 20%, transparent);
    background-color: color-mix(in srgb, var(--color-text) 45%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: var(--font-size-md);
    color: var(--color-white);

    --chip-height: 30px;
    --chip-pad: 14px;
}

/* 처리 상태 */
.chip.state-ing {
    border-color: var(--color-sub);
    background-color: color-mix(in srgb, var(--color-sub) 8%, transparent);
    color: var(--color-sub-hover);
}

.chip.state-done {
    border-color: var(--color-success);
    background-color: var(--color-success);
    color: var(--color-white);
}

.chip.state-no {
    border-color: var(--color-accent);
    /* --color-accent 는 대비가 3.5 라 글자로 못 씀.
       바탕도 8% 면 --color-error 가 4.36 이라 5% 로 옅게 깖 */
    background-color: color-mix(in srgb, var(--color-accent) 5%, transparent);
    color: var(--color-error);
}

/* 툴팁 */
.tooltip {
    position: relative;
    display: inline-flex;
}

.tooltip-box {
    position: absolute;
    bottom: calc(100% + var(--tooltip-gap));
    left: 50%;
    z-index: var(--z-tooltip);
    width: max-content;
    max-width: var(--tooltip-max);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background-color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    color: var(--color-white);
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    transform: translate(var(--tt-x), var(--tt-y));
    transition: opacity var(--duration-fast), visibility var(--duration-fast), transform var(--duration-fast);
    pointer-events: none;

    --tooltip-gap: 16px;
    --tooltip-max: 220px;
    --tt-x: -50%;
    --tt-y: 4px;
}

/* 말풍선 꼬리 — 네모를 45도 돌려 붙임 */
.tooltip-box::after {
    position: absolute;
    top: 100%;
    left: var(--tt-tail);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background-color: inherit;
    transform: rotate(45deg);
    content: '';

    --tt-tail: 50%;
}

.tooltip:hover .tooltip-box,
.tooltip:has(:focus-visible) .tooltip-box {
    visibility: visible;
    opacity: 1;

    --tt-y: 0;
}


/* 아래로 */
.tooltip-box.bottom {
    top: calc(100% + var(--tooltip-gap));
    bottom: auto;

    --tt-y: -4px;
}

.tooltip-box.bottom::after {
    top: auto;
    bottom: 100%;
    margin: 0 0 -4px -4px;
}


.tooltip-box.left {
    left: auto;
    right: 0;

    --tt-x: 0;
}

.tooltip-box.left::after {
    left: auto;
    right: 12px;
    margin-left: 0;
    margin-right: -4px;
}

/* 마우스 기기에서만 — 손가락 기기는 hover 가 없어 툴팁이 눌린 채 남음.
   폭이 아니라 입력 방식으로 가름 (폴드 펼침 · 태블릿 가로도 안 나옴) */
.tooltip-box {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    :root:not([data-touch]) .tooltip-box {
        display: block;
    }
}


@media (prefers-reduced-motion: reduce) {
    .tooltip-box {
        transition: opacity var(--duration-fast), visibility var(--duration-fast);

        --tt-y: 0;
    }
}


/* 안내 풍선 — 느낌표 단추에 대거나 누르면 옆에 나옴.
   단추를 감싸면 오버·초점에서만 나옴 */
.help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.help-tip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-text-weak);
    cursor: pointer;
    transition: color var(--duration-fast);
}

.help-tip-btn :is(svg, i[class*="ph-"]) {
    width: 18px;
    font-size: 18px;
    height: 18px;
}

.help-tip-btn:hover,
.help-tip-btn:focus-visible,
.help-tip.is-open .help-tip-btn {
    color: var(--color-point);
}

/* 감싼 단추가 좁은 화면에서 줄을 꽉 채우도록 */
.help-tip > .btn {
    flex: 1 1 auto;
}

/* 기본은 오른쪽. .left · .top · .bottom 으로 바꿈 */
/* 기본(폰) — 옆자리가 없어 방향과 상관없이 아래로 떨굼. 600 이상에서 방향대로 */
.help-tip-box {
    position: absolute;
    top: calc(100% + var(--help-tip-gap));
    left: 50%;
    z-index: var(--z-tooltip);
    width: max-content;
    max-width: min(var(--help-tip-max), calc(100vw - var(--container-padding) * 2));
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background-color: var(--color-text);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-white);
    text-align: left;
    white-space: normal;
    /* 숨긴 풍선도 자리를 차지하면 좁은 화면에 가로 스크롤이 생김. 아예 뺌 */
    display: none;
    transform: translate(var(--ht-x), var(--ht-y));
    transition: opacity var(--duration-fast), translate var(--duration-fast), display var(--duration-fast) allow-discrete;
    pointer-events: none;

    --help-tip-gap: 12px;
    --help-tip-max: 260px;
    --ht-x: -24px;
    --ht-y: 0;
    --ht-move: 0 -4px;
}

/* 꼬리 — 네모를 45도 돌려 붙임 */
.help-tip-box::after {
    position: absolute;
    bottom: 100%;
    left: 24px;
    width: 8px;
    height: 8px;
    margin: 0 0 -4px -4px;
    background-color: inherit;
    transform: rotate(45deg);
    content: '';
}

/* 감싼 단추는 줄을 꽉 채움. 가운데서 시작하면 화면 밖으로 나감 */
.help-tip:has(> .btn) .help-tip-box {
    left: 0;

    --ht-x: 0;
}

/* 오른쪽 끝 자리면 .left — 풍선 오른쪽 끝을 맞춤 */
.help-tip-box.left {
    right: 50%;
    left: auto;

    --ht-x: 24px;
}

.help-tip-box.left::after {
    right: 24px;
    left: auto;
    margin: 0 -4px -4px 0;
}

@media (hover: hover) {
    .help-tip:hover .help-tip-box {
        display: block;
    }
}

.help-tip:has(:focus-visible) .help-tip-box,
.help-tip.is-open .help-tip-box {
    display: block;
}

/* 나타날 때 시작 모습 */
@starting-style {
    .help-tip .help-tip-box {
        opacity: 0;
        translate: var(--ht-move);
    }
}

/* 눌러 닫았거나 Esc — 마우스가 떠날 때까지 안 나옴 */
.help-tip.is-shut .help-tip-box {
    display: none;
}

/* 600 이상 — 방향대로. 기본은 오른쪽, .left 왼쪽, .top 위, .bottom 아래 */
@media screen and (min-width: 600px) {
    .help-tip-box,
    .help-tip:has(> .btn) .help-tip-box {
        top: 50%;
        left: calc(100% + var(--help-tip-gap));
        max-width: var(--help-tip-max);

        --ht-x: 0;
        --ht-y: -50%;
        --ht-move: -4px 0;
    }

    .help-tip-box::after {
        top: 50%;
        right: 100%;
        bottom: auto;
        left: auto;
        margin: -4px -4px 0 0;
    }

    .help-tip-box.left,
    .help-tip:has(> .btn) .help-tip-box.left {
        right: calc(100% + var(--help-tip-gap));
        left: auto;

        --ht-x: 0;
        --ht-move: 4px 0;
    }

    .help-tip-box.left::after {
        right: auto;
        left: 100%;
        margin: -4px 0 0 -4px;
    }

    .help-tip-box.top,
    .help-tip-box.bottom,
    .help-tip:has(> .btn) .help-tip-box.top,
    .help-tip:has(> .btn) .help-tip-box.bottom {
        left: 50%;

        --ht-x: -50%;
        --ht-y: 0;
    }

    .help-tip-box.top,
    .help-tip:has(> .btn) .help-tip-box.top {
        top: auto;
        bottom: calc(100% + var(--help-tip-gap));

        --ht-move: 0 4px;
    }

    .help-tip-box.bottom,
    .help-tip:has(> .btn) .help-tip-box.bottom {
        top: calc(100% + var(--help-tip-gap));

        --ht-move: 0 -4px;
    }

    .help-tip-box.top::after,
    .help-tip-box.bottom::after {
        right: auto;
        left: 50%;
        margin: -4px 0 0 -4px;
    }

    .help-tip-box.top::after {
        top: 100%;
        bottom: auto;
    }

    .help-tip-box.bottom::after {
        top: auto;
        bottom: 100%;
        margin: 0 0 -4px -4px;
    }
}

/* 라벨 안에 둘 때. 별표 뒤로 보냄 */
.form-label:has(> .help-tip) {
    display: flex;
    align-items: flex-start;
}

.form-label > .help-tip {
    order: 1;
    height: 1em;
    margin-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .help-tip-box {
        transition: none;
    }
}

/* 썸네일 — 비율은 --thumb-ratio 만 덮음. height 를 직접 주지 않음
   기본 사진 4:3 · .video 16:9 · .square 1:1. 마우스 올림 확대는 .thumb-zoom 을 같이 */
.thumb {
    position: relative;
    display: block;
    aspect-ratio: var(--thumb-ratio);
    overflow: hidden;
    border-radius: var(--thumb-radius);
    background-color: var(--color-bg-gray);

    --thumb-ratio: var(--ratio-photo);
    --thumb-radius: var(--radius-md);
}

.thumb.video {
    --thumb-ratio: var(--ratio-video);
}

.thumb.square {
    --thumb-ratio: var(--ratio-square);
}

.thumb > img,
.thumb > video,
.thumb > picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 사진이 없거나 깨짐 — common.js noImg 가 그림을 빼고 붙임. 가운데 자리 아이콘만 */
.thumb.is-noimg::after {
    position: absolute;
    inset: 0;
    background-color: var(--color-text-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16Zm0 16v102.75l-26.07-26.06a16 16 0 0 0-22.63 0l-20 20-44-44a16 16 0 0 0-22.62 0L40 149.37V56ZM40 172l52-52 80 80H40Zm176 28h-21.37l-36-36 20-20L216 181.38V200Zm-72-100a12 12 0 1 1 12 12 12 12 0 0 1-12-12Z'/%3E%3C/svg%3E") center / 32% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16Zm0 16v102.75l-26.07-26.06a16 16 0 0 0-22.63 0l-20 20-44-44a16 16 0 0 0-22.62 0L40 149.37V56ZM40 172l52-52 80 80H40Zm176 28h-21.37l-36-36 20-20L216 181.38V200Zm-72-100a12 12 0 1 1 12 12 12 12 0 0 1-12-12Z'/%3E%3C/svg%3E") center / 32% no-repeat;
    content: '';
}

/* 썸네일 확대 — 마우스를 올리면 사진이 살짝 커짐. .thumb 와 같이 씀 */
.thumb-zoom {
    display: block;
    overflow: hidden;
}

.thumb-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

a:hover .thumb-zoom img,
a:focus-visible .thumb-zoom img,
a.thumb-zoom:hover img,
a.thumb-zoom:focus-visible img {
    transform: scale(1.08);
}

/* 동작 최소화를 설정한 사용자에게는 확대하지 않음 */
@media (prefers-reduced-motion: reduce) {
    .thumb-zoom img {
        transition: none;
    }

    a:hover .thumb-zoom img,
    a:focus-visible .thumb-zoom img,
    a.thumb-zoom:hover img,
    a.thumb-zoom:focus-visible img,
    :has(a:hover) .thumb-zoom img,
    :has(a:focus-visible) .thumb-zoom img {
        transform: none;
    }
}


/* 공유 — 버튼 아래로 펼쳐지는 SNS 목록 */
.share {
    position: relative;
}

.share-box {
    position: fixed;
    top: auto;
    right: 0;
    z-index: calc(var(--z-modal) + 1);
    min-width: 0;
    padding: 0 var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
    border: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%);
    transition: transform var(--duration), visibility var(--duration);
}

.share.is-open .share-box {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* 시트 머리 — 폰(600 미만)에서만 나옴 */
.share-head {
    display: flex;
}

.share-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.share-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    font-family: inherit;
    font-size: var(--font-size-md);
    color: var(--color-text-sub);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast), color var(--duration-fast);
}

.share-item:hover,
.share-item:focus-visible {
    background-color: var(--color-bg-soft);
    color: var(--color-point);
}

.share-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

.share-ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* URL 복사만 그림 대신 아이콘 */
.share-ico.is-url {
    border-radius: 50%;
    background-color: var(--color-bg-soft);
    color: var(--color-text-sub);
}

.share-ico.is-url :is(svg, i[class*="ph-"]) {
    width: 15px;
    font-size: 15px;
    height: 15px;
}

/* 복사가 끝나면 잠깐 초록으로 */
.share-ico.is-done {
    background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
    color: var(--color-success);
}

/* 좁은 화면에서는 아래에서 올라오는 바텀 시트로 바뀜 */
.share::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-modal);
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration), visibility var(--duration);
    content: '';
}

.share.is-open::after {
    visibility: visible;
    opacity: 1;
}

.share-box {
    bottom: 0;
    left: 0;
    max-height: 80vh;
    overflow-y: auto;
}

.share-head {
    position: sticky;
    top: 0;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: 10px 0 var(--space-sm);
    background-color: var(--color-surface);
}

.share-grab {
    width: 40px;
    height: 4px;
    border-radius: var(--radius-pill);
    background-color: var(--color-line);
}

.share-tit {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.share-close {
    position: absolute;
    right: 0;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--color-text-weak);
    cursor: pointer;
}

.share-close :is(svg, i[class*="ph-"]) {
    width: 22px;
    font-size: 22px;
    height: 22px;
}

@media screen and (min-width: 600px) {
    .share::after {
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
        width: auto;
        height: auto;
        background-color: transparent;
        visibility: inherit;
        opacity: 1;
        transition: none;
        content: none;
    }

    .share.is-open::after {
        visibility: inherit;
    }

    .share-box {
        position: absolute;
        top: calc(100% + 8px);
        bottom: auto;
        left: auto;
        z-index: var(--z-dropdown);
        min-width: 200px;
        max-height: none;
        overflow-y: visible;
        padding: 8px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        transform: translateY(-6px);
        transition: opacity var(--duration-fast), visibility var(--duration-fast), transform var(--duration-fast);
    }

    .share-head {
        position: static;
        top: auto;
        display: none;
        flex-direction: row;
        align-items: normal;
        gap: normal;
        padding: 0;
        background-color: transparent;
    }

    .share-grab {
        width: auto;
        height: auto;
        border-radius: 0;
        background-color: transparent;
    }

    .share-tit {
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
    }

    .share-close {
        position: static;
        right: auto;
        bottom: auto;
        display: revert;
        align-items: normal;
        justify-content: normal;
        width: auto;
        height: auto;
        color: inherit;
        cursor: inherit;
    }

    .share-close :is(svg, i[class*="ph-"]) {
        width: auto;
        font-size: inherit;
        height: auto;
    }

    .share-item {
        padding: 8px 10px;
    }

    .share-ico {
        width: 26px;
        height: 26px;
    }
}


/* 링크로 쓰는 칩 (태그 검색 등) */
a.chip {
    text-decoration: none;
    transition: border-color var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast);
}

a.chip:hover,
a.chip:focus-visible {
    border-color: var(--color-point);
    color: var(--color-point);
}

a.chip.on-photo:hover,
a.chip.on-photo:focus-visible {
    border-color: color-mix(in srgb, var(--color-white) 60%, transparent);
    background-color: color-mix(in srgb, var(--color-text) 75%, transparent);
    color: var(--color-white);
}


.page-inner {
    max-width: 1240px;
}
.page-lead:first-child {
    margin-top: 0;
}

.page-lead {
    margin: 40px 0 0;
    font-size: var(--text-lead);
    color: var(--color-text);
    line-height: 1.6;
    text-align: center;
}
.page-lead b {
    font-weight: var(--font-weight-bold);
}
.page-sec {
    margin-top: 50px;
}
.page-sec-tit {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* 왼쪽에 대표색 막대가 붙는 소제목 */
.page-sec-tit.bar {
    padding-left: 12px;
    border-left: 3px solid var(--color-point);
}
.page-sec-desc {
    margin: 12px 0 0;
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
    line-height: 1.5;
}

/* 안내 박스 — 페이지 위쪽에서 지켜야 할 것을 알려 줌 */
.notice {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-soft);
    list-style: none;
}

.notice li {
    position: relative;
    padding-left: 14px;
    font-size: var(--font-size-md);
    color: var(--color-text-sub);
    line-height: 1.6;
}
.notice li+li {
    margin-top: 6px;
}
.notice li::before {
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-text-weak);
    content: '';
}
.notice b {
    font-weight: var(--font-weight-bold);
    color: var(--color-sub);
}

/* 꼭 지켜야 하는 줄. --color-accent 는 흰 바탕 대비가 3.5 라 못 씀 */
.notice em {
    font-style: normal;
    color: var(--color-error);
}

/* 글머리를 체크로 바꾸는 안내 */
.notice.check li {
    padding-left: 24px;
}

.notice.check li::before {
    top: 0.12em;
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-sub);
    content: '\2713';
}
.notice+.form {
    margin-top: var(--space-2xl);
}


/* 서브 공통 :: 반응형 (폼 쪽은 form.css) */
.page-lead {
    margin-top: 30px;
}

@media screen and (min-width: 840px) {
    .notice {
        padding: var(--space-lg) 28px;
    }

    .page-lead {
        margin-top: 0;
    }

    .page-sec {
        margin-top: 70px;
    }
}

.step-no {
    font-size: var(--font-size-md);
}

.step-label {
    font-size: var(--font-size-md);
}

@media screen and (min-width: 600px) {
    .step-no,
    .step-label {
        font-size: inherit;
    }
}


/* 단계 표시 */
.step {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.step-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.step-no {
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-weak);
}

/* 점과 점을 잇는 선. 첫 칸 왼쪽과 마지막 칸 오른쪽은 그리지 않음 */
.step-dot {
    position: relative;
    display: block;
    height: 20px;
    margin: 12px 0;
}

.step-dot::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-line);
    content: '';
}

.step-item:first-child .step-dot::before {
    left: 50%;
    width: 50%;
}

.step-item:last-child .step-dot::before {
    width: 50%;
}

.step-dot::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-line);
    transform: translate(-50%, -50%);
    content: '';
}

.step-label {
    display: block;
    font-size: var(--font-size-lg);
    color: var(--color-text-weak);
}

/* 지나온 칸 */
.step-item.done .step-no,
.step-item.done .step-label {
    color: var(--color-text-sub);
}

.step-item.done .step-dot::after {
    background-color: var(--color-point);
}

/* 지금 칸 — 점이 커지고 가운데가 비어 보임 */
.step-item.current .step-no {
    color: var(--color-point);
}

.step-item.current .step-label {
    font-weight: var(--font-weight-bold);
    color: var(--color-point);
}

.step-item.current .step-dot::after {
    width: 20px;
    height: 20px;
    border: 5px solid var(--color-point);
    background-color: var(--color-surface);
}


/* 슬라이딩 탭 — 고른 칸 뒤 바탕이 옆으로 미끄러짐 (common.js tabSlide) */
.tab-slide {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 탭이 많아 좁은 화면(320)을 넘으면 밀어서 봄. 활성 배경도 같이 움직임 */
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-slide::-webkit-scrollbar {
    display: none;
}

.tab-slide-item {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.tab-slide-btn {
    border: none;
    background-color: transparent;
    font-size: inherit;
    color: var(--color-text-sub);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--duration);
}

.tab-slide-item:not(.active) .tab-slide-btn:hover {
    color: var(--color-text);
}

.tab-slide-item.active .tab-slide-btn {
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
}

.tab-slide-focus {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0;
    width: 0;
    height: var(--tab-focus-height, 40px);
    border-radius: var(--tab-focus-radius, 20px);
    background-color: var(--color-point);
    transform: translateY(-50%);
    transition: left var(--duration) var(--ease), width var(--duration) var(--ease);
    pointer-events: none;
}

/* 최초 렌더·리사이즈 때는 애니메이션 없이 자리만 잡음 */
.tab-slide.no-anim .tab-slide-focus {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .tab-slide-focus {
        transition: none;
    }
}


/* 밑줄 탭 — 아래 선을 가로지르고 고른 칸만 굵은 선이 얹힘 */
.tab-line {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-line);
    list-style: none;
}

/* 고른 탭 아래 막대. 버튼마다 그리지 않고 하나를 옮김 */
.tab-line::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: var(--tab-w, 0);
    height: 3px;
    background-color: var(--color-point);
    transform: translateX(var(--tab-x, 0));
    transition: transform var(--duration), width var(--duration);
    content: '';
}

.tab-line-btn {
    display: block;
    width: 100%;
    height: 60px;
    padding: 0 var(--space-sm);
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background-color: transparent;
    font-family: inherit;
    font-size: var(--font-size-lg);
    color: var(--color-text-weak);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--duration-fast), color var(--duration-fast);
}

.tab-line-item {
    flex: 1 1 0;
    min-width: 0;
}

/* tab-swipe : 폰(600 미만)에서 탭줄을 밀어 봄 (JS 가 is-swipe 를 붙임) */
.tab-swipe.is-swipe {
    overflow: hidden;
    margin-bottom: var(--tab-swipe-gap, 0);
    border-bottom: 1px solid var(--color-line);
}

/* 밀리는 건 탭줄이라 아래 선과 여백은 바깥 상자가 대신 짐 */
.tab-swipe.is-swipe .tab-line {
    margin-bottom: 0;
    border-bottom: 0;
    transition-property: transform;
}

.tab-swipe.is-swipe .tab-line-item {
    flex: 0 0 auto;
}

.tab-swipe.is-swipe .tab-line-btn {
    padding: 0 var(--space-md);
}

.tab-line-btn:hover {
    color: var(--color-text);
}

.tab-line-btn[aria-selected="true"] {
    font-weight: var(--font-weight-bold);
    color: var(--color-point);
}


@media (prefers-reduced-motion: reduce) {
    .tab-line::after {
        transition: none;
    }
}

/* 밑줄 탭이 바꾸는 영역 — 고른 것(.active)만 보임 (common.js tabLine) */
.tab-panel:not(.active) {
    display: none;
}


/* 목록 표 — 게시판·주문내역처럼 머리줄이 위에 있는 표.
   칸 폭은 <colgroup> 으로 정하고, 폭을 안 준 칸(보통 제목)이 남는 자리를 다 가짐 */
.basic-table {
    width: 100%;
    min-width: var(--table-min);
    border-top: 2px solid var(--color-text);
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--font-size-md);
    color: var(--color-text-sub);
    text-align: center;

    /* 이보다 좁아지면 .table-scroll 이 옆으로 굴림 */
    --table-min: 720px;
    --table-row: 56px;
    --table-pad: 10px;
}

.basic-table th,
.basic-table td {
    height: var(--table-row);
    padding: 10px var(--table-pad);
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.basic-table thead th {
    height: 56px;
    background-color: var(--color-bg-gray);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
}

/* 제목처럼 긴 칸. 안의 글은 .line-cut 으로 한 줄 자름 */
.basic-table .is-left {
    text-align: left;
}

.basic-table td a {
    color: var(--color-text);
    text-decoration: none;
}

.basic-table td a:hover,
.basic-table td a:focus-visible {
    color: var(--color-point);
    text-decoration: underline;
}

/* 제목 뒤에 붙는 뱃지(새 글 · 첨부)가 줄바꿈으로 떨어지지 않게 */
.table-subject {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.table-subject > a {
    min-width: 0;
}

/* 첨부 같은 표시 아이콘. 그냥 두면 24px 로 커짐 */
.table-subject > :is(svg, i[class*="ph-"]) {
    flex-shrink: 0;
    width: var(--icon-sm);
    font-size: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--color-text-weak);
}

/* 윗줄에 고정되는 공지 */
.basic-table tr.is-notice td {
    background-color: var(--color-bg-soft);
}

/* 체크박스로 고른 줄 */
.basic-table tr:has(.basic-check-input:checked) td {
    background-color: color-mix(in srgb, var(--color-point) 3%, transparent);
}

/* 내용이 없을 때 — 칸을 다 합쳐 한 칸으로 씀 */
.basic-table td.is-empty {
    height: 200px;
    color: var(--color-text-weak);
}

/* 좁은 화면에서 표를 옆으로 굴리는 상자 */
.table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

@media screen and (min-width: 600px) {
    .basic-table {
        --table-row: 64px;
        --table-pad: 12px;
    }
}


/* 동영상 임베드 — 비율은 --embed-ratio 만 덮음 */
.embed-container {
    position: relative;
    aspect-ratio: var(--embed-ratio);
    overflow: hidden;

    --embed-ratio: var(--ratio-video);
}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* 스크롤 커스텀 // 세로 */
.scrollbox,
textarea.basic-textarea {
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: scrollbar;
}

.scrollbox::-webkit-scrollbar,
textarea.basic-textarea::-webkit-scrollbar {
    width: var(--scrollbar-size, 6px);
    height: var(--scrollbar-size, 6px);
}

.scrollbox::-webkit-scrollbar-track,
textarea.basic-textarea::-webkit-scrollbar-track {
    background-color: transparent;
}

.scrollbox::-webkit-scrollbar-thumb,
textarea.basic-textarea::-webkit-scrollbar-thumb {
    border-radius: var(--scrollbar-size, 6px);
    background-color: color-mix(in srgb, var(--color-text) 10%, transparent);
    transition: var(--duration);
    cursor: pointer;
}

.scrollbox::-webkit-scrollbar-thumb:hover,
textarea.basic-textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-point);
}


/* ============================================================ */
/* Header — 기본 뼈대. 시안이 오면 이 구역을 다시 만듦          */
/* ============================================================ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-header);
    width: 100%;
    border-bottom: 1px solid var(--color-line);
    background-color: var(--color-surface);
    transition: transform var(--duration);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    height: var(--header-current, var(--header-height));
    transition: height var(--duration);
}

/* 내려가면 낮아지고, 더 내려가면 위로 숨음 (common.js header) */
.header.is-slim {
    --header-current: var(--header-height-slim);
}

.header.is-hidden {
    transform: translateY(-100%);
}

/* Header :: Logo */
.header-logo {
    flex-shrink: 0;
    margin: 0;
}

.header-logo-link {
    display: block;
    text-decoration: none;
}

.header-logo img {
    display: block;
    width: var(--logo-width, 160px);
    height: auto;
}

/* Header :: GNB */
.gnb {
    flex: 1 1 auto;
}

.gnb-list {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gnb-link {
    display: block;
    padding: 16px 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.gnb-link:hover,
.gnb-link:focus-visible {
    color: var(--color-point);
}

/* Header :: 전체메뉴 버튼 — 좁은 화면에서만 */
.header-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
}

.header-menu-btn :is(svg, i[class*="ph-"]) {
    width: var(--icon-xl);
    font-size: var(--icon-xl);
    height: var(--icon-xl);
}

/* Header :: 반응형 — 기본은 폰 · 태블릿의 전체 메뉴 레이어 */
.gnb {
    position: fixed;
    top: var(--header-current, var(--header-height));
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--header-current, var(--header-height)));
    padding: 20px var(--container-padding) 40px;
    overflow-y: auto;
    background-color: var(--color-surface);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration), visibility var(--duration);
}

.header.is-menu-open .gnb {
    visibility: visible;
    opacity: 1;
}

.gnb-list {
    flex-direction: column;
}

.gnb-link {
    border-bottom: 1px solid var(--color-line);
}

/* 가로 메뉴는 마우스를 쓰는 PC 에서만. 폴드 펼침 · 태블릿 가로처럼 넓어도
   손가락 기기면 전체 메뉴 버튼을 둠. data-touch 는 기기 미리보기가 붙임 */
@media screen and (min-width: 840px) and (hover: hover) and (pointer: fine) {
    :root:not([data-touch]) .header-menu-btn {
        display: none;
    }

    :root:not([data-touch]) .gnb {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        padding: 0;
        overflow-y: visible;
        background-color: transparent;
        visibility: inherit;
        opacity: 1;
        transition: none;
    }

    :root:not([data-touch]) .header.is-menu-open .gnb {
        visibility: inherit;
    }

    :root:not([data-touch]) .gnb-list {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    :root:not([data-touch]) .gnb-link {
        padding: 10px 0;
        border-bottom: 0;
        font-size: var(--font-size-lg);
    }
}

.header-logo img {
    --logo-width: 128px;
}

@media screen and (min-width: 600px) {
    .header-logo img {
        --logo-width: inherit;
    }
}


/* ============================================================ */
/* Footer — 기본 뼈대. 시안이 오면 이 구역을 다시 만듦          */
/* ============================================================ */

.footer {
    padding: 40px 0 50px;
    background-color: var(--color-footer-bg);
    color: var(--color-footer-dim);
}

.footer-logo {
    display: inline-block;
}

.footer-logo img {
    display: block;
    width: var(--logo-width, 120px);
    height: auto;
}

/* 회사 정보 — 항목 사이 구분선은 자동 */
.footer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin-top: 24px;
    font-style: normal;
    font-size: var(--font-size-xs);
    line-height: 1.6;
}

.footer-info-item + .footer-info-item::before {
    display: none;
    width: 1px;
    height: 10px;
    margin: 0 12px;
    background-color: var(--color-footer-line);
    vertical-align: middle;
    content: "";
}

.footer-copy {
    margin-top: 16px;
    font-size: var(--font-size-xs);
    color: var(--color-footer-copy);
}

/* Footer :: 반응형 */
.footer-info {
    flex-direction: column;
}

@media screen and (min-width: 600px) {
    .footer {
        padding: 50px 0 60px;
    }

    .footer-info {
        flex-direction: row;
    }

    .footer-info-item + .footer-info-item::before {
        display: inline-block;
    }
}


/* ============================================================ */
/* Sub Visual — 서브 상단 (제목 · 현재위치 · 2차 메뉴)           */
/* ============================================================ */

.sub-visual {
    background-color: var(--color-surface);
}

.sub-visual.line {
    border-bottom: 1px solid var(--color-line);
}

/* 제목(왼)과 현재위치(오)를 한 줄에 마주 놓음 */
.sub-visual-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 26px var(--container-padding) 18px;
}

.sub-visual-tit {
    font-size: var(--text-headline);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-title);
}

.sub-visual-row {
    display: flex;
    align-items: center;
    /* 지금 화면 이름이 길면 줄어들어야 말줄임표가 붙음.
       그래서 flex-shrink 를 막지 않고 min-width 도 열어 둠 */
    min-width: 0;
    gap: 30px;
}


/* Sub Visual :: 현재위치 */
.breadcrumb {
    min-width: 0;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-item {
    position: relative;
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
    line-height: 1.4;
    white-space: nowrap;
}

/* 지금 화면 이름이 길면 줄을 밀고 나감. 마지막 칸만 줄여 말줄임표를 붙임 */
.breadcrumb-item:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 항목 사이 6px 점 */
.breadcrumb-item+.breadcrumb-item {
    padding-left: 38px;
}

.breadcrumb-item+.breadcrumb-item::before {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background-color: var(--color-line);
    content: '';
}

/* 상위 단계 링크 — 글자색·밑줄 없이 나머지 항목과 같아 보이게 */
.breadcrumb-item a {
    color: inherit;
    text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
    color: var(--color-point);
    text-decoration: underline;
}

.breadcrumb-home {
    display: block;
    line-height: 0;
}

.breadcrumb-home :is(svg, i[class*="ph-"]) {
    width: 16px;
    font-size: 16px;
    height: 16px;
    stroke-width: 1.6;
}


/* Sub Visual :: 검색 */
.sub-search {
    position: relative;
    flex-shrink: 0;
    width: var(--sub-search-width);

    --sub-search-width: 260px;
    --sub-search-height: 40px;
    --sub-search-btn-size: 34px;
}

.sub-search .sub-search-input {
    width: 100%;
    height: var(--sub-search-height);
    /* 오른쪽은 버튼 자리를 비움 */
    padding: 0 calc(var(--sub-search-btn-size) + 8px) 0 18px;
    border: 2px solid var(--color-point);
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-soft);
    font-family: inherit;
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.sub-search .sub-search-input::placeholder {
    color: var(--color-text-weak);
}

.sub-search .sub-search-input:focus {
    outline: none;
    border-color: var(--color-point-hover);
}

.sub-search-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sub-search-btn-size);
    height: var(--sub-search-btn-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-point);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color var(--duration-fast), color var(--duration-fast);
}

.sub-search-btn :is(svg, i[class*="ph-"]) {
    width: 18px;
    font-size: 18px;
    height: 18px;
    stroke-width: 2;
}

.sub-search-btn:hover,
.sub-search-btn:focus-visible {
    background-color: var(--color-point);
    color: var(--color-white);
}

/* has-kind : 왼쪽에 검색 범위 고르개. 알약 테두리를 폼으로 옮김 */
.sub-search.has-kind {
    display: flex;
    align-items: center;
    height: var(--sub-search-height);
    border: 2px solid var(--color-point);
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-soft);

    --sub-search-width: 300px;
}

.sub-search.has-kind:focus-within {
    border-color: var(--color-point-hover);
}

.sub-search.has-kind .sub-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding-left: 12px;
    border: 0;
    background-color: transparent;
}

/* 검색 범위 고르개 — has-kind 일 때 왼쪽에 붙음 */
.sub-search-kind {
    flex-shrink: 0;
    height: 20px;
    padding: 0 22px 0 18px;
    border: 0;
    border-right: 1px solid var(--color-line);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345474e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 14px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    cursor: pointer;
}

.sub-search-kind:focus-visible {
    border-radius: var(--radius-xs);
}


/* Sub Visual :: 2차 메뉴 */
.sub-nav {
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

/* 밀어서 보는 줄 — 스크롤바는 감춤 */
.sub-nav-list,
.lnb-list {
    scrollbar-width: none;
}

/* 넘칠 때만 양끝을 흐리게 해서 더 있다는 것을 알림 (common.js 의 subNav 가 클래스를 붙임) */
.sub-nav-list.is-scrollable,
.lnb-list.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), transparent 100%);

    --fade-size: 28px;
}

.sub-nav-list::-webkit-scrollbar,
.lnb-list::-webkit-scrollbar {
    display: none;
}

.sub-nav-list {
    display: flex;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: 50px;
    list-style: none;
}

.sub-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 18px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-sub);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--duration-fast), color var(--duration-fast);
}

.sub-nav-link:hover,
.sub-nav-link:focus-visible {
    background-color: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-text);
}

.sub-nav-item.active .sub-nav-link {
    background-color: var(--color-point);
    color: var(--color-white);
}


/* Sub Visual :: 반응형 */
.sub-visual-inner {
    flex-direction: column;
}

.sub-nav-list {
    margin-inline: calc(var(--container-padding) * -1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.sub-nav-item {
    flex: 1 0 auto;
}

@media screen and (min-width: 600px) {
    .sub-visual-inner {
        gap: var(--space-lg);
        padding: 34px var(--container-padding) 22px;
        flex-direction: row;
        align-items: center;
    }

    .sub-nav-list {
        height: 56px;
    }

    .sub-nav-link {
        padding: 0 24px;
        font-size: var(--font-size-lg);
    }
}

@media screen and (min-width: 840px) {
    .sub-visual-inner {
        gap: var(--space-3xl);
        padding: 40px var(--container-padding) 28px;
    }

    .sub-nav-list {
        display: grid;
        height: 62px;
        margin-inline: 0;
        overflow-x: visible;
        overscroll-behavior-x: auto;
    }

    .sub-nav-item {
        flex: 0 1 auto;
    }

    .sub-nav-link {
        padding: 0 10px;
        font-size: var(--font-size-xl);
    }
}

@media screen and (min-width: 840px) {
    .sub-search.has-kind {
        --sub-search-width: 340px;
    }
}

.sub-visual-row {
    align-self: stretch;
}

.list-util .sub-search {
    order: -1;
    --sub-search-width: 100%;
}

@media screen and (min-width: 600px) {
    .sub-visual-row {
        align-self: auto;
    }

    .list-util .sub-search {
        order: 0;
        --sub-search-width: inherit;
    }
}


.gnb-link[aria-current="page"] {
    color: var(--color-point);
}


/* ============================================================ */
/* Skip Nav — 건너뛰기 링크                                      */
/* 평소에는 화면 밖에 있다가 Tab 으로 초점을 받으면 맨 위에 나타남 */
/* base.css 의 .skip 은 초점을 받아도 되돌아오지 않아 따로 만듦   */
/* ============================================================ */

.skip-nav {
    position: relative;
    z-index: var(--z-skip);
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    clip-path: inset(50%);
}

.skip-link:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    overflow: visible;
    background-color: var(--color-point);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    clip-path: none;
}


/* ============================================================ */
/* Quick — 오른쪽 아래. 상담(채널톡)과 맨 위로 둘뿐             */
/* 상담은 늘 있고, 맨 위로만 조금 내려야 밀려 올라옴             */
/* ============================================================ */

.quick {
    position: fixed;
    right: var(--container-padding);
    bottom: var(--container-padding);
    z-index: var(--z-quick);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;

    /* 채널톡 런처가 56px 에 24px 이라 그대로 맞춤. 크기는 토큰에 있음 */
    --quick-radius: 20px;
}

/* 상담 — 남색을 채운 둥근 네모 */
.quick-chat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--quick-size);
    height: var(--quick-size);
    padding: 0;
    border: 0;
    border-radius: var(--quick-radius);
    background-color: var(--color-point);
    color: var(--color-white);
    /* 채널톡 기본 런처와 같은 세 겹 — 안쪽 흰 테, 가까운 그림자, 먼 그림자 */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-white) 20%, transparent) inset,
                0 4px 6px color-mix(in srgb, var(--color-black) 10%, transparent),
                0 8px 30px color-mix(in srgb, var(--color-black) 15%, transparent);
    cursor: pointer;
    transition: background-color var(--duration-fast);
}

.quick-chat:hover,
.quick-chat:focus-visible {
    background-color: var(--color-point-hover);
}

.quick-chat :is(svg, i[class*="ph-"]) {
    width: 22px;
    font-size: 22px;
    height: 22px;
}

/* 맨 위로 — 상자 없이 화살표와 글자만. 크기는 상담 버튼과 같게 잡아
   손가락이 닿는 자리를 잃지 않음 */
.quick-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-shrink: 0;
    gap: 2px;
    width: var(--quick-size);
    height: var(--quick-size);
    padding: 0;
    border: 0;
    border-radius: var(--quick-radius);
    /* 어두운 구역 위에서는 남색 글자가 묻힘(대비 1.2).
       흰 반투명 판을 깔면 흰 바탕에서는 거의 안 보이고
       어두운 데서만 떠올라 글자가 살아난다 */
    background-color: color-mix(in srgb, var(--color-white) 72%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: inherit;
    color: var(--color-point);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration), visibility var(--duration), transform var(--duration), color var(--duration-fast);
}

.quick-top.is-on {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.quick-top:hover,
.quick-top:focus-visible {
    background-color: color-mix(in srgb, var(--color-white) 95%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-black) 10%, transparent);
    color: var(--color-text);
}

.quick-top :is(svg, i[class*="ph-"]) {
    width: 20px;
    font-size: 20px;
    height: 20px;
    transition: transform var(--duration-fast);
}

/* 화살표만 살짝 뜸. 상자째 올리면 누르려던 자리가 어긋남 */
.quick-top:hover :is(svg, i[class*="ph-"]),
.quick-top:focus-visible :is(svg, i[class*="ph-"]) {
    transform: translateY(-3px);
}

.quick-top-text {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0;
}

/* 채널톡 대화창이 열려 있는 동안에는 맨 위로를 감춤.
   <body> 에 클래스를 붙였다 떼는 것은 개발이 SDK 의
   onShowMessenger · onHideMessenger 에서 한다 */
body.is-chat-open .quick-top {
    display: none;
}

.quick {
    --quick-size: 48px;
}

@media screen and (min-width: 600px) {
    .quick {
        --quick-size: inherit;
        --quick-radius: 24px;
    }

    .quick-chat :is(svg, i[class*="ph-"]) {
        width: 26px;
        font-size: 26px;
        height: 26px;
    }

    .quick-top :is(svg, i[class*="ph-"]) {
        width: 22px;
        font-size: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-top {
        transition: none;
        transform: none;
    }

    /* 움직임 대신 판만 또렷해지게 함 */
    .quick-top :is(svg, i[class*="ph-"]),
    .quick-top:hover :is(svg, i[class*="ph-"]),
    .quick-top:focus-visible :is(svg, i[class*="ph-"]) {
        transition: none;
        transform: none;
    }
}


/* ============================================================ */
/* Header Progress — 스크롤 진행률                                */
/* 헤더 밖에 두어야 헤더가 숨을 때 같이 끌려가지 않음            */
/* 헤더 바로 아래에만 있으므로 헤더(100)보다 낮게 둠             */
/* ============================================================ */

.header-progress {
    position: fixed;
    top: var(--header-height);
    left: 0;
    z-index: var(--z-progress);
    display: none;
    width: 100%;
    height: var(--progress-height);
    background-color: var(--color-line);
    opacity: 0;
    transition: top var(--duration), opacity var(--duration-fast);
    pointer-events: none;

    --progress-height: 4px;
}

.has-progress .header-progress {
    display: block;
}

/* 헤더가 줄어드는 순간 같이 나타남. 최상단에서는 안 보임 */
.header.is-slim ~ .header-progress,
.header.is-hidden ~ .header-progress {
    opacity: 1;
}

/* 헤더가 줄면 따라 올라가고, 숨으면 맨 위에 붙음 */
.header.is-slim ~ .header-progress {
    top: var(--header-height-slim);
}

.header.is-hidden ~ .header-progress {
    top: 0;
}

.header-progress-bar {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    background-color: var(--color-point);
}


@media (prefers-reduced-motion: reduce) {
    .header-progress {
        transition: none;
    }
}


/* 더보기 슬라이드 — 시간은 common.js moreBox.speed 와 맞춤 */
.is-sliding {
    transition: max-height var(--duration) ease;
}

@media (prefers-reduced-motion: reduce) {
    .is-sliding {
        transition: none;
    }
}


/* ============================================================ */
/* Accordion — 여닫는 목록. FAQ · 약관 어디서나 씀                */
/* ============================================================ */

.acc-item {
    border-bottom: 1px solid var(--color-line);
    transition: background-color var(--duration-fast);
}

/* 열려 있을 때 Q 만 물들면 A 가 떨어져 보임. 항목을 통째로 물들임 */
.acc-item:hover,
.acc-item:has(.acc-btn:focus-visible) {
    background-color: color-mix(in srgb, var(--color-point) 3%, transparent);
}

/* 바탕이 물든 만큼 답 상자는 흰색으로 뒤집어 또렷하게 띄움 */
.acc-item:hover .acc-body-inner,
.acc-item:has(.acc-btn:focus-visible) .acc-body-inner {
    background-color: var(--color-surface);
}

/* 질문 줄 — 줄 전체가 눌림 */
.acc-btn {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) 0;
    border: 0;
    background-color: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-fast);
}

/* Q · A 배지 */
.acc-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--color-point);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    line-height: 1;
}

.acc-q {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: 1.5;
}

.acc-arrow {
    flex-shrink: 0;
    width: var(--icon-lg);
    height: var(--icon-lg);
    margin-top: 5px;
    color: var(--color-text-weak);
    transition: transform var(--duration);
}

.acc-item.is-open .acc-arrow {
    transform: rotate(180deg);
}

.acc-item.is-open .acc-q {
    color: var(--color-point);
}

/* 답 — 처음엔 접혀 있고 jQuery 가 여닫음 */
.acc-body {
    display: none;
    padding: 0 0 var(--space-md);
}

.acc-body-inner {
    display: flex;
    transition: background-color var(--duration-fast);
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-soft);
}

.acc-body .acc-mark {
    background-color: var(--color-surface);
    color: var(--color-point);
}

.acc-a {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-top: 4px;
    font-size: var(--font-size-md);
    color: var(--color-text-sub);
    line-height: 1.8;
}

.acc-a b {
    font-weight: var(--font-weight-bold);
    color: var(--color-sub);
}
@media screen and (min-width: 600px) {
    .acc-btn {
        gap: var(--space-md);
        padding: var(--space-lg) var(--space-sm);
    }

    .acc-mark {
        width: 30px;
        height: 30px;
    }

    .acc-q {
        padding-top: 4px;
        font-size: var(--font-size-lg);
    }

    .acc-body {
        padding: 0 var(--space-sm) var(--space-lg);
    }

    .acc-body-inner {
        gap: var(--space-md);
        padding: var(--space-lg);
    }
}


/* ============================================================ */
/* Print — 인쇄하면 머리 · 꼬리 · 떠 있는 것을 빼고 본문만       */
/* ============================================================ */

@media print {
    .skip-nav,
    .header,
    .footer,
    .quick,
    .sub-nav,
    .lnb,
    .snb,
    .share,
    .layer-pop,
    .float-pop,
    .modal,
    .paging,
    .list-util {
        display: none !important;
    }

    html,
    body {
        background: var(--color-white) !important;
        color: var(--color-black);
    }

    /* 헤더가 빠지니 그 자리도 비움 */
    .wrapper {
        padding-top: 0;
    }

    /* 스크롤로 켜지는 것 — 아직 안 켜진 채로 찍히지 않게 */
    [data-inview],
    [data-inview] * {
        opacity: 1 !important;
        transform: none !important;
    }

    /* 접힌 내용은 펼쳐서 */
    .acc-body,
    .tab-panel {
        display: block !important;
        height: auto !important;
    }

    .sub-visual,
    .sub-content {
        padding-block: 0 24px;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: var(--color-text-weak);
        word-break: break-all;
    }

    img,
    tr,
    .thumb {
        break-inside: avoid;
    }
}