/* ============================================================
 * Magazine cards — archive grid, filters, home block, single
 * Prefix: .magazine- and .spt- (Korean theme)
 * ============================================================ */

/* --- 카테고리 색상 (accent + soft 배경) --- */
.magazine-card,
.magazine-cat-pill {
    --mag-accent: #2563eb;      /* default = blue */
    --mag-accent-soft: #e0ecff;
    --mag-accent-ink: #1e3a8a;
}

/* 가이드 = blue */
.magazine-card.cat-guide,
.magazine-card[data-cat="가이드"],
.magazine-cat-pill[data-cat="가이드"]      { --mag-accent:#2563eb; --mag-accent-soft:#e0ecff; --mag-accent-ink:#1e3a8a; }
/* 꿀팁 = green */
.magazine-card.cat-tip,
.magazine-card[data-cat="꿀팁"],
.magazine-cat-pill[data-cat="꿀팁"]        { --mag-accent:#16a34a; --mag-accent-soft:#dcfce7; --mag-accent-ink:#14532d; }
/* 뉴스 = red */
.magazine-card.cat-news,
.magazine-card[data-cat="뉴스"],
.magazine-cat-pill[data-cat="뉴스"]        { --mag-accent:#dc2626; --mag-accent-soft:#fee2e2; --mag-accent-ink:#7f1d1d; }
/* 리뷰 = purple */
.magazine-card.cat-review,
.magazine-card[data-cat="리뷰"],
.magazine-cat-pill[data-cat="리뷰"]        { --mag-accent:#7c3aed; --mag-accent-soft:#ede9fe; --mag-accent-ink:#4c1d95; }
/* 비교 = teal */
.magazine-card.cat-compare,
.magazine-card[data-cat="비교"],
.magazine-cat-pill[data-cat="비교"]        { --mag-accent:#0d9488; --mag-accent-soft:#ccfbf1; --mag-accent-ink:#134e4a; }
/* 랭킹 = orange */
.magazine-card.cat-rank,
.magazine-card[data-cat="랭킹"],
.magazine-cat-pill[data-cat="랭킹"]        { --mag-accent:#ea580c; --mag-accent-soft:#ffedd5; --mag-accent-ink:#7c2d12; }
/* 이벤트 = pink */
.magazine-card.cat-event,
.magazine-card[data-cat="이벤트"],
.magazine-cat-pill[data-cat="이벤트"]      { --mag-accent:#db2777; --mag-accent-soft:#fce7f3; --mag-accent-ink:#831843; }
/* FAQ = gray */
.magazine-card.cat-faq,
.magazine-card[data-cat="FAQ"],
.magazine-cat-pill[data-cat="FAQ"]         { --mag-accent:#64748b; --mag-accent-soft:#f1f5f9; --mag-accent-ink:#1e293b; }

/* --- 그리드 --- */
.magazine-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    margin:24px 0 32px;
    list-style:none;
    padding:0;
}
@media (max-width:1024px){
    .magazine-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}
@media (max-width:768px){
    .magazine-grid{ grid-template-columns:1fr; gap:14px; }
}

/* --- 카드 --- */
.magazine-card{
    position:relative;
    background:var(--c-surface,#fff);
    border:1px solid var(--c-border,#e1e6ef);
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow-sm,0 1px 2px rgba(15,27,45,.04));
    transition:transform .2s cubic-bezier(.2,.7,.2,1),
               box-shadow .2s cubic-bezier(.2,.7,.2,1),
               border-color .2s cubic-bezier(.2,.7,.2,1);
    display:flex;
    flex-direction:column;
    min-height:100%;
}
.magazine-card::before{
    content:"";
    position:absolute; left:0; top:0; bottom:0;
    width:4px;
    background:var(--mag-accent);
    opacity:.0;
    transition:opacity .2s ease;
    z-index:1;
    pointer-events:none;
}
.magazine-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg,0 14px 32px rgba(15,27,45,.10));
    border-color:var(--mag-accent);
}
.magazine-card:hover::before{ opacity:1; }

.magazine-card__link{
    display:flex;
    flex-direction:column;
    height:100%;
    text-decoration:none;
    color:inherit;
}

/* --- 썸네일 / fallback --- */
/* spt-card는 480x480 정사각으로 저장되므로 카드도 1:1로 표시해 위아래 잘림 방지 */
.magazine-card__thumb{
    position:relative;
    aspect-ratio:1/1;
    background:var(--c-surface-2,#f3f6fb);
    overflow:hidden;
}
.magazine-card__thumb img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.magazine-card:hover .magazine-card__thumb img{ transform:scale(1.04); }

.magazine-card__thumb--fallback{
    background:linear-gradient(135deg, var(--mag-accent) 0%, var(--mag-accent-ink) 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 20px;
    text-align:center;
}
.magazine-card__thumb--fallback .magazine-card__thumb-title{
    font-size:1.05rem;
    font-weight:700;
    line-height:1.35;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* --- 본문 --- */
.magazine-card__body{
    padding:16px 18px 18px;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
}

.magazine-card__badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    align-self:flex-start;
    padding:4px 10px;
    background:var(--mag-accent-soft);
    color:var(--mag-accent-ink);
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.01em;
    text-decoration:none;
}

.magazine-card__title{
    margin:2px 0 0;
    font-size:1.05rem;
    font-weight:700;
    color:var(--c-primary-ink,#0c1828);
    line-height:1.4;
    letter-spacing:-.005em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.magazine-card__excerpt{
    margin:0;
    color:var(--c-muted,#6b7891);
    font-size:.88rem;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.magazine-card__date{
    margin:0;
    font-size:.92rem;
    font-weight:700;
    color:var(--mag-accent);
    letter-spacing:.01em;
}

.magazine-card__meta{
    margin-top:auto;
    padding-top:10px;
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    font-size:.78rem;
    color:var(--c-muted,#6b7891);
    border-top:1px dashed var(--c-border-soft,#eef2f8);
}
.magazine-card__meta .dot{ opacity:.5; }
.magazine-card__meta time{ font-variant-numeric:tabular-nums; }

/* 컴팩트(관련/홈 등) — 호환 */
.magazine-card--sm .magazine-card__body{ padding:14px 16px 16px; gap:6px; }
.magazine-card--sm .magazine-card__title{ font-size:.98rem; }

/* ============================================================
 * 필터 / 정렬 바
 * ============================================================ */
.magazine-toolbar{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:20px 0 4px;
    padding:14px 16px;
    background:var(--c-surface,#fff);
    border:1px solid var(--c-border,#e1e6ef);
    border-radius:12px;
    box-shadow:var(--shadow-sm,0 1px 2px rgba(15,27,45,.04));
}
.magazine-toolbar__row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.magazine-toolbar__label{
    font-size:.82rem;
    font-weight:700;
    color:var(--c-primary,#1f3a5f);
    flex:0 0 auto;
    min-width:62px;
}

/* 정렬 셀렉트 */
.magazine-toolbar__sort{
    appearance:none;
    -webkit-appearance:none;
    background:var(--c-surface,#fff)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%236b7891' d='M0 0l6 8 6-8z'/></svg>") no-repeat right 12px center / 10px 7px;
    border:1px solid var(--c-border,#e1e6ef);
    border-radius:10px;
    padding:8px 32px 8px 12px;
    font-size:.88rem;
    color:var(--c-text,#1f2a3d);
    min-height:38px;
    cursor:pointer;
}
.magazine-toolbar__sort:focus{
    outline:none;
    border-color:var(--c-primary-2,#2c5594);
    box-shadow:0 0 0 3px rgba(44,85,148,.18);
}

/* 필터 칩 */
.magazine-toolbar__chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.magazine-chip{
    appearance:none;
    background:var(--c-surface-2,#f3f6fb);
    border:1px solid var(--c-border-soft,#eef2f8);
    color:var(--c-text,#1f2a3d);
    border-radius:999px;
    padding:8px 14px;
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
    line-height:1.2;
    min-height:38px;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.magazine-chip:hover{
    background:#fff;
    border-color:var(--c-primary-2,#2c5594);
    color:var(--c-primary,#1f3a5f);
}
.magazine-chip.is-active{
    background:var(--c-primary,#1f3a5f);
    color:#fff;
    border-color:var(--c-primary,#1f3a5f);
}

/* 카테고리 nav 활성 상태 + 색상 도트 */
.magazine-archive__cats{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}
.magazine-archive__cat-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    background:var(--c-surface,#fff);
    border:1px solid var(--c-border,#e1e6ef);
    border-radius:999px;
    color:var(--c-text,#1f2a3d);
    text-decoration:none;
    font-size:.85rem;
    font-weight:600;
    min-height:38px;
    line-height:1.2;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.magazine-archive__cat-link::before{
    content:"";
    display:inline-block;
    width:8px; height:8px;
    border-radius:50%;
    background:var(--mag-accent,#2563eb);
}
.magazine-archive__cat-link[data-cat="가이드"]   { --mag-accent:#2563eb; }
.magazine-archive__cat-link[data-cat="꿀팁"]     { --mag-accent:#16a34a; }
.magazine-archive__cat-link[data-cat="뉴스"]     { --mag-accent:#dc2626; }
.magazine-archive__cat-link[data-cat="리뷰"]     { --mag-accent:#7c3aed; }
.magazine-archive__cat-link[data-cat="비교"]     { --mag-accent:#0d9488; }
.magazine-archive__cat-link[data-cat="랭킹"]     { --mag-accent:#ea580c; }
.magazine-archive__cat-link[data-cat="이벤트"]   { --mag-accent:#db2777; }
.magazine-archive__cat-link[data-cat="FAQ"]      { --mag-accent:#64748b; }
.magazine-archive__cat-link:hover{
    border-color:var(--mag-accent,#2563eb);
    color:var(--mag-accent,#2563eb);
    background:#fff;
}
.magazine-archive__cat-link.is-active{
    background:var(--mag-accent,#2563eb);
    border-color:var(--mag-accent,#2563eb);
    color:#fff;
}
.magazine-archive__cat-link.is-active::before{
    background:#fff;
}
.magazine-archive__cat-link .muted{
    font-size:.75rem;
    opacity:.85;
}
.magazine-archive__cat-link.is-active .muted{ color:#fff; opacity:.9; }

/* 필터 적용으로 숨김 */
.magazine-card.is-hidden{
    display:none !important;
}

/* 검색 결과 없음 */
.magazine-empty-state{
    grid-column:1/-1;
    padding:32px 20px;
    text-align:center;
    color:var(--c-muted,#6b7891);
    background:var(--c-surface-2,#f3f6fb);
    border:1px dashed var(--c-border,#e1e6ef);
    border-radius:12px;
    font-size:.92rem;
}

/* ============================================================
 * 홈 페이지 - 최신 매거진
 * ============================================================ */
.home-magazine-section{ margin-bottom:32px; }
.home-magazine-section .magazine-grid{ margin-top:14px; }

/* ============================================================
 * 단일 페이지 - 읽기 진행 막대 + 공유 버튼
 * ============================================================ */
.magazine-progress{
    position:fixed;
    left:0; top:0;
    width:100%;
    height:3px;
    background:transparent;
    z-index:60;
    pointer-events:none;
}
.magazine-progress__bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#2c5594 0%,#fbbf24 100%);
    transition:width .08s linear;
}

.magazine-reading-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    margin-left:6px;
    background:#fef3c7;
    color:#92400e;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    vertical-align:middle;
}
.magazine-reading-badge::before{
    content:"";
    display:inline-block;
    width:6px; height:6px; border-radius:50%;
    background:#f59e0b;
}

.magazine-share{
    margin:28px 0 14px;
    padding:18px 20px;
    background:var(--c-surface-2,#f3f6fb);
    border:1px solid var(--c-border,#e1e6ef);
    border-radius:12px;
}
.magazine-share__title{
    margin:0 0 12px;
    font-size:1rem;
    font-weight:700;
    color:var(--c-primary,#1f3a5f);
}
.magazine-share__buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.magazine-share__btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 16px;
    min-height:44px;
    border:1px solid var(--c-border,#e1e6ef);
    background:var(--c-surface,#fff);
    color:var(--c-text,#1f2a3d);
    border-radius:10px;
    font-size:.88rem;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.magazine-share__btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-md,0 4px 12px rgba(15,27,45,.06));
}
.magazine-share__btn--kakao{
    background:#fee500;
    border-color:#fee500;
    color:#3a1d1d;
}
.magazine-share__btn--kakao:hover{ background:#ffd400; border-color:#ffd400; }
.magazine-share__btn--copy{
    background:var(--c-primary,#1f3a5f);
    color:#fff;
    border-color:var(--c-primary,#1f3a5f);
}
.magazine-share__btn--copy:hover{ background:var(--c-primary-deep,#172a4a); }
.magazine-share__btn[data-copied="1"]{
    background:#16a34a;
    border-color:#16a34a;
    color:#fff;
}

@media (max-width:768px){
    .magazine-toolbar{ padding:12px 12px; }
    .magazine-toolbar__row{ gap:8px; }
    .magazine-toolbar__label{ min-width:auto; flex:1 0 100%; margin-bottom:-4px; }
    .magazine-card__body{ padding:14px 14px 16px; }
    .magazine-card__title{ font-size:1rem; }
    .magazine-share__buttons{ gap:8px; }
    .magazine-share__btn{ flex:1; justify-content:center; min-width:120px; }
}

/* 2026-10-23 — 페이지형 글 카드에 붙는 post_class "page"가 article.page(본문 컨테이너) 여백을 물려받아
   썸네일 좌우에 흰 여백이 생기던 문제 수정 */
article.magazine-card.page { margin: 0; padding: 0; max-width: none; }