@charset "utf-8";

/* ==================== */
/* Base reset = 워드프레스 적용 시 삭제 */
/* ==================== */
html{font-size: clamp(12px, 1.5vw, 16px);}
* { box-sizing: border-box; }
body { font-size: 1rem; margin: 0; font-family: var(--font-family); color: var(--text-default); background-color: var(--bg-default);}
img { display: block; max-width: 100%; }
a{text-decoration: none; color: inherit;}



/* Header ------------------------------------------------ */
.magazin_wrap {overflow: hidden;  padding: 11.25rem 0 13.125rem;} 
.magazin_inner { margin: 0 auto;}
.magazin_head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xl); flex-wrap: wrap; margin-bottom: 4.375rem;}
.magazin_title { display: flex; align-items: baseline; gap: var(--space-md); margin: 0; font-size: var(--text-h1); font-weight: var(--font-bold); line-height: var(--leading-base); flex-wrap: wrap;}
.magazin_eng { font-size: var(--text-xl); color: var(--text-brand); font-weight: var(--font-medium); }
.magazin_controls { display: flex; align-items: center; gap: var(--space-xl); }
.magazin_controls .btn_base.inverse{margin-left: var(--space-3xl) !important;}

/* List (Swiper) ---------------------------------------- */
.magazin_swiper { overflow: hidden;}
.magazin_swiper .swiper-slide { height: auto; }

/* Card ------------------------------------------------- */
.magazin_card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.magazin_card:hover{color: inherit;}
.magazin_cate {
  --notch: var(--rounded-xl); 
  min-width: 7.625rem;
  position: absolute; top: 0; left: 0; z-index: 2; padding-right: var(--space-md); padding-bottom: var(--space-md); background-color: var(--bg-default); pointer-events: none; border-radius: 0 0 var(--notch) 0;
  & .btn_base{width: 100%;}
  &::before{
    content: ""; display: block; width: var(--notch); height: var(--notch); position: absolute; left: 0; bottom: calc(-1 * var(--notch));
    background: radial-gradient(circle at bottom right, transparent calc(var(--notch) - 0.5px), var(--bg-default) var(--notch));
  }
  &::after{
    content: ""; display: block; width: var(--notch); height: var(--notch); position: absolute; top: 0; right: calc(-1 * var(--notch));
    background: radial-gradient(circle at bottom right, transparent calc(var(--notch) - 0.5px), var(--bg-default) var(--notch));
  }
}

.magazin_thumb { position: relative; border-radius: var(--rounded-xl);}
.magazin_thumb > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rounded-xl); aspect-ratio: 16 / 10;}
.magazin_people { position: absolute; right: 1rem; bottom: -1rem; display: flex; }
.magazin_people img { position: relative; width: 2.5rem; height: 2.5rem; border-radius: var(--rounded-circle); border: 5px solid var(--border-inverse); object-fit: cover;}
.magazin_people img + img { margin-left: calc(-1 * var(--space-md)); }
.magazin_people img { z-index: calc(99 - sibling-index()); }

/* 연사 / 연사 상세 */
.magazin_speaker { display: flex; align-items: center; flex-wrap: wrap; margin: var(--space-3xl) 0 0;  font-size: var(--text-sm); line-height: var(--leading-sm);}
.magazin_speaker .name { color: var(--text-tertiary);} 
.magazin_speaker .role { margin-left: var(--space-3xs);  color: var(--text-default); font-weight: var(--font-bold); }  
.magazin_speaker .bar { width: 1px; height: 0.75rem; margin: 0 var(--space-xs); background-color: var(--surface-300);}

