/* 국제스포츠뉴스 — 목업 스타일. 포인트 컬러 1개(마린 블루) + 속보 레드는 라벨에만 */
:root {
  --pri: #0a4d78; --pri-d: #073a5b; --pri-l: #eaf2f8;
  --red: #d7262e;
  --fg: #111; --fg2: #444; --fg3: #777; --line: #e2e5e9; --line-d: #111; --bg: #fff; --bg2: #f5f6f8;
  --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --wrap: 1240px; --gap: 32px; --rail: 300px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 var(--sans); letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 820px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 0; background: var(--fg); color: #fff; padding: 8px 12px; z-index: 99; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

/* 목업 표시 */
.mock-ribbon { background: #fff7d6; color: #6b5300; font-size: 12.5px; text-align: center; padding: 6px 16px; border-bottom: 1px solid #f0e2a6; }

/* 유틸바 */
.util { border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg2); }
.util .wrap { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.util-nav { display: flex; gap: 18px; }

/* 마스트헤드 */
.mast-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 104px; }
.icon-btn { width: 40px; height: 40px; border: 0; background: none; display: grid; place-items: center; border-radius: 3px; }
.icon-btn:hover { background: var(--bg2); }
.logo { display: flex; align-items: center; gap: 12px; justify-self: center; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 46px; height: 46px; flex: none; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.1; }
.logo-txt b { font: 900 34px/1.1 var(--serif); letter-spacing: -0.04em; color: var(--fg); }
.logo-txt small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--pri); margin-top: 5px; }
.search { justify-self: end; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 3px; height: 40px; width: 240px; }
.search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 12px; font: inherit; font-size: 14px; outline: none; }
.search button { width: 40px; height: 38px; border: 0; background: none; display: grid; place-items: center; color: var(--fg2); }
.search:focus-within { border-color: var(--pri); }

/* GNB */
.gnb { position: sticky; top: 0; z-index: 20; background: #fff; border-top: 3px solid var(--line-d); border-bottom: 1px solid var(--line); }
.gnb ul { display: flex; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.gnb ul::-webkit-scrollbar { display: none; }
.gnb a { display: block; padding: 0 18px; height: 50px; line-height: 50px; font-size: 16.5px; font-weight: 700; white-space: nowrap; position: relative; }
.gnb a:hover { text-decoration: none; color: var(--pri); }
.gnb a[aria-current]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; background: var(--pri); }
.gnb a[aria-current] { color: var(--pri); }

.allmenu { border-bottom: 1px solid var(--line); background: var(--bg2); }
.allmenu-in { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding-top: 24px; padding-bottom: 28px; }
.allmenu-in > div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--fg2); }
.allmenu .am-h { font-weight: 700; color: var(--fg); font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }

