@import url('https://fonts.googleapis.com/css2?family=Gaegu&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ── Workroom(작업실) 예고 페이지 ──────────────────────────────────
   책에 인쇄된 QR이 가리키는 방이다(saeharu.com/workroom/). 홈의 공사층과 짝이다.

   톤은 about과 같은 뉴트럴 라이트다 — 공사층 그림(home_construction_*.webp)이
   회색 계열이라 어둠속/하루끝의 다크 톤보다 이쪽이 그림과 붙는다. 색 값은
   about/style.css에서 그대로 가져와, 두 정적 페이지가 같은 종이처럼 보이게 한다. ── */
:root {
  --text:   #2c2422;
  /* 보조 텍스트. about에서 가져온 #93908a는 흰 카드 위를 전제한 값이라,
     모바일에서 카드가 투명해지면(--gs-page-bg #dfe2e5가 그대로 배경) 대비가
     2.45:1까지 떨어져 WCAG AA(4.5:1)의 절반에 못 미쳤다. 본문 대부분이 이 색이라
     읽기 어려웠던 주된 원인이다. 5.19:1이 되는 값으로 내린다. */
  --sub:    #5f5b55;
  --paper:  #f7f6f4;
  --ring:   rgba(44, 36, 34, 0.12);

  /* 상자·표·칩은 다른 종이를 덧대는 대신 **같은 잉크(#2c2422)를 농도만 달리해**
     카드 위에 쌓는다. 원래 쓰던 --paper(#f7f6f4)는 따뜻한 흰색이라 차가운 카드
     바탕(#f5f6f8) 위에서 색이 어긋나 보였다 — 밝기 차는 거의 없는데 색온도만
     달라서, 다른 재질을 덧댄 게 아니라 얼룩처럼 읽혔다. 아래 세 값은 줄무늬(0.055)와
     같은 잉크 계열이라 한 화면에서 자연스럽게 겹친다. */
  --tint-1: rgba(44, 36, 34, 0.028);   /* 상자·표 바닥 */
  --tint-2: rgba(44, 36, 34, 0.055);   /* 상자 안 체크 칩 */
  --tint-line: rgba(44, 36, 34, 0.07); /* 상자 테두리 — 바닥이 깔려 있어 --ring보다 옅게 */

  --gs-page-bg: #dfe2e5;
  --gs-card-bg: #f5f6f8;
  --gs-card-border: rgba(44, 36, 34, 0.08);
  --gs-card-shadow: rgba(44, 36, 34, 0.18);
  --gs-card-radius: 26px;
  --gs-max-width: 480px;
  /* 다른 방들과 카드 높이를 맞춰 방을 옮겨도 프레임이 흔들리지 않게 한다
     (about/style.css와 같은 계산 — 자세한 이유는 그쪽 주석 참고). */
  --gs-card-min-height: calc(var(--gs-max-width) * 16 / 9);

  --gh-accent: rgba(44, 36, 34, 0.08);
  --gh-accent-2: rgba(44, 36, 34, 0.14);
  --gh-on-accent: var(--text);
  --gh-surface: rgba(44, 36, 34, 0.08);
  --gh-surface-hover: rgba(44, 36, 34, 0.15);
  --gh-icon: rgba(44, 36, 34, 0.65);
  /* 음소거된 스피커 아이콘. 공용 기본값은 어둠속(다크 테마)을 전제한 흰색이라
     밝은 카드 위에서는 대비가 1.12:1까지 떨어져 아이콘이 있는 줄도 모른다.
     같은 잉크의 0.3(1.78:1)도 모자란다 — 아이콘 같은 비텍스트 요소는 WCAG
     1.4.11이 3:1을 요구하고, 버튼 바탕(#d6d6d8) 위에서 그 선을 넘는 값이 0.55다
     (3.18:1). 꺼짐 상태는 색이 아니라 아이콘에 그려진 ✕가 알린다. */
  --gh-icon-muted: rgba(44, 36, 34, 0.55);
  --gh-text: #93908a;
  --gh-text-strong: #2c2422;
  --gh-divider: rgba(44, 36, 34, 0.12);
  --gh-font: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* game-header.css 기본값은 어둠속의 다크 테마라, 로케일 팝업(.gh-locale-*)이
     오버라이드 없이는 이 페이지의 라이트 톤과 어긋난다. */
  --gh-modal-bg: var(--gs-card-bg);
  --gh-modal-border: var(--ring);
  --gh-body-text: var(--text);
  --gh-cancel-bg: rgba(44, 36, 34, 0.06);
  --gh-cancel-bg-hover: rgba(44, 36, 34, 0.12);
}

/* box-sizing 리셋이 없으면 카드 padding이 min-height 위에 따로 더해져
   이 방만 다른 방보다 길어진다(about과 같은 이유). */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--gh-font);
  -webkit-font-smoothing: antialiased;
  /* 한국어는 어절 중간에서도 줄이 넘어가는 게 기본이라 "응원하 / 는"처럼 갈린다.
     이 페이지에는 끊기면 안 되는 긴 문자열(URL 등)이 없으므로 전역으로 건다. */
  word-break: keep-all;
}

