/* ============================================================
   sd-shell.css — 소플에이전트 공통 화면 요소
   ------------------------------------------------------------
   참조 디자인(카페24 모바일 스토어 샘플)의 색·폰트·간격을 실측해 맞췄다.

   실측값 (화면 픽셀 분포 기준)
     #ffffff  43.3%   기본 바탕
     #fdf5de  14.7%   따뜻한 크림 — 구간 배경으로 넓게 쓰임
     #f7f7f7   5.5%   연한 회색 구획
     #fededf   4.3%   연분홍 — 프로모션 구간
     #ffc8cb   2.5%   분홍 강조
     #ffde31   1.2%   노랑 — 세일·강조 배지
     #32343e   1.1%   먹색 — 본문·제목
   폰트: Noto Sans KR (참조 사이트 본문 폰트)

   광고 수익 구조라 배너·배지·색 구간을 아끼지 않는다.
   지면이 곧 상품이므로 눈에 띄는 것이 목적에 맞다.
   ============================================================ */

:root {
    /* 참조 디자인 실측 팔레트 */
    --ref-paper: #ffffff;
    --ref-cream: #fdf5de;
    --ref-cream-2: #fcf4dd;
    --ref-grey: #f7f7f7;
    --ref-grey-2: #efefef;
    --ref-pink-bg: #fededf;
    --ref-pink: #ffc8cb;
    --ref-yellow: #ffde31;
    --ref-ink: #32343e;
    --ref-ink-2: #3d3d3d;
    --ref-blue: #919cca;
    --ref-blue-2: #a8b1d5;

    /* 간격 — 참조 디자인의 리듬 */
    --ref-gap-sec: 34px;
    /* 섹션 사이 */
    --ref-gap-in: 16px;
    /* 섹션 안쪽 */
    --ref-pad-x: 14px;
    /* 좌우 여백 */
}

/* 본문 폰트 — 참조 사이트와 동일 계열 */
body,
.sd-app-container {
    font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Dotum, sans-serif;
}

/* ── 1. 빈 상태 ──────────────────────────────────────────────
   법인이 세팅하기 전에는 공지·자료실이 비어 있다. 아무 처리 없이 두면
   딜러에게 '고장난 앱'으로 보인다. 비어 있는 것도 정상 동작으로 보이게 한다. */
.sd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 54px 28px 60px;
    min-height: 260px;
}

.sd-empty-art {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--ref-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.sd-empty-art svg {
    width: 38px;
    height: 38px;
    stroke: var(--ref-ink);
    stroke-width: 1.5;
    fill: none;
}

.sd-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ref-ink);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.sd-empty-desc {
    font-size: 12.5px;
    line-height: 1.7;
    color: #8b8b8b;
    margin: 0;
    max-width: 268px;
}

.sd-empty-action {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1px solid var(--ref-grey-2);
    border-radius: 999px;
    background: #fff;
    color: var(--ref-ink);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.sd-empty-action:active {
    background: var(--ref-grey);
}

/* ── 2. 섹션 제목 ────────────────────────────────────────────
   참조 디자인처럼 가운데 정렬 + 작은 부제 한 줄. */
.sd-sec-head {
    text-align: center;
    padding: var(--ref-gap-sec) 20px var(--ref-gap-in);
}

.sd-sec-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--ref-ink);
    margin: 0;
}

.sd-sec-sub {
    font-size: 11.5px;
    color: #9a9a9a;
    margin: 7px 0 0;
    line-height: 1.5;
    letter-spacing: -0.2px;
}

.sd-sec-more {
    display: inline-block;
    margin: 14px auto 0;
    padding: 6px 18px;
    border: 1px solid var(--ref-grey-2);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ref-ink);
    text-decoration: none;
}

/* ── 3. 배지 ────────────────────────────────────────────────
   참조 디자인은 노랑·분홍으로 강하게 구분한다. 광고 매체라 이게 맞다. */
.sd-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.sd-badge--new {
    background: var(--ref-ink);
    color: #fff;
}

/* 프로모션·특가 — 참조의 노랑을 그대로 쓴다 */
.sd-badge--promo {
    background: var(--ref-yellow);
    color: #3a2f00;
}

/* 광고 표기 — 법상 의무. 분홍으로 분명하게 */
.sd-badge--ad {
    background: var(--ref-pink);
    color: #8a2e33;
}

.sd-badge--urgent {
    background: #ff5a5f;
    color: #fff;
}

.sd-badge--info {
    background: var(--ref-grey);
    color: #6b6b6b;
}

.sd-badge--done {
    background: var(--ref-blue-2);
    color: #1f2547;
}

/* ── 4. 카테고리 탭 ──────────────────────────────────────────
   참조 디자인처럼 헤더 바로 아래 붙는 가로 스크롤 줄. */
.sd-cattabs {
    position: relative;
    background: #fff;
    border-bottom: 1px solid var(--ref-grey-2);
}

.sd-cattabs-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 46px 0 var(--ref-pad-x);
    scroll-behavior: smooth;
}

.sd-cattabs-track::-webkit-scrollbar {
    display: none;
}

.sd-cattab {
    flex: 0 0 auto;
    padding: 14px 13px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #8b8b8b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    letter-spacing: -0.3px;
}

.sd-cattab.is-on {
    color: var(--ref-ink);
    font-weight: 800;
    border-bottom-color: var(--ref-ink);
}

.sd-cattabs-next {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 48px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    cursor: pointer;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 45%);
}

.sd-cattabs-next svg {
    width: 18px;
    height: 18px;
    stroke: var(--ref-ink);
    stroke-width: 2;
    fill: none;
}

/* ── 5. 전면 배너 ────────────────────────────────────────────
   좌우 여백 없이 화면 폭을 꽉 채운다. 광고 지면이라 가장 큰 면적을 준다. */
.sd-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ref-cream);
}

.sd-banner-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sd-banner-track::-webkit-scrollbar {
    display: none;
}

.sd-banner-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    display: block;
}

.sd-banner-slide img {
    width: 100%;
    display: block;
}

.sd-banner-adtag {
    position: absolute;
    top: 10px;
    left: 12px;
    padding: 4px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

.sd-banner-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 10px 0 16px;
    background: #fff;
}

.sd-banner-dot {
    width: 18px;
    height: 3px;
    border-radius: 4px;
    background: #dcdcdc;
    transition: all .2s;
}

.sd-banner-dot.is-on {
    background: var(--ref-ink);
    width: 26px;
}

/* ── 6. 구간 배경 ────────────────────────────────────────────
   참조 디자인은 섹션마다 바탕색을 바꿔 구간을 나눈다. */
.sd-band {
    background: #fff;
}

.sd-band--cream {
    background: var(--ref-cream);
}

.sd-band--pink {
    background: var(--ref-pink-bg);
}

.sd-band--grey {
    background: var(--ref-grey);
}

/* ── 7. 상품/콘텐츠 카드 그리드 ──────────────────────────────
   참조 디자인은 같은 페이지에서 2열·3열을 섞어 밀도를 조절한다. */
.sd-grid {
    display: grid;
    gap: 14px 10px;
    padding: 0 var(--ref-pad-x) var(--ref-gap-sec);
}

.sd-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.sd-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.sd-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.sd-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    background: var(--ref-grey);
}

.sd-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sd-card-badges {
    position: absolute;
    left: 6px;
    top: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.sd-card-name {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ref-ink);
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sd-card-meta {
    margin: 5px 0 0;
    font-size: 11.5px;
    color: #9a9a9a;
    line-height: 1.4;
}

/* ── 8. 점진 로딩 목록의 빈 상태 ─────────────────────────────
   품절안내·일일공지처럼 목록을 JS 로 그리는 화면은 마크업을 바꾸기 어렵다.
   대신 기존 요소(.sd-progressive-empty)에 같은 얼굴을 입힌다.
   문구는 그대로 두고 생김새만 통일한다. */
.sd-progressive-empty {
    display: block;
    text-align: center;
    padding: 54px 28px 60px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: #8b8b8b;
    font-weight: 500;
}

.sd-progressive-empty::before {
    content: "";
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--ref-cream) url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332343e' \
stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M22 12h-6l-2 3h-4l-2-3H2'/>\
<path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/>\
</svg>") center / 38px 38px no-repeat;
}

/* ── 9. 홈 화면 — 참조 디자인 배치 ───────────────────────────
   순서: 탭 → 전면배너 → 섹션제목 → 3열 → 색구간 → 2열 → 전면 프로모션 → 색구간 */

/* 3열 빠른 이동 — 참조의 상단 밀도 */
.sd-home-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 0;
    padding: 4px var(--ref-pad-x) var(--ref-gap-sec);
}

.sd-home-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 4px;
    cursor: pointer;
    border-radius: 4px;
}

.sd-home-quick-item:active {
    background: var(--ref-grey);
}

.sd-home-quick-ic {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ref-cream);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-home-quick-ic svg {
    width: 21px;
    height: 21px;
    stroke: var(--ref-ink);
}

.sd-home-quick-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ref-ink);
    text-align: center;
    line-height: 1.35;
    letter-spacing: -0.3px;
}

/* 2열 큰 버튼 — 참조의 'GOOD CHOICE' 자리 */
.sd-home-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 var(--ref-pad-x) var(--ref-gap-sec);
}

.sd-home-duo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 20px 8px;
    border: 0;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.3px;
    cursor: pointer;
    color: #fff;
}

.sd-home-duo-btn svg {
    width: 24px;
    height: 24px;
}

.sd-home-duo-btn--a {
    background: var(--ref-ink);
}

.sd-home-duo-btn--b {
    background: #0284c7;
}

/* 전면 프로모션 배너 — 좌우 여백 없이 */
.sd-home-promo {
    position: relative;
    display: block;
    margin: 0 0 var(--ref-gap-sec);
}

