@charset "utf-8";

:root { color-scheme:light; --ink:#1c1c1c; --paper:#f6f6f5; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,"Malgun Gothic",sans-serif; }
a { color:inherit; }
img { display:block; max-width:100%; }
:focus-visible { outline:2px solid #111; outline-offset:4px; }
.skip-link { position:fixed; z-index:30; top:-70px; left:12px; padding:10px; color:#fff; background:#111; }
.skip-link:focus { top:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* The header retains the new home's centered logo and menu. */
.site-header { position:fixed; z-index:10; top:0; left:0; width:100vw; height:165px; pointer-events:none; background:linear-gradient(180deg,rgba(128,128,128,.15),rgba(128,128,128,.05) 45%,transparent),linear-gradient(180deg,rgba(246,246,245,.98),rgba(246,246,245,.97) 55%,rgba(246,246,245,0)); }
.brand { position:absolute; left:50%; top:-7px; width:108px; height:80px; transform:translateX(-50%); pointer-events:auto; }
.brand img { width:100%; height:100%; object-fit:contain; }
.main-nav { position:absolute; left:50%; top:75px; display:flex; justify-content:center; gap:28px; transform:translateX(-50%); white-space:nowrap; pointer-events:auto; }
.main-nav a { color:#202020; text-decoration:none; font:13px Arial,"Malgun Gothic",sans-serif; }
.main-nav a:hover,.main-nav a:focus-visible { color:#000; text-decoration:underline; }

.project-page { width:min(100%,1020px); min-height:calc(100svh - 80px); margin:0 auto; padding:clamp(180px,13vw,220px) 24px 0; }
.project-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:34px 10px; list-style:none; padding:0; margin:0; }
.project-card { min-width:0; }
.project-link,.project-unlinked { display:block; color:inherit; text-decoration:none; }
.project-image { width:100%; aspect-ratio:1; overflow:hidden; border:1px solid rgba(0,0,0,.4); border-radius:5px; background:#e3e3e1; }
.project-image img { width:100%; height:100%; object-fit:cover; }
.project-meta { padding-top:7px; font:11px/1.25 "Courier New","Malgun Gothic",monospace; overflow-wrap:anywhere; }
.project-date,.project-name,.project-unavailable { display:block; }
.project-date { color:#5d5d5d; }
.project-link:hover .project-name { text-decoration:underline; text-underline-offset:2px; }
.project-unavailable { margin-top:4px; color:#737373; font-family:Arial,"Malgun Gothic",sans-serif; font-size:10px; }
.site-legal { display:flex; flex-wrap:wrap; gap:8px 30px; margin:100px 24px 23px; color:#555; font:10px/1.5 "Courier New","Malgun Gothic",monospace; }
.site-legal a { color:inherit; text-decoration:underline; text-underline-offset:2px; }

@media(max-width:850px) {
  .project-page { max-width:720px; }
  .project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 10px; }
}
@media(max-width:600px) {
  .site-header { height:160px; background:linear-gradient(180deg,rgba(128,128,128,.15),rgba(128,128,128,.05) 55%,transparent),linear-gradient(180deg,rgba(246,246,245,.98),rgba(246,246,245,.97) 55%,rgba(246,246,245,0)); }
  .brand { top:-14px; }
  .main-nav { top:72px; gap:24px; }
  .project-page { padding:160px 20px 0; }
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 10px; }
  .site-legal { display:grid; gap:5px; margin:70px 20px 24px; }
}

/* 썸네일 크기 조절 바: 메뉴와 같은 유리 트랙 + 선택된 점만 크고 검게 (흐림 효과 없음) */
.size-control { position:relative; display:flex; justify-content:space-between; align-items:center; width:180px; height:28px; margin:0; padding:0 10px; z-index:11; }
/* 프로젝트 페이지에서만: 메뉴 바로 아래에 고정되어 스크롤해도 그 자리에 있음 */
.project-page .size-control { position:fixed; top:172px; left:50%; transform:translateX(-50%); }
.project-page .project-grid { margin-top:46px; }
.size-track { position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.3)); border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.9), inset 0 -2px 6px rgba(160,165,180,.16), 0 6px 16px rgba(90,95,110,.10); }
.size-knob { display:none; position:absolute; z-index:1; top:5px; left:0; width:30px; height:30px; border-radius:50%; pointer-events:none;
  background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.7)); border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 2px #fff, inset 0 -2px 5px rgba(150,155,170,.22), 0 4px 12px rgba(60,65,80,.20);
  transition:transform .3s cubic-bezier(.2,.9,.3,1); }
.size-control button { position:relative; z-index:2; width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.size-control button::before { content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; border-radius:50%; background:#8d8d92; transform:translate(-50%,-50%); transition:width .25s ease, height .25s ease, background-color .2s ease; }
.size-control button:hover::before { background:#333; }
.size-control button[aria-checked="true"]::before { width:9px; height:9px; background:#1c1c1c; }
.size-control button:focus-visible { outline:1px solid #111; outline-offset:-2px; border-radius:50%; }
@media (prefers-reduced-motion:reduce) { .size-knob, .size-control button::before { transition:none; } }

/* 단계별 한 줄 개수 (기본 3단계 = 기존 5칸) */
.project-page[data-size="1"] .project-grid { grid-template-columns:repeat(7,minmax(0,1fr)); gap:28px 8px; }
.project-page[data-size="2"] .project-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:30px 9px; }
.project-page[data-size="4"] { width:min(100%,1180px); }
.project-page[data-size="4"] .project-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:38px 14px; }
.project-page[data-size="5"] { width:min(100%,1180px); }
.project-page[data-size="5"] .project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:42px 18px; }
@media(max-width:850px) {
  .project-page[data-size="1"] .project-grid, .project-page[data-size="2"] .project-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .project-page[data-size="4"] .project-grid, .project-page[data-size="5"] .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .project-page[data-size="1"] .project-grid, .project-page[data-size="2"] .project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 8px; }
  .project-page[data-size="3"] .project-grid, .project-page[data-size="4"] .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-page[data-size="5"] .project-grid { grid-template-columns:1fr; }
  .project-page .size-control { width:170px; top:156px; }
  .project-page .project-grid { margin-top:52px; }
}

/* 호버: 올린 작품은 살짝 커지며 앞으로 떠오르고, 나머지는 살짝 작아지며 뒤로 물러남 (transform만 사용) */
@media (hover:hover) {
  .project-card { position:relative; transition:transform .35s cubic-bezier(.2,.9,.3,1); }
  .project-image { transition:box-shadow .35s ease; }
  .project-grid:has(.project-card:hover) .project-card:not(:hover) { transform:scale(.96); }
  .project-card:hover { z-index:2; transform:translateY(-6px) scale(1.06); }
  .project-card:hover .project-image { box-shadow:0 16px 30px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.08); }
}
@media (prefers-reduced-motion:reduce) {
  .project-card, .project-image { transition:none !important; }
  .project-grid:has(.project-card:hover) .project-card:not(:hover), .project-card:hover { transform:none; }
}

/* 상세 팝업: 맥 창 형태. 상단 바를 끌어 이동, 오른쪽 아래 모서리로 크기 조절, 신호등 버튼(닫기·최소화·최대화). 흐림 효과 없음 */
.detail-modal { position:fixed; inset:0; z-index:50; display:none; }
.detail-modal.is-open { display:block; }
.detail-modal__backdrop { position:absolute; inset:0; background:rgba(60,60,66,.16); opacity:0; transition:opacity .28s ease; }
.detail-modal__panel { position:absolute; left:50%; top:50%; width:min(1260px, calc(100% - 48px)); height:calc(100% - 48px); min-width:360px; min-height:220px;
  transform:translate(-50%,-48%) scale(.985); opacity:0; display:flex; flex-direction:column; overflow:hidden; border-radius:12px;
  background:rgba(243,243,245,.94); border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.9), 0 0 0 1px rgba(0,0,0,.12), 0 18px 46px rgba(40,45,60,.22);
  transition:transform .32s cubic-bezier(.2,.9,.3,1), opacity .28s ease; }
.detail-modal.is-in .detail-modal__backdrop { opacity:1; }
.detail-modal.is-in .detail-modal__panel { opacity:1; transform:translate(-50%,-50%); }
.detail-modal.is-placed .detail-modal__panel { transform:none; transition:opacity .28s ease; }
.detail-modal.is-max .detail-modal__panel { left:0 !important; top:0 !important; width:100% !important; height:100% !important; transform:none; border-radius:0; }
.detail-modal.is-min { pointer-events:none; }
.detail-modal.is-min .detail-modal__backdrop { opacity:0; }
.detail-modal.is-min .detail-modal__panel { pointer-events:auto; left:50% !important; top:auto !important; bottom:58px; width:300px !important; height:40px !important; min-height:0; min-width:0; transform:translateX(-50%); }
.detail-modal__bar { flex:none; position:relative; display:flex; align-items:center; height:40px; padding:0 14px; border-bottom:1px solid rgba(0,0,0,.1); background:linear-gradient(180deg,rgba(252,252,253,.97),rgba(236,236,239,.97)); cursor:grab; user-select:none; touch-action:none; }
.detail-modal__title { position:absolute; left:150px; right:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; pointer-events:none; font-size:11px; letter-spacing:.08em; color:#55575c; }
/* 창 버튼: 동그라미 안에 ─ ☐ ✕ 표시, 흑백. 호버하면 검게 반전 */
.traffic { position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin-left:auto; }
.traffic button { width:20px; height:20px; padding:0; border-radius:50%; border:1px solid #1c1c1c; background:#fff; color:#1c1c1c; font-size:10px; line-height:18px; text-align:center; cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.traffic button:hover { background:#1c1c1c; color:#fff; }
.traffic button:focus-visible { outline:1px solid #111; outline-offset:2px; }
.detail-modal__body { position:relative; flex:1; min-height:0; display:flex; }
.detail-modal__frame { display:block; flex:1; min-width:0; height:100%; border:0; background:transparent; }
.detail-modal.is-min .detail-modal__body { display:none; }
/* 하단 안내: 흰 페이드 + 아래 꺾쇠. 내용이 더 있을 때만 보이고, 클릭은 통과 */
.more-hint { position:absolute; left:48px; right:48px; bottom:0; height:84px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:linear-gradient(180deg,rgba(243,243,245,0),rgba(243,243,245,.92) 70%); }
.more-hint span { font-size:20px; line-height:1; color:#1c1c1c; animation:hint-bob 1.6s ease-in-out infinite; }
.detail-modal.has-more .more-hint { opacity:1; }
@keyframes hint-bob { 50% { transform:translateY(4px); } }
@media (prefers-reduced-motion:reduce) { .more-hint span { animation:none; } }
@media (max-width:700px) { .more-hint { left:28px; right:28px; } }
/* 좌우 가장자리: 호버하면 은은한 파란 빛 + 화살표 + 이전/다음 제목, 누르면 이동 */
.side { position:relative; flex:none; width:48px; border:0; padding:0; cursor:pointer; color:#1c1c1c; background:transparent; overflow:hidden; }
.side::before { content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s ease; }
.side-prev::before { background:linear-gradient(90deg,rgba(40,90,255,.22),rgba(40,90,255,0)); }
.side-next::before { background:linear-gradient(270deg,rgba(40,90,255,.22),rgba(40,90,255,0)); }
.side-arrow { position:relative; display:block; font-size:30px; line-height:1; opacity:.72; transition:opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1); }
.side-label { position:absolute; top:calc(50% + 26px); left:50%; transform:translateX(-50%); writing-mode:vertical-rl; max-height:calc(50% - 50px); font-size:10px; letter-spacing:.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .25s ease; pointer-events:none; }
.side-prev .side-label { transform:translateX(-50%) rotate(180deg); }
.side:hover::before, .side:focus-visible::before { opacity:1; }
.side:hover .side-arrow, .side:focus-visible .side-arrow { opacity:1; }
.side-prev:hover .side-arrow { transform:translateX(-3px); }
.side-next:hover .side-arrow { transform:translateX(3px); }
.side .side-arrow { position:absolute; top:calc(50% - 13px); left:0; right:0; }
.side:hover .side-label, .side:focus-visible .side-label { opacity:.75; }
.side:focus-visible { outline:1px solid #111; outline-offset:-2px; }
@media (max-width:700px) { .side { width:28px; } .side-label { display:none; } }
.detail-modal.is-min .detail-modal__frame { display:none; }
.detail-modal__resize { position:absolute; right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; touch-action:none;
  background:linear-gradient(135deg,transparent 55%,rgba(0,0,0,.25) 56%,rgba(0,0,0,.25) 62%,transparent 63%,transparent 72%,rgba(0,0,0,.25) 73%,rgba(0,0,0,.25) 79%,transparent 80%); }
.edge { position:absolute; z-index:3; touch-action:none; }
.edge-t { top:0; left:18px; right:18px; height:5px; cursor:ns-resize; }
.edge-lt { top:0; left:0; width:14px; height:14px; cursor:nwse-resize; }
.edge-rt { top:0; right:0; width:14px; height:14px; cursor:nesw-resize; }
.edge-r { top:14px; right:0; bottom:18px; width:8px; cursor:ew-resize; }
.edge-l { top:14px; left:0; bottom:18px; width:8px; cursor:ew-resize; }
.edge-b { left:18px; right:18px; bottom:0; height:8px; cursor:ns-resize; }
.edge-lb { left:0; bottom:0; width:18px; height:18px; cursor:nesw-resize; }
.detail-modal__resize { width:22px; height:22px; z-index:4; }
.detail-modal.is-max .edge, .detail-modal.is-min .edge { display:none; }
.detail-modal.is-dragging .detail-modal__frame { pointer-events:none; }
html.modal-open { overflow:hidden; }
html.modal-open .lm-track { animation-play-state:paused; }
@media (max-width:700px) { .detail-modal__panel { width:100%; height:100%; min-width:0; min-height:0; border-radius:0; } .edge { display:none; } }
@media (prefers-reduced-motion:reduce) { .detail-modal__backdrop, .detail-modal__panel { transition:none; } }

/* 휴대폰: 상세 팝업은 화면 전체·불투명, 제목은 왼쪽 정렬로 넓게, 최소화·최대화 버튼 숨김 */
@media (max-width:700px) {
  .detail-modal { top:138px; }
  .detail-modal__backdrop { background:transparent; }
  .detail-modal__panel { left:8px !important; right:8px; top:0 !important; bottom:8px; width:auto !important; height:auto !important; transform:none !important; background:#f3f3f5; border:1px solid rgba(0,0,0,.18); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); }
  .detail-modal__title { left:14px; right:52px; text-align:left; }
  .traffic .t-min, .traffic .t-max { display:none; }
  .traffic button { width:28px; height:28px; font-size:12px; line-height:26px; }
  .side { width:22px; }
  .side-arrow { font-size:22px; }
}