/* 페이지 빌더 모듈 58종 */

.modules { display: flex; flex-direction: column; gap: 64px; padding-top: 32px; padding-bottom: 40px; }
.mod { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.mod-label { display: flex; gap: 12px; align-items: baseline; margin-bottom: -40px; padding-top: 24px; border-top: 1px dashed var(--border-default); }
.mod-row { display: grid; grid-template-columns: var(--cols); gap: 32px; }
.mod-row--center { align-items: center; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stack--center { align-items: center; text-align: center; }
.stack--gold { border-top: 3px solid var(--brand-gold); padding-top: 16px; }
.stack--rule { border-top: 1px solid var(--border-default); padding-top: 20px; align-items: flex-start; }
.grid--tight { gap: 0 48px; }
.grid--wide { gap: 48px; }
.section-title--gold { border-top-color: var(--brand-gold); }
.title-bar { border-left: 4px solid var(--brand-navy); padding-left: 12px; }
.title-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.title-center:not(.stack)::after { content: ""; width: 64px; height: 3px; background: var(--brand-gold); }
.gold { color: var(--brand-gold); }

/* 카드 */
.mc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mc__img { display: block; background: var(--bg-sunken); border-radius: var(--radius); position: relative; }
.mc__img--wide { aspect-ratio: 16 / 9; }
.mc__img--square { aspect-ratio: 1; }
.mc__img--hero { aspect-ratio: 15 / 7; }
.mc__title { margin: 0; }
.mc__badge { position: absolute; top: 12px; left: 12px; background: var(--brand-navy); color: var(--text-on-dark); font-size: var(--fs-label); font-weight: 700; padding: 4px 8px; border-radius: var(--radius); }
.mc__badge.is-gold { background: var(--brand-gold); color: var(--text-primary); }
.mv { display: flex; align-items: flex-end; aspect-ratio: 16 / 9; background: var(--brand-navy); border-radius: var(--radius); padding: 8px; }
.mv:hover { text-decoration: none; }
.mv__dur { background: var(--text-primary); color: var(--text-on-dark); font-size: var(--fs-caption); padding: 2px 6px; border-radius: var(--radius); }
.row-thumb--wide .row-thumb__img { width: 240px; height: 160px; }
.row-thumb__img--l { width: 200px !important; height: 112px !important; }
.face { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-avatar); color: var(--text-on-dark); font-weight: 700; flex: none; }
.face--48 { width: 48px; height: 48px; }
.face--56 { width: 56px; height: 56px; font-size: var(--fs-h4); }
.face--64 { width: 64px; height: 64px; font-size: var(--fs-h3); }
.face--80 { width: 80px; height: 80px; font-size: var(--fs-h2); }
.face--88 { width: 88px; height: 88px; font-size: var(--fs-h2); }
.person { display: flex; gap: 12px; align-items: center; }
.person:hover { text-decoration: none; }
.t-opinion--l { font-size: 28px; }
.ad__970 { width: 970px; height: 250px; max-width: 100%; }
.ad__300x600 { width: 300px; height: 600px; }

/* 03 · 53 전면 */
.overlay { min-height: 560px; background: var(--brand-navy); color: var(--text-on-dark); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 48px; border-radius: var(--radius); }
.overlay:hover { text-decoration: none; }
.overlay .t-display { max-width: 800px; }

/* 05 속보 */
.breaking { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--brand-navy); border-bottom: 1px solid var(--border-default); padding: 24px 0; }

/* 11 랭킹 */
.ranking-row { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: rk; }
.ranking-row li { display: flex; align-items: flex-start; gap: 12px; padding: 4px 20px 4px 0; }
.ranking-row li + li { padding-left: 20px; border-left: 1px solid var(--border-default); }
.ranking-row__n { flex: none; min-width: 22px; font-family: var(--font-serif); font-size: 30px; font-weight: 600; color: var(--brand-gold); line-height: 1; margin-top: 1px; }
.ranking-row__body { display: grid; gap: 6px; min-width: 0; }
.ranking-row__t { font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--text-primary); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ranking-row__t:hover { text-decoration: underline; text-underline-offset: 3px; }
.ranking-row__k { font-size: 12px; color: var(--text-secondary); }

