/* 애즈랜드 피드 - 공통 스타일 (토스피드 참고 디자인, 피그마 t82zPwu16bTl7FPl1lONeW 기준) */

:root {
    --feed-content-max: 1180px;
    --feed-ink: #191f28;
    --feed-gray600: #4e5968;
    --feed-gray400: #8b95a1;
    --feed-border: #f2f4f6;
    --feed-chip-bg: #f6f7f8;
    --feed-icon-bg: #f4f5f6;
    --feed-blue: #3182f6;
    --feed-blue-bg: #ebf2ff;
    --feed-purple: #8b5cf6;
    --feed-purple-bg: #f3eeff;
    --feed-amber: #de8c05;
    --feed-amber-bg: #fff4e0;
    --feed-green: #0fa673;
    --feed-green-bg: #e6f9f1;
    --feed-red: #f04452;
    --feed-red-bg: #feecee;
    --feed-teal: #14b8a6;
    --feed-teal-bg: #e6faf7;
    --feed-indigo: #6366f1;
    --feed-indigo-bg: #eef0ff;
    --feed-pink: #ec4899;
    --feed-pink-bg: #fdeef5;
}

.feed-body {
    margin: 0;
    background: #fff;
    color: var(--feed-ink);
    font-family: 'Inter', 'Noto Sans KR', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.feed-container { max-width: 100%; padding: 0 80px; box-sizing: border-box; }

/* 좌우 폭 — 일반적인 사이트처럼 중앙 정렬된 최대폭 + 최소 여백 */
.feed-header, .feed-hero-title, .feed-featured-wrap, .feed-filters, .feed-segments, .feed-grid-wrap, .feed-pagination, .feed-empty, .feed-search-meta {
    padding-left: max(24px, calc((100% - var(--feed-content-max)) / 2));
    padding-right: max(24px, calc((100% - var(--feed-content-max)) / 2));
    box-sizing: border-box;
}

/* 헤더 */
.feed-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--feed-border);
}
.feed-logo-group { display: flex; align-items: flex-end; gap: 10px; }
.feed-logo { display: inline-flex; align-items: center; text-decoration: none; }
.feed-logo img { height: 26px; width: auto; display: block; }
.feed-logo-sub {
    font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--feed-gray400); line-height: 1;
    text-decoration: none; padding-left: 10px; border-left: 1px solid var(--feed-border);
}
.feed-nav { display: flex; align-items: center; gap: 28px; }
.feed-nav a { font-size: 14px; font-weight: 500; color: var(--feed-gray600); text-decoration: none; }
.feed-nav a.active { font-weight: 600; color: var(--feed-ink); }
.feed-nav a.feed-icon-btn {
    width: 38px; height: 38px; border-radius: 19px; background: var(--feed-icon-bg);
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    color: var(--feed-gray400); font-size: 14px; border: none; cursor: pointer;
}
.feed-nav a.feed-login-btn {
    background: var(--feed-ink); color: #fff; font-weight: 600; font-size: 13px;
    padding: 10px 18px; border-radius: 20px; text-decoration: none; white-space: nowrap;
}
.feed-user-greet { font-size: 14px; font-weight: 500; color: var(--feed-gray600); white-space: nowrap; }

/* 홈페이지 로그인 모달(skin/outlogin/basic/outlogin.before.php)을 매거진 헤더에서 재사용하기 위해
   그대로 include하지만, 그 파일 자체의 상단바(검색창 등)와 플로팅 로그인 버튼은 매거진 헤더와
   중복되므로 숨긴다 - 로그인 모달(#loginModalOverlay 등)과 그 JS 기능만 재사용한다.
   주의: feed.css는 홈페이지(ads_main.php)에서도 매거진 미리보기 카드 스타일 때문에 같이 로드되므로,
   .feed-body(매거진 페이지 전용 body 클래스) 안에서만 적용되도록 반드시 범위를 좁혀야 한다
   (전역으로 걸면 홈페이지의 실제 로그인 버튼(#tnb)까지 숨겨짐). */