.sd-home-promo img {
    width: 100%;
    display: block;
}

/* 색 구간 안내 블록 — 참조의 '약국은요~' */
.sd-home-info {
    text-align: center;
    padding: 34px 24px 38px;
}

.sd-home-pills {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

.sd-home-info-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.45;
    color: var(--ref-ink);
    letter-spacing: -0.6px;
}

.sd-home-info-desc {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: #7a7264;
}

.sd-home-info-cta {
    margin-top: 20px;
    padding: 10px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--ref-ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

/* 섹션 사이 여백은 색 구간이 담당한다 — 카드에 그림자를 겹치지 않는다 */
.sd-band--cream + .sd-sec-head,
.sd-band--grey + .sd-sec-head {
    padding-top: var(--ref-gap-sec);
}

/* ── 10. 나타나는 효과 ───────────────────────────────────────
   참조 디자인은 fadeIn .6s 와 transform .3s 를 쓴다. 같은 값으로 맞춘다.
   스크롤로 화면에 들어올 때 한 번만 나타나고, 그 뒤에는 건드리지 않는다.

   접근성: 기기에서 '동작 줄이기'를 켠 사용자는 효과 없이 바로 보이게 한다.
   그렇게 안 하면 어지럼증을 유발할 수 있고, 효과가 안 도는 기기에서
   내용이 영영 안 보이는 사고도 막아준다. */
.sd-reveal {
    opacity: 0;
    /* 움직이는 거리를 14 → 22px 로 늘렸다. 시작 시점을 늦춰 눈앞에서 도는 만큼,
       거리가 짧으면 '움직였나?' 싶고 지나간다. */
    transform: translateY(22px);
    /* .6 → .75초. 끝에서 천천히 멎는 곡선이라 마지막이 눈에 남는다. */
    transition: opacity .75s cubic-bezier(.22, .9, .28, 1),
                transform .75s cubic-bezier(.22, .9, .28, 1);
    will-change: opacity, transform;
}

.sd-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* 여러 개가 이어질 때 살짝 시차를 준다 */
.sd-reveal--d1 {
    transition-delay: .1s;
}

.sd-reveal--d2 {
    transition-delay: .2s;
}

@media (prefers-reduced-motion: reduce) {
    .sd-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 배너 슬라이드 — 참조의 transform .3s 감각 */
.sd-banner-slide img {
    transition: transform .3s ease;
}

.sd-banner-slide:active img {
    transform: scale(.985);
}

/* 카드 눌림 반응 */
.sd-card-thumb img,
.sd-home-quick-item,
.sd-home-duo-btn {
    transition: transform .3s ease, background .2s ease;
}

.sd-home-duo-btn:active,
.sd-card:active .sd-card-thumb img {
    transform: scale(.97);
}

/* ── 11. 헤더 등장 · 스크롤 반응 ─────────────────────────────
   진입할 때 위에서 내려오며 나타난다. 참조 디자인의 fadeIn .6s 감각에 맞춘다.

   그리고 아래로 스크롤하면 헤더를 접어 화면을 넓게 쓰고,
   위로 올리면 즉시 다시 나온다. 목록이 긴 업무 앱에서 체감이 크다.

   sd.css 의 .sd-header(sticky, z-index:30)를 전제로 얹는 규칙이다. */
.sd-header {
    transition: transform .28s ease, box-shadow .28s ease;
    will-change: transform;
}

/* 진입 애니메이션 — 한 번만 */
.sd-header--enter {
    animation: sdHeaderDrop .5s cubic-bezier(.22, .9, .3, 1) both;
}

@keyframes sdHeaderDrop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 조금이라도 내려오면 그림자를 줘서 '떠 있는' 느낌을 만든다 */
.sd-header--shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* 아래로 스크롤 중 — 접어 올린다 */
.sd-header--hide {
    transform: translateY(-100%);
}

/* 헤더 아래 붙는 카테고리 탭도 함께 움직인다 */
.sd-cattabs {
    position: sticky;
    top: 0;
    z-index: 29;
    transition: transform .28s ease;
}

.sd-cattabs--hide {
    transform: translateY(-140%);
}

@media (prefers-reduced-motion: reduce) {

    .sd-header,
    .sd-cattabs {
        transition: none;
    }

    .sd-header--enter {
        animation: none;
    }

    .sd-header--hide,
    .sd-cattabs--hide {
        transform: none;
    }
}

/* ── 12. 목록 화면 — 참조 디자인 맞춤 ────────────────────────
   sd-shell.css 는 sd-notice.css·dashboard.css 보다 뒤에 로드되므로
   여기 규칙이 이긴다. 화면 마크업은 건드리지 않는다. */

/* 필터 칩 → 참조의 가로 탭 줄.
   알약 모양 대신 밑줄 탭으로 바꿔 헤더 아래 탭과 같은 언어를 쓴다. */
.filter-chips {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 var(--ref-pad-x);
    background: #fff;
    border-bottom: 1px solid var(--ref-grey-2);
}

.filter-chips::-webkit-scrollbar {
    display: none;
}

.sd-notice-page .filter-chip,
.filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 13px 11px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #8b8b8b;
    letter-spacing: -0.3px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}

.sd-notice-page .filter-chip.active,
.filter-chip.active {
    background: transparent;
    color: var(--ref-ink);
    font-weight: 800;
    border-bottom-color: var(--ref-ink);
}

/* 목록 위 요약 줄 — 참조의 부제 자리처럼 작고 흐리게 */
.sd-progressive-summary-row {
    padding: 14px var(--ref-pad-x) 6px;
}

.sd-progressive-summary {
    margin: 0;
    font-size: 11.5px;
    color: #9a9a9a;
    letter-spacing: -0.2px;
}

/* 더보기 → 참조의 둥근 테두리 버튼 */
.sd-progressive-more-wrap {
    text-align: center;
    padding: 6px var(--ref-pad-x) var(--ref-gap-sec);
}

.sd-progressive-more-btn {
    width: auto;
    min-height: 0;
    display: inline-block;
    padding: 11px 30px;
    border: 1px solid var(--ref-grey-2);
    border-radius: 999px;
    background: #fff;
    color: var(--ref-ink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    transition: background .2s;
}

.sd-progressive-more-btn:active {
    background: var(--ref-grey);
}

/* ── 13. 하단 네비게이션 — 참조 톤 ───────────────────────────
   84개 화면이 쓰는 자리라 인상에 미치는 영향이 크다.
   마크업은 그대로 두고 여기서만 덮어쓴다 (sd.css 보다 뒤에 로드된다). */
.sd-bottom-nav {
    background: rgba(255, 255, 255, .96);
    /* 목록이 뒤로 비쳐 지나가면 '떠 있는 바' 느낌이 난다 */
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--ref-grey-2);
    padding-top: 4px;
}

.sd-bottom-nav-item {
    position: relative;
    color: #a3a3a3;
    padding: 6px 4px 4px;
    transition: color .2s ease;
}

/* 선택된 항목 — 참조는 색만 바꾸지 않고 위에 짧은 막대를 얹는다 */
.sd-bottom-nav-item.active {
    color: var(--ref-ink);
}

.sd-bottom-nav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 18px;
    height: 2.5px;
    border-radius: 4px;
    background: var(--ref-ink);
    transform: translateX(-50%);
}

.sd-bottom-nav-item svg {
    transition: transform .2s ease;
}

.sd-bottom-nav-item.active svg {
    transform: translateY(-1px);
}

.sd-bottom-nav-item:active svg {
    transform: scale(.9);
}

.sd-bottom-nav-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-top: 3px;
}

.sd-bottom-nav-item.active .sd-bottom-nav-label {
    font-weight: 800;
}

/* ── 14. 포스터 — 세로 목록 → 2열 카드 ───────────────────────
   참조 디자인은 이미지가 있는 항목을 그리드로 크게 보여준다.
   포스터는 '보고 고르는' 콘텐츠라 줄글 목록보다 그리드가 맞다.
   마크업은 그대로 두고 배치만 바꾼다. */
.poster-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
    padding: 6px var(--ref-pad-x) 90px;
}

.poster-card {
    display: block !important;
    flex-direction: unset;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible;
}

.poster-thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
    border-radius: 4px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poster-thumbnail .poster-placeholder-icon {
    width: 34px;
    height: 34px;
}

.poster-tag {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--ref-yellow);
    color: #3a2f00;
    font-size: 10px;
    font-weight: 800;
}

.poster-info {
    padding: 9px 2px 0;
}

.poster-title {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ref-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.poster-meta {
    margin-top: 5px;
    font-size: 11px;
    color: #9a9a9a;
}

.poster-card:active .poster-thumbnail {
    transform: scale(.97);
    transition: transform .3s ease;
}

/* ── 15. 자료실 — 카드 → 얇은 행 ────────────────────────────
   파일 목록은 썸네일이 없고 이름이 정보의 중심이다.
   그리드로 바꾸면 오히려 읽기 어려워지므로, 참조의 목록 섹션처럼
   테두리·그림자를 걷고 얇은 구분선만 남긴다. */
.file-list {
    padding: 0 var(--ref-pad-x) 90px;
}

.file-card {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ref-grey-2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 14px 2px !important;
    gap: 12px !important;
}

.file-card:last-child {
    border-bottom: 0 !important;
}

.file-type-badge {
    width: 38px !important;
    height: 38px !important;
    border-radius: 4px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ref-ink);
    line-height: 1.45;
    letter-spacing: -0.3px;
}

