/* Shared navigation + Devlog / Roadmap pages.
   Press kit itself intentionally keeps the original Nine Winters presentation. */

:root {
  --site-gut: clamp(14px, 4.5vw, 24px);
}

.site-tabs {
  position:absolute;
  top:16px;
  left:24px;
  display:flex;
  gap:6px;
  z-index:8;
}
.site-tab {
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 11px;
  border:1px solid rgba(55,255,115,.25);
  background:rgba(3,10,6,.72);
  color:var(--text-dim);
  font-size:var(--fs-s);font-family:var(--f-small);
  line-height:1;
  letter-spacing:1.4px;
  text-decoration:none;
}
.site-tab:hover {
  color:var(--accent);
  border-color:var(--accent);
}
.site-tab.active {
  color:var(--accent);
  border-color:var(--lcd-ink);
  background:rgba(55,255,115,.10);
}
.engine-status {
  position:relative;
  z-index:2;
  max-width:1080px;
  margin:24px auto 0;
  padding:14px 18px;
  border:1px solid var(--panel-border);
  background:var(--panel-bg);
  box-shadow:var(--drop);
}
.engine-status > strong {
  display:block;
  margin-bottom:8px;
  color:var(--lcd-ink);
  font-size:clamp(18px,2.2vw,28px);
  line-height:1.05;
  letter-spacing:1.4px;
}
.engine-status p {
  margin:0;
  color:var(--text-dim);
  font-size:var(--fs-s);font-family:var(--f-small);
  line-height:1.65;
}
.engine-status-links {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.engine-status-links a {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  min-height:74px;
  padding:13px 15px;
  border:1px solid var(--panel-border);
  background:rgba(55,255,115,.035);
  color:var(--text);
  text-decoration:none;
}
.engine-status-links a:hover {
  border-color:var(--lcd-ink);
  background:rgba(55,255,115,.08);
}
.engine-status-links span {
  color:var(--text-dim);
  font-size:var(--fs-s);font-family:var(--f-small);
  letter-spacing:.5px;
}
.engine-status-links b {
  color:var(--accent);
  font-size:clamp(15px,1.8vw,21px);
  letter-spacing:1px;
  white-space:nowrap;
}

/* Standalone secondary pages */
.subpage {
  min-height:100vh;
  background:#050807;
  color:#cfe3d8;
  font-family:'DungGeunMo','PixelMplus12','Malgun Gothic',sans-serif;
}
.subpage * { box-sizing:border-box; border-radius:0; }
.subpage a { color:#37ff73; }
.subpage-shell {
  width:min(1180px, calc(100% - 2 * var(--site-gut)));
  margin:0 auto;
}
.subpage-head {
  position:relative;
  min-height:330px;
  display:flex;
  align-items:flex-end;
  padding:96px max(var(--site-gut), 4vw) 44px;
  border-bottom:1px solid #3f6a46;
  background:
    linear-gradient(90deg,rgba(5,8,7,.90),rgba(5,8,7,.58) 43%,rgba(5,8,7,.22)),
    linear-gradient(180deg,rgba(5,8,7,.20),#050807 100%),
    url('assets/brand/library_hero_3840x1240.png') 47% 45% / cover no-repeat;
}
.subpage-head-inner {
  width:min(1180px,100%);
}
.subpage-kicker {
  display:block;
  margin-bottom:8px;
  color:#37ff73;
  font-size:var(--fs-s);font-family:var(--f-small);
  letter-spacing:2px;
}
.subpage h1 {
  margin:0;
  color:#eafff2;
  font-size:clamp(34px,6vw,68px);
  line-height:.95;
  letter-spacing:5px;
}
.subpage-dek {
  max-width:720px;
  margin:16px 0 0;
  color:#8bad9a;
  line-height:1.7;
}
.subpage .site-tabs {
  top:16px;
  left:24px;
}
.subpage-main {
  padding:42px 0 88px;
}
.page-section {
  margin-bottom:54px;
}
.page-section > h2 {
  margin:0 0 18px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(63,106,70,.45);
  color:#eafff2;
  font-size:var(--fs-b);
  letter-spacing:2px;
}
.page-section p {
  margin:0 0 15px;
  color:#b9cec2;
  line-height:1.8;
}
.devlog-intro {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);
  gap:22px;
  align-items:start;
}
.devlog-note {
  border:1px solid #3f6a46;
  background:rgba(3,10,6,.90);
  padding:18px;
}
.devlog-note b {
  display:block;
  margin-bottom:9px;
  color:#eafff2;
}
.devlog-note small {
  display:block;
  color:#7fa892;
  line-height:1.65;
}
.dev-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.dev-shot {
  border:1px solid #3f6a46;
  background:#07100a;
  overflow:hidden;
}
.dev-shot.wide {
  grid-column:1 / -1;
}
.dev-shot img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
.dev-shot figcaption {
  padding:10px 12px;
  border-top:1px solid rgba(63,106,70,.45);
  color:#789782;
  font-size:var(--fs-s);font-family:var(--f-small);
  line-height:1.6;
}
.dev-shot figcaption strong {
  color:#cfe3d8;
}
.devlog-status {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.devlog-status > div {
  border:1px solid #3f6a46;
  background:rgba(3,10,6,.78);
  padding:16px;
}
.devlog-status b {
  display:block;
  margin-bottom:6px;
  color:#37ff73;
  font-size:var(--fs-s);font-family:var(--f-small);
  letter-spacing:1.3px;
}
.devlog-status span {
  color:#b9cec2;
  font-size:var(--fs-m);font-family:var(--f-mid);
  line-height:1.6;
}

/* Roadmap: inspired by the supplied phase-board reference, but retains Nine Winters language. */
.roadmap-page {
  background:
    radial-gradient(circle at 18% 0%,rgba(32,87,112,.20),transparent 38%),
    linear-gradient(180deg,#071827,#041018 52%,#050807);
}
.roadmap-page .subpage-head {
  background:
    linear-gradient(90deg,rgba(4,16,24,.94),rgba(5,20,30,.67) 46%,rgba(5,8,7,.18)),
    linear-gradient(180deg,rgba(6,24,35,.10),#06131c 100%),
    url('assets/brand/library_hero_3840x1240.png') 47% 45% / cover no-repeat;
  border-bottom-color:#345668;
}
.roadmap-page .subpage-kicker { color:#d9ef3a; }
.roadmap-page .site-tab { background:rgba(5,20,30,.80); border-color:#345668; }
.roadmap-page .site-tab.active { color:#0b1820; background:#d9ef3a; border-color:#d9ef3a; }
.roadmap-board {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.roadmap-phase {
  min-width:0;
  border:1px solid #36586a;
  background:rgba(7,24,35,.88);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.phase-head {
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:13px 16px;
  background:#d9ef3a;
  color:#07131b;
  border-bottom:1px solid #36586a;
}
.phase-head small {
  display:block;
  margin-bottom:4px;
  font-size:var(--fs-s);font-family:var(--f-small);
  letter-spacing:1.6px;
}
.phase-head strong {
  display:block;
  font-size:var(--fs-l);
  letter-spacing:.5px;
}
.phase-body {
  padding:18px 18px 20px;
}
.phase-status {
  display:inline-block;
  margin-bottom:12px;
  padding:3px 6px;
  border:1px solid #52778b;
  color:#9db8c5;
  font-size:var(--fs-s);font-family:var(--f-small);
  letter-spacing:1.4px;
}
.phase-body ul {
  margin:0;
  padding:0;
  list-style:none;
}
.phase-body li {
  position:relative;
  padding:10px 0 10px 18px;
  border-bottom:1px solid rgba(82,119,139,.30);
  color:#d0dde3;
  font-size:var(--fs-m);font-family:var(--f-mid);
  line-height:1.55;
}
.phase-body li:last-child { border-bottom:0; }
.phase-body li::before {
  content:'›';
  position:absolute;
  left:2px;
  color:#d9ef3a;
}
.phase-body li.pending { color:#7895a3; }
.phase-body li.pending::before { color:#7895a3; }
.roadmap-footnote {
  margin-top:18px;
  color:#6f8c99;
  font-size:var(--fs-s);font-family:var(--f-small);
  line-height:1.6;
}
.roadmap-callout {
  margin-bottom:22px;
  padding:14px 16px;
  border:1px solid #36586a;
  background:rgba(7,24,35,.72);
  color:#bdd0d8;
  line-height:1.7;
}
.roadmap-callout strong { color:#d9ef3a; }

@media (max-width:760px) {
  body:not(.subpage) > header { padding-top:148px !important; } /* 사이트 탭 5개 = 2줄(10~83px) 아래에 테마·언어 줄 */
  .site-tabs,
  .subpage .site-tabs {
    top:10px;
    left:10px;
    right:10px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  .site-tab {
    justify-content:center;
    padding:8px 5px;
    overflow:hidden;
    font-size:var(--fs-s);font-family:var(--f-small);
    letter-spacing:.7px;
  }
  body:not(.subpage) > header .top-tabs { top:93px !important; right:10px !important; }
  .engine-status {
    margin:14px var(--site-gut) 0;
  }
  .engine-status-links { grid-template-columns:1fr; }
  .engine-status-links a { min-height:64px; }
  .subpage-head {
    min-height:320px;
    padding-top:92px;
  }
  .devlog-intro { grid-template-columns:1fr; }
  .dev-gallery { grid-template-columns:1fr; }
  .dev-shot.wide { grid-column:auto; }
  .devlog-status { grid-template-columns:1fr; }
  .roadmap-board { grid-template-columns:1fr; }
  .roadmap-phase { display:grid; grid-template-columns:112px minmax(0,1fr); }
  .phase-head { min-height:100%; padding:14px 10px; }
  .phase-head strong { font-size:var(--fs-m);font-family:var(--f-mid); }
  .phase-body { padding:12px 14px; }
}


/* Current Unity development build gallery */
.current-build-lead {
  max-width:920px;
  margin-bottom:18px !important;
}
.current-build-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.current-media-card {
  margin:0;
  min-width:0;
}
.media-sprite {
  width:100%;
  aspect-ratio:16 / 9;
  background-repeat:no-repeat;
  background-size:300% 300%;
  background-position:var(--sx) var(--sy);
  background-color:#040706;
}
.sprite-a { background-image:url('assets/devlog/current/gallery-1-v2.webp'); }
.sprite-b { background-image:url('assets/devlog/current/gallery-2-v2.webp'); }
.current-media-card figcaption strong,
.dev-video-card figcaption strong {
  color:#37ff73;
}
.dev-video-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.dev-video-card {
  margin:0;
  min-width:0;
}
.dev-clip-preview,
.dev-clip-video {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  image-rendering:auto;
  background:#000;
}
.dev-clip-video {
  max-width:100%;
  border:0;
}
.dev-video-wide {
  grid-column:1 / -1;
}
@media (max-width:760px) {
  .current-build-grid,
  .dev-video-grid {
    grid-template-columns:1fr;
  }
  .dev-video-wide {
    grid-column:auto;
  }
}

/* 2026-10-05 shoot: still gallery */
.dev-still-lead {
  margin-top:26px !important;
}
.dev-still-label {
  margin:22px 0 10px;
  color:#37ff73;
  font-size:var(--fs-s);font-family:var(--f-small);
  letter-spacing:1.3px;
}
.dev-still-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.dev-still-grid .dev-shot {
  margin:0;
  min-width:0;
}
.dev-still-grid a {
  display:block;
}
@media (max-width:760px) {
  .dev-still-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Devlog index + posts (2026-10-11) */
.post-back { display:inline-block; margin-bottom:14px; color:var(--text-dim, #789782); font-size:var(--fs-s);font-family:var(--f-small); letter-spacing:1.4px; text-decoration:none; }
.post-back:hover { color:var(--accent, #eafff2); }
.post-list { display:grid; gap:14px; }
.post-card { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); border:1px solid #3f6a46; background:#07100a; text-decoration:none; color:inherit; transition:border-color .2s ease, background .2s ease; }
.post-card img { display:block; width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; border-right:1px solid #3f6a46; }
.post-card-body { display:flex; flex-direction:column; justify-content:center; gap:10px; padding:clamp(18px,3vw,32px); }
.post-card time { color:#37ff73; font-size:var(--fs-s);font-family:var(--f-small); letter-spacing:1.4px; }
.post-card strong { color:#eafff2; font-size:clamp(18px,2vw,24px); line-height:1.35; font-weight:400; }
.post-card-body > span { color:#9fb9aa; font-size:var(--fs-m);font-family:var(--f-mid); line-height:1.75; }
.post-card:hover, .post-card:focus-visible { border-color:#37ff73; background:#0a160e; }
.post-rss { float:right; color:#789782; font-size:var(--fs-s);font-family:var(--f-small); letter-spacing:1.4px; text-decoration:none; border:1px solid #3f6a46; padding:3px 7px; }
.post-rss:hover { color:#37ff73; border-color:#37ff73; }
.post-note { color:#7fa892; font-size:var(--fs-s);font-family:var(--f-small); line-height:1.7; }
.post-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; margin-top:40px; padding-top:18px; border-top:1px solid rgba(63,106,70,.45); }
.post-nav a { display:block; padding:14px 16px; border:1px solid #3f6a46; color:#cfe3d8; font-size:var(--fs-m);font-family:var(--f-mid); line-height:1.5; text-decoration:none; }
.post-nav a small { display:block; margin-bottom:6px; color:#37ff73; font-size:var(--fs-s);font-family:var(--f-small); letter-spacing:1.4px; }
.post-nav a:hover { border-color:#37ff73; }
.post-nav .post-nav-all { display:flex; align-items:center; color:#789782; font-size:var(--fs-s);font-family:var(--f-small); letter-spacing:1.4px; }
.post-nav .post-nav-next { text-align:right; }
@media (max-width:760px) {
  .post-card { grid-template-columns:1fr; }
  .post-card img { border-right:0; border-bottom:1px solid #3f6a46; }
  .post-nav { grid-template-columns:1fr; }
  .post-nav .post-nav-next { text-align:left; }
}

/* Page transitions between site pages (cross-document View Transitions).
   Browsers without support just navigate as before. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:kkiri-vt-out .2s cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:kkiri-vt-in .34s cubic-bezier(.22,1,.36,1) both}
@keyframes kkiri-vt-out{to{opacity:0;filter:blur(2px)}}
@keyframes kkiri-vt-in{from{opacity:0;transform:translateY(8px);filter:blur(2px)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}