/* ‘아니면, 보고 싶은 것으로’의 사진·하단 표제·구분선·화살표를 재사용한다.
   index.html의 data-photo-cards에서 한 토큰만 빼면 그 영역은 기존 디자인으로 돌아간다. */
.photo-director-count{display:none}

/* home — 시작 화면 영화 타일. 기존 모자이크와 사진 선택을 유지한다. */
html[data-photo-cards~="home"] #chips .tile img{filter:saturate(.8);transition:transform .5s ease}
html[data-photo-cards~="home"] #chips .tile .tshade{
  background:linear-gradient(180deg,rgba(4,8,12,.24),rgba(4,8,12,.06) 25%,rgba(4,8,12,.92) 100%)}
html[data-photo-cards~="home"] #chips .tile .tmeta{padding:11px 12px}
html[data-photo-cards~="home"] #chips .tile .tt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;font-size:15px;letter-spacing:-.035em;line-height:1.3}
html[data-photo-cards~="home"] #chips .tile .ty{
  border-top:1px solid rgba(255,255,255,.24);margin-top:6px;padding:5px 21px 0 0;color:#D2DEE5;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-photo-cards~="home"] #chips .tile .tmeta::after{
  content:'↗';position:absolute;right:12px;bottom:11px;color:#fff;font-size:17px;line-height:1;transition:transform .2s}
html[data-photo-cards~="home"] #chips .tile.big .tmeta{padding:22px 24px 18px}
html[data-photo-cards~="home"] #chips .tile.big .tt{font-size:30px}
html[data-photo-cards~="home"] #chips .tile.big .ty{margin-top:18px;padding-top:12px}
html[data-photo-cards~="home"] #chips .tile.big .tmeta::after{right:24px;bottom:19px;font-size:21px}
html[data-photo-cards~="home"] #chips .tile:is(:hover,:focus-visible) img{transform:scale(1.04)}
html[data-photo-cards~="home"] #chips .tile:is(:hover,:focus-visible) .tmeta::after{transform:translate(2px,-2px)}
@media(max-width:1279px){
  html[data-photo-cards~="home"] #chips .tile .tmeta{padding:10px 11px}
  html[data-photo-cards~="home"] #chips .tile .tt{font-size:14px}
  html[data-photo-cards~="home"] #chips .tile .ty{margin-top:7px;padding-top:6px;font-size:10px}
  html[data-photo-cards~="home"] #chips .tile .tmeta::after{right:11px;bottom:11px;font-size:15px}
  html[data-photo-cards~="home"] #chips .tile.big .tmeta{padding:18px}
  html[data-photo-cards~="home"] #chips .tile.big .tt{font-size:26px}
  html[data-photo-cards~="home"] #chips .tile.big .tmeta::after{right:18px;bottom:19px}
}
@media(max-width:600px){
  html[data-photo-cards~="home"] #chips .tile:not(.big) .tmeta{padding:8px 10px}
  html[data-photo-cards~="home"] #chips .tile:not(.big) .tmeta::after{right:10px;bottom:9px}
  html[data-photo-cards~="home"] #chips .tile:not(.big) .ty{margin-top:5px;padding-top:4px}
}

/* directors — 감독 사진 타일. 이름 아래 실제 등록 작품 수를 둔다. */
html[data-photo-cards~="directors"] #v-dir .dgrid{--dir-cols:8;gap:12px}
html[data-photo-cards~="directors"] #v-dir .dcell .dph{filter:saturate(.8)}
html[data-photo-cards~="directors"] #v-dir .dcell::after{inset:0;
  background:linear-gradient(180deg,rgba(4,8,12,.15),rgba(4,8,12,.02) 28%,rgba(4,8,12,.93) 100%)}
html[data-photo-cards~="directors"] #v-dir .dcell .dnm{
  left:13px;right:13px;bottom:48px;font-size:16px;line-height:1.35;font-weight:800;letter-spacing:-.035em}
html[data-photo-cards~="directors"] #v-dir .photo-director-count{
  display:flex;justify-content:space-between;align-items:center;gap:8px;position:absolute;z-index:1;
  left:13px;right:13px;bottom:12px;border-top:1px solid rgba(255,255,255,.24);padding-top:8px;
  font-size:10px;line-height:1.4;color:#D2DEE5}
html[data-photo-cards~="directors"] #v-dir .photo-director-count>span{font-size:17px;line-height:1;transition:transform .2s}
html[data-photo-cards~="directors"] #v-dir .dcell.big .dnm{left:22px;right:22px;bottom:67px;font-size:30px}
html[data-photo-cards~="directors"] #v-dir .dcell.big .photo-director-count{
  left:22px;right:22px;bottom:20px;padding-top:12px;font-size:12px}