.file-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #9a9a9a;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.file-dl-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ref-cream);
    color: var(--ref-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.file-card:active .file-dl-btn {
    transform: scale(.9);
}

/* ── 16. 공지 목록 카드 — 참조 형태로 교체 ───────────────────
   notice_today · out_of_stock · promotion · policy · notice_list ·
   discontinuation · price_change 7개 화면이 같은 클래스를 쓴다.
   각 화면의 <style> 안에 정의돼 있으므로 !important 로 덮는다.

   바꾸는 방향:
     떠 있는 흰 카드(테두리+그림자+16px 모서리)  →  얇은 구분선 행
   참조 디자인의 목록 섹션과 같은 방식이다. 카드가 겹겹이 쌓이면
   정보 밀도가 떨어지고 스크롤이 길어진다. */
.notice-card.change-card,
.change-card {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ref-grey-2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 15px var(--ref-pad-x) !important;
    gap: 8px !important;
    transition: background .2s ease;
}

.notice-card.change-card:active,
.change-card:active {
    background: var(--ref-grey) !important;
}

.change-card-top {
    align-items: center !important;
    gap: 6px !important;
}

/* 상태 배지 — 참조의 각진 작은 라벨 */
.change-type-badge {
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px;
    line-height: 1.45;
}

/* 날짜 — 오른쪽 끝에 흐리게 */
.apply-date-tag {
    margin-left: auto;
    font-size: 11px !important;
    color: #9a9a9a !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    font-weight: 500 !important;
}

.change-card-body {
    gap: 4px !important;
}

.change-summary {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ref-ink) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.3px;
}

/* 목록 컨테이너 — 카드가 아니라 행이므로 좌우 여백을 컨테이너에서 뺀다 */
.notice-list-wrap,
.notice-cards,
#outOfStockProgressList,
#todayNoticeProgressList,
#promotionProgressList,
#policyProgressList,
#tradeNoticeProgressList {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── 17. 공통 조각 — 검색·입력·결과 카드 ────────────────────
   화면마다 따로 정의돼 있지만 클래스 이름은 같다.
   여기서 한 번 덮으면 5~10개 화면씩 함께 바뀐다.

   기존 톤: 흰 카드 + 테두리 + 그림자 + 큰 모서리 (SDPC AI 스타일)
   참조 톤: 회색 바탕 + 테두리 없음 + 작은 모서리 */

/* 검색창 */
.search-box,
.product-search-box,
.search-input-box {
    background: var(--ref-grey) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding: 11px 16px !important;
    gap: 8px;
}

.product-search-input,
.search-box input,
.search-input-box input {
    background: transparent !important;
    border: 0 !important;
    font-size: 13px !important;
    color: var(--ref-ink);
    letter-spacing: -0.3px;
}

.product-search-input::placeholder,
.search-box input::placeholder {
    color: #a8a8a8;
}

/* 날짜 범위 · 검색 필터 줄 */
.date-range-row,
.search-filter-row,
.search-row {
    gap: 8px !important;
    padding: 12px var(--ref-pad-x) !important;
}

.date-range-input {
    background: var(--ref-grey) !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-size: 12.5px !important;
    padding: 10px 12px !important;
    color: var(--ref-ink);
}

.date-range-btn {
    background: var(--ref-ink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
}

/* 입력·결과·폼 카드 — 떠 있는 카드에서 구획으로 */
.input-card,
.form-card,
.result-card,
.notice-box {
    background: #fff !important;
    border: 1px solid var(--ref-grey-2) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 16px !important;
}

/* 입력 줄 */
.input-row {
    gap: 8px !important;
}

.input-row input,
.input-row select,
.input-card input,
.form-card input,
.form-card select,
.form-card textarea {
    background: var(--ref-grey) !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    padding: 11px 13px !important;
    color: var(--ref-ink);
}

/* 버튼 줄 */
.btn-row {
    gap: 8px !important;
    padding: 12px var(--ref-pad-x) !important;
}

.btn-row button {
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 12px 0 !important;
    border: 1px solid var(--ref-grey-2) !important;
}

/* 날짜 줄이 넘치는 문제 — input 이 기본 폭을 고집해 버튼이 잘린다.
   min-width:0 을 줘야 flex 안에서 줄어든다. */
.date-range-row {
    align-items: center;
}

.date-range-row .date-range-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
}

.date-range-row .date-range-btn {
    flex: 0 0 auto !important;
    white-space: nowrap;
}

/* ── 18. 배지 전면 교체 ──────────────────────────────────────
   지금 배지가 20종 넘게 흩어져 있고 색 규칙이 없다.
   일부는 대비가 나빠 글자가 잘 안 보인다 (보라 바탕에 민트 글자 등).

   참조 디자인의 방식으로 통일한다 — 각진 작은 라벨 · 뜻에 따라 4색.
     경고·중단  빨강      새것·강조   노랑
     정보·기타  회색      완료·정상  먹색
   화면 마크업은 건드리지 않고 클래스 이름만으로 색을 다시 배정한다. */
.change-type-badge,
[class*="badge-"] {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: -0.2px;
    white-space: nowrap;
    border: 0 !important;
}

.change-type-badge svg,
[class*="badge-"] svg {
    width: 11px !important;
    height: 11px !important;
    stroke-width: 2.4;
}

/* 멈춤·중단·품절 — 빨강 */
.badge-stop,
.badge-out,
.badge-soldout,
.badge-recall,
.badge-voluntary,
.badge-suspend {
    background: #ffe9ea !important;
    color: #c0303a !important;
}

/* 새것·행사·강조 — 참조의 노랑 */
.badge-new,
.badge-promotion,
.badge-event,
.badge-sales {
    background: var(--ref-yellow) !important;
    color: #3a2f00 !important;
}

/* 값 변경·요율 — 크림 */
.badge-price,
.badge-rate,
.badge-policy {
    background: var(--ref-cream) !important;
    color: #7a5c12 !important;
}

/* 재개·정상·완료 — 먹색 */
.badge-restocked,
.badge-resume,
.badge-done,
.badge-green {
    background: var(--ref-ink) !important;
    color: #fff !important;
}

/* 그 외 정보 — 회색 */
.badge-auth,
.badge-etc,
.badge-gray,
.badge-info,
.badge-security,
.badge-blue,
.badge-orange {
    background: var(--ref-grey) !important;
    color: #6b6b6b !important;
}

/* ── 19. 기간 프리셋 버튼 ────────────────────────────────────
   '오늘 / 7일 / 1개월' 같은 범위 선택. 참조의 탭 언어에 맞춘다. */
.date-preset-row {
    display: flex !important;
    gap: 6px !important;
    padding: 0 var(--ref-pad-x) 12px !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.date-preset-row::-webkit-scrollbar {
    display: none;
}

.date-preset-btn {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    border: 1px solid var(--ref-grey-2) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #8b8b8b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
    cursor: pointer;
    transition: all .2s ease;
}

.date-preset-btn.active {
    background: var(--ref-ink) !important;
    border-color: var(--ref-ink) !important;
    color: #fff !important;
}

/* 날짜 구분 기호 */
.date-range-sep {
    color: #c4c4c4;
    font-size: 12px;
    flex: 0 0 auto;
}

/* ── 20. 표 — 참조 톤으로 ────────────────────────────────────
   참조(쇼핑몰)에는 표가 없다. 그래서 '표를 어떻게 그리는지'는 베낄 원본이 없다.
   대신 참조의 목록 섹션이 쓰는 방식을 표에 옮긴다:
     세로줄 없음 · 가로 구분선만 · 헤더는 작고 흐린 라벨 · 카드 껍데기 제거

   인쇄·이메일 서식(payment_request_print, card_payment_sendinvoice)은
   이 파일을 읽지 않으므로 영향이 없다. 그쪽은 테두리가 있어야 한다. */
.sd-app-container table,
.ca-table,
.tbl,
.result-table,
.inv-tbl,
.prod-table,
.s16-table,
.sd-same-table,
.history-stats-table {
    width: 100%;
    border-collapse: collapse !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 12.5px;
    letter-spacing: -0.3px;
}

.sd-app-container table th,
.ca-table th,
.tbl th,
.result-table th,
.inv-tbl th,
.prod-table th,
.s16-table th,
.sd-same-table th {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ref-grey-2) !important;
    padding: 9px 8px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #9a9a9a !important;
    text-align: left;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.sd-app-container table td,
.ca-table td,
.tbl td,
.result-table td,
.inv-tbl td,
.prod-table td,
.s16-table td,
.sd-same-table td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #f4f4f4 !important;
    padding: 12px 8px !important;
    font-size: 12.5px !important;
    color: var(--ref-ink) !important;
    vertical-align: middle;
}

/* 마지막 줄은 선을 빼서 목록이 끊긴 느낌을 없앤다 */
.sd-app-container table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* 숫자 칸은 오른쪽 정렬 — 자릿수를 눈으로 비교할 수 있어야 한다 */
.sd-app-container table td.num,
.sd-app-container table td.amount,
.sd-app-container table td[align="right"],
.sd-app-container table th[align="right"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 표를 감싸던 카드 껍데기 제거 */
.table-wrap,
.table-card,
.result-table-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 var(--ref-pad-x) !important;
}

/* 가로로 긴 표는 좌우 스크롤. 잘려서 안 보이는 것보다 낫다 */
.table-scroll,
.sd-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.table-scroll::-webkit-scrollbar,
.sd-table-scroll::-webkit-scrollbar {
    display: none;
}

/* ── 21. 폼 라벨 ─────────────────────────────────────────────
   참조는 라벨을 작고 흐리게 두고 입력칸을 크게 잡는다. */
.sd-app-container label,
.input-label,
.form-label,
.field-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #9a9a9a !important;
    letter-spacing: -0.2px;
    display: block;
    margin-bottom: 6px;
}

.sd-app-container textarea,
.sd-app-container select,
.sd-app-container input[type="text"],
.sd-app-container input[type="number"],
.sd-app-container input[type="tel"],
.sd-app-container input[type="date"],
.sd-app-container input[type="password"] {
    background: var(--ref-grey);
    border: 0;
    border-radius: 4px;
    font-size: 13px;
    padding: 11px 13px;
    color: var(--ref-ink);
    width: 100%;
    box-sizing: border-box;
}