.workroom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 카드 높이가 다른 방 비율에 맞춰 고정되어 내용보다 크다. 장면+본문 전체를
     카드 세로 가운데에 놓는다. */
  justify-content: center;
}

/* ── 공사장 테마 ────────────────────────────────────────────────
   홈의 작업실 층을 통째로 한 장 얹던 것을, 그 장면을 이루던 요소로 흩어 놓는다.
   ① 줄무늬는 카드 배경에 깔고, ② 알전구는 카드 위쪽 모서리에서 늘어뜨리고,
   ③ 바리케이드와 그 위 캐릭터만 원본 그림을 쓴다. ── */

/* ① 공사장 줄무늬.
   원본(home_construction_bg.webp)의 픽셀을 재보니 정확히 45°, 가로 주기 56px,
   두 색은 #d3d3d3 / #9c9c9c였다. 45° 줄무늬의 수직 주기는 가로 주기 × sin45°
   = 56 × 0.7071 ≈ 39.6px이고 한 줄의 폭은 그 절반인 19.8px이다.

   원본 명도차(약 55)를 그대로 쓰면 본문 뒤가 너무 시끄러워 방금 맞춘 가독성을
   깎아먹는다. 그래서 진하기를 크게 낮추고, 위에서 아래로 사라지게 마스킹해
   "들어오는 자리"에서만 테마가 보이고 읽는 자리는 조용하게 둔다. */
.workroom-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 340px;
  background: repeating-linear-gradient(
    45deg,
    rgba(44, 36, 34, 0.055) 0 19.8px,
    transparent 19.8px 39.6px
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* 테마 요소는 줄무늬 위, 본문 아래에 놓는다. */
.workroom-theme {
  position: relative;
  z-index: 1;
  /* 알전구를 카드 맨 위 모서리에서 늘어뜨리기 위한 기준점. 좌우 여백은 두지
     않는다 — 널빤지가 바리케이드 폭의 36.8%뿐이라, 장면이 좁아진 만큼 문구가
     그대로 작아진다. 카드 폭을 다 쓰게 두어 널빤지를 넓힌다. */
  padding: 0;
}

.workroom-content {
  position: relative;
  z-index: 1;
}

/* ② 알전구: 카드 위 모서리에 매달려 살랑인다. 홈에서는 꺼진 채 있다가 호버해야
   켜지지만, 여기서는 계속 켜둔다 — "지금 누가 안에서 일하고 있는 자리"라서다.
   전선은 ::before, 전구알은 ::after (홈의 .home-bulb와 같은 치수). */
.workroom-bulb {
  position: absolute;
  /* GameHeader 아이콘이 오른쪽 위(right:20px, 44px 버튼 3개)를 차지하므로
     전구는 왼쪽에 매단다. 겹치면 전구알이 아이콘 뒤로 숨는다. */
  left: 17%;
  top: 0;
  pointer-events: none;
  transform-origin: top center;
  animation: workroom-bulb-sway 3.4s ease-in-out infinite;
}

.workroom-bulb::before {
  content: '';
  position: absolute;
  left: -0.75px;
  top: 0;
  width: 1.5px;
  height: 34px;
  background: rgba(44, 36, 34, 0.45);
}

.workroom-bulb::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 34px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffdf9b;
  box-shadow: 0 0 7px 2px rgba(255, 223, 155, 0.5);
}

@keyframes workroom-bulb-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

