/* Explain: Styles for UI components like navigation, cards, forms, and buttons. */
/* 공지사항 공통 리듬: 목록 카드와 상세 화면이 같은 순서(분류·날짜 → 제목 → 요약)와
   같은 사이 간격을 쓰고, 본문의 문단·목록·이미지도 같은 여백으로 이어지도록
   이 값들 한 곳에서 정합니다. */
:root {
    --notice-rhythm: 0.75rem;
    --notice-block-gap: 1.4rem;
}

.eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.brand-mark {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--cream-color);
    font-size: 0.95rem;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-color) 38%, transparent);
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 200ms ease, color 200ms ease;
}

.nav-link:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}

/* 지금 보고 있는 페이지의 메뉴 항목: 색과 밑줄로 표시해, 화면을 옮겨도 현재 위치가 같은 자리에서 읽힙니다. */
.nav-link.is-active {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4rem;
}

.nav-link.is-active:hover {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
}

/* 열린 '더보기' 목록 안에 지금 보고 있는 페이지가 있으면, 목록을 여는 버튼도 같은 색으로 표시합니다. */
.nav-dropdown > summary.nav-link.is-active {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
    text-decoration: none;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > summary {
    list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

/* '더보기' 버튼의 화살표는 목록이 열리면 부드럽게 돌아가 지금 열려 있는지 바로 알 수 있게 합니다. */
.nav-dropdown > summary i {
    transition: transform 220ms ease;
}

.nav-dropdown[open] > summary i {
    transform: rotate(180deg);
}

/* '더보기' 목록: 버튼 바로 아래에서 살짝 떠오르며 나타나고, 닫을 때도 사라지는 모습이
   갑자기 끊기지 않도록 부드럽게 정리합니다. 목록은 겹쳐 놓아 화면 배치를 밀지 않습니다. */
.nav-dropdown-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
    display: none;
    min-width: 12rem;
    margin-top: 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--cream-color);
    padding: 0.5rem;
    box-shadow: var(--shadow-card);
    opacity: 0;
    transform: translateY(-0.35rem);
    transition: opacity 180ms ease, transform 180ms ease, display 180ms;
    transition-behavior: allow-discrete;
}

.nav-dropdown[open] > .nav-dropdown-panel {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

@starting-style {
    .nav-dropdown[open] > .nav-dropdown-panel {
        opacity: 0;
        transform: translateY(-0.35rem);
    }
}

/* 버튼과 목록 사이의 좁은 빈 곳도 목록의 일부로 이어 주어, 마우스가 그 위를 지나가도 목록이 닫히지 않습니다. */
.nav-dropdown-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.6rem;
    height: 0.6rem;
}

.nav-dropdown-panel a {
    display: block;
    border-radius: 0.7rem;
    padding: 0.6rem 0.85rem;
    font-weight: 700;
    transition: background 200ms ease, color 200ms ease;
}

.nav-dropdown-panel a:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}

.nav-dropdown-panel a.is-active {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3rem;
}

/* 목록 안에서 성격이 다른 메뉴 사이를 얇은 선 하나로 나눠, 어디까지가 한 묶음인지 읽기 쉽게 합니다. */
.nav-dropdown-divider {
    margin: 0.35rem 0.4rem;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

/* 휴대폰 메뉴: 열 때는 부드럽게 나타나고, 닫을 때도 갑자기 사라지지 않도록 정리합니다. */
.mobile-drawer {
    display: none;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--cream-color) 98%, transparent);
    box-shadow: var(--shadow-card);
    opacity: 0;
    transition: opacity 200ms ease, display 200ms;
    transition-behavior: allow-discrete;
}

.mobile-drawer.is-open {
    display: block;
    opacity: 1;
}

@starting-style {
    .mobile-drawer.is-open {
        opacity: 0;
    }
}

/* 큰 화면에서는 위쪽 한 줄 메뉴로 같은 항목을 보여 주므로 휴대폰 메뉴는 감춥니다. */
@media (min-width: 1024px) {
    .mobile-drawer,
    .mobile-drawer.is-open {
        display: none;
    }
}

.mobile-link {
    display: flex;
    min-height: 2.9rem;
    align-items: center;
    border-radius: 1rem;
    padding-inline: 1rem;
    font-weight: 700;
    transition: background 200ms ease, color 200ms ease;
}

.mobile-link:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}

/* 휴대폰 메뉴에서도 지금 보고 있는 페이지를 색·밑줄·왼쪽 표시선으로 분명히 보여 줍니다. */
.mobile-link.is-active {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35rem;
    box-shadow: inset 3px 0 0 var(--primary-color);
}

/* 캐릭터 그림은 홈 첫 화면과 소개 페이지에서 같은 크기와 비율로 보이도록 한 곳에서 관리합니다. */
.character-stage {
    position: relative;
    width: 100%;
    max-width: 21rem;
    margin-inline: auto;
    aspect-ratio: 320 / 352;
}

/* 등록된 캐릭터 이미지가 있을 때와 기본 그림이 보일 때 모두 같은 크기·같은 비율·
   같은 좌우 여백을 지키도록, 두 그림을 같은 자리(캐릭터 자리) 안에 같은 크기로 담고
   안쪽에서 원래 비율을 지킨 채 가운데로 맞춥니다. */
.character-stage > .fugaro-char,
.character-stage > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 등록된 캐릭터 이미지가 있으면 기본 그림 위에 겹쳐 보여 주고, 이미지를 불러오지 못하면
   기본 그림이 그대로 남아 첫 화면에서 캐릭터가 사라지지 않습니다. */
.hero-character-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 소개 페이지 이야기 영역: 등록된 캐릭터 이미지와 기본 그림이 같은 크기와 비율, 같은 좌우 여백을
   지키도록, 등록된 이미지도 기본 그림과 같은 비율의 자리에 담아 보여 줍니다. */
.character-media {
    display: block;
    width: 100%;
    aspect-ratio: 320 / 352;
    object-fit: contain;
}

/* 소개 페이지의 '다섯 가지 마음'과 '네 가지 표시' 카드가 한 가지 결로 이어져 보이도록,
   아이콘 배경 색과 원 크기, 제목과 설명 사이 여백을 이곳 한 곳에서 같은 값으로 정합니다.
   두 묶음이 같은 값을 함께 쓰므로 한쪽만 달라지는 일이 없습니다. */
.story-icon {
    display: inline-flex;
    height: 3.5rem;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
    font-size: 1.25rem;
}

.story-card-title {
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--charcoal-color);
}

.story-card-text {
    flex: 1 1 auto;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.75rem;
    color: var(--text-muted);
}

.fugaro-char {
    display: block;
    width: 100%;
    height: auto;
}

.fugaro-char .fc-body { fill: var(--character-body); }
.fugaro-char .fc-outline { fill: none; stroke: color-mix(in srgb, var(--charcoal-color) 16%, transparent); stroke-width: 3; }
.fugaro-char .fc-arm,
.fugaro-char .fc-foot { fill: var(--character-body); stroke: color-mix(in srgb, var(--charcoal-color) 16%, transparent); stroke-width: 3; }
.fugaro-char .fc-leaf { fill: var(--primary-color); }
.fugaro-char .fc-leaf-back { fill: color-mix(in srgb, var(--primary-color) 68%, var(--charcoal-color)); }
.fugaro-char .fc-stem { fill: none; stroke: color-mix(in srgb, var(--charcoal-color) 28%, transparent); stroke-width: 5; stroke-linecap: round; }
.fugaro-char .fc-brow { fill: none; stroke: color-mix(in srgb, var(--charcoal-color) 34%, transparent); stroke-width: 5; stroke-linecap: round; }
.fugaro-char .fc-eye { fill: var(--character-eye); }
.fugaro-char .fc-spark { fill: var(--cream-color); }
.fugaro-char .fc-cheek { fill: var(--character-blush); opacity: 0.55; }
.fugaro-char .fc-mouth { fill: none; stroke: var(--character-eye); stroke-width: 7; stroke-linecap: round; }
.fugaro-char .fc-scarf { fill: color-mix(in srgb, var(--primary-color) 88%, var(--charcoal-color)); }
.fugaro-char .fc-knot { fill: color-mix(in srgb, var(--primary-color) 74%, var(--charcoal-color)); }
.fugaro-char .fc-mark { fill: var(--cream-color); font-family: var(--font-heading); font-size: 26px; letter-spacing: 0.02em; }
.fugaro-char .fc-shadow { fill: color-mix(in srgb, var(--charcoal-color) 12%, transparent); }

