:root{
    --bg: #000000;
    --ink: #F3F1EC;
    --ink-soft: rgba(243,241,236,.6);
    --gold: #C7A467;
    --line: rgba(243,241,236,.14);
    --panel: #000000;
    --panel-ink: #F3F1EC;
    --panel-ink-soft: rgba(243,241,236,.58);
    --panel-line: rgba(243,241,236,.16);
    --header-h: 76px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Pretendard', -apple-system, sans-serif;
    background:var(--bg);
    color:var(--ink);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block; width:100%; height:100%; object-fit:cover;}
  button{font-family:inherit; cursor:pointer;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--gold); color:#fff;}

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; right:0; height:calc(var(--header-h) + env(safe-area-inset-top, 0px));
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:env(safe-area-inset-top, 0px) 28px 0;
    z-index:100;
    color:var(--ink);
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .nav-left, .nav-right{ display:flex; align-items:center; }
  .nav-right{ justify-content:flex-end; position:relative; }

  .nav-link{
    font-size:11px;
    letter-spacing:.16em;
    font-weight:600;
    text-transform:uppercase;
    padding:8px 2px;
    background:none; border:none; color:inherit;
    position:relative;
  }
  .nav-link::after{
    content:''; position:absolute; left:0; right:0; bottom:2px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .35s ease;
  }
  .nav-link:hover::after{ transform:scaleX(1); }

  .logo{
    background:none; border:none; color:inherit;
    padding:6px 0;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .3s ease;
  }
  .logo:hover{ opacity:.72; }
  .logo-img{
    height:20px; width:auto; display:block;
  }

  .menu-trigger{
    background:none; border:none; color:inherit;
    font-size:20px; line-height:1; letter-spacing:0;
    padding:8px 2px 8px 8px;
  }

  .menu-drop{
    position:absolute; top:100%; right:-16px;
    padding:18px 16px 6px;
    background:var(--bg);
    display:flex; flex-direction:column; align-items:flex-end; gap:14px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .nav-right:hover .menu-drop,
  .menu-drop.force-open{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .menu-drop .nav-link{ font-size:11px; }

  /* ---------- GALLERY ---------- */
  .gallery{
    position:fixed; top:calc(var(--header-h) + env(safe-area-inset-top, 0px)); left:0; right:0; bottom:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    background:var(--bg);
    padding:16px calc(16px + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) calc(16px + env(safe-area-inset-left, 0px));
  }
  .col{
    position:relative; overflow:hidden;
    cursor:pointer;
  }
  .col-track{
    position:absolute; left:0; right:0; top:0;
    display:flex; flex-direction:column;
    gap:16px;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    will-change: transform;
  }
  .col{ contain:layout paint; }
  .col-track{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
  .col.up .col-track{ animation-name: scrollUp; }
  .col.down .col-track{ animation-name: scrollDown; }

  @keyframes scrollUp{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(0,-50%,0); }
  }
  @keyframes scrollDown{
    from{ transform:translate3d(0,-50%,0); }
    to{ transform:translate3d(0,0,0); }
  }

  .cell{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#0e0d0a;
    line-height:0;
  }
  .cell img, .cell iframe, .cell video{
    width:100%; height:auto; display:block; border:0;
    filter:grayscale(38%) contrast(1.02);
    transition:filter .6s ease, transform 1.4s cubic-bezier(.16,.8,.2,1);
    transform:scale(1.001);
  }
  .col:hover .cell img,
  .col:hover .cell video{
    filter:grayscale(0%) contrast(1.02);
    transform:scale(1.045);
  }
  .cell .tag{
    position:absolute; left:12px; bottom:12px;
    color:#fff; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    opacity:0; transition:opacity .4s ease;
    font-weight:600;
    text-shadow:0 1px 6px rgba(0,0,0,.5);
  }
  .col:hover .cell .tag{ opacity:.85; }


  video.autoplay-v::-webkit-media-controls,
  video.autoplay-v::-webkit-media-controls-start-playback-button,
  video.thumb-video-el::-webkit-media-controls,
  video.thumb-video-el::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }
  .cell video{ object-fit:cover; aspect-ratio:4/5; height:auto; }
  /* iPhone Safari freezes <video> on its first frame when a CSS filter or
     transform is applied to it — keep videos plain on touch screens. */
  @media (hover: none){
    .cell video, .col .cell video, .col:hover .cell video{ filter:none !important; transform:none !important; transition:none !important; }
  }

  /* ---------- OVERLAY PANELS ---------- */
  .panel{
    position:fixed; inset:0; z-index:200;
    background:var(--panel); color:var(--panel-ink);
    overflow-y:auto;
    opacity:0; visibility:hidden;
    transform:translateY(14px);
    transition:opacity .5s cubic-bezier(.16,.8,.2,1), transform .5s cubic-bezier(.16,.8,.2,1), visibility .5s;
    padding:0 0 calc(120px + env(safe-area-inset-bottom, 0px));
  }
  .panel.open{ opacity:1; visibility:visible; transform:translateY(0); }

  .panel-head{
    position:sticky; top:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:calc(26px + env(safe-area-inset-top, 0px)) calc(28px + env(safe-area-inset-right, 0px)) 26px calc(28px + env(safe-area-inset-left, 0px));
    z-index:5;
    background:linear-gradient(to bottom, var(--panel) 60%, transparent);
  }
  .panel-eyebrow{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--panel-ink-soft); font-weight:600;
  }
  .panel-close{
    background:none; border:1px solid var(--panel-line); color:var(--panel-ink);
    width:36px; height:36px; border-radius:50%;
    font-size:16px; display:flex; align-items:center; justify-content:center;
    transition:border-color .3s ease, transform .3s ease;
  }
  .panel-close:hover{ border-color:var(--gold); transform:rotate(90deg); }

  .panel-inner{ max-width:1180px; margin:0 auto; padding:60px 40px 0; }
  #panel-about .panel-inner{ margin-left:0; }

  .panel h1{
    font-size:clamp(34px, 6vw, 74px);
    font-weight:800; letter-spacing:-.01em; line-height:1.05;
    margin-bottom:26px;
  }
  .panel .sub{
    font-size:15px; color:var(--panel-ink); font-weight:400; line-height:1.9;
    max-width:640px; margin-bottom:52px;
  }
  .about-intro{
    display:grid; grid-template-columns: 1fr 1.3fr; gap:60px; align-items:start;
  }
  .about-intro-left{ position:sticky; top:40px; }
  .about-intro-right{ text-align:left; }
  .about-intro-right .sub{ max-width:640px; }
  .panel .sub b{ color:var(--panel-ink); font-weight:600; }

  .pillars{
    display:grid; grid-template-columns:1fr 1.25fr; gap:1px;
    background:var(--panel-line); margin-top:10px;
  }
  .pillar{ background:var(--panel); padding:36px 28px; }
  .pillar:nth-child(2n){ padding-left:10px; }
  .pillar .num{ font-size:11px; color:var(--gold); font-weight:700; letter-spacing:.1em; }
  .pillar h3{ font-size:16px; font-weight:700; margin:16px 0 10px; letter-spacing:-.01em; }
  .pillar p{ font-size:12.5px; color:var(--panel-ink-soft); line-height:1.7; }
  .pillar-list{ list-style:none; }
  .pillar-list li{ font-size:12.5px; color:var(--panel-ink-soft); line-height:1.9; }
  .pillar-list li::before{ content:'· '; }

  /* artist grid */
  .artist-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--panel-line); margin-top:6px; }
  .artist-card{ background:var(--panel); }
  .artist-photo{ aspect-ratio:3/4; overflow:hidden; }
  .artist-photo img{ filter:grayscale(30%); transition:filter .5s ease, transform .8s ease; }
  .artist-card:hover .artist-photo img{ filter:grayscale(0%); transform:scale(1.03); }
  .artist-name-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 4px; border-bottom:1px solid transparent; cursor:pointer;
  }
  .artist-name-row .en{ font-size:15px; font-weight:700; letter-spacing:.01em; }
  .artist-name-row .kr{ font-size:11px; color:var(--panel-ink-soft); margin-top:3px; }

  /* simple content blocks */
  .lines{ border-top:1px solid var(--panel-line); margin-top:40px; }
  .row-line{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:26px 4px; border-bottom:1px solid var(--panel-line);
    font-size:14px;
  }
  .row-line .l{ font-weight:700; letter-spacing:.02em; }
  .row-line .r{ color:var(--panel-ink-soft); font-size:12.5px; max-width:420px; text-align:right; line-height:1.7; }
  .row-line{ cursor:pointer; position:relative; }
  .row-line .l::before{
    content:'+'; display:inline-block; width:14px; color:var(--gold); font-weight:700;
    transition:transform .3s ease;
  }
  .row-line.active .l::before{ content:'−'; }
  .row-sub{
    max-height:0; overflow:hidden; display:flex; flex-wrap:wrap; gap:10px;
    transition:max-height .35s ease, padding .35s ease;
    padding:0 4px;
  }
  .row-sub.open{ max-height:200px; padding:18px 4px 22px; }
  .row-sub span{
    font-size:11.5px; letter-spacing:.04em; color:var(--panel-ink-soft);
    border:1px solid var(--panel-line); border-radius:20px; padding:7px 14px;
  }

  .contact-list{ margin-top:20px; }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
  .contact-item{ padding:20px 0; border-bottom:1px solid var(--panel-line); }
  .contact-item .k{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; }
  .contact-item .v{ font-size:15px; font-weight:500; margin-top:10px; letter-spacing:-.005em; }
  .contact-item .v.addr{ font-size:15px; font-weight:400; line-height:1.85; color:var(--panel-ink); }

  .yt-section{ margin-top:56px; }
  .yt-section-title{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:22px; }

  /* ---------- CASTING ---------- */
  #panel-casting{ padding:0; overflow-y:auto; }
  #panel-casting .casting-head-floating{
    position:absolute; top:0; left:0; right:0; background:none; z-index:20;
  }
  #panel-casting .casting-head-floating .panel-eyebrow{ color:rgba(255,255,255,.85); }
  #panel-casting .casting-head-floating .panel-close{ color:#fff; border-color:rgba(255,255,255,.4); }
  #panel-casting .casting-head-floating .panel-close:hover{ border-color:#fff; }
  #panel-casting.form-active .casting-head-floating{ position:sticky; background:#fff; }
  #panel-casting.form-active .casting-head-floating .panel-eyebrow{ color:rgba(0,0,0,.55); }
  #panel-casting.form-active .casting-head-floating .panel-close{ color:#111; border-color:rgba(0,0,0,.2); }
  #panel-casting.form-active .casting-head-floating .panel-close:hover{ border-color:#111; }

  .casting-intro{
    position:absolute; inset:0; background-size:cover; background-position:center 20%;
    display:flex; align-items:center; justify-content:center;
  }
  .casting-intro-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.62); }
  .casting-intro-content{
    position:relative; z-index:2; text-align:center; color:#fff;
    max-width:600px; padding:0 28px;
  }
  .casting-intro-content h2{
    font-size:clamp(22px,3.2vw,34px); font-weight:800; letter-spacing:.04em; margin-bottom:28px;
  }
  .casting-intro-content p{
    font-size:15px; line-height:1.9; color:rgba(255,255,255,.88); margin-bottom:34px;
  }
  @media (max-width:600px){
    .casting-intro-content p{ font-size:10px; }
  }
  .casting-intro-content button{
    background:none; border:1px solid #fff; color:#fff; font-size:13px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; padding:14px 38px; cursor:pointer;
    transition:background .25s ease, color .25s ease;
  }
  .casting-intro-content button:hover{ background:#fff; color:#111; }

  .casting-form-wrap{ display:none; background:#fff; min-height:100%; }
  #panel-casting.form-active .casting-form-wrap{ display:block; }
  #panel-casting.form-active .casting-intro{ display:none; }
  .casting-form-wrap, .casting-form-wrap h1, .casting-form-wrap label, .casting-form-wrap input{ color:#111; }
  .casting-form-wrap .panel-inner{ padding:120px 40px 80px; }
  .casting-gform{ width:100%; max-width:760px; margin:0 auto; overflow:hidden; }
  .casting-gform .cf-note{ margin-top:16px; }
  .casting-gform iframe{ display:block; width:100%; max-width:100%; height:460px; border:0; background:#fff; }
  .gform-mobile-btn, .gform-mobile-intro{ display:none !important; }
  @media (max-width:860px){ .casting-gform iframe, .casting-gform .cf-note{ display:none; } .gform-mobile-btn{ display:block !important; margin-top:32px; } .gform-mobile-intro{ display:block !important; } }
  .cf-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:34px 60px; margin-top:20px;
  }
  .cf-field label{
    display:block; font-size:13px; letter-spacing:.02em; font-weight:700; margin-bottom:10px; color:#111;
  }
  .cf-field label .cf-en{
    display:block; font-size:10px; letter-spacing:.1em; font-weight:600; color:#aaa; margin-top:3px;
  }
  .cf-field input{
    width:100%; border:none; border-bottom:1px solid #ccc; padding:8px 2px; font-size:14px;
    background:transparent; outline:none; color:#111;
  }
  .cf-field input:focus{ border-color:#111; }
  .cf-field input::placeholder{ color:#aaa; }

  .cf-photos{
    display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:56px;
  }
  .cf-photo-slot{ display:flex; flex-direction:column; align-items:center; }
  .cf-photo-box{
    position:relative; width:100%; aspect-ratio:3/4; background:#f4f3f1; border:1px solid #e2e0da;
    cursor:pointer; display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .cf-photo-box .cf-num{
    position:absolute; top:10px; left:10px; width:24px; height:24px; border:1px solid #ccc;
    display:flex; align-items:center; justify-content:center; font-size:12px; background:#fff;
  }
  .cf-photo-box .cf-ph{
    font-size:11px; letter-spacing:.08em; color:#999; text-align:center; line-height:1.6;
  }
  .cf-preview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .cf-upload-label{
    margin-top:14px; font-size:12px; font-weight:700; letter-spacing:.04em; text-decoration:underline;
    text-underline-offset:3px; color:#111;
  }
  .cf-note{ font-size:12px; color:#888; line-height:1.7; margin-top:40px; }
  .cf-error{ font-size:13px; color:#c0392b; line-height:1.7; margin-top:16px; font-weight:600; }
  .cf-submit[disabled]{ opacity:.55; cursor:default; }
  .casting-success{
    display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    min-height:70vh; padding:40px;
  }
  .casting-success h2{ font-size:clamp(22px,3vw,32px); font-weight:800; color:#111; margin-bottom:18px; }
  .casting-success p{ font-size:15px; line-height:1.9; color:#555; }
  .cf-submit{
    display:block; width:100%; margin-top:20px; background:#111; color:#fff; border:none;
    padding:20px; font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
    transition:background .25s ease;
  }
  .cf-submit:hover{ background:var(--gold); color:#111; }

  @media (max-width:700px){
    .cf-grid{ grid-template-columns:1fr; gap:26px; }
    .cf-photos{ grid-template-columns:1fr; gap:24px; }
    .casting-form-wrap .panel-inner{ padding:100px 20px 60px; }
  }

  /* ---------- PRESS ---------- */
  #panel-press{
    overflow:hidden; padding-bottom:0; display:flex; flex-direction:column;
    --press-left-pad: max(40px, calc((100vw - 1180px) / 2 + 40px));
    --press-timeline-w: 95px;
  }
  #panel-press .press-top{ padding-bottom:16px; flex:0 0 auto; width:100%; }
  .press-head-row{ display:flex; justify-content:flex-start; align-items:center; }
  .press-search{
    position:relative; width:240px;
    margin-left:var(--press-timeline-w);
  }
  .press-search input{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--panel-line);
    color:var(--panel-ink); font-size:13px; padding:8px 24px 8px 0; outline:none; letter-spacing:.02em;
  }
  .press-search input::placeholder{ color:var(--panel-ink-soft); }
  .press-search input:focus{ border-color:var(--gold); }
  .press-search svg{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--panel-ink-soft); pointer-events:none; }

  .press-body{
    display:flex; flex:1 1 auto; min-height:0; align-items:flex-start;
    padding-left:var(--press-left-pad);
  }

  .press-timeline{
    flex:0 0 auto; width:var(--press-timeline-w); display:flex; flex-direction:column; align-items:flex-start;
    gap:10px; padding-top:0; overflow-y:auto; scrollbar-width:none;
  }
  .press-timeline::-webkit-scrollbar{ display:none; }
  .press-timeline button{
    background:none; border:none; color:var(--panel-ink-soft);
    font-size:15px; font-weight:600; letter-spacing:.02em; padding:2px 0; transition:color .2s ease;
  }
  .press-timeline button.active{ color:var(--panel-ink); font-size:21px; font-weight:800; cursor:pointer; }
  .press-timeline button.active:hover{ color:var(--gold); }
  .press-timeline button.disabled{ color:rgba(243,241,236,.22); cursor:default; }

  .press-grid{
    display:grid; grid-auto-flow:column; grid-template-rows:repeat(2, auto);
    grid-auto-columns:195px; column-gap:30px; row-gap:24px;
    flex:1 1 auto; min-width:0;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    padding-right:40px; padding-bottom:14px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;
  }
  .press-grid::-webkit-scrollbar{ height:4px; }
  .press-grid::-webkit-scrollbar-track{ background:transparent; }
  .press-grid::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:2px; }
  .press-grid::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); }
  .press-card{ cursor:pointer; display:flex; flex-direction:column; background:#1c1c1c; transition:background .25s ease; overflow:hidden; }
  .press-card:hover{ background:#242424; }
  .press-thumb{
    position:relative; width:100%; aspect-ratio:1/1; background:#2a2a2a; overflow:hidden; flex:0 0 auto;
  }
  .press-thumb img{ width:100%; height:100%; object-fit:contain; background:#000; }
  .press-thumb .ph-icon{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.18); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  }
  .press-card:hover .press-thumb{ background:#333; }
  .press-date{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--panel-ink-soft); margin-top:10px; padding:0 10px; flex:0 0 auto; }
  .press-title{
    font-size:12.5px; font-weight:700; line-height:1.3; margin:3px 0 10px; color:var(--panel-ink);
    padding:0 10px; flex:0 0 auto; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .press-more{
    grid-row:1 / span 2; display:flex; align-items:center; justify-content:center;
    width:110px; flex:0 0 auto;
  }
  .press-more button{
    background:none; border:none; color:var(--panel-ink); font-size:12.5px; font-weight:600; line-height:1.4;
    padding-bottom:3px; border-bottom:1px solid var(--panel-ink); cursor:pointer; white-space:nowrap;
  }
  .press-more button:hover{ color:var(--gold); border-color:var(--gold); }
  .press-empty{ color:var(--panel-ink-soft); font-size:14px; display:none; }
  .press-inner-pad{ padding-left:28px; }
  @media (max-width:860px){
    #panel-press{ --press-left-pad:20px; }
  }
  @media (max-width:600px){
    #panel-press{ --press-left-pad:16px; --press-timeline-w:41px; }
    .press-timeline{ gap:8px; }
    .press-timeline button{ font-size:12px; }
    .press-timeline button.active{ font-size:12px; }
    .press-grid{ grid-auto-columns:150px; column-gap:18px; row-gap:16px; }
  }
  .yt-list{ display:flex; flex-direction:column; }
  .yt-row{
    display:flex; align-items:center; gap:28px;
    padding:26px 4px; border-bottom:1px solid var(--panel-line);
    text-decoration:none; color:inherit;
  }
  .yt-row:first-child{ border-top:1px solid var(--panel-line); }
  .yt-left{ display:flex; flex-direction:column; align-items:center; width:96px; flex:0 0 96px; text-align:center; }
  .yt-avatar{
    width:84px; height:84px; border-radius:50%; overflow:hidden; background:#0e0d0a;
    border:1px solid var(--panel-line);
  }
  .yt-avatar img{ width:100%; height:100%; object-fit:cover; filter:grayscale(20%); transition:filter .4s ease; }
  .yt-row:hover .yt-avatar img{ filter:grayscale(0%); }
  .yt-left .yt-kr{ font-size:12.5px; color:var(--panel-ink); font-weight:600; margin-top:12px; }
  .yt-left .yt-channel{ font-size:10.5px; color:var(--panel-ink-soft); margin-top:2px; line-height:1.4; }
  .yt-left .yt-soon{ font-size:10px; letter-spacing:.06em; color:var(--panel-ink-soft); opacity:.6; margin-top:2px; display:block; }
  .yt-banner{
    flex:1; position:relative; aspect-ratio:16/3.2; overflow:hidden; background:#0e0d0a; min-width:0;
  }
  .yt-banner img{ width:100%; height:100%; object-fit:cover; filter:grayscale(30%); transition:filter .4s ease, transform .6s ease; }
  .yt-row:hover .yt-banner img{ filter:grayscale(0%); transform:scale(1.03); }
  .yt-play{ display:none; }
  .map-links{ display:flex; gap:8px; margin-top:16px; }
  .map-icon{ width:17px; height:17px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--panel-line); color:var(--panel-ink); transition:opacity .3s ease, transform .3s ease, border-color .3s ease; }
  .map-icon:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
  .contact-map{ margin-top:0; width:100%; border:1px solid var(--panel-line); overflow:hidden; align-self:center; }
  .contact-map img{ display:block; width:100%; height:auto; filter:grayscale(20%) brightness(.96); transition:filter .5s ease; }
  .contact-map:hover img{ filter:grayscale(0%) brightness(1); }
  .contact-item .v a{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--panel-line); transition:color .3s ease, text-decoration-color .3s ease; }
  .contact-item .v a:hover{ color:var(--gold); text-decoration-color:var(--gold); }

  /* ---------- ARTIST DETAIL PAGE ---------- */
  .ad-wrap{ max-width:640px; margin:0 auto; padding:44px 24px 0; text-align:center; }
  .ad-hero{
    position:relative; width:66%; aspect-ratio:3/4.05; overflow:hidden;
    background:#0e0d0a; margin:0 auto;
  }
  .ad-hero img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .4s ease; }
  .ad-arrow{
    position:absolute; top:50%; right:14px; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.5); color:#fff;
    font-size:20px; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .3s ease, background .3s ease;
  }
  .ad-hero:hover .ad-arrow{ opacity:1; }
  .ad-arrow:hover{ background:rgba(0,0,0,.6); }

  .ad-name-en{ margin-top:26px; font-size:24px; font-weight:100; letter-spacing:.14em; }
  .ad-name-kr{ margin-top:8px; font-size:13.5px; font-weight:400; letter-spacing:.5em; padding-left:.5em; color:var(--panel-ink-soft); }
  .ad-stats{ margin-top:14px; font-size:11px; letter-spacing:.05em; color:var(--panel-ink-soft); display:flex; align-items:center; justify-content:center; gap:18px; }
  .ad-socials{ margin-top:20px; display:flex; align-items:center; justify-content:center; gap:16px; }
  .ad-socials a{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--panel-line);
    display:flex; align-items:center; justify-content:center; color:var(--panel-ink);
    transition:border-color .3s ease, color .3s ease;
  }
  .ad-socials a:hover{ border-color:var(--gold); color:var(--gold); }
  .ad-socials svg{ width:14px; height:14px; }

  .ad-tabs{
    margin-top:44px; padding:0 24px 18px; max-width:1180px; margin-left:auto; margin-right:auto;
    display:flex; align-items:center; gap:26px; border-bottom:1px solid var(--panel-line);
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  }
  .ad-tabs button{ background:none; border:none; color:var(--panel-ink-soft); font-weight:600; padding:6px 0; position:relative; }
  .ad-tabs button.active{ color:var(--panel-ink); }
  .ad-tabs button.active::after{ content:''; position:absolute; left:0; right:0; bottom:-19px; height:1px; background:var(--gold); }
  .ad-tabs .ad-tabs-spacer{ flex:1; }

  .ad-grid{
    max-width:1180px; margin:0 auto; padding:26px 24px 0;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:22px 16px;
  }
  .ad-grid .thumb{ display:flex; flex-direction:column; cursor:pointer; }
  .ad-grid .thumb .thumb-img{ aspect-ratio:3/4; overflow:hidden; background:#0e0d0a; position:relative; }
  .ad-grid .thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(15%); transition:filter .4s ease, transform .6s ease; }
  .ad-grid .thumb:hover img{ filter:grayscale(0%); transform:scale(1.03); }
  .ad-grid .thumb-video .thumb-poster{ position:absolute; inset:0; z-index:1; transition:opacity .35s ease, filter .4s ease, transform .6s ease; }
  .ad-grid .thumb-video-el{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .35s ease; background:#0e0d0a;
  }
  .ad-grid .thumb-video:hover .thumb-poster{ opacity:0; }
  .ad-grid .thumb-video:hover .thumb-video-el{ opacity:1; }
  .ad-grid .thumb-video.playing .thumb-poster{ opacity:0; }
  .ad-grid .thumb-video.playing .thumb-video-el{ opacity:1; }
  .ad-grid .thumb .thumb-caption{
    margin-top:10px; font-size:12px; font-weight:700; letter-spacing:.01em;
    text-transform:uppercase; color:var(--panel-ink); line-height:1.4;
  }
  .ad-grid.ad-3col{ grid-template-columns:repeat(4, 1fr); gap:34px 28px; max-width:1120px; }
  .ad-grid.ad-3col .thumb-img{ aspect-ratio:9/16; }
  .ad-grid.cat-broadcast{ grid-template-columns:repeat(6, 1fr); gap:20px 12px; }
  .ad-grid.cat-broadcast .thumb-caption{ font-size:9.5px; line-height:1.35; margin-top:8px; }
  .ad-empty{ padding:60px 24px 0; text-align:center; font-size:13px; color:var(--panel-ink-soft); }

  .ad-career{
    max-width:1180px; margin:0 auto; padding:34px 24px 10px;
    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:28px 24px;
  }
  .ad-career-col h4{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--gold); margin-bottom:14px; }
  .ad-career-col ul{ list-style:none; }
  .ad-career-col li{ font-size:12px; font-weight:400; color:var(--panel-ink); padding:9px 0; border-bottom:1px solid var(--panel-line); line-height:1.4; }
  .ad-career-col.wide{ grid-column:span 2; }

  @media (max-width:860px){
    .ad-grid{ grid-template-columns:repeat(2,1fr); }
    .ad-grid.cat-broadcast{ grid-template-columns:repeat(3,1fr); }
    .ad-career{ grid-template-columns:1fr 1fr; }
    .ad-career-col.wide{ grid-column:span 2; }
  }

  @media (max-width: 860px){
    .pc-break{ display:none; }
    .about-intro{ display:block; }
    .about-intro-left{ position:static; margin-bottom:28px; }
    .about-intro-right .sub{ max-width:760px; }
    header{ padding-left:16px; padding-right:16px; }
    .logo{ font-size:14px; letter-spacing:.24em; }
    .logo-img{ height:22px; }
    .nav-link{ font-size:9.5px; }
    .gallery{ grid-template-columns:repeat(2,1fr); }
    .gallery .col:nth-child(n+3){ display:none; }
    .gallery .cell .tag{ display:none; }
    .panel-inner{ padding:40px 20px 0; }
    .pillars, .artist-grid{ grid-template-columns:repeat(2,1fr); }
    .row-line{ flex-direction:column; gap:8px; }
    .row-line .r{ text-align:left; max-width:none; }
    .ad-socials{ flex-wrap:wrap; }
  }

  /* phone */
  @media (max-width: 600px){
    :root{ --header-h:56px; }
    header{ padding-left:14px; padding-right:14px; }
    .logo-img{ height:19px; }
    .nav-left .nav-link{ font-size:9px; }
    .menu-drop{ right:-14px; padding:14px 14px 4px; gap:12px; }
    .panel-inner{ padding:28px 16px 0; }
    .panel h1{ margin-bottom:18px; }
    .panel .sub{ font-size:13.5px; line-height:1.75; margin-bottom:32px; }
    .panel-eyebrow{ margin-bottom:14px; }

    .gallery{ gap:2px; }

    #panel-about .panel-inner{ margin-left:auto; }
    .pillars{ grid-template-columns:1fr; }
    .pillar{ padding:26px 18px; }
    .pillar:nth-child(2n){ padding-left:18px; }
    .pillar h3{ font-size:15px; }
    .pillar-list li{ font-size:12px; line-height:1.8; }

    .artist-grid{ grid-template-columns:1fr 1fr; }
    .artist-name-row .en{ font-size:13px; }

    .ad-grid{ grid-template-columns:1fr 1fr; }
    .ad-grid.cat-broadcast{ grid-template-columns:repeat(2,1fr); }
    .ad-career{ grid-template-columns:1fr; gap:0; }
    .ad-career-col.wide{ grid-column:span 1; }
    .ad-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }

    .contact-item{ padding:16px 0; }
    .contact-grid{ grid-template-columns:1fr; gap:0; }
    .contact-map{ margin-top:20px; }
    .contact-item .v{ font-size:14px; }
    .contact-item .v.addr{ font-size:14px; }

    .row-line{ padding:18px 4px; font-size:13px; }
  }

  @media (max-width: 380px){
    .artist-grid{ grid-template-columns:1fr; }
    .ad-grid{ grid-template-columns:1fr; }
    .yt-row{ flex-direction:column; gap:14px; padding:22px 4px; }
    .yt-left{ flex-direction:row; width:auto; gap:12px; text-align:left; }
    .yt-left .yt-kr, .yt-left .yt-channel, .yt-left .yt-soon{ margin-top:0; }
    .yt-avatar{ width:52px; height:52px; }
    .yt-banner{ width:100%; aspect-ratio:16/3.2; }
  }

  /* ---------- TOUCH DEVICES ----------
     :hover never fires on touch, so anything gated purely behind :hover
     (play icon, next-image arrow, gallery tag) would otherwise stay
     permanently invisible. Show them by default when there is no fine
     hover-capable pointer. */
  @media (hover: none){
    .cell .tag{ opacity:.85; }
    .ad-arrow{ opacity:1; }
    /* touch screens: no per-photo filter/zoom layers — these made every
       photo a separate GPU layer and caused stutter on mid/low-end phones */
    .col .cell img, .col .cell video,
    .col:hover .cell img, .col:hover .cell video{ filter:none; transform:none; transition:none; }
    .artist-photo img{ filter:grayscale(0%); }
    .yt-avatar img, .yt-banner img{ filter:grayscale(0%); }
    .ad-grid .thumb img{ filter:grayscale(0%); }
    .contact-map img{ filter:grayscale(0%) brightness(1); }
  }

  /* comfortable tap targets on touch/small screens */
  @media (max-width: 600px){
    .panel-close{ width:40px; height:40px; }
    .menu-trigger{ padding:10px 2px 10px 10px; }
    .nav-link{ padding:10px 2px; }
    .map-icon{ width:30px; height:30px; }
  }