/* ③ 바리케이드. 상자에 담지 않고 줄무늬 위에 그대로 세운다.
   위 여백은 %가 아니라 px다 — GameHeader 아이콘이 카드 폭과 무관하게 늘
   top:26px / height:44px(아래끝 70px)에 고정이라, 그 아래로 띄우는 값도 고정이어야
   카드가 좁든 넓든 겹치지 않는다. */
.workroom-barricade {
  position: relative;
  aspect-ratio: 900 / 250;
  margin-top: 88px;
  /* 카드 폭보다 넓게 세워 좌우로 흘려보낸다(카드는 overflow: hidden이라 끝이 잘린다).
     널빤지가 바리케이드 폭의 36.8%뿐이라, 장면이 조금만 작아져도 문구가 널빤지를
     꽉 채우고 fit()이 글자를 줄인다. 375px 화면에서 널빤지가 126px → 143px이 되어
     문구가 줄지 않고 기본 크기(0.95rem)로 앉는다. 잘리는 건 펜스의 다리 끝뿐이라,
     오히려 바리케이드가 방을 가로질러 막고 선 것처럼 읽힌다. */
  width: 114%;
  margin-left: -7%;
}

.workroom-barricade-fence {
  display: block;
  width: 100%;
  height: auto;
}

/* 캐릭터·스패너는 바리케이드와 같은 좌표계로 얹는다. 좌표는 홈의 값
   (style.css: left 13.9% / top -17.1% / width 75%, 1000×363 벽 기준)을
   펜스 그림(벽 안에서 left:5%/width:90%/top:15.3%) 기준으로 환산한 것이다:
     width  75%   → 75/90            = 83.33%
     left   13.9% → (13.9 - 5) / 90  =  9.89%
   세로는 그림의 알파 채널을 직접 재서 맞췄다 — 발끝은 캐릭터 그림의 60.6%,
   널빤지 윗면은 펜스 그림의 56.8% 지점이라 56.8 - 60.6×1.70 = -46.2%다. */
.workroom-barricade-figure {
  position: absolute;
  left: 9.89%;
  top: -46.2%;
  width: 83.33%;
  /* 마크업의 height 속성(510)이 프레젠테이션 힌트로 그대로 적용되지 않도록
     auto로 되돌린다. 빠뜨리면 그림이 원본 비율을 무시하고 세로로 늘어난다. */
  height: auto;
  display: block;
}

/* 화면에서만 감추고 스크린 리더에는 남기는 유틸. 허브의 h1과 바리케이드 문구의
   낱글자 대체 텍스트가 쓴다. */
.workroom-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 널빤지에 직접 적힌 글씨. 홈의 "작업실" 팻말과 같은 방식이다 — 종이나 테두리 없이
   손글씨체만 얹고 살짝 기울여 사람이 현장에서 적어둔 것처럼 보이게 한다.

   좌표는 홈에서 환산했다. 홈의 사인은 벽 기준 top 61.9%이고 펜스는 벽 안에서
   15.3%~84.2%(높이 68.9%)를 차지하므로, 펜스 기준으로는 (61.9-15.3)/68.9 = 67.6%다. */
.workroom-barricade-sign {
  position: absolute;
  left: 50%;
  top: 67.6%;
  transform: translate(-50%, -50%) rotate(-2deg);
  font-family: 'Gaegu', var(--gh-font);
  font-size: 0.95rem;
  color: rgba(44, 36, 34, 0.78);
  white-space: nowrap;
  pointer-events: none;
}

/* 문구는 한 글자씩 나뉘어(허브의 인라인 스크립트) 캐릭터가 들썩이는 박자에 맞춰
   차례로 흘러간다. 글자마다 --i가 붙고, 그만큼 시작이 늦어져 물결이 된다.
   주기는 캐릭터와 같은 2.6s라 둘이 한 호흡으로 움직인다. */
.workroom-sign-char {
  display: inline-block;
  animation: workroom-sign-wave 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 70ms);
}

@keyframes workroom-sign-wave {
  0%, 30%, 100% { transform: translateY(0); }
  12% { transform: translateY(-3px); }
}

/* 캐릭터는 콩콩 뛰듯 들썩인다. transform-origin은 그림 속 발끝(49%/60%)이라
   발이 바리케이드에 붙은 채 몸만 움직이는 것처럼 보인다(홈과 같은 값·같은 동작). */