.fugaro-float {
    animation: fugaroFloat 5.5s ease-in-out infinite;
}

.bubble-orb {
    position: absolute;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream-color) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 38%, transparent);
    animation: bubbleDrift 7s ease-in-out infinite;
}

.bubble-orb:nth-child(2n) { animation-delay: -2s; }
.bubble-orb:nth-child(3n) { animation-delay: -4s; }

.soft-card {
    border: 1px solid var(--border-color);
    border-radius: 1.75rem;
    background: color-mix(in srgb, var(--surface-color) 92%, transparent);
    box-shadow: var(--shadow-card);
    transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

/* 카드 반응 통일: 동요·영상·교육자료·상품 카드 모두 마우스를 올리거나 키보드 초점을 두었을 때
   같은 방식으로 살짝 떠오르고, 테두리 색과 그림자가 같은 값으로 부드럽게 바뀝니다. */
.soft-card:hover,
.soft-card:focus-within {
    transform: translateY(-0.35rem);
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    box-shadow: var(--shadow-soft);
}

.media-frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1.5rem 1.5rem 0 0;
    background: color-mix(in srgb, var(--secondary-color) 20%, var(--cream-color));
}

.media-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms ease;
}

/* 모든 카드 사진이 같은 기준으로 부드럽게 확대되도록 한 곳에서 관리합니다. */
.soft-card:hover .media-frame img,
.soft-card:focus-within .media-frame img {
    transform: scale(1.06);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.pill-green { background: color-mix(in srgb, var(--primary-color) 18%, transparent); color: color-mix(in srgb, var(--primary-color) 80%, var(--charcoal-color)); }
.pill-yellow { background: color-mix(in srgb, var(--secondary-color) 46%, transparent); color: var(--charcoal-color); }
.pill-coral { background: color-mix(in srgb, var(--accent-color) 18%, transparent); color: color-mix(in srgb, var(--accent-color) 78%, var(--charcoal-color)); }
.pill-gray { background: color-mix(in srgb, var(--charcoal-color) 10%, transparent); color: var(--text-muted); }



/* 음원이 아직 등록되지 않은 동요 카드에서 재생 버튼 자리에 놓이는 안내 표시입니다. */
.status-chip {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.45rem;
    border: 1px dashed color-mix(in srgb, var(--primary-color) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 34%, transparent);
    padding-inline: 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--charcoal-color) 82%, transparent);
}

/* 분류 필터 버튼: 휴대폰에서는 손가락으로 누르기 편한 크기로 두 칸씩 놓고,
   큰 화면에서는 알약 모양 버튼이 한 줄로 이어지도록 정리합니다. */
.filter-btn {
    display: inline-flex;
    min-height: 3.4rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--cream-color) 90%, transparent);
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: var(--text-muted);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.filter-btn:hover {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
}

/* 아직 담지 않은 종류는 점선 테두리와 흐린 숫자로 표시해,
   버튼을 눌렀을 때 빈 안내가 나온다는 것을 미리 알 수 있게 합니다. */
.filter-btn.is-empty:not(.is-active) {
    border-style: dashed;
}

.filter-btn.is-empty .filter-count {
    background: color-mix(in srgb, var(--charcoal-color) 8%, transparent);
    color: var(--text-muted);
}

/* 분류 이름은 좁은 화면에서 두 줄까지 자연스럽게 늘어나고, 상품 개수는 끝에 붙습니다. */
.filter-label {
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 640px) {
    .filter-btn {
        width: auto;
        min-height: 2.75rem;
        justify-content: center;
        border-radius: 999px;
        padding: 0.5rem 1.1rem;
        font-size: 1rem;
    }

    .filter-label {
        flex: 0 0 auto;
    }
}

.filter-btn.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--cream-color);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary-color) 34%, transparent);
}

/* 고른 분류의 개수 표시는 색을 뒤집어 지금 선택된 분류가 한눈에 보이게 합니다. */
.filter-count {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 1.6rem;
    min-height: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    padding-inline: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--primary-color) 82%, var(--charcoal-color));
    transition: background 200ms ease, color 200ms ease;
}

.filter-btn.is-active .filter-count {
    background: color-mix(in srgb, var(--cream-color) 34%, transparent);
    color: var(--cream-color);
}

.form-status.is-success {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--charcoal-color);
}

.form-status.is-error {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--accent-color) 48%, transparent);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--charcoal-color);
}

/* 보내기 결과 안내: 보내기 버튼 바로 아래에서 자연스럽게 이어지도록 여백과 줄바꿈을 맞춥니다. */
.form-status {
    border-radius: 1rem;
    padding: 0.8rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.7;
    text-align: left;
    overflow-wrap: break-word;
}

.form-status-icon {
    margin-top: 0.3rem;
    flex-shrink: 0;
    font-size: 1rem;
}

.form-status.is-success .form-status-icon {
    color: var(--primary-color);
}

.form-status.is-error .form-status-icon {
    color: var(--accent-color);
}

.form-status-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* 입력란 위 안내 문구와 필수·선택 표시 */
.form-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--charcoal-color);
}

.field-hint {
    min-height: 1.35rem;
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.req-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.7;
    color: color-mix(in srgb, var(--accent-color) 82%, var(--charcoal-color));
}

.opt-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--charcoal-color) 9%, transparent);
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--text-muted);
}

/* 필수·선택 표시는 입력란 이름 오른쪽 끝에 붙여, 이름과 표시가 한 줄에서 나란히 읽히도록 합니다. */
.form-label .req-chip,
.form-label .opt-chip {
    margin-left: auto;
}

/* 입력란 바로 아래에 붙는 오류 안내: 어느 칸을 고쳐야 하는지 그 자리에서 분명히 보여 줍니다. */
.field-error {
    display: none;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.65;
    color: color-mix(in srgb, var(--accent-color) 88%, var(--charcoal-color));
}

.field-error.is-on {
    display: flex;
}

.field-error i {
    margin-top: 0.2rem;
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--accent-color);
}

[data-field].is-invalid .input,
[data-field].is-invalid .select,
[data-field].is-invalid .textarea {
    border-color: color-mix(in srgb, var(--accent-color) 78%, transparent);
    background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-color));
}

[data-field].is-invalid .checkbox {
    outline: 2px solid color-mix(in srgb, var(--accent-color) 78%, transparent);
    outline-offset: 2px;
}

.req-mark {
    font-weight: 700;
    color: var(--accent-color);
}

.rich-text {
    line-height: 1.9;
}

.rich-text p { margin-block: 0.75rem; }
.rich-text h2 { font-size: 1.5rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.rich-text h3 { font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 0.4rem; }
.rich-text ul, .rich-text ol { margin-block: 0.75rem; padding-left: 1.35rem; }
.rich-text li { margin-block: 0.3rem; list-style: disc; }
.rich-text a { color: var(--primary-color); text-decoration: underline; }
.rich-text img { border-radius: 1rem; margin-block: 1rem; }

.admin-audio-entry {
    display: none;
}

.admin-audio-entry.is-visible {
    display: block;
}

.admin-tools {
    padding: 0 1rem 5rem;
}

.admin-tools-inner {
    margin-inline: auto;
    max-width: 48rem;
    display: grid;
    gap: 1.25rem;
}

.admin-card {
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .admin-card {
        padding: 2rem;
    }
}

.admin-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-badge {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.admin-badge-primary {
    background: var(--primary-color);
    color: var(--cream-color);
}

.admin-badge-sun {
    background: var(--secondary-color);
    color: var(--charcoal-color);
}

.admin-badge-coral {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

.admin-card-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--charcoal-color);
}

.admin-card-lead,
.admin-hint {
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--text-muted);
}

.admin-card-lead {
    margin-top: 1rem;
}

.admin-hint {
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.admin-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--charcoal-color);
}

.admin-note i {
    margin-top: 0.3rem;
    color: var(--accent-color);
}

.admin-form {
    margin-top: 1.5rem;
}

.admin-grid-2 {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .admin-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.admin-field {
    margin-top: 1.1rem;
}

.admin-form > .admin-field:first-child,
.admin-grid-2 .admin-field {
    margin-top: 0;
}

.admin-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--charcoal-color);
}

.admin-input {
    width: 100%;
    min-height: 2.9rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--cream-color);
    color: var(--text-color);
    padding: 0.65rem 1rem;
}

