/* =============================
   PhotoKorea – Daily 10 Modern UI
   ============================= */

/* Tokens */
:root{
  --bg: #f6f8fb;
  --paper: #ffffff;
  --text: #1f2a37;
  --muted: #6b7280;
  --muted-2: #9aa4b2;
  --brand: #ef4b9c;      /* 뱃지 포인트 */
  --primary: #4f8cff;    /* 버튼/링크 */
  --primary-2: #3a74ea;
  --ring: 0 0 0 3px rgba(79,140,255,.25);
  --radius: 16px;
  --radius-sm: 14px;
  --shadow-1: 0 6px 16px rgba(15, 23, 42, .08);
  --shadow-2: 0 12px 28px rgba(15, 23, 42, .12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", Helvetica, Arial, sans-serif;
  background: #f6f8fb;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pk-wrap{
  top: 10px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px 48px;
}

/* Header */
.pk-header{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  margin-bottom: 10px;
}
.pk-title{
  grid-column: 2 / 3;
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-weight:800; font-size: 28px; letter-spacing:.2px;
}
.pk-logo{font-size:1.1em; color:#e91e63}
.pk-badge{
  background: linear-gradient(135deg, var(--brand), #ff77c8);
  color:#fff; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight:700;
  box-shadow: var(--shadow-1);
}
.pk-actions{
  grid-column: 3 / 4; justify-self:end;
}

/* Sub */
.pk-sub{
  text-align:center;
  color: var(--muted);
  margin: 8px 0 20px;
  font-size: 15px;
}

/* Buttons */
.pk-btn{
  height:40px; padding: 0 14px; border:none; border-radius: 999px;
  font-weight:700; cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .06s ease, box-shadow .2s;
}
.pk-btn:active{transform: translateY(1px)}
.pk-btn--primary{background: var(--primary); color:#fff; box-shadow: var(--shadow-1)}
.pk-btn--primary:hover{background: var(--primary-2)}
.pk-btn--ghost{
  background:#fff; color: var(--text);
  border:1px solid #e5e7eb; box-shadow: var(--shadow-1);
}
.pk-btn--ghost:hover{background:#f5f7fb}

/* Grid (반응형) */
.pk-grid{
  display:grid; gap: 18px;
}

/* 모바일 2열 */
@media (max-width: 479px){
  .pk-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* 태블릿 3열 */
@media (min-width:480px) and (max-width:1023px){
  .pk-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* 데스크탑 4열 */
@media (min-width:1024px){
  .pk-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Card */
.pk-card{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .22s ease;
  cursor:pointer;
  border: 1px solid #eef1f5;
}
.pk-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2) }

/* Thumbnail */
.pk-card__thumb{ position:relative; overflow:hidden }
.pk-card__img{
  display:block; width:100%; height:auto;
  aspect-ratio: 16 / 10; object-fit: cover;
  background:#e9eef5;
  transition: transform .25s ease, filter .25s ease;
}
.pk-card:hover .pk-card__img{ transform: scale(1.02); filter: saturate(1.06) }

/* Body */
.pk-card__body{ padding: 14px 16px 16px }
.pk-card__title{
  margin:0 0 10px;
  font-size: 15.5px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #0f172a;
}

/* Meta 2열(좌:지역, 우:기관) */
.pk-card__meta{
  display:flex; align-items:center; justify-content:space-between;
  font-size: 12.5px; gap:10px;
}
.pk-location{ color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pk-provider{ color:#94a3b8; white-space:nowrap }

.pk-icon{ margin-right:6px }

/* Empty & Footer */
.pk-empty{
  grid-column: 1 / -1;
  text-align:center; padding: 56px 12px; color: #94a3b8;
  background: #fff; border-radius: var(--radius);
}
.pk-footer{
  margin-top: 50px; text-align:center;
  border-top : none !important;
}
.pk-foot-note{
  margin: 14px 0 0;
  color: var(--muted);
  line-height:1.6; font-size: 14px;
}

/* Focus ring (접근성) */
.pk-card:focus-within, .pk-btn:focus-visible{
  outline:none; box-shadow: var(--ring);
}

/***** =========================================
 * PhotoKorea Responsive Reinforcement Patch
 * → 이 블록을 파일 맨 아래에 추가 (Override)
 * ========================================== */

/* 0) 공통 토큰 확장 + 안전영역 + 모션 배려 */
:root{
  --fs-xs: clamp(12px, .85vw, 13px);
  --fs-sm: clamp(13px, 1vw, 14px);
  --fs-md: clamp(14px, 1.2vw, 16px);
  --fs-lg: clamp(16px, 1.6vw, 20px);
  --fs-xl: clamp(20px, 3.2vw, 32px);

  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}

@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
  .pk-card:hover .pk-card__img { transform: none !important; filter: none !important; }
  .pk-card:hover { transform: none !important; }
}

body{
  padding-left: max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}

/* 1) 컨테이너 여백/폭 → 작은 화면 가독성 보강 */
.pk-wrap{
  max-width: min(1180px, 94vw);
  padding-left: 16px;
  padding-right: 16px;
}

/* 2) 헤더 그리드 → 모바일 2행, 태블릿 단순화 */
@media (max-width: 640px){
  .pk-header{
    grid-template-columns: 1fr auto; grid-auto-rows: auto;
    row-gap: 10px;
  }
  .pk-title{ grid-column: 1 / -1; justify-content: center; font-size: var(--fs-xl); }
  .pk-actions{ grid-column: 2 / 3; justify-self: end; }
}
@media (min-width: 641px) and (max-width: 1023px){
  .pk-title{ font-size: clamp(22px, 2.2vw, 26px); }
}

/* 3) 서브텍스트 유동 폰트 */
.pk-sub{ font-size: var(--fs-sm); }

/* 4) 버튼: 터치 타깃/폰트/간격 보강 */
.pk-btn{
  min-height: 42px;
  font-size: var(--fs-sm);
  padding: 0 16px;
}

/* 5) 그리드: auto-fit/minmax로 더 유연하게
   - 기존 @media 2/3/4열은 유지하되,
   - 더 작은/어색한 폭에서 자동으로 대응 */
.pk-grid{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* 모바일 강제 2열 유지가 필요하면 그대로 두고,
   더 작은 폭(<=360px)에서 자동 1~2열 스위치 */
@media (max-width: 360px){
  .pk-grid{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* 6) 카드: 작은 화면에서 여백/그림자 완화 */
@media (max-width: 480px){
  .pk-card{ border-radius: 14px; box-shadow: var(--shadow-1); }
  .pk-card__body{ padding: 12px 12px 14px; }
}

/* 7) 썸네일: 고정 비율 유지 + 저폭에서 살짝 더 높은 비율 */
.pk-card__img{ aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 480px){
  .pk-card__img{ aspect-ratio: 16 / 11; }
}

/* 8) 제목/메타 타이포 유동화 + 말줄임 안정화 */
.pk-card__title{ font-size: clamp(14.5px, 1.2vw, 16px); }
.pk-card__meta{ font-size: var(--fs-xs); gap: 8px; }
.pk-location, .pk-provider{
  min-width: 0;   /* flex overflow 안전 */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 9) 빈 상태/푸터: 여백·폰트 반응형 */
.pk-empty{ padding: clamp(36px, 8vw, 64px) 12px; }
.pk-foot-note{ font-size: var(--fs-sm); }

/* 10) 포커스 가시성 (키보드 접근성) */
.pk-card:focus-within, .pk-btn:focus-visible{
  outline: none; box-shadow: var(--ring);
}

/* 11) 다크모드(선택): 대비 살짝 상향 */
@media (prefers-color-scheme: dark){
  :root{ --paper:#0f1620; --text:#e5e7eb; --muted:#9aa4b2; }
  .pk-card{ border-color: rgba(255,255,255,.06); }
  .pk-btn--ghost{ background:white; border-color: rgba(255,255,255,.08); }
  .pk-btn--ghost:hover{ background:#131c28; }
}

/* 12) 초고해상도(>1600px)에서 카드 과확대 방지 */
@media (min-width: 1600px){
  .pk-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}

@media (max-width: 640px){
  /* 그리드 한 개씩 */
  .pk-grid{
    grid-template-columns: 1fr !important;  /* 1열 고정 */
    gap: 14px;                               /* 간격 살짝 줄임(선택) */
  }

  /* 카드/본문 여백 소폭 최적화(선택) */
  .pk-card{ width: 100%; border-radius: var(--radius-sm); }
  .pk-card__body{ padding: 12px 12px 14px; }

  /* 썸네일은 화면 좁을 때 세로 여유(선택) */
  .pk-card__img{ aspect-ratio: 16 / 11; object-fit: cover; }

  /* 제목/메타 폰트 살짝 컴팩트(선택) */
  .pk-card__title{ font-size: clamp(14px, 4.2vw, 16px); }
  .pk-card__meta{ font-size: clamp(12px, 3.2vw, 13px); }
}