/* 공통 색상 변수 / 기본 리셋 / 접근성 / 상단 네비게이션
   index, works, about, press, contact 5개 페이지에서 공유합니다.
   Haedal 페이지는 구조가 달라 별도 인라인 스타일을 유지합니다. */
:root{
  --bg:#0b0b0f;
  --bg-2:#111420;
  --navy:#1b2a4a;
  --accent:#86b6e8;              /* 전복 블루: 전복 자개의 푸른빛. 어두운 배경 대비 9.2:1 */
  --accent-dim:rgba(134,182,232,0.35);
  --ivory:#f5f0e6;
  --ivory-dim:rgba(245,240,230,0.62);
  --ivory-faint:rgba(245,240,230,0.32);
  --ivory-muted:rgba(245,240,230,0.55); /* 작은 글씨용: 어두운 배경 대비 5.6:1 (faint는 2.6:1이라 본문성 텍스트에 쓰면 안 됨) */
  /* 글자색은 사이트 전체에서 세 단계만: 제목 --ivory · 본문 --ivory-dim · 날짜·출처 같은 보조 --ivory-muted */
  --field-line:rgba(245,240,230,.2);  /* 입력칸·선택칸 테두리. 바탕은 --bg-2, 포커스는 --accent */
  --line:rgba(245,240,230,.12);        /* 구분선은 이 한 가지. 작품 정보 안의 강조선만 --accent-dim */
  --status-ok-bg:#1f4d3a; --status-ok-fg:#8fe0b8;
  --status-done-bg:#5c2323; --status-done-fg:#f0a6a6;
  --status-nfs-bg:#4a3a22; --status-nfs-fg:#e0c48f;
  --sweep-teal:#BFE9F2; --sweep-pearl:#E8E6E0; --sweep-lavender:#C9BEED;
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ivory);
  font-family:'Noto Sans KR', sans-serif;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
}
input, textarea, select, [contenteditable]{
  -webkit-user-select:text; -moz-user-select:text; user-select:text;
}
img{ -webkit-user-drag:none; user-drag:none; }

/* nav */
nav{
  position:relative; z-index:3;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:26px 32px; max-width:1180px; margin:0 auto;
}
.logo-block{display:grid; grid-template-columns:auto 1fr; row-gap:1px;}
.logo{display:contents; text-decoration:none;}
.logo-c, .logo-name{font-family:'Black Han Sans', sans-serif; font-size:20px; letter-spacing:1px; color:var(--ivory); line-height:1; align-self:center;}
.logo-name{grid-column:2;}
.logo-tag{grid-column:2; justify-self:center; text-align:center; font-family:'Space Mono','Noto Sans KR',monospace; font-size:11px; letter-spacing:.5px; color:var(--ivory-muted); text-transform:uppercase;}
.nav-icons{display:flex; align-items:center; gap:16px; padding-top:2px;}
.lang{display:flex; align-items:center; gap:5px;}
.lang button{border:none; background:none; padding:11px 4px; margin:-11px -4px; cursor:pointer; color:var(--ivory-dim); font-family:'Space Mono','Noto Sans KR',monospace; font-size:12px; font-weight:700; letter-spacing:.5px;}
.lang button:hover{color:var(--ivory);}
.lang button.on{color:var(--ivory);}
.lang .lang-sep{color:var(--ivory-faint); font-family:'Space Mono','Noto Sans KR',monospace; font-size:12px;}
.nav-menu{display:flex; gap:24px; list-style:none; margin:0 8px 0 0; padding:0; align-items:center; font-family:'Space Mono','Noto Sans KR',monospace; font-size:12px;}
.nav-menu a{font-family:'Space Mono','Noto Sans KR',monospace; font-size:12px; letter-spacing:.5px; color:var(--ivory-dim); text-decoration:none;}
.nav-menu a:hover, .nav-menu a.on{color:var(--ivory);}
.nav-menu .soon{font-family:'Space Mono','Noto Sans KR',monospace; font-size:12px; letter-spacing:.5px; color:var(--ivory-faint); cursor:default;}
/* 메뉴 글자에 자개빛이 한 번 스치는 호버 효과. 포인터가 있는 PC 환경 +
   모션을 줄이지 않은 경우에만 적용 — 터치·모션감소에서는 기존의 단순한
   color 전환(위 :hover 규칙)만 그대로 동작한다.
   구현: 실제 글자색을 바꾸는 대신 background-clip:text로 그라디언트를
   글자 안에만 채우고, background-position을 하나의 transition으로
   슬라이드시킨다(반복 재생 없음, 호버 유지 중엔 끝난 자리에 멈춰 있음).
   그라디언트는 "밝음 → 청록 → 진주색 → 라벤더 → 어두움" 순으로 정의하고
   시작 위치를 100%(밝은 쪽 끝)로 잡아 호버 시 0%로 옮기는데, 이렇게 해야
   (background-size:300%에서 position이 커질수록 내용물은 화면상 왼쪽으로
   흐른다는 성질 때문에) 실제로는 왼쪽에서 오른쪽으로 스치는 것처럼 보인다. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .nav-menu a:not([aria-current="page"]) .nav-sweep{
    background-image:linear-gradient(90deg,
      var(--ivory) 0%, var(--ivory) 33%,
      var(--sweep-lavender) 40%, var(--sweep-pearl) 47%, var(--sweep-teal) 54%,
      var(--ivory-dim) 67%, var(--ivory-dim) 100%);
    background-size:300% 100%;
    background-position:100% 0;
    -webkit-background-clip:text; background-clip:text;
    color:var(--ivory-dim); -webkit-text-fill-color:transparent;
    transition:background-position .3s ease, color .3s ease;
  }
  .nav-menu a:not([aria-current="page"]):hover .nav-sweep{
    background-position:0% 0;
    color:var(--ivory);
  }
}
/* 오른쪽에서 슬라이드로 나오는 메뉴 패널. 태블릿에서는 화면 오른쪽에 붙은 폭 좁은 패널로,
   모바일에서는 더 넓은 비율로 나오되 항상 같은 오른쪽 슬라이드 모션을 쓴다. */