.sd-app-container textarea:focus,
.sd-app-container select:focus,
.sd-app-container input:focus {
    outline: 2px solid var(--ref-ink);
    outline-offset: -2px;
}

/* ── 22. 제목 중복 정리 ──────────────────────────────────────
   섹션 제목을 넣으면서 뒤로가기 줄의 제목과 겹치는 화면이 34개 생겼다.
   참조 디자인은 제목을 한 번만 보여준다 — 가운데 큰 제목이 그 역할이다.

   뒤로가기 줄은 '돌아가기'만 담당하게 두고 제목 글자는 감춘다.
   요소를 지우지 않고 감추기만 하므로, 섹션 제목이 없는 화면에서는
   그대로 보인다(아래 :has 규칙). */
.sd-app-container:has(.sd-sec-head) .back-nav-title,
.sd-app-container:has(.sd-sec-head) .sd-hub-back-title,
.sd-app-container:has(.sd-sec-head) .top-nav-title,
.sd-app-container:has(.sd-sec-head) .diet-app-bar-title,
.sd-app-container:has(.sd-sec-head) .sd-register-title,
body:has(.sd-sec-head) .sd-register-title {
    display: none;
}

/* 제목이 사라지면 뒤로가기 줄이 허전하므로 높이를 줄인다 */
.sd-app-container:has(.sd-sec-head) .back-nav {
    padding-top: 8px;
    padding-bottom: 0;
    min-height: 0;
    border-bottom: 0;
}

/* :has 를 모르는 구형 웹뷰 대비 — 그 경우엔 제목이 두 번 보이지만
   내용이 안 보이는 것보다는 낫다. 억지로 감추면 위험하다. */

/* ── 23. 빠른 메뉴 아이콘 — 진입 · 누름 ──────────────────────
   Lottie 같은 애니메이션 라이브러리 없이 CSS 로만 처리한다.
   라이브러리를 붙이면 300KB가 늘고 라이선스도 따져야 한다.

   진입: 아이콘 원이 살짝 작게 시작해 제자리로 커지고, 글자가 뒤따라 올라온다.
         8개가 한꺼번에 나타나면 뭉쳐 보이므로 순서대로 시차를 준다.
   누름: 원이 눌리고 아이콘이 살짝 작아진다. 눌렸다는 게 손끝에 전달돼야 한다. */
