:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #111;
  --muted: #666;
  --rule: #111;
  --sans: "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --label-size: clamp(15px, 1.2vw, 18px);
  --row-height: clamp(34px, calc(1.25vw + 16px), 38px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: auto; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body { overflow-x: hidden; }
body.detail-open { height: 100svh; overflow: hidden; }
a { color: inherit; text-decoration: none; }

.site-header { position: fixed; z-index: 20; inset: 0 0 auto; height: var(--row-height); padding: 0 18px; display: flex; justify-content: flex-start; align-items: center; gap: 34px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.wordmark, .top-nav a { font-size: 11px; font-weight: 300; letter-spacing: .08em; }
.wordmark { position: static; width: auto; padding: 0; text-align: left; white-space: nowrap; }
.top-nav { display: flex; gap: 34px; }
.top-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
main { min-height: 100svh; }

.project-info::-webkit-scrollbar { display: none; }
.project-info { scrollbar-width: none; }
.work-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Detail page: a centered feature followed by a labeled image grid. */
.project-layout { position: fixed; inset: var(--row-height) 0 0; display: grid; grid-template-columns: minmax(80px,var(--detail-list-size,9.09vw)) 8px minmax(150px,var(--detail-caption-size,27.27vw)) 8px minmax(250px,1fr); font-family: var(--sans); font-weight: 400; }
.project-list { min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.project-list::-webkit-scrollbar { display: none; }
.project-list-rows { min-width: 0; }
.project-list-item { display: grid; grid-template-columns: 2.2em minmax(0,1.35fr) minmax(2.8em,.65fr) minmax(0,1.25fr); gap: 7px; align-items: center; width: 100%; height: var(--row-height); padding: 4px 10px; border: 0; border-bottom: 1px solid var(--rule); background: var(--paper); color: var(--ink); text-align: left; font-size: calc(var(--label-size) * .78); line-height: 1.25; font-weight: 300; cursor: default; }
.project-list-item:hover, .project-list-item:focus-visible, .project-list-item.is-current { background: transparent; }
.project-list-item:focus-visible { outline: 1px solid var(--ink); outline-offset: -2px; }
.project-list-thumb { display: block; width: 2.2em; height: 2.2em; overflow: hidden; border: 1px solid #aaa; background: transparent; }
.project-list-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-list-rows > .project-list-item { grid-template-columns: minmax(0,1fr); gap: 8px; align-items: start; height: auto; padding: 12px 12px 14px; cursor: pointer; }
.project-list-rows > .project-list-item .project-list-thumb { width: 100%; height: auto; overflow: visible; border: 1px solid #ddd; }
.project-list-rows > .project-list-item .project-list-thumb img { width: 100%; height: auto; object-fit: contain; }
.project-info { min-width: 0; min-height: 0; overflow-y: auto; display: block; }
.project-content { border-bottom: 1px solid var(--rule); }
.project-content-list { max-height: 30svh; overflow-y: auto; scrollbar-width: none; }
.project-content-list::-webkit-scrollbar { display: none; }
.project-content-item { grid-template-columns: minmax(0,1fr); }
.project-content-display { padding: 20px clamp(18px, 2vw, 32px); outline: none; }
.project-content-text, .project-content-empty { margin: 0 0 16px; font-size: var(--label-size); line-height: 1.6; }
.project-content-empty { color: var(--muted); }
.project-content-image { display: block; width: 100%; height: auto; margin-top: 16px; object-fit: contain; }
.pane-splitter { position: relative; z-index: 2; min-width: 6px; cursor: col-resize; touch-action: none; outline: none; }
.pane-splitter::after { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--rule); content: ""; transform: translateX(-50%); }
.pane-splitter[data-splitter="caption"]::after { display: none; }
.pane-splitter:hover, .pane-splitter:focus-visible { background: transparent; }
body.resizing-detail-panes, body.resizing-detail-panes * { cursor: col-resize !important; user-select: none !important; }
.project-main { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 24px; background: #000; }
.project-main::-webkit-scrollbar { display: none; }
.detail-feature { min-height: calc(100svh - var(--row-height) - 48px); display: flex; align-items: center; justify-content: center; }
.detail-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px 16px; margin: 0 -24px; padding: clamp(100px, 16vh, 180px) 24px 72px; background: #000; }
.detail-grid-item { display: block; min-width: 0; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; cursor: zoom-in; }
.detail-grid-image { display: block; width: 100%; overflow: visible; background: transparent; }
.detail-grid-image img { display: block; width: 100%; height: auto; object-fit: contain; }
.detail-grid-item:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.image-lightbox[hidden] { display: none; }
.image-lightbox { position: fixed; z-index: 50; inset: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; justify-items: center; padding: 48px 24px 24px; background: rgba(0, 0, 0, .34); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; }
.lightbox-image { display: block; width: 100%; height: calc(100% - 34px); object-fit: contain; }
.lightbox-caption { padding-top: 12px; color: #ddd; font-size: 12px; line-height: 1.4; text-align: center; }
.lightbox-close, .lightbox-nav { border: 0; color: #fff; background: transparent; cursor: pointer; }
.lightbox-close { position: absolute; top: 16px; right: 22px; padding: 4px 8px; font: 300 32px/1 var(--sans); }
.lightbox-nav { width: 44px; height: 60px; font: 300 32px/1 var(--sans); }
.video-stage { width: 100%; max-width: 1200px; background: #000; }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; object-fit: contain; }
.detail-video-player { width: min(100%, 1200px); margin: clamp(100px, 16vh, 180px) auto 0; padding: 0 0 72px; background: #000; }
.still-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: calc(100svh - var(--row-height) - 48px); overflow: hidden; background: #000; }
.still-stage .work-image { flex: 0 1 auto; }
.caption { padding: 28px clamp(18px, 2vw, 32px); text-align: left; }
.caption h1 { margin: 0 0 10px; font-size: var(--label-size); font-weight: 400; }
.caption-meta { margin: 0; color: var(--ink); font-size: clamp(12px, .9vw, 14px); line-height: 1.35; white-space: normal; }
.project-description { margin: 16px 0 0; font-size: var(--label-size); line-height: 1.7; text-align: left; word-break: keep-all; overflow-wrap: break-word; }
.project-description p { margin: 0; }
.project-description p + p { margin-top: .55em; }
.embedded-info { padding: 28px clamp(18px, 2vw, 32px); font-size: var(--label-size); line-height: 1.7; }
.embedded-info h1 { margin: 0 0 24px; font-size: var(--label-size); font-weight: 400; }
.embedded-info p { margin: 0 0 1.2em; }
.embedded-info .embedded-info-education { margin-bottom: 1.2em; }
.archive-text-list { padding: 12px clamp(18px, 2vw, 32px); }
.archive-text-item { display: block; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); text-align: left; font: inherit; font-size: var(--label-size); cursor: pointer; }
.archive-text-item:hover, .archive-text-item:focus-visible { background: transparent; }
.archive-text-item.is-current { font-weight: 500; }
.archive-article { width: min(100%, 900px); min-height: 100%; margin: 0 auto; padding: clamp(40px, 7vw, 104px); color: #fff; }
.archive-article time { display: block; margin-bottom: 28px; font-size: clamp(12px, .9vw, 14px); }
.archive-article-body { font-size: var(--label-size); line-height: 1.7; text-align: left; word-break: keep-all; overflow-wrap: break-word; }
.archive-article-body p { margin: 0 0 1.2em; }
.contact-links { display: flex; gap: 18px; margin-top: 24px; font-size: 10px; }
.not-found { min-height: 100svh; padding: 90px 24px; }
.not-found h1 { font-size: 14px; font-weight: 300; }

@media (max-width: 760px) {
  :root { --label-size: 12px; --row-height: 30px; }
  .site-header { height: var(--row-height); padding: 0 13px; gap: 14px; }
  .project-layout { inset: var(--row-height) 0 0; }
  .project-layout { grid-template-columns: minmax(0,var(--detail-list-size,9.09vw)) 6px minmax(0,var(--detail-caption-size,27.27vw)) 6px minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
  .project-list { grid-column: 1; grid-row: 1; }
  .project-layout > .pane-splitter[data-splitter="list"] { grid-column: 2; grid-row: 1; }
  .project-list-rows > .project-list-item { gap: 6px; padding: 8px 6px 10px; }
  .project-content-item { grid-template-columns: minmax(0,1fr); }
  .project-info { grid-column: 3; grid-row: 1; }
  .project-layout > .pane-splitter[data-splitter="caption"] { grid-column: 4; grid-row: 1; }
  .project-main { grid-column: 5; grid-row: 1; padding: 8px; }
  .detail-feature { min-height: calc(100svh - var(--row-height) - 24px); }
  .still-stage { height: calc(100svh - var(--row-height) - 24px); }
  .detail-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; margin: 0 -12px; padding: 96px 12px 48px; }
  .image-lightbox { grid-template-columns: 38px minmax(0, 1fr) 38px; padding: 48px 8px 18px; }
  .lightbox-nav { width: 34px; font-size: 24px; }
  .lightbox-close { top: 12px; right: 10px; }
  .lightbox-caption { font-size: 11px; }
  .project-content-display { padding: 14px 8px; }
  .project-content-text, .project-content-empty { font-size: var(--label-size); }
  .caption { padding: 16px 8px; }
  .embedded-info { padding: 16px 8px; }
  .archive-text-list { padding: 8px 6px; }
  .archive-article { padding: 32px clamp(16px, 5vw, 48px); }
  .contact-links { flex-direction: column; gap: 12px; }
}