/* =========================================================
   seohyeon chang — personal site
   japanese lost-media: a salvaged early-2000s homepage.
   crushed photo background · translucent white panels ·
   times new roman · mojibake on hover · camcorder OSD.
   ========================================================= */

/* "SonyCam Original" by Xane Myers — CC BY-SA 3.0
   https://fontstruct.com/fontstructions/show/1646448 */
@font-face {
  font-family: "SonyCam";
  src: url("assets/fonts/sonycam.otf") format("opentype");
  font-display: swap;
}
/* Galmuri11 (OFL) — classic gulim-style korean bitmap font */
@font-face {
  font-family: "Galmuri11";
  src: url("assets/fonts/galmuri11.ttf") format("truetype");
  font-display: swap;
}
/* alias to the locally-installed MS Gulim (Office ships it) */
@font-face {
  font-family: "GulimLocal";
  src: local("Gulim"), local("GulimChe"), local("\uAD74\uB9BC");
}
@font-face {
  font-family: "VCR OSD";
  src: url("assets/fonts/vcr_osd_mono.ttf") format("truetype");
  font-display: swap;
}

:root {
  --paper:  rgba(252, 252, 250, .82);   /* the white panels */
  --paper2: rgba(252, 252, 250, .62);
  --ink:    #16161a;
  --dim:    #55565e;
  --faint:  #8b8c92;
  --line:   #3a3b40;
  --osd:    #f2f2ec;    /* camcorder overlay white */
  --amber:  #f0a832;    /* date stamp */
  --rec:    #e33b2e;
  --lily:   #96b5e5;    /* the hover blue */
  --serif:  "MS PMincho", "MS Mincho", "Hiragino Mincho ProN", "Yu Mincho", Times, serif;   /* mincho everywhere */
  --osdfont:"SonyCam", "VCR OSD", "Courier New", Courier, monospace;
  --maxw:   880px;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; overflow-x: clip; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #050505 url("assets/bg.jpg?v=2") center top / cover fixed no-repeat;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 1px;
  line-height: 1.75;
}

/* links — black, underlined, hover lily blue (the reference) */
a         { color: #2233cc; text-decoration: underline; font-weight: bold; }
a:visited { color: #7a3fa8; }
a:hover   { color: var(--lily); }

/* film grain + vignette ------------------------------------ */
#grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.5)),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
}

/* channel-change static flicker ----------------------------- */
#static {
  position: fixed; inset: 0; z-index: 95; pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.25) 0 1px, rgba(0,0,0,.55) 1px 3px, rgba(255,255,255,.12) 3px 4px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.07) 0 2px, transparent 2px 5px);
}
#static.zap { animation: zap .28s steps(4) both; }
@keyframes zap {
  0%   { opacity: .95; transform: translateY(-2px); }
  50%  { opacity: .6;  transform: translateY(3px); }
  100% { opacity: 0;   transform: none; }
}

/* OSD text (floats on the photo, not on panels) -------------- */
.osd {
  font-family: var(--osdfont);
  color: var(--osd);
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  letter-spacing: 1px;
}

/* =====================================================
   viewfinder hero — raw broken photo, OSD on top
   ===================================================== */
#vf {
  height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 62px 18px 18px;   /* clear the fixed input bar */
}
.vf-frame {
  position: relative;
  width: 100%; max-width: 900px;
  height: min(86svh, 640px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px 30px;
}
.vf-corner {
  position: absolute; width: 26px; height: 26px;
  border: 2px solid var(--osd); opacity: .9;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.8));
}
.vf-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vf-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vf-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vf-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.vf-top, .vf-bottom, .vf-low {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 19px;
}
.vf-low { margin-bottom: 4px; font-size: 18px; }
.vf-date { font-family: var(--osdfont); }
@keyframes blink { 50% { opacity: 0; } }

/* cyber-shot top icons ------------------------------------- */
.batt { display: inline-flex; align-items: center; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.9)); }
.batt-body {
  display: inline-flex; gap: 2px; align-items: center;
  border: 2px solid var(--osd);
  padding: 2px; height: 16px;
}
.batt-body i { display: block; width: 6px; height: 8px; background: var(--osd); }
.batt-body i:last-child { background: transparent; }   /* one bar drained */
.batt-nub { width: 3px; height: 8px; background: var(--osd); margin-left: 1px; }

