/* =====================================================================
   문제 문서 — 어절 토큰 + 레이아웃 6종(메뉴판 · 안내문 · 대화창 · SNS · 안내판 · 후기)
   글자 크기는 JS(fitDoc)가 --doc-font 로 정한다. 여기서는 전부 em 비례로 잡는다.
   ⚠ 히트영역: .tok 의 padding(--hit-x/--hit-y)이 곧 터치 영역이다 (좌표를 손으로 따지 않는다).
   ⚠ 배경 그림(assets/bg/{layout}.webp)이 있으면 .has-bg 로 CSS 골격 대신 그림을 깐다.
      그림 규격: 1468×900 (2배 권장), 글이 놓이는 안쪽은 비워 둘 것.
   ===================================================================== */

.doc {
  position: absolute; inset: 0; overflow: hidden; box-sizing: border-box;
  border-radius: 32px; background: var(--c-card); box-shadow: var(--shadow-card);
  --doc-font: 42px; --doc-lh: 1.5; --title-scale: 1.2; --hit-x: 6px; --hit-y: 12px;
  --ink: var(--c-ink); --ink-2: var(--c-ink-2); --accent: var(--c-blue); --paper: var(--c-card);
  color: var(--ink); font-size: var(--doc-font); line-height: var(--doc-lh); font-weight: 500;
  transition: filter var(--dur-med) var(--ease-soft), opacity var(--dur-med) var(--ease-soft);
}
.doc.has-bg { background: var(--doc-bg) center / cover no-repeat; border: 0; }
.doc.is-veiled { filter: blur(16px) saturate(.7); opacity: .55; }
.doc__inner { position: relative; box-sizing: border-box; min-height: 100%; padding: 32px 56px; }

