.portfolio-reader-page {
  display: block;
  min-height: 100%;
  background: var(--gray-white);
}

.portfolio-reader {
  width: 100%;
  min-height: 100vh;
}

.reader-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reader-actions {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 10;
  display: flex;
  gap: var(--space-8);
}

.reader-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: 0 var(--space-16);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 24px;
  background: rgba(18, 18, 18, .78);
  color: var(--gray-white);
  font: 500 13px/1.2 "Pretendard", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.reader-action:hover { background: rgba(18, 18, 18, .94); }
.reader-action:focus-visible { outline: 2px solid var(--gray-white); outline-offset: 3px; }
.reader-action span { color: inherit; }
.reader-action svg { display: block; flex: none; }
.reader-action[hidden] { display: none; }

.reader-work,
.reader-content { width: 100%; margin: 0; }

.reader-content > *,
.reader-content figure,
.reader-content p { margin: 0; }

.reader-content figure,
.reader-content p:has(img) { line-height: 0; }

.reader-content img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

.reader-content video,
.reader-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}

.reader-work-info {
  width: 100%;
  padding: 36px var(--space-24);
  background: var(--gray-white);
}

.reader-work-info-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-32);
  align-items: end;
  width: min(100%, 1100px);
  margin: 0 auto;
}

.reader-info-label {
  display: block;
  margin-bottom: var(--space-8);
  color: var(--gray-500);
  font: 500 12px/1.4 "Pretendard", sans-serif;
}

.reader-work-info h2 {
  color: var(--gray-800);
  font: 600 22px/1.4 "Pretendard", sans-serif;
  overflow-wrap: anywhere;
}

.reader-work-info p {
  color: var(--gray-600);
  font: 400 14px/1.5 "Pretendard", sans-serif;
}

.reader-neighbors {
  width: 100%;
  padding: 28px var(--space-24) 56px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-white);
}

.reader-neighbors-inner { width: min(100%, 1100px); margin: 0 auto; }
.reader-neighbors h2 { margin-bottom: var(--space-20); color: var(--gray-800); font: 600 16px/1.4 "Pretendard", sans-serif; }
.reader-neighbors-track { display: flex; gap: var(--space-16); }
.reader-neighbor-card {
  display: flex;
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  flex-direction: column;
  color: var(--gray-700);
  text-decoration: none;
}
.reader-neighbor-image { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gray-100); }
.reader-neighbor-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.reader-neighbor-direction { margin-top: var(--space-12); color: var(--gray-500); font: 400 12px/1.4 "Pretendard", sans-serif; }
.reader-neighbor-card strong { margin-top: var(--space-4); font: 600 14px/1.5 "Pretendard", sans-serif; overflow-wrap: anywhere; }
.reader-neighbor-card:focus-visible { outline: 2px solid #5e21dc; outline-offset: 4px; }
@media (hover: hover) { .reader-neighbor-card:hover img { transform: scale(1.035); } }

.reader-notice {
  width: 100%;
  padding: 44px var(--space-24) 52px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-100);
}

.reader-notice-inner {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 28px;
  width: min(100%, 1100px);
  margin: 0 auto;
}

.reader-notice-label {
  color: var(--gray-600);
  font: 600 13px/1.7 "Pretendard", sans-serif;
}

.reader-notice-copy { color: var(--gray-500); font: 400 13px/1.8 "Pretendard", sans-serif; }
.reader-notice-copy p + p { margin-top: var(--space-4); }

@media (max-width: 767px) {
  .reader-actions {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    gap: 6px;
  }
  .reader-action { padding: 0 var(--space-12); font-size: 12px; }
  .reader-work-info { padding: 28px var(--space-20); }
  .reader-work-info-inner { grid-template-columns: 1fr; gap: 18px; }
  .reader-work-info h2 { font-size: 18px; }
  .reader-neighbors { padding: var(--space-64) var(--space-20) var(--space-40); }
  .reader-neighbors h2 { margin-bottom: var(--space-16); }
  .reader-neighbors-track { gap: var(--space-12); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--space-12); scrollbar-width: thin; }
  .reader-neighbor-card { flex-basis: calc((100% - 12px) / 2.1); scroll-snap-align: start; }
  .reader-neighbor-card strong { font-size: 13px; }
  .reader-notice { padding: var(--space-32) var(--space-20) var(--space-40); }
  .reader-notice-inner { grid-template-columns: 1fr; gap: 10px; }
  .reader-notice-copy { font-size: 12px; }
}

.reader-engagement{padding:var(--space-24) var(--public-gutter,var(--space-40)) var(--space-40);background:var(--gray-white)}
.reader-engagement-inner{max-width:var(--public-content-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);flex-wrap:wrap}
.reader-view-count{color:var(--gray-500);font-size:13px;line-height:1.6}
.reader-view-count span{color:inherit;margin-left:6px}
.reader-engagement .content-actions{margin:0;min-height:44px}
.reader-engagement .content-actions button{min-height:44px}
@media(max-width:767px){.reader-engagement{padding:var(--space-20) var(--space-20) var(--space-32)}.reader-engagement-inner{gap:var(--space-12)}.reader-engagement [data-content-actions]{min-width:0}}