.sd-home-quick-item {
    animation: sdQuickIn .42s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes sdQuickIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 순서대로 — 한 칸당 45ms. 8칸이 다 나오기까지 0.36초라 기다리는 느낌이 없다 */
.sd-home-quick-item:nth-child(1) { animation-delay: .02s }
.sd-home-quick-item:nth-child(2) { animation-delay: .065s }
.sd-home-quick-item:nth-child(3) { animation-delay: .11s }
.sd-home-quick-item:nth-child(4) { animation-delay: .155s }
.sd-home-quick-item:nth-child(5) { animation-delay: .2s }
.sd-home-quick-item:nth-child(6) { animation-delay: .245s }
.sd-home-quick-item:nth-child(7) { animation-delay: .29s }
.sd-home-quick-item:nth-child(8) { animation-delay: .335s }
.sd-home-quick-item:nth-child(9) { animation-delay: .38s }

/* 원은 조금 늦게, 조금 더 튀어오르게 */
.sd-home-quick-ic {
    animation: sdQuickPop .46s cubic-bezier(.34, 1.42, .5, 1) both;
    animation-delay: inherit;
    transition: background .2s ease, transform .18s ease;
}

@keyframes sdQuickPop {
    from { transform: scale(.72) }
    to { transform: none }
}

.sd-home-quick-ic svg {
    transition: transform .18s ease;
}

/* 누름 반응 — 원은 색이 진해지고 아이콘은 살짝 줄어든다 */
.sd-home-quick-item:active .sd-home-quick-ic {
    background: #e9dfc2;
    transform: scale(.93);
}

.sd-home-quick-item:active .sd-home-quick-ic svg {
    transform: scale(.88);
}

/* 키보드 이동 시에도 어디에 있는지 보이게 */
.sd-home-quick-item:focus-visible {
    outline: none;
}

.sd-home-quick-item:focus-visible .sd-home-quick-ic {
    box-shadow: 0 0 0 3px rgba(2, 132, 199, .35);
}

/* 2열 큰 버튼도 같은 언어로 */
.sd-home-duo-btn {
    animation: sdQuickIn .42s cubic-bezier(.2, .8, .3, 1) both;
}

.sd-home-duo-btn:nth-child(1) { animation-delay: .05s }
.sd-home-duo-btn:nth-child(2) { animation-delay: .11s }


/* ── 24. 아이콘 애니메이션 — Lottie 대신 CSS ─────────────────
   Lottie 는 유료 자산 + 300KB 라이브러리가 필요하다.
   같은 인상을 SVG 선 그리기와 변형만으로 만든다.

   휴대폰의 "애니메이션 제거·동작 줄이기" 설정과 상관없이 항상 움직인다 (2026-10-06 결정).
   작고 잔잔한 움직임이라 멈추지 않는다. 스크롤 등장·헤더 전환은 그 설정을 계속 따른다.

   두 단계로 움직인다.
     1) 그려지기   선이 한 번에 나타나지 않고 그려지듯 채워진다
     2) 살아있기   그려진 뒤 뜻에 맞게 조금씩 움직인다 (종은 흔들리고 카트는 굴러간다)

   ★ 안 보이는 사고 방지
     기본 상태를 '보이는 값(dashoffset:0)'으로 두고, 애니메이션이 100에서
     0으로 오게 만들었다. 애니메이션이 안 도는 기기에서는 그냥 처음부터 보인다.
     반대로 짜면(기본 100 + forwards) 효과가 막힌 환경에서 아이콘이 영영 안 보인다. */
.sd-home-quick-ic svg > * {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: sdDraw .62s ease-out;
    animation-delay: inherit;
}

@keyframes sdDraw {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

/* 도형이 여럿인 아이콘은 순서대로 그려지게 살짝 어긋낸다 */
.sd-home-quick-ic svg > *:nth-child(2) { animation-duration: .72s; }
.sd-home-quick-ic svg > *:nth-child(3) { animation-duration: .82s; }
.sd-home-quick-ic svg > *:nth-child(4) { animation-duration: .92s; }
.sd-home-quick-ic svg > *:nth-child(5) { animation-duration: 1s; }

/* ── 살아있기 — 아이콘마다 다른 움직임 ─────────────────────
   전부 같은 동작을 주면 기계적으로 보인다. 뜻에 맞는 움직임을 하나씩 준다.
   6초에 한 번씩만 움직여, 눈에 거슬리지 않고 화면이 죽어 있지도 않다.

   ★ 순번(nth-child)이 아니라 아이콘 이름(data-ic)으로 건다.
     빠른 메뉴는 기능 스위치에 따라 항목이 빠지므로 순번이 밀린다.
     순번으로 걸면 도매를 끈 순간 '종 흔들림'이 카트 아이콘에 가서 붙는다. */

/* 스캔 — 스캔선이 위아래로 훑는다 */
[data-ic="scan-line"] svg > *:last-child,
[data-ic="scan-search"] svg > *:last-child {
    animation: sdDraw .62s ease-out, sdScan 6s 1.4s ease-in-out infinite;
    transform-origin: center;
}

@keyframes sdScan {
    0%, 70%, 100% { transform: translateY(0); opacity: 1; }
    78% { transform: translateY(-3.5px); opacity: .55; }
    88% { transform: translateY(3.5px); opacity: .55; }
}

/* 문서 — 안의 글줄이 차례로 반짝 */
[data-ic="file-text"] svg > *:nth-child(3),
[data-ic="file-text"] svg > *:nth-child(4),
[data-ic="clipboard-list"] svg > *:nth-child(3),
[data-ic="clipboard-list"] svg > *:nth-child(4) {
    animation: sdDraw .8s ease-out, sdBlink 6s 1.5s ease-in-out infinite;
}

[data-ic="file-text"] svg > *:nth-child(4),
[data-ic="clipboard-list"] svg > *:nth-child(4) { animation-delay: 0s, 1.75s; }

@keyframes sdBlink {
    0%, 72%, 100% { opacity: 1; }
    80% { opacity: .25; }
}

/* 카트 — 앞으로 굴러갔다 온다 */
[data-ic="shopping-cart"] svg,
[data-ic="package"] svg {
    animation: sdRoll 6s 1.6s ease-in-out infinite;
}

@keyframes sdRoll {
    0%, 68%, 100% { transform: translateX(0); }
    76% { transform: translateX(2.4px); }
    86% { transform: translateX(-1.4px); }
}

/* 종 — 흔들린다 */
[data-ic="bell"] svg,
[data-ic="bell-ring"] svg {
    transform-origin: 50% 22%;
    animation: sdRing 6s 1.8s ease-in-out infinite;
}

@keyframes sdRing {
    0%, 66%, 100% { transform: rotate(0); }
    71% { transform: rotate(11deg); }
    77% { transform: rotate(-9deg); }
    83% { transform: rotate(5deg); }
    89% { transform: rotate(-3deg); }
}

/* 학사모 — 살짝 뛴다 */
[data-ic="graduation-cap"] svg > *:first-child {
    animation: sdDraw .62s ease-out, sdToss 6s 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes sdToss {
    0%, 70%, 100% { transform: translateY(0) rotate(0); }
    78% { transform: translateY(-2.6px) rotate(-6deg); }
    86% { transform: translateY(0) rotate(0); }
}

/* 격자 — 네 칸이 차례로 커졌다 돌아온다 */
[data-ic="layout-grid"] svg > *,
[data-ic="grid"] svg > * {
    transform-origin: center;
    animation: sdDraw .62s ease-out, sdTilePop 6s 2.2s ease-in-out infinite;
}

[data-ic="layout-grid"] svg > *:nth-child(2) { animation-delay: 0s, 2.32s; }
[data-ic="layout-grid"] svg > *:nth-child(3) { animation-delay: 0s, 2.44s; }
[data-ic="layout-grid"] svg > *:nth-child(4) { animation-delay: 0s, 2.56s; }

@keyframes sdTilePop {
    0%, 72%, 100% { transform: scale(1); }
    80% { transform: scale(1.22); }
}

/* 서명 — 펜 획이 다시 그려진다 */
[data-ic="file-signature"] svg > *:last-child,
[data-ic="pen-line"] svg > *:last-child {
    animation: sdDraw .62s ease-out, sdSign 6s 2.4s ease-in-out infinite;
}

@keyframes sdSign {
    0%, 68%, 100% { stroke-dashoffset: 0; }
    74% { stroke-dashoffset: 100; }
    92% { stroke-dashoffset: 0; }
}

/* 사람 — 가볍게 끄덕인다 */
[data-ic="user"] svg > *:last-child,
[data-ic="users"] svg > *:last-child,
[data-ic="user-cog"] svg > *:last-child {
    transform-origin: center;
    animation: sdDraw .62s ease-out, sdNod 6s 2.6s ease-in-out infinite;
}

@keyframes sdNod {
    0%, 70%, 100% { transform: translateY(0); }
    78% { transform: translateY(-1.6px); }
    86% { transform: translateY(0); }
}


/* ── 25. 빠른 메뉴 타일 — 참조 Lottie 의 생김새 ────────────
   참조( iconscout 5110052 )를 프레임으로 뜯어 실제 값을 쟀다.
   선 아이콘이 아니라 '파란 그라데이션 타일 + 흰 글리프 + 긴 그림자' 였다.

   잰 값
     타일 바탕   왼쪽위 #0a8ed4 → 오른쪽아래 #2ecbf4  (어두운 쪽이 위)
     글리프      흰색 단색
     모서리      타일 폭의 약 30%
     그림자      오른쪽 아래로 길게, 파랑이 섞인 어두운 색

   ※ 기존 로고 그라데이션(#38BDF8→#0369A1)과 방향이 반대다.
     참조는 위가 진하고 아래가 밝다. 로고는 그대로 두고 여기만 참조를 따른다. */
.sd-home-quick-ic {
    width: 52px;
    height: 52px;
    border-radius: 30%;
    background: linear-gradient(135deg, #0a8ed4 0%, #1aa8e2 48%, #2ecbf4 100%);
    box-shadow: 0 7px 15px -6px rgba(6, 104, 160, .55),
                0 1px 2px rgba(6, 104, 160, .18);
}

.sd-home-quick-ic svg {
    width: 25px;
    height: 25px;
    stroke: #fff;
    stroke-width: 2.1;
    /* 긴 그림자 — drop-shadow 를 겹치면 앞 결과에 또 그림자가 붙어
       계단처럼 이어진다. 참조의 사선 그림자가 이 방식으로 나온다. */
    filter: drop-shadow(1px 1px 0 rgba(3, 74, 116, .22))
            drop-shadow(1px 1px 0 rgba(3, 74, 116, .18))
            drop-shadow(1px 1px 0 rgba(3, 74, 116, .13))
            drop-shadow(2px 2px 1px rgba(3, 74, 116, .10));
}

/* 누름 — 타일이 눌리고 그림자가 짧아진다 */
.sd-home-quick-item:active .sd-home-quick-ic {
    background: linear-gradient(135deg, #0777b3 0%, #1590c2 48%, #24aed4 100%);
    transform: scale(.93);
    box-shadow: 0 2px 6px -3px rgba(6, 104, 160, .55);
}

.sd-home-quick-item:active {
    background: transparent;
}

.sd-home-quick-item:focus-visible .sd-home-quick-ic {
    box-shadow: 0 0 0 3px rgba(2, 132, 199, .45),
                0 7px 15px -6px rgba(6, 104, 160, .55);
}

/* 글자는 타일이 커진 만큼 간격을 준다 */
.sd-home-quick-item {
    gap: 9px;
}

/* ── 26. 참조의 움직임 ─────────────────────────────────────
   참조 GIF 49프레임을 뜯어 보니, 흰 문서가 왼쪽 사람 손에서
   오른쪽 사람 손으로 비스듬히 건네지는 동작이 계속 반복된다.
   핵심은 '사선으로 미끄러지며 살짝 기울었다 자리잡기'다.
   그 결을 아이콘 등장에 옮긴다. */
.sd-home-quick-ic svg {
    animation: sdGlyphIn .52s cubic-bezier(.22, .9, .28, 1) both;
    animation-delay: inherit;
}

@keyframes sdGlyphIn {
    from { opacity: 0; transform: translate(-5px, -4px) rotate(-9deg) scale(.86); }
    to { opacity: 1; transform: none; }
}

/* 통째로 움직이는 두 아이콘은 등장 동작을 목록에 같이 적어야 한다.
   animation 축약형은 앞의 선언을 통째로 갈아치우기 때문이다. */
[data-ic="shopping-cart"] svg,
[data-ic="package"] svg {
    animation: sdGlyphIn .52s cubic-bezier(.22, .9, .28, 1) both,
               sdRoll 6s 1.6s ease-in-out infinite;
}

[data-ic="bell"] svg,
[data-ic="bell-ring"] svg {
    animation: sdGlyphIn .52s cubic-bezier(.22, .9, .28, 1) both,
               sdRing 6s 1.8s ease-in-out infinite;
}

/* 타일도 같은 결로 — 사선으로 올라오며 그림자가 내려앉는다 */
.sd-home-quick-ic {
    animation: sdTileIn .5s cubic-bezier(.2, .85, .3, 1) both;
    animation-delay: inherit;
}

@keyframes sdTileIn {
    from { opacity: 0; transform: translate(-3px, 7px) scale(.8); box-shadow: none; }
    to { opacity: 1; transform: none; }
}

/* 등장 동작이 끝난 뒤에도 남아 있어 누름 축소를 덮는다.
   타일이 눌리는 것으로 반응은 충분하므로 글리프 축소는 뺀다. */
.sd-home-quick-item:active .sd-home-quick-ic svg {
    transform: none;
}

/* 그림자 단계를 셋으로 줄였다. drop-shadow 는 겹칠수록 매 프레임
   다시 그려서, 움직이는 아이콘이 여덟 개면 저사양 기기에서 끊긴다. */
.sd-home-quick-ic svg {
    filter: drop-shadow(1px 1px 0 rgba(3, 74, 116, .2))
            drop-shadow(1px 1px 0 rgba(3, 74, 116, .15))
            drop-shadow(2px 2px 1px rgba(3, 74, 116, .12));
}


/* ── 27. 그림 아이콘 ───────────────────────────────────────
   참조는 파란 바탕이 그림의 일부다. 아이콘마다 그 위에 놓인 것이
   다르고, 그림자도 그 물건을 따라 진다.
   그래서 바탕을 CSS 네모로 깔지 않고 그림 안에 그렸다.
   바깥 타일은 여기서 걷어낸다. */
.sd-home-quick-ic--scene {
    width: 58px;
    height: 58px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.sd-home-quick-ic--scene .sd-scene {
    width: 100%;
    height: 100%;
    /* 바탕 네모가 바닥에 그림자를 드리운다 — 참조의 떠 있는 느낌 */
    filter: drop-shadow(0 6px 10px rgba(6, 104, 160, .34));
}

/* 선 아이콘용 흰 글리프 규칙이 그림에 새어 들어가지 않게 막는다 */
.sd-home-quick-ic--scene .sd-scene,
.sd-home-quick-ic--scene .sd-scene * {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
}

.sd-home-quick-ic--scene:focus-visible,
.sd-home-quick-item:focus-visible .sd-home-quick-ic--scene {
    box-shadow: none;
    outline: 2.5px solid rgba(2, 132, 199, .55);
    outline-offset: 3px;
    border-radius: 12px;
}

/* 누름 — 그림 전체가 눌린다 */
.sd-home-quick-item:active .sd-home-quick-ic--scene {
    background: none;
    box-shadow: none;
    transform: scale(.93);
}

/* ── 그림의 움직임 ──────────────────────────────────────────
   참조에서 흰 문서는 사선으로 건네지고, 바탕은 가만히 있는다.
   그대로 나눈다. 바탕은 등장만, 그 위의 물건은 계속 움직인다. */

/* 등장 — 바탕이 먼저 서고 그 위에 물건이 사선으로 얹힌다 */
.sd-scene-base {
    animation: sdSceneBase .5s cubic-bezier(.2, .85, .3, 1) both;
    animation-delay: inherit;
    transform-origin: 50% 55%;
}

@keyframes sdSceneBase {
    from { opacity: 0; transform: scale(.72); }
    to { opacity: 1; transform: none; }
}

.sd-sc-main,
.sd-sc-mark,
.sd-sc-sign {
    animation: sdSceneDrop .54s .1s cubic-bezier(.22, .9, .28, 1) both;
    animation-delay: inherit;
}

@keyframes sdSceneDrop {
    from { opacity: 0; transform: translate(-6px, -5px) rotate(-8deg); }
    to { opacity: 1; transform: none; }
}

/* 그림자는 물건보다 늦게 깔린다 — 물건이 내려앉은 뒤에 생기는 것이니까 */
.sd-sc-shadow {
    animation: sdSceneShadow .5s .26s ease-out both;
    animation-delay: inherit;
}

@keyframes sdSceneShadow {
    from { opacity: 0; transform: translate(-5px, -4px); }
    to { opacity: 1; transform: none; }
}

/* 포인트 한 조각은 참조처럼 통통 튀며 들어온다 */
.sd-sc-accent {
    animation: sdScenePop .5s .2s cubic-bezier(.34, 1.5, .5, 1) both;
    animation-delay: inherit;
    transform-origin: center;
}

@keyframes sdScenePop {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: none; }
}

/* 통계 그림의 스캔 띠 — 판 위를 아래위로 훑는다.
   참조에서 문서가 계속 오가듯, 여기서도 멈추지 않는 동작을 하나 둔다. */
.sd-sc-scan {
    animation: sdScenePop .5s .2s cubic-bezier(.34, 1.5, .5, 1) both,
               sdScanSweep 3.4s 1s ease-in-out infinite;
    transform-origin: center;
}

@keyframes sdScanSweep {
    0%, 100% { transform: translateY(-9px); opacity: .9; }
    50% { transform: translateY(9px); opacity: .9; }
}


/* ── 28. 그림 아이콘에 선 아이콘 규칙이 새지 않게 ──────────────
   `.sd-home-quick-ic svg > *` 는 선 아이콘용인데 (0,1,2) 라
   `.sd-scene-base` (0,1,0) 보다 세다. 그대로 두면 그림의 등장 동작이
   선 그리기(sdDraw)에 덮여 사라진다. 그림 쪽을 더 구체적으로 적어 되찾는다. */
.sd-home-quick-ic--scene .sd-scene,
.sd-home-quick-ic--scene .sd-scene > * {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    filter: none;
}

.sd-home-quick-ic--scene .sd-scene {
    filter: drop-shadow(0 6px 10px rgba(6, 104, 160, .34));
}

/* 바탕이 먼저 서고 */
.sd-home-quick-ic--scene .sd-scene .sd-scene-base {
    animation: sdSceneBase .5s cubic-bezier(.2, .85, .3, 1) both;
    animation-delay: inherit;
    transform-origin: 50% 55%;
}

/* 그 위 물건이 사선으로 얹히고 */
.sd-home-quick-ic--scene .sd-scene .sd-sc-main,
.sd-home-quick-ic--scene .sd-scene .sd-sc-mark,
.sd-home-quick-ic--scene .sd-scene .sd-sc-sign {
    animation: sdSceneDrop .54s cubic-bezier(.22, .9, .28, 1) both;
    animation-delay: inherit;
}

/* 그림자는 물건이 내려앉은 뒤에 생긴다 */
.sd-home-quick-ic--scene .sd-scene .sd-sc-shadow {
    animation: sdSceneShadow .5s .26s ease-out both;
    animation-delay: inherit;
}

/* 복숭아색 한 조각은 통통 튀며 */
.sd-home-quick-ic--scene .sd-scene .sd-sc-accent {
    animation: sdScenePop .5s .2s cubic-bezier(.34, 1.5, .5, 1) both;
    animation-delay: inherit;
    transform-origin: center;
}

/* 스캔 띠는 들어온 뒤 계속 훑는다 */
.sd-home-quick-ic--scene .sd-scene .sd-sc-scan {
    animation: sdScenePop .5s .2s cubic-bezier(.34, 1.5, .5, 1) both,
               sdScanSweep 3.4s 1s ease-in-out infinite;
    transform-origin: center;
}


/* ── 29. 장면 그림 ─────────────────────────────────────────
   참조의 움직임은 하나다. 서류가 왼쪽 사람 손에서 오른쪽 사람 손으로
   비스듬히 건네지고, 그동안 사람과 바탕은 가만히 있는다.
   그래서 서류만 움직인다. 다 같이 움직이면 무엇을 보라는 건지 흐려진다. */
.sd-illu {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
}

.sd-illu-doc,
.sd-illu-doc-sh {
    animation: sdIlluHandoff 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
    transform-origin: 97px 109px;
}

/* 그림자는 서류보다 조금 늦게 따라간다 — 판에서 살짝 떠 있어 보인다 */
.sd-illu-doc-sh {
    animation-delay: .08s;
}

@keyframes sdIlluHandoff {
    0%, 8% { transform: translate(-11px, -7px) rotate(-3.5deg); }
    50%, 58% { transform: translate(11px, 7px) rotate(2.5deg); }
    100% { transform: translate(-11px, -7px) rotate(-3.5deg); }
}

/* 두 사람은 서류를 따라 아주 조금 기운다 */
.sd-illu-left { animation: sdIlluLean 3.6s cubic-bezier(.45, 0, .55, 1) infinite; transform-origin: 48px 100px; }
.sd-illu-right { animation: sdIlluLean 3.6s 1.8s cubic-bezier(.45, 0, .55, 1) infinite; transform-origin: 150px 150px; }

@keyframes sdIlluLean {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(2.2deg); }
}

/* 처음 들어올 때 — 바탕이 서고 사람이 뜨고 서류가 얹힌다 */
.sd-illu-base { animation: sdIlluBaseIn .55s cubic-bezier(.2, .85, .3, 1) both; }
.sd-illu-left { animation: sdIlluFigIn .5s .12s cubic-bezier(.22, .9, .28, 1) both,
                           sdIlluLean 3.6s .62s cubic-bezier(.45, 0, .55, 1) infinite; }
.sd-illu-right { animation: sdIlluFigIn .5s .2s cubic-bezier(.22, .9, .28, 1) both,
                            sdIlluLean 3.6s 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.sd-illu-doc { animation: sdIlluDocIn .5s .3s cubic-bezier(.22, .9, .28, 1) both,
                          sdIlluHandoff 3.6s .8s cubic-bezier(.45, 0, .55, 1) infinite; }
.sd-illu-doc-sh { animation: sdIlluDocIn .5s .36s ease-out both,
                             sdIlluHandoff 3.6s .88s cubic-bezier(.45, 0, .55, 1) infinite; }
.sd-illu-shadow { animation: sdIlluShIn .5s .34s ease-out both; }

@keyframes sdIlluBaseIn { from { opacity: 0; transform: scale(.88) } to { opacity: 1; transform: none } }
@keyframes sdIlluFigIn { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } }
@keyframes sdIlluDocIn { from { opacity: 0; transform: translate(-18px, -12px) rotate(-9deg) } to { opacity: 1 } }
@keyframes sdIlluShIn { from { opacity: 0 } to { opacity: .34 } }


/* ── 30. 안내 구간 손질 ────────────────────────────────────
   CTA 가 <a> 라 인라인이었다. 인라인은 세로 여백이 주변을 밀지 못해
   margin-top:20px 이 먹지 않고 버튼이 윗글을 덮고 있었다. */
.sd-home-info-cta {
    display: inline-block;
    text-decoration: none;
}

/* 그림과 배지 사이 숨통 */
.sd-home-info .sd-illu {
    max-width: 220px;
    margin-bottom: 18px;
}

/* ── 31. 그림 아이콘 — 묶음 양식으로 다시 ──────────────────
   묶음 41개를 다 뜯어 보니 바탕 타일이 없었다. 미리보기의 파란 네모는
   배경이었지 그림이 아니다. 물체만 떠 있고, 그 아래 부드러운 그림자가 진다.
   앞서 깔았던 파란 네모와 긴 계단 그림자를 여기서 걷어낸다. */
.sd-home-quick-ic--scene {
    width: 54px;
    height: 54px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.sd-home-quick-ic--scene .sd-scene,
.sd-home-quick-ic--scene .sd-scene > * {
    filter: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
}

/* 물체가 바닥에서 살짝 떠 있게 — 묶음이 깊이를 내는 방식 */
.sd-home-quick-ic--scene .sd-scene {
    filter: drop-shadow(0 4px 7px rgba(10, 95, 150, .3));
}

.sd-home-quick-item:active .sd-home-quick-ic--scene {
    background: none;
    box-shadow: none;
    transform: scale(.92);
}

.sd-home-quick-item:focus-visible .sd-home-quick-ic--scene {
    box-shadow: none;
    outline: 2.5px solid rgba(2, 132, 199, .55);
    outline-offset: 4px;
    border-radius: 10px;
}

/* ── 움직임 ─────────────────────────────────────────────────
   묶음의 움직임은 한결같다. 조각이 순서대로 제자리를 찾아 들어오고,
   포인트 색 조각 하나가 통통 튄다. 요란하지 않다. */
.sd-home-quick-ic--scene .sd-scene .sd-sc-main {
    animation: sdPackIn .5s cubic-bezier(.22, .9, .28, 1) both;
    animation-delay: inherit;
    transform-origin: center;
}

.sd-home-quick-ic--scene .sd-scene .sd-sc-accent {
    animation: sdPackPop .52s .1s cubic-bezier(.34, 1.5, .5, 1) both;
    animation-delay: inherit;
    transform-origin: center;
}

.sd-home-quick-ic--scene .sd-scene .sd-sc-mark {
    animation: sdPackIn .5s .18s cubic-bezier(.22, .9, .28, 1) both;
    animation-delay: inherit;
    transform-origin: center;
}

.sd-home-quick-ic--scene .sd-scene .sd-sc-back {
    animation: sdPackFade .5s .16s ease-out both;
    animation-delay: inherit;
}

@keyframes sdPackIn {
    from { opacity: 0; transform: translateY(7px) scale(.86); }
    to { opacity: 1; transform: none; }
}

@keyframes sdPackPop {
    from { opacity: 0; transform: scale(.5); }
    to { opacity: 1; transform: none; }
}

@keyframes sdPackFade {
    from { opacity: 0 } to { opacity: .22 }
}


/* ── 32. 그림 아이콘의 움직임 ─────────────────────────────────
   홈과 카테고리 화면이 같은 규칙을 쓴다. 두 화면의 아이콘 상자에
   `sd-ic-scene` 표시를 같이 달아 두었기 때문이다. 규칙을 한 벌만 두면
   한쪽만 고쳐 두 화면이 서로 달라지는 일이 없다.

   묶음의 Lottie 는 멈추지 않고 계속 돈다. 여기도 전부 끊김 없이 돈다.
   대신 폭을 작게 잡았다. 계속 움직이는 것은 크게 움직이면 안 된다.
   카테고리 화면은 아이콘이 서른 개 넘게 한 화면에 있어서 더 그렇다.

   ※ 선택자에 class 를 둘씩 붙인 이유
     앞서 선 아이콘용으로 만든 [data-ic="bell"] svg 같은 규칙이 아직 남아 있고
     그게 (0,2,1) 이라 (0,2,0) 짜리 규칙을 덮는다. class 를 하나 더 얹어 되찾는다. */
.sd-ic-scene .sd-scene {
    animation: none;
}

/* ── 기본 움직임 — 그림마다 따로 정하지 않은 것들이 쓴다 ──────
   서른여섯 종에 전부 다른 동작을 주면 화면이 산만하다.
   뜻이 분명한 것만 따로 움직이고, 나머지는 조용히 떠 있는다. */
.sd-ic-scene .sd-scene .sd-sc-main {
    transform-origin: 50% 55%;
    animation: sdScFloat 3.4s ease-in-out infinite;
}

.sd-ic-scene .sd-scene .sd-sc-accent {
    transform-origin: 50% 55%;
    animation: sdScFloat 3.4s .3s ease-in-out infinite;
}

.sd-ic-scene .sd-scene .sd-sc-mark {
    animation: sdScGlow 3.4s .45s ease-in-out infinite;
}

@keyframes sdScFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-1.8px) rotate(1deg); }
}

@keyframes sdScGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

/* ── 뜻이 분명한 그림은 그 뜻대로 움직인다 ────────────────── */

/* 통계 — 막대가 파도처럼 차례로 오르내리고 화살표가 따라 오른다 */
.sd-ic-scene[data-ic="scan-line"] .sd-scene .sd-sc-back,
.sd-ic-scene[data-ic="scan-line"] .sd-scene .sd-sc-accent,
.sd-ic-scene[data-ic="scan-line"] .sd-scene .sd-sc-main {
    transform-origin: 50% 100%;
    animation: sdBarWave 2.4s ease-in-out infinite;
}

.sd-ic-scene[data-ic="scan-line"] .sd-scene .sd-sc-accent { animation-delay: .18s; }
.sd-ic-scene[data-ic="scan-line"] .sd-scene .sd-sc-main { animation-delay: .36s; }

.sd-ic-scene[data-ic="scan-line"] .sd-scene .sd-sc-mark {
    animation: sdArrowRise 2.4s ease-in-out infinite;
}

@keyframes sdBarWave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(.82); }
}