/* 13 토론 */
.debate { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); padding: 16px 0; }
.debate p { margin: 0; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--state-success); margin-right: 6px; }

/* 14 · 51 · 57 가로 넘김 */
.rail-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.rail-scroll > * { scroll-snap-align: start; }
.carousel-btns { display: flex; gap: 8px; }
.carousel-btns button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-default); background: none; cursor: pointer; }
.col-card { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-default); padding: 20px; border-radius: var(--radius); }
.short-card { aspect-ratio: 9 / 16; background: var(--brand-navy); color: var(--text-on-dark); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 180px; }
.short-card .t-caption { color: var(--text-on-dark); opacity: .8; }

/* 16 영상 띠 */
.dark-band { background: var(--text-primary); color: var(--bg-page); padding: 32px; display: flex; flex-direction: column; gap: 20px; border-radius: var(--radius); }
.dark-band a { color: inherit; }

/* 18 타임라인 */
.htimeline { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.htimeline li { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--brand-navy); padding: 16px 16px 0 0; }
.htimeline li span { color: var(--text-secondary); }
.htimeline li.is-now { border-top-color: var(--brand-gold); }
.htimeline li.is-now span { color: var(--text-accent); }

/* 19 라이브 */
.liveblog-mod { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--text-primary); border-bottom: 1px solid var(--border-default); padding: 16px 0; }
.liveblog-mod__row { display: grid; grid-template-columns: 64px 1fr; gap: 24px; }

/* 21 · 22 띠 */
.band { display: flex; align-items: center; gap: 24px; border-top: 3px solid var(--brand-navy); border-bottom: 1px solid var(--border-default); padding: 32px 0; flex-wrap: wrap; }
.band--gold { border-top-color: var(--brand-gold); }
.band__text { flex: 1; min-width: 260px; }
.band__text p { margin: 4px 0 0; }
.input-group { display: flex; }
.input-group input { height: 60px; width: 320px; max-width: 60vw; border: 1px solid var(--border-strong); border-right: 0; background: var(--bg-page); color: var(--text-primary); padding: 0 16px; font: inherit; font-size: var(--fs-body-s); border-radius: var(--radius) 0 0 var(--radius); }
.input-group .btn { height: 60px; border-radius: 0 var(--radius) var(--radius) 0; }

/* 23 칩 */
.chips-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--border-default); border-radius: 20px; padding: 8px 14px; font-size: var(--fs-ui); font-weight: 500; }
.chip:hover { text-decoration: none; border-color: var(--border-strong); }

/* 30 카테고리 */
.subnav { display: flex; gap: 28px; border-bottom: 1px solid var(--border-default); padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.subnav a { color: var(--text-secondary); font-size: var(--fs-body-s); white-space: nowrap; }
.subnav a.is-on { color: var(--text-accent); font-weight: 700; border-bottom: 2px solid var(--brand-navy); padding-bottom: 10px; margin-bottom: -13px; }

/* 34 만평 */
.cartoon { aspect-ratio: 3 / 2; }

/* 35 세로 구분선 */
.cols-ruled { display: grid; grid-template-columns: repeat(3, 1fr); }
.cols-ruled > div { padding: 0 24px; }
.cols-ruled > div:first-child { padding-left: 0; }
.cols-ruled > div + div { border-left: 1px solid var(--border-default); }

/* 36 사설 */
.editorial-mod { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; border-top: 3px solid var(--brand-navy); border-bottom: 1px solid var(--border-default); padding: 32px 0; }
.editorial-mod__title { font-size: 32px; }
.editorial-mod p { margin: 0; }

/* 39 연재 라벨 */
.series-label { align-self: flex-start; background: var(--brand-gold-soft); color: var(--text-accent); font-size: var(--fs-label); font-weight: 700; padding: 4px 8px; }

/* 42 도구 */
.tool-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border-default); padding: 20px; border-radius: var(--radius); }
.tool-box:hover { text-decoration: none; border-color: var(--border-strong); }