.admin-file {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--cream-color);
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.admin-btn {
    display: inline-flex;
    min-height: 2.9rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 0;
    border-radius: 999px;
    padding: 0.6rem 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.admin-btn-primary {
    background: var(--primary-color);
    color: var(--cream-color);
}

.admin-btn-primary:hover {
    background: var(--primary-hover);
}

.admin-btn-ghost {
    border: 1px solid var(--border-color);
    background: var(--cream-color);
    color: var(--charcoal-color);
}

.admin-btn-ghost:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.admin-btn-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

@media (min-width: 640px) {
    .admin-btn-row {
        flex-direction: row;
    }

    .admin-btn-row .admin-btn {
        flex: 1;
    }
}

.admin-list {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.55rem;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.admin-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.admin-list i {
    margin-top: 0.55rem;
    font-size: 0.8rem;
    color: var(--primary-color);
}

.admin-step {
    display: inline-flex;
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
}

.admin-empty {
    margin-top: 1.5rem;
    border: 1px dashed var(--border-color);
    border-radius: 1.5rem;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.admin-preview {
    margin-top: 1rem;
}

.admin-preview audio {
    width: 100%;
}

.admin-status {
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.75;
}

@media (max-width: 640px) {
    .brand-mark {
        height: 2.2rem;
        width: 2.2rem;
    }
}

@keyframes fugaroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.9rem); }
}

.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--surface-color) 94%, transparent);
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.faq-item:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.faq-item[open] {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-color));
    box-shadow: var(--shadow-card);
}

.faq-item > summary {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    line-height: 1.65;
    color: var(--charcoal-color);
}

.faq-item > summary::-webkit-details-marker {
    display: none;
}

.faq-item .faq-chevron {
    margin-left: auto;
    margin-top: 0.3rem;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--primary-color);
    transition: transform 250ms ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-muted);
}

.faq-answer-text {
    margin: 0;
}

/* 답변 아래에서 그 주제의 문의 유형이 미리 골라진 채로 문의 작성란으로 이어 주는 링크입니다.
   답변 글과 같은 왼쪽 선에서 시작하고, 좁은 화면에서도 한 줄 안에서 자연스럽게 감싸집니다. */
.faq-ask-link {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary-color) 42%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 24%, var(--cream-color));
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--primary-color);
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.faq-ask-link:hover,
.faq-ask-link:focus-visible {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--cream-color);
}

.faq-ask-link span {
    min-width: 0;
    overflow-wrap: break-word;
}

.faq-ask-link .faq-ask-arrow {
    flex-shrink: 0;
    font-size: 0.7rem;
    transition: transform 200ms ease;
}

.faq-ask-link:hover .faq-ask-arrow,
.faq-ask-link:focus-visible .faq-ask-arrow {
    transform: translateX(0.2rem);
}

/* 자주 묻는 질문에서 '이 주제로 문의하기'로 넘어왔을 때, 어떤 주제로 이어졌는지
   문의 유형 아래 한 줄로 알려 주는 안내입니다. 화면이 옮겨진 뒤에도 같은 맥락이 이어지도록,
   알약 모양의 차분한 안내로 두고 한 줄 안에서 자연스럽게 감싸집니다. */
.inquiry-carry-note {
    display: none;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--primary-color) 42%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--secondary-color) 26%, var(--cream-color));
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--charcoal-color);
    overflow-wrap: break-word;
}

.inquiry-carry-note.is-on {
    display: flex;
}

.inquiry-carry-note i {
    flex-shrink: 0;
    color: var(--primary-color);
}

.inquiry-carry-note span {
    min-width: 0;
}

/* 맨 위로 버튼: 화면을 어느 정도 내리면 부드럽게 나타나고, 맨 위에서는 사라집니다.
   휴대폰에서도 손가락으로 누르기 편한 크기를 유지합니다. */
#backToTop {
    display: inline-flex;
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1.05rem;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease, visibility 0s linear 300ms, background 300ms ease;
}

#backToTop.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 300ms ease, visibility 0s linear 0s, background 300ms ease;
}

@media (min-width: 640px) {
    #backToTop {
        width: 3.5rem;
        height: 3.5rem;
        min-width: 3.5rem;
        min-height: 3.5rem;
    }
}

@keyframes bubbleDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0.7rem, -0.9rem, 0) scale(1.06); }
}

/* 지금 재생 중인 동요 카드는 테두리 색과 배경을 함께 바꿔 또렷하게 구분합니다. */
[data-song-card].is-current {
    border-color: color-mix(in srgb, var(--primary-color) 72%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 11%, var(--surface-color)), color-mix(in srgb, var(--secondary-color) 14%, var(--surface-color)));
    box-shadow: 0 22px 55px color-mix(in srgb, var(--primary-color) 24%, transparent);
}

[data-song-card].is-current .media-frame {
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--primary-color) 50%, transparent);
}

[data-song-card].is-playing [data-toggle-icon] {
    animation: songPulse 1.6s ease-in-out infinite;
}

/* 재생 진행 막대: 카드마다 같은 자리를 미리 비워 두어 재생을 시작해도 카드 높이가 흔들리지 않습니다. */
.song-progress-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    min-height: 1.5rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.song-progress-row.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 250ms ease, visibility 0s linear 0s;
}

/* 재생 시간은 숫자 폭을 고정해 초가 바뀔 때 글자가 흔들리지 않게 합니다. */
.song-progress-row [data-current] {
    font-variant-numeric: tabular-nums;
}

.song-progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--primary-color) 0%,
        var(--primary-color) var(--song-progress, 0%),
        color-mix(in srgb, var(--primary-color) 16%, transparent) var(--song-progress, 0%),
        color-mix(in srgb, var(--primary-color) 16%, transparent) 100%);
    outline: none;
    cursor: pointer;
}

.song-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 3px solid var(--cream-color);
    background: var(--primary-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.song-progress::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border: 3px solid var(--cream-color);
    border-radius: 999px;
    background: var(--primary-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.song-progress::-moz-range-track {
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
}

@keyframes songPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* 동요 카드: 곡 제목은 두 줄까지, 곡 정보 줄은 같은 높이를 미리 잡아 두어
   카드마다 버튼 줄이 같은 자리에서 시작하도록 맞춥니다. */
.song-card-title {
    display: -webkit-box;
    min-height: 4.2rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--charcoal-color);
}

@media (min-width: 640px) {
    .song-card-title {
        font-size: 1.6rem;
    }
}

.song-card-meta {
    display: flex;
    min-height: 3.4rem;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* 곡 정보 줄(재생 시간): 재생 시간이 아직 없는 곡도 준비 안내와 같은 표현('준비 중이에요')과
   같은 높이로 보여 주어, 카드마다 곡 정보 줄이 같은 자리에서 읽히도록 맞춥니다. */
.song-meta-line {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.6;
    color: color-mix(in srgb, var(--text-muted) 92%, transparent);
    overflow-wrap: break-word;
}

.song-meta-line i {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--primary-color);
}

.song-meta-line [data-song-duration] {
    font-variant-numeric: tabular-nums;
}

/* 재생·가사 보기·다운로드·담기 네 버튼은 항상 같은 순서로 두 칸씩 나란히 놓입니다. */
.song-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

/* 동요 카드의 버튼: 좁은 화면에서 두 칸 안에 글자가 잘리지 않도록 안쪽 여백과 글자 크기를 줄이고,
   버튼 안 글자가 길어지면 한 줄 안에서 자연스럽게 감싸이도록 합니다. */
.song-card-actions > .btn,
.song-card-actions > .lib-btn {
    min-width: 0;
    padding-inline: 0.6rem;
    font-size: 0.82rem;
    white-space: normal;
}

@media (min-width: 640px) {
    .song-card-actions > .btn,
    .song-card-actions > .lib-btn {
        padding-inline: 0.9rem;
        font-size: 0.9rem;
    }
}

/* 아직 음원이나 파일이 준비되지 않은 자리에도 같은 크기의 버튼을 두어
   버튼 줄의 순서와 높이가 카드마다 흔들리지 않습니다. */
.song-btn-pending,
.song-btn-pending:disabled {
    flex-wrap: wrap;
    row-gap: 0.15rem;
    border: 1px dashed color-mix(in srgb, var(--primary-color) 40%, transparent);
    background: color-mix(in srgb, var(--secondary-color) 22%, var(--cream-color));
    color: var(--text-muted);
    cursor: default;
    opacity: 1;
}

/* 아직 준비되지 않아 흐리게 보이는 버튼에는 '준비 중' 표시를 버튼 안에 함께 두어,
   목록 위 도구 줄을 읽지 않아도 카드만 보고 왜 흐린지 바로 알 수 있게 합니다. */
.song-btn-pending-tag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream-color) 72%, transparent);
    padding: 0.02rem 0.42rem;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--text-muted);
}

