:root {
      --black: #080808;
      --dark: #111111;
      --dark2: #1a1a1a;
      --dark3: #242424;
      --gold: #c9a96e;
      --gold-light: #e4c896;
      --mint: #0ABAB5;
      --ivory: #f5f0eb;
      --ivory2: #e8e3de;
      --grey: #888;
      --grey2: #555;
      --white: #ffffff;
      --font-kr: 'Noto Sans KR', sans-serif;
      --font-en: 'Playfair Display', serif;
      --font-body: 'Inter', sans-serif;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--black);
      color: var(--ivory);
      font-family: var(--font-kr);
      overflow-x: hidden;
    }

    /* ── 언어 숨김 ── */
    [data-kr], [data-en], [data-cn], [data-jp] { display: none; }
    body.lang-kr [data-kr] { display: revert; }
    body.lang-en [data-en] { display: revert; }
    body.lang-cn [data-cn] { display: revert; }
    body.lang-jp [data-jp] { display: revert; }

    /* ── NAV ── */
    #nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 1000;
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 48px;
      background: linear-gradient(to bottom, rgba(8,8,8,.9) 0%, transparent 100%);
      transition: background .3s;
    }
    #nav.scrolled { background: rgba(8,8,8,.97); backdrop-filter: blur(10px); }
    .nav-logo {
      font-family: var(--font-en); font-size: 22px; font-weight: 700;
      letter-spacing: 3px; color: var(--gold); text-decoration: none;
    }
    .nav-logo span { color: var(--ivory); font-weight: 400; }
    .lang-switcher { display: flex; gap: 6px; }
    .lang-btn {
      background: none; border: 1px solid var(--grey2); color: var(--grey);
      padding: 5px 12px; border-radius: 20px; cursor: pointer;
      font-size: 12px; letter-spacing: .5px; transition: all .2s;
    }
    .lang-btn:hover, .lang-btn.active {
      border-color: var(--gold); color: var(--gold);
      background: rgba(201,169,110,.08);
    }

    /* ── HERO ── */
    #hero {
      position: relative; height: 100vh; min-height: 700px;
      display: flex; align-items: flex-end; overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('photos/approved/uo-hero.jpg');
      background-size: cover; background-position: center 24%;
      filter: brightness(.65);
      transform: scale(1.05);
      transition: transform 8s ease;
    }
    #hero:hover .hero-bg { transform: scale(1); }
    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(8,8,8,.95) 0%, rgba(8,8,8,.3) 60%, transparent 100%);
    }
    .hero-content {
      position: relative; z-index: 2;
      padding: 0 72px 80px;
      max-width: 800px;
    }
    .hero-badge {
      display: inline-block; background: var(--gold);
      color: var(--black); font-size: 11px; font-weight: 700;
      letter-spacing: 3px; padding: 5px 16px; border-radius: 2px;
      margin-bottom: 20px; text-transform: uppercase;
    }
    .hero-name-kr {
      font-size: 80px; font-weight: 700; line-height: 1;
      color: var(--white); letter-spacing: -2px;
      margin-bottom: 8px;
    }
    .hero-name-en {
      font-family: var(--font-en); font-size: 42px; font-weight: 400;
      color: var(--gold-light); font-style: italic; letter-spacing: 2px;
      margin-bottom: 24px;
    }
    .hero-tagline {
      font-size: 15px; color: var(--ivory2); letter-spacing: 1px;
      font-weight: 300; opacity: .85;
    }
    .hero-scroll {
      position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      color: var(--grey); font-size: 11px; letter-spacing: 2px;
      animation: bounce 2s infinite;
    }
    .hero-scroll::after {
      content: ''; display: block; width: 1px; height: 40px;
      background: linear-gradient(to bottom, var(--gold), transparent);
    }
    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(6px); }
    }

    /* ── SECTION BASE ── */
    section { padding: 100px 0; }
    .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
    .section-label {
      font-size: 11px; letter-spacing: 4px; color: var(--gold);
      text-transform: uppercase; margin-bottom: 16px;
      display: flex; align-items: center; gap: 16px;
    }
    .section-label::after {
      content: ''; flex: 0 0 40px; height: 1px; background: var(--gold);
    }
    .section-title {
      font-family: var(--font-en); font-size: 48px; font-weight: 600;
      line-height: 1.1; color: var(--ivory);
    }
    .section-title .accent { color: var(--gold); }
    .divider { height: 1px; background: var(--dark3); margin: 80px 0; }

    /* fade-in animation */
    .fade-in { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
    .fade-in.visible { opacity: 1; transform: none; }

    /* ── ABOUT ── */
    #about { background: var(--dark); }
    .about-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 60px;
      align-items: center;
    }
    .about-photo-wrap { position: relative; }
    .about-photo {
      width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top;
      border-radius: 4px; filter: brightness(.9);
      transition: filter .3s;
    }
    .about-photo:hover { filter: brightness(1); }
    .about-photo-frame {
      position: absolute; top: -16px; left: -16px; right: 16px; bottom: 16px;
      border: 1px solid var(--gold); border-radius: 4px; z-index: -1; opacity: .5;
    }
    .about-info { display: flex; flex-direction: column; gap: 32px; }
    .about-bio {
      font-size: 16px; line-height: 1.9; color: var(--ivory2); font-weight: 300;
    }
    .profile-table { width: 100%; border-collapse: collapse; }
    .profile-table tr { border-bottom: 1px solid var(--dark3); }
    .profile-table td {
      padding: 12px 0; font-size: 14px; vertical-align: top;
    }
    .profile-table td:first-child {
      color: var(--gold); font-weight: 500; width: 110px; letter-spacing: .5px;
    }
    .profile-table td:last-child { color: var(--ivory2); font-weight: 300; }
    .sns-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
    .sns-link {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--dark3); border: 1px solid var(--dark3);
      color: var(--ivory); text-decoration: none; padding: 8px 18px;
      border-radius: 24px; font-size: 13px; letter-spacing: .5px;
      transition: all .2s;
    }
    .sns-link:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,169,110,.06); }

    /* ── TIMELINE ── */
    #timeline { background: var(--black); }
    .timeline { position: relative; margin-top: 60px; padding-left: 0; }
    .timeline::before {
      content: ''; position: absolute; left: 140px; top: 0; bottom: 0;
      width: 1px; background: linear-gradient(to bottom, var(--gold), transparent);
    }
    .tl-item {
      display: grid; grid-template-columns: 140px 1fr;
      gap: 0 40px; margin-bottom: 56px; position: relative;
    }
    .tl-item::before {
      content: ''; position: absolute; left: 136px; top: 8px;
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--gold); box-shadow: 0 0 12px var(--gold);
    }
    .tl-date {
      text-align: right; font-size: 13px; color: var(--gold); font-weight: 500;
      letter-spacing: .5px; padding-top: 4px;
    }
    .tl-content { padding-top: 0; }
    .tl-group {
      font-size: 11px; letter-spacing: 3px; color: var(--grey); text-transform: uppercase;
      margin-bottom: 6px;
    }
    .tl-title { font-size: 20px; font-weight: 600; color: var(--ivory); margin-bottom: 10px; }
    .tl-desc { font-size: 14px; color: var(--grey); line-height: 1.7; font-weight: 300; }
    .tl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
    .tl-tag {
      font-size: 11px; padding: 3px 10px; border-radius: 12px;
      border: 1px solid var(--dark3); color: var(--grey2); letter-spacing: .5px;
    }
    .tl-tag.gold { border-color: rgba(201,169,110,.4); color: var(--gold); }

    /* ── DISCOGRAPHY ── */
    #discography { background: var(--dark); }
    .disco-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 28px; margin-top: 60px;
    }
    .album-card {
      cursor: default; transition: transform .3s;
    }
    .album-card:hover { transform: translateY(-6px); }
    .album-cover-wrap {
      position: relative; aspect-ratio: 1;
      overflow: hidden; border-radius: 4px; margin-bottom: 14px;
      background: var(--dark3);
    }
    .album-cover {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .4s;
    }
    .album-card:hover .album-cover { transform: scale(1.05); }
    .album-cover-fallback {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--dark2), var(--dark3));
      font-family: var(--font-en); font-size: 28px; color: var(--gold); font-style: italic;
    }
    .album-era {
      font-size: 10px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase;
      margin-bottom: 5px;
    }
    .album-title { font-size: 15px; font-weight: 600; color: var(--ivory); margin-bottom: 4px; }
    .album-subtitle { font-size: 12px; color: var(--grey); margin-bottom: 4px; }
    .album-date { font-size: 11px; color: var(--grey2); }

    /* ── VIDEOS ── */
    #videos { background: var(--black); }
    .video-tabs {
      display: flex; gap: 6px; margin: 40px 0 32px; flex-wrap: wrap;
    }
    .video-tab {
      background: none; border: 1px solid var(--dark3); color: var(--grey);
      padding: 8px 20px; border-radius: 24px; cursor: pointer;
      font-size: 13px; letter-spacing: .5px; transition: all .2s;
      font-family: var(--font-kr);
    }
    .video-tab:hover, .video-tab.active {
      border-color: var(--gold); color: var(--gold); background: rgba(201,169,110,.06);
    }
    .video-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 20px;
    }
    .video-card {
      cursor: pointer; border-radius: 6px; overflow: hidden;
      background: var(--dark2); transition: transform .3s, box-shadow .3s;
      text-decoration: none;
    }
    .video-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,.5);
    }
    .video-thumb-wrap {
      position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--dark3);
    }
    .video-thumb {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .4s;
    }
    .video-card:hover .video-thumb { transform: scale(1.05); }
    .video-play {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,.3); opacity: 0; transition: opacity .2s;
    }
    .video-card:hover .video-play { opacity: 1; }
    .video-play-icon {
      width: 48px; height: 48px; background: rgba(201,169,110,.9);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
    }
    .video-play-icon::after {
      content: ''; border: 0; border-top: 10px solid transparent;
      border-bottom: 10px solid transparent; border-left: 16px solid #000;
      margin-left: 3px;
    }
    .video-info { padding: 14px 16px; }
    .video-era-badge {
      display: inline-block; font-size: 10px; letter-spacing: 1.5px;
      color: var(--gold); text-transform: uppercase; margin-bottom: 6px;
    }
    .video-title {
      font-size: 13px; color: var(--ivory); line-height: 1.5;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .video-card.hidden { display: none; }

    /* ── GALLERY ── */
    #gallery { background: var(--dark); }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px; margin-top: 60px;
    }
    .gallery-item {
      cursor: pointer; overflow: hidden; border-radius: 3px;
      aspect-ratio: 3/4; background: var(--dark3);
      transition: transform .3s, box-shadow .3s;
    }
    .gallery-item:hover {
      transform: scale(1.02);
      box-shadow: 0 8px 30px rgba(0,0,0,.6);
      z-index: 2; position: relative;
    }
    .gallery-item:nth-child(5n+1) { aspect-ratio: 3/4; }
    .gallery-item:nth-child(5n+2) { aspect-ratio: 3/4; }
    .gallery-img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s; }
    .gallery-item:hover .gallery-img { transform: scale(1.06); }

    /* ── LIGHTBOX ── */
    #lightbox {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,.95); align-items: center; justify-content: center;
    }
    #lightbox.open { display: flex; }
    #lightbox-img {
      max-width: 90vw; max-height: 90vh;
      object-fit: contain; border-radius: 4px;
      box-shadow: 0 0 80px rgba(201,169,110,.15);
    }
    .lb-close {
      position: absolute; top: 24px; right: 32px;
      font-size: 36px; color: var(--grey); cursor: pointer;
      line-height: 1; transition: color .2s;
    }
    .lb-close:hover { color: var(--gold); }
    .lb-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(201,169,110,.15); border: 1px solid rgba(201,169,110,.3);
      color: var(--gold); width: 48px; height: 48px; display: flex;
      align-items: center; justify-content: center; cursor: pointer;
      border-radius: 50%; font-size: 20px; transition: all .2s;
    }
    .lb-nav:hover { background: rgba(201,169,110,.3); }
    #lb-prev { left: 24px; }
    #lb-next { right: 24px; }
    #lb-counter {
      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
      font-size: 13px; color: var(--grey); letter-spacing: 2px;
    }

    /* ── CONTACT ── */
    #contact { background: var(--black); text-align: center; }
    .contact-name {
      font-family: var(--font-en); font-size: 64px; font-weight: 700;
      color: var(--gold); margin: 32px 0 16px; letter-spacing: -1px;
    }
    .contact-sub { font-size: 14px; color: var(--grey); letter-spacing: 2px; margin-bottom: 48px; }
    .contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
    .contact-link {
      display: inline-flex; align-items: center; gap: 10px;
      border: 1px solid var(--dark3); color: var(--ivory2);
      text-decoration: none; padding: 14px 28px; border-radius: 40px;
      font-size: 14px; letter-spacing: .5px; transition: all .25s;
    }
    .contact-link:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,169,110,.05); }
    .contact-email {
      margin-top: 40px; font-size: 13px; color: var(--grey2); letter-spacing: 1px;
    }
    footer {
      background: var(--dark); text-align: center;
      padding: 32px; font-size: 12px; color: var(--grey2); letter-spacing: 1px;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      #nav { padding: 16px 24px; }
      .hero-content { padding: 0 32px 60px; }
      .hero-name-kr { font-size: 52px; }
      .hero-name-en { font-size: 28px; }
      .section-inner { padding: 0 24px; }
      .about-grid { grid-template-columns: 1fr; gap: 48px; }
      .gallery-grid { grid-template-columns: repeat(3, 1fr); }
      .timeline::before { left: 80px; }
      .tl-item { grid-template-columns: 80px 1fr; }
      .tl-item::before { left: 76px; }
      .section-title { font-size: 36px; }
    }
    @media (max-width: 600px) {
      .hero-name-kr { font-size: 40px; }
      .gallery-grid { grid-template-columns: repeat(2, 1fr); }
      .disco-grid { grid-template-columns: repeat(2, 1fr); }
      .video-grid { grid-template-columns: 1fr; }
    }
  