/* 티커 */
.ticker { border-bottom: 1px solid var(--line); }
.ticker-in { display: flex; align-items: center; gap: 14px; height: 44px; }
.ticker-lbl { flex: none; font-size: 12px; font-weight: 700; color: #fff; background: var(--red); padding: 0 8px; height: 22px; line-height: 22px; border-radius: 2px; }
.ticker-list { flex: 1; min-width: 0; position: relative; height: 22px; overflow: hidden; }
.ticker-list li { display: flex; gap: 12px; align-items: baseline; white-space: nowrap; animation: tick .35s ease-out; }
.ticker-list a { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ticker-list time { font-size: 12.5px; color: var(--fg3); flex: none; }
@keyframes tick { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 공용 */
main { padding-bottom: 72px; }
.kicker { font-size: 13px; font-weight: 700; color: var(--pri); margin-bottom: 6px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--fg3); }
.meta .sec { color: var(--pri); font-weight: 600; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 2px; margin-right: 6px; vertical-align: 2px; font-family: var(--sans); }
.badge.col { background: var(--fg); color: #fff; }
.badge.feat { background: var(--pri-l); color: var(--pri); }
.sec-h { font-size: 20px; font-weight: 800; padding-bottom: 12px; border-bottom: 2px solid var(--line-d); margin-bottom: 18px; }
.sec-h a { display: flex; justify-content: space-between; align-items: baseline; }
.sec-h a:hover { text-decoration: none; color: var(--pri); }
.sec-h .more { font-size: 13px; font-weight: 500; color: var(--fg3); }
.sec-h .more::after { content: " ›"; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 48px; padding-top: 32px; }
.rail { display: flex; flex-direction: column; gap: 28px; }
.rail-box .box-h { font-size: 17px; font-weight: 800; padding-bottom: 10px; border-bottom: 2px solid var(--line-d); }
.rank li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.rank a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rank-n { flex: none; width: 18px; font: 700 17px/1.3 var(--serif); color: var(--fg3); }
.rank-n.hot { color: var(--pri); }
.ad { height: 250px; background: repeating-linear-gradient(45deg, var(--bg2) 0 10px, #eef0f3 10px 20px); border: 1px solid var(--line); display: grid; place-content: center; text-align: center; color: var(--fg3); font-size: 13px; }
.ad small { font-size: 11.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 3px; font-size: 13.5px; color: var(--fg2); }
.tags a:hover { border-color: var(--pri); color: var(--pri); text-decoration: none; }
.btn-line { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 3px; font-size: 14px; white-space: nowrap; }
.btn-line:hover { border-color: var(--fg); text-decoration: none; }
img { background: var(--bg2); }
/* 그리드 셀이 이미지 고유폭(480/1200)에 끌려 넓어지지 않게 */
.lead > *, .subs > *, .item > *, .rel-grid > *, .sec-first > *, .photo-row > *, .photo-grid > *, .mini a > *, .col-cards > *, .top > *, .cols > *, .secs > *, .bottom > * { min-width: 0; }
.lead-img, .sub-img, .sec-img, .item-img { display: block; }

/* 홈: 톱 */
.top { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 48px; padding-top: 28px; }
.lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.lead-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.lead-txt h2 { font: 700 29px/1.32 var(--serif); letter-spacing: -0.03em; }
.lead-sub { margin: 14px 0 12px; font-size: 15px; color: var(--fg2); line-height: 1.65; }
.heads { margin-top: 18px; border-top: 1px solid var(--line); }
.heads li { padding: 10px 0 0; font-size: 14.5px; font-weight: 500; position: relative; padding-left: 12px; }
.heads li::before { content: ""; position: absolute; left: 0; top: 19px; width: 4px; height: 4px; background: var(--fg3); }
.heads a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.subs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 24px; }
.sub-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 12px; }
.sub h3 { font-size: 15.5px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.latest { padding-top: 40px; }
.latest-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.ll-sec { font-size: 12.5px; font-weight: 700; color: var(--pri); margin-right: 8px; }

/* 홈: 섹션 박스 */
.secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 48px; padding-top: 56px; }
.sec-first { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sec-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.sec-first h3 { font-size: 17px; font-weight: 700; line-height: 1.42; margin-bottom: 6px; }
.sec-first p { font-size: 14px; color: var(--fg2); line-height: 1.55; }
.sec-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.sec-list a { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sec-list time { flex: none; font-size: 13px; color: var(--fg3); }

/* 홈: 포토 띠 */
.photo-band { background: #101418; color: #fff; margin-top: 64px; padding: 44px 0 52px; }
.sec-h.inv { border-color: #fff; }
.sec-h.inv .more { color: #aab; }
.photo-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.photo-card { display: flex; flex-direction: column; gap: 10px; }
.photo-card:hover { text-decoration: none; }
.photo-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: opacity .2s; background: #222; }
.photo-card:hover img { opacity: .85; }
.photo-card span { font-size: 14.5px; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.photo-card:hover span { text-decoration: underline; text-underline-offset: 3px; }
.photo-card small { font-size: 12.5px; color: var(--fg3); }

/* 홈: 하단 */
.bottom { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 48px; padding-top: 56px; }
.opi-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.opi-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.opi-list a { font-weight: 700; font-size: 15.5px; }
.opi-list p { font-size: 13.5px; color: var(--fg3); margin-top: 4px; }

/* 목록 */
.list-h { padding: 36px 0 18px; border-bottom: 2px solid var(--line-d); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.list-h h1 { font: 800 30px/1.2 var(--sans); letter-spacing: -0.03em; }
.list-h .count { margin-left: auto; font-size: 14px; color: var(--fg3); }
.list-h .count b { color: var(--pri); }
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.subtabs a { display: inline-block; font-size: 13.5px; padding: 4px 10px; border-radius: 3px; background: var(--bg2); color: var(--fg2); }
.item { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.item:first-child { padding-top: 0; }
.item-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.item h3 { font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }
.item-lead { margin: 8px 0 10px; font-size: 14.5px; color: var(--fg2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pager { display: flex; justify-content: center; gap: 4px; padding-top: 32px; }
.pager a, .pager strong { min-width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 3px; font-size: 14px; }
.pager strong { background: var(--fg); color: #fff; border-color: var(--fg); }
.pager a:hover { border-color: var(--fg); text-decoration: none; }
.empty { padding: 40px 0 20px; color: var(--fg2); }

/* 기사 */
.crumb { display: flex; gap: 8px; font-size: 13.5px; color: var(--fg3); margin-bottom: 14px; }
.crumb a:last-of-type { color: var(--pri); font-weight: 600; }
.art-h { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.art-h h1 { font: 700 34px/1.36 var(--serif); letter-spacing: -0.035em; }
.art-sub { margin-top: 16px; padding-left: 14px; border-left: 3px solid var(--pri); font-size: 17px; font-weight: 500; color: var(--fg2); line-height: 1.55; }
.art-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.art-meta p { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--fg3); }
.art-meta p b { color: var(--fg); }
.tools { display: flex; gap: 6px; }
.tool { min-width: 36px; padding: 0 6px; white-space: nowrap; height: 36px; border: 1px solid var(--line); border-radius: 3px; background: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.tool sup { font-size: 10px; }
.tool:hover { border-color: var(--fg); }
.tool:active { transform: scale(.96); }
.art-body { --fs: 18px; padding-top: 28px; font-size: var(--fs); line-height: 1.85; letter-spacing: -0.015em; }
.art-body p { margin-bottom: 1.25em; }
.art-mid { font-size: 1.05em; font-weight: 800; margin: 1.8em 0 .8em; padding-left: 12px; border-left: 4px solid var(--fg); line-height: 1.5; }
.art-fig { margin: 0 0 32px; }
.art-fig img { width: 100%; }
.art-fig figcaption { font-size: 13.5px; color: var(--fg3); line-height: 1.55; padding: 10px 0 0; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.art-src { margin-top: 12px; padding: 16px 20px; background: var(--bg2); border-radius: 3px; font-size: 14px; }
.art-src h2 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.art-src li { color: var(--fg2); }
.art-src li::before { content: "· "; }
.art-src a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #bbb; }
.art-tags { margin-top: 24px; }
.byline-card { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line); }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--pri-l); color: var(--pri); display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; }
.byline-card p { flex: 1; display: flex; flex-direction: column; font-size: 14px; color: var(--fg3); }
.byline-card p b { color: var(--fg); font-size: 15.5px; }
.copy-note { margin-top: 14px; font-size: 13px; color: var(--fg3); }
.rel { margin-top: 44px; }
.rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rel-card { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.rel-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.prevnext { margin-top: 36px; border-top: 1px solid var(--line-d); }
.prevnext a { display: flex; gap: 18px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.prevnext span { flex: none; width: 64px; font-size: 13px; color: var(--fg3); padding-top: 1px; }
.mini li { border-bottom: 1px solid var(--line); }
.mini a { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; font-size: 14px; line-height: 1.45; }
.mini img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.mini span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 오피니언·포토·안내 */
.col-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 44px; }
.col-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--bg2); border-radius: 10px; }
.col-card .badge { align-self: flex-start; }
.col-card b { font: 700 19px/1.4 var(--serif); }
.col-card p { font-size: 14px; color: var(--fg2); }
.col-card small { color: var(--fg3); }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; padding-top: 28px; }
.photo-card.light small { color: var(--fg3); }
.info-body { padding-top: 24px; font-size: 16px; line-height: 1.8; }
.info-body p { margin-bottom: 1em; }

/* 푸터 */
.foot { background: #f2f3f5; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg2); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 18px 0; border-bottom: 1px solid #dcdfe3; font-size: 14px; color: var(--fg); }
.foot-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 28px 0 40px; }
.foot-logo b { display: block; font: 900 20px/1.2 var(--serif); color: var(--fg); letter-spacing: -0.04em; }
.foot-logo small { font-size: 10px; letter-spacing: .08em; color: var(--fg3); }
.foot-info { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.foot-info div { display: flex; gap: 6px; }
.foot-info dt { color: var(--fg3); }
.foot-info dd { margin: 0; }
.foot-copy { grid-column: 2; color: var(--fg3); line-height: 1.7; }

/* 반응형 */
@media (max-width: 1080px) {
  .top, .cols, .bottom { grid-template-columns: minmax(0, 1fr); }
  .rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .rail .ad { display: none; }
  .photo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-row a:nth-child(n+4) { display: none; }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .wrap { padding: 0 16px; }
  .mock-ribbon { font-size: 11.5px; text-align: left; }
  .util-nav a:nth-child(n+3) { display: none; }
  .mast-in { height: 68px; grid-template-columns: 40px 1fr 40px; }
  .logo { gap: 8px; }
  .logo-mark { width: 32px; height: 32px; }
  .logo-txt b { font-size: 21px; }
  .logo-txt small { font-size: 7.5px; letter-spacing: .1em; margin-top: 3px; }
  .search { display: none; }
  .gnb ul { justify-content: flex-start; gap: 0; }
  .gnb a { padding: 0 12px; height: 46px; line-height: 46px; font-size: 15.5px; }
  .gnb a[aria-current]::after { left: 12px; right: 12px; }
  .allmenu-in { grid-template-columns: repeat(2, 1fr); }
  .ticker-list time { display: none; }
  .lead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lead-txt h2 { font-size: 23px; }
  .subs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .sub h3 { font-size: 14.5px; }
  .rail { grid-template-columns: 1fr; }
  .secs { grid-template-columns: 1fr; padding-top: 40px; gap: 40px; }
  .sec-first { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .sec-first h3 { font-size: 15.5px; }
  .sec-first p { display: none; }
  .photo-band { margin-top: 48px; }
  .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-row a:nth-child(n+3) { display: none; }
  .opi-list { grid-template-columns: 1fr; }
  .latest-list { grid-template-columns: minmax(0, 1fr); }
  .list-h h1 { font-size: 24px; }
  .item { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; padding: 16px 0; }
  .item-img { order: 2; }
  .item h3 { font-size: 16px; }
  .item-lead { display: none; }
  .item .meta { margin-top: 6px; }
  .art-h h1 { font-size: 25px; }
  .art-sub { font-size: 15.5px; }
  .art-body { --fs: 17px; }
  .art-fig { margin-left: -16px; margin-right: -16px; }
  .art-fig figcaption { padding-left: 16px; padding-right: 16px; }
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-cards { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .foot-body { grid-template-columns: 1fr; gap: 16px; }
  .foot-copy { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .ticker-list li { animation: none; } }
@media print { .util, .mast, .gnb, .ticker, .rail, .tools, .rel, .prevnext, .foot, .mock-ribbon, .allmenu { display: none !important; } .cols { display: block; } }