/* 준비 안내 통일: 동요·영상·교육자료·상품 카드에서 아직 준비되지 않은 항목은
   같은 문구('준비 중이에요')와 같은 모래시계 표시, 같은 높이의 한 줄 안내로 보여 줍니다. */
.pending-note {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px dashed color-mix(in srgb, var(--primary-color) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 20%, var(--cream-color));
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: color-mix(in srgb, var(--text-muted) 92%, transparent);
    overflow-wrap: break-word;
}

.pending-note i {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--primary-color);
}

/* 동요·영상 카드에서는 준비 안내가 버튼 줄 전체 폭을 차지해,
   버튼이 있는 카드와 같은 자리에서 같은 높이로 읽히도록 합니다. */
.song-card-actions > .pending-note,
.video-card-actions > .pending-note {
    grid-column: 1 / -1;
}

/* 친구 소개 카드의 초상 영역: 네 친구가 모두 같은 비율과 같은 파스텔 결로 보이도록 한 곳에서 관리합니다. */
.friend-portrait {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--secondary-color) 46%, var(--cream-color));
}

/* 초상마다 같은 빛 번짐과 같은 점 무늬를 얹어 네 카드가 한 가지 결로 보이도록 맞춥니다. */
.friend-portrait::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 22%, color-mix(in srgb, var(--cream-color) 88%, transparent), transparent 58%),
        radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--cream-color) 62%, transparent), transparent 62%),
        radial-gradient(circle, color-mix(in srgb, var(--cream-color) 46%, transparent) 1.4px, transparent 1.9px);
    background-size: auto, auto, 18px 18px;
}

.friend-portrait::after {
    content: '';
    position: absolute;
    bottom: -32%;
    left: 50%;
    width: 74%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream-color) 58%, transparent);
}

/* 친구를 나타내는 표시는 네 카드 모두 같은 크기의 둥근 판 위에 올려 높이를 맞춥니다. */
.friend-portrait i {
    position: relative;
    z-index: 1;
    display: inline-flex;
    height: 4.75rem;
    width: 4.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream-color) 84%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 26%, transparent), 0 14px 30px color-mix(in srgb, var(--charcoal-color) 12%, transparent);
    font-size: 1.9rem;
    transition: transform 300ms ease, box-shadow 300ms ease;
}

.soft-card:hover .friend-portrait i,
.soft-card:focus-within .friend-portrait i {
    transform: translateY(-0.2rem) scale(1.04);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent), 0 18px 36px color-mix(in srgb, var(--charcoal-color) 16%, transparent);
}

.friend-portrait.is-green {
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--primary-color) 36%, var(--cream-color)),
        color-mix(in srgb, var(--primary-color) 14%, var(--cream-color)));
    color: var(--primary-color);
}

.friend-portrait.is-yellow {
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--secondary-color) 64%, var(--cream-color)),
        color-mix(in srgb, var(--secondary-color) 28%, var(--cream-color)));
    color: color-mix(in srgb, var(--secondary-color) 44%, var(--charcoal-color));
}

.friend-portrait.is-coral {
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--accent-color) 34%, var(--cream-color)),
        color-mix(in srgb, var(--accent-color) 12%, var(--cream-color)));
    color: var(--accent-color);
}

.friend-portrait.is-charcoal {
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--charcoal-color) 32%, var(--cream-color)),
        color-mix(in srgb, var(--charcoal-color) 10%, var(--cream-color)));
    color: var(--charcoal-color);
}

/* 친구 카드 본문: 네 카드가 같은 순서, 같은 여백, 같은 글자 크기로 읽히도록 한 곳에서 맞춥니다. */
.friend-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 1.5rem;
}

.friend-card-role {
    display: flex;
    min-height: 1.5rem;
    align-items: center;
    line-height: 1.5;
}

.friend-card-name {
    margin-top: 0.4rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--charcoal-color);
}

/* 한 줄 소개는 두 줄 높이를 미리 잡아 두어 성격 상자가 카드마다 같은 높이에서 시작합니다. */
.friend-card-intro {
    min-height: 3.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-muted);
}

.friend-facts {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--secondary-color) 18%, transparent);
    padding: 1rem;
    font-size: 0.875rem;
}

.friend-fact {
    display: grid;
    gap: 0.2rem;
}

@media (min-width: 640px) {
    .friend-fact {
        grid-template-columns: auto 1fr;
        align-items: baseline;
        column-gap: 0.75rem;
    }
}

.friend-fact dt {
    font-weight: 700;
    white-space: nowrap;
    color: var(--charcoal-color);
}

/* 값은 두 줄 높이를 기본으로 잡아 성격·좋아하는 것 길이가 달라도 상자 높이가 흔들리지 않습니다. */
.friend-fact dd {
    margin: 0;
    min-height: 3.5em;
    line-height: 1.75;
    color: var(--text-muted);
}

/* 이야기 영역은 남는 높이를 모두 차지해, 이야기 길이와 상관없이 버튼 줄이 카드 아래 같은 높이에 놓입니다. */
.friend-story {
    flex: 1 1 auto;
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .friend-story {
        font-size: 0.95rem;
        line-height: 1.9;
    }
}

/* 어울리는 분위기 안내도 두 줄 자리를 미리 비워 두어 버튼 줄의 시작 높이를 지켜 줍니다. */
.friend-mood {
    display: flex;
    min-height: 2.9rem;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--primary-color);
}

.friend-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

@media (min-width: 640px) {
    .friend-actions {
        flex-direction: row;
    }

    .friend-actions > a {
        flex: 1 1 0;
    }
}

/* 보관함 담기 버튼: 담긴 상태와 담기 전 상태를 색으로 또렷하게 구분합니다. */
.lib-btn {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px dashed color-mix(in srgb, var(--primary-color) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 24%, var(--cream-color));
    padding-inline: 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--charcoal-color) 88%, transparent);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.lib-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.lib-btn.is-saved {
    border-style: solid;
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--cream-color);
}

.lib-btn.is-saved:hover {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
    color: var(--cream-color);
}

/* 헤더의 보관함 바로가기와 담은 개수 표시 */
.library-link {
    position: relative;
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--cream-color);
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--charcoal-color);
    transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.library-link:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.library-count {
    display: inline-flex;
    min-width: 1.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary-color);
    padding-inline: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cream-color);
}

/* 담기/빼기 안내 문구가 잠깐 떠오르는 표시 */
.lib-toast {
    position: fixed;
    bottom: 5.5rem;
    left: 50%;
    z-index: 120;
    transform: translate(-50%, 0.75rem);
    border-radius: 999px;
    background: var(--charcoal-color);
    padding: 0.7rem 1.3rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cream-color);
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-card);
    transition: opacity 250ms ease, transform 250ms ease;
}

.lib-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (min-width: 640px) {
    .lib-toast {
        bottom: 2rem;
    }
}

.lib-remove {
    display: inline-flex;
    flex: 1 1 auto;
    min-height: 2.5rem;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    padding-inline: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: color 200ms ease, background 200ms ease;
}

.lib-remove:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
}

/* 보관함 카드: 종류 표시·제목·설명이 늘 같은 자리를 차지해 아래 버튼이 카드마다 같은 높이에서 시작합니다.
   제목은 두 줄, 설명은 세 줄까지만 보여 주고 넘치는 글자는 말줄임으로 정리합니다. */
.lib-card-title {
    display: -webkit-box;
    min-height: 3.5rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.lib-card-desc {
    display: -webkit-box;
    min-height: 5.25rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* 보관함 카드의 종류 표시 줄: 표시가 한 줄인 카드와 두 줄인 카드가 같은 자리에서 제목을 시작하도록 높이를 미리 잡아 둡니다. */
.lib-card-badges {
    min-height: 2rem;
}

/* 보관함 위쪽 도구 줄: 종류별 필터와 담은 개수를 한 줄에 정리해 무엇이 몇 개 있는지 바로 보이게 합니다. */
.lib-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.lib-total {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--cream-color);
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--charcoal-color);
}

