/* ===== SIRI test site — 공통 스타일 =====
   폰트 바꾸려면 아래 --font 한 줄만 수정하세요. (Pretendard 적용법은 README.md 참고) */
:root{
  --font: 'Pretendard', 'Noto Sans KR', sans-serif;   /* ← 여기! */
  --red:#BC4A4A; --blue:#32579E;
  --ink:#141414; --gray:#6B6B70; --line:#E0E0E3;
  --ph:#D6D9DE; --band:#F3F3F4; --bg:#fff;
  --pad:144px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{padding:0 280px}
.ph{background:var(--ph);width:100%}          /* 임시 회색 이미지 */
.en{font-family:'Inter',var(--font);font-weight:500}

/* header */
.topbar{background:#000;color:#fff;height:72px}
.topbar .in{max-width:1440px;margin:0 auto;height:100%;padding:0 48px;display:flex;align-items:center;justify-content:space-between;position:relative}
.topbar .left,.topbar .right{display:flex;align-items:center;gap:20px;flex:1}
.topbar .right{justify-content:flex-end;gap:24px;font-size:14px}
.topbar .right .date{font-size:12px;font-weight:500}
.topbar .logo{position:absolute;left:50%;transform:translateX(-50%);display:block}
.topbar .logo img{height:44px;width:auto}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;color:#fff}
.icon-btn svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
.sub-btn{background:var(--red);color:#fff;font-weight:700;font-size:15px;padding:9px 18px;border-radius:4px}
.sub-btn:hover{filter:brightness(1.1)}

/* nav */
.nav{background:#fff;border-bottom:1px solid var(--line);position:relative}
.nav ul{max-width:1440px;margin:0 auto;padding:0 var(--pad);display:flex;gap:44px;list-style:none}
.nav li a,.nav li button{font-family:inherit;line-height:1.5;display:block;padding:18px 0 15px;font-size:15px;font-weight:700;border-bottom:3px solid transparent;color:var(--ink)}
/* 메뉴 가운데 정렬 (넘칠 땐 왼쪽부터 스크롤) */
.nav li:first-child{margin-left:auto}.nav li:last-child{margin-right:auto}
.nav li.on a,.nav li.on button{border-bottom-color:var(--red);color:var(--red)}
.nav li a:hover,.nav li button:hover{color:var(--red)}
.about-banner{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12);z-index:50}
.about-banner.open{display:block}
.about-banner .rows{padding:6px 0 10px var(--about-x,987px)}
.about-banner a{display:block;padding:12px 0;font-size:15px;font-weight:500;border-bottom:1px solid var(--line);width:220px}
.about-banner a:last-child{border:0}
.about-banner a:hover{color:var(--red)}

/* footer */
.footer{background:#000;color:#fff;margin-top:96px;padding:48px 0 40px}
.footer .in{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.footer img{height:36px;margin-bottom:24px}
.footer .links{display:flex;gap:28px;font-size:12px;font-weight:500;margin-bottom:22px;flex-wrap:wrap}
.footer .links a:hover{color:var(--red)}
.footer p{font-size:12px;color:#a8a8ad;line-height:1.9}

/* page title */
.page-title{display:flex;align-items:center;gap:14px;padding:56px 0 20px}
.page-title i{width:6px;height:34px;background:var(--red);display:block}
.page-title h1{font-size:32px;font-weight:900;line-height:1.3}
.page-sub{color:var(--gray);font-size:15px;line-height:1.65;margin:0 0 28px 20px}
.notice{font-size:15px;line-height:1.65;color:var(--gray);margin:0 0 36px 20px}

/* search */
.search{display:flex;gap:0;border:1px solid var(--ink);height:52px;margin-bottom:20px}
.search .chip{align-self:center;margin-left:12px;background:var(--red);color:#fff;font-size:13px;font-weight:700;padding:5px 10px;border-radius:3px;white-space:nowrap}
.search .chip b{margin-left:8px;cursor:pointer}
.search input{flex:1;border:0;outline:0;padding:0 16px;font:inherit;font-size:15px;background:transparent}
.search button{background:var(--ink);color:#fff;font-weight:700;padding:0 28px;font-size:15px}
.dark .search{border-color:#fff}
.dark .search input{color:#fff}.dark .search input::placeholder{color:#9a9aa0}
.dark .search button{background:#fff;color:#000}

/* tags */
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.tags a{font-size:13px;font-weight:400;line-height:1.6;padding:7px 14px;border:1px solid var(--line);border-radius:20px}
.tags a:hover,.tags a.on{background:var(--red);border-color:var(--red);color:#fff}
.tag{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:2px;white-space:nowrap}



/* DEEP cards */
.card .ph{height:270px;margin-bottom:12px}
.grid3 .card .ph{height:200px}
.card .t{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.card h3{font-size:20px;font-weight:700;line-height:1.4;flex:1}
.card p{font-size:13px;line-height:1.6;color:var(--gray);margin-bottom:12px}
.card:hover h3{color:var(--red)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:48px 32px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 28px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}

/* BRIEF */
.day{margin-bottom:40px}
.day h2{font-size:24px;font-weight:900;line-height:1.3;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.b-item{display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.b-item .ph{width:220px;height:140px;flex:none}
.b-item .bi{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.b-item .top{display:flex;align-items:center;gap:8px}
.b-item .top .tag{line-height:1.3;padding:4px 8px;letter-spacing:.02em}
.b-item .top .src{font-size:12px;font-weight:500;line-height:1.4;color:var(--gray)}
.b-item h3{font-size:20px;font-weight:700;line-height:1.4}
.b-item p{font-size:13px;line-height:1.6;color:var(--gray)}
.b-item .go{font-size:12px;font-weight:500;line-height:1.4;color:var(--blue)}
.b-item:hover h3{color:var(--red)}

/* DATA (dark) */
.dark-page{background:#000;color:#fff;min-height:70vh;padding-bottom:80px}
.dark-page .page-title h1{color:#fff}
.d-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:24px}
.d-card h3{font-size:17px;font-weight:700;line-height:1.4;margin-bottom:10px}
.d-card .big{font-size:32px;font-weight:900;line-height:1.3;margin:10px 0 10px}
.d-card .big small{font-size:12px;font-weight:500;margin-left:6px;color:var(--on-dark)}
.d-card .lab{font-size:12px;font-weight:500;line-height:1.4;color:var(--on-dark)}
.d-sec{margin-bottom:56px}
.d-sec>h2{font-size:24px;font-weight:900;line-height:1.3;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.6);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.d-sec>h2 a:hover{color:var(--red)}
.arrow{width:30px;height:30px;border-radius:50%;border:1px solid #fff;display:inline-grid;place-items:center;font-size:12px;font-weight:500;line-height:1;flex:none;color:#fff}
.arrow:hover{background:#fff;color:#000}
.cards{display:grid;gap:24px}.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.c1{grid-template-columns:1fr}
.bars{--bs:66.7%;display:flex;align-items:flex-end;gap:10px;height:210px;margin-top:6px}
.bars.tall{height:260px}
.bar{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.bar .v{font-size:12px;font-weight:500;margin-bottom:6px;color:var(--on-dark);white-space:nowrap}
.bar .b{width:100%;border-radius:3px 3px 0 0;min-height:3px}
.bar .x{font-size:12px;font-weight:500;color:var(--on-dark);margin-top:6px;text-align:center;line-height:1.3;word-break:keep-all}
.bar.last .b{background:var(--red)!important}.bar.last .v{color:#fff}
.dashed{border:1px dashed rgba(255,255,255,.6);border-radius:14px;padding:56px 0;display:grid;place-items:center;color:var(--on-dark);font-size:13px;line-height:1.6}
.mega-row{margin-bottom:36px}
.mega-row>h3{font-size:20px;font-weight:700;margin-bottom:14px}
.mega-row>h3 span{font-size:14px;color:#bbb;font-weight:400;margin-left:8px}
.mega-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mega-blocks .d-card{padding:22px}
.mega-blocks .d-card h4{font-size:15px;font-weight:700;margin-bottom:14px}
.empty{color:#9a9aa0;padding:40px 0;text-align:center;grid-column:1/-1}

.hint{font-size:12px;font-weight:500;color:var(--on-dark);margin-top:14px}

/* archive */
.band{background:var(--band);padding:40px 0;margin-top:72px}
.arch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}
.arch-grid a{display:flex;flex-direction:column;gap:10px}
.arch-grid .ph{height:160px}
.arch-grid h4{font-size:15px;font-weight:700;line-height:1.45}
.arch-grid time{font-size:12px;font-weight:500;line-height:1.4;color:var(--gray)}
.arch-grid a:hover h4{color:var(--red)}

/* text pages */
.text-lead{font-size:20px;font-weight:700;line-height:1.65;margin-bottom:24px}
.text p{font-size:15px;line-height:1.85;color:var(--gray);padding:16px 0;border-bottom:1px solid var(--line);margin:0}
.text p.text-lead{color:var(--ink);padding:0;border:0}
.text h2{font-size:20px;font-weight:900;margin:36px 0 10px}
.ethics li{list-style:none;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.85;color:var(--gray)}
.ethics li b{display:block;font-size:20px;line-height:1.4;margin-bottom:8px}
.contact-row{padding:16px 0;border-bottom:1px solid var(--line)}
.contact-row h3{font-size:20px;font-weight:700;line-height:1.4;margin-bottom:8px}
.contact-row p{font-size:15px;line-height:1.85;color:var(--gray)}

/* article */
.art-head{padding:40px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.art-head .row{display:flex;align-items:center;gap:10px}
.art-head h1{font-size:40px;font-weight:900;line-height:1.3}
.art-body{display:flex;flex-direction:column;gap:20px;padding-bottom:12px}
.art-body p{font-size:17px;line-height:1.95}
.art-hero{height:495px;margin:20px 0}
.quote{display:flex;gap:20px;padding:8px 0}
.quote i{width:5px;background:var(--red);flex:none}
.quote p{font-size:20px;font-weight:700;line-height:1.4}
.rel{padding:24px 0 72px}
.rel .hm-h{margin-bottom:16px}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rel-grid a{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rel-grid .ph{height:120px}
.rel-grid h4{font-size:15px;font-weight:700;line-height:1.45}
.rel-grid a:hover h4{color:var(--red)}
.art-body .ph{height:360px;margin:8px 0}
.back{font-size:12px;font-weight:500;line-height:1.4;color:var(--gray)}.back:hover{color:var(--red)}

@media(max-width:1100px){
  :root{--pad:24px}.wrap.narrow{padding:0 24px}
  .grid2,.grid3,.cards.c3,.mega-blocks{grid-template-columns:1fr}
  .grid4,.arch-grid{grid-template-columns:1fr 1fr}
  .nav ul{gap:20px;overflow-x:auto}.topbar .in{padding:0 16px}.topbar .right .date{display:none}
  .b-item{flex-direction:column}.b-item .ph{width:100%}
  .about-banner .rows{padding-left:24px}
}

/* ===== 모바일 (폰) ===== */
@media(max-width:700px){
  /* 헤더: 로고를 absolute 가운데 고정 → 일반 배치로, 버튼과 겹치지 않게 */
  .topbar{height:60px}
  .topbar .in{padding:0 12px;gap:8px}
  .topbar .left,.topbar .right{flex:none;gap:4px}
  .topbar .logo{position:static;transform:none;flex:1;min-width:0;display:flex;justify-content:center}
  .topbar .logo img{height:26px;max-width:100%;object-fit:contain}
  .icon-btn{width:32px;height:32px}
  .icon-btn svg{width:20px;height:20px}
  .sub-btn{font-size:11px;padding:6px 9px;white-space:nowrap}

  /* 메뉴: 글자 안 쪼개지게 한 줄 + 옆으로 스크롤 */
  .nav ul{gap:20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:none}
  .nav li a,.nav li button{font-size:14px;padding:14px 0 11px;white-space:nowrap}
  .about-banner .rows{padding-left:var(--pad)}
  .about-banner a{width:auto;padding-right:var(--pad)}

  /* 본문 */
  .page-title{padding:32px 0 20px}
  .page-title h1{font-size:24px}
  .page-title i{height:26px}
  .art-head{padding-top:24px;gap:14px}
  .art-head h1{font-size:26px}
  .art-body p{font-size:16px;line-height:1.9}
  .art-hero{height:auto;aspect-ratio:358/200;margin:8px 0}
  .quote p{font-size:17px}
  .rel{padding-bottom:40px}
  .rel-grid{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--pad));padding:0 var(--pad)}
  .rel-grid a{flex:none;width:200px}
  .grid2,.grid3,.grid4,.arch-grid{grid-template-columns:1fr}
  .arch-grid{grid-template-columns:1fr 1fr}
  .search button{padding:0 16px}
  .footer .links{gap:16px}
  .bars{gap:8px}


  /* BRIEF 목록: 작은 썸네일(왼쪽) + 제목(오른쪽) */
  .day{margin-bottom:28px}
  .day h2{font-size:18px}
  .b-item{flex-direction:row;gap:12px;padding:12px 0}
  .b-item .ph{width:88px;height:66px;flex:none}
  .b-item h3{font-size:15px;line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .b-item p{display:none}
  .notice{font-size:13px;margin:0 0 16px}
  .b-item .top .src{font-size:11px}
  .b-item .go{display:none}

  /* DEEP 카드(홈·DEEP 페이지): 작은 썸네일 + 제목·태그·첫 문장 */
  .grid2{gap:0}
  .card{display:grid;grid-template-columns:96px 1fr;column-gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
  .card>a:first-child{grid-row:1/4}
  .card .ph,.grid3 .card .ph{aspect-ratio:1;height:auto;margin:0}
  .card .t{flex-direction:column;gap:6px;margin-bottom:4px}
  .card h3{font-size:15px;line-height:1.4}
  .card p{font-size:12px;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card .meta{font-size:11px}
  .tags{margin-bottom:12px;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tags::-webkit-scrollbar{display:none}
  .tags a{font-size:13px;padding:6px 12px;white-space:nowrap;flex:none}


  /* 아카이브 */
  .arch-grid{gap:20px 12px}
  .arch-grid a{gap:6px}
  .arch-grid .ph{height:auto;aspect-ratio:173/84}
  .arch-grid h4{font-size:13px}
}

.dark-page + .footer{margin-top:0}

/* =====================================================================
   HOME — 매거진 스타일 (피그마 'SIRI 리디자인 · SBJ 무드' 시안)
   홈(index.html) 전용. 색·폰트 변수는 맨 위 :root 값을 그대로 씁니다.
   ===================================================================== */
:root{--on-dark:#A8A8AD}
.m-only{display:none}
.meta{font-size:12px;color:var(--gray)}

/* 사진 자리(임시 그라데이션) — 실제 사진은 .ph 안에 <img>를 넣으면 됩니다 */
.g1{background-image:linear-gradient(140deg,#14213D 0%,#32579E 71.4%)}
.g2{background-image:linear-gradient(140deg,#4A1B1B 0%,#BC4A4A 71.4%)}
.g3{background-image:linear-gradient(140deg,#1F2937 0%,#6B7280 71.4%)}
.g4{background-image:linear-gradient(140deg,#32579E 0%,#BC4A4A 71.4%)}

.hm .tag,.now .tag{padding:4px 8px;line-height:1.3;letter-spacing:.02em}

/* 섹션 헤더: 빨간 바 + 굵은 영문 타이틀 + 굵은 구분선 */
.hm-h{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:20px;border-bottom:2px solid var(--ink)}
.hm-h i{width:6px;height:26px;background:var(--red);flex:none}
.hm-h h2{font-family:'Inter',var(--font);font-weight:800;font-size:22px;line-height:1.2;letter-spacing:.04em;white-space:nowrap}
.hm-h .sub,.hm-h .more{font-size:12px;font-weight:500;line-height:1.4;color:var(--gray);white-space:nowrap}
.hm-h .more{margin-left:auto}
.hm-h .more:hover{color:var(--red)}

/* NOW 띠 */
.now{background:var(--band)}
.now .in{max-width:1440px;margin:0 auto;padding:10px var(--pad);display:flex;align-items:center;gap:12px;min-width:0}
.now .tag{flex:none}
.now a{font-size:12px;font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.now a:hover{color:var(--red)}

/* 히어로: 이번 주 PICK + TOP HEADLINES */
.wrap.hm{padding-top:40px;padding-bottom:64px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:48px;align-items:start}
.hero-main{display:flex;flex-direction:column;gap:14px}
.hero-main>a{display:block}
.hero-main .ph{aspect-ratio:760/428}
.hero-main .lab{display:flex;align-items:center;gap:10px}
.hero-main .hs{font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.02em;color:var(--red);display:flex;gap:8px}
.hero-main h2{font-size:40px;font-weight:900;line-height:1.3;word-break:keep-all;text-wrap:balance}
.hero-main>a:hover h2{color:var(--red)}
.hero-main p{font-size:15px;line-height:1.65;color:var(--gray)}
.hero-main .btns{display:flex;gap:10px;flex-wrap:wrap}
.hero-main .btns a{font-size:15px;font-weight:700;line-height:1.45;padding:9px 18px;border:1px solid var(--ink);border-radius:3px}
.hero-main .btns a:hover{background:var(--ink);color:#fff}
.rail .hm-h{margin-bottom:0}
.hl{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
.hl time{display:block;font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.02em;color:var(--red);margin-bottom:4px}
.hl h3{font-size:15px;font-weight:700;line-height:1.45}
.hl:hover h3{color:var(--red)}

.hm-sec{margin-top:64px}

/* 지난 주 PICK */
.picks4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pk{display:flex;flex-direction:column;gap:12px}
.pk .ph{aspect-ratio:270/168}
.pk h3{font-size:17px;font-weight:700;line-height:1.4}
.pk small{font-size:12px;font-weight:500;line-height:1.4;color:var(--gray)}
.pk:hover h3{color:var(--red)}

/* SIRI DEEP: 큰 카드 1 + 작은 카드 3 */
.deep-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
.dcard .body{display:flex;flex-direction:column}
.dcard .thumb{display:block}
.dcard .meta{font-weight:500;line-height:1.4}
.dcard .ttl:hover h3{color:var(--red)}
.dcard.big,.dcard.big .body{gap:14px}
.dcard.big{display:flex;flex-direction:column}
.dcard.big .ph{aspect-ratio:560/315}
.dcard.big .lab{display:flex;align-items:center;gap:10px}
.dcard.big h3{font-size:24px;font-weight:900;line-height:1.3;word-break:keep-all;text-wrap:balance}
.dcard .sum{font-size:15px;line-height:1.65;color:var(--gray)}
.dcard.sm{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.deep-list .dcard.sm:first-child{padding-top:0}
.dcard.sm .thumb{flex:none;width:144px}
.dcard.sm .ph{aspect-ratio:144/96}
.dcard.sm .body{flex:1;min-width:0;gap:8px}
.dcard.sm .lab{display:contents}            /* 태그 → 제목 → 날짜 순서로 */
.dcard.sm .tag{order:1;align-self:flex-start}
.dcard.sm .ttl{order:2}
.dcard.sm .meta{order:3}
.dcard.sm h3{font-size:17px;font-weight:700;line-height:1.4}
.dcard.sm .sum{display:none}

/* SIRI DATA 검정 띠 */
.dband{background:#000;color:#fff;padding:56px 0 64px}
.dband .in{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.dband .hm-h{border-bottom-color:#fff;margin-bottom:28px}
.dband .hm-h h2{color:#fff}
.dband .hm-h .sub,.dband .hm-h .more{color:var(--on-dark)}
.dband .hm-h .more:hover{color:#fff}
.dcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.dc{display:flex;flex-direction:column;gap:10px;padding:24px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.7);border-radius:14px}
.dc:hover{background:rgba(255,255,255,.14);border-color:#fff}
.dc h3{font-size:17px;font-weight:700;line-height:1.4}
.dc .s{font-size:12px;font-weight:500;line-height:1.4;color:var(--on-dark)}
.dc .big{font-size:40px;font-weight:900;line-height:1.3}
.dc .dz{border:1px dashed rgba(255,255,255,.6);border-radius:12px;padding:40px 0;text-align:center;font-size:13px;line-height:1.6;color:var(--on-dark)}
.dc .bars{--bs:66.7%;height:210px;gap:10px;margin-top:0}
.dc .bar .v,.dc .bar .x{font-size:12px;font-weight:500;line-height:1.4;color:var(--on-dark)}
.dc .bar .v{margin-bottom:6px}.dc .bar .x{margin-top:6px}
.dc .bar.last .v{color:#fff;font-weight:500}

/* ARCHIVE + 뉴스레터 */
.wrap.tail{padding-top:64px;padding-bottom:64px}
.ar4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ar4 a{display:flex;flex-direction:column;gap:10px}
.ar4 .ph{aspect-ratio:270/130}
.ar4 h4{font-size:15px;font-weight:700;line-height:1.45}
.ar4 a:hover h4{color:var(--red)}
.nl{margin-top:56px;display:flex;align-items:center;gap:32px;padding:40px 48px;background:var(--red);color:#fff;border-radius:6px}
.nl h3{font-size:24px;font-weight:900;line-height:1.3;margin-bottom:6px}
.nl p{font-size:15px;line-height:1.65}
.nl form{margin-left:auto;display:flex;gap:8px}
.nl input{height:46px;width:280px;border:0;padding:0 14px;font:inherit;font-size:13px;border-radius:3px}
.nl button{height:46px;padding:0 22px;background:#000;color:#fff;font-weight:700;font-size:15px;border-radius:3px}
body[data-page="home"] .footer{margin-top:0}

/* ---- 태블릿 ---- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:40px}
  .picks4,.ar4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deep-wrap,.dcards{grid-template-columns:1fr}
  .nl{flex-direction:column;align-items:flex-start}
  .nl form{margin:0;width:100%}
  .nl input{flex:1;width:auto;min-width:0}
}

/* ---- 모바일 (피그마 390 시안) ---- */
@media(max-width:700px){
  body[data-page="home"]{--pad:16px}
  .pc-only{display:none!important}
  .m-only{display:inline}

  .now .in{padding:8px var(--pad)}

  .hm-h{gap:10px;padding-bottom:10px;margin-bottom:14px}
  .hm-h i{width:5px;height:22px}
  .hm-sec{margin-top:32px}
  .wrap.hm{padding-top:16px;padding-bottom:32px}

  /* 이번 주 PICK: 사진 + 큰 제목, 본문 문장은 숨김 */
  .hero{gap:32px}
  .hero-main{gap:10px}
  .hero-main .ph{aspect-ratio:358/190}
  .hero-main h2{font-size:26px}
  .hero-main p{display:none}
  .hero-main .btns{gap:6px}
  .hero-main .btns a{font-size:12px;padding:8px 13px}

  /* TOP HEADLINES: 한 화면에 5개 */
  #headlines .hl:nth-child(n+6){display:none}
  .hl{display:flex;gap:10px;align-items:baseline;padding:12px 0}
  .hl time{flex:none;width:36px;margin:0}

  /* 지난 주 PICK: 옆으로 넘기는 카드 */
  .picks4{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(-1*var(--pad));padding:0 var(--pad)}
  .picks4::-webkit-scrollbar{display:none}
  .picks4{scroll-padding-inline:var(--pad)}
  .picks4::after{content:"";flex:0 0 calc(var(--pad) - 12px)}
  .picks4{padding-right:0}
  .pk{flex:0 0 156px;gap:8px;scroll-snap-align:start}
  .pk .ph{aspect-ratio:156/112}
  .pk h3{font-size:15px;line-height:1.45}
  .pk small .m{display:none}

  /* DEEP: 작은 썸네일 + 태그·제목·날짜 */
  .deep-wrap{display:block}
  .dcard.big,.dcard.sm{display:flex;flex-direction:row;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
  .deep-list .dcard.sm:first-child{padding-top:14px}
  .dcard.big .thumb,.dcard.sm .thumb{flex:none;width:96px}
  .dcard.big .ph,.dcard.sm .ph{aspect-ratio:96/88}
  .dcard.big .body,.dcard.sm .body{flex:1;min-width:0;gap:6px}
  .dcard.big .lab{display:contents}
  .dcard .tag{order:1;align-self:flex-start;background:none;color:var(--red);padding:0;font-size:11px}
  .dcard .ttl{order:2}
  .dcard .meta{order:3}
  .dcard.big h3,.dcard.sm h3{font-size:16px;font-weight:700;line-height:1.4}
  .dcard .sum{display:none}

  /* DATA 띠 */
  .dband{padding:32px 0 40px}
  .dband .hm-h{margin-bottom:20px}
  .dcards{gap:20px}
  .dc{padding:19px}
  .dc .bars{--bs:61%;height:180px}
  .dc .big{font-size:32px}
  .dc .dz{padding:29px 0}

  /* ARCHIVE 2×2 + 뉴스레터 */
  .wrap.tail{padding-top:40px;padding-bottom:40px}
  .ar4{gap:14px 12px}
  .ar4 a{gap:6px}
  .ar4 .ph{aspect-ratio:173/84}
  .ar4 h4{font-size:13px}
  .nl{margin-top:36px;padding:24px 20px;gap:16px}
  .nl h3{font-size:22px}
  .nl form{flex-direction:column}
  .nl input{width:100%;flex:none}
}

/* 탭 페이지 마무리 */
.art-head h1,.card h3,.b-item h3,.arch-grid h4{word-break:keep-all}
.dark-page .page-title{padding-bottom:36px}

/* DATA · 거버넌스 (국내: 공공데이터 API) */
.gv{margin-bottom:48px}
.gv-h{font-size:24px;font-weight:900;line-height:1.3;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.6);margin-bottom:16px}
.gv-status{font-size:12px;font-weight:500;color:var(--on-dark);margin-bottom:16px}
.gv-status.warn{color:#e8a0a0}
.gv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:24px}
.gv .d-card .dashed{padding:40px 0;font-size:12px;padding-inline:12px;text-align:center}
.gv-src{font-size:11px;line-height:1.5;color:var(--on-dark);margin-top:14px}
.gv-src a{text-decoration:underline}
.gv-line{width:100%;height:auto;display:block;margin-top:6px}
.gv-line text{fill:var(--on-dark);font-size:11px;font-family:inherit}
.gv-hbars{display:flex;flex-direction:column;gap:7px;max-height:260px;overflow-y:auto;padding-right:6px}
.hb{display:grid;grid-template-columns:64px 1fr 56px;gap:8px;align-items:center;font-size:12px;color:var(--on-dark)}
.hb .t{height:10px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.hb .t i{display:block;height:100%;background:#ababab}
.hb:first-child .t i{background:var(--red)}
.hb .v{text-align:right}
.gv-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.gv-chips span{font-size:12px;border:1px solid rgba(255,255,255,.4);border-radius:20px;padding:4px 12px;color:var(--on-dark)}
.gv-chips b{color:#fff;margin-left:4px}
.gv-table{max-height:420px;overflow-y:auto;font-size:13px}
.gv-table .tr{display:grid;grid-template-columns:80px minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.gv-table .th{position:sticky;top:0;background:#1b1b1b;font-size:12px;color:var(--on-dark);font-weight:500}
.gv-table .c{color:var(--on-dark)}
.gv-table .n a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){.gv-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .gv{margin-bottom:32px}
  .gv-table .tr{grid-template-columns:56px minmax(0,1fr) minmax(0,.8fr);gap:8px}
  .gv-table .tr>span:nth-child(4){display:none}
  .hb{grid-template-columns:52px 1fr 48px}
}

/* 워드프레스에서 가져온 기사 본문 */
.wp-body img,.wp-body iframe,.wp-body video{max-width:100%;height:auto}
.wp-body figure{margin:8px 0}
.wp-body figcaption{font-size:13px;color:var(--gray);margin-top:6px}
.wp-body a{text-decoration:underline}
.wp-body p:empty{display:none}

/* 전체 메뉴 창 */
.icon-btn{cursor:pointer}
.menu-ov{position:fixed;inset:0;z-index:100}
.menu-ov[hidden]{display:none}
.menu-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.menu-panel{position:absolute;top:0;left:0;bottom:0;width:min(420px,100%);background:#fff;color:var(--ink);overflow-y:auto;padding:20px 28px 40px;box-shadow:12px 0 32px rgba(0,0,0,.2)}
.menu-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.menu-top img{height:36px;width:auto}
.menu-x{width:40px;height:40px;font-size:30px;line-height:1;color:var(--ink)}
.menu-main{display:flex;flex-direction:column;padding:8px 0 14px}
.menu-main a{padding:14px 0;font-size:22px;font-weight:900;letter-spacing:-.01em;border-bottom:1px solid var(--line)}
.menu-main a:hover,.menu-main a.on{color:var(--red)}
.menu-sec{padding-top:22px}
.menu-sec h2{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--gray);margin-bottom:10px}
.menu-tags{display:flex;flex-wrap:wrap;gap:8px}
.menu-tags a{font-size:14px;font-weight:500;padding:7px 12px;border:1px solid var(--line);border-radius:999px}
.menu-tags a:hover{border-color:var(--red);color:var(--red)}
.menu-links{display:flex;flex-direction:column}
.menu-links a{padding:11px 0;font-size:15px;font-weight:500;border-bottom:1px solid var(--line)}
.menu-links a:hover{color:var(--red)}
.menu-panel a:focus-visible,.menu-x:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.menu-panel{animation:menuIn .22s ease-out}.menu-bg{animation:menuFade .22s ease-out}}
@keyframes menuIn{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes menuFade{from{opacity:0}to{opacity:1}}

/* ===== DATA · 메가스포츠이벤트 (mega.js) ===== */
.mega-blocks>*{min-width:0}
.mg-big{font-size:30px;font-weight:900;margin:4px 0 10px;line-height:1.2}
.mg-big small{font-size:14px;font-weight:500;margin-left:6px;color:#ccc}
.mg-dim{color:#9a9aa0}
.mg-note{font-size:13px;color:#c9c9ce;line-height:1.6;margin-top:8px;word-break:keep-all}
.mg-note b{color:#fff}
.mg-src{font-size:11px;color:#8a8a90;margin-top:14px;line-height:1.5;word-break:break-all}
.mg-src a{text-decoration:underline;text-underline-offset:2px}.mg-src a:hover{color:#fff}
.mg-list{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.35)}
.mg-list li{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:baseline;font-size:13px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.mg-list li .r{color:var(--red);font-weight:700}
@media(max-width:700px){.mg-list li{grid-template-columns:auto 1fr}.mg-list li>span:last-child{grid-column:1/-1}}
.mg-foot{font-size:11px;color:#9a9aa0;line-height:1.55;margin-top:8px;word-break:keep-all}

/* ===== 거버넌스 · 국외 (ASOIF 국제연맹 평가) ===== */
.gi-bars{max-height:none}
.gi-bars .hb{grid-template-columns:64px 1fr 40px}
.gi-detail{font-size:12px;line-height:1.6;color:var(--on-dark);margin-top:14px;word-break:keep-all}
.gi-foot{font-size:11px;line-height:1.55;color:#9a9aa0;margin-top:10px;word-break:keep-all}
.gi-table .tr{grid-template-columns:64px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.gi-gold{color:#fff;font-weight:700}
.gi-table .c{font-weight:700}
.gi-table .gi-A1{color:var(--red)}
.gi-none{color:#6e6e74}
.gi-points{margin:10px 0 0;padding:0;list-style:none;counter-reset:gp;border-top:1px solid rgba(255,255,255,.35)}
.gi-points li{counter-increment:gp;position:relative;padding:12px 0 12px 34px;font-size:14px;line-height:1.6;border-bottom:1px solid rgba(255,255,255,.12);word-break:keep-all}
.gi-points li::before{content:counter(gp,decimal-leading-zero);position:absolute;left:0;top:12px;font-weight:900;color:var(--red)}
#giSum .gi-bars{max-width:640px}
#giTable,#giPoints{margin-top:24px}