/* Production interaction and narrow-screen refinements. */
:focus-visible{outline:2px solid var(--gold-light);outline-offset:5px}
.skip-link{position:fixed;left:16px;top:-80px;z-index:10000;background:var(--gold);color:#080808;padding:12px}.skip-link:focus{top:12px}
.hero-scroll{text-decoration:none}.lb-close{background:none;border:0;font-family:inherit}.gallery-item:focus-visible{outline-offset:-3px}
.lang-btn,.video-tab{min-height:36px}.about-photo-wrap{isolation:isolate}
.contact-email a{color:inherit;text-decoration:none}.fade-in{opacity:1;transform:none}.js-motion .fade-in:not(.visible){opacity:0;transform:translateY(30px)}
#lightbox-img{max-height:calc(100dvh - 120px)}
@media(max-width:600px){
#nav{padding:12px 16px;gap:10px}.nav-logo{font-size:18px;letter-spacing:1px;white-space:nowrap}.lang-switcher{gap:4px}.lang-btn{padding:6px 8px;font-size:11px;min-height:38px}
#hero{height:100svh;min-height:580px}.hero-content{padding:0 24px 110px;max-width:100%}.hero-badge{letter-spacing:1.4px;font-size:10px;line-height:1.7}.hero-tagline{font-size:12px;line-height:1.8}.hero-bg{background-position:50% 20%}
section{padding:72px 0}.section-inner{padding:0 24px}.about-grid{margin-top:18px}.about-bio{font-size:14px}.profile-table td:first-child{width:90px}
.timeline::before{left:0}.tl-item{grid-template-columns:1fr;padding-left:24px;gap:10px}.tl-item::before{left:-4px}.tl-date{text-align:left}.tl-title{font-size:18px}.tl-desc{color:#aaa}
.disco-grid{gap:24px 16px}.gallery-grid{gap:6px;margin-top:36px}.video-tabs{gap:8px}.video-tab{min-height:44px;padding:8px 14px}.video-play{opacity:1;background:rgba(0,0,0,.12)}
#lb-prev{left:12px}#lb-next{right:12px}.lb-nav{top:auto;bottom:20px;transform:none}.lb-close{top:16px;right:16px;width:44px;height:44px}.contact-name{font-size:48px}.contact-link{padding:12px 20px}.contact-sub{line-height:1.8}.contact-email{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion .fade-in:not(.visible){opacity:1;transform:none}}

/* Preserve the uploaded portrait proportions in the fixed profile frame. */
.about-photo{height:auto;aspect-ratio:3/4;object-position:center 24%}