@keyframes sdArrowRise {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(1.6px, -2.2px); }
}

/* 문서 — 매달린 종이가 흔들리고 글줄이 밝아졌다 어두워진다 */
.sd-ic-scene[data-ic="file-text"] .sd-scene .sd-sc-main,
.sd-ic-scene[data-ic="file-signature"] .sd-scene .sd-sc-main,
.sd-ic-scene[data-ic="clipboard-list"] .sd-scene .sd-sc-main {
    transform-origin: 50% 0;
    animation: sdPaperSway 3.2s ease-in-out infinite;
}

@keyframes sdPaperSway {
    0%, 100% { transform: rotate(-1.4deg); }
    50% { transform: rotate(1.4deg); }
}

.sd-ic-scene[data-ic="file-text"] .sd-scene .sd-sc-mark,
.sd-ic-scene[data-ic="file-text"] .sd-scene .sd-sc-accent,
.sd-ic-scene[data-ic="clipboard-list"] .sd-scene .sd-sc-mark {
    animation: sdLinePulse 2.2s ease-in-out infinite;
}

.sd-ic-scene[data-ic="file-text"] .sd-scene .sd-sc-accent { animation-delay: .4s; }

@keyframes sdLinePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* 접수·배송 — 화살표가 상자로 계속 떨어지고, 받을 때마다 상자가 눌린다 */
.sd-ic-scene[data-ic="shopping-cart"] .sd-scene .sd-sc-accent {
    animation: sdDropLoop 1.9s cubic-bezier(.5, 0, .45, 1) infinite;
}