/* 45 시장 */
.market { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); padding: 16px 0; }
.market__item { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }
.market__item + .market__item { border-left: 1px solid var(--border-default); }
.up { color: var(--state-success); }
.down { color: var(--text-secondary); }

/* 46 */
.mini { display: flex; gap: 12px; align-items: center; }
.mini__img { width: 96px; height: 64px; flex: none; background: var(--bg-sunken); border-radius: var(--radius); }

/* 47 구독 바 */
.sub-bar { display: flex; justify-content: space-between; gap: 16px; background: var(--brand-navy); color: var(--text-on-dark); padding: 14px 20px; font-size: var(--fs-ui); font-weight: 500; border-radius: var(--radius); }

/* 50 필진 */
.writers { display: flex; gap: 32px; overflow-x: auto; padding-bottom: 4px; }

/* 52 흑백 사진 칼럼 */
.col-row { display: flex; gap: 20px; }
.col-row__photo { width: 200px; height: 240px; flex: none; background: var(--border-strong); opacity: .2; filter: grayscale(1); border-radius: var(--radius); }

/* 55 챕터 */
.chapter { display: flex; gap: 16px; font-size: var(--fs-body-s); }

/* ---------- 태블릿 · 모바일 ---------- */
@media (max-width: 1023px) {
  .mod-row { grid-template-columns: 1fr 1fr; }
  .ranking-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .ranking-row li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .market { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .ad__300x600 { height: 250px; }
  .cols-ruled { grid-template-columns: 1fr; }
  .cols-ruled > div { padding: 0; border-left: 0 !important; }
}
@media (max-width: 767px) {
  .modules { gap: 48px; }
  .mod-row { grid-template-columns: 1fr; gap: 24px; }
  .ranking-row { grid-template-columns: 1fr; gap: 0; }
  .ranking-row li, .ranking-row li + li { padding: 12px 0; border-left: 0; border-top: 1px solid var(--border-default); }
  .ranking-row li:first-child { border-top: 0; }
  .ranking-row__n { font-size: 26px; }
  .market { grid-template-columns: repeat(2, 1fr); }
  .overlay { min-height: 420px; padding: 24px; }
  .dark-band { padding: 20px; margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
  .row-thumb--wide .row-thumb__img, .row-thumb__img--l { width: 120px !important; height: 80px !important; }
  .col-row__photo { width: 96px; height: 120px; }
  .ad__970 { width: 320px; height: 100px; }
  .input-group { width: 100%; }
  .input-group input { flex: 1; width: auto; max-width: none; }
  .htimeline { grid-template-columns: 1fr; }
}

/* 모바일: 톱 B는 사진이 제목 위로 */
@media (max-width: 767px) {
  .mod--2 .mod-row--center > .mc__img { order: -1; }
}

/* 실제 사진이 들어오면 (페이지 빌더 · 미디어 라이브러리) */
.mc__img[style], .row-thumb__img[style], .mv[style] { background-size: cover; background-position: center; }
.face--img { object-fit: cover; background: var(--bg-sunken); }
.mod--2 .mod-row--center { align-items: start; }
.short-card { position: relative; overflow: hidden; background-size: cover; background-position: center; text-decoration: none; }
.short-card.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .25) 45%, transparent 70%); }
.short-card > * { position: relative; }
.section-title--dark { border-top: 0; padding-top: 0; margin-bottom: 0; } .section-title--dark a { color: rgb(255 255 255 / .75); }
.overlay { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.overlay.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0 / .05) 75%); }
.overlay > * { position: relative; }
.overlay__sum { max-width: 720px; font-weight: 400; opacity: .9; }
.mv { background-size: cover; background-position: center; }