.workroom-barricade-character {
  transform-origin: 49% 60%;
  animation: workroom-bob 2.6s ease-in-out infinite;
}

@keyframes workroom-bob {
  0%, 48%, 100% { transform: translateY(0) rotate(0deg); }
  12% { transform: translateY(-4px) rotate(-1.2deg); }
  24% { transform: translateY(0) rotate(0deg); }
  36% { transform: translateY(-4px) rotate(1deg); }
}

/* 스패너는 캐릭터와 같은 캔버스(900×510)에 그려져 있어 같은 사각형에 얹으면
   손 옆에 정확히 놓인다. 캐릭터가 들썩이는 박자와 어긋나게 돌려서 "뭔가
   두드리는 중"처럼 보이게 한다. */
.workroom-barricade-wrench {
  transform-origin: 42% 47%;
  animation: workroom-wrench 2.6s ease-in-out infinite;
}

@keyframes workroom-wrench {
  0%, 46%, 100% { transform: rotate(0deg); }
  14% { transform: rotate(-16deg); }
  30% { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .workroom-barricade-character,
  .workroom-barricade-wrench,
  .workroom-bulb,
  .workroom-sign-char {
    animation: none;
    transform: none;
  }
}

/* ── 본문 ── */
.workroom-content {
  display: flex;
  flex-direction: column;
  /* 좌우 30px은 375px 화면에서 본문 폭을 315px까지 좁힌다. 지은이가 넣은
     줄바꿈이 그 폭을 넘겨 다시 접히는 일을 줄이려고 24px로 당겼다. */
  padding: 20px 24px 28px;
}

.workroom-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 12px;
  text-align: center;
}

.workroom-title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
}

.workroom-divider {
  width: 40px;
  height: 1px;
  margin: 6px 0;
  background: var(--ring);
}

/* ── 두 자리로 들어가는 문 ────────────────────────────────────
   허브(작업실 index)에서 상세 페이지로 넘어가는 카드 버튼. 그림이 주인공이라
   카드 폭을 본문 문단(320px)보다 조금 넓게 잡아 그림이 답답해 보이지 않게 하고,
   글은 그림 아래에서 왼쪽 정렬로 되돌린다(본문은 가운데 정렬이다). ── */
.workroom-rooms {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 360px;
  margin-top: 22px;
  text-align: left;
}

.workroom-room {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--ring);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.workroom-room:hover,
.workroom-room:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(44, 36, 34, 0.22);
  box-shadow: 0 8px 20px rgba(44, 36, 34, 0.10);
}

.workroom-room:active {
  transform: translateY(0);
  box-shadow: none;
}

/* 그림은 1000×500(2:1) 캔버스 그대로다. width/height 속성을 마크업에 적어
   뒀으니 브라우저가 로드 전에도 자리를 잡아, 카드가 나중에 덜컥 늘어나지 않는다. */
.workroom-room-art {
  display: block;
  width: 100%;
  height: auto;
  /* 그림 자체가 종이 질감 배경을 품고 있어 아래 글 영역(--paper)과 톤이 살짝
     어긋난다. 경계를 선으로 긋는 대신 옅게 눌러 자연스럽게 이어지게 한다. */
  border-bottom: 1px solid rgba(44, 36, 34, 0.06);
}

.workroom-room-text {
  padding: 13px 16px 15px;
}

.workroom-room-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workroom-room-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}

.workroom-room-desc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--sub);
}

/* 넘어간다는 신호. 호버하면 살짝 밀려나 "이쪽" 하고 가리킨다. */
.workroom-room-go {
  width: 14px;
  height: 14px;
  flex: none;
  margin-left: auto;
  color: rgba(44, 36, 34, 0.35);
  transition: transform 180ms ease, color 180ms ease;
}

.workroom-room:hover .workroom-room-go {
  transform: translateX(3px);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .workroom-room,
  .workroom-room-go {
    transition: none;
  }

  .workroom-room:hover,
  .workroom-room:focus-visible {
    transform: none;
  }

  .workroom-room:hover .workroom-room-go {
    transform: none;
  }
}