.doc__title { margin: 0 0 .55em !important; font-size: calc(var(--doc-font) * var(--title-scale)); font-weight: 900; line-height: 1.3; }
.doc__icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.16em; margin-right: .3em; color: var(--accent); }
.doc__icon svg { stroke-width: 3.6; }
.doc__head { font-size: 1.02em; font-weight: 900; color: var(--accent); margin: 0 0 .1em !important; }
.doc__line { margin: 0 !important; }
.doc__line--tags { color: #2F6FB8; }
.doc__para + .doc__para { margin-top: .62em; }
.gap { display: inline-block; width: 1.1em; }

/* ── 어절 토큰 (터치 대상) ──
   세로 패딩은 인라인 레이아웃을 밀지 않으면서 손가락 여유를 준다.
   가로 패딩은 같은 크기의 음수 마진으로 상쇄해 글자 간격이 벌어지지 않게 한다. */
.tok {
  position: relative; padding: var(--hit-y) var(--hit-x); margin: 0 calc(var(--hit-x) * -1);
  border-radius: 8px; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tok--tag { color: #2F6FB8; font-weight: 700; }
.tok--star { color: #F2A900; letter-spacing: .04em; }

.tok.is-wrong {
  animation: tokShake .5s var(--ease-inout);
  text-decoration: underline wavy var(--c-wrong); text-decoration-thickness: 3px; text-underline-offset: .22em;
  background: color-mix(in srgb, var(--c-wrong) 14%, transparent);
}
@keyframes tokShake { 0%, 100% { translate: 0; } 20% { translate: -7px; } 45% { translate: 6px; } 72% { translate: -3px; } }

/* 찾은 오류 = 빨간 색연필 동그라미 + 고쳐 쓴 어절 (9/29 — 형광펜 대신 채점 느낌) */
.tok.is-found .fix {
  display: inline-block; padding: 0 .06em; font-weight: 900;
  background: transparent; color: inherit; /* mark 기본(노란 배경) 무력화 */
  animation: fixPop .55s var(--ease-back) both;
}
@keyframes fixPop { 0% { scale: 1.25; } 100% { scale: 1; } }
.tok.is-found::after {
  content: ""; position: absolute; inset: 0 -.1em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90' preserveAspectRatio='none'%3E%3Cpath d='M100 8 C 160 4 194 22 193 45 C 192 72 150 85 96 84 C 44 83 8 70 7 46 C 6 22 46 6 100 8' fill='none' stroke='%23E5473C' stroke-width='5' stroke-linecap='round' opacity='.92'/%3E%3Cpath d='M96 13 C 152 9 184 25 183 43' fill='none' stroke='%23E5473C' stroke-width='4' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  animation: circlePop .5s var(--ease-back) both;
}
@keyframes circlePop { 0% { scale: 1.3; opacity: 0; } 100% { scale: 1; opacity: 1; } }
.tok__no {
  position: absolute; left: 0; top: var(--hit-y); translate: -42% -46%;
  width: 1.5em; height: 1.5em; font-size: .42em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-blue); color: #fff; font-weight: 900; line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
/* 시간 종료 — 못 찾은 오류 자리 */
.tok.is-missed {
  outline: 4px dashed var(--c-wrong); outline-offset: 2px;
  background: color-mix(in srgb, var(--c-wrong) 12%, transparent);
}

/* 개발 표시 — 최소 글자에서도 원고가 넘칠 때 */
body.is-dev .doc.is-overflow::after {
  content: "원고 넘침"; position: absolute; right: 12px; bottom: 10px; z-index: 2;
  padding: 4px 14px; border-radius: 999px; background: var(--c-red); color: #fff; font-size: 22px; font-weight: 800;
}

/* =====================================================================
   1) 메뉴판 — 분식점 칠판 (기획안 p15)
   ===================================================================== */
.doc--menu {
  --ink: #F5F2E8; --ink-2: #DCD7C6; --accent: #FFD166; --c-hl-ink: #23331F;
  background: radial-gradient(ellipse at 32% 18%, #3E5A4A, #22342A 72%);
  border: 20px solid #8B5E3C;
  box-shadow: inset 0 0 0 4px #6B4428, inset 0 0 70px rgba(0, 0, 0, .5), var(--shadow-card);
  text-align: center;
}
/* 분필 글씨 (워드캣 9/28 요청) — 주아 + 가장자리 거친 필터. 단일 굵기라 합성 볼드를 끈다 */
.doc--menu .doc__inner { font-family: var(--font-chalk); font-weight: 400; filter: url(#chalk-rough); }
.doc--menu .doc__head, .doc--menu .doc__title, .doc--menu .doc__line { font-weight: 400; }
.doc--menu .doc__inner { display: flex; flex-direction: column; justify-content: center; }
.doc--menu .doc__badge {
  display: inline-block; margin-bottom: .45em; padding: .06em .9em; border: 3px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-size: .6em; font-weight: 800; letter-spacing: .34em; text-indent: .34em;
}
.doc--menu .doc__head { margin-bottom: .2em !important; }
/* 2단 배치 (사장 9/29): 왼쪽 인기 메뉴 | 오른쪽 함께 먹으면 — 각 5줄. 이용 안내는 전체 폭 */
.doc--menu .doc__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-items: start; }
.doc--menu .doc__para + .doc__para { margin-top: 0; }
.doc--menu .doc__line { font-size: 1.16em; }   /* 메뉴명 크게 */
.doc--menu .doc__para:nth-child(3) {
  /* 이용 안내 — 분필 점선 아래, '이용 안내 : 내용' 왼쪽 라벨 구조 (9/29) */
  grid-column: 1 / -1; margin-top: .9em; padding-top: .8em;
  border-top: 3px dashed rgba(245, 242, 232, .32);
  display: grid; grid-template-columns: auto 1fr; gap: 0 .9em; align-items: start; text-align: left;
}
.doc--menu .doc__para:nth-child(3) .doc__head { margin: 0 !important; font-size: .92em; }
.doc--menu .doc__para:nth-child(3) .doc__head::after { content: " :"; }
.doc--menu .doc__para:nth-child(3) .doc__line { font-size: .88em; color: var(--ink-2); }

/* =====================================================================
   2) 학교 안내문 — 가정통신문 (기획안 p16)
   ===================================================================== */
.doc--notice {
  --accent: var(--c-blue);
  background: #FFFDF7; border: 10px solid #E7E2D2;
  background-image: linear-gradient(90deg, transparent 86px, rgba(228, 60, 48, .18) 86px, rgba(228, 60, 48, .18) 88px, transparent 88px);
}
.doc--notice .doc__inner { padding: 0 56px 32px 116px; }
.doc--notice .doc__band {
  display: flex; align-items: center; gap: 16px; height: 82px; margin: 0 -56px 26px -116px; padding: 0 56px 0 116px;
  background: var(--c-sky); color: #fff; font-size: 32px; font-weight: 900; letter-spacing: .24em;
}
.doc--notice .doc__band i { flex: 1; height: 3px; background: rgba(255, 255, 255, .5); }

/* =====================================================================
   3) 친구와의 대화창 — 말풍선 (기획안 p17)
   ===================================================================== */
.doc--chat { background: #B7CADB; --accent: #2A4A6B; }
.doc--chat .doc__inner { padding: 0 40px 28px; }
.chatbar {
  display: flex; align-items: center; gap: 18px; height: 88px; margin: 0 -40px 22px; padding: 0 32px;
  background: rgba(255, 255, 255, .62); backdrop-filter: blur(2px);
}
.chatbar .doc__title { flex: 1; margin: 0 !important; font-size: calc(var(--doc-font) * .95); }
.chatbar__back, .chatbar__more { width: 44px; height: 44px; flex: none; color: #40556B; }
/* 9/29 재구성: 대화를 좌·우 2단으로 (모바일 채팅 비율), 참여자는 상단에 한 번 + 원형 아바타 */
.chat-who {
  display: flex; justify-content: center; gap: 2.2em; margin: -8px 0 18px;
  font-size: .62em; font-weight: 800; color: #3B5570;
}
.chat-who__p { display: inline-flex; align-items: center; gap: .55em; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2em; height: 2em; border-radius: 50%; font-style: normal; font-weight: 800;
  color: #fff; background: #7E93A8; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.avatar--c0 { background: #5B7FA6; }
.avatar--c1 { background: #E8A13C; }
.avatar--c2 { background: #6BA292; }
.avatar--c3 { background: #B07EA6; }
.doc--chat .doc__body { columns: 2; column-gap: 56px; column-rule: 2px solid rgba(42, 74, 107, .16); }
.doc--chat .doc__para + .doc__para { margin-top: .5em; }
.bubble { display: flex; align-items: flex-start; gap: .4em; margin: .22em 0; line-height: 1.4; break-inside: avoid; }
.bubble .avatar { font-size: .58em; margin-top: .3em; }
.bubble__text {
  max-width: 76%; margin: 0 !important; padding: .26em .62em; border-radius: .28em 1em 1em 1em;
  background: #fff; box-shadow: 0 2px 5px rgba(20, 40, 60, .12);
}
.bubble--right { flex-direction: row-reverse; }
.bubble--right .bubble__text { background: #FFE45C; border-radius: 1em .28em 1em 1em; }
.doc--chat .doc__line { text-align: center; font-size: .72em; color: #405A73; margin: .4em 0 !important; }

/* =====================================================================
   4) SNS 게시물 — 피드 카드 (기획안 p18)
   ===================================================================== */
.doc--sns {
  --accent: #C13584;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #FDE7EF, #E4EDF9) border-box;
  border: 16px solid transparent; /* 사진 줄(9/28)이 들어가며 세로 여백 압축 */
}
/* 9/29 재구성: 인스타그램 웹처럼 좌 사진 | 우 텍스트 2단 */
.doc--sns .doc__inner {
  display: grid; grid-template-columns: 34% 1fr; grid-template-rows: auto auto 1fr auto;
  gap: 0 30px; align-items: start;
}
.doc--sns .post__photos {
  /* 그리드 행 크기에 영향을 주지 않게 절대 배치로 왼쪽 칸을 덮는다 (사진 원본 높이가 행을 키우는 것 방지)
     56px·32px·112px 는 .doc__inner 기본 padding(32px 56px)과 짝 */
  position: absolute; top: 32px; bottom: 32px; left: 56px; width: calc((100% - 112px) * .34);
  display: flex; flex-direction: column; gap: 14px; margin: 0;
}
.post__photos img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 16px; display: block; }
.doc--sns .post__head { grid-column: 2; grid-row: 1; align-self: center; }
.doc--sns .doc__inner > .doc__title { grid-column: 2; grid-row: 2; }
.doc--sns .doc__body { grid-column: 2; grid-row: 3; }
.doc--sns .post__actions { grid-column: 2; grid-row: 4; align-self: end; }
.post__head { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.doc--sns .doc__para + .doc__para { margin-top: .45em; }
.post__avatar {
  width: 66px; height: 66px; border-radius: 50%; flex: none;
  background: conic-gradient(#FCC048, #F0606C, #C13584, #5490C0, #FCC048);
  box-shadow: inset 0 0 0 5px #fff;
}
.post__account { flex: 1; font-size: 30px; font-weight: 800; color: var(--c-ink); }
.post__more { width: 40px; height: 40px; color: var(--c-dim); }
.doc--sns .doc__title { margin-bottom: .35em !important; }
.post__actions { display: flex; align-items: center; gap: 26px; margin-top: 12px; padding-top: 10px; border-top: 2px solid #EFF1F4; }
.post__actions i { width: 44px; height: 44px; color: var(--c-ink-2); }
.post__save { margin-left: auto; }

/* =====================================================================
   5) 여행지 안내판 — 여행사 공지 리플렛 (기획안 p19)
   ===================================================================== */
.doc--signboard {
  --ink: #FFFFFF; --ink-2: #D8E5F7; --accent: #FFD166; --c-hl-ink: #0A2F66;
  background: linear-gradient(180deg, #11529F, #0A3A7C);
  border: 10px solid #08295A;
}
/* 9/29 재구성: 인사말(키커) 맨글자 → 노란 박스 = 제목 → 섹션별 카드 덩어리 */
.doc--signboard .doc__kicker {
  margin: -8px 0 12px; text-align: center;
  font-size: .74em; font-weight: 700; letter-spacing: .12em; color: rgba(255, 255, 255, .78);
}
.doc--signboard .doc__band {
  display: flex; align-items: center; justify-content: center; margin: 0 0 22px; padding: 14px 40px;
  background: var(--c-yellow); color: #0A2F66; border-radius: 16px; font-weight: 900;
}
.doc--signboard .doc__band .doc__title { margin: 0 !important; color: #0A2F66; }
.doc--signboard .doc__para.has-head {
  background: rgba(255, 255, 255, .08); border-radius: 18px; padding: 18px 28px; box-sizing: border-box;
}
.doc--signboard .doc__para + .doc__para { margin-top: .55em; }
.doc--signboard .doc__head {
  display: inline-block; padding: .04em .45em; border-radius: .3em; background: rgba(255, 255, 255, .16);
}

/* 안내문·안내판: 소제목을 왼쪽 칸으로 빼 세로 공간을 아낀다 (글자가 덜 작아진다) */
.doc--notice .doc__para.has-head,
.doc--signboard .doc__para.has-head { display: grid; grid-template-columns: 7.2em 1fr; gap: 0 1em; align-items: start; }
.doc--notice .doc__para.has-head .doc__head,
.doc--signboard .doc__para.has-head .doc__head { text-align: right; }
/* 안내판 소제목('출발 전 확인 사항')이 두 줄로 꺾이지 않게 칸을 넓힌다 (워드캣 9/28 요청) */
.doc--signboard .doc__para.has-head { grid-template-columns: 8.6em 1fr; }
.doc--signboard .doc__para.has-head .doc__head { white-space: nowrap; }

/* =====================================================================
   6) 온라인 쇼핑 후기 — 쇼핑몰 댓글 (기획안 p20)
   ===================================================================== */
.doc--review { --accent: var(--c-red); background: #fff; border: 10px solid #EDEFF2; }
.review__product { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 2px solid #EFF1F4; }
.review__thumb { width: 104px; height: 104px; padding: 22px; box-sizing: border-box; flex: none; border-radius: 22px; background: #F1F3F6; color: #98A1AC; }
/* 상품 사진 (워드캣 9/28 요청) — 썸네일을 실제 이미지로 (본문 첨부는 원고 분량상 세로 공간이 안 나온다) */
.review__thumb--img { padding: 0; overflow: hidden; width: 128px; height: 128px; }
.review__thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review__photos { display: flex; gap: 14px; margin-bottom: .35em; }
.review__photos img { height: 148px; border-radius: 14px; display: block; }
.review__meta { flex: 1; }
.review__label { display: inline-block; margin-bottom: 8px; padding: 4px 18px; border-radius: 999px; background: var(--c-red); color: #fff; font-size: 24px; font-weight: 800; }
.review__meta .doc__title { margin: 0 !important; }
.doc--review .doc__icon { display: none; }
.review__foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.review__help { width: 58px; height: 58px; padding: 13px; box-sizing: border-box; border: 2px solid #E4E7EB; border-radius: 50%; color: #98A1AC; }