.vf-mid { display: flex; gap: 18px; }
.badge { letter-spacing: 0; }
.vf-count { display: inline-flex; align-items: center; gap: 8px; }
.card {
  display: inline-block; width: 22px; height: 15px;
  border: 2px solid var(--osd);
  clip-path: polygon(0 0, 72% 0, 100% 35%, 100% 100%, 0 100%);
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.9));
}

/* bottom nav row */
.vf-nav { display: inline-flex; align-items: center; gap: 4px; }
.vfbtn {
  background: none; border: 0; padding: 2px 4px;
  font-family: var(--osdfont); font-size: 19px;
  color: var(--osd); cursor: pointer;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.vfbtn:hover { color: var(--amber); }
.vf-vol { letter-spacing: 1px; }

.vf-center { text-align: center; margin: auto 0; }
.vf-name {
  font-family: "MS PMincho", "MS Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: normal;
  font-size: clamp(32px, 6.5vw, 56px);
  letter-spacing: 4px;
  margin: 0 0 10px;
  color: #fff;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 2px 0 #000;
}
.vf-sub {
  font-family: "MS PMincho", "MS Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  margin: 0 0 34px;
  font-size: 16px;
  letter-spacing: 3px;
}
.vf-scroll { font-size: 13px; animation: blink 2.4s steps(1) infinite; }

/* =====================================================
   input select — translucent white strip (lily style)
   ===================================================== */
#input {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 18px;
  font-size: 14px;
  background: var(--paper2);
  border-top: 1px solid rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.input-label { color: var(--ink); font-family: var(--osdfont); font-size: 13px; }
.ch {
  font-family: var(--osdfont);
  white-space: nowrap;
  font-size: 14px; letter-spacing: 1px;
  color: var(--dim);
  background: #e8e8e2;
  border: 2px outset #999;
  padding: 4px 14px;
  cursor: pointer;
}
.ch:hover { color: var(--lily); }
.ch:active { border-style: inset; }
.ch.on {
  color: #000;
  border-style: inset;
  background: #d5d5cf;
}
.ch.on::before { content: "\25C9 "; }
.ch:not(.on)::before { content: "\25CB "; }

.input-ctr {
  margin-left: auto;
  font-family: var(--osdfont);
  font-size: 12.5px;
  color: var(--dim);
}
#ctr {
  display: inline-block;
  background: #000;
  color: #35e065;
  border: 2px inset #555;
  padding: 0 5px;
  letter-spacing: 3px;
  font-weight: bold;
}
@media (max-width: 560px) { .input-ctr { display: none; } }

/* marquee — thin translucent strip */
.mq {
  display: block;
  overflow: hidden;
  max-width: 100%;
  font-family: var(--osdfont);
  font-size: 13.5px;
  color: #b0447a;
  background: var(--paper2);
  border-bottom: 1px solid rgba(0,0,0,.45);
  padding: 4px 0;
}

/* =====================================================
   page body — white panels on the broken photo
   ===================================================== */
#page { max-width: var(--maxw); margin: 0 auto; padding: 34px 20px 90px; }

.channel.off { display: none; }

.ch-head {
  font-size: 14px;
  margin: 6px 0 30px;
}

.sec {
  margin: 0 0 34px;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.55);
  padding: 24px 28px 28px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.14);
}
.sec h2 {
  font-family: var(--osdfont);
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 2px;
  color: #7c2626;
  margin: 0 0 4px;
}
.sec h2 .jp {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", var(--serif);
  font-weight: normal;
  font-size: 13px;
  color: #6f93c9;
  letter-spacing: 3px;
  margin-left: 12px;
}
.sec h2 + * { margin-top: 14px; }
.sec h2::after {
  content: "";
  display: block;
  border-bottom: 1px solid #7c2626;
  margin-top: 6px;
}
.sec-note { font-size: 14.5px; color: var(--dim); font-style: italic; margin: 10px 0 18px; }