.feed-body #tnb { display: none !important; }
.feed-body #floatingLoginBtn { display: none !important; }

/* 페이지 타이틀 */
.feed-hero-title { padding-top: 56px; padding-bottom: 32px; }
.feed-hero-title h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.8px; margin: 0 0 8px; }
.feed-hero-title p { font-size: 17px; color: var(--feed-gray600); margin: 0; }

/* 대표(첫번째) 기사 카드 */
.feed-featured-wrap { padding-top: 0; padding-bottom: 64px; }
.feed-featured {
    display: block; text-decoration: none; color: inherit;
    border-radius: 24px; overflow: hidden; box-shadow: 0 12px 32px rgba(15, 20, 31, 0.08);
}
.feed-featured-image { height: 440px; background-size: cover; background-position: center; }
.feed-featured-body { padding: 36px 44px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.feed-featured-body h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; margin: 0; }
.feed-featured-body .feed-desc { font-size: 15px; color: var(--feed-gray600); margin: 0; }
.feed-featured-body .feed-date { font-size: 13px; color: var(--feed-gray400); }

/* 카테고리/세그먼트 칩 */
.feed-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px; text-decoration: none; }
.feed-chip-guide    { color: var(--feed-blue);   background: var(--feed-blue-bg); }
.feed-chip-trend    { color: var(--feed-purple); background: var(--feed-purple-bg); }
.feed-chip-branding { color: var(--feed-amber);  background: var(--feed-amber-bg); }
.feed-chip-case     { color: var(--feed-green);  background: var(--feed-green-bg); }
.feed-chip-sponsor  { color: var(--feed-red);    background: var(--feed-red-bg); }
.feed-chip-activity { color: var(--feed-teal);   background: var(--feed-teal-bg); }
.feed-chip-facility { color: var(--feed-indigo); background: var(--feed-indigo-bg); }
.feed-chip-cf       { color: var(--feed-pink);   background: var(--feed-pink-bg); }

.feed-filters { display: flex; gap: 8px; padding-top: 0; padding-bottom: 20px; flex-wrap: wrap; }
.feed-filter-pill {
    padding: 9px 18px; border-radius: 18px; font-size: 14px; font-weight: 600;
    background: var(--feed-chip-bg); color: var(--feed-gray600); text-decoration: none; white-space: nowrap;
}
.feed-filter-pill.active { background: var(--feed-ink); color: #fff; }

.feed-segments { display: flex; gap: 8px; padding-top: 0; padding-bottom: 40px; flex-wrap: wrap; }
.feed-segment-pill {
    padding: 7px 14px; border-radius: 16px; font-size: 12.5px; font-weight: 500;
    background: #fff; color: var(--feed-gray600); border: 1px solid var(--feed-border);
    text-decoration: none; white-space: nowrap;
}
.feed-segment-pill.active { background: var(--feed-ink); color: #fff; border-color: var(--feed-ink); }

/* 기사 카드 그리드 */
.feed-grid-wrap { padding-top: 0; padding-bottom: 72px; }
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.feed-card {
    display: block; text-decoration: none; color: inherit;
    border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px rgba(15, 20, 31, 0.05);
}
.feed-card-image { height: 200px; background-size: cover; background-position: center; }
.feed-card-body { padding: 20px 20px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.feed-card-body h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; margin: 0; line-height: 1.4; }
.feed-card-body .feed-date { font-size: 12.5px; color: var(--feed-gray400); }

/* 빈 상태 */
.feed-empty { padding-top: 80px; padding-bottom: 120px; text-align: center; color: var(--feed-gray400); font-size: 15px; }

/* 페이지네이션 */
.feed-pagination { display: flex; gap: 6px; justify-content: center; padding-top: 0; padding-bottom: 100px; }
.feed-page-btn {
    width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--feed-gray600); text-decoration: none;
}
.feed-page-btn.active { background: var(--feed-ink); color: #fff; }

/* ── 상세 페이지 ── */
.feed-article-wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }

.feed-breadcrumb { font-size: 13px; color: var(--feed-gray400); margin: 0 0 16px; }
.feed-breadcrumb a { color: var(--feed-gray400); text-decoration: none; }

.feed-article-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 28px; }
.feed-article-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.6px; margin: 0; line-height: 1.38; }
.feed-article-meta { font-size: 13.5px; color: var(--feed-gray400); line-height: 1.68; }