html[data-photo-cards~="directors"] #v-dir .dcell:is(:hover,:focus-visible) .photo-director-count>span{transform:translate(2px,-2px)}
@media(max-width:1100px){html[data-photo-cards~="directors"] #v-dir .dgrid{--dir-cols:6}}
@media(max-width:760px){html[data-photo-cards~="directors"] #v-dir .dgrid{--dir-cols:4;gap:8px}}
@media(max-width:520px){
  html[data-photo-cards~="directors"] #v-dir .dgrid{--dir-cols:3;gap:6px}
  html[data-photo-cards~="directors"] #v-dir .dcell .dnm{left:9px;right:9px;bottom:38px;font-size:12px}
  html[data-photo-cards~="directors"] #v-dir .photo-director-count{left:9px;right:9px;bottom:9px;padding-top:6px;font-size:10px;gap:3px}
  html[data-photo-cards~="directors"] #v-dir .dcell.big .dnm{left:16px;right:16px;bottom:53px;font-size:23px}
  html[data-photo-cards~="directors"] #v-dir .dcell.big .photo-director-count{left:16px;right:16px;bottom:14px;padding-top:9px;font-size:11px}
}

/* maps / lists — 지도와 리스트는 각각 독립적으로 복원할 수 있다. */
html[data-photo-cards~="maps"] #mlgrid:has(.mlcard:not(.lcard)),
html[data-photo-cards~="lists"] #mlgrid:has(.lcard){
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard),
html[data-photo-cards~="lists"] #mlgrid .lcard{
  isolation:isolate;min-height:290px;min-width:0;padding:110px 22px 20px;
  justify-content:flex-end;align-items:stretch;border:0;background-image:none!important;
  background-color:#18252D;color:#fff}
html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard)::before,
html[data-photo-cards~="lists"] #mlgrid .lcard::before{
  content:'';position:absolute;inset:0;z-index:-2;background:var(--photo-card-image,none) center/cover no-repeat;
  filter:saturate(.8);transition:transform .5s ease;pointer-events:none}
html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard)::after,
html[data-photo-cards~="lists"] #mlgrid .lcard::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,8,12,.25),rgba(4,8,12,.06) 22%,rgba(4,8,12,.94) 100%)}
html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard) .mlt,
html[data-photo-cards~="lists"] #mlgrid .lcard .mlt{
  font-size:26px;line-height:1.3;font-weight:800;letter-spacing:-.045em;word-break:keep-all;overflow-wrap:anywhere}
html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard) .mld,
html[data-photo-cards~="lists"] #mlgrid .lcard .mld{
  display:block;overflow:visible;-webkit-line-clamp:unset;font-size:13px;line-height:1.65;margin-top:8px;
  color:#DCE2E6;word-break:keep-all;overflow-wrap:anywhere}
html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard) .mlcnt,
html[data-photo-cards~="lists"] #mlgrid .lcard .mlcnt{
  display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.24);
  width:100%;margin-top:24px;padding-top:12px;font-size:11px;line-height:1.5;letter-spacing:0;color:#D2DEE5;opacity:1}
html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard) .mlcnt::after,
html[data-photo-cards~="lists"] #mlgrid .lcard .mlcnt::after{
  content:'↗';font-size:20px;line-height:1;color:#fff;transition:transform .2s}
html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard):is(:hover,:focus-visible)::before,
html[data-photo-cards~="lists"] #mlgrid .lcard:is(:hover,:focus-visible)::before{transform:scale(1.04)}
html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard):is(:hover,:focus-visible) .mlcnt::after,
html[data-photo-cards~="lists"] #mlgrid .lcard:is(:hover,:focus-visible) .mlcnt::after{transform:translate(2px,-2px)}
/* 폴더 입구는 개별 지도 카드와 구분한다. */
html[data-photo-cards~="maps"] #mlgrid .mlcard.mlgate:not(.lcard){min-height:230px;border-top:1px solid var(--line);background-color:#10191F}
@media(max-width:1000px){
  html[data-photo-cards~="maps"] #mlgrid:has(.mlcard:not(.lcard)),
  html[data-photo-cards~="lists"] #mlgrid:has(.lcard){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  html[data-photo-cards~="maps"] #mlgrid:has(.mlcard:not(.lcard)),
  html[data-photo-cards~="lists"] #mlgrid:has(.lcard){grid-template-columns:1fr;gap:14px}
  html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard),
  html[data-photo-cards~="lists"] #mlgrid .lcard{min-height:250px;padding:85px 20px 18px}
  html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard) .mlt,
  html[data-photo-cards~="lists"] #mlgrid .lcard .mlt{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
  html[data-photo-cards~="home"] #chips .tile img,
  html[data-photo-cards~="home"] #chips .tile .tmeta::after,
  html[data-photo-cards~="directors"] #v-dir .dcell .dph,
  html[data-photo-cards~="directors"] #v-dir .photo-director-count>span,
  html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard)::before,
  html[data-photo-cards~="maps"] #mlgrid .mlcard:not(.lcard) .mlcnt::after,
  html[data-photo-cards~="lists"] #mlgrid .lcard::before,
  html[data-photo-cards~="lists"] #mlgrid .lcard .mlcnt::after{transition:none}
}