.lib-total i {
    color: var(--primary-color);
}

.lib-total-num {
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

.lib-toolbar-note {
    margin-top: 0.85rem;
    font-size: 0.82rem;
    line-height: 1.75;
    color: var(--text-muted);
}

/* 담은 항목이 없을 때의 안내 화면: 안내 문구 아래에 종류별 둘러보기 카드를 나란히 놓아
   어디에서 무엇을 담을 수 있는지 한눈에 보이도록 정리합니다. */
.lib-empty {
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    background: color-mix(in srgb, var(--cream-color) 92%, transparent);
    padding: 2rem 1.15rem;
    text-align: center;
    box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
    .lib-empty {
        padding: 3rem 2rem;
    }
}

.lib-empty-icon {
    display: inline-flex;
    height: 4rem;
    width: 4rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    font-size: 1.5rem;
    color: var(--primary-color);
}

.lib-empty-title {
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--charcoal-color);
}

@media (min-width: 640px) {
    .lib-empty-title {
        font-size: 1.6rem;
    }
}

.lib-empty-text {
    margin: 0.6rem auto 0;
    max-width: 34rem;
    min-height: 5.25rem;
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--text-muted);
}

/* 다음에 할 일 표시: 지금 상태 안내 아래에서 '이런 항목을 담아 보세요' 한 줄로 이어 주어,
   상태 안내와 다음 동작이 한 번에 읽히도록 합니다. */
.lib-empty-next {
    margin-top: 1.75rem;
}

.lib-empty-next-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: var(--primary-color);
}

.lib-empty-next-label i {
    font-size: 0.75rem;
}

.lib-empty-types {
    display: grid;
    gap: 0.75rem;
    margin-top: 0;
}

@media (min-width: 640px) {
    .lib-empty-types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lib-empty-type {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    background: var(--cream-color);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.lib-empty-type:hover,
.lib-empty-type:focus-visible {
    border-color: var(--primary-color);
    transform: translateY(-0.2rem);
    box-shadow: var(--shadow-card);
}

.lib-empty-type-icon {
    display: inline-flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1.1rem;
}

.lib-empty-type-song {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
}

.lib-empty-type-video {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

.lib-empty-type-resource {
    background: color-mix(in srgb, var(--secondary-color) 42%, transparent);
    color: color-mix(in srgb, var(--secondary-color) 46%, var(--charcoal-color));
}

.lib-empty-type-name {
    margin-top: 0.15rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--charcoal-color);
}

.lib-empty-type-note {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-muted);
}

/* 종류별 카드의 안내 문구 길이가 달라져도, 아래 '담기' 안내는 카드 맨 아래 같은 자리에 붙습니다. */
.lib-empty-type-go {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.lib-empty-type-go i {
    font-size: 0.65rem;
}

/* 지금 고른 종류의 둘러보기 카드는 테두리와 배경으로 살짝 강조해,
   빈 안내를 읽은 다음 어디로 가면 되는지 한눈에 이어지도록 합니다. */
.lib-empty-type.is-highlight {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--secondary-color) 26%, var(--cream-color));
    box-shadow: var(--shadow-card);
}

.lib-empty-reset {
    margin-top: 1.25rem;
}

.lib-empty-reset.is-hidden {
    display: none;
}

/* 휴대폰에서는 '모두 보기' 버튼이 한 줄을 가득 채워 누르기 편하도록 합니다. */
@media (max-width: 639px) {
    .lib-empty-reset {
        width: 100%;
    }
}

/* 보관함 카드 맨 아래 줄: 빼기 버튼과 담은 날짜가 카드마다 같은 자리에 놓이도록 맞춥니다. */
.lib-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.15rem;
    border-top: 1px dashed var(--border-color);
    padding-top: 0.6rem;
}

.lib-card-date {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* 친구 페이지에서 '어울리는 동요·영상'을 눌러 들어왔을 때 목록 위에 나타나는 안내 상자입니다. */
.friend-focus-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--primary-color) 52%, transparent);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--secondary-color) 30%, var(--cream-color));
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-card);
}

.friend-focus-icon {
    display: inline-flex;
    height: 2.6rem;
    width: 2.6rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--cream-color);
}

.friend-focus-text {
    flex: 1 1 auto;
    min-width: 0;
}

.friend-focus-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.45;
    color: var(--charcoal-color);
}

.friend-focus-desc {
    margin-top: 0.2rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* 안내 상자 안의 '맨 앞에 모인 순서' 목록: 번호와 곡 제목을 알약 모양으로 나란히 보여 주어
   어떤 곡이 몇 번째로 놓였는지 카드의 번호와 바로 맞춰 볼 수 있습니다. */
.friend-focus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.friend-focus-chip {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--primary-color) 32%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream-color) 86%, transparent);
    padding: 0.2rem 0.75rem 0.2rem 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--charcoal-color);
}

.friend-focus-num {
    display: inline-flex;
    min-width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cream-color);
}

/* 곡 제목이 길어도 상자 밖으로 넘치지 않도록 한 줄 안에서 말줄임으로 정리합니다. */
.friend-focus-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-focus-reset {
    flex-shrink: 0;
    align-self: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--cream-color);
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--charcoal-color);
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease;
}

.friend-focus-reset:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

@media (max-width: 640px) {
    .friend-focus-banner {
        flex-wrap: wrap;
    }

    .friend-focus-reset {
        width: 100%;
    }
}

/* 친구에게 어울리는 카드는 테두리와 그림자로 맨 앞에서 또렷하게 구분합니다. */
.soft-card.is-friend-pick {
    border-color: color-mix(in srgb, var(--primary-color) 72%, transparent);
    box-shadow: 0 22px 55px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

/* 카드 위 추천 표시: 목록의 번호와 같은 숫자를 앞에 두어 어느 곡이 몇 번째로 모였는지 바로 보입니다. */
.friend-pick-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background: var(--primary-color);
    padding: 0.2rem 0.75rem 0.2rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--cream-color);
}

.friend-pick-rank {
    display: inline-flex;
    min-width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream-color) 92%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
}

.friend-pick-text {
    white-space: nowrap;
}

/* 영상 카드의 재생 표시와 길이 표시: 카드마다 같은 크기, 같은 자리에 놓이도록 한 곳에서 관리합니다. */
/* 재생 표시는 화면 폭이나 카드 자리와 상관없이 어디서나 같은 크기로 보이도록 한 값만 씁니다. */
.video-play-badge {
    flex: 0 0 auto;
    height: 3.5rem;
    width: 3.5rem;
    aspect-ratio: 1;
    font-size: 1.05rem;
    line-height: 1;
    transition: transform 300ms ease, box-shadow 300ms ease;
}

.media-frame:hover .video-play-badge,
.soft-card:focus-within .video-play-badge {
    transform: scale(1.08);
}

.video-duration-badge {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    display: inline-flex;
    min-width: 2.9rem;
    min-height: 1.6rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--charcoal-color) 78%, transparent);
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--cream-color);
    font-variant-numeric: tabular-nums;
}

/* 영상 카드: 제목·설명·정보 줄의 높이를 미리 잡아 두어 카드마다 같은 자리에서 시작하고,
   재생·담기 버튼은 늘 카드 아래에 붙습니다. */
.video-card-body {
    min-width: 0;
}

/* 제목은 두 줄 높이를 미리 잡아 두어 한 줄 제목과 두 줄 제목이 같은 자리에서 끝납니다. */
.video-card-title {
    display: -webkit-box;
    min-height: 3.5rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--charcoal-color);
}

/* 친구 추천 표시도 한 줄 자리를 미리 비워 두어 표시가 있든 없든 정보 줄이 같은 높이에서 시작합니다. */
/* 친구 추천 표시가 있든 없든 같은 높이를 차지해, 아래 소개 글이 카드마다 같은 자리에서 시작합니다. */
.video-card-badge {
    display: flex;
    min-height: 2rem;
    align-items: center;
    margin-top: 0.6rem;
}

/* 소개는 세 줄 높이를 미리 잡아 두어 소개 길이가 달라도 정보 줄과 버튼이 같은 자리에서 시작합니다. */
.video-card-desc {
    display: -webkit-box;
    flex: 0 0 auto;
    min-height: 5.25rem;
    margin-top: 0.5rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--text-muted);
}

