:root{
  --bg:#16090f;
  --bg2:#241018;
  --ink:#26171a;
  --muted:#7c6568;
  --dim:#9a8082;
  --paper:#fff8ef;
  --paper2:#fffdf8;
  --wine:#722034;
  --crimson:#b83c58;
  --rose:#d98b9b;
  --gold:#d7b06a;
  --gold2:#f2d79a;
  --line:rgba(95,56,62,.16);
  --line2:rgba(95,56,62,.25);
  --shadow:0 26px 70px rgba(0,0,0,.28);
  --shadow-soft:0 16px 38px rgba(72,32,42,.16);
  --radius:28px;
  --serif:"Noto Serif KR",serif;
  --sans:"IBM Plex Sans KR",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--sans);
  word-break:keep-all;
  overflow-x:hidden;
  background:
    radial-gradient(980px 580px at 12% 6%,rgba(184,60,88,.24),transparent 60%),
    radial-gradient(880px 540px at 88% 8%,rgba(215,176,106,.18),transparent 62%),
    linear-gradient(180deg,#12070d,#241018 48%,#10070b);
}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;-webkit-user-drag:none}
.bg-glow,.bg-grid,.bg-grain{position:fixed;inset:0;pointer-events:none}
.bg-glow{
  z-index:-4;
  background:
    radial-gradient(circle at 18% 16%,rgba(215,176,106,.14),transparent 28rem),
    radial-gradient(circle at 78% 22%,rgba(184,60,88,.20),transparent 30rem),
    radial-gradient(circle at 50% 110%,rgba(217,139,155,.10),transparent 36rem);
  filter:saturate(1.04);
}
.bg-grid{
  z-index:-3;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,236,220,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,236,220,.16) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 78%);
}
.bg-grain{
  z-index:-2;
  opacity:.10;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}
