/* ================================
   common.css (final)
   - Webfont: woff2 only + font-display: swap
   - PageSpeed 권고 반영 (렌더 차단 최소화 가정)
   - Navy 헤더/푸터 테마 (강제 오버라이드)
   ================================ */

/* Root variables */
:root {
  --header-h: 64px;

  /* Navy theme */
  --navy-700:#0b1f3a;   /* 메인 네이비 */
  --navy-600:#102a4d;   /* 다크모드/호버 네이비 */
  --on-navy:#ffffff;
  --on-navy-dim:rgba(255,255,255,.85);
}

/* ✅ Nanum Gothic – self-hosted (WOFF2 only) */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/font/NanumGothic-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/font/NanumGothic-Bold.woff2') format('woff2');
}
/* 필요할 때만 사용 */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/font/NanumGothic-ExtraBold.woff2') format('woff2');
}

/* ================================
   Reset & Base
   ================================ */
*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  font-family: 'Nanum Gothic', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  background-color:#ffffff;
  color:#333333;
  line-height:1.6;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* Wrapper */
.content-wrapper{ max-width:800px; margin:0 auto; padding:10px; text-align:left; }

/* ================================
   Dark mode (class + media)
   ================================ */
html.dark body{ background-color:#121212; color:#eee; }
html.dark a{ color:#3fa4fd; }

html.dark .section,
html.dark .icon-grid,
html.dark .icon-item{ background-color:#1a1a1a; color:#eee; }

/* ================================
   Headings & Titles
   ================================ */
.main-title{
  font-size:26px; font-weight:bold; margin-bottom:25px; margin-left:10px;
  position:relative; display:inline-block; z-index:0;
}
.main-title::after{
  content:''; position:absolute; left:-7.5%; right:-7.5%; bottom:1px; height:39%;
  background-color:#21d5ff; z-index:-1;
}

.sub-title-box{
  font-size:20px; font-weight:bold; margin-top:30px; margin-bottom:10px;
  color:#222; padding-left:12px; border-left:6px solid #546382;
}
.sub-title{
  font-size:20px; font-weight:bold; margin-top:30px; margin-bottom:10px; color:#222;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Nanum Gothic', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight:700; line-height:1.4; color:#222;
  margin-top:.8em; margin-bottom:.6em;
}
h1{ font-size:24px; color:#000; margin-bottom:20px; text-align:center; }
h2{ font-size:20px; margin-top:30px; margin-bottom:16px; border-bottom:none; }
h3{ font-size:18px; }
h4{ font-size:16px; }

/* ================================
   Text & Links
   ================================ */
.body-text{ font-size:16px; line-height:1.7; margin-bottom:15px; }
.small-text{ font-size:13px; color:#777; font-weight:normal; }
.note-center{ text-align:center; }
.note{ font-size:14px; color:#555; font-weight:normal; }

p{ margin-bottom:1em; line-height:1.7; }
a{ color:#007aff; text-decoration:none; }
a:hover{ text-decoration:underline; }
strong{ color:#0c2c78; }

/* Lists */
ul,ol{ padding-left:20px; margin-bottom:1em; }
li{ margin-bottom:6px; }

/* Tables */
table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:15px; }
th,td{ border:1px solid #ccc; padding:10px; text-align:left; }
th{ background-color:#f4f4f4; font-weight:600; }

/* Images */
img{ max-width:100%; height:auto; display:block; }

/* Inputs & Buttons */
input,select,textarea,button{
  font-family:'Nanum Gothic', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size:16px; padding:10px; border:1px solid #ccc; border-radius:6px; outline:none;
}
button{ cursor:pointer; background-color:#007aff; color:#fff; border:none; transition:background-color .2s; }
button:hover{ background-color:#005fcc; }

/* Code */
pre,code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  font-size:14px; background:#f9f9f9; padding:6px; border-radius:4px; overflow-x:auto;
}

/* ================================
   Prefers dark (system)
   ================================ */
@media (prefers-color-scheme: dark){
  html,body{ background-color:#121212; color:#e0e0e0; }
  h1,h2,h3,h4,h5,h6{ color:#fff; }
  a{ color:#4daeff; }
  table th{ background-color:#1e1e1e; }
  table th, table td{ border-color:#444; }
  input,select,textarea{ background-color:#1e1e1e; color:#e0e0e0; border-color:#444; }
  button{ background-color:#3399ff; }
  button:hover{ background-color:#1e88e5; }
  pre,code{ background-color:#1e1e1e; color:#f1f1f1; }
}

/* Class-based dark extras */
html.dark pre, html.dark code{ background-color:#1e1e1e; color:#f1f1f1; }

html.dark .main-title::after{ background-color:#0095ff; }
html.dark .sub-title-box, html.dark .sub-title{ color:#f1f1f1; border-left-color:#4daeff; }
html.dark .small-text{ color:#bbb; }
html.dark .note{ color:#ccc; }
html.dark a:hover{ color:#82c9ff; }
html.dark strong{ color:#4daeff; }
html.dark table th{ background-color:#1e1e1e; color:#f1f1f1; }
html.dark table td{ color:#e0e0e0; border-color:#444; }

/* ================================
   Link list
   ================================ */
.link-list{ list-style:none; padding:0; margin:20px 0; }
.link-list li{ margin-bottom:10px; }
.link-list a{
  display:flex; align-items:center; text-decoration:none; color:inherit;
  background-color:#f9f9f9; padding:10px 14px; border-radius:6px;
  transition:background-color .2s ease, transform .1s ease;
}
.link-list a:hover, .link-list a:focus{ background-color:#fff9cc; }
.link-list a:active{ background-color:#fff176; transform:scale(.97); }
.link-list span.number{ font-weight:bold; margin-right:10px; color:#546382; width:24px; text-align:right; }
.link-list span.text{ flex:1; }

html.dark .link-list a{ background-color:#1c1c1c; color:#e0e0e0; }
html.dark .link-list a:hover, html.dark .link-list a:focus{ background-color:#2b2b2b; }
html.dark .link-list span.number{ color:#4daeff; }

/* ================================
   Utility
   ================================ */
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.text-left{ text-align:left; }
.mt-1{ margin-top:8px; }
.mt-2{ margin-top:16px; }
.mt-3{ margin-top:24px; }
.mb-1{ margin-bottom:8px; }
.mb-2{ margin-bottom:16px; }
.mb-3{ margin-bottom:24px; }

/* ================================
   Coupang banner
   ================================ */
.coupang-banner-wrapper{
  width:100%; max-width:100%; overflow-x:auto; display:flex; justify-content:center;
}
.coupang-banner-wrapper iframe,
.coupang-banner-wrapper div{ max-width:100% !important; height:auto !important; }

/* ================================
   Copy URL button
   ================================ */
.copy-url-wrapper{ text-align:center; margin:40px 0; }
.copy-url-button{
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-size:15px; color:#032835;
}
.copy-url-msg{ margin-top:8px; font-size:13px; color:#032835; display:none; }
html.dark .copy-url-button, html.dark .copy-url-msg{ color:#90cdf4; }

/* ================================
   Layout: main + aside
   ================================ */
.page-grid{ max-width:1200px; margin:0 auto; padding:0 12px; }
.page-grid-inner{ display:block; }
.site-aside{ display:none; }

@media (min-width:1024px){
  .page-grid-inner{
    display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start;
  }
  .site-aside{
    display:block; position:sticky; top:calc(var(--header-h) + 16px); height:fit-content;
  }
}

/* Aside cards */
.aside-card{
  background:var(--card, #fff); border:1px solid #e6e6e6; border-radius:12px;
  padding:16px 18px; margin-bottom:16px;
}
.aside-card h3{ margin:0 0 10px 0; font-size:18px; color:#2b51ff; }

.aside-list{ list-style:none; margin:0; padding:0; }
.aside-list li{ padding:10px 0; border-top:1px solid #efefef; }
.aside-list li:first-child{ border-top:0; }
.aside-list a{ color:#111; text-decoration:none; }
.aside-list a:hover{ text-decoration:underline; }

/* Responsive helpers */
.only-desktop{ display:none; }
.only-mobile{ display:block; }
@media (min-width:1024px){
  .only-desktop{ display:block; }
  .only-mobile{ display:none; }
}

/* Mobile paddings */
@media (max-width:640px){
  .page-grid{ padding:0 8px; }
  .content-wrapper{ padding:0 8px; }
}

/* ================================
   MOST READ (mobile)
   ================================ */
.most-read-box{
  background:#f5f5f5; border-radius:10px; padding:16px; margin:24px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.most-read-box h3{ font-size:1.1rem; font-weight:800; color:#0c2c78; margin-bottom:12px; }
.most-read-box ul{ list-style:none; margin:0; padding:0; }
.most-read-box li{ margin-bottom:10px; line-height:1.4; }
.most-read-box a{ color:#007aff; text-decoration:none; font-weight:600; }
.most-read-box a:hover{ text-decoration:underline; }
.only-mobile{ display:none; }
@media (max-width:768px){ .only-mobile{ display:block; } }

/* ================================
   Ads (desktop only)
   ================================ */
.ad-card{ padding:0; }
.ad-card a{ display:block; border-radius:12px; overflow:hidden; border:1px solid #e5e7eb; background:#fff; }
.ad-card .ad-img{ display:block; width:100%; height:auto; }
.ad-card a:hover{ box-shadow:0 10px 24px rgba(0,0,0,.08); transform:translateY(-1px); transition:box-shadow .2s ease, transform .2s ease; }
@media (max-width:960px){ .ad-card{ display:none; } }

/* ================================
   NAVY THEME (Header & Footer)
   - 페이지 내 인라인 스타일을 덮어쓰기 위해 구체 셀렉터 + !important 사용
   ================================ */

/* Header / Topbar */
header.site-header,
.topbar,
.site-header {
  background:var(--navy-700) !important;
  color:var(--on-navy) !important;
  border-bottom:0 !important;
}
header.site-header a,
.topbar a,
.site-header a {
  color:var(--on-navy-dim) !important;
  text-decoration:none;
}
header.site-header a:hover,
.topbar a:hover,
.site-header a:hover {
  color:var(--on-navy) !important;
}

/* Logo / Hamburger icons (SVG 가독성) */
.site-logo svg{ fill:var(--on-navy) !important; }
.hamburger span,
.menu-toggle span{ background:var(--on-navy) !important; }

/* Footer */
body > footer{
  background:var(--navy-700);
  color:#fff;                    /* 본문 텍스트도 흰색 */
  border-top:0;
}

body > a{ color:#fff; text-decoration:none; } 
body > a:hover,
body > a:focus{ color:#fff; text-decoration:underline; }

/* Dark mode: navy 유지 */
html.dark footer{ background:var(--navy-600); color:#fff; }
html.dark footer a{ color:#fff; }
html.dark footer a:hover,
html.dark footer a:focus{ color:#fff; text-decoration:underline; }