/* ==========================================================================
   common.css — 페이지 공통 부품 (상단바 아이콘, 모달 보정 등)
   글래스모피즘 오버홀: 표면·모션 어휘는 glass.css 가 정본.
   ========================================================================== */

/* ---------- 다크모드 전용 요소 ----------
   영상·정지 이미지 위를 어둡게 덮는 막(.video-shadow, page/index.css)처럼
   dark 에서만 보이는 요소. 3기 ① 에서 "사진·패널을 어둡게 눌러 필요 없다"고
   잠갔다가 4기 5턴에서 복구. 표시는 JS(show/hide)가 아니라 테마 스위치
   html[data-theme="dark"] 가 정한다 */
.dark-mode-element {
    display: none;
}

html[data-theme="dark"] .dark-mode-element {
    display: block;
}

/* ---------- 삼각 화살표 컬랩스 버튼 ----------
   .btn(rim, 캡슐 사다리) 위에 얹는 원형 예외: 사다리의 min-width 를 풀고
   hover·active 의 스프링 변형 대신 열림 회전만 쓴다 */
.arrow-collapse-button {
    transition: transform 0.5s, background .35s, box-shadow .35s;
    width: 1.9rem;
    height: 1.9rem;
    min-width: 0;
    padding: 0;
    line-height: 1.9rem;
    border-radius: 50%;
    vertical-align: middle;
}

.arrow-collapse-button:hover,
.arrow-collapse-button:active {
    transform: none;
}

.arrow-collapse-button-open,
.arrow-collapse-button-open:hover,
.arrow-collapse-button-open:active {
    transform: rotate(180deg);
}

.arrow-collapse-button i {
    font-size: var(--fs-body);
    color: var(--ink-2);
    line-height: 1;
}

/* 모달 크기·글자 보정은 3기 시트 규칙(glass.css 모달 절)으로 흡수 (D19) */

/* ---------- 상단바 브랜드 아이콘 ---------- */
.navbar-brand-icon {
    width: 28px;

    @media (min-width: 1200px) {
        width: 34px;
    }
}

/* ---------- 메뉴 캡슐의 아이콘 버튼 (5기 2번) ----------
   markup: button.icon-link > svg.icon-link-glyph + span.icon-link-label
   단색 글리프(Lucide, 획 2px, currentColor) 아래 라벨이 붙은 세로 묶음.
   버튼 자체는 배경이 없고 메뉴 캡슐(.menu-capsule)
   안에 놓인다. hover 는 그룹 안의 동심 캡슐 */
.icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .3rem .7rem;
    border: 0;
    border-radius: var(--r-capsule);
    background: transparent;
    font-size: var(--fs-sm);
    font-weight: var(--fw-strong); /* 13px 아이콘 라벨 — 작은 글자의 강조 */
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background .3s, color .3s;
}

.icon-link:hover {
    background: rgb(255 255 255 / .6);
    color: var(--ink);
}

html[data-theme="dark"] .menu-capsule .icon-link:hover {
    background: rgb(255 255 255 / .14);
}

/* press 는 즉시 반응 */
.icon-link:active {
    transform: scale(.94);
    transition: transform .08s ease-out;
}

.icon-link-glyph {
    width: 24px;
    height: 24px;
    flex: none;
}

.icon-link .icon-link-label {
    color: var(--ink-2);
    line-height: 1.2;
}

.icon-link:hover .icon-link-label {
    color: var(--ink);
}

/* ---------- 입력 크기 제한 (기존 유지) ---------- */
.text-input {
    max-width: 500px;
}

.text-input::placeholder {
    font-size: var(--fs-md);
}

/* CSS smooth scroll 을 끈다 — 사용방법 바로가기 등이 jQuery animate 로
   스크롤하므로 둘이 겹치면 스크롤이 덜컹거린다 */
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: unset;
    }
}

/* ---------- 유틸리티 ---------- */
.row-for-expand-padding {
    /* 부모 요소의 padding 을 먹기위한 row 표시용 */
}

/* 과거 그림자 유틸리티: 콘텐츠 패널(.content-panel)이 자체 그림자를
   가지므로 시각 효과를 없앤다. markup 잔존분 대비용으로 클래스만 남긴다 */
.box-shadow-sm,
.box-shadow {
    box-shadow: none;
}