/* 타이틀 */
.magazin_card_title { margin: 1.125rem 0 0; font-size: var(--text-xl); font-weight: var(--font-bold); line-height: var(--leading-sm); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
/* 서브 텍스트 */
.magazin_card_desc { margin: var(--space-xs) 0 0; font-size: var(--text-md); color: var(--surface-600); line-height: var(--leading-xl); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

/* 반응형 */
@media (max-width: 1440px) {
  .magazin_head { margin-bottom: var(--space-4xl); }
  .magazin_controls{margin-left: auto;}
}
@media (max-width: 1024px) {
  .magazin_wrap { padding: 4rem 0 5rem; }
  .magazin_title { font-size: var(--text-3xl); }
}

/* ==================== */
/* List Page            */
/* ==================== */
.magazin_tabs { margin-bottom: var(--space-4xl); overflow: visible; padding: 0 7%; }
.magazin_tabs .swiper-slide { width: auto; }
@media (min-width: 1025px) { 
  .magazin_tabs .swiper-wrapper { justify-content: center;} 
  .magazin_tabs .tab_item + .tab_item{border-left: 2px solid var(--border-default);}
}
@media (max-width: 1024px) { .magazin_tabs{border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); padding: var(--space-2xl) 0 var(--space-xl);}}

/* Toolbar — 카운트 + 검색 */
.list_toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: var(--space-2xl); margin-bottom: var(--space-3xl); }
.list_count { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; font-size: var(--text-sm); color: var(--text-tertiary); }
.list_count i { font-size: var(--text-lg); color: var(--text-quaternary); }
.list_count b { color: var(--text-brand); font-weight: var(--font-bold); }
.list_count .bar { width: 1px; height: 0.875rem; margin: 0 var(--space-xs); background-color: var(--surface-300); }
.list_search { width: 14rem; max-width: 100%; min-width: 7rem; }

/* Grid — 3열 */
.magazin_grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--space-3xl); row-gap: 3.5rem; }
.magazin_badge { position: absolute; top: var(--space-md); left: var(--space-md); z-index: 2; pointer-events: none; }
.magazin_pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: 4rem; }
.magazin_pagination .pagination_num{margin: 0 1.875rem;  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);}
@media (max-width: 1024px) {
  .magazin_grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4xl);}
  .magazin_pagination .pagination_num{margin: 0;}
}
@media (max-width: 640px) {
  .magazin_grid { grid-template-columns: 1fr; }
}

/* ==================== */
/* Detail Page          */
/* ==================== */
.detail_inner { max-width: 1200px; box-sizing: content-box; }
.detail_hero { padding-top: 5rem; padding-bottom: 0; }
.detail_hero_head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xl); margin-bottom: 2.375rem; }
.detail_hero_titles { display: flex; gap: 4.5rem; align-items: flex-start; width: 100%; }
.detail_badge { pointer-events: none; }
.detail_title { flex: 1 1 0; min-width: 0; margin: 0; font-size: 3rem; font-weight: var(--font-bold); line-height: 1.3; color: var(--text-default); }
.detail_meta { display: flex; flex-wrap: wrap; row-gap: var(--space-sm); column-gap: var(--space-3xl); align-items: center; margin: 0; font-size: var(--text-sm); color: var(--surface-600); }
.detail_meta b { color: var(--text-default); font-weight: var(--font-bold); }
.detail_hero_sub { flex: 0 0 25.625rem; margin: 0; padding-left: 1.875rem; border-left: 2px solid var(--text-default); font-size: var(--text-md); font-weight: var(--font-bold); line-height: 1.5; color: var(--text-default); }

/* Figure (본문 이미지 공통) */
.detail_figure { margin: 0; }
.detail_figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--rounded-xl); object-fit: cover; }
.detail_figure figcaption { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--surface-600); letter-spacing: 0.02em; }
.detail_hero_figure { text-align: center; }
.detail_hero_figure img { aspect-ratio: 16 / 9; }

/* Content grid : main(article) + aside(작성자) + actions(목록으로) */
.detail_content { padding: 5rem 0; }
.detail_grid { display: grid; grid-template-columns: 1fr 19.1875rem; grid-template-areas: "main aside" "actions aside"; column-gap: 3.125rem; }
.detail_article { grid-area: main; min-width: 0; }
.detail_aside { grid-area: aside; position: sticky; top: 10rem; align-self: start; display: flex; flex-direction: column; gap: var(--space-3xl); }
.detail_actions { grid-area: actions; display: flex; justify-content: center; margin-top: 3.125rem; }

