/* ================= tokens ================= */
:root{
  --bg:      #ffffff;
  --fg:      #0a0a0a;
  --dim:     #d5d5d5;   /* 다이얼 비활성 글자 */
  --tick:    #c9c9c9;
  --line:    #ededed;
  --sub:     #8a8a8a;

  --font: "Helvetica Neue", Helvetica, Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Segoe UI", Arial, sans-serif;

  /* 시스템이 다크모드여도 항상 화이트 베이스로 고정 */
  color-scheme: light;

  /* JS가 실행 중 덮어씁니다 */
  --pivot: -100px;
  --anchor: 60vw;
  --size: 56px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ================= 인트로 ================= */
.intro-screen{
  position:fixed; inset:0; z-index:20;
  background:#000; overflow:hidden;
  transition:opacity .8s ease, visibility .8s ease;
}
body.entered .intro-screen{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.intro-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.55) 100%);
}
.intro-ui{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding:clamp(28px, 5vw, 64px);
}
.intro-name{
  margin:0; color:#fff;
  font-size:clamp(30px, 5.2vw, 76px); font-weight:700; letter-spacing:-0.035em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.enter{
  flex:none;
  display:inline-flex; align-items:center; gap:11px;
  padding:clamp(13px,1.3vw,18px) clamp(24px,2.2vw,34px);
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; font:inherit; font-weight:700;
  font-size:clamp(13px,1.1vw,17px); letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.enter:hover{ background:#fff; color:#0a0a0a; border-color:#fff; transform:translateY(-2px); }
.enter:active{ transform:translateY(0); }
.enter:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.enter .k{ font-size:1.15em; opacity:.65; letter-spacing:0; }
.enter:hover .k{ opacity:1; }

/* 인트로가 떠 있는 동안에는 뒤의 다이얼을 숨기고 조작도 막는다 */
body.intro .stage{ opacity:0; pointer-events:none; }

@media (max-width: 620px){
  .intro-ui{ flex-direction:column; align-items:flex-start; gap:18px; }
}

/* ================= stage ================= */
.stage{
  position:fixed; inset:0;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  transition:opacity .45s ease, filter .45s ease;
}
.stage.dragging{ cursor:grabbing; }
body.open .stage{ opacity:0; pointer-events:none; filter:blur(2px); }

/* ---- 이름 + 플러스 (고정) ---- */
.brand{
  position:absolute; top:50%; left:0;
  right:calc(100% - var(--anchor) + var(--size) * 0.65);
  transform:translateY(-50%);
  display:flex; align-items:center; justify-content:flex-end;
  gap:calc(var(--size) * 0.65);
  pointer-events:none;
}
.name{
  position:relative; isolation:isolate;
  margin:0;
  font-size:var(--size);
  font-weight:700;
  letter-spacing:-0.035em;
  white-space:nowrap;

  /* 마우스가 지나간 자리만 드러내는 마스크 (JS가 매 프레임 갱신) */
  --holo-mask: radial-gradient(circle 0px at -999px -999px, #000, transparent);
}

/* ---- 글자 위에 겹치는 홀로그램 레이어 (이름 · 버튼 공용) ---- */
.holo-text{ position:relative; isolation:isolate;
  --holo-mask: radial-gradient(circle 0px at -999px -999px, #000, transparent); }
.holo-text .holo,
.holo-text .grain{
  position:absolute; left:0; top:0;
  pointer-events:none;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-mask-image:var(--holo-mask); mask-image:var(--holo-mask);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* 무지개빛 얼룩 — 작은 색 덩어리를 촘촘히 겹쳐서 어느 지점에서나 여러 색이 만난다 */
.holo-text .holo{
  background-image:
    radial-gradient(26% 42% at 10% 22%, #ff4fb8 0%, rgba(255,79,184,0) 100%),
    radial-gradient(22% 38% at 24% 68%, #ffc24d 0%, rgba(255,194,77,0) 100%),
    radial-gradient(24% 40% at 36% 18%, #35e0ff 0%, rgba(53,224,255,0) 100%),
    radial-gradient(20% 34% at 47% 76%, #7b6cff 0%, rgba(123,108,255,0) 100%),
    radial-gradient(26% 44% at 58% 30%, #ff7a4d 0%, rgba(255,122,77,0) 100%),
    radial-gradient(22% 36% at 70% 70%, #4bffd0 0%, rgba(75,255,208,0) 100%),
    radial-gradient(24% 40% at 82% 24%, #c46bff 0%, rgba(196,107,255,0) 100%),
    radial-gradient(20% 34% at 92% 66%, #3fb8ff 0%, rgba(63,184,255,0) 100%),
    radial-gradient(30% 50% at 50% 50%, #ffe9a8 0%, rgba(255,233,168,0) 100%),
    linear-gradient(118deg, #6fd0ff 0%, #b98cff 30%, #ff86c4 55%, #ffb46b 78%, #7ef0d8 100%);
  background-size:180% 180%;
  background-position:
     0% 50%, 100% 40%,  30%  0%,  70% 100%,  10% 100%,
    90%  0%,  50% 20%,  20%  80%, 60% 60%,   0% 50%;
  animation:holoDrift 13s ease-in-out infinite;
  filter:saturate(0.95) brightness(0.95);  /* 채도 살짝 ↓, 블랙 5% 얹은 만큼 명도 ↓ */
}

/* 인쇄물 같은 거친 입자 — 무채색 노이즈를 곱해서 색을 조금씩 갉아낸다(디졸브) */
.holo-text .grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
  mix-blend-mode:multiply;
  opacity:.2;
}

@keyframes holoDrift{
  0%,100%{ background-position:  0% 50%,100% 40%, 30%  0%, 70%100%, 10%100%, 90%  0%, 50% 20%, 20% 80%, 60% 60%,   0% 50%; }
  33%    { background-position: 60% 10%, 30% 90%, 80% 40%, 20% 30%, 70% 20%, 30% 70%, 10% 80%, 80% 20%, 20% 30%,  60% 50%; }
  66%    { background-position:100% 80%, 70% 10%,  0% 70%,100% 40%, 40% 60%, 60% 90%, 90% 40%, 40% 10%, 90% 80%, 100% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .holo-text .holo{ animation:none; }
}
.plus{
  pointer-events:auto;
  flex:none;
  width:calc(var(--size) * 1.12); height:calc(var(--size) * 1.12);
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg);
  box-shadow:0 2px 14px rgba(0,0,0,.07);
  display:grid; place-items:center;
  cursor:pointer; padding:0;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.plus:hover{ transform:rotate(45deg) scale(1.06); box-shadow:0 4px 20px rgba(0,0,0,.12); }
.plus:active{ transform:rotate(45deg) scale(.94); }
.plus-ico{ position:relative; display:block; width:38%; height:38%; }
.plus-ico::before, .plus-ico::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:var(--fg);
}
.plus-ico::before{ width:100%; height:1.6px; }
.plus-ico::after{ width:1.6px; height:100%; }

/* ---- 다이얼 ---- */
.dial{
  position:absolute; top:50%; left:var(--pivot);
  width:0; height:0;
  outline:none;
}
.item{
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  display:flex; align-items:center; gap:calc(var(--size) * 0.24);
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:var(--dim);
  white-space:nowrap; cursor:pointer;
  will-change:transform, color, opacity;
}
.item .tick{
  flex:none;
  width:calc(var(--size) * 0.14); height:calc(var(--size) * 0.14);
  border-radius:50%;
  background:var(--tick);
  transition:background .25s ease;
}
.item .label{
  display:inline-block;
  font-size:var(--size); font-weight:700; letter-spacing:-0.035em; line-height:1;
  transform-origin:left center;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.item.is-active .tick{ background:var(--fg); }

/* 가운데(활성) 항목에 마우스를 올리면 살짝 커진다 */
@media (hover: hover){
  .item.is-active:hover .label{ transform:scale(1.06); }
}

/* ---- 힌트 ---- */
.hint{
  position:absolute; right:28px; bottom:24px; margin:0;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sub); opacity:.75;
  transition:opacity .5s ease;
}
.hint.gone{ opacity:0; }

/* ================= detail ================= */
.detail{
  position:fixed; inset:0;
  background:var(--bg);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; pointer-events:none;
  transform:translateY(18px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  --pad:clamp(24px, 7vw, 120px);
  padding:0 var(--pad) 120px;
}
body.open .detail{ opacity:1; pointer-events:auto; transform:none; }

.detail-head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:clamp(16px,2.4vw,32px);
  padding:clamp(24px,4vh,56px) 0 clamp(20px,3vh,36px);
  background:linear-gradient(var(--bg) 88%, transparent);
}
.detail-name, .detail-label{
  font-size:clamp(28px, 4.4vw, 62px);
  font-weight:700; letter-spacing:-0.035em;
}
.detail-label{ color:var(--fg); }
.plus--close{
  width:clamp(42px,5vw,68px); height:clamp(42px,5vw,68px);
  transform:rotate(45deg);
}
.plus--close:hover{ transform:rotate(135deg) scale(1.06); }

/* 우측 상단 홈 버튼 */
.home{
  margin-left:auto; flex:none;
  display:flex; align-items:center; gap:9px;
  background:none; border:0; padding:10px 0; margin-right:0;
  font:inherit; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sub); cursor:pointer;
  transition:color .25s ease;
}
.home .arrow{ font-size:15px; line-height:1; transition:transform .25s ease; }
.home:hover{ color:var(--fg); }
.home:hover .arrow{ transform:translateX(-4px); }
.home:focus-visible{ outline:1px solid var(--fg); outline-offset:6px; }

.detail-body{ max-width:1040px; }
.kicker{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sub); margin:0 0 18px;
}
.intro{
  font-size:clamp(17px,1.7vw,24px); line-height:1.6;
  margin:0 0 clamp(40px,6vh,72px); max-width:60ch; color:var(--fg);
}
.row{
  display:grid; grid-template-columns:minmax(120px,180px) 1fr;
  gap:clamp(16px,3vw,48px);
  padding:26px 0; border-top:1px solid var(--line);
  align-items:baseline;
}
.row:last-child{ border-bottom:1px solid var(--line); }
.row .meta{ font-size:15px; color:var(--sub); letter-spacing:.02em; padding-top:4px; }
.row .meta em{ display:block; font-style:normal; opacity:.65; margin-top:3px; font-size:14px; }
.row h3{ margin:0 0 6px; font-size:clamp(21px,2.3vw,31px); font-weight:700; letter-spacing:-0.02em; overflow-wrap:anywhere; }
.row h3 a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.row h3 a:hover{ border-color:var(--fg); }
.row p{ margin:0; color:var(--sub); font-size:16px; line-height:1.6; }
.row p.role{ color:var(--fg); font-size:15px; margin:0 0 8px; opacity:.75; }

.detail-nav{
  display:flex; gap:12px; margin-top:clamp(48px,8vh,88px);
}
.navbtn{
  font:inherit; font-size:14px; letter-spacing:.02em;
  padding:12px 22px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); color:var(--fg);
  cursor:pointer;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.navbtn:hover{ border-color:var(--fg); transform:translateY(-1px); }

/* Next 는 다음 항목까지 이어 보게 만드는 버튼이라 검게 채워 강조한다 */
#nextBtn{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
  padding-left:26px; padding-right:26px;
}
#nextBtn:hover{ box-shadow:0 5px 16px rgba(0,0,0,.20); }
#nextBtn:active{ transform:translateY(0); }

/* ================= mobile ================= */
/* 좁은 화면에서는 머리글이 넘치지 않도록 이름을 접고, 본문은 한 줄씩 쌓는다 */
@media (max-width: 620px){
  .detail-name{ display:none; }
  .detail-head{ gap:16px; }
  .row{ grid-template-columns:1fr; gap:8px; padding:22px 0; }
  .row .meta{ padding-top:0; }
  .row .meta em{ display:inline; margin:0 0 0 8px; }
}

@media (max-width: 820px){
  .brand{
    top:clamp(28px,7vh,64px); left:24px; right:auto;
    transform:none; justify-content:flex-start; gap:18px;
  }
  .hint{ left:24px; right:auto; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
}

/* ================= 바로가기 버튼 ================= */
.grid-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(20px,3vw,48px); flex-wrap:wrap;
  margin:0 0 clamp(40px,6vh,72px);
}
.grid-top .intro{ margin:0; flex:1 1 320px; }

.cta{
  flex:none;
  display:inline-block;
  padding:clamp(14px,1.4vw,19px) clamp(24px,2.4vw,34px);
  border-radius:14px;
  background:var(--fg); color:#fff;
  font-size:clamp(15px,1.25vw,19px); font-weight:700; letter-spacing:-0.01em;
  text-decoration:none; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.22); }
.cta:active{ transform:translateY(0); }
.cta:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }
.cta .holo, .cta .grain{ padding:inherit; }      /* 겹쳐지는 글자를 본문과 같은 자리에 */

/* ================= Work 그리드 ================= */
/* 화면 좌우로 가득 차게 — 그리드 항목일 때는 상세 화면의 좌우 여백을 없애고
   글 블록에만 여백을 다시 준다. (음수 마진을 쓰면 가로 스크롤이 생긴다)      */
.detail-body.full{ max-width:none; }
body.wide .detail{ --pad:0px; }
body.wide .detail-head,
body.wide .detail-body > .kicker,
body.wide .detail-body > .intro,
body.wide .detail-body > .grid-top,
body.wide .detail-nav{ padding-inline:max(24px, 4.5vw); }   /* 제목·설명을 그리드 왼쪽 선에 맞춘다 */
.work-grid{
  margin-inline:calc(4.5vw - var(--pad));
  margin-top:clamp(20px, 3vh, 40px);
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.card{
  display:block; width:100%;
  background:none; border:0; padding:0; font:inherit; color:inherit;
  cursor:pointer;
}
.card-thumb{
  position:relative;
  aspect-ratio:1.94;            /* 첨부 시안의 가로:세로 비율 */
  overflow:hidden;
  background:#f2f2f2;
}
.card-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-thumb img{ transform:scale(1.03); }
.card-empty{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#b8b8b8;
}

/* 썸네일 오른쪽 위 황금 라벨 — 검은 막 위에도 계속 보인다 */
.card-thumb .badge{
  position:absolute; top:14px; right:14px; z-index:2;
  padding:7px 14px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:-0.01em; line-height:1.2;
  color:#4a3400; white-space:nowrap;
  background:linear-gradient(135deg, #ffeaa7 0%, #f6d271 34%, #d9a62a 58%, #f9dd8d 78%, #c9922a 100%);
  box-shadow:0 2px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.65);
}
@media (max-width: 620px){
  .card-thumb .badge{ top:10px; right:10px; padding:6px 11px; font-size:11px; }
}

/* 마우스를 올리면 검은 막이 덮이고 이름이 뜬다 */
.card-over{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px; text-align:center;
  background:rgba(0,0,0,.45);
  color:#fff;
  opacity:0; transition:opacity .3s ease;
}
.card:hover .card-over,
.card:focus-visible .card-over{ opacity:1; }
.card-over .t{ font-size:clamp(18px, 1.8vw, 28px); font-weight:700; letter-spacing:-0.02em; }
.card-over .m{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); }

/* 손가락으로 쓰는 화면에는 hover 가 없으므로 아래쪽에 항상 얹어둔다 */
@media (hover: none){
  .card-over{
    opacity:1; justify-content:flex-end; gap:4px; padding:18px;
    background:linear-gradient(transparent 40%, rgba(0,0,0,.65));
  }
  .card-over .t{ font-size:16px; }
}

/* ================= 확대 보기 ================= */
.lb{
  position:fixed; inset:0; z-index:10;
  background:rgba(0,0,0,.965);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
body.lb-open .lb{ opacity:1; pointer-events:auto; }
body.lb-open{ overflow:hidden; }
body.lb-open .detail{ overflow:hidden; }

.lb-scroll{
  position:absolute; inset:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:78px 20px 100px;
  -webkit-overflow-scrolling:touch;
}
.lb-imgs{
  max-width:1000px; margin:0 auto;
  display:flex; flex-direction:column; gap:0;
}
.lb-imgs img{ width:100%; display:block; }
.lb-empty{
  color:#8a8a8a; text-align:center; padding:120px 0;
  font-size:14px; letter-spacing:.02em;
}
.lb-end{
  max-width:1000px; margin:36px auto 0;
  text-align:center; color:#6d6d6d;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}

.lb-bar{
  position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; gap:16px;
  padding:18px 22px;
  background:linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,0));
  color:#fff;
}
.lb-title{ display:flex; align-items:baseline; gap:12px; min-width:0; }
.lb-title strong{ font-size:16px; font-weight:700; letter-spacing:-0.01em; }
.lb-title span{ font-size:13px; color:#a9a9a9; white-space:nowrap; }
.lb-btn{
  margin-left:auto; flex:none;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#fff; font-size:15px; line-height:1; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.lb-btn:hover{ background:rgba(255,255,255,.2); transform:scale(1.06); }

.lb-nav{
  position:absolute; top:50%; z-index:2;
  transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.45);
  color:#fff; font-size:24px; line-height:1; cursor:pointer;
  transition:background .2s ease;
}
.lb-nav:hover{ background:rgba(255,255,255,.18); }
.lb-prev{ left:18px; }
.lb-next{ right:18px; }

@media (max-width: 620px){
  .work-grid{ grid-template-columns:1fr; margin-inline:calc(0px - var(--pad)); gap:6px; }
  .lb-scroll{ padding:70px 0 80px; }
  .lb-nav{ width:38px; height:38px; font-size:20px; }
  .lb-prev{ left:8px; } .lb-next{ right:8px; }
}