.sd-ic-scene[data-ic="shopping-cart"] .sd-scene .sd-sc-main {
    transform-origin: 50% 100%;
    animation: sdBoxTake 1.9s ease-out infinite;
}

@keyframes sdDropLoop {
    0% { transform: translateY(-7px); opacity: 1; }
    45% { transform: translateY(4px); opacity: .9; }
    58% { transform: translateY(6px); opacity: 0; }
    59% { transform: translateY(-9px); opacity: 0; }
    75%, 100% { transform: translateY(-7px); opacity: 1; }
}

@keyframes sdBoxTake {
    0%, 40% { transform: scale(1); }
    52% { transform: scale(1.06, .94); }
    68%, 100% { transform: scale(1); }
}

/* 알림 — 종이 흔들리고, 입은 조금 늦게 따라온다 */
.sd-ic-scene[data-ic="bell"] .sd-scene .sd-sc-main,
.sd-ic-scene[data-ic="bell"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 8px;
    animation: sdBellRock 2.1s ease-in-out infinite;
}

.sd-ic-scene[data-ic="bell"] .sd-scene .sd-sc-accent { animation-delay: .1s; }

@keyframes sdBellRock {
    0%, 100% { transform: rotate(-7deg); }
    50% { transform: rotate(7deg); }
}

/* 교육 — 책이 숨쉬듯 펼쳐졌다 오므라든다 */
.sd-ic-scene[data-ic="graduation-cap"] .sd-scene .sd-sc-main,
.sd-ic-scene[data-ic="graduation-cap"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 32px;
    animation: sdBookBreathe 2.8s ease-in-out infinite;
}

.sd-ic-scene[data-ic="graduation-cap"] .sd-scene .sd-sc-accent { animation-delay: .08s; }

@keyframes sdBookBreathe {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(.9); }
}

/* 게시판·문의 — 점이 차례로 튀고 뒤 풍선이 번갈아 커진다 */
.sd-ic-scene[data-ic="layout-grid"] .sd-scene .sd-sc-mark circle {
    transform-origin: center;
    animation: sdDotBounce 1.35s ease-in-out infinite;
}

.sd-ic-scene[data-ic="layout-grid"] .sd-scene .sd-sc-mark circle:nth-child(2) { animation-delay: .15s }
.sd-ic-scene[data-ic="layout-grid"] .sd-scene .sd-sc-mark circle:nth-child(3) { animation-delay: .3s }

.sd-ic-scene[data-ic="layout-grid"] .sd-scene .sd-sc-accent {
    transform-origin: 60px 54px;
    animation: sdBubbleTalk 2.7s ease-in-out infinite;
}

@keyframes sdDotBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .7 }
    25% { transform: translateY(-3.4px); opacity: 1 }
}

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

/* 계약 — 연필이 쉬지 않고 서명한다 */
.sd-ic-scene[data-ic="file-signature"] .sd-scene .sd-sc-accent {
    transform-origin: 55px 33px;
    animation: sdPenLoop 1.8s ease-in-out infinite;
}

@keyframes sdPenLoop {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    30% { transform: translate(-4px, 3px) rotate(-5deg); }
    60% { transform: translate(-1px, .5px) rotate(2deg); }
}

/* 기본정보 — 신분증이 기울고 사람이 늦게 따라 움직인다 */
.sd-ic-scene[data-ic="user"] .sd-scene .sd-sc-main {
    transform-origin: 32px 35px;
    animation: sdCardTilt 3s ease-in-out infinite;
}

.sd-ic-scene[data-ic="user"] .sd-scene .sd-sc-accent {
    transform-origin: 21px 35px;
    animation: sdCardTilt 3s .16s ease-in-out infinite;
}

@keyframes sdCardTilt {
    0%, 100% { transform: rotate(-1.6deg); }
    50% { transform: rotate(1.6deg); }
}

/* 갱신·이력 — 두 화살표가 계속 돈다 */
.sd-ic-scene[data-ic="refresh-cw"] .sd-scene .sd-sc-main,
.sd-ic-scene[data-ic="refresh-cw"] .sd-scene .sd-sc-accent,
.sd-ic-scene[data-ic="history"] .sd-scene .sd-sc-main,
.sd-ic-scene[data-ic="history"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 32px;
    animation: sdSpin 3.6s linear infinite;
}

@keyframes sdSpin {
    to { transform: rotate(360deg); }
}

/* 공지 — 확성기가 외치듯 흔들린다 */
.sd-ic-scene[data-ic="megaphone"] .sd-scene .sd-sc-main,
.sd-ic-scene[data-ic="megaphone"] .sd-scene .sd-sc-mark {
    transform-origin: 10px 32px;
    animation: sdShout 2.2s ease-in-out infinite;
}

/* 소리는 퍼졌다 잦아든다 */
.sd-ic-scene[data-ic="megaphone"] .sd-scene .sd-sc-accent {
    transform-origin: 38px 32px;
    animation: sdShoutWave 2.2s ease-in-out infinite;
}

@keyframes sdShout {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@keyframes sdShoutWave {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: .75; }
}

/* 주의 — 천천히 깜빡인다. 급하게 깜빡이면 불안하다 */
.sd-ic-scene[data-ic="alert-triangle"] .sd-scene .sd-sc-accent,
.sd-ic-scene[data-ic="alert-circle"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 38px;
    animation: sdWarn 1.8s ease-in-out infinite;
}

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

/* 위치 — 핀이 지도 위에서 통통 뛴다 */
.sd-ic-scene[data-ic="map-pin"] .sd-scene .sd-sc-accent,
.sd-ic-scene[data-ic="map-pin"] .sd-scene .sd-sc-main {
    animation: sdPinHop 1.9s cubic-bezier(.4, 0, .5, 1) infinite;
}