hr.dots {
  border: 0;
  border-top: 1px dotted #777;
  margin: 24px 0;
}

/* ---- work entries ----------------------------------------- */
.entry { margin: 0 0 8px; }
.e-title {
  font-family: var(--osdfont);
  font-size: 20px; color: #223a7a; margin: 0 0 2px; font-weight: bold;
}
.e-date { color: var(--faint); font-size: 14px; margin-left: 8px; font-weight: normal; }
.e-role { font-size: 15px; color: var(--dim); font-style: italic; margin: 0 0 8px; }
.entry ul { margin: 0 0 10px; padding-left: 22px; }
.entry li { margin: 4px 0; font-size: 16px; }
.e-note {
  font-family: var(--osdfont);
  font-size: 13px; color: var(--dim);
  border: 1px dashed #999;
  background: rgba(0,0,0,.03);
  padding: 10px 12px; margin: 10px 0;
}
.e-prev { font-size: 15px; color: var(--dim); margin: 8px 0 0; }

/* ---- dropdown project folders (details/summary) --------------- */
.drop {
  border: 1px solid #999;
  background: rgba(255,255,255,.45);
  margin: 8px 0;
}
.drop summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 15.5px;
  list-style: none;
  user-select: none;
}
.drop summary::-webkit-details-marker { display: none; }
.drop summary::before {
  content: "[+] ";
  font-family: var(--osdfont);
  font-weight: bold;
  color: #2f7d4a;
}
.drop[open] summary::before { content: "[\2212] "; }   /* [−] */
.drop summary:hover { background: rgba(150,181,229,.18); color: #000; }
.drop[open] summary {
  border-bottom: 1px dotted #999;
  background: rgba(0,0,0,.04);
  font-weight: bold;
}
.drop-body { padding: 4px 14px 14px; }

/* ---- portfolio file entries ---------------------------------- */
.f-desc { font-size: 16px; margin: 10px 0 14px; }
.f-cap {
  font-family: var(--osdfont);
  font-size: 12px; color: var(--faint);
  margin: 8px 0 0; letter-spacing: .5px;
}
.f-links { font-size: 15px; margin: 12px 0 0; }

.strip {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.strip a { position: relative; flex: 0 0 auto; }
.strip img {
  display: block;
  height: 180px; width: auto;
  border: 2px ridge #aaa;
  background: #fff;
}
.strip a:hover img { border-color: var(--lily); }
.strip img.px { image-rendering: pixelated; background: rgba(0,0,0,.05); }
.playmark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  pointer-events: none;
}
@media (max-width: 560px) { .strip img { height: 140px; } }

/* ---- projects table ----------------------------------------- */
.ptable {
  width: 100%; border-collapse: collapse; font-size: 16px;
  border: 2px ridge #aaa;
  background: rgba(255,255,255,.5);
}
.ptable td {
  border: 1px solid #999;
  padding: 10px 12px;
  vertical-align: top;
}
.p-name { width: 28%; color: #223a7a; font-weight: bold; }
.p-desc { color: var(--dim); }
.p-tag {
  width: 84px; text-align: right;
  font-family: var(--osdfont); font-size: 13px; color: #9a6a1a;
}

/* =====================================================
   video channel
   ===================================================== */
.tape { margin: 0 0 26px; }
.tape-label {
  font-size: 13.5px; color: #222;
  border: 2px outset #aaa;
  border-bottom: 0;
  padding: 7px 12px;
  background: #e3e3dd;
  font-family: var(--osdfont);
}
.yt {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px ridge #aaa;
  background: #000;
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.tape.locked .tape-body {
  border: 1px solid #999;
  padding: 34px 10px;
  text-align: center;
  font-size: 14px; color: var(--faint);
  font-family: var(--osdfont);
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.05) 0 12px, transparent 12px 24px);
}

/* ---- photo gallery ------------------------------------------ */
.g-trip { margin: 0 0 30px; }
.g-trip-label {
  font-family: var(--osdfont);
  font-size: 14px; color: #7a5410;
  margin: 0 0 10px;
}
.g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.g-cell {
  border: 2px ridge #aaa;
  background: #fff;
  padding: 5px;
  cursor: pointer;
}
.g-cell:hover { border-color: var(--lily); }
.g-cell img {
  display: block; width: 100%; height: 155px;
  object-fit: cover;
}
.g-cell .g-cap {
  font-family: var(--osdfont);
  font-size: 11.5px; color: var(--faint);
  padding: 4px 2px 1px;
  letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-cell:hover .g-cap { color: var(--lily); }

/* =====================================================
   shared — music / films / contact
   ===================================================== */
.shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 620px) { .shelf { grid-template-columns: 1fr 1fr; } }

.disc { margin: 0; position: relative; cursor: pointer; }
.disc img {
  display: block; width: 100%;
  border: 3px ridge #aaa;
}
.disc:hover img { border-color: var(--lily); }
.disc.playing img { border-color: var(--amber); }
.disc figcaption {
  font-size: 14.5px; color: var(--dim); line-height: 1.5;
  padding-top: 7px;
}
.disc figcaption b { color: #7c2626; font-weight: bold; }
.disc-osd { position: absolute; top: 10px; left: 10px; font-size: 14px; }
.disc.playing .disc-osd::before { content: "\25B6 PLAY"; color: var(--amber); }
.disc:not(.playing):hover .disc-osd::before { content: "\25B6"; }

.shelf.films { grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 680px) { .shelf.films { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .shelf.films { grid-template-columns: repeat(2, 1fr); } }

.film { margin: 0; }
.film img {
  display: block; width: 100%;
  aspect-ratio: 2 / 3; object-fit: cover;
  border: 3px ridge #aaa;
}
.film:hover img { border-color: var(--lily); }
.film figcaption {
  font-size: 13.5px; color: var(--dim); line-height: 1.45; padding-top: 6px;
}
.film figcaption span { color: var(--faint); font-style: italic; }

/* ---- updates ------------------------------------------------- */
.updates { font-size: 15px; color: var(--dim); margin: 0; padding-left: 0; list-style: none; }
.updates li { margin: 3px 0; }
.updates .u-date {
  font-family: var(--osdfont); font-size: 13px; color: var(--faint); margin-right: 10px;
}

/* ---- contact / footer ----------------------------------------- */
.contact { font-size: 19px; letter-spacing: 1px; margin: 0 0 4px; }
.contact a { text-transform: uppercase; }
.c-reveal {
  font-family: var(--serif);
  font-size: 15px;
  color: #2f7d4a;
  margin: 6px 0 10px;
  min-height: 1.4em;
  letter-spacing: 1px;
}
html[data-theme="dark"] .c-reveal { color: #4fbf78; }
.contact-sub { font-size: 15px; color: var(--dim); font-style: italic; margin: 0; }

#foot {
  margin-top: 30px;
  font-size: 14px;
  color: var(--osd);
}
#foot .dots { border-top-color: rgba(255,255,255,.5); }
#foot p { margin: 4px 0; text-shadow: 1px 1px 0 rgba(0,0,0,.9); }
.newbadge {
  font-family: var(--osdfont);
  font-size: 12px; font-weight: bold;
  color: #000; background: var(--amber);
  padding: 0 5px; margin-left: 7px;
  vertical-align: 2px;
  animation: blink 1.2s steps(1) infinite;
}

/* =====================================================
   photo playback lightbox (stays dark)
   ===================================================== */
#lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4,4,6,.96);
  display: flex; align-items: center; justify-content: center;
}
#lb.hidden { display: none; }
.lb-frame { position: relative; max-width: 94vw; max-height: 92svh; }
#lb-img {
  display: block;
  max-width: 94vw; max-height: 92svh;
  border: 1px solid #333;
}
.lb-osd {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 12px 16px;
  font-size: 15px;
  pointer-events: none;
}
.lb-osd.top { top: 0; }
.lb-osd.bot { bottom: 0; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  font-size: 22px; padding: 18px 10px;
  color: var(--osd);
  opacity: .6;
}
.lb-nav:hover { opacity: 1; }
#lb-prev { left: -4px; }
#lb-next { right: -4px; }
#lb-x {
  position: absolute; top: 4px; right: 6px;
  background: none; border: 0; cursor: pointer;
  font-size: 24px; color: var(--osd);
  padding: 6px 10px;
}

