/* =========================================================
   DNK KOREA — Viral / Blog Marketing Content Site (JP)
   Modern Business Theme
   ========================================================= */

:root{
  --brand-900:#0b1f3a;
  --brand-800:#12325c;
  --brand-700:#1a4b8c;
  --brand-600:#2563c9;
  --brand-500:#3b82f6;
  --brand-100:#e3edfb;
  --brand-50:#f2f7fe;

  --accent-600:#0f9d8f;
  --accent-100:#e0f5f2;

  --warn-600:#c2410c;
  --warn-50:#fff5ed;

  --ink-900:#0f172a;
  --ink-700:#334155;
  --ink-600:#475569;
  --ink-400:#94a3b8;
  --line:#e2e8f0;
  --line-soft:#eef2f7;
  --bg:#ffffff;
  --bg-soft:#f7f9fc;

  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow-md:0 4px 6px -1px rgba(15,23,42,.07), 0 10px 24px -8px rgba(15,23,42,.12);
  --shadow-lg:0 12px 32px -12px rgba(15,23,42,.22);

  --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic",
             "Noto Sans JP", "Meiryo", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap:760px;
  --wrap-wide:1120px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-jp);
  font-size:17px;
  line-height:1.95;
  color:var(--ink-900);
  background:var(--bg);
  font-feature-settings:"palt" 1;
  letter-spacing:.01em;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--brand-700); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.wrap-wide{max-width:var(--wrap-wide); margin:0 auto; padding:0 20px}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  max-width:var(--wrap-wide); margin:0 auto; padding:0 20px;
  height:62px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; color:var(--brand-900)}
.logo:hover{text-decoration:none}
.logo__mark{
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-800));
  color:#fff; font-size:13px; font-weight:800;
  display:grid; place-items:center; letter-spacing:0;
}
.logo__text{font-size:16px}
.logo__text small{display:block; font-size:10px; font-weight:600; color:var(--ink-400); letter-spacing:.14em}

.nav{display:flex; align-items:center; gap:22px}
.nav a{font-size:14px; font-weight:600; color:var(--ink-600)}
.nav a:hover{color:var(--brand-700); text-decoration:none}
.nav .btn-sm{
  font-size:13px; font-weight:700; color:#fff;
  background:var(--brand-700); padding:8px 16px; border-radius:999px;
}
.nav .btn-sm:hover{background:var(--brand-800); text-decoration:none}
@media(max-width:820px){ .nav a:not(.btn-sm){display:none} }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--brand-50) 0%,#ffffff 60%);
  border-bottom:1px solid var(--line-soft);
  padding:44px 0 0;
}
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:12.5px; color:var(--ink-400); margin-bottom:16px;
}
.tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--brand-700); background:var(--brand-100);
  padding:4px 11px; border-radius:999px;
}
.tag--pr{color:var(--warn-600); background:var(--warn-50)}
.tag--accent{color:var(--accent-600); background:var(--accent-100)}

.hero h1{
  font-size:clamp(25px,4.6vw,38px);
  line-height:1.42; font-weight:800; letter-spacing:-.01em;
  margin:0 0 18px; color:var(--brand-900);
}
.hero__lead{
  font-size:17px; color:var(--ink-700); margin:0 0 26px; line-height:1.9;
}
.hero__figure{margin:0; padding-bottom:44px}
.hero__figure img{border-radius:var(--radius); box-shadow:var(--shadow-md)}
figcaption{font-size:12.5px; color:var(--ink-400); margin-top:9px; line-height:1.7}