/* 재생 시간·친구 정보 줄: 값이 없는 카드도 같은 높이를 지켜 아래 버튼이 같은 자리에서 시작합니다. */
/* 재생 시간·친구 정보 줄: 값이 하나도 없는 카드도 같은 높이를 지켜 아래 버튼이 같은 자리에서 시작합니다. */
.video-card-meta {
    display: flex;
    min-height: 2rem;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    margin-top: 0.85rem;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* 재생 시간과 친구 이름은 카드마다 언제나 한 줄 안에서 끝나도록 잘라 두어,
   정보 줄 높이가 달라지며 아래 버튼이 밀리는 일이 없게 합니다. */
.video-card-meta span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.3rem;
    overflow: hidden;
    white-space: nowrap;
}

.video-card-meta i {
    color: var(--primary-color);
}

/* 버튼 줄은 남는 높이를 아래로 밀어 카드마다 같은 자리에 놓습니다.
   영상 재생·담기 버튼은 좁은 화면에서도 두 칸씩 고르게 놓입니다. */
.video-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
}

/* 영상 카드의 버튼: 좁은 화면에서 두 칸 안에 글자가 잘리지 않도록 안쪽 여백과 글자 크기를 줄이고,
   버튼 안 글자가 길어지면 한 줄 안에서 자연스럽게 감싸이도록 합니다. */
.video-card-actions > .btn,
.video-card-actions > .lib-btn {
    min-width: 0;
    padding-inline: 0.6rem;
    font-size: 0.82rem;
    white-space: normal;
}

@media (min-width: 640px) {
    .video-card-actions > .btn,
    .video-card-actions > .lib-btn {
        padding-inline: 0.9rem;
        font-size: 0.9rem;
    }
}

/* 공지사항 목록 카드: 분류·고정 표시·날짜가 카드마다 같은 줄, 같은 자리에 놓이도록 맞춥니다. */
.notice-card {
    display: flex;
    flex-direction: column;
    gap: var(--notice-rhythm);
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .notice-card {
        padding: 1.75rem;
    }
}

.notice-meta {
    display: flex;
    min-height: 1.9rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.5rem;
}

/* 날짜는 고정 표시가 없는 카드에서도 오른쪽 끝에 붙어 같은 자리를 지킵니다. */
.notice-date {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 제목과 요약은 카드마다 같은 글자 크기와 줄 간격을 써서 목록이 고르게 읽히도록 합니다. */
.notice-title {
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--charcoal-color);
}

@media (min-width: 640px) {
    .notice-title {
        font-size: 1.35rem;
        line-height: 1.45;
    }
}

.notice-summary {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-muted);
}

.notice-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
}

.notice-more i {
    font-size: 0.7rem;
    transition: transform 200ms ease;
}

.notice-card:hover .notice-more i,
.notice-card:focus-visible .notice-more i {
    transform: translateX(0.2rem);
}

/* 캐릭터 상품 카드: 상태 표시·상품 이름·설명·가격 줄의 높이를 미리 잡아 두어
   카드마다 같은 자리에서 시작하고, 안내 버튼은 늘 카드 아래에 붙습니다. */
.product-badge-row {
    display: flex;
    min-height: 2rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

/* 상품 이름은 두 줄까지 보여 주고, 이름이 한 줄인 카드도 설명이 같은 높이에서 시작합니다. */
.product-card-title {
    display: -webkit-box;
    min-height: 3.4rem;
    margin-top: 0.75rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--charcoal-color);
    overflow-wrap: break-word;
}

/* 설명은 세 줄까지 고르게 보여 주어 준비 중인 상품도 어떤 상품인지 한눈에 알 수 있습니다. */
.product-card-desc {
    display: -webkit-box;
    min-height: 4.75rem;
    margin-top: 0.5rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-muted);
    overflow-wrap: break-word;
}

@media (min-width: 640px) {
    .product-card-title {
        min-height: 3.6rem;
        font-size: 1.2rem;
    }

    .product-card-desc {
        min-height: 5rem;
        font-size: 0.95rem;
    }
}

/* 가격 줄: 판매 중인 상품은 가격을, 준비 중인 상품은 안내 문구를 같은 자리에 보여 줍니다. */
.product-price-row {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    margin-top: 0.85rem;
    margin-bottom: 1rem;
}

.product-price {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--primary-color);
}

/* 준비 중 상태 표시: 캐릭터 상품 카드와 악보·교육자료 카드가 같은 모양(점선 알약 + 모래시계)과
   같은 말투('준비 중이에요')를 쓰도록, 가격 자리에서도 안내 표시가 한 줄을 가득 채웁니다. */
.product-price-row .pending-note {
    width: 100%;
}



.product-card-action {
    margin-top: auto;
}

/* 자료 카드: 분류·제목·설명·자료 정보의 높이를 미리 잡아 두어 카드마다 같은 자리에서 읽히도록 맞춥니다. */
.resource-badge-row {
    display: flex;
    min-height: 2rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

/* 자료 제목은 한 줄이든 두 줄이든 늘 같은 높이(두 줄)를 차지해,
   아래 설명과 자료 정보가 카드마다 같은 자리에서 시작합니다. */
.resource-card-title {
    display: -webkit-box;
    min-height: 3.6rem;
    margin-top: 0.75rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--charcoal-color);
}

/* 설명은 세 줄까지 같은 높이로 보여 주어 소개 길이가 달라도 아래 자료 정보가 같은 자리에서 시작합니다. */
.resource-card-desc {
    display: -webkit-box;
    min-height: 5.25rem;
    margin-top: 0.5rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .resource-card-title {
        min-height: 3.9rem;
        font-size: 1.3rem;
    }

    .resource-card-desc {
        min-height: 5.6rem;
        font-size: 0.95rem;
    }
}

/* 추천 연령·파일 형식·용량 세 칸은 값이 한 줄이든 두 줄이든 같은 높이를 지켜 정렬을 맞춥니다. */
/* 추천 연령·파일 형식·용량 세 칸은 위아래 여백까지 한 값으로 맞춰,
   자료 정보 상자가 카드마다 같은 높이에서 시작하고 끝나도록 합니다. */
.resource-spec {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 1rem 0 0;
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--secondary-color) 16%, transparent);
    padding: 0.85rem 0.5rem;
    text-align: center;
}

.resource-spec dt {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-muted);
}

.resource-spec dd {
    display: flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--charcoal-color);
    word-break: keep-all;
}

@media (min-width: 640px) {
    .resource-spec {
        padding: 1rem 0.75rem;
    }

    .resource-spec dt {
        font-size: 0.76rem;
    }

    .resource-spec dd {
        font-size: 0.88rem;
    }
}

/* 이용 조건 안내도 두 줄 자리를 미리 비워 두어 버튼 줄이 카드마다 같은 높이에서 시작합니다. */
.resource-access {
    display: flex;
    min-height: 3.1rem;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.9rem;
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--text-muted);
}

/* 이용 조건 안내가 조금 길어지더라도 두 줄 안에서 정리되어,
   다운로드·미리보기·담기 버튼 줄이 어느 카드에서나 같은 자리를 지킵니다. */
.resource-access span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 카드 사진을 누르면 미리보기가 열린다는 안내: 이용 조건 안내 아래에 한 줄로 두어
   카드마다 같은 자리에서 차분히 읽히고, 아래 버튼 자리가 흔들리지 않도록 합니다. */
.resource-preview-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.65;
    color: var(--primary-color);
}

.resource-preview-note i {
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* 카드 사진 위에 마우스를 올리거나 키보드로 초점을 두면, 사진을 누르면 미리보기가 열린다는
   안내가 사진 위에 부드럽게 나타납니다. 버튼을 따로 두지 않아도 무엇을 누르면 되는지
   한눈에 알 수 있고, 손가락으로 누르는 기기에서는 아래 카드 안내 문구가 같은 역할을 합니다. */
.preview-frame {
    position: relative;
}

.preview-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: color-mix(in srgb, var(--charcoal-color) 46%, transparent);
    color: var(--cream-color);
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 200ms ease;
}

.preview-frame:hover .preview-hint,
.preview-frame:focus-visible .preview-hint {
    opacity: 1;
}

.resource-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.1rem;
}

@media (min-width: 640px) {
    .resource-actions {
        grid-template-columns: 1fr 1fr;
    }

    .resource-actions > .lib-btn {
        grid-column: 1 / -1;
    }
}

