:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Helvetica Neue", "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 300; color: #191919; background: #fff; font-synthesis: none; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; }
@media (hover: hover) and (pointer: fine) {
 html, body, body * { cursor: url("assets/smiley-cursor.svg?v=70") 11 11, auto; }
 body a, body button, body .portrait { cursor: url("assets/smiley-cursor.svg?v=70") 11 11, pointer; }
}
button { font: inherit; }
.site-nav { position: absolute; top: 24px; left: 28px; display: flex; gap: 18px; z-index: 2; font-size: 12px; line-height: 1.8; font-weight: 300; }
.site-nav a { color: inherit; text-decoration: none; padding: 4px 0; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav a:focus-visible { outline: 1px solid #555; outline-offset: 5px; }
.site-nav a[aria-current="page"] { color: #777; }
.works-page { min-height: 100svh; display: flex; flex-direction: column; }
.works-main { width: 100%; flex: 1; padding: 122px 28px 96px; }
.work-video { width: min(480px, 100%); margin: 0 auto; }
.work-video video { display: block; width: 100%; max-height: 68svh; object-fit: contain; background: #fff; }
.music-video { width: min(640px, 100%); }
.music-video figcaption { margin-top: 28px; text-align: center; }
.music-video h1 { font-size: 14px; font-weight: 300; line-height: 1.8; margin: 0 0 12px; }
.music-video figcaption p { font-size: 12px; font-weight: 300; line-height: 1.9; margin: 0; }
.photo-gallery { width: min(1160px, 100%); margin: 104px auto 0; }
.event-hook { width: min(380px, 100%); margin: 88px auto 0; }
.event-hook video { display: block; width: 100%; height: auto; }
.event-hook + .photo-gallery { margin-top: 48px; }
.project-gallery { margin-top: 110px; }
.project-heading { text-align: center; margin-bottom: 30px; }
.project-heading h2 { font-size: 14px; font-weight: 300; line-height: 1.8; margin: 0; }
.project-heading p { font-size: 12px; font-weight: 300; line-height: 1.9; margin: 10px 0 0; }
.gallery-row { position: relative; }
.photo-track { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; position: relative; }
.photo-track::-webkit-scrollbar { display: none; }
.photo-track:focus-visible { outline: 1px solid #777; outline-offset: 5px; }
.photo-slide { flex: 0 0 auto; margin: 0; padding: 0; scroll-snap-align: start; }
.photo-slide img { display: block; height: clamp(160px, 22vw, 260px); width: auto; max-width: none; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; border: 0; background: rgba(255,255,255,.76); color: #222; font-size: 22px; font-weight: 300; line-height: 1; padding: 0; width: 36px; height: 44px; }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }
.gallery-arrow:disabled { opacity: .35; }
.gallery-arrow:focus-visible { outline: 1px solid #777; outline-offset: -5px; }
.gallery-count { text-align: center; font-size: 10px; color: #777; line-height: 1.8; margin: 18px 0 0; font-variant-numeric: tabular-nums; }
.gallery-credit { text-align: center; font-size: 12px; font-weight: 300; line-height: 1.9; margin: 22px 0 0; }
.gallery-link { text-align: center; font-size: 11px; font-weight: 300; line-height: 1.8; margin: 16px 0 0; }
.gallery-link a { color: inherit; text-decoration: none; display: inline-block; padding: 6px 0; }
.gallery-link a:hover { text-decoration: underline; text-underline-offset: 4px; }
.gallery-link a:focus-visible { outline: 1px solid #777; outline-offset: 4px; }
.profiles { width: min(1240px, 100%); margin: 88px auto 0; display: grid; grid-template-columns: 1fr 1fr; position: relative; min-height: 460px; }
.profiles::after { content: ""; position: absolute; top: 0; height: 100%; width: 1px; background: #222; left: 50%; pointer-events: none; }
.profiles.equipment-open::after { height: var(--equipment-divider-height, 340px); }
.person { min-width: 0; text-align: center; padding: 34px 24px 100px; }
.portrait { display: block; position: relative; width: 142px; aspect-ratio: 10 / 13; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: #f6f6f6; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.portrait img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .32s ease; }
.portrait .then { opacity: 0; }
.portrait[aria-pressed="true"] .then { opacity: 1; }
.portrait[aria-pressed="true"] .now { opacity: 0; }
.portrait:focus-visible { outline: 1px solid #555; outline-offset: 5px; }
@media (hover: hover) { .portrait:hover .then { opacity: 1; } .portrait:hover .now { opacity: 0; } }
.person h1 { font-size: 19px; line-height: 1.5; font-weight: 300; margin: 28px 0 0; letter-spacing: -.035em; }
.age { font-size: 14px; letter-spacing: -.015em; margin-left: 2px; }
.role { font-size: 14px; font-weight: 300; line-height: 1.8; margin: 16px 0 0; }
.profile-instagram { display: inline-block; color: inherit; font-size: 12px; font-weight: 300; line-height: 1.8; margin-top: 8px; padding: 3px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: .6px; }
.profile-instagram:hover { color: #666; }
.profile-instagram:focus-visible { outline: 1px solid #777; outline-offset: 4px; }
.equipment { margin: 15px auto 0; width: 100%; max-width: 500px; }
.equipment summary { list-style: none; display: flex; align-items: center; gap: 13px; font-size: 11px; font-weight: 300; line-height: 1.8; width: fit-content; margin: 0 auto; padding: 6px 12px; border: 1px solid #b8b8b8; border-radius: 2px; transition: background-color .18s, border-color .18s; }
.equipment summary:hover { background: #f5f5f5; border-color: #555; }
.equipment[open] summary { border-color: #555; }
.equipment-toggle-icon { display: inline-block; font-size: 15px; line-height: 1; transition: transform .2s ease; }
.equipment[open] .equipment-toggle-icon { transform: rotate(45deg); }
.equipment summary::-webkit-details-marker { display: none; }
.equipment summary:focus-visible, .equipment-choice:focus-visible { outline: 1px solid #777; outline-offset: 4px; }
.equipment-layout { display: flex; align-items: flex-start; justify-content: center; gap: 24px; padding-top: 20px; }
.equipment-list { list-style: none; margin: 0; padding: 0; width: 120px; flex: 0 0 120px; display: flex; flex-direction: column; gap: 18px; }
.equipment[open] .equipment-list li { animation: equipment-drop .32s both; }
.equipment-list li:nth-child(2) { animation-delay: .07s !important; }
.equipment-list li:nth-child(3) { animation-delay: .14s !important; }
.equipment-list li:nth-child(4) { animation-delay: .21s !important; }
.equipment-choice { display: flex; align-items: center; flex-direction: column; width: 120px; padding: 4px; border: 0; background: transparent; color: inherit; font-size: 10px; font-weight: 300; line-height: 1.8; }
.equipment-choice img { display: block; width: 110px; height: 90px; object-fit: contain; transition: transform .2s ease; }
.equipment-choice span { margin-top: 8px; }
.equipment-choice:hover img { transform: translateY(-3px); }
.equipment-choice[aria-pressed="true"] span { text-decoration: underline; text-underline-offset: 4px; }
.equipment-projects { text-align: left; min-width: 0; flex: 1; padding: 20px 0 0; margin-top: var(--selected-offset, 0px); animation: equipment-reveal .28s both; }
.equipment-projects video { display: block; width: 100%; height: auto; background: #111; }
.equipment-video-strip { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.equipment-video-strip::-webkit-scrollbar { display: none; }
.equipment-video-strip:focus-visible { outline: 1px solid #888; outline-offset: 3px; }
.equipment-video-cell { flex: 0 0 200px; margin: 0; min-width: 0; scroll-snap-align: start; animation: equipment-reveal .3s both; animation-delay: var(--clip-delay, 0ms); }
.equipment-video-cell video { width: 200px; height: 150px; object-fit: contain; }
.equipment-video-cell figcaption { margin-top: 7px; font-size: 10px; line-height: 1.8; color: #777; text-align: center; }
.equipment-video-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.equipment-video-nav button { border: 0; padding: 0; background: transparent; color: inherit; font-size: 17px; width: 30px; height: 30px; }
.equipment-video-nav button:focus-visible { outline: 1px solid #888; }
.equipment-video-nav[hidden] { display: none; }
.equipment-projects[hidden] { display: none; }
.equipment-projects h2 { font-size: 12px; font-weight: 300; line-height: 1.8; margin: 0 0 12px; }
.equipment-projects p { font-size: 11px; font-weight: 300; line-height: 1.9; color: #777; margin: 0; word-break: keep-all; }
@keyframes equipment-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes equipment-reveal { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 601px) {
 .equipment[open] .equipment-layout { width: var(--equipment-expanded-width, 100%); margin-left: calc(50% - 60px); justify-content: flex-start; }
}
.hint { text-align: center; font-size: 11px; line-height: 1.7; color: #777; margin: 30px 16px 0; font-weight: 300; }
.touch-hint { display: none; }
.together { width: min(380px, calc(100% - 72px)); margin: 66px auto 0; }
.together img { display: block; width: 100%; height: auto; }
.interview { max-width: 760px; padding: 0 28px; margin: 68px auto 0; text-align: left; word-break: keep-all; overflow-wrap: break-word; }
.interview header { margin-bottom: 64px; }
.interview header h2 { font-size: 14px; font-weight: 300; line-height: 1.8; letter-spacing: .015em; margin: 0; }
.answer { margin: 0 0 55px; }
.answer h2 { font-size: 14px; line-height: 1.9; font-weight: 400; margin: 0 0 18px; letter-spacing: -.02em; }
.answer p { font-size: 14px; line-height: 2.05; font-weight: 300; margin: 0; letter-spacing: -.015em; }
footer { text-align: center; font-size: 10px; font-weight: 300; line-height: 1.8; color: #777; padding: 25px 20px 65px; }
footer span { margin: 0 8px; }
@media (hover: none) { .desktop-hint { display: none; } .touch-hint { display: inline; } }
@media (max-width: 600px) {
 .equipment-layout { flex-direction: column; align-items: center; gap: 12px; }
 .equipment-projects { width: 100%; padding-top: 10px; text-align: center; margin-top: 0; }
 .photo-gallery { margin-top: 72px; }
 .gallery-arrow { width: 32px; height: 40px; font-size: 20px; }
 .photo-slide img { height: clamp(150px, 42vw, 200px); }
 .site-nav { top: 16px; left: 20px; font-size: 11px; }
 .works-main { padding: 96px 26px 64px; }
 .profiles { margin-top: 48px; min-height: 355px; }
 .person { padding: 24px 10px 80px; }
 .portrait { width: clamp(88px, 27vw, 125px); }
 .person h1 { font-size: 17px; margin-top: 24px; }
 .age { font-size: 12px; }
 .role { font-size: 12px; margin-top: 12px; }
 .hint { margin-top: 24px; font-size: 10px; }
 .together { width: min(320px, calc(100% - 80px)); margin-top: 48px; }
 .interview { margin-top: 54px; padding: 0 26px; }
 .interview header { margin-bottom: 42px; }
 .interview header h2 { font-size: 12px; letter-spacing: 0; }
 .answer { margin-bottom: 40px; }
 .answer h2 { font-size: 13px; line-height: 1.85; margin-bottom: 14px; }
 .answer p { font-size: 13px; line-height: 2; }
 footer { padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) { .portrait img { transition: none; } }
@media (prefers-reduced-motion: reduce) { .equipment[open] .equipment-list li, .equipment-projects, .equipment-video-cell { animation: none; } .equipment-choice img { transition: none; } }

.equipment-pair-images { display: flex; align-items: center; width: 110px; height: 90px; }
.equipment-pair .equipment-pair-images img { width: 55px; height: 90px; }

.equipment-pair:hover img { transform: none; }
@media (hover: hover) {
  .equipment-pair .equipment-pair-images img:hover { transform: translateY(-3px) scale(1.28); position: relative; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .equipment-pair .equipment-pair-images img:hover { transform: none; }
}

.equipment-photo-strip { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.equipment-photo-strip::-webkit-scrollbar { display: none; }
.equipment-photo-strip:focus-visible { outline: 1px solid #888; outline-offset: 3px; }
.equipment-photo-strip img { display: block; flex: 0 0 auto; height: 180px; width: auto; scroll-snap-align: start; animation: equipment-reveal .3s both; animation-delay: var(--clip-delay, 0ms); }
@media (max-width: 600px) { .equipment-photo-strip img { height: 160px; } }
@media (prefers-reduced-motion: reduce) { .equipment-photo-strip img { animation: none; } }

.equipment-pair[data-equipment="camcorders"] .equipment-pair-images { width: 150px; height: 105px; }
.equipment-pair[data-equipment="camcorders"] .equipment-pair-images img { width: 75px; height: 105px; }

.equipment-choice { transition: opacity .25s ease, filter .25s ease; }
.equipment.has-equipment-selection .equipment-choice[aria-pressed="false"] { opacity: .38; filter: blur(1.3px); }
.equipment.has-equipment-selection .equipment-choice[aria-pressed="false"]:hover, .equipment.has-equipment-selection .equipment-choice[aria-pressed="false"]:focus-visible { opacity: .8; filter: blur(.3px); }
@media (prefers-reduced-motion: reduce) { .equipment-choice { transition: none; } }

.equipment-photo-button { display: block; flex: 0 0 auto; padding: 0; margin: 0; border: 0; background: transparent; scroll-snap-align: start; }
.equipment-photo-button:focus-visible { outline: 2px solid #555; outline-offset: -2px; }
.film-lightbox { border: 0; padding: 48px 56px; margin: auto; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; box-sizing: border-box; background: rgba(255,255,255,.98); color: #111; }
.film-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.film-lightbox::backdrop { background: rgba(0,0,0,.65); }
.film-lightbox img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.film-lightbox button { position: absolute; border: 0; background: transparent; font: inherit; font-size: 24px; color: inherit; padding: 12px; }
.film-lightbox-close { top: 8px; right: 14px; }
.film-lightbox-prev { left: 5px; top: 46%; }
.film-lightbox-next { right: 5px; top: 46%; }
.film-lightbox-counter { position: absolute; bottom: 8px; left: 0; width: 100%; margin: 0; text-align: center; font-size: 11px; }
@media (max-width: 600px) { .film-lightbox { padding: 52px 35px; } }

.works-main .work-title { font-size: 14px; font-weight: 300; line-height: 1.8; text-align: center; margin: 0 0 24px; }

.assignment-main { flex: 1; width: 100%; padding: 132px 28px 100px; }
.assignment-article { max-width: 680px; margin: 0 auto; font-size: 14px; line-height: 2; font-weight: 300; word-break: keep-all; overflow-wrap: anywhere; }
.assignment-header { text-align: center; margin-bottom: 48px; }
.assignment-header h1 { font-size: 23px; line-height: 1.6; font-weight: 300; letter-spacing: -.025em; margin: 0 0 16px; }
.assignment-header p { font-size: 12px; line-height: 1.8; color: #666; margin: 0; }
.assignment-article h2 { font-size: 16px; font-weight: 400; line-height: 1.8; margin: 40px 0 18px; }
.assignment-article > p { margin: 0 0 20px; text-align: left; }
.assignment-image { margin: 44px auto; text-align: center; }
.assignment-image img { display: block; max-width: 100%; width: auto; height: auto; max-height: 540px; margin: auto; object-fit: contain; }
.assignment-image:first-of-type { margin-top: 0; }
@media (max-width: 600px) {
  .assignment-main { padding: 110px 24px 72px; }
  .assignment-article { font-size: 13px; line-height: 1.95; }
  .assignment-header h1 { font-size: 21px; }
  .assignment-header p { font-size: 11px; }
  .assignment-image { margin: 34px auto; }
}

/* Keep the article centered while matching the original Notion proportions. */
.assignment-article { max-width: 720px; font-size: 16px; line-height: 1.75; }
.assignment-header h1 { font-size: 40px; line-height: 1.2; }
.assignment-header p { font-size: 16px; }
.assignment-article > p, .assignment-article > h2 { text-align: left; }
.assignment-image img { width: 97.7778%; max-height: none; }
.assignment-image img[src$="02.jpg"] { width: 62.2222%; }
.assignment-image img[src$="04.gif"] { width: 78.8889%; }
@media (max-width: 600px) {
 .assignment-article { font-size: 14px; }
 .assignment-header h1 { font-size: 32px; }
 .assignment-header p { font-size: 14px; }
}

.assignment-article { font-weight: 400; }
.assignment-article h2 { font-weight: 500; }

.site-nav { flex-wrap: wrap; max-width: calc(100% - 48px); row-gap: 2px; }
.cardnews-main { flex: 1; padding: 104px 24px 80px; }
.cardnews { width: min(600px, 100%); margin: 0 auto; }
.cardnews-viewer { position: relative; width: min(600px, calc((100svh - 160px) * .8), 100%); margin: auto; }
.card-track { display: flex; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; background: #080808; }
.card-track::-webkit-scrollbar { display: none; }
.card-track:focus-visible { outline: 1px solid #777; outline-offset: 4px; }
.card-slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 4 / 5; }
.card-slide img, .card-slide video { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(245,245,245,.82); color: #171717; font: 28px/28px Arial,sans-serif; padding: 0 0 3px; box-shadow: 0 1px 5px #0002; }
.card-prev { left: 12px; } .card-next { right: 12px; }
.card-arrow:disabled { visibility: hidden; }
.card-arrow:focus-visible { outline: 2px solid #777; outline-offset: 3px; }
.card-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 18px auto 0; max-width: 320px; }
.card-pagination button { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%; background: #d4d4d4; }
.card-pagination button[aria-current="true"] { background: #333; }
.card-pagination button:focus-visible { outline: 1px solid #333; outline-offset: 3px; }
.card-count { text-align: center; font-size: 10px; color: #888; margin: 10px 0 0; }
.cardnews-credit { text-align: center; font-weight: 300; margin-top: 28px; }
.cardnews-credit h1 { font-size: 14px; line-height: 1.8; font-weight: 400; margin: 0 0 8px; }
.cardnews-credit p { font-size: 12px; line-height: 1.9; margin: 0; }
.cardnews-credit .team-credit { margin-top: 18px; }
@media (max-width: 600px) {
 .site-nav { column-gap: 14px; font-size: 11px; }
 .cardnews-main { padding: 100px 16px 64px; }
 .cardnews-viewer { width: 100%; }
 .card-arrow { width: 30px; height: 30px; font-size: 25px; }
 .card-prev { left: 8px; } .card-next { right: 8px; }
}

.equipment-brain[open] .equipment-layout { width: 120px; max-width: 100%; margin: 0 auto; justify-content: center; }
.equipment-brain-item { display: flex; flex-direction: column; align-items: center; width: 120px; margin: 0; padding: 4px; }
.equipment-brain-item img { display: block; width: 120px; height: 100px; object-fit: contain; transition: transform .2s ease; }
.equipment-brain-item figcaption { margin-top: 8px; font-size: 10px; font-weight: 300; line-height: 1.8; }
@media (hover: hover) { .equipment-brain-item:hover img { transform: translateY(-3px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .equipment-brain-item img { transition: none; } }