/* ===== work/work.css — styles.css(+ 상세는 blog/blog.css) 위에 얹는다. 색은 --bg/--ink/--duck-orange 세 가지만, 라운드 카드·블러 섀도·다크모드 없음 ===== */

/* --- 목록(/work) 탭: JS 가 켜질 때만 보인다(없으면 전체 목록 그대로) --- */
.work-tabs[hidden], .work-group[hidden], .marquee[hidden], .app-related[hidden] { display: none !important; }
.work-tabs { padding: 28px 36px 0; }
.work-tabs .container { display: flex; flex-wrap: wrap; gap: 4px 26px; border-bottom: 1px solid var(--hair); }
.work-tabs button {
  appearance: none; background: none; border: 0; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 0 12px;
  font-family: var(--ko); font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
  border-bottom: 2px solid transparent; margin-bottom: -1px; opacity: 0.55;
}
.work-tabs button .n { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.work-tabs button:hover { opacity: 1; }
.work-tabs button[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--ink); }
.work-tabs button[aria-pressed="true"] .n { color: var(--duck-orange-deep); }
.work-tabs button:focus-visible { outline: 2px solid var(--duck-orange-deep); outline-offset: 2px; }

/* --- 목록 카드 → 상세 페이지 링크(상세가 공개된 제품만). 카드 전체를 누를 수 있고 스토어 링크는 따로 눌린다 --- */
.work-row { position: relative; }
.work-row .more {
  display: inline-flex; align-items: center; min-height: 32px; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink);
}
.work-row .more::after { content: ""; position: absolute; inset: 0; }
.work-row .stores { position: relative; z-index: 1; }
.work-row:has(.more):hover { background: var(--bg-alt); }
.work-row:has(.more):hover .more { color: var(--duck-orange-deep); border-bottom-color: var(--duck-orange-deep); }

/* --- 상세(/work/<slug>) --- */
.app-head .eyebrow { display: block; }
.app-title {
  margin-top: 14px; font-family: var(--ko); font-weight: 700;
  font-size: clamp(38px, 6.4vw, 72px); line-height: 1.05; letter-spacing: -0.035em;
}
.app-en { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; color: var(--ink-soft); }
.app-lede { margin-top: 18px; max-width: 52ch; font-family: var(--ko); font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.app-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.app-stores a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; background: var(--bg); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.app-stores a::after { content: " ↗"; font-family: var(--sans); margin-left: 4px; }
.app-stores a:hover { background: var(--duck-orange); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.app-kv { margin-top: 26px; max-width: 44ch; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.app-kv > div { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px dotted var(--hair); }
.app-kv dt { color: var(--muted); min-width: 13ch; }
.app-kv dd { margin: 0; }

.app-shots { margin-top: 40px; }
.app-shots .shots {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 8px 16px 0;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.app-shots .shot { flex: 0 0 auto; width: clamp(180px, 26vw, 240px); scroll-snap-align: start; margin: 0; }
.app-shots .shot img, .app-shots .shot.placeholder > span {
  display: block; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover;
  border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--bg-alt);
}
.app-shots .shot.placeholder > span {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); border-style: dashed; box-shadow: none;
}
.app-shots figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }

.app-body { margin-top: 24px; }
.app-related { margin-top: 56px; }
.app-related .related-head { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; }
.app-related .related-head .en { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }
.app-related ul { list-style: none; margin: 0; padding: 0; }
.app-related li a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 44px; padding: 12px 0;
  border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink);
  font-family: var(--ko); font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
}
.app-related li a:hover { color: var(--duck-orange-deep); }
.app-related li time { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }

@media (max-width: 820px) {
  .work-tabs { padding: 20px 20px 0; }
  .work-tabs .container { gap: 4px 20px; }
  .app-stores a { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .app-stores a { transition: none; }
  .app-stores a:hover { transform: none; }
}

/* ===== /work 목록 전용 — 2026-09-25 에 work/index.html 인라인 <style> 에서 옮겨 왔다.
   영어판(/en/work)이 같은 파일을 쓰기 때문에 한쪽만 고쳐 갈라지는 일이 없다. ===== */
  /* ===== Work page ===== (.page-nav 는 styles.css 공용) */

  .work-hero { padding: 64px 36px 8px; }
  .work-hero h1 {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(46px, 9vw, 120px); line-height: 0.98; letter-spacing: -0.03em;
    margin-top: 16px;
  }
  .work-hero h1 .ko { font-family: var(--ko); font-style: normal; font-weight: 700; font-size: 0.42em; display: block; margin-top: 14px; letter-spacing: -0.02em; }
  .work-hero .lede { margin-top: 22px; max-width: 52ch; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
  .work-hero .lede.ko { font-family: var(--ko); }
  .work-hero .count-note { margin-top: 18px; display: inline-block; }

  .work-group { padding: 40px 36px 0; }
  .group-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    border-bottom: 1.5px solid var(--ink); padding-bottom: 12px;
  }
  .group-head h2 { font-family: var(--sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
  .group-head .n { font-family: var(--serif); font-style: italic; font-size: 18px; opacity: 0.65; }

  .work-list { border-top: 0; }
  .work-row .badge {
    display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px;
    font-family: var(--sans); font-size: 10px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--duck-orange); color: var(--ink); vertical-align: 4px;
  }
  .work-row .badge.soon { background: transparent; border: 1px solid currentColor; opacity: 0.6; }
  .work-row .stores { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
  .work-row .stores a {
    display: inline-flex; align-items: center; min-height: 32px;
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  }
  .work-row .stores a::after { content: " ↗"; font-family: var(--sans); }
  .work-row .stores a:hover { background: var(--duck-orange); text-decoration: none; }
  @media (max-width: 480px) { .work-row .stores a { min-height: 44px; } }

  .work-hero { position: relative; }
  .work-hero .hero-duck {
    position: absolute; right: 4%; top: 8px; width: clamp(120px, 16vw, 210px);
    transform: rotate(-4deg); pointer-events: none;
  }
  .work-group + .marquee { margin-top: 64px; }
  .marquee + .work-group { padding-top: 56px; }

  .work-foot { padding: 60px 36px 80px; }
  .work-foot .btn { min-height: 52px; }
  .work-foot .ascii-duck { margin-bottom: 22px; }
  .work-foot .foot-note {
    margin-top: 16px; font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.06em; color: var(--muted);
  }

  @media (max-width: 820px) {
    .work-hero { padding: 40px 20px 4px; }
    .work-hero .hero-duck { position: static; display: block; width: 116px; margin: 18px 0 -6px auto; }
    .work-group + .marquee { margin-top: 44px; }
    .marquee + .work-group { padding-top: 36px; }
    .work-group { padding: 32px 20px 0; }
    .work-foot { padding: 44px 20px 64px; }
    .work-foot .btn { width: 100%; justify-content: center; }
  }

/* 영어판(/en/work) — .ko 자리를 대신하는 부제 */
.work-hero h1 .sub { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 0.42em; display: block; margin-top: 14px; letter-spacing: -0.02em; }