/* 자료 미리보기 창: 사진 → 자료 정보 → 설명 → 버튼 순서로 한 줄씩 차분히 읽히도록 정리합니다. */
.resource-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.resource-modal-media {
    position: relative;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--secondary-color) 22%, var(--cream-color));
}

.resource-modal-media img {
    display: none;
    width: 100%;
    max-height: 22rem;
    object-fit: contain;
    vertical-align: middle;
}

.resource-modal-media img.is-on {
    display: block;
}

.resource-modal-loading,
.resource-modal-error {
    display: none;
    min-height: 11rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.resource-modal-loading.is-on,
.resource-modal-error.is-on {
    display: flex;
}

.resource-modal-facts {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.resource-modal-facts.is-on {
    display: flex;
}

.resource-fact {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 22%, transparent);
    padding: 0.25rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--charcoal-color);
}

.resource-fact i {
    font-size: 0.72rem;
    color: var(--primary-color);
}

/* 이용 조건 안내 문구도 같은 알약 모양의 작은 표시로 이어 놓되, 문장이 길면 줄바꿈되어
   네 가지 정보가 한 줄에서 카드와 같은 순서로 자연스럽게 읽히도록 합니다. */
.resource-fact-note {
    max-width: 100%;
    align-items: flex-start;
    white-space: normal;
    text-align: left;
}

.resource-fact-note i {
    margin-top: 0.3rem;
}

.resource-fact-note span {
    min-width: 0;
    overflow-wrap: break-word;
}

.resource-modal-actions {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.resource-download {
    display: none;
}

.resource-download.is-on {
    display: inline-flex;
}

/* 조건부 자료는 내려받기 대신 문의하기 버튼을 보여 줍니다. */
.resource-contact {
    display: none;
}

.resource-contact.is-on {
    display: inline-flex;
}

/* 조건부 자료 미리보기 창에서 이용 조건 안내를 한 덩어리로 보여 주는 상자입니다. */
.resource-modal-access {
    display: none;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--secondary-color) 16%, transparent);
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.resource-modal-access.is-on {
    display: flex;
}

/* 공지사항 상세: 목록으로 돌아가는 링크를 알약 모양 표시로 두어,
   긴 글을 읽는 중에도 지금 자리에서 바로 찾아 누를 수 있게 합니다. */
.notice-back-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--cream-color);
    padding: 0.45rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--charcoal-color);
    transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.notice-back-link:hover,
.notice-back-link:focus-visible {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--cream-color));
    color: var(--primary-color);
}

.notice-back-link i {
    font-size: 0.75rem;
    transition: transform 200ms ease;
}

.notice-back-link:hover i,
.notice-back-link:focus-visible i {
    transform: translateX(-0.2rem);
}

/* 공지사항 상세: 목록 카드와 똑같은 순서(분류·날짜 → 제목 → 요약)와 같은 사이 간격을 써서,
   목록에서 상세로 넘어가도 글자 자리가 그대로 이어집니다. */
.notice-detail-head {
    display: flex;
    flex-direction: column;
    gap: var(--notice-rhythm);
    margin-top: 2.5rem;
}

.notice-detail-title {
    margin-top: 0;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    line-height: 1.32;
    color: var(--charcoal-color);
    text-wrap: balance;
}

@media (min-width: 640px) {
    .notice-detail-title {
        font-size: 2.25rem;
        line-height: 1.28;
    }
}

.notice-detail-summary {
    margin-top: 0;
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-muted);
}

/* 본문: 긴 공지도 편하게 읽히도록 줄 간격과 제목·목록·이미지 여백을 한 곳에서 맞춥니다.
   본문과 위쪽 요약 사이를 넉넉히 띄우고 줄 간격을 조금 넓혀, 문단이 길어져도 눈이 편하게 이어집니다. */
.notice-article {
    margin-top: 2.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 2.5rem;
    font-size: 1rem;
    line-height: 1.95;
    color: color-mix(in srgb, var(--charcoal-color) 92%, transparent);
}

.notice-article p {
    margin-block: var(--notice-block-gap);
}

.notice-article > p:first-child {
    margin-top: 0;
}

.notice-article h2 {
    margin-top: 2.4rem;
    margin-bottom: 0.85rem;
    font-size: 1.5rem;
    line-height: 1.4;
}

.notice-article h3 {
    margin-top: 1.9rem;
    margin-bottom: 0.65rem;
    font-size: 1.2rem;
    line-height: 1.45;
}

.notice-article > h2:first-child,
.notice-article > h3:first-child {
    margin-top: 0;
}

.notice-article ul,
.notice-article ol {
    margin-block: var(--notice-block-gap);
    padding-left: 1.4rem;
}

/* 목록 항목의 줄 간격을 본문 문단과 같게 맞춰, 문단과 목록이 이어질 때 글자 리듬이 흔들리지 않습니다. */
.notice-article li {
    margin-block: 0.5rem;
    line-height: 1.9;
}

.notice-article img {
    display: block;
    width: 100%;
    height: auto;
    margin-block: var(--notice-block-gap);
    border-radius: 1rem;
}

/* 목록·이미지·문단 중 무엇으로 본문이 끝나더라도 아래 여백은 비워 두어,
   아래 문의 안내 상자와의 사이 간격이 늘 한 값으로 이어집니다. */
.notice-article > *:last-child {
    margin-bottom: 0;
}

/* 본문 아래 문의 안내 상자: 위쪽과 안쪽 여백을 넉넉히 두어 긴 글과 자연스럽게 이어집니다. */
.notice-contact-card {
    margin-top: 3rem;
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    background: color-mix(in srgb, var(--cream-color) 85%, transparent);
    padding: 1.75rem 1.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .notice-contact-card {
        padding: 2.25rem 2rem;
    }
}

/* 응원 메시지 보내기 폼: 입력란·안내 문구·글자 수 표시를 한 덩어리로 묶어
   두 칸의 간격과 높이가 같도록 맞춥니다. */
.cheer-form {
    display: grid;
    gap: 1.1rem;
}

.cheer-field {
    display: grid;
    gap: 0.5rem;
}

.cheer-label {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--charcoal-color);
}

.cheer-input {
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--cream-color);
    padding: 0.6rem 1.15rem;
    font-size: 0.95rem;
    color: var(--text-color);
    transition: border-color 200ms ease, background 200ms ease;
}

.cheer-input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
}

.cheer-input:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.cheer-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

/* 안내 문구는 입력란 바로 아래 왼쪽에, 글자 수는 오른쪽 끝에 붙여 한 줄로 읽히게 합니다.
   두 입력란이 같은 높이를 지키도록 안내 줄 높이를 미리 잡아 둡니다. */
.cheer-helper {
    display: flex;
    min-height: 1.25rem;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.cheer-hint {
    min-width: 0;
    flex: 1 1 auto;
}

.cheer-count {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--charcoal-color) 62%, transparent);
}

/* 응원 카드: 말풍선 표시 아래 메시지는 네 줄 높이를 미리 잡아 두어 카드마다 같은 자리에서 시작하고,
   이름 줄은 위쪽 구분선과 함께 늘 같은 높이에 놓입니다. */
/* 응원 카드 메시지: 말풍선 표시 아래에서 메시지 영역은 네 줄 높이를 미리 잡아 두어,
   메시지 길이와 상관없이 카드마다 글자가 같은 자리에서 시작합니다. */
.cheer-message {
    display: -webkit-box;
    min-height: 7rem;
    margin-top: 0.75rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 0.95rem;
    line-height: 1.75rem;
    color: var(--charcoal-color);
    overflow-wrap: break-word;
}

/* 이름 줄은 남는 높이를 위에서 밀어 내려, 메시지가 짧아도 카드마다 늘 아래 같은 자리에서 시작합니다. */
.cheer-author {
    display: flex;
    min-height: 2rem;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.cheer-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* 이용 안내 페이지(저작권·개인정보·이용약관) 공통 기준:
   안내 상자와 항목 카드의 안쪽 여백, 제목·본문 크기와 줄 간격, 목록 사이 간격,
   시행일 안내 줄의 모양을 이곳 한 곳에서 정해 세 페이지가 같은 결로 읽히도록 합니다. */
.policy-intro {
    margin-top: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .policy-intro {
        padding: 2rem;
    }
}

.policy-intro-text {
    font-size: 0.95rem;
    line-height: 1.9rem;
    color: var(--charcoal-color);
}

@media (min-width: 640px) {
    .policy-intro-text {
        font-size: 1rem;
        line-height: 2.1rem;
    }
}

/* 항목 카드 목록: 카드 사이 간격을 한 값으로 맞춰 어느 페이지에서나 같은 리듬으로 이어집니다. */
.policy-list {
    display: grid;
    gap: 1rem;
    margin-top: 2.5rem;
}

@media (min-width: 640px) {
    .policy-list {
        gap: 1.25rem;
        margin-top: 3rem;
    }
}

/* 항목 카드: 아이콘이 있는 페이지와 없는 페이지가 같은 안쪽 여백과 같은 글 시작 자리를 쓰도록 맞춥니다. */
.policy-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .policy-card {
        gap: 1.25rem;
        padding: 2rem;
    }
}