/* "준비 중" / "곧 열림" 표시. 허브에서는 제목 옆에, 상세 페이지에서는
   제목 아래 가운데에 놓인다. */
.workroom-chip {
  margin-left: auto;
  padding: 3px 9px 2px;
  border-radius: 999px;
  background: rgba(44, 36, 34, 0.06);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--sub);
  white-space: nowrap;
}

.workroom-chip--detail {
  margin: 6px 0 0;
}

/* ── 상세 페이지 ──────────────────────────────────────────────
   허브와 같은 카드 안이지만, 위 장면(공사장 띠) 대신 그 방의 그림 한 장을
   히어로로 얹는다. about 페이지가 히어로를 쓰는 방식과 같다. ── */
/* 상세 페이지는 그 방의 그림 자체가 배경이라 줄무늬는 깔지 않는다 —
   둘을 겹치면 그림이 무늬에 묻힌다. */
.workroom-card--detail::before {
  display: none;
}

/* 허브가 줄무늬를 배경으로 깔듯, 상세 페이지는 그 방의 그림을 배경으로 깐다.
   액자처럼 가두지 않으려고 좌우 여백과 모서리 굴림을 없애 카드 폭을 꽉 채우고,
   위아래는 mask로 지워 본문이 그림에서 자연스럽게 이어져 나오게 한다.

   위쪽은 한때 여백 없이 아이콘 뒤까지 올렸지만 되돌렸다 — 아이콘 뒤로 들어간
   그림이 backdrop-filter에 뭉개져 무슨 장면인지 읽히지 않았다. 지금은 아이콘 줄
   아래로 내린다. 아이콘은 카드 폭과 무관하게 늘 top:26px ·
   height:44px(아래끝 70px)에 고정이라, 비켜 주는 값도 %가 아니라 px이어야 한다.
   34px을 주면 그림 속 주인공(세로 22~80% 구간)이 아이콘 바로 아래에서 시작한다. */
.workroom-hero {
  padding: 34px 0 0;
}

.workroom-hero-art {
  display: block;
  width: 100%;
  height: auto;
  /* 위아래를 모두 지운다. 그림의 종이 톤이 페이지 배경(#dfe2e5)보다 밝아서
     한쪽만 지우면 시작하는 자리에 가로 이음새가 보인다. 그림 속 주인공은
     세로 22~80% 구간에 있어, 양 끝을 지워도 온전히 남는다.
     아래쪽은 그림이 끝나기 전(90%)에 이미 다 지워져야 한다 — 100%까지 끌면
     제목이 앉는 자리에 그림 꼬리가 아직 남아 글자와 겹쳐 보인다.
     선명하게 남는 구간(9~62%)은 넉넉히 잡는다. 이 구간을 좁히면 위아래 흐림이
     주인공까지 먹어 들어가 그림이 무슨 장면인지 알아보기 어려워진다. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 62%, transparent 90%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 62%, transparent 90%);
}

/* 본문을 그림 쪽으로 끌어올려 둘이 이어지게 한다. 다만 제목이 그림의 사라지는
   꼬리 위로 올라가면 안 되므로, 위 마스크가 끝나는 자리보다 아래에 머문다
   (-14%는 22px 겹쳤다). 세로 여백이 카드 폭에 비례해야 화면 크기가 달라져도
   같은 간격을 유지하므로 %를 쓴다. */
.workroom-card--detail .workroom-content {
  margin-top: -9%;
}

.workroom-title--detail {
  font-size: 1.5rem;
}

/* 제목 바로 아래 한 줄 소개. 본문보다 크고 진하게 두어 "이 방이 무엇인지"가
   스크롤 없이 먼저 읽히게 한다. */
.workroom-lead {
  margin: 10px 0 0;
  max-width: 340px;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
}

.workroom-detail {
  width: 100%;
  max-width: 340px;
  text-align: left;
}

/* ── 한눈에 보기 ────────────────────────────────────────────
   커머스 상세페이지의 "제품 정보"에 해당하는 자리. 아래 문단들이 같은 내용을
   이야기로 풀지만, 언제·어디서·얼마인지만 확인하려는 사람은 글을 다 읽어야 한다.
   그 네 가지만 먼저 떼어 표로 세운다. ── */
.workroom-spec {
  width: 100%;
  max-width: 340px;
  margin: 20px 0 0;
  padding: 4px 16px;
  border-radius: 14px;
  background: var(--tint-1);
  border: 1px solid var(--tint-line);
  text-align: left;
}

.workroom-spec-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
}