/* ---------- Answer box (GEO) ---------- */
.answer-box{
  background:var(--brand-900);
  color:#e8eefb;
  border-radius:var(--radius);
  padding:26px 26px 24px;
  margin:34px 0;
  box-shadow:var(--shadow-lg);
}
.answer-box h2{
  font-size:14px; font-weight:700; letter-spacing:.1em;
  color:#7fb0ff; margin:0 0 14px; text-transform:uppercase;
  border:0; padding:0;
}
.answer-box p{margin:0 0 12px; font-size:16.5px; line-height:1.9; color:#f1f5fd}
.answer-box p:last-child{margin-bottom:0}
.answer-box strong{color:#fff; font-weight:700}
.answer-box ol,.answer-box ul{margin:12px 0 0; padding-left:20px}
.answer-box li{margin-bottom:8px; font-size:16px; color:#dbe6fa}
.answer-box li:last-child{margin-bottom:0}

/* ---------- TOC ---------- */
.toc{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
  padding:22px 24px;
  margin:34px 0;
}
.toc h2{
  font-size:14px; font-weight:800; letter-spacing:.08em; color:var(--ink-600);
  margin:0 0 12px; border:0; padding:0;
}
.toc ol{margin:0; padding-left:20px; counter-reset:none}
.toc li{margin-bottom:8px; font-size:15px; line-height:1.7}
.toc li:last-child{margin-bottom:0}
.toc a{color:var(--ink-700); font-weight:600}
.toc a:hover{color:var(--brand-700)}

/* ---------- Article ---------- */
.article{padding:8px 0 20px}
.article h2{
  font-size:clamp(21px,3.4vw,26px); font-weight:800; line-height:1.55;
  color:var(--brand-900); margin:52px 0 18px;
  padding-bottom:12px; border-bottom:2px solid var(--brand-100);
  scroll-margin-top:80px;
}
.article h3{
  font-size:19px; font-weight:700; line-height:1.6;
  color:var(--brand-800); margin:38px 0 14px;
  padding-left:13px; border-left:4px solid var(--brand-500);
  scroll-margin-top:80px;
}
.article h4{
  font-size:16.5px; font-weight:700; color:var(--ink-900); margin:28px 0 10px;
}
.article p{margin:0 0 20px}
.article strong{font-weight:700; color:var(--brand-800)}
.article em{font-style:normal; background:linear-gradient(transparent 62%, #ffe9a8 62%); font-weight:600}

.article figure{margin:32px 0}
.article figure img{border-radius:var(--radius); box-shadow:var(--shadow-sm)}

.article ul,.article ol{margin:0 0 22px; padding-left:22px}
.article li{margin-bottom:10px}

blockquote{
  margin:28px 0; padding:18px 22px;
  background:var(--brand-50); border-left:4px solid var(--brand-600);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--brand-800); font-size:16.5px; line-height:1.85;
}
blockquote p{margin:0}
blockquote p+p{margin-top:10px}

/* ---------- Callouts ---------- */
.callout{
  border:1px solid var(--line); border-left:4px solid var(--accent-600);
  background:#fbfdfd; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:20px 22px; margin:30px 0;
}
.callout__title{
  font-size:13.5px; font-weight:800; letter-spacing:.06em;
  color:var(--accent-600); margin:0 0 10px;
}
.callout p:last-child{margin-bottom:0}
.callout--warn{border-left-color:var(--warn-600); background:var(--warn-50)}
.callout--warn .callout__title{color:var(--warn-600)}
.callout--source{border-left-color:var(--ink-400); background:var(--bg-soft)}
.callout--source .callout__title{color:var(--ink-600)}
.callout--source p{font-size:14.5px; color:var(--ink-600); line-height:1.8}

/* ---------- Checklist ---------- */
.checklist{list-style:none; padding:0; margin:26px 0}
.checklist li{
  position:relative; padding:14px 16px 14px 48px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-bottom:10px; background:#fff; font-size:16px; line-height:1.8;
  box-shadow:var(--shadow-sm);
}
.checklist li::before{
  content:"✓"; position:absolute; left:16px; top:14px;
  width:22px; height:22px; border-radius:6px;
  background:var(--brand-100); color:var(--brand-700);
  font-size:13px; font-weight:800; display:grid; place-items:center;
}
.checklist--warn li::before{content:"!"; background:var(--warn-50); color:var(--warn-600)}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; margin:28px 0; -webkit-overflow-scrolling:touch}
table{
  width:100%; border-collapse:collapse; font-size:15.5px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; min-width:480px;
}
caption{
  caption-side:top; text-align:left; font-size:13.5px; font-weight:700;
  color:var(--ink-600); padding-bottom:10px;
}
th,td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line-soft); line-height:1.7}
thead th{
  background:var(--brand-900); color:#fff; font-weight:700; font-size:14.5px;
  letter-spacing:.02em; border-bottom:0;
}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--bg-soft)}
tbody th{font-weight:600; color:var(--ink-900)}
td.is-high{color:var(--brand-700); font-weight:700}
td.is-mid{color:var(--accent-600); font-weight:700}
td.is-cond{color:var(--warn-600); font-weight:700}

/* ---------- FAQ ---------- */
.faq{margin:34px 0}
.faq details{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-bottom:12px; background:#fff; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.faq summary{
  cursor:pointer; list-style:none; padding:17px 50px 17px 20px;
  font-weight:700; font-size:16px; color:var(--brand-900); position:relative;
  line-height:1.7;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:20px; font-weight:400; color:var(--brand-600); transition:transform .2s;
}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq__body{padding:16px 20px 20px; color:var(--ink-700); font-size:16px; line-height:1.9}
.faq__body p{margin:0 0 12px}
.faq__body p:last-child{margin:0}

