/* ── 사이트 소개 배너 ── */
.site-intro-bar {
  background: var(--charcoal);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-intro-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 13px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.intro-mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #E8C4A8, #B5896A);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
  font-family: 'Playfair Display', serif; font-weight: 700;
  flex-shrink: 0;
}
.intro-text {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: rgba(255,255,255,0.65);
  flex-wrap: wrap;
}
.intro-text strong {
  color: #fff; font-weight: 700;
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.08em; font-size: 13px;
}
.intro-divider { color: var(--gold); opacity: 0.6; }
.intro-tags {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-left: auto;
}
.intro-tags span {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.05em; color: rgba(255,255,255,0.4);
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,0.12);
}

/* 히어로와 간격 */
.editorial-hero {
  margin-top: 28px;
}

/* ============================================================
   BEAUDOC main.css — 메인페이지 전용 (global.css 이후 로드)
   ============================================================ */

/* ── 공통 레이아웃 ── */
.mag-datebar{display:none}

/* ════════════════════════
   ① EDITORIAL HERO
   ════════════════════════ */
.editorial-hero{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);
  display:grid;grid-template-columns:63fr 37fr;
  gap:24px;border-bottom:2px solid var(--line-strong);
  background:var(--bg);align-items:stretch;
}
.hero-feature{
  display:flex;flex-direction:column;overflow:hidden;
  text-decoration:none;color:var(--ink);
}
.hero-feature-img{
  position:relative;width:100%;aspect-ratio:3/2;
  overflow:hidden;background:var(--panel);
}
.hero-feature-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s ease;
}
.hero-feature:hover .hero-feature-img img{transform:scale(1.04)}
.hero-section-badge{
  position:absolute;top:14px;left:14px;
  font-size:9.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--gold);color:#fff;padding:4px 11px;
}
.hero-feature-body{padding:18px 20px 20px;flex-shrink:0}
.hero-kicker{
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px;font-weight:700;
}
.hero-title{
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  font-size:clamp(24px,2.6vw,34px);font-weight:800;
  line-height:1.22;margin-bottom:10px;color:var(--ink);word-break:keep-all;
}
.hero-excerpt{font-size:13px;color:var(--ink-dim);line-height:1.7;margin-bottom:8px}
.hero-meta{font-size:11px;color:var(--ink-faint);display:flex;gap:7px}

/* 우측 주목할 기사 */
.hero-sub-panel{display:flex;flex-direction:column;background:var(--bg-warm)}
.hero-sub-header{
  padding:14px 18px 12px;border-bottom:1px solid var(--line);
  font-size:10.5px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-faint);
}
.hero-sub-item{
  display:grid;grid-template-columns:38% 62%;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);
  transition:background .18s;flex:1;
}
.hero-sub-item:last-child{border-bottom:none}
.hero-sub-item:hover{background:var(--bg-ivory)}
.hero-sub-img{
  width:100%;overflow:hidden;background:var(--panel);align-self:stretch;
}
.hero-sub-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hero-sub-item:hover .hero-sub-img img{transform:scale(1.04)}
.hero-sub-body{
  padding:16px 16px;display:flex;flex-direction:column;justify-content:center;
}
.sub-badge{
  font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:6px;
}
.hero-sub-title{
  font-size:15px;font-weight:700;line-height:1.38;
  color:var(--ink);word-break:keep-all;
}
.hero-sub-excerpt{
  font-size:12px;color:var(--ink-dim);line-height:1.55;
  margin-top:6px;word-break:keep-all;
}
.hero-sub-date{font-size:11px;color:var(--ink-faint);margin-top:8px}

/* ════════════════════════
   ② LATEST FEED
   ════════════════════════ */
.latest-feed{
  max-width:var(--max-w);margin:0 auto;
  padding:var(--gap-section) var(--pad-x) 0;
}
.feed-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);
}
.feed-card{
  background:var(--bg);text-decoration:none;
  color:inherit;transition:background .18s;
}
.feed-card:hover{background:var(--bg-warm)}
.feed-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--panel)}
.feed-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.feed-card:hover .feed-img img{transform:scale(1.04)}
.feed-body{padding:12px 14px 16px}
.feed-cat{
  font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:5px;
}
.feed-title{font-size:16px;font-weight:700;line-height:1.38;color:var(--ink);word-break:keep-all}
.feed-date{font-size:11px;color:var(--ink-dim);margin-top:6px}