.workroom-spec-row + .workroom-spec-row {
  border-top: 1px solid rgba(44, 36, 34, 0.07);
}

.workroom-spec-row dt {
  flex: none;
  width: 56px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sub);
}

.workroom-spec-row dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}

/* ── 목록 ────────────────────────────────────────────────────
   나란한 항목은 문장으로 이어 붙이는 것보다 목록이 훨씬 빨리 읽힌다.
   점(불릿)은 ::before로 그려 글머리와 본문의 간격을 정확히 잡는다. ── */
.workroom-bullets {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* 왼쪽 정렬이라 글머리는 매달린 들여쓰기로 둔다 — 인라인으로 두면 두 줄째가
   점 아래까지 밀려 나와 목록의 왼쪽 선이 흐트러진다. */
.workroom-bullets li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--sub);
}

.workroom-bullets li + li {
  margin-top: 2px;
}

.workroom-bullets li::before {
  content: '';
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(44, 36, 34, 0.32);
  transform: translateY(-0.28em);
}

/* 체크리스트: "나에게 해당하나?"를 훑는 자리라 점 대신 체크 표시를 쓴다. */
.workroom-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

/* 항목마다 옅은 바탕을 깔아 하나의 덩어리로 세운다 — 줄이 접혔을 때 어디까지가
   한 항목인지 흐려지는 걸 막는다. 체크는 첫 줄 왼쪽에 붙이고 글은 그 오른쪽에
   모아, 두 줄째도 같은 선에서 시작하게 한다. */
.workroom-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px 12px;
  border-radius: 12px;
  background: var(--tint-2);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--sub);
}

.workroom-checks li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: rgba(44, 36, 34, 0.08);
  /* 체크는 인라인 SVG가 아니라 배경 그림이다 — 마크업에서 아이콘 span을 걷어내
     항목 하나가 곧 li 하나가 되게 했다. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5.1' fill='none' stroke='%232c2422' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

/* ── 방식 박스 ──────────────────────────────────────────────
   집짓기의 세 방식은 나란한 상품이라 각자 박스에 세운다. 스펙 표 한 줄로 묶으면
   서로 다른 셋이 한 덩어리로 뭉개지고, 탭으로 접으면 무엇을 하는 곳인지 보러 온
   사람이 셋 중 하나만 보게 된다. ── */
.workroom-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

/* 꼭지 이름은 상자 안, 맨 위 가운데에 앉는다. 이름표는 상자 폭의 가운데에 걸릴 때
   표지판처럼 읽히고, 읽는 글은 왼쪽에서 시작해야 눈이 줄을 놓치지 않는다.
   그래서 상자는 왼쪽 정렬이고, 제목과 그 위 "누구에게"만 가운데로 밀어 둔다. */
.workroom-option {
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: var(--tint-1);
  border: 1px solid var(--tint-line);
  text-align: left;
}

/* "누구에게"는 제목 앞의 리드다. 옅은 한 줄로 두고, 이름은 아래 제목이 받는다. */
.workroom-option-for {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sub);
  text-align: center;
}

/* 꼭지 이름. 알약으로 감싸 봤지만 잉크를 꽉 채운 면 하나가 페이지에서 너무 튀었다 —
   아래 짧은 선이 이미 이름과 본문을 갈라 주므로 채움 없이 글자만 둔다. 위계는 굵기가
   아니라 자리(가운데)와 선이 만든다.
   `width: fit-content` + `margin: auto`라야 왼쪽 정렬한 상자 안에서도 이름만 가운데에
   선다(text-align은 요소 자체가 아니라 그 안의 글자를 옮긴다). ::after도 이 폭의
   가운데를 기준으로 놓인다. */
.workroom-option-title {
  position: relative;
  display: block;
  width: fit-content;
  /* 아래 여백은 짧은 선(::after)이 앉을 자리까지 포함한 값이다. */
  margin: 0 auto 26px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  text-align: center;
}

/* 이름과 본문 사이에 짧은 선을 하나 둬서 한 호흡 쉬어 간다. 이름 폭을 따라가지
   않고 28px 고정이라, 제목이 길든 짧든 같은 자리에서 같은 크기로 끊어 준다. */