/* ---------- Summary card ---------- */
.summary{
  background:linear-gradient(160deg,var(--brand-50),#fff);
  border:1px solid var(--brand-100); border-radius:var(--radius);
  padding:28px 26px; margin:40px 0;
}
.summary h2{margin:0 0 16px; border:0; padding:0; font-size:19px; color:var(--brand-900)}
.summary ol{margin:0; padding-left:22px}
.summary li{margin-bottom:12px; font-size:16.5px; line-height:1.85}
.summary li:last-child{margin-bottom:0}

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(140deg,var(--brand-900),var(--brand-700));
  border-radius:var(--radius); color:#fff;
  padding:36px 30px; margin:48px 0 20px; text-align:center;
  box-shadow:var(--shadow-lg);
}
.cta h2{margin:0 0 10px; font-size:22px; color:#fff; border:0; padding:0; line-height:1.55}
.cta p{margin:0 auto 24px; color:#c9dcfa; font-size:16px; max-width:520px; line-height:1.85}
.cta__badge{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.08em;
  background:rgba(255,255,255,.14); color:#a8caff;
  padding:5px 14px; border-radius:999px; margin-bottom:16px;
}
.cta__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px; max-width:520px; margin:0 auto;
}
.cta__item{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm); padding:16px 14px; text-align:left;
}
.cta__item span{
  display:block; font-size:11.5px; letter-spacing:.1em; color:#8fb8f5;
  font-weight:700; margin-bottom:5px;
}
.cta__item a,.cta__item strong{
  color:#fff; font-size:16px; font-weight:700; word-break:break-all;
}
.cta__item a:hover{color:#bcd6ff}

/* ---------- Tags ---------- */
.tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:32px 0; padding-top:26px; border-top:1px solid var(--line);
}
.tags a,.tags span{
  font-size:13px; color:var(--ink-600); background:var(--bg-soft);
  border:1px solid var(--line); padding:5px 12px; border-radius:999px;
}
.tags a:hover{background:var(--brand-100); color:var(--brand-700); text-decoration:none}

/* ---------- Related ---------- */
.related{margin:44px 0}
.related h2{font-size:19px; margin:0 0 18px; border:0; padding:0; color:var(--brand-900)}
.related__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.related__card{
  display:block; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:18px 20px; background:#fff; transition:.18s; box-shadow:var(--shadow-sm);
}
.related__card:hover{
  border-color:var(--brand-500); box-shadow:var(--shadow-md);
  transform:translateY(-2px); text-decoration:none;
}
.related__card span{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  color:var(--brand-600); margin-bottom:7px;
}
.related__card strong{display:block; font-size:15.5px; line-height:1.65; color:var(--ink-900); font-weight:700}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:13px; color:var(--ink-400); padding:16px 0 0}
.crumb a{color:var(--ink-600)}
.crumb span{margin:0 7px; color:var(--line)}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--brand-900); color:#9fb4d4; margin-top:60px;
  padding:44px 0 34px; font-size:14.5px; line-height:1.9;
}
.site-footer__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:28px; margin-bottom:30px;
}
.site-footer h3{
  font-size:13px; letter-spacing:.1em; color:#fff; margin:0 0 12px; font-weight:700;
}
.site-footer a{color:#bcd0ec}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin-bottom:8px}
.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  font-size:13px; color:#7d93b5; display:flex; flex-wrap:wrap; gap:10px;
  justify-content:space-between;
}

/* ---------- Index page ---------- */
.index-hero{
  background:linear-gradient(150deg,var(--brand-900) 0%,var(--brand-700) 100%);
  color:#fff; padding:66px 0 60px; text-align:center;
}
.index-hero h1{
  font-size:clamp(27px,5vw,42px); margin:0 0 18px; font-weight:800; line-height:1.45;
}
.index-hero p{
  color:#c5d9f8; font-size:17px; max-width:640px; margin:0 auto; line-height:1.9;
}
.index-hero .cta__badge{margin-bottom:20px}

.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px; padding:52px 0 20px;
}
.card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:.2s; box-shadow:var(--shadow-sm);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); text-decoration:none}
.card__thumb{aspect-ratio:16/9; overflow:hidden; background:var(--bg-soft)}
.card__thumb img{width:100%; height:100%; object-fit:cover}
.card__body{padding:20px 22px 24px; flex:1; display:flex; flex-direction:column}
.card__cat{
  font-size:11.5px; font-weight:700; letter-spacing:.09em;
  color:var(--brand-600); margin-bottom:9px;
}
.card__title{
  font-size:18px; font-weight:800; line-height:1.6; color:var(--ink-900); margin:0 0 10px;
}
.card__desc{font-size:14.5px; color:var(--ink-600); line-height:1.8; margin:0 0 16px; flex:1}
.card__more{font-size:14px; font-weight:700; color:var(--brand-700)}

.section-title{
  text-align:center; margin:60px 0 4px;
}
.section-title h2{
  font-size:26px; font-weight:800; color:var(--brand-900); margin:0 0 10px; border:0; padding:0;
}
.section-title p{color:var(--ink-600); margin:0; font-size:16px}

/* ---------- Utility ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.divider{border:0; border-top:1px solid var(--line); margin:44px 0}

@media(max-width:640px){
  body{font-size:16px; line-height:1.9}
  .hero{padding-top:30px}
  .answer-box,.summary,.cta{padding:22px 20px}
  .article h2{margin-top:42px}
  .cta{margin:38px 0 12px}
}

@media print{
  .site-header,.cta,.related,.site-footer,.toc{display:none}
  body{font-size:12pt}
}