@charset "UTF-8";

:root {
  --ink: #181b18;
  --paper: #f4f1e8;
  --paper-deep: #e7e0d1;
  --red: #9c352c;
  --gold: #b68b43;
  --pine: #294d43;
  --muted: #6e7069;
}

body { overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:"Noto Sans JP",sans-serif; }
.container { width:calc(100% - 40px); max-width:1120px; margin-inline:auto; padding-inline:0; }
.main-content { padding-top:0; }

.korean-header { position:absolute; inset:0 0 auto; z-index:20; background:rgba(12,17,14,.78); border:0; border-bottom:1px solid rgba(255,255,255,.12); box-shadow:0 10px 32px rgba(0,0,0,.14); color:#fff; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.korean-header .container { height:72px; min-height:72px; }
.korean-header .site-logo,.korean-header .site-nav a { color:#fff; }
.korean-header .site-logo { gap:11px; white-space:nowrap; font-family:"Noto Serif JP",serif; font-size:1.02rem; letter-spacing:.03em; }
.korean-header .site-logo::before { content:"韓"; display:grid; flex:0 0 36px; place-items:center; width:36px; height:36px; border:1px solid rgba(216,189,131,.86); background:rgba(216,189,131,.08); color:#e6ce99; font-family:"Noto Serif JP",serif; font-size:.96rem; line-height:1; }
.korean-header .site-logo span { display:block; }
.korean-header .site-nav { gap:4px; }
.korean-header .site-nav a { position:relative; padding:9px 13px; border:1px solid transparent; border-radius:3px; font-size:.8rem; letter-spacing:.02em; opacity:.78; }
.korean-header .site-nav a:hover { border-color:rgba(216,189,131,.28); background:rgba(255,255,255,.07); color:#fff; opacity:1; }
.korean-header .site-nav a:focus-visible,.korean-header .site-logo:focus-visible,.korean-header .nav-toggle:focus-visible { outline:2px solid #d8bd83; outline-offset:4px; }
.korean-header .nav-toggle { position:relative; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:3px; color:transparent; font-size:0; line-height:1; }
.korean-header .nav-toggle::before,.korean-header .nav-toggle::after { content:""; position:absolute; left:10px; width:20px; height:2px; background:#fff; transition:transform .2s ease,top .2s ease,box-shadow .2s ease; }
.korean-header .nav-toggle::before { top:13px; box-shadow:0 7px 0 #fff,0 14px 0 #fff; }
.korean-header .nav-toggle::after { top:20px; opacity:0; }
body.nav-open .korean-header .nav-toggle::before { top:20px; box-shadow:none; transform:rotate(45deg); }
body.nav-open .korean-header .nav-toggle::after { opacity:1; transform:rotate(-45deg); }
.breadcrumb { display:none; }

.korean-hero,.korean-drama-hero { min-height:720px; display:flex; align-items:flex-end; position:relative; isolation:isolate; padding:150px 0 92px; background-image:linear-gradient(90deg,rgba(12,14,12,.86) 0%,rgba(12,14,12,.57) 40%,rgba(12,14,12,.08) 75%),linear-gradient(0deg,rgba(12,14,12,.78),transparent 48%),url('../img/hero-three-kingdoms.png'); background-size:cover; background-position:center; color:#fff; }
.korean-drama-hero { min-height:460px; padding:120px 0 64px; background-position:center 48%; }
.korean-hero::after,.korean-drama-hero::after { content:""; position:absolute; inset:auto 0 0; height:7px; background:linear-gradient(90deg,#263f48 0 25%,#8d3a32 25% 50%,#b08a43 50% 75%,#385642 75%); }
.korean-hero .container,.korean-drama-hero .container { margin:0 auto; text-align:left; }
.hero-badge { display:inline-flex; align-items:center; gap:12px; padding:0; background:none; border:0; color:#d8bd83; font-size:.7rem; letter-spacing:.2em; }
.hero-badge::before { content:""; width:38px; height:1px; background:#d8bd83; }
.korean-hero h1,.korean-drama-hero h1 { max-width:760px; margin:20px 0 18px; color:#fff; font-family:"Noto Serif JP",serif; font-size:clamp(2.7rem,6vw,5.2rem); line-height:1.12; letter-spacing:0; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.korean-drama-hero h1 { font-size:clamp(2.4rem,5vw,4.3rem); }
.hero-subtitle { max-width:650px; margin:0; color:rgba(255,255,255,.8); font-size:1rem; line-height:2; }
.hero-actions { align-items:stretch; justify-content:flex-start; gap:12px; margin-top:36px; }
.hero-cta,.hero-cta-secondary { min-width:188px; min-height:54px; justify-content:center; padding:14px 22px; border-radius:3px; text-align:center; font-size:.88rem; letter-spacing:.04em; }
.hero-cta::after,.hero-cta-secondary::after { content:"→"; margin-left:12px; transition:transform .2s ease; }
.hero-cta:hover::after,.hero-cta-secondary:hover::after { transform:translateX(4px); }
.hero-cta { background:linear-gradient(135deg,#aa4437,#873027); border:1px solid #bd5b4d; box-shadow:0 10px 28px rgba(83,20,16,.3); }
.hero-cta:hover { background:linear-gradient(135deg,#b94d3f,#96362c); transform:translateY(-2px); box-shadow:0 14px 34px rgba(83,20,16,.38); }
.hero-cta-secondary { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.42); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hero-cta-secondary:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.72); color:#fff; transform:translateY(-2px); }

.section { padding:88px 0; background:transparent; }
.section-alt { background:#e9e4d9; }
.section h2 { position:relative; margin:0 0 42px; padding-bottom:18px; color:var(--ink); font-family:"Noto Serif JP",serif; font-size:clamp(1.8rem,3vw,2.5rem); text-align:left; letter-spacing:0; }
.section h2::after { content:""; position:absolute; left:0; bottom:0; width:52px; height:3px; background:var(--red); }
.section-lead { max-width:680px; margin:-18px 0 34px; color:#5e605b; line-height:1.9; }

.states-overview { padding-top:76px; }
.states-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr); gap:52px; align-items:center; }
.states-map { margin:0; padding:24px; background:#e9e4d9; border:1px solid #c9c1b2; }
.states-map-image { position:relative; overflow:hidden; }
.states-map-image img { display:block; width:100%; height:auto; }
.states-map figcaption { margin-top:12px; color:#6e7069; font-size:.76rem; line-height:1.7; }
.map-label { position:absolute; transform:translate(-50%,-50%); padding:6px 10px; border:1px solid rgba(255,255,255,.55); background:rgba(24,27,24,.62); color:#fff; font-family:"Noto Serif JP",serif; font-size:clamp(.8rem,2vw,1.15rem); font-weight:700; letter-spacing:.06em; line-height:1; white-space:nowrap; text-shadow:0 1px 4px rgba(0,0,0,.45); }
.map-goguryeo-label { left:49%; top:30%; }
.map-baekje-label { left:40%; top:66%; }
.map-silla-label { left:66%; top:63%; }
.map-gaya-label { left:55%; top:78%; font-size:clamp(.72rem,1.7vw,1rem); }
.states-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid #c9c1b2; background:#c9c1b2; }
.state-summary { min-height:154px; padding:24px; background:#f7f4ed; border-top:4px solid var(--pine); }
.state-summary { color:var(--ink); transition:background .2s ease; }
.state-summary:hover { color:var(--ink); background:#fff; }
.state-summary h3 { margin:0 0 10px; font-family:"Noto Serif JP",serif; font-size:1.25rem; }
.state-summary p { margin:0; color:#5e605b; font-size:.85rem; line-height:1.8; }
.state-summary p strong { display:block; color:var(--ink); font-size:.88rem; }
.state-goguryeo { border-color:#314d5a; }
.state-baekje { border-color:#963c35; }
.state-silla { border-color:#b18b43; }
.state-gaya { border-color:#3e654d; }

.state-hero,.people-hero { min-height:460px; padding:126px 0 66px; background-position:center 48%; }
.state-hero h1,.people-hero h1 { font-size:clamp(2.4rem,5vw,4.3rem); }
.state-kicker { margin:0 0 12px; color:#d8bd83; font-size:.75rem; letter-spacing:.16em; }
.state-facts { display:grid; grid-template-columns:repeat(3,1fr); margin:0; border:1px solid #c9c1b2; background:#c9c1b2; }
.state-facts div { padding:22px 24px; background:#f7f4ed; }
.state-facts dt { color:var(--muted); font-size:.72rem; }
.state-facts dd { margin:5px 0 0; font-family:"Noto Serif JP",serif; font-size:1.06rem; }
.state-content-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid #c9c1b2; background:#c9c1b2; }
.state-content-card { min-height:210px; padding:30px; background:#f7f4ed; }
.state-content-card h3 { margin:0 0 13px; font-family:"Noto Serif JP",serif; font-size:1.35rem; }
.state-content-card p { margin:0; color:#5e605b; font-size:.9rem; line-height:1.9; }
.person-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid #c9c1b2; background:#c9c1b2; }
.person-card { display:block; min-height:200px; padding:28px; background:#f7f4ed; border-top:4px solid var(--pine); color:var(--ink); }
.person-portrait { display:block; width:calc(100% + 56px); max-width:none; height:260px; margin:-28px -28px 24px; border-bottom:1px solid #c9c1b2; object-fit:cover; object-position:center 22%; }
.person-card:hover { background:#fff; color:var(--ink); }
.person-card h3 { margin:0 0 7px; font-family:"Noto Serif JP",serif; font-size:1.35rem; }
.person-card .person-period { display:block; margin-bottom:12px; color:var(--muted); font-size:.78rem; }
.person-card p { margin:0; color:#5e605b; font-size:.86rem; line-height:1.8; }
.person-card-goguryeo { border-color:#314d5a; }
.person-card-baekje { border-color:#963c35; }
.person-card-silla { border-color:#b18b43; }
.person-card-gaya { border-color:#3e654d; }
.people-filter-note { margin:-18px 0 34px; color:#5e605b; }

/* Original AI-generated ambience images: visual context only, never historical evidence. */
body:has(#gwanggaeto) .state-hero { background-image:linear-gradient(90deg,rgba(10,18,20,.9),rgba(10,18,20,.46)),url('../img/goguryeo-atmosphere-ai.png'); }
body:has(#geunchogo) .state-hero { background-image:linear-gradient(90deg,rgba(48,22,16,.88),rgba(48,22,16,.38)),url('../img/baekje-atmosphere-ai.png'); }
body:has(#jinheung) .state-hero { background-image:linear-gradient(90deg,rgba(32,29,15,.88),rgba(32,29,15,.36)),url('../img/silla-atmosphere-ai.png'); }
body:has(#suro) .state-hero { background-image:linear-gradient(90deg,rgba(16,30,24,.9),rgba(16,30,24,.42)),url('../img/gaya-atmosphere-ai.png'); }
body:has(.state-hero) .state-hero { background-size:cover; }

body:has(.state-hero) .state-content-card,
body:has(.state-hero) .person-card,
body:has(#goguryeo) .person-card { position:relative; overflow:hidden; isolation:isolate; }
body:has(.state-hero) .state-content-card { color:#fff; background-size:cover; background-position:center; }
body:has(.state-hero) .state-content-card::before,
body:has(.state-hero) .state-content-card::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg,rgba(10,14,12,.84),rgba(10,14,12,.58)); }
body:has(.state-hero) .state-content-card h3,
body:has(.state-hero) .state-content-card p { color:#fff; }
body:has(.state-hero) .state-content-card:nth-child(2),
body:has(.state-hero) .person-card:nth-child(2),
body:has(#goguryeo) .person-card:nth-child(2) { background-position:center; }
body:has(.state-hero) .state-content-card:nth-child(3),
body:has(.state-hero) .person-card:nth-child(3),
body:has(#goguryeo) .person-card:nth-child(3) { background-position:right center; }
body:has(#gwanggaeto) .state-content-card { background-image:url('../img/goguryeo-atmosphere-ai.png'); }
body:has(#geunchogo) .state-content-card { background-image:url('../img/baekje-atmosphere-ai.png'); }
body:has(#jinheung) .state-content-card { background-image:url('../img/silla-atmosphere-ai.png'); }
body:has(#suro) .state-content-card { background-image:url('../img/gaya-atmosphere-ai.png'); }
body:has(#goguryeo) a.person-card::after,
a.state-summary::after { content:"詳しく見る  →"; display:block; margin-top:18px; color:inherit; font-size:.78rem; font-weight:700; letter-spacing:.04em; }
body:has(#goguryeo) a.person-card::after { margin-top:16px; }
body:has(#goguryeo) a.person-card:hover::before { background:linear-gradient(135deg,rgba(10,14,12,.76),rgba(10,14,12,.42)); }

.stats-banner { margin-top:-42px; position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); padding:0; background:#1c211e; border:0; border-radius:0; box-shadow:0 18px 42px rgba(23,25,22,.16); }
.stat { min-height:118px; padding:25px 30px; border-right:1px solid rgba(255,255,255,.12); align-items:flex-start; }
.stat:last-child { border:0; }
.stat-num { color:#d1ae69; font-family:"Noto Serif JP",serif; font-size:2rem; }
.stat-label { color:rgba(255,255,255,.64); font-size:.72rem; }

.korean-text-grid,.link-grid { gap:0; border-top:1px solid #c9c1b2; border-left:1px solid #c9c1b2; }
.link-card { min-height:230px; padding:30px; border:0; border-right:1px solid #c9c1b2; border-bottom:1px solid #c9c1b2; border-radius:0; background:rgba(255,255,255,.28); box-shadow:none; }
.link-card:hover { transform:none; background:rgba(255,255,255,.68); box-shadow:none; }
.link-card h3 { margin:0 0 14px; font-family:"Noto Serif JP",serif; font-size:1.45rem; }
.link-card p { color:#5e605b; font-size:.9rem; line-height:1.9; }
.korean-text-grid .link-card:nth-child(1) { border-top:4px solid #314d5a; }
.korean-text-grid .link-card:nth-child(2) { border-top:4px solid #963c35; }
.korean-text-grid .link-card:nth-child(3) { border-top:4px solid #b18b43; }
.korean-text-grid .link-card:nth-child(4) { border-top:4px solid #3e654d; }

.card-grid { grid-template-columns:repeat(4,1fr); gap:18px; }
.busho-card { border:0; border-radius:0; background:#f7f4ed; box-shadow:none; }
.busho-card:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(30,31,27,.1); }
.busho-card-accent { height:5px; }
.busho-card-body { min-height:174px; padding:28px 24px; }
.busho-card h3 { font-family:"Noto Serif JP",serif; font-size:1.35rem; }
.busho-alias { color:var(--muted); }
.tag { border-radius:0; background:transparent; border:1px solid #c6bdad; color:#565951; }

.korean-timeline { position:relative; gap:0; max-width:900px; margin:0; padding-left:170px; }
.korean-timeline::before { content:""; position:absolute; left:126px; top:12px; bottom:12px; width:1px; background:#b9ad99; }
.korean-timeline-item { position:relative; display:block; min-height:150px; padding:8px 0 46px; background:none; border:0; border-radius:0; box-shadow:none; }
.korean-timeline-item::before { content:""; position:absolute; left:-49px; top:14px; width:11px; height:11px; background:var(--paper); border:3px solid var(--red); transform:rotate(45deg); }
.korean-timeline-year { position:absolute; left:-170px; top:7px; width:96px; color:var(--red); font-family:"Noto Serif JP",serif; font-size:1.15rem; text-align:right; }
.korean-timeline-item strong { font-family:"Noto Serif JP",serif; font-size:1.25rem; }
.korean-timeline-item p { margin-top:8px; color:#60625c; line-height:1.9; }

.korean-note { max-width:none; margin:0; padding:28px 30px; border:0; border-left:4px solid var(--red); background:rgba(255,255,255,.48); color:#4f514d; }
.section-more { text-align:left; }
.section-more a { color:var(--red); font-weight:700; }
.drama-guide-list { max-width:none; margin:0; grid-template-columns:repeat(2,1fr); gap:1px; background:#c8c0b1; border:1px solid #c8c0b1; }
.drama-guide-item { min-height:160px; padding:28px 32px; border:0; border-radius:0; background:#f4f1e8; box-shadow:none; }
.drama-history-links .link-card { min-height:170px; padding:26px 28px; }
#works, #history { padding:72px 0; }
.drama-guide-item h3 { font-family:"Noto Serif JP",serif; font-size:1.35rem; }

.korean-cta { padding:96px 0; background:radial-gradient(circle at 50% 0,rgba(182,139,67,.13),transparent 42%),linear-gradient(135deg,#171d19,#263129); color:#fff; }
.korean-cta::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.13; background-image:linear-gradient(45deg,transparent 48%,rgba(255,255,255,.22) 49%,rgba(255,255,255,.22) 51%,transparent 52%); background-size:28px 28px; }
.korean-cta .container { position:relative; z-index:1; }
.korean-cta h2 { font-family:"Noto Serif JP",serif; font-size:clamp(1.8rem,3.4vw,2.55rem); letter-spacing:.03em; }
.korean-cta p { max-width:720px; margin:0 auto 34px; color:rgba(255,255,255,.68); line-height:1.9; }
.korean-actions { display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; position:relative; }
.korean-actions .cta-button,.korean-actions .cta-button-secondary { display:inline-grid; grid-template-columns:40px auto 18px; align-items:center; gap:12px; min-width:258px; min-height:68px; padding:0 20px; border-radius:4px; font-size:.9rem; font-weight:700; letter-spacing:.03em; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.korean-actions .cta-sengoku { background:linear-gradient(135deg,#1e2d4a,#101a31); border:1px solid #c49a36; color:#edc973; }
.korean-actions .cta-sangokushi { background:linear-gradient(135deg,#702f3a,#3c2958); border:1px solid #a55a68; color:#f3dde1; }
.korean-actions .destination-icon { display:grid; place-items:center; width:38px; height:38px; border:1px solid currentColor; background:rgba(255,255,255,.05); }
.korean-actions .destination-icon svg { width:24px; height:24px; }
.korean-actions .cta-button::after,.korean-actions .cta-button-secondary::after { content:"→"; justify-self:end; transition:transform .2s ease; }
.korean-actions .cta-button:hover,.korean-actions .cta-button-secondary:hover { color:#fff; transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,0,0,.3); }
.korean-actions .cta-button:hover::after,.korean-actions .cta-button-secondary:hover::after { transform:translateX(4px); }
.site-footer { padding:56px 0 28px; background:#151815; }
.site-footer .footer-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:48px; margin-bottom:36px; }
.site-footer .footer-col { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.site-footer .footer-col h4 { margin-bottom:14px; color:#d8bd83; }
.site-footer .footer-col a { display:block; width:fit-content; padding:2px 0; color:rgba(255,255,255,.62); line-height:1.5; }
.site-footer .footer-col a:hover { color:#fff; }
.site-footer .footer-bottom { color:rgba(255,255,255,.38); }

@media (max-width:900px) {
  .container { width:calc(100% - 32px); }
  .korean-header { position:absolute; }
  .korean-header .nav-toggle { display:block; }
  .korean-header .site-nav { top:100%; padding:8px 16px 16px; background:rgba(22,29,24,.98); border-top:1px solid rgba(255,255,255,.12); box-shadow:0 14px 30px rgba(0,0,0,.3); }
  body:not(.nav-open) .korean-header .site-nav { display:none; }
  body.nav-open .korean-header .site-nav { display:flex; }
  .korean-header .site-nav a { padding:14px 10px; border:0; border-bottom:1px solid rgba(255,255,255,.1); border-radius:0; opacity:1; }
  .korean-header .site-nav a:last-child { border-bottom:0; }
  body.nav-open { overflow:hidden; }
  .korean-hero { min-height:680px; padding-bottom:70px; background-position:62% center; }
  .korean-drama-hero { min-height:500px; padding:110px 0 56px; background-position:62% center; }
  .stats-banner { grid-template-columns:repeat(2,1fr); }
  .stat { border-bottom:1px solid rgba(255,255,255,.12); }
  .card-grid { grid-template-columns:repeat(2,1fr); }
  .states-layout { grid-template-columns:1fr; gap:28px; }
  .state-facts { grid-template-columns:1fr; }
  .state-content-grid { grid-template-columns:1fr; }
  .person-list { grid-template-columns:repeat(2,1fr); }
  .drama-guide-list { grid-template-columns:1fr; }
  .site-footer .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
}

@media (max-width:560px) {
  .container { width:calc(100% - 28px); }
  .korean-header .container { height:64px; min-height:64px; }
  .korean-header .site-logo { gap:9px; font-size:.88rem; }
  .korean-header .site-logo::before { flex-basis:30px; width:30px; height:30px; font-size:.82rem; }
  .section { padding:64px 0; }
  .korean-hero { min-height:620px; background-position:68% center; }
  .korean-drama-hero { min-height:460px; padding:100px 0 48px; background-position:68% center; }
  #works, #history { padding:56px 0; }
  .korean-hero h1,.korean-drama-hero h1 { font-size:clamp(2.15rem,11vw,2.65rem); }
  .hero-subtitle { font-size:.9rem; line-height:1.8; }
  .hero-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .hero-actions .hero-cta,.hero-actions .hero-cta-secondary { width:100%; justify-content:center; }
  .korean-actions { display:grid; grid-template-columns:1fr; }
  .korean-actions .cta-button,.korean-actions .cta-button-secondary { width:100%; min-width:0; }
  .stats-banner { margin-top:-28px; }
  .stat { min-height:96px; padding:20px; }
  .stat-num { font-size:1.55rem; }
  .korean-text-grid,.link-grid,.card-grid { grid-template-columns:1fr; }
  .states-map { padding:14px; }
  .states-summary { grid-template-columns:1fr; }
  .person-list { grid-template-columns:1fr; }
  .person-portrait { height:clamp(260px,90vw,380px); object-position:center 20%; }
  .state-summary { min-height:0; padding:20px; }
  .link-card { min-height:auto; }
  .korean-timeline { padding-left:42px; }
  .korean-timeline::before { left:13px; }
  .korean-timeline-item { min-height:0; padding:4px 0 40px; }
  .korean-timeline-item:last-child { padding-bottom:0; }
  .korean-timeline-item::before { left:-34px; }
  .korean-timeline-year { position:static; width:auto; margin-bottom:8px; text-align:left; }
  .site-footer { padding:48px 0 24px; }
  .site-footer .footer-grid { grid-template-columns:1fr; gap:26px; }
}