/* ════════════════════════
   ③ MAG SECTION 공통
   ════════════════════════ */
.mag-section{
  max-width:var(--max-w);margin:0 auto;
  padding:var(--gap-section) var(--pad-x) 0;
}
.mag-2col{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}

/* 피처드+서브 */
.mag-grid-main{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}
.mg-feature{display:block;text-decoration:none;color:inherit}
.mg-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--panel);margin-bottom:12px}
.mg-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mg-feature:hover .mg-img img{transform:scale(1.04)}
.mg-cat{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:6px}
.mg-title{
  font-size:22px;font-weight:800;line-height:1.25;
  margin-bottom:8px;color:var(--ink);word-break:keep-all;
}
.mg-excerpt{font-size:13px;color:var(--ink-dim);line-height:1.7;margin-bottom:7px}
.mg-date{font-size:11px;color:var(--ink-dim)}

/* 서브 기사 목록 */
.mg-sub-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mg-sub{
  display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:.18s;align-items:flex-start;
}
.mg-sub:last-child{border-bottom:none}
.mg-sub:hover .mg-sub-title{color:var(--gold)}
.mg-sub-img{width:80px;height:60px;flex-shrink:0;overflow:hidden;background:var(--panel)}
.mg-sub-img img{width:100%;height:100%;object-fit:cover}
.mg-sub-cat{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;display:block;margin-bottom:4px}
.mg-sub-title{font-size:15px;font-weight:700;line-height:1.38;color:var(--ink);transition:.18s;word-break:keep-all}
.mg-sub-date{font-size:10.5px;color:var(--ink-dim);margin-top:4px}

/* 헤드라인 리스트 */
.skin-top-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--panel);margin-bottom:14px}
.skin-top-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.skin-top-img:hover img{transform:scale(1.04)}
.headline-list{display:flex;flex-direction:column}
.hl-item{
  display:grid;grid-template-columns:26px 1fr;gap:10px;
  padding:13px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:.18s;align-items:start;
}
.hl-item:first-child{padding-top:0}
.hl-item:last-child{border-bottom:none}
.hl-item:hover .hl-title{color:var(--gold)}
.hl-num{font-family:'Playfair Display',serif;font-size:15px;color:var(--panel);font-weight:700;padding-top:2px}
.hl-cat{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;display:block;margin-bottom:4px}
.hl-title{font-size:16px;font-weight:700;line-height:1.38;color:var(--ink);transition:.18s;word-break:keep-all}
.hl-date{font-size:10.5px;color:var(--ink-dim);margin-top:4px}

/* 성분 카드 */
.ingredient-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ing-card{text-decoration:none;color:inherit}
.ing-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--panel);margin-bottom:8px}
.ing-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ing-card:hover .ing-img img{transform:scale(1.04)}
.ing-cat{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;display:block;margin-bottom:4px}
.ing-title{font-size:15px;font-weight:700;line-height:1.38;color:var(--ink);word-break:keep-all}
.ing-excerpt{font-size:11.5px;color:var(--ink-dim);margin-top:3px;line-height:1.5}

/* ════════════════════════
   ④ PLASTIC SURGERY (다크, 3열 균등)
   ════════════════════════ */