.shell{width:min(1180px,calc(100% - 38px));margin:0 auto}
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px clamp(16px,4vw,42px);
  background:rgba(18,8,13,.72);
  border-bottom:1px solid rgba(255,236,220,.10);
  backdrop-filter:blur(16px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  padding:0;
  background:transparent;
  color:#fff4ea;
  text-align:left;
}
.brand-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,236,220,.20);
  border-radius:16px;
  background:
    radial-gradient(circle at 30% 20%,rgba(242,215,154,.70),transparent 35%),
    linear-gradient(135deg,var(--wine),var(--crimson));
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  font-family:var(--serif);
  font-weight:900;
}
.brand-copy strong{display:block;font-family:var(--serif);font-weight:900;font-size:1rem;letter-spacing:.04em}
.brand-copy em{display:block;margin-top:2px;color:rgba(255,236,220,.62);font-family:var(--mono);font-style:normal;font-size:.66rem}
.nav{display:flex;gap:8px}
.nav button,.soft-btn{
  border:1px solid rgba(255,236,220,.16);
  border-radius:999px;
  background:rgba(255,248,241,.10);
  color:#fff2e8;
  padding:9px 13px;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:700;
}
.nav button:hover,.soft-btn:hover{background:rgba(255,248,241,.16)}
main{padding-bottom:44px}
.hero{padding:30px 0 16px}
.hero-card{
  position:relative;
  overflow:hidden;
  min-height:430px;
  display:grid;
  align-content:center;
  border:1px solid rgba(255,236,220,.16);
  border-radius:38px;
  padding:clamp(28px,6vw,70px);
  background:
    radial-gradient(540px 320px at 86% 12%,rgba(215,176,106,.28),transparent 65%),
    radial-gradient(560px 320px at 10% 100%,rgba(217,139,155,.18),transparent 68%),
    linear-gradient(135deg,rgba(255,248,241,.96),rgba(255,242,230,.90));
  box-shadow:var(--shadow);
}
.hero-card:before{
  content:"IMPERIAL";
  position:absolute;
  right:-.06em;
  bottom:-.21em;
  color:rgba(114,32,52,.065);
  font-family:var(--serif);
  font-size:clamp(5rem,17vw,15rem);
  font-weight:900;
  letter-spacing:-.08em;
  line-height:.85;
}
.seal{
  position:absolute;
  right:38px;
  top:34px;
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border:1px solid rgba(114,32,52,.18);
  border-radius:50%;
  color:var(--gold);
  background:rgba(255,253,248,.62);
  font-size:2rem;
  box-shadow:0 12px 34px rgba(72,32,42,.12);
}
.eyebrow{
  margin:0 0 10px;
  color:var(--crimson);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero h1{
  position:relative;
  margin:0;
  color:var(--wine);
  font-family:var(--serif);
  font-size:clamp(3rem,8vw,7.4rem);
  line-height:.92;
  letter-spacing:-.08em;
  font-weight:900;
}
.hero h1 span{
  background:linear-gradient(90deg,var(--wine),var(--crimson),var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  position:relative;
  max-width:660px;
  margin:18px 0 0;
  color:var(--muted);
  line-height:1.72;
  font-weight:600;
}
.hero-tools{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,520px) auto;
  gap:10px;
  margin-top:24px;
  align-items:center;
}
.search-box{
  height:50px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,253,248,.82);
  padding:0 16px;
  box-shadow:0 12px 28px rgba(72,32,42,.08);
}
.search-box span{color:var(--crimson);font-weight:900}
.search-box input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-weight:700;
}
.search-box input::placeholder{color:#a68d90}
.soft-btn{
  color:var(--wine);
  background:rgba(255,253,248,.76);
  border-color:var(--line);
  height:50px;
  padding-inline:18px;
}
.stats{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.stats span{
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,253,248,.66);
  padding:8px 12px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
}
.section{padding:22px 0}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:14px;
}
.section-head h2{
  margin:0;
  color:#fff4ea;
  font-family:var(--serif);
  font-size:clamp(1.7rem,3.8vw,3.1rem);
  line-height:1.05;
  letter-spacing:-.055em;
}
.section-head .eyebrow{color:var(--gold)}
.count-label{
  margin:0;
  color:rgba(255,236,220,.62);
  font-family:var(--mono);
  font-size:.78rem;
}
.roster-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.card{
  position:relative;
  display:grid;
  grid-template-columns:38% 62%;
  overflow:hidden;
  min-height:230px;
  border:1px solid rgba(255,236,220,.12);
  border-radius:30px;
  background:rgba(255,248,241,.96);
  box-shadow:var(--shadow-soft);
  text-align:left;
  padding:0;
  transition:.18s ease;
  content-visibility:auto;
  contain-intrinsic-size:240px;
}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(0,0,0,.22)}
.card:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:5px;
  background:linear-gradient(90deg,var(--gold),var(--crimson),var(--rose));
}
.card-img{
  position:relative;
  overflow:hidden;
  background:#2b121a;
}
.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-body{
  min-width:0;
  padding:18px 19px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.card-no{
  color:var(--crimson);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:800;
}
.card-name{
  margin:6px 0 8px;
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.04em;
}
.card-meta{
  margin:0;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.76rem;
  line-height:1.55;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}
.chips span{
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,253,248,.78);
  color:#5d4248;
  padding:5px 8px;
  font-size:.68rem;
  font-weight:700;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}