.workroom-option-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 28px;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(44, 36, 34, 0.18);
}

/* 모임비 금액. 문단 사이에서 눈에 걸리도록 한 급 키운다. */
.workroom-amount {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
}

.workroom-detail-body {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.9;
  color: var(--sub);
  /* 마지막 줄에 한 덩어리만 남는 걸 줄인다. 지원하지 않는 브라우저는 무시한다. */
  text-wrap: pretty;
}

.workroom-detail-body + .workroom-detail-body {
  margin-top: 14px;
}

/* 챕터 앞 소개 문단은 카드 안 본문보다 촘촘하게 짠다. 이 자리는 서너 문단이
   연달아 오는 유일한 곳이라, 카드 안과 같은 1.9 줄간격으로 두면 글보다 빈 줄이
   많아 보이고 첫 화면을 다 잡아먹는다. */
.workroom-detail > .workroom-detail-body {
  line-height: 1.75;
}

.workroom-detail > .workroom-detail-body + .workroom-detail-body {
  margin-top: 10px;
}

/* 목록 뒤에 문단이 이어질 때. 이게 없으면 마지막 항목과 다음 문장이 붙어
   목록이 어디서 끝났는지 보이지 않는다. */
.workroom-bullets + .workroom-detail-body,
.workroom-checks + .workroom-detail-body,
.workroom-options + .workroom-detail-body {
  margin-top: 16px;
}

/* ── 문의 안내 ──────────────────────────────────────────────
   아직 신청 창구가 없는 방(집짓기)이 문 열기 전까지 쓰는 자리. 하루끝작업실의
   신청 폼과 같은 위치·같은 구분선을 써서 두 페이지가 같은 리듬으로 끝난다. ── */
.workroom-contact {
  width: 100%;
  max-width: 340px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ring);
}

.workroom-contact-lead {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--sub);
}

.workroom-contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.workroom-contact-link.gh-cta {
  border: 0;
  font-size: 0.86rem;
  padding: 11px 18px;
}

/* 아이콘 크기를 명시하지 않으면 인라인 SVG가 뷰박스 비율대로 부모 폭까지 부푼다. */
.workroom-contact-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ── 신청 폼 ──────────────────────────────────────────────────
   방 소개를 다 읽은 뒤에 오는 자리라, 위에 구분선을 두어 "읽는 곳"과
   "쓰는 곳"을 나눈다. 입력칸은 종이 위에 눌러 그린 것처럼 옅은 테두리만 준다. ── */
.workroom-apply {
  width: 100%;
  max-width: 340px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ring);
  /* 본문(.workroom-body)이 가운데 정렬이라 그대로 두면 입력칸 라벨까지 가운데로
     간다. 폼 안쪽만 왼쪽으로 되돌리고, 머리말 두 줄은 페이지 톤에 맞춰 가운데 둔다. */
  text-align: left;
}

.workroom-apply-title,
.workroom-apply-lead {
  text-align: center;
}

/* 가운데 정렬은 마지막 줄이 짧게 남으면 문단이 삼각형처럼 보인다. `pretty`는 마지막
   한 줄만 손보므로 네 줄짜리에는 듣지 않고, `balance`가 줄들을 고르게 나눈다
   (25·25·26·13 → 20·21·22·26). "시작할 수 / 있도록"처럼 한 구절이 갈리던 것도
   같이 풀린다. 집짓기의 문의 안내는 한 줄짜리라 따로 걸지 않는다. */
.workroom-apply-lead {
  text-wrap: balance;
}

.workroom-apply-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}

.workroom-apply-lead {
  margin: 6px 0 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--sub);
}

.workroom-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.workroom-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workroom-field-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
}

.workroom-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ring);
  border-radius: 10px;
  /* 입력칸만 흰색이다 — 주변 상자가 잉크를 옅게 깐 바닥이라, 그보다 밝아야
     "여기에 쓰세요"로 읽힌다. --paper(따뜻한 흰색)를 쓰면 차가운 카드 위에서
     색온도가 어긋나므로 중립인 흰색을 그대로 쓴다. */
  background: #fff;
  font-family: var(--gh-font);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.workroom-input:focus {
  outline: none;
  border-color: rgba(44, 36, 34, 0.38);
  background: #fff;
}