.mag-dark{
  background:var(--charcoal);
  padding:var(--gap-section) var(--pad-x);
  margin-top:var(--gap-section);
}
.plastic-mag-grid{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:rgba(255,255,255,0.06);
}
.pmg-card{
  background:var(--charcoal);text-decoration:none;color:#fff;
  overflow:hidden;transition:background .18s;
}
.pmg-card:hover{background:#38363A}
.pmg-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:#38363A}
.pmg-img img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .4s,transform .5s}
.pmg-card:hover .pmg-img img{opacity:.9;transform:scale(1.04)}
.pmg-body{padding:16px 18px 20px}
.pmg-cat{font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:6px;font-weight:700}
.pmg-title{font-size:16px;font-weight:700;line-height:1.38;color:#fff;word-break:keep-all}
.pmg-excerpt{font-size:12px;color:rgba(255,255,255,0.5);margin-top:7px;line-height:1.6}
.pmg-date{font-size:10.5px;color:rgba(255,255,255,0.35);margin-top:8px}

/* ════════════════════════
   ⑤ SAFETY + TREND
   ════════════════════════ */
.safety-wrap{background:var(--bg-ivory);padding:18px;border-left:3px solid var(--sideeffect)}
.safety-row{
  display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(192,57,43,0.09);
  text-decoration:none;color:inherit;transition:.18s;align-items:flex-start;
}
.safety-row:last-child{border-bottom:none}
.safety-row:hover .safety-title{color:var(--sideeffect)}
.safety-icon{font-size:13px;color:var(--sideeffect);flex-shrink:0;padding-top:2px}
.safety-title{font-size:15px;font-weight:700;line-height:1.38;color:var(--ink);transition:.18s;word-break:keep-all}
.safety-date{font-size:10.5px;color:var(--ink-dim);margin-top:3px}

.trend-row{
  display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:.18s;align-items:center;
}
.trend-row:first-child{padding-top:0}
.trend-row:last-child{border-bottom:none}
.trend-row:hover .trend-title{color:var(--trend)}
.trend-num{font-family:'Playfair Display',serif;font-size:18px;color:var(--panel);font-weight:700;width:28px;flex-shrink:0}
.trend-body{flex:1}
.trend-title{font-size:15px;font-weight:700;line-height:1.38;transition:.18s;word-break:keep-all}
.trend-date{font-size:10.5px;color:var(--ink-dim);margin-top:3px}
.trend-thumb{width:64px;height:48px;overflow:hidden;flex-shrink:0;background:var(--panel)}
.trend-thumb img{width:100%;height:100%;object-fit:cover}

/* ════════════════════════
   ⑥ EDITOR'S PICK — 4열, 빈공간 없음
   ════════════════════════ */
.editors-pick-section{padding-bottom:0}
.pick-strip-mag{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);
}
.pick-mag-card{background:var(--bg);text-decoration:none;color:inherit;transition:background .18s}
.pick-mag-card:hover{background:var(--bg-warm)}
.pick-mag-img{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--panel)}
.pick-mag-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pick-mag-card:hover .pick-mag-img img{transform:scale(1.04)}
.pick-num{
  position:absolute;top:8px;left:10px;
  font-family:'Playfair Display',serif;font-size:20px;
  font-weight:700;color:rgba(255,255,255,0.55);line-height:1;
}
.pick-mag-body{padding:12px 14px 16px}
.pick-cat-label{
  font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:5px;
}
.pick-mag-title{font-size:15px;font-weight:700;line-height:1.38;color:var(--ink);word-break:keep-all}

/* ════════════════════════
   ⑦ LIFESTYLE
   ════════════════════════ */
.lifestyle-section{padding-bottom:52px}
.lifestyle-mag-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.lmg-card{text-decoration:none;color:inherit}
.lmg-img{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--panel);margin-bottom:9px}
.lmg-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.lmg-card:hover .lmg-img img{transform:scale(1.04)}
.lmg-cat{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;display:block;margin-bottom:4px}
.lmg-title{font-size:15px;font-weight:700;line-height:1.38;color:var(--ink);word-break:keep-all}
.lmg-date{font-size:11px;color:var(--ink-dim);margin-top:4px}

/* ════════════════════════
   반응형 — 메인 전용
   ════════════════════════ */
@media(max-width:900px){
  .editorial-hero{grid-template-columns:1fr;gap:0}
  .hero-sub-panel{display:grid;grid-template-columns:1fr 1fr}
  .hero-sub-header{grid-column:1/-1}
  .feed-grid{grid-template-columns:1fr 1fr}
  .mag-grid-main{grid-template-columns:1fr}
  .mag-2col{grid-template-columns:1fr;gap:28px}
  .plastic-mag-grid{grid-template-columns:1fr 1fr}
  .pick-strip-mag{grid-template-columns:1fr 1fr}
  .lifestyle-mag-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .editorial-hero{padding:0 4vw}
  .hero-sub-panel{grid-template-columns:1fr}
  .feed-grid{grid-template-columns:1fr}
  .plastic-mag-grid{grid-template-columns:1fr}
  .pick-strip-mag{grid-template-columns:1fr 1fr}
  .lifestyle-mag-grid{grid-template-columns:1fr 1fr}
  .mag-section,.latest-feed{padding-left:4vw;padding-right:4vw}
  .mag-dark{padding-left:4vw;padding-right:4vw}
}