/* =====================================================
   reveal + motion prefs
   ===================================================== */
.reveal { opacity: 0; transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .recdot, .vf-scroll, .newbadge { animation: none; }
  #static.zap { animation: none; }
}

/* =====================================================
   NIGHTSHOT — the lily chou-chou BBS: black void, white text.
   no photo, no panels, no color. text only.
   ===================================================== */
html[data-theme="dark"] {
  --paper:  transparent;
  --paper2: rgba(0, 0, 0, .85);
  --ink:    #e6e6e6;
  --dim:    #a8a8a8;
  --faint:  #6b6b6b;
  --osd:    #f2f2f2;
  --amber:  #f2f2f2;   /* even the date stamp goes white */
  --lily:   #ffffff;
}
html[data-theme="dark"] body {
  background: #000;                              /* photo gone. void. */
  /* faint CRT softness on the letters, like the film */
  text-shadow: 0 0 1px rgba(255,255,255,.28);
}

/* text & links — white on black, hover inverts like a selection */
html[data-theme="dark"] a         { color: #fff; }
html[data-theme="dark"] a:visited { color: #bbb; }
html[data-theme="dark"] a:hover   { color: #000; background: #fff; }
html[data-theme="dark"] .sec h2 { color: #fff; }
html[data-theme="dark"] .sec h2::after { border-bottom-color: #555; }
html[data-theme="dark"] .sec h2 .jp { color: #8a8a8a; }
html[data-theme="dark"] .e-title,
html[data-theme="dark"] .p-name,
html[data-theme="dark"] .disc figcaption b { color: #fff; }
html[data-theme="dark"] .p-tag { color: #8a8a8a; }
html[data-theme="dark"] .drop summary::before { color: #fff; }
html[data-theme="dark"] .mq { color: #cfcfcf; }
html[data-theme="dark"] .g-trip-label { color: #cfcfcf; }
html[data-theme="dark"] .c-reveal { color: #fff; }

/* panels dissolve — text floats on the void */
html[data-theme="dark"] .sec {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #2a2a2a;
  box-shadow: none;
}
html[data-theme="dark"] #input { border-color: #333; }
html[data-theme="dark"] .input-label { color: #cfcfcf; }
html[data-theme="dark"] .ch { background: #000; border-color: #555; color: #a8a8a8; }
html[data-theme="dark"] .ch.on { background: #000; color: #fff; }
html[data-theme="dark"] .drop { background: transparent; border-color: #333; }
html[data-theme="dark"] .drop summary:hover { background: #fff; color: #000; }
html[data-theme="dark"] .drop summary:hover::before { color: #000; }
html[data-theme="dark"] .drop[open] summary { background: transparent; border-bottom-color: #333; }
html[data-theme="dark"] .ptable { background: transparent; border-color: #444; }
html[data-theme="dark"] .ptable td { border-color: #333; }
html[data-theme="dark"] .e-note { border-color: #444; background: transparent; }
html[data-theme="dark"] hr.dots { border-top-color: #333; }
html[data-theme="dark"] .tape-label { background: #000; color: #cfcfcf; border-color: #444; }
html[data-theme="dark"] .yt,
html[data-theme="dark"] .strip img,
html[data-theme="dark"] .g-cell,
html[data-theme="dark"] .disc img,
html[data-theme="dark"] .film img { border-color: #444; }
html[data-theme="dark"] .g-cell { background: #000; }
html[data-theme="dark"] .strip img { background: #000; }
html[data-theme="dark"] .strip img.px { background: #000; }
html[data-theme="dark"] .tape.locked .tape-body {
  border-color: #444;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.04) 0 12px, transparent 12px 24px);
}

/* monochrome furniture */
html[data-theme="dark"] #ctr { color: #fff; border-color: #555; }
html[data-theme="dark"] .newbadge { background: #fff; color: #000; }
html[data-theme="dark"] .vfbtn:hover { color: #fff; background: #fff; color: #000; }

/* nightshot button armed */
.nightbtn { margin-left: 2px; }
html[data-theme="dark"] .nightbtn {
  color: #fff !important;
  border-color: #888;
  background: #000 !important;
  border-style: inset;
}

.foot-credit { font-size: 11.5px; }
.foot-credit a { color: inherit; font-weight: normal; }

/* dropdown hover: the whole summary bar inverts, open or closed */
html[data-theme="dark"] .drop summary:hover,
html[data-theme="dark"] .drop[open] summary:hover {
  background: #fff;
  color: #000;
}
html[data-theme="dark"] .drop summary:hover::before,
html[data-theme="dark"] .drop[open] summary:hover::before {
  color: #000;
}

/* ---- language selector ------------------------------------- */
.lang-wrap { position: relative; margin-left: auto; display: inline-flex; }
.lang-wrap + .input-ctr { margin-left: 14px; }
#langbtn { display: inline-flex; align-items: center; padding: 4px 8px; }
#langbtn svg { display: block; }
#langmenu {
  position: absolute; top: calc(100% + 4px); right: 0;
  display: flex; flex-direction: column;
  background: #e8e8e2;
  border: 2px outset #999;
  z-index: 120;
  min-width: 110px;
}
#langmenu.hidden { display: none; }
#langmenu button {
  font-family: var(--serif);
  font-size: 14px;
  text-align: left;
  background: none; border: 0;
  border-bottom: 1px dotted #999;
  padding: 6px 12px;
  cursor: pointer;
  color: #333;
}
#langmenu button:last-child { border-bottom: 0; }
#langmenu button:hover { background: #000; color: #fff; }
#langmenu button.on::after { content: " \25C9"; }
html[data-theme="dark"] #langmenu { background: #000; border-color: #555; }
html[data-theme="dark"] #langmenu button { color: #ccc; border-bottom-color: #444; }
html[data-theme="dark"] #langmenu button:hover { background: #fff; color: #000; }

/* ---- korean mode: gulim / galmuri ---------------------------- */
html[lang="ko"] {
  --serif: "Galmuri11", "Gulim", "GulimLocal", "Dotum", sans-serif;
  /* latin stays sonycam; hangul falls through to gulim/galmuri */
  --osdfont: "SonyCam", "Galmuri11", "Gulim", "GulimLocal", "Dotum", monospace;
}
html[lang="ko"] body { letter-spacing: 0; }

/* ---- japanese mode: MS mincho (the lily BBS lineage) --------- */
html[lang="ja"] {
  --serif: "MS PMincho", "MS Mincho", "\FF2D\FF33 \660E\671D",
           "Hiragino Mincho ProN", "Yu Mincho", serif;
  --osdfont: "SonyCam", "MS PMincho", "MS Mincho",
             "Hiragino Mincho ProN", "Yu Mincho", monospace;
}
html[lang="ja"] body { letter-spacing: .5px; }

/* ---- narrow screens: compress the input bar ------------------ */
@media (max-width: 720px) {
  #input { gap: 6px; padding: 8px 8px; }
  .input-label { display: none; }          /* INPUT SELECT : */
  .ch { font-size: 11.5px; padding: 3px 7px; letter-spacing: 0; }
  #langbtn { padding: 3px 5px; }
}
@media (max-width: 380px) {
  #input { gap: 5px; }
  .ch { font-size: 10.5px; padding: 3px 6px; }
}

/* ---- narrow screens: viewfinder ------------------------------ */
@media (max-width: 600px) {
  #vf { padding: 58px 10px 12px; }
  .vf-frame { padding: 14px 12px; height: min(80svh, 560px); }
  .vf-top, .vf-bottom, .vf-low { font-size: 12.5px; }
  .vf-mid { gap: 10px; }
  .vfbtn { font-size: 13px; padding: 2px 3px; }
  .batt-body { height: 13px; padding: 1px; }
  .batt-body i { width: 5px; height: 6px; }
  .batt-nub { height: 6px; }
  .card { width: 17px; height: 12px; }
  .vf-sub { font-size: 14px; letter-spacing: 2px; }
  .vf-name { font-size: clamp(20px, 7.5vw, 30px); letter-spacing: 1px; }
}