/* 시안 C — 밝은 포털 · 매거진 (site.css 위에 덧씌움, 모바일 우선) */
:root{
  --bg:#f4f5f8; --bg2:#ffffff; --surface:#ffffff; --surface2:#eef0f4;
  --line:rgba(17,20,30,.12); --line2:rgba(17,20,30,.08);
  --gold:#ff4f2b; --gold2:#e5401d; --gold-d:#c2310f;      /* 주조색: 코랄 레드 */
  --accent2:#5b4bff; --pet:#13a383;
  --text:#14161c; --muted:#555b69; --faint:#7d8391;
  --red:#e5401d; --green:#13a383; --blue:#3b6fe0;
  --r:12px; --r-lg:16px; --shadow:0 6px 24px rgba(20,25,40,.08);
  --serif:'Pretendard Variable',Pretendard,'Noto Sans KR',system-ui,sans-serif;
}
body{background:var(--bg);color:var(--text)}
body::before{display:none}
h1,h2,h3{font-family:var(--sans);font-weight:800;letter-spacing:-.025em;color:#0f1115}
a{color:var(--blue)}

/* 헤더: 흰 바탕 + 모바일에서도 보이는 가로 스크롤 메뉴 */
.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.header-in{flex-wrap:wrap;height:auto;min-height:60px;row-gap:0}
.logo{color:#0f1115;font-family:var(--sans);font-weight:900;letter-spacing:-.03em}
.logo-mark{border:0;background:var(--gold);color:#fff;box-shadow:none;border-radius:10px;font-family:'Noto Serif KR',serif}
.main-nav{display:flex;order:3;flex:1 0 100%;margin:0 -16px;padding:0 12px 8px;gap:4px;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{color:#30343e;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--surface2)}
.main-nav a:hover,.main-nav a[aria-current]{color:#fff;background:#14161c;text-decoration:none}
@media (min-width:1080px){.header-in{flex-wrap:nowrap;height:64px}.main-nav{order:0;flex:1;margin:0 0 0 8px;padding:0}.main-nav a{background:transparent}}
.drawer summary{border-color:var(--line);border-radius:12px}
.drawer summary span{background:#14161c}
.drawer-panel{background:#fff;top:100%;box-shadow:0 20px 40px rgba(20,25,40,.12)}
.drawer-panel nav a{background:var(--surface2);color:var(--text)}
.menu-group h3{color:var(--gold2)}
.menu-group a{color:var(--muted)}
.lock{color:var(--muted)}

/* 버튼 */
.btn,.btn-sm{border-radius:12px}
.gold{background:var(--gold);color:#fff}
.gold:hover{background:var(--gold-d)}
.ghost{background:#fff;color:var(--text);border-color:var(--line)}
.ghost:hover{border-color:#14161c;color:#14161c}
.dark{background:#14161c;color:#fff;border-color:#14161c}
.danger{background:#ffe9e4;color:#b42d10;border-color:#ffc4b6}
.btn-kakao{color:#191600}
.todo-tag{background:rgba(0,0,0,.1)}

/* 히어로: 매거진 커버 (왼쪽 글, 오른쪽 이미지 카드) */
.hero{background:#fff;border-bottom:1px solid var(--line)}
.hero::after{display:none}
.hero-img{opacity:1;inset:auto;top:16px;left:16px;right:16px;width:calc(100% - 32px);height:210px;border-radius:18px;object-position:center 45%;box-shadow:var(--shadow)}
.hero-in{padding:246px 0 32px}
.hero h1{color:#0f1115;text-shadow:none;font-size:clamp(2rem,7vw,3.2rem);letter-spacing:-.04em}
.hero h1 em{color:var(--gold)}
.hero .lead{color:var(--muted);text-shadow:none}
.hero .kicker{display:inline-block;background:#ffebe6;color:var(--gold2);padding:4px 12px;border-radius:999px;letter-spacing:0;font-weight:800}
@media (min-width:860px){
  .hero-img{top:32px;bottom:32px;height:calc(100% - 64px);left:auto;right:max(16px,calc((100% - 1120px)/2));width:min(540px,46%)}
  .hero-in{padding:64px 0 64px;min-height:400px}
  .hero .hero-in>*{max-width:min(500px,calc(100% - min(540px,46%) - 48px))}
}

.page-head{background:#fff;border-bottom:1px solid var(--line)}
.kicker{color:var(--gold2);letter-spacing:.02em;font-weight:800;text-transform:none}
.lead{color:var(--muted)}

/* 섹션 제목: 굵은 매거진 헤드라인 */
.section{padding:28px 0}
.section-head{align-items:center}
.section-head h2{font-size:clamp(1.3rem,3.6vw,1.65rem)}
.section-head h2::before{width:8px;height:22px;border-radius:3px;background:var(--gold);box-shadow:none;margin-right:10px;vertical-align:-3px}
.more{color:#30343e;background:#fff;border:1px solid var(--line);padding:4px 12px;border-radius:999px;font-size:.85rem;font-weight:600}
.more:hover{text-decoration:none;border-color:#14161c}

/* 카드: 흰 카드 + 그림자 + 살짝 떠오르기 */
.card{background:#fff;border:1px solid var(--line2);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,25,40,.12);border-color:var(--line2)}
.card h3{font-size:1.08rem;line-height:1.4}
.card h3 a{color:#0f1115}
.card h3 a:hover{color:var(--gold2);text-decoration:none}
.card-img{background:var(--surface2)}
.textcard{background:linear-gradient(135deg,#ff6a3d,#ff3d6e 55%,#7b5cff);color:#fff;font-family:var(--sans);font-weight:800;font-size:1.15rem;border-bottom:0}
.textcard small{color:rgba(255,255,255,.85)}
.credit,.credit a{color:var(--faint)}
.badge{background:#ffebe6;color:#c2310f;border-color:transparent;border-radius:6px}
.badge.sample{background:#e8edff;color:#2d4fb8;border-color:transparent}
.badge.ad{background:#ffe9e4;color:#b42d10;border-color:transparent}
.badge.green{background:#ddf5ee;color:#0b6e57;border-color:transparent}
.badge.muted{background:var(--surface2);color:var(--muted);border-color:transparent}
.badge.red{background:#ffe1d9;color:#b42d10;border-color:transparent}
.notice{background:#fff8e6;border-color:#f3dc9b;color:#4a3d12}
.notice.blue{background:#eef2ff;border-color:#c9d4ff;color:#1f2f6b}
.notice.red{background:#fff0ec;border-color:#ffc4b6;color:#7a210c}
.ad-label{background:#fff0ec;border-color:#ffc4b6;color:#8f260c}
.cta-band{background:linear-gradient(120deg,#14161c,#2a2f3d);border:0;color:#fff}
.cta-band h2{color:#fff}
.cta-band .muted{color:#c9cdd6}

/* 지금 뜨는 이슈: 포털식 순위 */
.rank{border-radius:8px;background:transparent;border:0;color:#30343e;font-family:var(--sans);font-size:1.1rem;font-style:italic}
.trend-list li:nth-child(-n+3) .rank{background:transparent;color:var(--gold)}
.trend-list li{border-bottom:1px solid var(--line2);padding:10px 0}
.kw a{color:#0f1115}
.empty{color:var(--muted);border-color:var(--line);background:#fff}

.ep-num{color:var(--gold2)}
.series-cover{border:0;box-shadow:var(--shadow);border-radius:20px}
.ep-list a{background:#fff;color:var(--text);border-color:var(--line2)}
.ep-list a[aria-current]{border-color:var(--gold)}

.post-list{border-top:2px solid #14161c;background:#fff;border-radius:0 0 var(--r) var(--r)}
.post-list li{border-bottom-color:var(--line2);padding:12px 12px}
.post-list li.pinned{background:#fff6f3}
.post-list .t a{color:#0f1115}
.post-list .t a:hover{color:var(--gold2)}
.post-list .info{color:var(--faint)}
.board-side{background:#fff;border-radius:var(--r-lg);padding:8px 16px;box-shadow:var(--shadow)}
.pager a,.pager span{background:#fff;color:var(--muted);border-color:var(--line)}
.pager span[aria-current]{background:#14161c;color:#fff;border-color:#14161c}
.cafe-link{background:#e9fbf1;border-color:#b5ebcd}

input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=date],input[type=url],input[type=number],select,textarea{background:#fff;color:var(--text);border-color:rgba(17,20,30,.18)}
.search input{padding:8px 12px}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,79,43,.15)}
.err{color:#c2310f}
.form-error{background:#fff0ec;border-color:#ffc4b6;color:#7a210c}
.form-ok{background:#e6f7f1;border-color:#a8e3cf;color:#0b5745}
.chip{background:#fff;color:var(--muted);border-color:var(--line)}
.chip[aria-pressed=true],.chip.on,.chip:has(input:checked){background:#14161c;border-color:#14161c;color:#fff}
.check input{accent-color:var(--gold)}
th{background:var(--surface2);color:#0f1115}
.fortune-card{background:linear-gradient(135deg,#fff3ec,#f1edff);color:var(--text);border-color:var(--line2)}
.fortune-card blockquote{color:#4b3bd1;font-family:var(--sans);font-weight:800}
.avatar{background:var(--surface2);color:var(--gold2)}
.steps>li{background:#fff;box-shadow:var(--shadow)}
.steps>li::before{background:var(--gold);color:#fff}
.steps ul{color:var(--muted)}
.banner-status{background:#fff8e6;border-bottom-color:#f3dc9b}
.banner-status.warn{background:#fff0ec}
.dday.soon{background:var(--gold)}

/* 함께해요(반려동물) 강조: 초록 포인트 */
.theme-c aside .section-head h2[style]::before{background:var(--pet)}

.site-footer{background:#fff;border-top:1px solid var(--line)}
.site-footer .logo{color:#0f1115}
.footer-links a{color:var(--muted)}
.theme-switch a{background:#fff}
.theme-switch a[aria-current]{background:#14161c;color:#fff;border-color:#14161c}
:focus-visible{outline-color:#3b6fe0}
.skip{background:#14161c;color:#fff}

.series-hero{background:#fff;border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.series-hero h2{font-size:clamp(1.4rem,3.6vw,1.9rem)}