.feed-article-hero { height: 480px; border-radius: 20px; background-size: cover; background-position: center; margin-bottom: 8px; }

.feed-article-body { font-size: 16.5px; line-height: 1.68; color: #323b47; }
.feed-article-body h3 { font-size: 21px; font-weight: 700; color: var(--feed-ink); margin: 32px 0 4px; }
.feed-article-body p { margin: 20px 0; }
.feed-article-body ul { margin: 20px 0; padding-left: 22px; }
.feed-article-body li { margin: 6px 0; }
.feed-article-body hr { border: none; border-top: 1px solid var(--feed-border); margin: 32px 0; }
.feed-article-body a { color: var(--feed-blue); }
.feed-article-body figure { margin: 24px 0; }
.feed-article-body figure img { width: 100%; border-radius: 14px; display: block; }
.feed-article-body figcaption { color: var(--feed-gray400); font-size: 13px; margin-top: 8px; }
/* 유튜브 영상 (2026-09-30) — 16:9 반응형 */
.feed-article-body .feed-video__frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #000; }
.feed-article-body .feed-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.feed-product-cta {
    display: flex; align-items: center; gap: 20px; background: #f9fafb;
    border-radius: 18px; padding: 20px; margin: 24px 0;
}
.feed-product-cta__icon { width: 84px; height: 84px; border-radius: 14px; background: var(--feed-blue); flex-shrink: 0; overflow: hidden; }
.feed-product-cta__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-product-cta__body { flex: 1; min-width: 0; }
.feed-product-cta__name { font-size: 15.5px; font-weight: 600; color: var(--feed-ink); display: block; }
.feed-article-body a.feed-product-cta__btn,
.feed-m-body a.feed-product-cta__btn {
    background: var(--feed-blue); color: #fff; font-size: 13.5px; font-weight: 600;
    padding: 12px 20px; border-radius: 24px; text-decoration: none; white-space: nowrap; flex-shrink: 0;
}

.feed-author-box {
    display: flex; align-items: center; gap: 14px; background: #f9fafb;
    border-radius: 16px; padding: 20px; margin-top: 32px;
}
.feed-author-avatar {
    width: 48px; height: 48px; border-radius: 50%; background: var(--feed-blue); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.feed-author-name { font-size: 14.5px; font-weight: 600; color: var(--feed-ink); }
.feed-author-desc { font-size: 13px; color: var(--feed-gray400); }

.feed-related-title { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin: 56px 0 0; }
.feed-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.feed-related-card {
    display: block; text-decoration: none; color: inherit;
    border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(15, 20, 31, 0.05);
}
.feed-related-image { height: 130px; background-size: cover; background-position: center; }
.feed-related-body { padding: 16px 16px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.feed-related-body h4 { font-size: 14px; font-weight: 600; margin: 0; line-height: 1.4; }

.feed-footer { background: #f9fafb; padding: 40px 24px; text-align: center; }
.feed-footer p { font-size: 12.5px; color: var(--feed-gray400); margin: 0; }

@media (max-width: 960px) {
    .feed-article-hero { height: 220px; }
    .feed-article-head h1 { font-size: 24px; }
    .feed-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .feed-header, .feed-hero-title, .feed-featured-wrap, .feed-filters, .feed-segments, .feed-grid-wrap, .feed-pagination, .feed-empty, .feed-search-meta {
        padding-left: 20px; padding-right: 20px;
    }
    .feed-grid { grid-template-columns: 1fr; }
    .feed-nav { gap: 16px; }
    .feed-hero-title h1 { font-size: 28px; }
    .feed-featured-image { height: 220px; }
    .feed-featured-body h2 { font-size: 22px; }
}

/* ══════════════════════════ 모바일 전용 (/mobile/feed) ══════════════════════════ */

.feed-m-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--feed-border); }
.feed-m-logo-group { display: flex; align-items: flex-end; gap: 8px; }
.feed-m-logo { display: inline-flex; align-items: center; text-decoration: none; }
.feed-m-logo img { height: 22px; width: auto; display: block; }
.feed-m-logo-sub {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--feed-gray400); line-height: 1;
    text-decoration: none; padding-left: 8px; border-left: 1px solid var(--feed-border);
}
.feed-m-back { display: flex; align-items: center; gap: 10px; color: var(--feed-ink); text-decoration: none; font-weight: 600; }
.feed-m-back .feed-m-arrow { font-size: 18px; }
.feed-m-back .feed-m-crumb { font-size: 14px; }
.feed-m-search { font-size: 15px; color: var(--feed-gray600); text-decoration: none; }

.feed-m-title { padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.feed-m-title h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; margin: 0; }
.feed-m-title p { font-size: 13.5px; color: var(--feed-gray600); margin: 0; }

.feed-m-featured-wrap { padding: 0 20px 28px; }
.feed-m-featured { display: block; text-decoration: none; color: inherit; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(15, 20, 31, 0.08); }
.feed-m-featured-image { height: 220px; background-size: cover; background-position: center; }
.feed-m-featured-body { padding: 20px 20px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.feed-m-featured-body h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin: 0; line-height: 1.38; }
.feed-m-featured-body .feed-date { font-size: 12.5px; color: var(--feed-gray400); }

.feed-m-filters { display: flex; gap: 8px; padding: 0 20px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.feed-m-filters::-webkit-scrollbar { display: none; }
.feed-m-filter-pill { padding: 8px 15px; border-radius: 16px; font-size: 13px; font-weight: 600; background: var(--feed-chip-bg); color: var(--feed-gray600); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.feed-m-filter-pill.active { background: var(--feed-ink); color: #fff; }

.feed-m-list-wrap { padding: 0 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.feed-m-empty { padding: 60px 20px 100px; text-align: center; color: var(--feed-gray400); font-size: 14px; }
.feed-m-list-item { display: flex; gap: 14px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 16px; box-shadow: 0 4px 14px rgba(15, 20, 31, 0.05); text-decoration: none; color: inherit; }
.feed-m-list-thumb { width: 84px; height: 84px; border-radius: 12px; background-size: cover; background-position: center; flex-shrink: 0; }
.feed-m-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.feed-m-list-body h3 { font-size: 14.5px; font-weight: 600; margin: 0; line-height: 1.4; }
.feed-m-list-body .feed-date { font-size: 11.5px; color: var(--feed-gray400); }
.feed-m-list-wrap .feed-chip, .feed-m-featured-body .feed-chip { font-size: 10.5px; padding: 5px 10px; }

.feed-m-pagination { display: flex; gap: 6px; justify-content: center; padding: 0 20px 60px; }

/* 상세 */
.feed-m-detail-wrap { padding: 0 20px 48px; }
.feed-m-detail-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0; }
.feed-m-detail-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin: 0; line-height: 1.38; }
.feed-m-detail-head .feed-chip { font-size: 11px; padding: 5px 10px; }
.feed-m-detail-meta { font-size: 12px; color: var(--feed-gray400); line-height: 1.65; }

.feed-m-hero { height: 240px; border-radius: 18px; background-size: cover; background-position: center; }

.feed-m-body { font-size: 15px; line-height: 1.65; color: #323b47; padding-top: 24px; }
.feed-m-body h3 { font-size: 18px; font-weight: 700; color: var(--feed-ink); margin: 28px 0 4px; }
.feed-m-body p { margin: 16px 0; }
.feed-m-body ul { margin: 16px 0; padding-left: 20px; }
.feed-m-body li { margin: 6px 0; }
.feed-m-body hr { border: none; border-top: 1px solid var(--feed-border); margin: 28px 0; }
.feed-m-body a { color: var(--feed-blue); }
.feed-m-body figure { margin: 20px 0; }
.feed-m-body figure img { width: 100%; border-radius: 12px; display: block; }
.feed-m-body figcaption { color: var(--feed-gray400); font-size: 12px; margin-top: 6px; }

/* 상품 CTA — render.php가 만든 동일한 마크업을 모바일에서는 세로 스택으로 재배치 */
.feed-m-body .feed-product-cta { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
.feed-m-body .feed-product-cta__icon { width: 56px; height: 56px; }
.feed-m-body .feed-product-cta__top { display: flex; gap: 12px; align-items: center; }
.feed-m-body a.feed-product-cta__btn { width: 100%; text-align: center; box-sizing: border-box; padding: 11px 0; border-radius: 22px; }

.feed-m-author { display: flex; align-items: center; gap: 12px; background: #f9fafb; border-radius: 14px; padding: 16px; margin-top: 24px; }
.feed-m-author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--feed-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.feed-m-author-name { font-size: 13.5px; font-weight: 600; color: var(--feed-ink); }
.feed-m-author-desc { font-size: 11.5px; color: var(--feed-gray400); }

.feed-m-related-title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.2px; margin: 32px 0 16px; }
.feed-m-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feed-m-related-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--feed-border); border-radius: 14px; overflow: hidden; }
.feed-m-related-image { height: 90px; background-size: cover; background-position: center; }
.feed-m-related-body { padding: 12px; }
.feed-m-related-body h4 { font-size: 12.5px; font-weight: 600; margin: 0; line-height: 1.4; }
.feed-m-related-body .feed-chip { display: none; }

.feed-m-footer { background: #f9fafb; padding: 32px 20px; text-align: center; }
.feed-m-footer p { font-size: 11.5px; color: var(--feed-gray400); margin: 0; }

/* ══════════════════════════ 검색 페이지 ══════════════════════════ */

.feed-search-box { display: flex; align-items: center; gap: 8px; background: var(--feed-chip-bg); border-radius: 20px; padding: 10px 18px; width: 320px; box-sizing: border-box; border: none; }
.feed-search-box input { border: none; background: transparent; outline: none; font-size: 14px; font-family: inherit; color: var(--feed-ink); width: 100%; }
.feed-search-box .feed-search-icon { color: var(--feed-gray400); font-size: 13px; }

.feed-search-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 48px; padding-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.feed-search-meta h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; margin: 0; }
.feed-sort-links { display: flex; gap: 6px; font-size: 13.5px; color: var(--feed-gray400); }
.feed-sort-links a { color: var(--feed-gray400); text-decoration: none; }
.feed-sort-links a.active { color: var(--feed-ink); font-weight: 600; }

.feed-search-prompt { padding: 80px 0 120px; text-align: center; color: var(--feed-gray400); font-size: 15px; }

/* 모바일 검색 */
.feed-m-search-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.feed-m-search-header .feed-m-arrow { font-size: 18px; font-weight: 600; color: var(--feed-ink); text-decoration: none; }
.feed-m-search-box { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--feed-chip-bg); border-radius: 20px; padding: 10px 16px; box-sizing: border-box; }
.feed-m-search-box input { border: none; background: transparent; outline: none; font-size: 14.5px; font-family: inherit; color: var(--feed-ink); width: 100%; }
.feed-m-search-box .feed-search-icon { color: var(--feed-gray400); font-size: 13px; }

.feed-m-search-meta { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.feed-m-search-meta h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin: 0; }
.feed-m-search-meta .feed-sort-links { font-size: 12.5px; }