.shot{
  position:relative;
  overflow:hidden;
  aspect-ratio:1216/832;
  border:1px solid rgba(255,236,220,.12);
  border-radius:22px;
  background:#241018;
  padding:0;
  box-shadow:var(--shadow-soft);
  transition:.18s ease;
  content-visibility:auto;
  contain-intrinsic-size:180px;
}
.shot:hover{transform:translateY(-3px)}
.shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.shot span{
  position:absolute;
  left:10px;
  bottom:10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(20,8,13,.58);
  color:#fff3e8;
  padding:7px 10px;
  font-family:var(--mono);
  font-size:.7rem;
}
.footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:22px 0 34px;
  border-top:1px solid rgba(255,236,220,.10);
  color:rgba(255,236,220,.55);
  font-family:var(--mono);
  font-size:.72rem;
}
.overlay{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  place-items:center;
  padding:18px;
  background:rgba(9,5,8,.68);
  backdrop-filter:blur(10px);
  overflow:auto;
}
.overlay.show{display:grid}
.modal-card{
  position:relative;
  width:min(1060px,100%);
  max-height:calc(100dvh - 36px);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
  overflow:hidden;
  border:1px solid rgba(255,236,220,.18);
  border-radius:34px;
  background:var(--paper);
  box-shadow:0 32px 110px rgba(0,0,0,.42);
}
.close-x{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,253,248,.86);
  color:var(--wine);
  font-size:1.4rem;
  font-weight:900;
}
.modal-visual{
  position:relative;
  background:#211017;
  padding:18px;
}
.modal-visual img{
  width:100%;
  height:100%;
  max-height:calc(100dvh - 72px);
  aspect-ratio:1216/832;
  object-fit:contain;
  display:block;
  background:#211017;
  border-radius:22px;
}
.image-tag{
  position:absolute;
  left:30px;
  bottom:30px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(20,8,13,.62);
  color:#fff3e8;
  padding:8px 11px;
  font-family:var(--mono);
  font-size:.72rem;
}
.modal-info{
  overflow:auto;
  padding:clamp(24px,4vw,42px);
}
.modal-info h3{
  margin:0 0 18px;
  font-family:var(--serif);
  color:var(--wine);
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.06;
  letter-spacing:-.06em;
}
.info-list{
  display:grid;
  gap:10px;
}
.info-list div{
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,253,248,.70);
  padding:14px;
}
.info-list b{
  display:block;
  color:var(--crimson);
  font-family:var(--mono);
  font-size:.72rem;
  margin-bottom:6px;
}
.info-list span{
  color:var(--muted);
  line-height:1.6;
}
.modal-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}
.modal-nav button,.lightbox-top button{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(215,176,106,.18),rgba(184,60,88,.12));
  color:var(--wine);
  padding:11px;
  font-weight:800;
}
.lightbox-card,.help-card{
  width:min(1060px,100%);
  overflow:hidden;
  border:1px solid rgba(255,236,220,.18);
  border-radius:30px;
  background:var(--paper);
  box-shadow:0 32px 110px rgba(0,0,0,.42);
}
.lightbox-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(255,253,248,.82);
}
.lightbox-top p{
  margin:0;
  color:var(--wine);
  font-family:var(--mono);
  font-weight:800;
}
.lightbox-top div{
  display:flex;
  gap:8px;
}
.lightbox-card img{
  width:100%;
  max-height:82dvh;
  object-fit:contain;
  display:block;
  background:#211017;
}
.help-card{
  padding-bottom:18px;
}
.help-card > p{
  margin:18px;
  color:var(--muted);
  line-height:1.75;
}
@media (max-width:900px){
  .roster-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal-card{grid-template-columns:1fr;max-height:none}
  .modal-visual img{max-height:none}
}
@media (max-width:620px){
  body{background:linear-gradient(180deg,#16090f,#241018)}
  .bg-grid,.bg-grain{display:none}
  .topbar{padding:10px 12px;backdrop-filter:none}
  .brand-mark{width:36px;height:36px;border-radius:13px}
  .brand-copy strong{font-size:.86rem}
  .brand-copy em{display:none}
  .nav{gap:5px}
  .nav button{padding:8px 9px;font-size:.66rem}
  .shell{width:min(100% - 22px,1180px)}
  .hero{padding:16px 0 10px}
  .hero-card{min-height:340px;border-radius:28px;padding:28px 20px}
  .seal{width:52px;height:52px;right:20px;top:20px;font-size:1.4rem}
  .hero h1{font-size:clamp(2.8rem,17vw,4.8rem)}
  .hero-sub{font-size:.88rem;line-height:1.62}
  .hero-tools{grid-template-columns:1fr;gap:8px}
  .search-box,.soft-btn{height:46px}
  .section{padding:16px 0}
  .section-head{display:block}
  .count-label{margin-top:8px}
  .card{
    grid-template-columns:108px 1fr;
    min-height:136px;
    border-radius:22px;
  }
  .card-body{padding:12px 13px}
  .card-name{
    font-size:1.05rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .card-meta{
    font-size:.66rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .chips{gap:5px;margin-top:8px}
  .chips span{font-size:.58rem;padding:4px 7px}
  .chips span:nth-child(n+3){display:none}
  .gallery-grid{gap:10px}
  .overlay{padding:0;backdrop-filter:none}
  .modal-card,.lightbox-card,.help-card{
    min-height:100dvh;
    width:100%;
    border-radius:0;
    border:0;
  }
  .modal-visual{padding:10px}
  .modal-visual img{border-radius:16px}
  .image-tag{left:20px;bottom:20px;font-size:.64rem}
  .modal-info{padding:20px 18px 30px}
  .info-list div{border-radius:16px}
  .lightbox-top{align-items:flex-start}
  .lightbox-top div{display:grid;grid-template-columns:1fr 1fr 1fr}
  .lightbox-top button{padding:9px;font-size:.74rem}
  .footer{display:block;line-height:1.8}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

:root{
  --serif:"Cormorant Garamond","Noto Sans KR",serif !important;
  --sans:"IBM Plex Sans KR","Noto Sans KR",system-ui,-apple-system,sans-serif !important;
}

.topbar{
  padding:10px clamp(16px,4vw,38px) !important;
}
.brand-mark{
  width:40px !important;
  height:40px !important;
  border-radius:14px !important;
  font-family:var(--serif) !important;
  font-size:1.05rem !important;
}
.brand-copy strong{
  font-family:var(--serif) !important;
  font-size:1.05rem !important;
  letter-spacing:.055em !important;
}
.brand-copy em{
  font-size:.62rem !important;
  letter-spacing:.035em !important;
}
.nav button{
  padding:8px 12px !important;
  font-size:.68rem !important;
}

.hero{
  padding:24px 0 12px !important;
}
.hero-card{
  width:min(960px,100%) !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:clamp(28px,4.2vw,48px) !important;
  border-radius:30px !important;
}
.hero-card:before{
  font-size:clamp(4rem,12vw,9.2rem) !important;
  right:-.04em !important;
  bottom:-.18em !important;
  opacity:.78 !important;
}
.seal{
  width:54px !important;
  height:54px !important;
  right:28px !important;
  top:26px !important;
  font-size:1.45rem !important;
}
.eyebrow{
  font-size:.64rem !important;
  letter-spacing:.14em !important;
}
.hero h1{
  font-family:var(--serif) !important;
  font-size:clamp(3rem,6.6vw,5.15rem) !important;
  line-height:.88 !important;
  letter-spacing:-.045em !important;
}
.hero-sub{
  max-width:620px !important;
  margin-top:14px !important;
  font-size:.92rem !important;
  line-height:1.65 !important;
  font-weight:500 !important;
}
.hero-tools{
  grid-template-columns:minmax(240px,420px) 140px !important;
  margin-top:20px !important;
}
.search-box,
.soft-btn{
  height:44px !important;
  font-size:.82rem !important;
}
.stats{
  margin-top:16px !important;
}
.stats span{
  padding:7px 11px !important;
  font-size:.66rem !important;
}

.section{
  padding:18px 0 !important;
}
.section-head{
  margin-bottom:12px !important;
}
.section-head h2{
  font-family:var(--sans) !important;
  font-size:clamp(1.45rem,2.8vw,2.35rem) !important;
  letter-spacing:-.045em !important;
  font-weight:900 !important;
}

.roster-grid{
  gap:14px !important;
}
.card{
  min-height:198px !important;
  border-radius:24px !important;
  grid-template-columns:36% 64% !important;
}
.card-body{
  padding:16px 17px !important;
}
.card-name{
  font-family:var(--sans) !important;
  font-size:1.16rem !important;
  font-weight:900 !important;
  letter-spacing:-.045em !important;
}
.card-meta{
  font-size:.7rem !important;
}
.chips span{
  font-size:.63rem !important;
}

.gallery-grid{
  gap:11px !important;
}
.shot{
  border-radius:18px !important;
}

.modal-info h3{
  font-family:var(--sans) !important;
  font-size:clamp(1.85rem,3.2vw,2.75rem) !important;
  letter-spacing:-.055em !important;
}
.info-list b,
.card-no,
.count-label,
.image-tag,
.lightbox-top p{
  font-family:var(--mono) !important;
}

@media (max-width:620px){
  .topbar{
    padding:9px 11px !important;
  }
  .brand-mark{
    width:34px !important;
    height:34px !important;
  }
  .brand-copy strong{
    font-size:.86rem !important;
  }
  .nav button{
    padding:7px 8px !important;
    font-size:.62rem !important;
  }
  .hero{
    padding:14px 0 8px !important;
  }
  .hero-card{
    min-height:0 !important;
    border-radius:22px !important;
    padding:22px 17px !important;
  }
  .seal{
    width:42px !important;
    height:42px !important;
    right:16px !important;
    top:16px !important;
  }
  .hero h1{
    font-size:clamp(2.45rem,14vw,3.7rem) !important;
    line-height:.92 !important;
  }
  .hero-sub{
    font-size:.8rem !important;
    line-height:1.55 !important;
    padding-right:8px !important;
  }
  .hero-tools{
    grid-template-columns:1fr !important;
    margin-top:16px !important;
  }
  .search-box,
  .soft-btn{
    height:42px !important;
  }
  .stats span{
    font-size:.58rem !important;
    padding:6px 9px !important;
  }
  .section-head h2{
    font-size:1.38rem !important;
  }
  .card{
    grid-template-columns:104px 1fr !important;
    min-height:130px !important;
    border-radius:18px !important;
  }
  .card-body{
    padding:11px 12px !important;
  }
  .card-name{
    font-size:.98rem !important;
  }
  .card-meta{
    font-size:.62rem !important;
  }
}

.hero{
  padding:18px 0 8px !important;
}

.hero-card{
  width:min(1060px,100%) !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:22px 24px 24px !important;
  border-radius:24px !important;
  background:
    radial-gradient(360px 180px at 94% 8%,rgba(215,176,106,.18),transparent 68%),
    radial-gradient(340px 180px at 3% 12%,rgba(184,60,88,.12),transparent 68%),
    linear-gradient(135deg,rgba(255,248,241,.96),rgba(255,243,232,.90)) !important;
}

.hero-card:before{
  display:none !important;
}

.seal{
  width:40px !important;
  height:40px !important;
  right:24px !important;
  top:20px !important;
  font-size:1.05rem !important;
  opacity:.8 !important;
}

.hero .eyebrow{
  margin-bottom:6px !important;
  color:rgba(184,60,88,.72) !important;
  font-size:.62rem !important;
  letter-spacing:.20em !important;
}

.hero h1{
  font-family:var(--sans) !important;
  font-size:1.42rem !important;
  line-height:1.16 !important;
  letter-spacing:-.035em !important;
  color:#3f292d !important;
}

.hero h1 br{
  display:none !important;
}

.hero h1 span{
  color:#3f292d !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}

.hero-sub{
  display:none !important;
}

.hero-tools{
  grid-template-columns:1fr !important;
  gap:0 !important;
  margin-top:18px !important;
}

.search-box{
  height:48px !important;
  border-radius:999px !important;
  background:rgba(255,253,249,.86) !important;
  box-shadow:0 10px 26px rgba(72,32,42,.08) !important;
}

.search-box input{
  font-size:.86rem !important;
}

.soft-btn{
  display:none !important;
}

.stats{
  margin-top:14px !important;
}

.stats span{
  padding:6px 10px !important;
  font-size:.62rem !important;
  background:rgba(255,253,248,.68) !important;
}

.section:first-of-type{
  padding-top:14px !important;
}

@media (max-width:620px){
  .hero{
    padding:12px 0 6px !important;
  }

  .hero-card{
    padding:18px 16px 18px !important;
    border-radius:20px !important;
  }

  .seal{
    width:34px !important;
    height:34px !important;
    right:16px !important;
    top:16px !important;
  }

  .hero .eyebrow{
    font-size:.56rem !important;
    letter-spacing:.18em !important;
  }

  .hero h1{
    font-size:1.18rem !important;
    max-width:70% !important;
  }

  .hero-tools{
    margin-top:14px !important;
  }

  .search-box{
    height:44px !important;
  }

  .search-box input{
    font-size:.78rem !important;
  }

  .stats{
    gap:6px !important;
    margin-top:12px !important;
  }

  .stats span{
    font-size:.55rem !important;
    padding:5px 8px !important;
  }
}

:root{
  --serif:"Playfair Display","Gowun Batang",serif !important;
  --sans:"Noto Sans KR",system-ui,-apple-system,sans-serif !important;
}

body{
  font-family:var(--sans) !important;
  letter-spacing:-.01em !important;
}
.brand-copy strong,
.hero h1,
.modal-info h3{
  font-family:var(--serif) !important;
}
.card-name,
.section-head h2{
  font-family:var(--sans) !important;
}

.hero h1{
  font-weight:800 !important;
  letter-spacing:-.025em !important;
}
.hero .eyebrow,
.card-no,
.count-label,
.card-meta,
.image-tag,
.stats span{
  font-family:var(--mono) !important;
}

@media (min-width:901px){
  .roster-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .card{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  .card-img{
    width:100% !important;
    aspect-ratio:1216/832 !important;
    height:auto !important;
    min-height:0 !important;
  }

  .card-img img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  .card-body{
    padding:13px 14px 16px !important;
    display:block !important;
  }

  .card-no{
    display:block !important;
    font-size:.62rem !important;
    letter-spacing:.08em !important;
    margin-bottom:5px !important;
  }

  .card-name{
    margin:0 0 7px !important;
    font-size:1.02rem !important;
    line-height:1.2 !important;
    letter-spacing:-.035em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .card-meta{
    font-size:.64rem !important;
    line-height:1.45 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .chips{
    margin-top:9px !important;
    gap:5px !important;
  }

  .chips span{
    font-size:.56rem !important;
    padding:4px 7px !important;
  }

  .chips span:nth-child(n+3){
    display:none !important;
  }
}

@media (min-width:701px) and (max-width:1200px){
  .roster-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (min-width:901px){
  .gallery-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .shot{
    aspect-ratio:1216/832 !important;
    border-radius:20px !important;
  }
}

@media (max-width:900px){
  .card{
    display:grid !important;
    grid-template-columns:112px 1fr !important;
  }

  .card-img{
    width:112px !important;
    height:100% !important;
    min-height:136px !important;
    aspect-ratio:auto !important;
  }

  .card-img img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

@media (max-width:620px){
  .card{
    grid-template-columns:104px 1fr !important;
  }

  .card-img{
    width:104px !important;
    min-height:130px !important;
  }

  .card-name{
    font-size:.96rem !important;
    font-family:var(--sans) !important;
  }
}

.modal-card{
  width:min(880px,94vw) !important;
  max-height:min(760px,92dvh) !important;
  grid-template-columns:minmax(0,.95fr) minmax(300px,.82fr) !important;
  border-radius:26px !important;
}

.modal-visual{
  padding:14px !important;
}

.modal-visual img{
  max-height:min(520px,72dvh) !important;
  border-radius:18px !important;
}

.close-x{
  width:36px !important;
  height:36px !important;
  top:12px !important;
  right:12px !important;
  font-size:1.25rem !important;
}

.image-tag{
  left:24px !important;
  bottom:24px !important;
  padding:7px 10px !important;
  font-size:.66rem !important;
}

.modal-info{
  padding:28px 28px 30px !important;
}

.modal-info h3{
  margin-bottom:14px !important;
  font-size:clamp(1.7rem,2.8vw,2.45rem) !important;
  line-height:1.08 !important;
}

.info-list{
  gap:8px !important;
}

.info-list div{
  border-radius:15px !important;
  padding:10px 12px !important;
}

.info-list b{
  margin-bottom:3px !important;
  font-size:.66rem !important;
}

.info-list span{
  font-size:.9rem !important;
  line-height:1.45 !important;
}

.modal-nav{
  gap:8px !important;
  margin-top:12px !important;
}

.modal-nav button{
  border-radius:14px !important;
  padding:9px !important;
  font-size:.86rem !important;
}

.lightbox-card{
  width:min(980px,94vw) !important;
}

@media (max-width:900px){
  .modal-card{
    width:min(560px,calc(100% - 22px)) !important;
    min-height:0 !important;
    max-height:92dvh !important;
    grid-template-columns:1fr !important;
    border-radius:24px !important;
    overflow:auto !important;
  }

  .modal-visual{
    padding:10px 10px 0 !important;
  }

  .modal-visual img{
    width:100% !important;
    max-height:36svh !important;
    aspect-ratio:1216/832 !important;
    object-fit:cover !important;
    border-radius:16px !important;
  }

  .modal-info{
    padding:16px 16px 20px !important;
  }

  .modal-info .eyebrow{
    font-size:.56rem !important;
    margin-bottom:6px !important;
  }

  .modal-info h3{
    font-size:1.45rem !important;
    margin-bottom:10px !important;
    line-height:1.12 !important;
  }

  .info-list{
    gap:7px !important;
  }

  .info-list div{
    padding:9px 11px !important;
    border-radius:13px !important;
  }

  .info-list b{
    font-size:.62rem !important;
  }

  .info-list span{
    font-size:.82rem !important;
  }

  .modal-nav{
    margin-top:10px !important;
  }

  .modal-nav button{
    padding:9px 6px !important;
    font-size:.82rem !important;
  }
}

@media (max-width:620px){
  .overlay{
    padding:12px !important;
    place-items:center !important;
  }

  .modal-card{
    min-height:0 !important;
    width:100% !important;
    max-height:90dvh !important;
    border-radius:22px !important;
  }

  .modal-visual img{
    max-height:31svh !important;
    object-fit:cover !important;
  }

  .image-tag{
    left:20px !important;
    bottom:12px !important;
    font-size:.58rem !important;
    padding:6px 9px !important;
  }

  .close-x{
    width:34px !important;
    height:34px !important;
    top:10px !important;
    right:10px !important;
  }

  .modal-info{
    padding:14px 14px 17px !important;
  }

  .modal-info h3{
    font-size:1.32rem !important;
  }

  .info-list div{
    padding:8px 10px !important;
  }

  .info-list span{
    font-size:.78rem !important;
  }

  .lightbox-card{
    min-height:100dvh !important;
    width:100% !important;
    border-radius:0 !important;
  }
}


img{max-width:100%;-webkit-user-drag:none}
.card,.shot{content-visibility:auto}
.card{contain-intrinsic-size:240px}
.shot{contain-intrinsic-size:180px}
@media (max-width:620px){
  .bg-grid,.bg-grain{display:none!important}
  .topbar,.overlay{backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}


/* v7: compact help modal on mobile */
#helpModal{
  align-items:center !important;
}

.help-card{
  min-height:0 !important;
  height:auto !important;
  max-height:min(420px,82dvh) !important;
  width:min(520px,calc(100% - 24px)) !important;
  border-radius:22px !important;
  overflow:auto !important;
}

.help-card .lightbox-top{
  padding:11px 13px !important;
}

.help-card > p{
  margin:14px 16px 18px !important;
  font-size:.9rem !important;
  line-height:1.65 !important;
}

@media (max-width:620px){
  #helpModal{
    padding:12px !important;
    place-items:center !important;
  }

  .help-card{
    min-height:0 !important;
    height:auto !important;
    max-height:70dvh !important;
    width:100% !important;
    border-radius:20px !important;
    border:1px solid rgba(255,236,220,.18) !important;
  }

  .help-card .lightbox-top{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:10px 12px !important;
  }

  .help-card .lightbox-top button{
    padding:7px 11px !important;
    font-size:.72rem !important;
    border-radius:999px !important;
  }

  .help-card > p{
    margin:13px 15px 16px !important;
    font-size:.82rem !important;
    line-height:1.62 !important;
  }
}


/* v8: sharper mobile images + compact gallery lightbox */
@media (max-width:620px){
  /* 갤러리 확대창이 세로로 길게 비는 문제 방지 */
  #lightbox{
    padding:12px !important;
    place-items:center !important;
  }

  .lightbox-card{
    min-height:0 !important;
    height:auto !important;
    width:100% !important;
    max-height:88dvh !important;
    border-radius:22px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,236,220,.18) !important;
  }

  .lightbox-card img{
    width:100% !important;
    height:auto !important;
    max-height:64dvh !important;
    object-fit:contain !important;
    background:#211017 !important;
  }

  .lightbox-top{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:10px 12px !important;
  }

  .lightbox-top p{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:.72rem !important;
  }

  .lightbox-top div{
    display:flex !important;
    gap:5px !important;
    flex:0 0 auto !important;
  }

  .lightbox-top button{
    padding:7px 8px !important;
    font-size:.68rem !important;
    border-radius:999px !important;
  }

  /* 모바일 목록/갤러리 이미지가 흐릿해 보이지 않도록 필터 과보정 방지 */
  .card-img img,
  .shot img,
  .modal-visual img,
  .lightbox-card img{
    image-rendering:auto !important;
    filter:none !important;
  }
}

@media (min-width:621px){
  .lightbox-card img{
    image-rendering:auto !important;
  }
}