.policy-icon {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    font-size: 1rem;
    color: var(--primary-color);
}

.policy-body {
    min-width: 0;
    flex: 1 1 auto;
}

/* 제목과 본문은 화면 폭에 따라 한 단계만 커지고, 줄 간격은 글이 길어져도 같은 리듬으로 읽히도록 고정합니다. */
.policy-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--charcoal-color);
}

.policy-text {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.9rem;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .policy-title {
        font-size: 1.3rem;
        line-height: 1.45;
    }

    .policy-text {
        font-size: 1rem;
        line-height: 2.1rem;
    }
}

/* 시행일 안내 줄: 세 페이지 모두 같은 카드 모양으로 두고, 문의 버튼은 넓은 화면에서 오른쪽에 붙입니다. */
.policy-foot {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .policy-foot {
        margin-top: 2rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 2rem;
    }
}

.policy-foot-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--charcoal-color);
}

.policy-foot-text {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.85rem;
    color: var(--text-muted);
}

/* 시행일은 작은 알약 모양으로 두어, 어느 페이지에서나 같은 자리에서 눈에 들어오게 합니다. */
.policy-foot-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 26%, transparent);
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--charcoal-color);
}

@media (min-width: 640px) {
    .policy-foot-date {
        font-size: 0.82rem;
    }
}

/* 휴대폰에서는 안내 줄의 버튼이 한 줄을 가득 채워 누르기 편하도록 합니다. */
.policy-foot .btn {
    width: 100%;
}

@media (min-width: 640px) {
    .policy-foot .btn {
        width: auto;
        flex-shrink: 0;
    }
}

/* 하단 영역 공통 기준: 모든 페이지에서 같은 순서(브랜드 소개 → 콘텐츠 → 상품·소식 → 이용 안내)와
   같은 여백으로 읽히도록 한 곳에서 정합니다. 휴대폰에서는 메뉴 묶음을 두 칸으로 나눠 담고,
   큰 화면에서는 네 칸의 너비와 시작선을 고르게 맞춥니다. */
.site-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
}

/* 브랜드 소개는 작은 화면에서 한 줄 폭을 그대로 써서 소개 글과 연락처가 어색하게 갈라지지 않습니다. */
.site-footer-brand {
    grid-column: 1 / -1;
    min-width: 0;
}

.site-footer-brand-text {
    margin-top: 0.9rem;
    max-width: 22rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: color-mix(in srgb, var(--cream-color) 76%, transparent);
}

/* 연락처: 아이콘과 글자를 두 칸으로 나눠, 글이 길어져도 아이콘 자리가 흔들리지 않고
   주소나 안내 문구가 낱말 중간에서 끊기지 않도록 합니다. */
.site-footer-contact {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: color-mix(in srgb, var(--cream-color) 76%, transparent);
}

.site-footer-contact p {
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr);
    align-items: start;
    gap: 0.55rem;
}

.site-footer-contact i {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    line-height: 1;
    text-align: center;
    color: var(--secondary-color);
}

.site-footer-contact span {
    min-width: 0;
}

/* 이메일 주소와 답변 시간은 같은 굵기·같은 색으로 두어 두 줄이 나란히 읽히고,
   아주 긴 주소일 때만 줄을 바꿉니다. */
.site-footer-value {
    font-weight: 700;
    color: var(--cream-color);
    overflow-wrap: anywhere;
}

a.site-footer-value {
    transition: color 200ms ease;
}

a.site-footer-value:hover,
a.site-footer-value:focus-visible {
    color: var(--secondary-color);
}

/* 링크 묶음: 제목과 첫 링크 사이, 링크와 링크 사이 간격을 한 값으로 맞춰
   어느 묶음이든 첫 줄이 같은 높이에서 시작하도록 합니다. */
.site-footer-col {
    min-width: 0;
}

.site-footer-col .eyebrow {
    display: block;
    font-size: 0.72rem;
    line-height: 1.6;
}

.site-footer-links {
    display: grid;
    gap: 0.1rem;
    margin-top: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.8;
    color: color-mix(in srgb, var(--cream-color) 76%, transparent);
}

.site-footer-links a {
    display: inline-block;
    max-width: 100%;
    padding-block: 0.2rem;
    overflow-wrap: break-word;
    transition: color 200ms ease;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: var(--secondary-color);
}

/* 저작권 줄: 위 구분선과 위아래 여백, 좌우 시작선을 위쪽 칸과 같은 값으로 두어 나란히 맞습니다. */
.site-footer-copy {
    border-top: 1px solid color-mix(in srgb, var(--cream-color) 12%, transparent);
    padding-block: 1.15rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.8;
    color: color-mix(in srgb, var(--cream-color) 58%, transparent);
}

.site-footer-copy-inner {
    margin-inline: auto;
    max-width: 80rem;
    padding-inline: 1rem;
}

/* 휴대폰에서는 마지막 '이용 안내' 묶음이 한 줄 폭을 그대로 써서 긴 안내 이름이 잘게 갈라지지 않습니다. */
@media (max-width: 639px) {
    .site-footer-col-wide {
        grid-column: 1 / -1;
    }
}

@media (min-width: 640px) {
    .site-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem 1.75rem;
    }

    .site-footer-links {
        gap: 0.2rem;
        margin-top: 0.6rem;
        line-height: 2;
    }

    .site-footer-copy {
        padding-block: 1.35rem;
    }

    .site-footer-copy-inner {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .site-footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        align-items: start;
        gap: 2.5rem 2rem;
    }

    .site-footer-brand {
        grid-column: auto;
    }

    .site-footer-copy-inner {
        padding-inline: 2rem;
    }
}

/* 홈 첫 화면의 대표 버튼: '동요 듣기'가 가장 먼저 눈에 들어오도록
   코랄 포인트 색과 넉넉한 크기, 부드러운 빛 번짐을 이곳 한 곳에서 정합니다.
   좁은 화면에서는 한 줄을 가득 채워 누르기 편하고, 큰 화면에서는 글자 길이에 맞춰 놓입니다. */
.hero-cta {
    display: inline-flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent-color);
    padding-inline: 2rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cream-color);
    box-shadow: 0 20px 44px color-mix(in srgb, var(--accent-color) 42%, transparent);
    transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease, color 300ms ease;
}

.hero-cta:hover,
.hero-cta:focus-visible {
    transform: translateY(-0.2rem);
    background: color-mix(in srgb, var(--accent-color) 86%, var(--charcoal-color));
    box-shadow: 0 26px 54px color-mix(in srgb, var(--accent-color) 48%, transparent);
    color: var(--cream-color);
}

@media (min-width: 640px) {
    .hero-cta {
        padding-inline: 2.5rem;
        font-size: 1.2rem;
    }
}

/* 공지사항 목록 위쪽 한 줄: 고정 공지가 먼저 보인다는 안내와 전체 공지 개수를
   한 줄 안에 나란히 두어, 목록을 내리기 전에 내용이 한눈에 읽히도록 합니다.
   좁은 화면에서는 두 요소가 각각 한 줄씩 차분히 내려앉습니다. */
.notice-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-bottom: 1.5rem;
}

.notice-toolbar-note {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--text-muted);
    overflow-wrap: break-word;
}

.notice-toolbar-note i {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--primary-color);
}

/* 전체 공지 개수는 알약 모양 표시로 두어, 목록 카드의 분류 표시와 같은 결로 읽히게 합니다. */
.notice-toolbar-count {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--cream-color);
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--charcoal-color);
}

.notice-toolbar-count i {
    color: var(--primary-color);
}

.notice-toolbar-num {
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 639px) {
    .notice-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}