/* Article 본문 */
.detail_p { margin: 0; font-size: var(--text-md); line-height: 1.8; color: var(--surface-900); }
.detail_h2 { margin: var(--space-4xl) 0 0; font-size: 1.65rem; font-weight: var(--font-bold); line-height: 1.3; letter-spacing: -0.02em; color: var(--text-default); }
.detail_h2 + .detail_p { margin-top: var(--space-2xl); }
.detail_article > .detail_figure { margin-top: var(--space-4xl); }
.detail_quote { margin: var(--space-4xl) 0 0; padding-left: var(--space-4xl); border-left: 4px solid var(--border-brand); }
.detail_quote_text { margin: 0; font-size: 1.45rem; font-weight: var(--font-bold); line-height: 1.5; color: var(--text-default); }
.detail_quote_by { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--surface-600); }
.detail_figure_grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); margin-top: 3rem; }
.detail_figure_grid .detail_figure img { aspect-ratio: 4 / 3; }

/* 태그 */
.detail_tags { display: flex; gap: var(--space-3xl); align-items: flex-start; margin-top: 3rem; }
.detail_tags_label { flex-shrink: 0; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-default); line-height: 1.6; }
.detail_tags_list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* 작성자 카드 (PC: aside sticky / 모바일: 목록으로 위로 reflow) */
.detail_author { background-color: var(--bg-primary); border-radius: var(--rounded-md); padding: var(--space-2xl); }
.detail_author_head { display: flex; gap: var(--space-xl); align-items: center; padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--border-primary); }
.detail_author_img { width: 3.5rem; height: 3.5rem; border-radius: var(--rounded-circle); object-fit: cover; flex-shrink: 0; }
.detail_author_meta { display: flex; flex-direction: column; gap: var(--space-3xs); }
.detail_author_name { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-default); }
.detail_author_role { font-size: var(--text-sm); color: var(--text-secondary); }
.detail_author_desc { margin: var(--space-lg) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-quaternary); }
.detail_share { display: flex; gap: var(--space-md); justify-content: center; }

/* CTA 배너 */
.detail_cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3xl); margin-top: 5rem; padding: 3.75rem; border-radius: var(--rounded-lg); background: var(--bg-banner); }
.detail_cta_label { margin: 0 0 var(--space-md); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.08em; color: var(--wh); opacity: 0.8; }
.detail_cta_title { margin: 0; font-size: var(--text-3xl); font-weight: var(--font-bold); line-height: 1.3; color: var(--wh);  word-break: keep-all;}

/* 추천 콘텐츠 */
.detail_recommend { border-top: 1px solid var(--border-default); padding: 5rem 0; }
.detail_recommend_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.75rem; }
.detail_recommend_title { margin: 0; font-size: var(--text-3xl); font-weight: var(--font-bold); }
.detail_recommend_head .btn_base{color: var(--text-tertiary);}
.detail_recommend_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875rem; }
/* 추천 카드 뱃지: 이미지 아래 좌측 배치 (Figma) — 폭 늘어남 방지 */
.detail_recommend_grid .magazin_card > .btn_base { align-self: flex-start; margin-top: var(--space-2xl) !important; pointer-events: none; }

/* Detail 반응형 */
@media (max-width: 1024px) {
  .detail_grid { grid-template-columns: 1fr; grid-template-areas: "main" "aside" "actions"; row-gap: 0; }
  .detail_aside { position: static; padding-top: 2.5rem;}
  .detail_hero_titles { flex-direction: column; gap: var(--space-2xl); }
  .detail_hero_sub { flex: none; border-left: 0; padding-left: 0; }
  .detail_recommend_grid { display: flex; gap: 0; }
  .detail_hero_figure{ margin-left: calc(-1 * var(--space-3xl)); margin-right: calc(-1 * var(--space-3xl)); }
  .detail_hero_figure img, .detail_article > .detail_figure img { border-radius: 0; }
  .detail_hero_figure figcaption, .detail_article > .detail_figure figcaption { padding: 0 var(--space-3xl); }
}
@media (max-width: 640px) {
  .detail_title { font-size: var(--text-3xl); }
  .detail_cta { flex-direction: column; align-items: flex-start; padding: var(--space-3xl); }
}
/* CTA 배너: 모바일 full-bleed (좌우 여백 제거) */
@media (max-width: 1024px) {
  .detail_cta { margin-left: calc(-1 * var(--space-3xl)); margin-right: calc(-1 * var(--space-3xl)); border-radius: 0; }
}