@keyframes sdPinHop {
    0%, 55%, 100% { transform: translateY(0); }
    25% { transform: translateY(-4px); }
    40% { transform: translateY(-1px); }
}

/* 신규등록 — 더하기가 커졌다 작아진다 */
.sd-ic-scene[data-ic="plus-circle"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 32px;
    animation: sdPlusPulse 2s ease-in-out infinite;
}

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

/* 분석 — 조각이 빠졌다 들어간다 */
.sd-ic-scene[data-ic="pie-chart"] .sd-scene .sd-sc-accent {
    animation: sdSlicePull 2.6s ease-in-out infinite;
}

@keyframes sdSlicePull {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2.6px, -2.6px); }
}

/* 둘러보기 — 바늘이 천천히 돈다 */
.sd-ic-scene[data-ic="compass"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 32px;
    animation: sdNeedle 5s ease-in-out infinite;
}

@keyframes sdNeedle {
    0%, 100% { transform: rotate(-14deg); }
    50% { transform: rotate(14deg); }
}

/* 제품 — 플라스크 속 액체가 출렁인다 */
.sd-ic-scene[data-ic="flask-conical"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 55px;
    animation: sdSlosh 2.4s ease-in-out infinite;
}

@keyframes sdSlosh {
    0%, 100% { transform: rotate(-2.4deg); }
    50% { transform: rotate(2.4deg); }
}

/* CP점검 — 방패의 체크가 그려졌다 지워진다 */
.sd-ic-scene[data-ic="shield-check"] .sd-scene .sd-sc-accent {
    stroke-dasharray: 34;
    animation: sdCheckDraw 2.8s ease-in-out infinite;
}

@keyframes sdCheckDraw {
    0%, 12% { stroke-dashoffset: 34; }
    40%, 78% { stroke-dashoffset: 0; }
    96%, 100% { stroke-dashoffset: 34; }
}

/* 거래처 — 창문에 차례로 불이 들어온다 */
.sd-ic-scene[data-ic="building"] .sd-scene .sd-sc-mark rect {
    animation: sdWindow 3s ease-in-out infinite;
}

.sd-ic-scene[data-ic="building"] .sd-scene .sd-sc-mark rect:nth-child(2) { animation-delay: .2s }
.sd-ic-scene[data-ic="building"] .sd-scene .sd-sc-mark rect:nth-child(3) { animation-delay: .4s }
.sd-ic-scene[data-ic="building"] .sd-scene .sd-sc-mark rect:nth-child(4) { animation-delay: .6s }
.sd-ic-scene[data-ic="building"] .sd-scene .sd-sc-mark rect:nth-child(5) { animation-delay: .8s }
.sd-ic-scene[data-ic="building"] .sd-scene .sd-sc-mark rect:nth-child(6) { animation-delay: 1s }

@keyframes sdWindow {
    0%, 100% { opacity: .9 }
    50% { opacity: .35 }
}

/* 정산 — 카드가 미끄러진다 */
.sd-ic-scene[data-ic="credit-card"] .sd-scene .sd-sc-accent {
    animation: sdSwipe 2.6s ease-in-out infinite;
}

@keyframes sdSwipe {
    0%, 100% { transform: translateX(0); opacity: 1 }
    50% { transform: translateX(2.6px); opacity: .8 }
}

/* 카테고리 화면은 한 줄에 넷씩 놓인다. 줄마다 시작을 어긋내
   서른 개가 한 박자로 뛰지 않게 한다. */
.sd-category-nav-items-grid > *:nth-child(4n+2) .sd-scene * { animation-delay: .3s }
.sd-category-nav-items-grid > *:nth-child(4n+3) .sd-scene * { animation-delay: .6s }
.sd-category-nav-items-grid > *:nth-child(4n+4) .sd-scene * { animation-delay: .9s }


/* ── 33. 카테고리 화면 — 그림 크기와 바탕 ──────────────────
   여기는 아이콘이 31종 쓰인다. 여덟 개만 그림으로 바꾸면 나머지가
   회색 선 아이콘으로 남아 한 화면에서 두 그림체가 싸운다.
   그래서 31종을 전부 덮었다. 뜻이 겹치는 것은 같은 그림을 나눠 쓴다. */
.sd-category-nav-item-icon--scene {
    color: inherit;
}

/* 묶음의 아이콘은 바탕 없이 떠 있다. 원래 깔려 있던 회색 네모를 없앤다 */
.sd-category-nav-item-icon--scene::before,
.sd-category-nav-item-card:active .sd-category-nav-item-icon--scene::before,
.sd-category-nav-item-card:hover .sd-category-nav-item-icon--scene::before {
    background-color: transparent;
}

.sd-category-nav-item-icon--scene .sd-scene {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 3px 6px rgba(10, 95, 150, .28));
}

/* ── 34. 사람이 들어간 그림의 움직임 ─────────────────────────
   참조에서 가장 눈에 띄던 동작은 서류가 한 사람에게서 다른 사람에게
   비스듬히 건네지는 것이었다. 아이콘 크기로 줄여도 그 동작이 핵심이다.
   사람은 거의 안 움직이고 서류만 오간다. 다 같이 움직이면 무엇을 보라는 건지 흐려진다.

   ※ 앞의 [data-ic="file-signature"] 연필 규칙이 여기에도 걸린다.
     계약 그림이 연필에서 사람으로 바뀌었으니 여기서 다시 정한다. */
.sd-ic-scene[data-ic="handoff"] .sd-scene .sd-sc-accent,
.sd-ic-scene[data-ic="file-signature"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 47px;
    animation: sdHandoff 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes sdHandoff {
    0%, 100% { transform: translate(-3.5px, -1.6px) rotate(-2.5deg); }
    50% { transform: translate(3.5px, 1.6px) rotate(2.5deg); }
}

/* 주는 쪽과 받는 쪽이 번갈아 살짝 기운다 */
.sd-ic-scene[data-ic="handoff"] .sd-scene .sd-sc-back,
.sd-ic-scene[data-ic="file-signature"] .sd-scene .sd-sc-back {
    transform-origin: 13px 46px;
    animation: sdLeanA 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}

.sd-ic-scene[data-ic="handoff"] .sd-scene .sd-sc-main,
.sd-ic-scene[data-ic="file-signature"] .sd-scene .sd-sc-main {
    transform-origin: 51px 46px;
    animation: sdLeanB 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes sdLeanA {
    0%, 100% { transform: rotate(2.6deg); }
    50% { transform: rotate(-1.4deg); }
}

@keyframes sdLeanB {
    0%, 100% { transform: rotate(-1.4deg); }
    50% { transform: rotate(2.6deg); }
}

/* 상담 — 말풍선의 점이 차례로 튀고 두 사람이 번갈아 기운다 */
.sd-ic-scene[data-ic="people-talk"] .sd-scene .sd-sc-mark circle,
.sd-ic-scene[data-ic="messages-square"] .sd-scene .sd-sc-mark circle {
    transform-origin: center;
    animation: sdDotBounce 1.35s ease-in-out infinite;
}

.sd-ic-scene[data-ic="people-talk"] .sd-scene .sd-sc-mark circle:nth-child(2),
.sd-ic-scene[data-ic="messages-square"] .sd-scene .sd-sc-mark circle:nth-child(2) { animation-delay: .15s }

.sd-ic-scene[data-ic="people-talk"] .sd-scene .sd-sc-mark circle:nth-child(3),
.sd-ic-scene[data-ic="messages-square"] .sd-scene .sd-sc-mark circle:nth-child(3) { animation-delay: .3s }

.sd-ic-scene[data-ic="people-talk"] .sd-scene .sd-sc-back,
.sd-ic-scene[data-ic="messages-square"] .sd-scene .sd-sc-back {
    transform-origin: 16px 61px;
    animation: sdLeanA 2.8s ease-in-out infinite;
}

.sd-ic-scene[data-ic="people-talk"] .sd-scene .sd-sc-main,
.sd-ic-scene[data-ic="messages-square"] .sd-scene .sd-sc-main {
    transform-origin: 48px 61px;
    animation: sdLeanB 2.8s ease-in-out infinite;
}

/* 말풍선은 말할 때마다 조금 커진다 */
.sd-ic-scene[data-ic="people-talk"] .sd-scene .sd-sc-accent,
.sd-ic-scene[data-ic="messages-square"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 20px;
    animation: sdBubbleTalk 2.8s ease-in-out infinite;
}

/* 교육(사람+책) — 책만 숨쉬고 사람은 가만히 있는다 */
.sd-ic-scene[data-ic="person-study"] .sd-scene .sd-sc-accent {
    transform-origin: 32px 50px;
    animation: sdBookBreathe 2.8s ease-in-out infinite;
}

.sd-ic-scene[data-ic="person-study"] .sd-scene .sd-sc-main {
    transform-origin: 32px 43px;
    animation: sdScFloat 3.4s ease-in-out infinite;
}


/* ── 35. 다른 서비스로 나가는 탭 ───────────────────────────
   소플 탭은 여기서 화면을 바꾸는 게 아니라 쏘플로 넘어간다.
   눌렀을 때 통째로 다른 서비스가 뜨는 이유를 미리 알려줘야 한다.
   그래서 이름 옆에 나가는 화살표를 붙이고, 브랜드 색으로 구분한다. */
.sd-cattab--out {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #0a8ed4;
}

.sd-cattab--out.is-on {
    color: #0a8ed4;
    border-bottom-color: #0a8ed4;
}

.sd-cattab-out {
    width: 11px;
    height: 11px;
    /* 글자보다 살짝 위로 — 이름과 같은 줄에 매달린 것처럼 보이게 */
    margin-top: -2px;
    opacity: .75;
}

.sd-cattab--out:active {
    opacity: .6;
}