.nav-backdrop{
  position:fixed; inset:0; z-index:49; background:rgba(5,5,10,.35);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.nav-backdrop.open{opacity:1; pointer-events:auto;}
.nav-overlay{
  position:fixed; top:0; right:0; bottom:0; z-index:50;
  width:min(420px, 46vw);
  background:rgba(6,7,12,.97);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  padding:96px 40px 40px; overflow-y:auto;
  transform:translateX(100%);
  /* 닫힌 패널이 화면 바로 밖에 있어 그림자가 화면 안으로 새므로, 닫히면 숨기고 그림자도 연 뒤에만 */
  visibility:hidden; box-shadow:none;
  transition:transform .38s cubic-bezier(.32,.72,0,1), box-shadow .38s ease, visibility 0s linear .38s;
}
.nav-overlay.open{transform:translateX(0); visibility:visible; box-shadow:-24px 0 60px rgba(0,0,0,.35); transition:transform .38s cubic-bezier(.32,.72,0,1), box-shadow .38s ease, visibility 0s;}
.overlay-close{position:absolute; top:22px; right:24px; font-size:20px;}
.overlay-links{display:flex; flex-direction:column; gap:26px; text-align:left;}
@media(max-width:560px){
  .nav-overlay{width:min(340px, 84vw); padding:88px 28px 32px;}
}
.overlay-links a, .overlay-links .soon{font-family:'Black Han Sans',sans-serif; font-size:26px; color:var(--ivory); text-decoration:none; padding:6px 0;}
.overlay-links .soon{color:var(--ivory-faint);}
.overlay-links .overlay-ig{font-family:'Space Mono','Noto Sans KR',monospace; font-size:12px; letter-spacing:.5px; color:var(--ivory-dim); margin-top:10px;}
.icon-btn{background:none; border:none; color:var(--ivory); cursor:pointer; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-12px; opacity:0.85;}
.icon-btn.menu-btn{display:none;}
@media(max-width:900px){ .nav-menu{display:none;} .icon-btn.menu-btn{display:flex;} .nav-icons{gap:20px;} }
.icon-btn:hover{opacity:1;}

/* 텍스트 링크는 두 가지뿐.
   ① .link-go  다른 페이지로 이동(→) — 전복 블루, 올리면 밑줄
   ② .link-sub 밖으로 나가거나(↗) 복사처럼 보조 동작 — 아이보리 62%, 늘 밑줄 */
.link-go, .link-sub{font-family:'Space Mono','Noto Sans KR',monospace; font-size:12px; letter-spacing:.5px; text-underline-offset:5px; text-decoration-thickness:1px;}
.link-go{color:var(--accent); text-decoration:none;}
.link-go:focus-visible{text-decoration:underline;}
@media (hover:hover){ .link-go:hover{text-decoration:underline;} }
.link-sub{color:var(--ivory-dim); text-decoration:underline; transition:color .2s ease;}
.link-sub:hover, .link-sub:focus-visible{color:var(--ivory);}
button.link-go, button.link-sub{background:none; border:none; padding:0; margin:0; cursor:pointer;}

footer{border-top:1px solid var(--line); padding:30px max(32px, calc((100% - 1180px) / 2 + 32px)) 44px; /* 선은 화면 끝까지, 글자는 로고와 같은 선에서 시작 */ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-family:'Space Mono','Noto Sans KR',monospace; font-size:12px; letter-spacing:.5px; color:var(--ivory-muted);}
footer a{color:var(--ivory-muted); text-decoration:none;}
footer a:hover{color:var(--ivory);}