/* 6. photo · 사진 강조 — 사진을 장 전체에 깔고 아래쪽을 어둡게 눌러 글을 얹는다. 잡지 표지·현장 소식 느낌.
   사진 없는 장(마무리 등)은 어두운 바탕 + 강조색 빛으로 바뀐다(:has 사용). 강조색은 밝은 색이 잘 어울린다. */
.cdk.tpl-photo {
  --accent: #FFC83D;
  --bk: #111317;
  --fit-cv-t: 210; --fit-cv-tmin: 90; --fit-t: 100; --fit-tmin: 58; --fit-sub: 52; --fit-box: 42; --fit-box-ph: 36; --fit-bar-cv: 64; --fit-bar-cl: 54;
  background: var(--bk); color: #fff;
}
.tpl-photo .lanes { display: none; }
.tpl-photo .glow { display: none; }

/* 사진: .main을 장 전체로 펴고 .ph를 맨 뒤에 깐다. 글은 아래로(margin-top:auto, 넘침 계산이 그대로 맞음) */
.tpl-photo .main { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; gap: 26px; }
.tpl-photo.cv .main { padding: 180px 64px 320px; }
.tpl-photo.pg .main { padding: 180px 60px 72px; }
.tpl-photo.cl .main { padding: 180px 60px 270px; }
.tpl-photo .ph { position: absolute; inset: 0; z-index: 0; min-height: 0; border-radius: 0; }
.tpl-photo .ph::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.70) 52%, rgba(0,0,0,.90) 100%); }
.tpl-photo .t, .tpl-photo .sub, .tpl-photo .box, .tpl-photo .speed { position: relative; z-index: 1; }
.tpl-photo .t { margin-top: auto; font-weight: 900; line-height: 1.04; letter-spacing: -0.045em; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.tpl-photo .t span { color: var(--accent); }

.tpl-photo .hd .org { font-size: 26px; font-weight: 700; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.tpl-photo .hd .logo { padding: 8px 18px; border-radius: 14px; background: #fff; }
.tpl-photo .hd .n { font-size: 22px; font-weight: 700; color: #fff; background: rgba(0,0,0,.38); border: 1.5px solid rgba(255,255,255,.35); padding: 8px 18px; border-radius: 99px; }

.tpl-photo.cv .sub { font-size: 52px; font-weight: 700; line-height: 1.28; color: rgba(255,255,255,.92); }
.tpl-photo .speed span { height: 8px; border-radius: 99px; margin-bottom: 12px; }
.tpl-photo .speed span:nth-child(2) { background: rgba(255,255,255,.6) !important; }

/* 아래 띠: 바탕 없이 사진 위에, 위에 가는 줄 */
.tpl-photo .bar { background: transparent; color: #fff; }
.tpl-photo .bar::before { content: ""; position: absolute; left: 64px; right: 64px; top: 64px; height: 2px; background: rgba(255,255,255,.35); }
.tpl-photo .bar::after { content: ""; position: absolute; left: 64px; top: 60px; width: 120px; height: 10px; background: var(--accent); }
.tpl-photo .bar .s { font-size: 28px; font-weight: 700; color: rgba(255,255,255,.75); }
.tpl-photo .bar .l { font-size: 64px; font-weight: 900; line-height: 1.12; letter-spacing: -0.04em; }
.tpl-photo.cl .bar .l { font-size: 54px; }

/* 글 상자: 바탕 없이 강조색 줄 하나 */
.tpl-photo .box { padding: 30px 0 0 34px; border-left: 6px solid var(--accent); }
.tpl-photo .box p { font-size: 40px; line-height: 1.5; font-weight: 500; color: rgba(255,255,255,.9); }
.tpl-photo .box p + p { margin-top: 8px; }
.tpl-photo .box p:first-child { font-weight: 700; color: #fff; }
.tpl-photo .box { padding-top: 0; }

/* 사진이 없는 장 */
.tpl-photo:not(:has(.ph)) .glow { display: block; width: 1100px; height: 1100px; border-radius: 50%; right: -460px; top: -420px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent) 0%, color-mix(in srgb, var(--accent) 12%, transparent) 42%, transparent 70%); }
.tpl-photo:not(:has(.ph)) .lanes { display: block; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.06) 1.6px, transparent 2px); background-size: 28px 28px; }
.tpl-photo:not(:has(.ph)) .t { margin-top: 0; }
.tpl-photo:not(:has(.ph)) .box.fill { flex: none; margin-top: 18px; }