.workroom-textarea {
  resize: vertical;
  min-height: 88px;
}

/* iOS에서 입력칸을 탭할 때 화면이 확대되는 걸 막으려면 글자가 16px 이상이어야 한다.
   터치 기기에서만 키워, 데스크톱의 촘촘한 인상은 그대로 둔다. */
@media (hover: none) and (pointer: coarse) {
  .workroom-input {
    font-size: 16px;
  }
}

/* 봇 미끼 칸은 화면에서 완전히 치우되 display:none은 피한다 — 일부 봇은
   숨겨진 정도를 보고 건너뛴다. */
.workroom-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.workroom-form-error {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #a4453a;
}

.workroom-submit.gh-cta {
  align-self: center;
  border: 0;
  font-size: 0.86rem;
  padding: 12px 24px;
  cursor: pointer;
}

/* 아이콘 크기를 적지 않으면 인라인 SVG가 뷰박스 비율대로 부모 폭까지 부푼다.
   문의 안내 버튼(.workroom-contact-link svg)과 같은 16px이다. */
.workroom-submit svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.workroom-submit.is-busy,
.workroom-submit:disabled {
  opacity: 0.55;
  cursor: default;
}

/* 제출 성공 뒤 폼 자리에 펼쳐지는 안내. */
/* 접수 알림. 예전에는 폼 자리에 안내 상자를 펼쳤는데, 같은 이야기(연락드릴게요 ·
   모임비는 나중에)를 위 머리말이 이미 하고 있어서 두 번 읽히고 화면만 길어졌다.
   지금은 화면 아래에 잠깐 떴다 사라지는 한 줄이다.
   `position: fixed`라 카드 밖(문서 끝)에 둔다 — 카드는 overflow:hidden이라 안에
   두면 잘린다. 이 방에서 유일하게 잉크를 꽉 채운 면인데, 잠깐 떴다 사라지는 알림은
   페이지의 일부가 아니라 그 위에 얹히는 것이라 톤 규칙과 부딪히지 않는다. */
.workroom-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 40px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--gs-card-bg);
  font-size: 0.88rem;
  box-shadow: 0 10px 30px rgba(44, 36, 34, 0.28);
  /* 떠오르는 동안 아래에서 올라온다. translateX(-50%)를 잃지 않도록 두 변환을 함께 적는다. */
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}

.workroom-toast.is-on {
  transform: translate(-50%, 0);
  opacity: 1;
}

.workroom-toast svg {
  width: 16px;
  height: 16px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .workroom-toast {
    transition: opacity 260ms ease;
    transform: translate(-50%, 0);
  }
}

/* [hidden]은 UA 스타일시트라 .workroom-form의 display:flex에 밀린다 — 접수 뒤에도
   폼이 그대로 남아 있던 원인이다. */
.workroom-form[hidden] {
  display: none !important;
}

/* ── 모바일에서도 카드를 남긴다 ────────────────────────────────
   shared/game-shell.css는 560px 아래에서 카드의 배경·테두리·그림자·라운드를 모두
   지우고 화면을 꽉 채운다("각 방의 배경을 그대로 보여준다"는 공용 규칙). 어둠속처럼
   방 자체가 배경을 가진 곳에는 맞지만, 작업실은 종이 카드가 곧 방이라 그 규칙을
   따르면 셸 경계가 사라지고 밝은 카드(#f5f6f8) 대신 어두운 페이지 배경(#dfe2e5)만
   남는다. 그래서 이 방에서만 데스크톱과 같은 모습으로 되돌린다.
   공용 규칙이 --gs-max-width를 !important로 덮으므로 이쪽도 !important가 필요하다. ── */
@media (max-width: 560px) {
  :root {
    --gs-max-width: 480px !important;
  }

  .game-shell {
    width: min(var(--gs-max-width), calc(100vw - 32px));
    padding: 16px 0 calc(24px + env(safe-area-inset-bottom));
  }

  .workroom-card {
    margin-top: 0;
    border-radius: var(--gs-card-radius);
    background: var(--gs-card-bg);
    border: 1px solid var(--gs-card-border);
    box-shadow: 0 16px 48px var(--gs-card-shadow);
  }
}