/* ==========================================================================
   ask.css — 질문답변(글로 묻기) · 둘째 안 (W-184 · 2026-09-30) · 시안 8_시안/질문답변/새모양2.css 를 옮김
   - 홈페이지 틀(자식 테마 ss.css · 플러그인 qa.css · player.css) 위에 얹는 것만 · 이름은 ssq- 로 시작
   - 값은 디자인 규격의 토큰뿐(새 색 0) · 가장 작은 글자 16px · 누르는 자리 48px 이상 · 알림창 0
   - 저절로 움직이는 것 0 — 펼침 · 더 보기 · 자리 옮김은 모두 눌렀을 때만
   ========================================================================== */
.ssq-hello { margin: 0 0 14px; font-size: 1.1875rem; line-height: 1.6; color: var(--ink); }
.ssq-hello b { color: var(--navy); }

/* ---------- ① 글 쓰는 칸 — 맨 위에 열어 둠 ---------- */
.ssq-write { margin: 0 0 12px; padding: 18px 16px 16px; border: 2px solid var(--navy); border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(13,22,38,.08); }
.ssq-write h2 { margin: 0 0 16px; font-size: 1.375rem; line-height: 1.35; color: var(--navy); }   /* (W-250) 바로 아래가 글 칸 — 꼬리표 「지금 여기」(위로 15px) 자리 */
.ssq-write__sub { margin: 0 0 12px; font-size: 1.0625rem; color: var(--ink-soft); }
.ssq-write__sub b { color: var(--copper); }
.ssq-text { display: block; width: 100%; min-height: 356px; margin: 0; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink);
  font: 400 1.1875rem/1.7 var(--font); resize: vertical; }   /* (W-250 · 원장님 10/3) 세로 1.5배(168 → 252) → (W-253) 자리 표시 글이 글 칸 글자 크기(19px · 줄 32.3px)로 다 보이는 높이: 폰 판 열 줄 356 · 좁은 폰 판 열두 줄 420(아래 372px 갈림) · 560px 부터 PC 판 일곱 줄 260 — 모자라는 폭은 ask.js 가 그만큼만 더 키움 */
@media (max-width: 372.98px) { .ssq-text { min-height: 420px; } }
@media (min-width: 560px) { .ssq-text { min-height: 260px; } }
/* (W-250 → W-251 「입력창 내용은 연하게」 → W-253 · 원장님 10/3 「글자는 원래 크기로」) 자리 표시 글 — 색만 연하게(있던 토큰 --ink-soft 에 불투명도 .58 · 종이 바탕 위 약 #949a9f)
   · 글자 크기 · 줄 간격은 글 칸에 치는 글자 그대로(따로 줄이지 않음) · 줄바꿈은 ask.js 가 폭에 맞는 판(폰 판 · PC 판)을 넣음 */
.ssq-text::placeholder { color: var(--ink-soft); opacity: .58; }
.ssq-text:focus { border-color: var(--navy); background: #fff; outline: none; }
/* (W-251 → W-253 · 원장님 10/3 「좌우로 스크롤 하지 않아도 되도록 · 차라리 아래쪽으로 넘겨주는 것이 나아」) 머리말 단추 넷 — 이름을 줄여 한 줄 · 안 들어가는 폭은 아래 줄로 넘김(가로 굴림은 어느 폭에서도 쓰지 않음) · 글자 16px · 누르는 자리 48px 그대로 */
.ssq-hints { margin: 10px 0 0; }
.ssq-hints__l { margin: 0 0 6px; font-size: 1rem; color: var(--ink-soft); }
.ssq-hints__r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 2px 0; }
@media (max-width: 559.98px) { .ssq-hints__r { display: grid; grid-template-columns: 1fr 1fr; } }   /* 폰: 넷이 한 줄에 안 들어가(430 에서 404px / 자리 362px) 둘씩 두 줄로 가지런히 */
.ssq-hint { flex: none; min-height: 48px; padding: 0 11px; border: 1.5px dashed var(--copper); border-radius: 999px; background: #fff; color: var(--copper); font: 700 1rem/1.2 var(--font); white-space: nowrap; cursor: pointer; }

/* 사진 — 단추 하나 · 끌어다 놓기 · 붙여 넣기 */
.ssq-photo { margin: 14px 0 0; padding: 14px; border: 2px dashed var(--line); border-radius: 16px; background: var(--warm); }
.ssq-photo.is-over { border-color: var(--copper); background: #fdf3e6; }
.ssq-photo__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ssq-photo__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 22px; border: 2px solid var(--navy); border-radius: 14px; background: #fff; color: var(--navy);
  font: 800 1.125rem/1.2 var(--font); cursor: pointer; }
.ssq-photo__btn svg { width: 26px; height: 26px; flex: none; }
.ssq-photo__how { flex: 1 1 220px; margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-photo__how b { color: var(--navy); }
.ssq-photo__how .pc { display: none; }
.ssq-thumbs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; }
.ssq-thumbs:empty { display: none; }
.ssq-thumb { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1.5px solid var(--line); }
.ssq-thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ssq-thumb__s { display: block; padding: 2px 6px 4px; font-size: 1rem; line-height: 1.3; color: var(--ink-soft); text-align: center; }
.ssq-thumb__x { position: absolute; right: 0; top: 0; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; display: grid; place-items: start end; padding: 4px; }
.ssq-thumb__x span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(13,22,38,.78); color: #fff; font: 800 1rem/1 var(--font); }
.ssq-photo__msg { margin: 10px 0 0; font-size: 1rem; color: var(--navy); font-weight: 700; }
.ssq-photo__msg:empty { display: none; }
.ssq-photo__fine { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }

/* 답 보실 때 쓸 숫자 · 부를 이름 */
.ssq-row { display: grid; gap: 10px; margin: 14px 0 0; }
.ssq-f label { display: block; margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--navy); }
.ssq-f label small { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.ssq-f input { display: block; width: 100%; height: 52px; margin: 0; padding: 0 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: 700 1.125rem/1 var(--font); }
.ssq-f input:focus { border-color: var(--navy); background: #fff; outline: none; }
.ssq-f--pw input { letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.ssq-f__e { margin: 4px 0 0; font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-f__e:empty { display: none; }
.ssq-send { width: 100%; margin: 16px 0 0; min-height: 60px; font-size: 1.25rem; border: 0; }
.ssq-lock { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-lock svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--copper); }
.ssq-lock a { color: var(--navy); font-weight: 700; text-decoration-color: var(--copper); text-underline-offset: 4px; }

/* 보낸 뒤 — 그 자리에서 바뀜(알림창 없음) */
.ssq-done { padding: 6px 0 0; }
.ssq-done__h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.375rem; font-weight: 800; color: var(--navy); }
.ssq-done__h svg { width: 34px; height: 34px; flex: none; color: var(--copper); }
.ssq-done p { margin: 0 0 10px; }
.ssq-steps { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; counter-reset: s; }
.ssq-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: var(--warm); font-size: 1.0625rem; line-height: 1.5; }
.ssq-steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 1rem; }
.ssq-steps b { color: var(--navy); }

/* 쓰시는 동안 — 비슷한 물음(글쓰기를 막지 않고 보내기 단추 아래에만 나타남) */
.ssq-similar { margin: 14px 0 0; padding: 12px 14px 6px; border-radius: 16px; background: #fdf3e6; border: 1.5px solid var(--gold); }
.ssq-similar__h { margin: 0 0 2px; font-size: 1.0625rem; font-weight: 800; color: var(--copper); }
.ssq-similar__s { margin: 0 0 8px; font-size: 1rem; color: var(--ink-soft); }

/* 글 말고 다른 길(휴대폰 · 좁은 창 — PC 는 오른쪽 연락 칸이 대신) */
.ssq-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.ssq-ways__l { grid-column: 1 / -1; margin: 0; font-size: 1rem; color: var(--ink-soft); }

/* ---------- ② 내가 쓴 질문 · 답 보기 ---------- */
.ssq-mine, .ssq-fcard { margin: 12px 0 0; border: 2px solid var(--line); border-radius: 16px; background: #fff; }
.ssq-mine > summary, .ssq-fcard > summary { list-style: none; cursor: pointer; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: 14px; font-size: 1.125rem; font-weight: 800; color: var(--navy); }
.ssq-mine > summary::-webkit-details-marker, .ssq-fcard > summary::-webkit-details-marker { display: none; }
.ssq-mine > summary::after, .ssq-fcard > summary::after { content: "펼치기 ▾"; flex: none; font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-mine[open] > summary::after, .ssq-fcard[open] > summary::after { content: "접기 ▴"; }
.ssq-mine[open] > summary, .ssq-fcard[open] > summary { border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.ssq-mine__in, .ssq-fcard > .ssq-mine__in { padding: 12px 16px 16px; }
.ssq-mine__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.ssq-mine__form .dx-b { min-height: 52px; padding: 0 18px; }
.ssq-thread { margin: 14px 0 0; display: grid; gap: 10px; }
.ssq-thread__state { justify-self: start; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 1rem; font-weight: 800; }
.ssq-bub { max-width: 92%; padding: 12px 14px; border-radius: 16px; font-size: 1.0625rem; line-height: 1.7; }
.ssq-bub p { margin: 0 0 8px; }
.ssq-bub p:last-child { margin: 0; }
.ssq-bub__w { display: block; margin: 0 0 2px; font-size: 1rem; font-weight: 800; }
.ssq-bub--me { justify-self: end; background: var(--warm); border-bottom-right-radius: 4px; }
.ssq-bub--me .ssq-bub__w { color: var(--ink-soft); }
.ssq-bub--dr { justify-self: start; background: #fff; border: 2px solid var(--navy); border-bottom-left-radius: 4px; }
.ssq-bub--dr .ssq-bub__w { color: var(--copper); }
.ssq-bub__pics { display: flex; gap: 6px; margin: 8px 0 0; }
.ssq-bub__pics span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: #fff; border: 1.5px solid var(--line); font-size: 1rem; color: var(--ink-soft); }

/* ---------- ③ 원장님이 답한 질문 ---------- */
.ssq-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 36px 0 4px; font-size: 1.4375rem; line-height: 1.35; color: var(--navy); }
.ssq-h2 small { font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-h2s { margin: 0 0 12px; font-size: 1.0625rem; color: var(--ink-soft); }
.ssq-find { display: flex; gap: 8px; }
.ssq-find input { flex: 1 1 auto; min-width: 0; height: 52px; margin: 0; padding: 0 14px; border: 2px solid #857c6d; border-radius: 12px; background: #fff; color: var(--ink); font: 400 1.125rem/1 var(--font); }
.ssq-find input:focus { border-color: var(--navy); outline: none; }
.ssq-find button { flex: none; min-width: 72px; height: 52px; padding: 0 16px; border: 2px solid var(--navy); border-radius: 12px; background: var(--navy); color: #fff; font: 800 1.0625rem/1 var(--font); cursor: pointer; }
.ssq-doors { display: flex; gap: 8px; margin: 12px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.ssq-doors::-webkit-scrollbar { display: none; }
.ssq-door { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy); font: 800 1.0625rem/1.2 var(--font); cursor: pointer; white-space: nowrap; }
.ssq-door i { font-style: normal; font-weight: 700; font-size: 1rem; color: var(--copper); font-variant-numeric: tabular-nums; }
.ssq-door[aria-pressed="true"] { background: var(--navy); color: #fff; }
.ssq-door[aria-pressed="true"] i { color: var(--gold); }
.ssq-subs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.ssq-subs:empty { display: none; }
.ssq-sub { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--warm); color: var(--ink); font: 700 1rem/1.2 var(--font); cursor: pointer; }
.ssq-sub[aria-pressed="true"] { border-color: var(--copper); background: var(--gold); color: var(--navy); font-weight: 800; }
.ssq-count { margin: 12px 0 0; font-size: 1rem; color: var(--ink-soft); }
.ssq-count b { color: var(--navy); }
.ssq-list .ssqa-fold > summary { align-items: flex-start; padding: 12px 16px; }
.ssq-list .ssqa-fold > summary::after { margin-top: 26px; }
.ssq-tag { display: block; margin: 0 0 2px; font-size: 1rem; font-weight: 800; line-height: 1.4; color: var(--copper); }
.ssq-tag em { font-style: normal; font-weight: 700; color: var(--ink-soft); }
.ssq-q { display: block; }
.ssq-list .ssqa-fold__a, .ssq-faql .ssqa-fold__a { position: relative; margin: 14px 16px 0; padding: 0 0 0 14px; border-left: 4px solid var(--gold); }
.ssq-who { margin: 0 0 6px; font-size: 1rem; font-weight: 800; color: var(--navy); }
.ssq-gos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 16px 14px; }
.ssq-gos .dx-b { min-height: 48px; padding: 6px 14px; font-size: 1rem; }
.ssq-more { width: 100%; margin: 4px 0 0; }
.ssq-none { margin: 12px 0; padding: 16px; border-radius: 16px; background: var(--warm); font-size: 1.0625rem; }
.ssq-none .dx-b { margin-top: 10px; }
.ssq-end { margin: 28px 0 0; padding: 18px 16px; border-radius: 20px; background: var(--navy); color: #fff; text-align: center; }
.ssq-end p { margin: 0 0 10px; font-size: 1.1875rem; font-weight: 800; }
.ssq-end .dx-b { border-color: #fff; }

/* 왼쪽 칸(PC) */
.ssq-toc__n { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.ssq-toc__n button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #fff; font: 700 1.0625rem/1.25 var(--font); text-align: left; cursor: pointer; }
.ssq-toc__n button i { font-style: normal; font-size: 1rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.ssq-toc__n button[aria-pressed="true"] { background: var(--gold); color: var(--navy); font-weight: 800; }
.ssq-toc__n button[aria-pressed="true"] i { color: var(--navy); }
.ssq-toc .dx-acts { margin: 0 0 8px; }
.ssq-toc .dx-acts + .dx-acts { margin-bottom: 18px; }
body.ss-tpl-article .ss-art-toc .dx-acts .ssq-toc__mine { background: none; color: #fff; border-color: rgba(255,255,255,.5); }

@media (min-width: 560px) {
  .ssq-row { grid-template-columns: 1fr 1fr; }
  .ssq-write { padding: 22px 22px 20px; }
}
@media (max-width: 479.98px) {
  .ssq-mine__form { grid-template-columns: 1fr 1fr; }
  .ssq-mine__form .dx-b { grid-column: 1 / -1; }
  .ssq-photo__btn { flex: 1 1 100%; }
}
@media (min-width: 1024px) and (min-height: 600px) {
  .ssq-ways { display: none; }
  .ssq-doors { flex-wrap: wrap; overflow: visible; margin: 12px 0 0; padding: 0; }
  .ssq-photo__how .pc { display: inline; }
  .ssq-photo__how .m { display: none; }
  .ssq-text { min-height: 285px; }   /* (W-250) 1.5배(190 → 285) */
}
@media (hover: hover) and (pointer: fine) {
  .ssq-hint, .ssq-photo__btn, .ssq-door, .ssq-sub, .ssq-find button, .ssq-toc__n button, .ssq-mine > summary, .ssq-fcard > summary, .ssq-send, .ssq-thumb__x span { transition: background-color .15s, border-color .15s, color .15s; }
  .ssq-hint:hover { background: #fdf3e6; border-style: solid; }
  .ssq-photo__btn:hover { background: var(--gold); border-color: var(--gold); }
  .ssq-door:hover, .ssq-sub:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .ssq-door:hover i { color: var(--navy); }
  .ssq-door[aria-pressed="true"]:hover { background: #22406f; border-color: #22406f; color: #fff; }
  .ssq-door[aria-pressed="true"]:hover i { color: var(--gold); }
  .ssq-find button:hover, .ssq-send:hover { background: #22406f; }
  .ssq-toc__n button:hover { background: rgba(246,200,147,.28); }
  .ssq-toc__n button[aria-pressed="true"]:hover { background: var(--gold); box-shadow: inset 0 0 0 2px rgba(22,41,74,.25); }
  .ssq-mine > summary:hover, .ssq-fcard > summary:hover { background: var(--warm); }
  .ssq-thumb__x:hover span { background: var(--copper); }
  .ssq-gos .dx-b:hover, .ssq-ways .dx-b:hover, .ssq-none .dx-b:hover, .ssq-more:hover, .ssq-mine__form .dx-b:hover, .ssq-end .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  body.ss-tpl-article .ss-art-toc .dx-acts .ssq-toc__mine:hover { background: rgba(246,200,147,.28); color: #fff; }
  .ssq-lock a:hover { color: var(--copper); }
}
/* 머리줄에 가리지 않게 · 왼쪽 칸 안내 링크 누르는 자리 48px */
#글쓰기, #내질문, #답한질문, #자주묻는질문 { scroll-margin-top: calc(var(--top-h) + env(safe-area-inset-top) + 16px); }
.ssq-toc .ss-art-others a { display: flex; align-items: center; min-height: 48px; }

/* 보낸 뒤 — 내 질문 번호 남겨 두기 · 번호를 잊었을 때 */
.ssq-ticket { margin: 4px 0 12px; padding: 16px 18px; border: 2px solid var(--navy); border-radius: 18px; background: #fff; }
.ssq-ticket p { margin: 0 0 8px; }
.ssq-ticket__l { font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-ticket__n b { font-size: 2.25rem; line-height: 1.1; font-weight: 800; color: var(--navy); letter-spacing: .04em; }
.ssq-ticket__n small { margin-left: 8px; font-size: 1rem; color: var(--ink-soft); }
.ssq-ticket__s { font-size: 1.0625rem; line-height: 1.5; }
.ssq-ticket__s b { color: var(--navy); }
.ssq-ticket__b { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ssq-ticket__b .dx-b { min-height: 52px; flex: 1 1 240px; }
.ssq-ticket__m { min-height: 1.5em; font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-kept { margin: 0 0 12px; }
.ssq-kept__l { margin: 0 0 6px; font-size: 1rem; color: var(--ink-soft); }
.ssq-kept__b { display: flex; flex-wrap: wrap; gap: 8px; }
.ssq-lost { margin: 12px 0 0; }
.ssq-lost summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-size: 1.0625rem; font-weight: 700; color: var(--copper); }
.ssq-lost ul { margin: 0 0 10px; padding: 0 0 0 20px; display: grid; gap: 6px; font-size: 1.0625rem; line-height: 1.55; }
.ssq-lost a { display: inline-block; min-height: 48px; line-height: 48px; font-weight: 700; color: var(--navy); }
@media (hover: hover) {
  .ssq-ticket__b .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .ssq-lost summary:hover { color: var(--navy); }
}

/* 자물쇠 목록 — 쓴 날 · 시각으로 내 글 찾기 */
.ssq-locks__h { margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.55; }
.ssq-locks__h b { color: var(--navy); }
.ssq-locks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.ssq-lk { border: 1px solid var(--line, #e2dccf); border-radius: 14px; background: #fff; }
.ssq-lk--me { border: 2px solid var(--copper); }
.ssq-lk__b { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 8px 14px; border: 0; border-radius: 14px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.ssq-lk__b svg { width: 22px; height: 22px; color: var(--copper); }
.ssq-lk__w { display: grid; gap: 2px; font-size: 1rem; color: var(--ink-soft); }
.ssq-lk__w b { font-size: 1.0625rem; color: var(--navy); }
.ssq-lk__w em { font-style: normal; font-weight: 700; color: var(--copper); }
.ssq-lk__s { padding: 4px 10px; border-radius: 999px; background: var(--warm); font-size: 1rem; color: var(--ink-soft); white-space: nowrap; }
.ssq-lk__s.is-a { background: var(--navy); color: #fff; font-weight: 700; }
.ssq-lk__pin { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding: 4px 14px 14px 50px; }
.ssq-lk__pin label { display: grid; gap: 4px; font-size: 1rem; font-weight: 700; color: var(--navy); }
.ssq-lk__pin input { width: 8.5em; min-height: 52px; padding: 0 14px; border: 2px solid var(--navy); border-radius: 12px; font: inherit; font-size: 1.25rem; letter-spacing: .2em; background: #fff; }
.ssq-lk__pin .dx-b { min-height: 52px; padding: 0 22px; }
.ssq-lk__pin p { flex: 1 1 100%; margin: 0; min-height: 1.4em; font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-byno { margin: 14px 0 0; }
.ssq-byno > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-size: 1.0625rem; font-weight: 700; color: var(--copper); }
.ssq-byno .ssq-mine__form { margin-top: 6px; }
@media (max-width: 520px) { .ssq-lk__pin { padding-left: 14px; } }
@media (hover: hover) {
  .ssq-lk__b:hover { background: var(--gold); }
  .ssq-byno > summary:hover { color: var(--navy); }
}

/* hidden 이 display 에 덮이지 않게 */
.ssq-thread[hidden], .ssq-more[hidden], .ssq-kept[hidden] { display: none; }

/* 제목이 보이는 자물쇠 목록 · 글 쓰는 자리의 미리 보기 */
.ssq-f--title { margin: 14px 0 0; }
.ssq-pre { margin: 12px 0 0; }
.ssq-pre__l { margin: 0 0 6px; font-size: 1rem; color: var(--ink-soft); }
.ssq-lk--pre { border-style: dashed; background: var(--paper); }
.ssq-lk--pre .ssq-lk__b { cursor: default; }
.ssq-lk__w b { overflow-wrap: anywhere; }
.ssq-lk__none { padding: 14px; font-size: 1.0625rem; color: var(--ink-soft); }
.ssq-lkfind { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 12px 0 8px; }
.ssq-lkfind input { min-height: 52px; padding: 0 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1.0625rem; }
.ssq-lkfind input:focus { border-color: var(--navy); background: #fff; outline: none; }
.ssq-lkfind .dx-b { min-height: 52px; padding: 0 20px; }
/* (감독 10/3) 폰: 찾기 칸 · 단추가 아래 고정 단추 줄(전화하기 · 글로 묻기) 밑에 깔린 채 멈추지 않게 — 칸에 들어가면 그 줄 높이만큼 위로 굴려 보임 */
.ssq-lkfind input, .ssq-lkfind .dx-b, .ssq-find input, .ssq-find button { scroll-margin-bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (hover: hover) { .ssq-lk--pre .ssq-lk__b:hover { background: none; } .ssq-lkfind .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } }

/* 추천 제목 · 이름 · 로그인 안내 */
.ssq-f__tip { margin: 4px 0 0; min-height: 1.4em; font-size: 1rem; color: var(--copper); }
.ssq-namebox { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ssq-namebox .dx-b { min-height: 52px; padding: 0 14px; white-space: nowrap; }
.ssq-login { margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: var(--warm); }
.ssq-login p { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.55; }
.ssq-login b { color: var(--navy); }
.ssq-login .dx-b { min-height: 52px; padding: 0 18px; }
.ssq-login .ssq-login__m { margin: 6px 0 0; }
/* (W-225) 로그인 자리 — 홈페이지의 로그인 하나(망보드): 단추 둘 + 작은 글 링크 · 로그인한 분에게는 이름 · 내 글 · 로그아웃 */
.ssq-login__go, .ssq-login__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ssq-login a.dx-b { text-decoration: none; }
.ssq-login__id { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; font-size: 1rem; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.ssq-login .ssq-login__mh { margin: 12px 0 0; font-size: 1rem; color: var(--ink-soft); }
.ssq-login .ssq-lk__st:empty { display: none; }
@media (hover: hover) { .ssq-login__id:hover { color: var(--copper); } }
@media (hover: hover) { .ssq-namebox .dx-b:hover, .ssq-login .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } }
.ssq-cardpv { margin: 12px 0 4px; }
.ssq-cardpv img { display: block; width: min(100%, 300px); height: auto; border-radius: 12px; border: 1px solid #e3dccd; box-shadow: 0 6px 18px rgba(22, 41, 74, .12); background: #faf8f2; }
.ssq-cardpv figcaption { margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
/* 제목 칸은 두 줄까지 — 권해 드린 제목의 갈래말이 폰에서도 잘리지 않게 (2026-09-30) */
.ssq-f textarea#ssq-title { display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: 700 1.125rem/1.45 var(--font); resize: none; overflow: hidden; }
.ssq-f textarea#ssq-title:focus { border-color: var(--navy); background: #fff; outline: none; }

/* ---------- W-184: 실제 페이지에서 더한 것 ---------- */
/* 덫 칸(광고 글 막기) — 사람 눈 · 화면 읽기 기계 · 탭 차례에 나타나지 않음 */
.ssq-hp, .ssq-hp[hidden] { display: none; }
.ssq-lock a { display: inline-block; min-height: 48px; line-height: 48px; }
.ssq-nojs { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--warm); font-size: 1.0625rem; line-height: 1.6; }
.ssq-nojs a { color: var(--navy); font-weight: 800; }
html.no-js #ssq-form, html.no-js .ssq-mine, html.no-js .ssq-find, html.no-js .ssq-count { display: none; }
.ssq-send[disabled] { opacity: .7; cursor: progress; }
#ssq-forme { margin: 12px 0 0; }
/* 못 여는 꼴(heic 등)의 작은 그림 자리 */
.ssq-thumb__n { display: grid; place-content: center; gap: 2px; width: 100%; aspect-ratio: 1 / 1; background: var(--warm); color: var(--navy); font-size: 1rem; font-weight: 800; text-align: center; }
.ssq-thumb__n small { font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
/* 사진 올리는 중 */
.ssq-up { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--warm); }
.ssq-up[hidden], .ssq [hidden] { display: none !important; }
.ssq-ticket .ssq-up__m { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 700; color: var(--navy); }
.ssq-up__bar { height: 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.ssq-up__bar i { display: block; width: 0; height: 100%; background: var(--copper); }
.ssq-up .dx-b { margin: 10px 0 0; min-height: 52px; }
/* 열린 글(목록 줄 아래) */
.ssq-lk__open { margin: 0; padding: 4px 14px 16px; }
.ssq-thread__state.is-wait { background: var(--warm); color: var(--navy); border: 1.5px solid var(--line); }
.ssq-thread__wait { margin: 0; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--line); font-size: 1.0625rem; color: var(--ink-soft); }
/* (W-239) 병원 확인을 기다리는 글을 본인이 열었을 때 맨 위 한 줄 — 새 색 · 새 글자 크기 없이 위 줄과 같은 토큰 */
.ssq-thread__held { margin: 0; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--warm); font-size: 1.0625rem; font-weight: 700; color: var(--navy); }
.ssq-bub { overflow-wrap: anywhere; }
.ssq-bub .ssq-bub__t { margin: 0 0 6px; font-weight: 800; color: var(--navy); }
.ssq-bub__pics { flex-wrap: wrap; gap: 8px; }
.ssq-bub__pic { display: block; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--line); background: #fff; color: var(--navy); text-decoration: none; }
.ssq-bub__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ssq-bub__pics .ssq-bub__pic span { display: grid; place-content: center; width: 100%; height: 100%; border: 0; border-radius: 0; font-size: 1rem; font-weight: 800; text-align: center; color: var(--navy); }
.ssq-bub__pic small { display: block; font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.ssq-thread .dx-note2 { margin: 8px 0 0; }
.ssq-locks--mine { margin: 12px 0 0; }
.ssq-login__m .dx-b { margin: 4px 6px 0 0; }
.ssq-faqgo { margin: 12px 0 0; }
.ssq-faqgo .dx-b { width: 100%; }
#ssq-mine-msg { margin: 8px 0 0; }
#ssq-locks-msg:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ssq-bub__pic, .ssq-up .dx-b, .ssq-faqgo .dx-b, .ssq-thread .dx-b, .ssq-done > .dx-b, .ssq-toc .dx-acts .dx-b, .ssq-nojs a { transition: background-color .15s, border-color .15s, color .15s; }
  .ssq-bub__pic:hover { border-color: var(--copper); }
  .ssq-up .dx-b:hover, .ssq-faqgo .dx-b:hover, .ssq-thread .dx-b:hover, .ssq-done > .dx-b:hover, .ssq-login__m .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .ssq-nojs a:hover { color: var(--copper); }
  .ssq .ssq-send:hover { background: #22406f; border-color: #22406f; color: #fff; }   /* 틀의 .dx-b:hover 가 글자를 남색으로 바꿔 남색 바탕에서 안 보이던 것 */
  .ssq .ss-crumb a { transition: color .15s; }
  .ssq .ss-crumb a:hover { color: var(--copper); }
}

/* ---------- W-186: 이 글 지우기 — 글 아래 끝 · 눈에 덜 띄게 · 되묻기는 화면 안 상자 ---------- */
.ssq-del { margin: 6px 0 0; display: grid; justify-items: end; }
.ssq-del__b { min-height: 48px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px; background: none; color: var(--ink-soft); font: 600 1rem/1.2 var(--font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ssq-del__box { justify-self: stretch; margin: 0; padding: 16px; border: 2px solid var(--copper); border-radius: 16px; background: #fff; }
.ssq-del__h { margin: 0 0 4px; font-size: 1.1875rem; font-weight: 800; color: var(--navy); }
.ssq-del__t { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.ssq-del__l { display: grid; gap: 6px; margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--navy); }
.ssq-del__l input { width: 8.5em; min-height: 52px; margin: 0; padding: 0 14px; border: 2px solid var(--navy); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 1.25rem; letter-spacing: .2em; }
.ssq-del__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ssq-del__acts .dx-b { min-height: 52px; margin: 0; }
.ssq-del__go[disabled] { opacity: .7; cursor: progress; }
.ssq-del__m { margin: 10px 0 0; min-height: 1.4em; font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-del__done { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--warm); border: 1.5px solid var(--line); font-size: 1.0625rem; font-weight: 700; color: var(--navy); }
.ssq-del__done:focus { outline: 2px solid var(--copper); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ssq-del__b { transition: background-color .15s, border-color .15s, color .15s; }
  .ssq-del__b:hover { background: var(--warm); border-color: var(--line); color: var(--copper); }
  .ssq .ssq-del__acts .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
}
/* ---------- W-188: 공개 동의 — 글 쓰는 칸의 선택 칸 · 연 글의 켬/끔 · 지우기 되묻기의 「공개된 답 남김」 ---------- */
.ssq-agree { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; min-height: 48px; margin: 14px 0 0; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; }
/* 체크 칸 자체도 48px(누르는 자리 규칙) — 바깥 그림 없이 안에 그림(data:) */
.ssq-agree input, .ssq-del__keep input { appearance: none; -webkit-appearance: none; width: 48px; height: 48px; margin: 0; padding: 0; border: 2px solid var(--navy); border-radius: 12px; background: #fff; cursor: pointer; flex: none; }
.ssq-agree input:checked, .ssq-del__keep input:checked { background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 28px 28px no-repeat; }
.ssq-agree input:focus-visible, .ssq-del__keep input:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.ssq-agree__t { display: grid; gap: 4px; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.ssq-agree__t b { font-size: 1.0625rem; color: var(--navy); }
.ssq-agree__t small { font-size: 1rem; color: var(--ink-soft); }
.ssq-agree:has(input:checked) { border-color: var(--navy); background: #fff; }
.ssq-agree2 { margin: 10px 0 0; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--warm); }
.ssq-agree2__s { margin: 0 0 8px; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.ssq-agree2__s b { color: var(--navy); }
.ssq-agree2__s a { display: inline-block; min-height: 48px; line-height: 48px; margin: -12px 0; color: var(--navy); font-weight: 700; text-decoration-color: var(--copper); text-underline-offset: 4px; }
.ssq-agree2__b { min-height: 48px; padding: 0 16px; }
.ssq-agree2__b[disabled] { opacity: .7; cursor: progress; }
.ssq-agree2__m { margin: 8px 0 0; min-height: 0; font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-agree2__m:empty { display: none; }
.ssq-del__keep { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: start; min-height: 48px; margin: 0 0 12px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--warm); cursor: pointer; }
.ssq-del__keep span { display: grid; gap: 2px; font-size: 1rem; line-height: 1.5; }
.ssq-del__keep b { color: var(--navy); }
.ssq-del__keep small { font-size: 1rem; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .ssq-agree, .ssq-del__keep, .ssq-agree2__b { transition: background-color .15s, border-color .15s, color .15s; }
  .ssq-agree:hover, .ssq-del__keep:hover { border-color: var(--copper); background: #fdf3e6; }
  .ssq .ssq-agree2__b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .ssq-agree2__s a:hover { color: var(--copper); }
}
/* ---------- W-196: 「사진도 함께 공개」 — 첫 칸 밑에 들여서 · 첫 칸이 꺼져 있으면 흐리게(누를 수 없음) · 연 글의 사진 켬/끔 ---------- */
.ssq-agree--photo { margin: 8px 0 0 20px; }
.ssq-agree__n { display: none; }
.ssq-agree--photo.is-off { cursor: not-allowed; background: var(--warm); }
.ssq-agree--photo.is-off input { cursor: not-allowed; border-color: var(--line); background: #f3f1ec; }
.ssq-agree--photo.is-off .ssq-agree__t b, .ssq-agree--photo.is-off .ssq-agree__t small { color: var(--ink-soft); }
.ssq-agree--photo.is-off .ssq-agree__n { display: block; font-weight: 700; color: var(--copper); }
.ssq-photo2 { margin: 12px 0 0; padding: 12px 0 0; border-top: 1.5px dashed var(--line); }
@media (hover: hover) and (pointer: fine) {
  .ssq-agree--photo.is-off:hover { border-color: var(--line); background: var(--warm); }
}
/* ==========================================================================
   W-230 (2026-10-02) — 빠진 칸 표시 · 「지금 적을 곳」 차례 표시 · 공개 선택 · 미리 보기 머리 줄 · 되살림 상자 · 확인 창 · 영상
   - 색은 있던 것만(--copper · --gold · --navy · #fdf3e6) · 글자 16px 이상 · 누르는 자리 48px 이상
   - 빠진 칸 = 구릿빛 굵은 테두리 + 옅은 살구 바탕 + 칸 아래 「!」 글 / 지금 적을 곳 = 금빛 테두리 + 옅은 빛 + 꼬리표 「지금 여기」 (색만으로 나누지 않음)
   - 화면을 굴리거나 초점을 옮기지 않음(테두리만 바뀜) · 움직임 줄이기에서는 빛 번짐 · 깜박임 없이 테두리만
   ========================================================================== */
.ssq-st { position: relative; }
/* 꼬리표 「지금 여기」 — 스크립트가 지금 차례의 묶음 안으로 옮겨 놓음(한 번에 하나) */
.ssq-now { position: absolute; z-index: 1; right: 12px; top: -15px; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1.5px solid var(--copper); border-radius: 999px; background: var(--gold); color: var(--navy); font: 800 1rem/1.2 var(--font); white-space: nowrap; pointer-events: none; }
.ssq-f.ssq-st > .ssq-now { right: 0; top: -5px; }
.ssq-f.ssq-st > label { min-height: 26px; padding-right: 6em; }   /* 꼬리표 자리를 늘 비워 둠(차례가 바뀌어도 줄이 밀리지 않게) */
.ssq-st--send > .ssq-now { top: auto; bottom: 45px; }
/* 지금 적을 곳 */
.ssq-st.is-now .ssq-text, .ssq-f.ssq-st.is-now input, .ssq-f.ssq-st.is-now textarea#ssq-title, .ssq-open.is-now .ssq-agree, .ssq-login.ssq-st.is-now, .ssq-st--send.is-now .ssq-send {
  border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 0 3.5px var(--copper), 0 0 16px 4px rgba(246,200,147,.7); }
.ssq-st--send.is-now .ssq-send { border: 0; }
.ssq-login.ssq-st { border: 2px solid transparent; }
.ssq-open.is-now .ssq-agree:not(.is-off) input { border-color: var(--copper); border-width: 3px; }
.ssq-open.is-now .ssq-agree--photo.is-off { box-shadow: none; border-color: var(--line); animation: none; }   /* 아직 고를 수 없는 둘째 칸은 켜지 않음 */
/* 빠진 칸 · 고칠 칸(보내기를 눌렀을 때) — 지금 적을 곳보다 앞섬 */
.ssq-st.is-miss .ssq-text, .ssq-f.ssq-st.is-miss input, .ssq-f.ssq-st.is-miss textarea#ssq-title {
  border-color: var(--copper); border-style: solid; background: #fdf3e6; box-shadow: 0 0 0 2px var(--copper); }
.ssq-st.is-miss .ssq-f__e { display: flex; align-items: flex-start; gap: 6px; font-weight: 800; }
.ssq-st.is-miss .ssq-f__e::before { content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--copper); color: #fff; font: 800 1rem/1 var(--font); }
.ssq-st.is-miss .ssq-f__e:empty { display: none; }
.ssq-st.is-miss .ssq-f__tip { display: none; }
.ssq-st--send #ssq-forme { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: #fdf3e6; border: 1.5px solid var(--copper); color: var(--navy); }
.ssq-f--name .ssq-f__tip, .ssq-f--title .ssq-f__tip { min-height: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ssq-st.is-now .ssq-text, .ssq-f.ssq-st.is-now input, .ssq-f.ssq-st.is-now textarea#ssq-title, .ssq-open.is-now .ssq-agree, .ssq-login.ssq-st.is-now, .ssq-st--send.is-now .ssq-send { animation: ssq-nowp 1.1s ease-out 2; }
  @keyframes ssq-nowp { 0% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 3.5px var(--copper), 0 0 0 0 rgba(246,200,147,.9); } 60% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 3.5px var(--copper), 0 0 22px 9px rgba(246,200,147,.75); } 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 3.5px var(--copper), 0 0 16px 4px rgba(246,200,147,.7); } }
}
@media (prefers-reduced-motion: reduce) {
  .ssq-st.is-now .ssq-text, .ssq-f.ssq-st.is-now input, .ssq-f.ssq-st.is-now textarea#ssq-title, .ssq-open.is-now .ssq-agree, .ssq-login.ssq-st.is-now, .ssq-st--send.is-now .ssq-send { box-shadow: 0 0 0 2px var(--gold), 0 0 0 3.5px var(--copper); animation: none; }
}
/* (감독 덧붙임 다섯째) 만들어 드린 글 비밀번호 — 곁의 【다른 번호】 · 칸 아래 늘 보이는 안내 */
.ssq-pw-tip { color: var(--ink-soft); line-height: 1.5; }
.ssq-pw-tip b { color: var(--navy); }
.ssq-f--pw .ssq-pwbox input { letter-spacing: .28em; }
/* 공개 선택 — 체크 칸 + 굵은 글은 한 줄에, 작은 글 · 상태 글은 상자 폭 그대로 아래에 */
.ssq-open { margin: 14px 0 0; }
.ssq-open .ssq-agree { margin: 0; gap: 8px 12px; align-items: center; }
.ssq-open .ssq-agree--photo { margin: 8px 0 0 20px; }
.ssq-open .ssq-agree__t { display: contents; }
.ssq-open .ssq-agree__t b { line-height: 1.45; }
.ssq-agree__if { color: var(--copper); }
.ssq-agree__t b em { font-style: normal; text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ssq-open .ssq-agree__t small, .ssq-open .ssq-agree__st { grid-column: 1 / -1; }
.ssq-agree__st { justify-self: start; display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; border-radius: 999px; background: var(--warm); border: 1.5px solid var(--line); color: var(--ink-soft); font-size: 1rem; font-weight: 700; line-height: 1.4; }
.ssq-agree__st.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ssq-open .ssq-agree--photo.is-off .ssq-agree__n { display: block; }
.ssq-agree--photo.is-off .ssq-agree__st { display: none; }
.ssq-agree--photo.is-off .ssq-agree__if { color: var(--ink-soft); }
@media (max-width: 479.98px) { .ssq-open .ssq-agree--photo { margin-left: 10px; } }
/* 미리 보기 머리 줄 — 자물쇠(닫힘 · 열림) + 글이 체크에 따라 바뀜 · 줄 안의 붙인 파일 아이콘 */
.ssq-pre__l { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; line-height: 1.55; }
.ssq-pre__i svg { display: block; width: 22px; height: 22px; margin-top: 1px; color: var(--copper); }
.ssq-pre__l b { color: var(--navy); }
.ssq-pre.is-open .ssq-pre__i svg { color: var(--navy); }
.ssq-lk__m { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; vertical-align: -3px; color: var(--ink-soft); }
.ssq-lk__b .ssq-lk__m svg { width: 18px; height: 18px; color: var(--ink-soft); }
.ssq-lk__m i { margin-right: 4px; font-style: normal; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 넣은 영상의 작은 그림 — ▶ · 길이 */
.ssq-thumb__v { position: absolute; left: 4px; bottom: 34px; padding: 1px 8px; border-radius: 999px; background: rgba(13,22,38,.78); color: #fff; font: 800 1rem/1.5 var(--font); font-variant-numeric: tabular-nums; pointer-events: none; }
/* 연 글의 영상 */
.ssq-bub__vid { display: grid; gap: 2px; width: min(100%, 320px); }
.ssq-bub__vid video { display: block; width: 100%; max-height: 320px; border-radius: 10px; background: var(--film); }
.ssq-bub__dl { display: inline-flex; align-items: center; min-height: 48px; font-size: 1rem; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; }
/* 로그인 곁말 · 되살림 상자 */
.ssq-login__keep { display: block; margin-top: 4px; font-weight: 700; color: var(--copper); }
.ssq-back { margin: 10px 0 0; padding: 10px 14px; border: 2px solid var(--copper); border-radius: 14px; background: #fdf3e6; font-size: 1rem; line-height: 1.5; color: var(--ink); }   /* (W-250) 글 칸 아래 한 줄 */
.ssq-back b { color: var(--navy); }
.ssq-back:focus { outline: 2px solid var(--copper); outline-offset: 2px; }
/* (감독 덧붙임) 보낸 뒤 카드의 글 비밀번호 · 영상을 카카오톡으로 보내는 상자(영상이 있을 때만) */
.ssq-ticket__p { font-size: 1.0625rem; font-weight: 700; color: var(--copper); }
.ssq-ticket__p b { margin: 0 10px 0 6px; font-size: 1.625rem; line-height: 1.2; font-weight: 800; letter-spacing: .2em; color: var(--navy); font-variant-numeric: tabular-nums; }
.ssq-ticket__p small { display: block; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.ssq-kk { margin: 12px 0 0; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; }
.ssq-kk p { margin: 0 0 8px; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.ssq-kk__h b { font-size: 1.0625rem; color: var(--navy); }
.ssq-kk__b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.ssq-kk__b .dx-b { min-height: 52px; margin: 0; padding: 0 18px; text-decoration: none; }
.ssq-kk__chat:not(.dx-b) { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; font-size: 1rem; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; }
.ssq-kk__q { margin: 4px 0 0; padding: 10px 0 0; border-top: 1.5px dashed var(--line); }
.ssq-kk__q p { color: var(--navy); font-weight: 700; }
.ssq-kk .ssq-kk__s { margin: 0; }
@media (hover: hover) and (pointer: fine) { .ssq .ssq-kk .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } .ssq-kk__chat:not(.dx-b):hover { color: var(--copper); } }
/* 보내기 전 확인 창 — 화면 안의 창(<dialog>) · 폰은 화면 폭에 맞게 · 가운데 목록만 안에서 굴러감 · 단추는 늘 보임 */
.ssq-cf { width: min(560px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 2px solid var(--navy); border-radius: 20px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 16px 48px rgba(13,22,38,.35); }
.ssq-cf::backdrop { background: rgba(13,22,38,.55); }
.ssq-cf[open] { display: flex; }
.ssq-cf__in { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; padding: 18px 16px 14px; }
.ssq-cf__h { margin: 0 0 4px; font-size: 1.375rem; line-height: 1.35; color: var(--navy); }
.ssq-cf__h:focus { outline: none; }
.ssq-cf__h:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 6px; }
.ssq-cf__s { margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-cf__d { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 8px; margin: 0; padding: 0 2px 2px 0; }
.ssq-cf__d > div { min-width: 0; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); }
.ssq-cf__d dt { margin: 0; font-size: 1rem; font-weight: 800; color: var(--copper); }
.ssq-cf__d dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.ssq-cf__d dd small { display: block; font-size: 1rem; color: var(--ink-soft); }
.ssq-cf__body { max-height: 8.4em; overflow-y: auto; overscroll-behavior: contain; white-space: pre-wrap; }
.ssq-cf__body:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ssq-cf__pw { display: inline-block; min-width: 5.2em; margin-right: 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: .3em; font-variant-numeric: tabular-nums; color: var(--navy); vertical-align: middle; }
.ssq-cf .ssq-cf__see { min-height: 48px; min-width: 76px; padding: 0 16px; margin: 0; vertical-align: middle; }
.ssq-cf__th { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; padding: 0; }
.ssq-cf__th li { position: relative; width: 64px; height: 64px; margin: 0; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--warm); }
.ssq-cf__th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ssq-cf__th span { display: grid; place-content: center; width: 100%; height: 100%; font-size: 1rem; font-weight: 800; color: var(--navy); text-align: center; }
.ssq-cf__th i { position: absolute; left: 3px; bottom: 3px; padding: 0 6px; border-radius: 999px; background: rgba(13,22,38,.78); color: #fff; font: 800 1rem/1.4 var(--font); }
.ssq-cf #ssq-cf-m { margin: 8px 0 0; }
.ssq-cf__acts { flex: none; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin: 12px 0 0; }
.ssq-cf__acts .dx-b { min-height: 56px; margin: 0; width: 100%; }
.ssq-cf__acts .dx-b[disabled] { opacity: .7; cursor: progress; }
/* showModal 이 없는 브라우저 — 같은 내용을 화면 안 상자로 */
.ssq-cf.ssq-cf--in { position: static; width: auto; max-height: none; margin: 14px 0 0; box-shadow: none; }
.ssq-cf.ssq-cf--in .ssq-cf__d { overflow: visible; }
/* (감독 10/3 저녁) 아이폰 · 아이패드: 확인 창을 페이지 안 상자로 — 그동안 글쓰기 칸은 접고 아래 고정 띠는 숨김 */
.ssq-write.is-cf > #ssq-form { display: none; }
.ssq-write.is-cf > .ssq-cf.ssq-cf--in { display: flex; flex-direction: column; margin: 0; scroll-margin-top: calc(var(--top-h, 56px) + env(safe-area-inset-top) + 12px); }
body.ssq-cf-on .ss-bar, body.ssq-cf-on .ssgf-fab, body.ssq-cf-on .ssgf-bubble { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .ssq .ssq-cf .dx-b:not(.dx-b--main):hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .ssq .ssq-cf .dx-b--main:hover { background: #22406f; border-color: #22406f; color: #fff; }
  .ssq-bub__dl:hover { color: var(--copper); }
}

/* ==========================================================================
   W-234 — 공개에 체크하면 미리 보기 줄의 자물쇠가 풀림 · 공개된 글은 목록에서 열린 자물쇠(누르면 두 갈래)
   새 색 · 새 글자 크기 없음(--navy · --copper · --warm · --line · --ink-soft 만)
   ========================================================================== */
.ssq-lk__i { display: grid; place-items: center; width: 24px; }
.ssq-lk__i.is-o svg { color: var(--navy); }
/* 「이름 가림」 — 이름을 지운 자리라는 것이 한눈에(점선 테두리의 작은 딱지) */
.ssq-lk__hid { display: inline-block; padding: 0 8px; border: 1.5px dashed var(--ink-soft); border-radius: 8px; background: #fff; color: var(--ink-soft); font-weight: 700; line-height: 1.5; }
.ssq-lk__m--pub { flex-wrap: wrap; gap: 2px 8px; }
.ssq-lk__u { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ssq-lk__u i { margin-right: 0; }
/* (원장님 22:5x 덧붙임) 공개되지 않는 사진 · 영상 — 아이콘을 빼지 않고 오른쪽 아래에 작은 자물쇠를 채움(흰 테 · 구리색: 닫힌 자물쇠 줄과 같은 색) */
.ssq-lk__lkd { position: relative; display: inline-grid; margin-right: 6px; }
.ssq-lk__b .ssq-lk__m .ssq-lk__lkd > svg:first-child { opacity: .6; }
.ssq-lk__b .ssq-lk__m .ssq-lk__lkd svg.ssq-lk__lk { position: absolute; right: -8px; bottom: -6px; width: 15px; height: 15px; padding: 1px; border-radius: 50%; background: #fff; color: var(--copper); opacity: 1; box-sizing: border-box; }
.ssq-lk--pre.is-o .ssq-lk__lkd svg.ssq-lk__lk, .ssq-lk .ssq-lk__lkd svg.ssq-lk__lk { background: #fff; }
/* 딱지 — 「공개된 답변」(남색 테두리) · 미리 보기의 「답변 뒤 공개」(점선: 아직 아님) */
.ssq-lk__s.is-o { background: #fff; border: 2px solid var(--navy); color: var(--navy); font-weight: 700; padding: 2px 10px; }
.ssq-lk__s.is-o.is-soon { border-style: dashed; }
.ssq-lk--pre.is-o { border-color: var(--navy); background: #fff; }
/* 미리 보기 줄 아래 작은 한 줄(체크했을 때만) */
.ssq-pre__n { margin: 6px 2px 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-pre__n[hidden] { display: none; }
.ssq-locks__o { color: var(--ink-soft); }
/* 공개된 줄을 눌렀을 때의 두 갈래 */
.ssq-lk__two { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 14px 50px; }
.ssq-lk__two .dx-b { min-height: 52px; padding: 0 18px; }
.ssq-lk__pubp { margin: 0; padding: 4px 14px 0; }
.ssq-lk__pubp .dx-b { min-height: 48px; padding: 0 16px; }
@media (max-width: 520px) {
  .ssq-lk__two { padding-left: 14px; }
  .ssq-lk__two .dx-b { flex: 1 1 100%; }
}
@media (hover: hover) {
  .ssq .ssq-lk__two .dx-b:not(.dx-b--main):hover, .ssq .ssq-lk__pubp .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .ssq .ssq-lk__two .dx-b--main:hover { background: #22406f; border-color: #22406f; color: #fff; }
}
/* ==========================================================================
   (W-236) 연 글의 대화 — 원장님이 붙인 것(파일) · 댓글 · 댓글 쓰기 칸 · 원장님 글의 약간의 HTML(굵게 · 링크 · 목록 · 표)
   색 · 글자 크기는 있던 토큰만(새 값 없음) · 글자 16px 이상 · 누르는 자리 48px 이상
   ========================================================================== */
.ssq-bub__vid { flex: 1 1 100%; }
.ssq-bub__pics .ssq-bub__vid { place-items: stretch; height: auto; border: 0; border-radius: 0; background: none; }
/* 첨부파일 한 줄 — 이름 · 크기 · 내려받기 */
.ssq-bub__file { flex: 1 1 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--navy); text-decoration: none; }
.ssq-bub__file svg { width: 28px; height: 28px; color: var(--copper); }
.ssq-bub__pics .ssq-bub__file span { display: grid; place-items: start; gap: 0; width: auto; height: auto; min-width: 0; border: 0; border-radius: 0; background: none; font-size: 1rem; color: var(--navy); text-align: left; }
.ssq-bub__file b { font-weight: 800; overflow-wrap: anywhere; line-height: 1.4; }
.ssq-bub__file small { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.ssq-bub__file em { font-style: normal; font-size: 1rem; font-weight: 800; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; }
/* 원장님 답변 · 댓글의 꾸밈(서버가 거른 태그만 옴) */
.ssq-bub__h > :last-child { margin-bottom: 0; }
.ssq-bub__h ul, .ssq-bub__h ol { margin: 0 0 8px; padding: 0 0 0 1.4em; list-style: disc; }
/* (W-329) 번호 목록 = 「1)」 — 답변 편집기(ssg-editor.css)의 쓰는 칸 · 미리 보기와 같은 꼴 */
.ssq-bub__h ol { padding-left: 2em; list-style: none; counter-reset: ssq-n; }
.ssq-bub__h ol > li { position: relative; counter-increment: ssq-n; }
.ssq-bub__h ol > li::before { content: counter(ssq-n) ")"; position: absolute; left: -2.6em; width: 2.25em; text-align: right; font-variant-numeric: tabular-nums; }
.ssq-bub__h li { margin: 0 0 4px; }
.ssq-bub__h h4, .ssq-bub__h h5 { margin: 10px 0 6px; font-size: 1.0625rem; line-height: 1.5; font-weight: 800; color: var(--navy); }
.ssq-bub__h h4 { font-size: 1.1875rem; }
.ssq-bub__h blockquote { margin: 0 0 8px; padding: 6px 12px; border-left: 4px solid var(--line); color: var(--ink-soft); }
.ssq-bub__h hr { margin: 10px 0; border: 0; border-top: 1.5px solid var(--line); }
.ssq-bub__h a[href] { padding: 11px 0; color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; overflow-wrap: anywhere; }
.ssq-bub__h small, .ssq-bub__h sub, .ssq-bub__h sup { font-size: 1rem; }
.ssq-bub__h small { color: var(--ink-soft); }
.ssq-bub__h sub, .ssq-bub__h sup { line-height: 1; }
/* (W-329) 형광 · 글자색 · 취소선 — 답변 편집기가 저장하는 꼴(mark · mark.c2 · mark.c3 · span.tb · span.tr · s). 색 값은 편집기와 같은 값(지식인 답변 패널 — 원장님 10/6) */
.ssq-bub__h mark { padding: 0 2px; background: #fff593; color: inherit; }
.ssq-bub__h mark.c2 { background: #b0f1ff; }
.ssq-bub__h mark.c3 { background: #bdfbfa; }
.ssq-bub__h span.tb { color: #0095e9; }
.ssq-bub__h span.tr { color: #dc2626; }
.ssq-bub__h s { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ssq-tbl { max-width: 100%; margin: 0 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ssq-tbl table { border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.ssq-tbl th, .ssq-tbl td { min-width: 4.5em; padding: 6px 10px; border: 1.5px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: keep-all; }
.ssq-tbl th { background: var(--warm); color: var(--navy); font-weight: 800; }
/* 댓글 */
.ssq-talk { display: grid; gap: 10px; }
.ssq-talk__list { display: grid; gap: 10px; }
.ssq-talk__list:empty { display: none; }
.ssq-bub--c { max-width: 88%; }
.ssq-talk__d { display: grid; justify-items: end; margin: 4px 0 0; }
.ssq-talk__x { min-height: 48px; padding: 0 10px; border: 1.5px solid transparent; border-radius: 12px; background: none; color: var(--ink-soft); font: 600 1rem/1.2 var(--font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ssq-talk__q { justify-self: stretch; padding: 12px; border: 2px solid var(--copper); border-radius: 14px; background: #fff; }
.ssq-talk__q p { margin: 0 0 10px; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.ssq-talk__q .ssq-del__m { margin: 8px 0 0; }
.ssq-talk__q .ssq-del__m:empty { display: none; }
/* 댓글 쓰기 칸 */
.ssq-cw { margin: 4px 0 0; padding: 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--paper); }
.ssq-cw.is-over { border-color: var(--copper); background: #fdf3e6; }
.ssq-cw__l { display: block; margin: 0 0 8px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-cw__l b { margin-right: 4px; font-size: 1.0625rem; font-weight: 800; color: var(--navy); }
.ssq-cw__t { display: block; width: 100%; min-height: 76px; max-height: 320px; margin: 0; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.6; resize: vertical; }
.ssq-cw__t:focus { border-color: var(--navy); outline: none; }
.ssq-cw.is-miss .ssq-cw__t { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(143,82,24,.18); }
.ssq-cw__e { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 1rem; font-weight: 800; color: var(--copper); }
.ssq-cw__e:empty { display: none; }
.ssq-cw__e::before { content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--copper); color: #fff; font: 800 1rem/1 var(--font); }
.ssq-cw__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.ssq-cw__row .ssq-photo__btn, .ssq-cw__row .dx-b { min-height: 56px; margin: 0; padding: 0 10px; font-size: 1.0625rem; }
.ssq-cw__go[disabled] { opacity: .7; cursor: progress; }
.ssq-cw .ssq-thumbs { margin: 10px 0 0; }
.ssq-cw__up { margin: 10px 0 0; }
.ssq-cw__up .ssq-up__m { margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--navy); }
.ssq-cw__m { margin: 10px 0 0; font-size: 1.0625rem; font-weight: 800; color: var(--navy); }
.ssq-cw__m:empty { display: none; }
.ssq-talk__new { margin: 0; text-align: right; }
.ssq-talk__new a { display: inline-flex; align-items: center; min-height: 48px; font-size: 1rem; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; }
@media (max-width: 380px) { .ssq-cw__row { grid-template-columns: 1fr; } }
@media (hover: hover) and (pointer: fine) {
  .ssq-talk__x, .ssq-bub__file { transition: background-color .15s, border-color .15s, color .15s; }
  .ssq-talk__x:hover { background: var(--warm); border-color: var(--line); color: var(--copper); }
  .ssq-bub__file:hover { border-color: var(--copper); }
  .ssq .ssq-talk__q .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .ssq-talk__new a:hover, .ssq-bub__h a[href]:hover { color: var(--copper); }
}
/* ==========================================================================
   W-250 (2026-10-03 · 원장님 「큰제목 → 원장님께 물어보기 → 바로 입력창」 · 「친절한 설명이 산만하게 한다 — 늘 보이는 글은 적게 · 자세한 것은 자세히로 · 아이콘으로」)
   - 「자세히 ▾」 한 꼴(.ssq-more__b 단추 + .ssq-more__p 접힌 글) · 사진 한도는 아이콘 + 숫자(.ssq-photo__lim) · 보내기 아래 안내는 두 줄 + 자세히
   - 색 · 글자 크기는 있던 토큰만(--copper · --ink-soft · 1rem) · 누르는 자리 48px(줄 높이는 음수 여백으로 그대로)
   ========================================================================== */
.ssq-write__sub[hidden] { display: none; }
.ssq-more__b { display: inline-flex; align-items: center; min-height: 48px; margin: -12px 0; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--copper); font: 700 1rem/1.2 var(--font); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; cursor: pointer; white-space: nowrap; }
.ssq-more__b:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.ssq-more__p { display: block; margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-more__p[hidden] { display: none; }
.ssq-more__p b { color: var(--navy); }
/* 사진 · 영상 한도 — 📷 5 · 🎬 2 · 200MB + 자세히 */
.ssq-photo__lim { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font: 700 1rem/1.2 var(--font); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ssq-photo__lim > span { white-space: nowrap; }
#ssq-photo-more { margin: 10px 0 0; }
#ssq-photo-more .ssq-photo__how, #ssq-photo-more .ssq-photo__fine { margin: 0 0 6px; }
#ssq-photo-more .ssq-photo__fine { margin-bottom: 0; }
/* 공개 체크 칸 아래 「자세히」 — 글자 줄에 맞춤(체크 상자 48 + 사이 12 + 안쪽 여백 14) */
.ssq-open__more { margin: 2px 0 0 74px; }
.ssq-open__morep { margin: 0 0 0 74px; }
@media (max-width: 479.98px) { .ssq-open__more, .ssq-open__morep { margin-left: 14px; } }
/* 보내기 아래 안내 — 펼치면 두 줄은 숨고 전체 글이 보임 */
.ssq-lock .ssq-more__b { margin: 0; min-height: 48px; }
.ssq-lock .ssq-more__p { margin: 4px 0 0; color: inherit; }
.ssq-lock.is-open .ssq-lock__s { display: none; }
/* 로그인 상자 안 접힌 글 */
.ssq-login .ssq-more__p { margin: 6px 0 0; font-size: 1rem; color: var(--ink); }
.ssq-login__keep { margin-top: 2px; }
/* 글 비밀번호 도움 줄 안의 자세히 */
.ssq-pw-tip .ssq-more__b { margin: -12px 0 -12px 2px; }

/* ==========================================================================
   W-251 (2026-10-03 · 원장님 「자동생성 표시 · 마우스 클릭해서 입력도 가능하다는 직관성 · 비밀번호와 작성자 이름 하단은 공통으로 설명」)
   - 글 비밀번호 · 글 작성자 칸은 「입력 칸」으로: 흰 바탕 + 칸 테두리(#857c6d · 디자인 규격의 칸 테두리 색) + 초점 때 금빛 + I 빔 커서
   - (W-253 에서 바뀜) 칸 안 꼬리표 「자동생성」은 뺌 — 곁 단추 이름이 【자동생성】 · 그 자리는 원형 타이머(.ssq-tm)
   - 두 칸 아래 공통 한 줄 .ssq-row__tip + 「자세히」(글 비밀번호 긴 글 그대로)
   ========================================================================== */
.ssq-auto { position: relative; display: block; min-width: 0; }
.ssq-auto input { padding-right: 46px; }
.ssq-f--pw input, .ssq-f--name input { background: #fff; border-color: #857c6d; cursor: text; }
.ssq-f--pw input:focus, .ssq-f--name input:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 2px var(--gold); }
/* (W-253 · 원장님 10/3 「구글 OTP 앱의 타이머 아이콘처럼」) 칸 안 오른쪽의 원형 타이머 — 「자동생성」 꼬리표가 있던 자리 · 24px · 그림만(글자 없음 · aria-hidden)
   테두리 = 먹(--ink-soft) · 남은 시간 파이 = 금빛(--copper — 흰 칸 위에서 보이는 진한 금빛) · 손수 고친 칸(.is-mine)은 멈추고 반투명 · 1초에 한 번 ask.js 가 stroke-dasharray 만 바꿈 */
.ssq-tm { position: absolute; right: 12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; pointer-events: none; }
.ssq-tm__r { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; }
.ssq-tm__p { fill: none; stroke: var(--copper); stroke-width: 9; }
.ssq-auto.is-mine .ssq-tm { opacity: .35; }
.ssq-row__tip { margin: 8px 0 0; min-height: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-row__tip b { color: var(--navy); }
.ssq-row__tip .ssq-more__b { margin: -12px 0 -12px 2px; }
.ssq-row__more { margin: 6px 0 0; }

/* (W-252) 방금 보내신 글 · 이 기기의 표로 연 글 한 줄 · 내 글로 가져오기 · 바꿔 보기 — 있는 꼴(.ssq-thread__held · .ssq-back)을 그대로 씀 */
.ssq-just, .ssq-keyl, .ssq-claim, .ssq-claim1 { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--warm); font-size: 1rem; line-height: 1.5; color: var(--ink); }
.ssq-just { border: 2px solid var(--copper); background: #fdf3e6; }
.ssq-just[hidden], .ssq-claim[hidden], .ssq-just__th[hidden], .ssq-done__re[hidden], .ssq-ticket__p[hidden] { display: none; }
.ssq-just__h, .ssq-keyl__t, .ssq-claim__t { margin: 0 0 8px; font-size: 1.0625rem; }
.ssq-just__h b, .ssq-keyl__t, .ssq-claim__t b { color: var(--navy); font-weight: 700; }
.ssq-just__b { display: flex; flex-wrap: wrap; gap: 8px; }
.ssq-just__m:empty, .ssq-keyl__m:empty, .ssq-claim__m:empty, .ssq-claim1__m:empty { display: none; }
.ssq-just__m, .ssq-keyl__m, .ssq-claim__m, .ssq-claim1__m { margin: 8px 0 0; font-size: 1rem; }
.ssq-just__th { margin-top: 12px; }
.ssq-thread__ed { margin: 0 0 8px; font-size: 1rem; color: var(--ink); }
.ssq-back .ssq-back__sw { margin-left: 6px; }
.ssq-done__re { font-weight: 700; color: var(--navy); }
/* ==========================================================================
   W-254 (2026-10-03 · 원장님 「이대로 보낼까요 페이지 구성을 실제 글쓰기 부분의 순서대로」) — 확인 창
   차례: 글 내용 → 사진 · 영상(작은 그림) → 글 제목 → 글 비밀번호 | 글 작성자(좌 · 우) → 질문과 답변 공개 여부(계층 · 체크 꼴 · 목록에서 보이는 모양) → 로그인
   가운데(.ssq-cf__d)만 굴러가고 머리 · 단추 줄은 고정(W-230 의 틀 그대로) · 새 색 · 새 글자 크기 없음
   ========================================================================== */
.ssq-cf__d { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px; align-content: start; }
.ssq-cf__d > div { grid-column: 1 / -1; }
/* 글 비밀번호 | 글 작성자 — 좌 · 우 두 칸(폰 430 · 아이폰 390 에서도 나란히 · 380 아래에서는 위아래) · 비밀번호 칸이 넓음(숫자 + 【가리기】가 한 줄에 들어가게) */
.ssq-cf__d > div.ssq-cf__half { grid-column: auto; padding: 8px 10px; }
@media (max-width: 379.98px) { .ssq-cf__d > div.ssq-cf__half { grid-column: 1 / -1; } }
.ssq-cf__pwl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ssq-cf__pw { min-width: 4.3em; margin-right: 0; letter-spacing: .04em; line-height: 1.3; }
.ssq-cf__pw.is-hid { min-width: 5.375em; font-size: 1rem; letter-spacing: -.1em; }   /* 가린 점 여섯과 숫자 여섯의 폭을 같게 — 단추가 제자리 */
.ssq-cf .ssq-cf__see { min-width: 60px; padding: 0 8px; }
/* 사진 · 영상 — 작은 그림 줄 + 「사진 ○장 · 영상 ○개」 */
.ssq-cf__fl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.ssq-cf__fl .ssq-cf__th { margin: 4px 0 2px; }
.ssq-cf__fl .ssq-cf__th li { width: 56px; height: 56px; }   /* 셋까지는 「사진 ○장 · 영상 ○개」가 같은 줄에(폰 430) */
/* 공개 여부 — 계층 + 체크 꼴(누를 수 없는 표시 · 글쓰기 화면 체크 칸의 작은 모양) */
.ssq-cf__openrow dd { position: relative; }   /* 화면 읽기용 한 줄(.dx-sr · absolute)이 이 칸과 함께 굴러가게 — 없으면 굴린 뒤에도 제자리에 남아 창 밖으로 삐져나감 */
.ssq-cf__tree, .ssq-cf__tree ul { list-style: none; margin: 0; padding: 0; }
.ssq-cf__tree { margin: 4px 0 0; }
.ssq-cf__ck { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 8px; align-items: start; margin: 0; padding: 0; line-height: 1.5; }
.ssq-cf__ck > i { width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--navy); border-radius: 7px; background: #fff; box-sizing: border-box; }
.ssq-cf__ck.is-on > i { background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
.ssq-cf__ck b { color: var(--navy); }
.ssq-cf__ck > ul { grid-column: 1 / -1; margin: 2px 0 0 20px; }   /* 한 단 들여 */
.ssq-cf__ck.is-dim > i { border-color: var(--line); background-color: #f3f1ec; }
.ssq-cf__ck.is-dim b { color: var(--ink-soft); }
.ssq-cf__lkh { margin: 8px 0 4px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-cf .ssq-lk--pre .ssq-lk__b { box-sizing: border-box; min-height: 52px; padding: 6px 10px; gap: 8px; }
/* 폰: 창 안은 목록보다 좁아 제목이 여러 줄로 꺾임 → 딱지(「답변 기다리는 중」 · 「답변 후 공개」)만 글 아래로 내려 제목 자리를 넓힘(글은 글쓰기 화면 미리 보기와 같음) */
@media (max-width: 479.98px) {
  .ssq-cf .ssq-lk--pre .ssq-lk__b { grid-template-columns: 24px minmax(0, 1fr); gap: 4px 8px; }
  .ssq-cf .ssq-lk--pre .ssq-lk__s { grid-column: 2; justify-self: start; }
}
.ssq-cf__d dd b { color: var(--navy); }
.ssq-cf__nb { display: inline-block; }
/* W-184 완료 · W-186 완료 · W-188 완료 · W-196 완료 · W-225 완료 · W-230 완료 · W-234 완료 · W-236 완료 · W-239 완료 · W-250 완료 · W-251 완료  · W-252 완료 · W-253 완료 · W-254 완료 */

/* ---------- (W-255) 이어 올리기 상자 — 「방금 보내신 글」과 같은 꼴(있는 색 · 크기만) ---------- */
.ssq-rsmw:empty { display: none; }
.ssq-rsm { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--copper); background: #fdf3e6; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.ssq-rsm.is-end { border: 1.5px solid var(--line); background: var(--warm); }
.ssq-rsm__t { margin: 0 0 8px; }
.ssq-rsm .ssq-up { margin: 10px 0 0; background: #fff; }
.ssq-rsm .ssq-up__m { margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--navy); }
.ssq-rsm__up[hidden], .ssq-rsm .dx-b[hidden] { display: none; }
/* W-255 완료 */

/* (W-256) 글 고치기 — 있는 색 · 크기만(새 토큰 없음) */
.ssq-edbar { margin: 10px 0 0; padding: 8px 14px; border: 2px solid var(--copper); border-radius: 14px; background: #fdf3e6; font-size: 1rem; line-height: 1.5; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }   /* 글 칸 아래 한 줄(.ssq-back 과 같은 꼴) */
.ssq-edbar b { color: var(--navy); }
.ssq-edbar[hidden] { display: none; }
.ssq-del__row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; }
.ssq-edit__b { min-height: 48px; }
.ssq-edit__no { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.ssq-edit__m { margin: 6px 0 0; font-size: 1rem; color: var(--copper); }
.ssq-ticket__ed { margin: 6px 0 0; font-size: 1.0625rem; line-height: 1.5; font-weight: 800; color: var(--navy); }
.ssq-ticket__ed span { display: block; }
.ssq-ticket__ed .ssq-ticket__ed2 { font-weight: 700; color: var(--copper); }
.ssq-ticket__ed[hidden] { display: none; }
.ssq-cf__see[hidden] { display: none; }
/* W-256 완료 */

/* (W-257 · 원장님 10/3 「글의 범위가 눈에 안 들어옴 · 수정 단추를 맨 끝에서 겨우 찾음 · 「글 고치기」는 낯섦」) 연 글의 틀 · 머리 띠 · 【글 수정】 — 있는 색 · 크기만(새 토큰 없음)
   틀: 2px 남색 테두리 · 둥근 모서리 · 종이색보다 한 톤 진한 바탕(--warm) · 왼쪽 4px 구릿빛 세로 띠(안쪽 그림자) · 위아래 여유
   머리 띠: 「내 질문 · 질문 번호 N」 + 【글 수정】(구릿빛 바탕 · 흰 글자 · 「전화하기」와 같은 계열) + 【접기 ▲】 — 머리줄 아래에 붙어 따라옴(sticky · 이 글의 끝에서 풀림) */
.ssq-thread:not(:empty) { position: relative; margin: 12px 0 0; padding: 0 12px 12px 16px; border: 2px solid var(--navy); border-radius: 16px; background: var(--warm); box-shadow: inset 4px 0 0 var(--copper); }
.ssq-lk__open:not(:empty) { margin: 8px 8px 10px; padding: 0 12px 12px 16px; }
.ssq-lk:has(> .ssq-thread:not([hidden]):not(:empty)) { margin: 12px 0; }   /* 펼친 글이 든 줄은 위아래 다른 줄과 간격을 벌림 */
.ssq-thead { position: sticky; top: calc(var(--top-h, 48px) + env(safe-area-inset-top)); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 -12px 2px -12px; padding: 8px 12px; border-radius: 14px 14px 0 0; border-bottom: 1.5px solid var(--line); background: var(--warm); }
body.admin-bar .ssq-thead { top: calc(var(--top-h, 48px) + 32px); }
@media (max-width: 782px) { body.admin-bar .ssq-thead { top: calc(var(--top-h, 48px) + 46px); } }
.ssq-thead__t { flex: 1 1 0; min-width: 5.5em; margin: 0; display: grid; font-size: 1rem; line-height: 1.3; color: var(--navy); }
.ssq-thead__t small { font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.ssq-thead__t b { font-weight: 800; }
.ssq-thead__b { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; margin-left: auto; }   /* 단추는 한 줄 · 좁으면 왼쪽 글이 줄을 바꿈(머리 띠가 두 단으로 높아지지 않게) */
.ssq-thead .ssq-edit__no { max-width: 9em; text-align: right; line-height: 1.35; }
.ssq-thead .ssq-edit__m { flex: 1 0 100%; margin: 0; }
.ssq .ssq-thread .ssq-edit__b { min-height: 48px; padding: 0 16px; gap: 6px; border-color: var(--copper); background: var(--copper); color: #fff; border-radius: 999px; font-size: 1.0625rem; }
.ssq-edit__b span { font-size: 1.0625rem; line-height: 1; }
.ssq-thread .ssq-fold { min-height: 48px; padding: 0 12px; font-size: 1rem; }
.ssq-fold--end { min-height: 48px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font: 700 1rem/1.2 var(--font); cursor: pointer; }
.ssq-thread .ssq-del { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (hover: hover) {
  .ssq .ssq-thread .ssq-edit__b:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
  .ssq-fold--end:hover { border-color: var(--copper); color: var(--copper); }
}
/* 합친 상자(「방금 보내신 글」 + 「아직 못 올린 사진 · 영상」) — 안쪽 줄은 틀 없이 */
.ssq-just__rsm:empty { display: none; }
.ssq-rsm.ssq-rsm--in { margin: 0 0 10px; padding: 0; border: 0; background: none; }
.ssq-rsm.ssq-rsm--in .ssq-rsm__t { font-weight: 700; color: var(--copper); }
/* W-257 완료 */
/* (W-258 · 원장님 10/4 「복잡해 · 이미지는 작게 영상은 크게 · 화면 폭을 다 못 써서 답답 · 답글이 달려도 모르고 지나갈 것 같아 · 자신이 쓴 글을 예쁘게」) 연 글 = 「내가 쓴 글 한 편」 — 있는 색 · 크기만(새 토큰 없음)
   틀 하나(.ssq-card): 2px 남색 · 16px · 흰 바탕 · 머리 띠 위 5px 구릿빛 띠 — 목록 줄(li)이 통째로 카드(연 동안 줄 단추는 감춤 — 제목은 글 머리에 한 번) · 줄 밖에서 연 글은 글 자체가 카드
   폰(600px 까지)은 ask.js cardFit() 이 카드를 화면 양옆 8px 까지 넓힘(음수 여백) → 안 폭 = 화면 폭 − 44px(390 에서 346px) */
.ssq-lk.ssq-card { position: relative; margin: 14px 0; border: 2px solid var(--navy); border-radius: 16px; background: #fff; }
.ssq-lk.ssq-card > .ssq-lk__b { display: none; }   /* 연 동안 줄 단추(제목 · 작성자 · 날짜)는 감춤 — 같은 제목이 두 번 보이지 않게 · 접기는 머리 띠 · 맨 아래 【접기 ▲】(이 단추를 대신 누름) */
.ssq-lk.ssq-card > .ssq-thread:not(:empty) { margin: 0; padding: 0 12px 14px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ssq-thread.ssq-card:not(:empty) { margin: 12px 0 0; padding: 0 12px 14px; border: 2px solid var(--navy); border-radius: 16px; background: #fff; box-shadow: none; }
.ssq-card .ssq-thread, .ssq-thread.ssq-card { gap: 14px; }
.ssq-card .ssq-thead { margin: 0 -12px; padding: 6px 12px 8px; border-top: 5px solid var(--copper); border-radius: 14px 14px 0 0; }
.ssq-card .ssq-thead__t { display: block; }
.ssq-card .ssq-thead__t b { white-space: nowrap; }
.ssq .ssq-thread .ssq-goans { min-height: 48px; padding: 0 12px; border-color: var(--navy); border-radius: 999px; background: var(--navy); color: #fff; font-size: 1rem; font-weight: 800; }
/* 글 머리 — 제목 한 번 · 한 줄 정보(작성자 · 때 · 「수정 N」) */
.ssq-post__h { margin: 2px 0 0; }
.ssq-post__t { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.45; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.ssq-post__i { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.ssq-post__i .ssq-thread__ed { display: inline-block; margin: 0 0 0 4px; padding: 0 9px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 1rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
/* 본문 — 말풍선 꼴(92% · 한쪽 붙임 · 회색 덩어리)을 없애고 카드 폭 전체 · 종이 흰색 */
.ssq-thread .ssq-bub { max-width: none; justify-self: stretch; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.ssq-thread .ssq-post__b { font-size: 1.125rem; line-height: 1.75; color: var(--ink); }
.ssq-thread .ssq-post__b > p { margin: 0 0 14px; }
.ssq-thread .ssq-post__b > p:last-child { margin: 0; }
/* 사진 · 영상 = 같은 크기의 큰 타일(1개 폭 가득 · 2개 두 칸 · 3개부터 두 칸 격자 — 홀수면 첫 것이 폭 가득) · 누르면 그 자리에서 폭 가득 · 제 비율 */
.ssq-thread .ssq-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 14px 0 0; }
.ssq-tile { position: relative; display: block; min-width: 0; aspect-ratio: 1 / 1; border-radius: 13px; overflow: hidden; background: var(--film); }
.ssq-tile__b { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in; }
.ssq-tile__b img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ssq-tile__b:focus-visible, .ssq-tile__img:focus-visible, .ssq-tile--dl:focus-visible { outline: 3px solid var(--copper); outline-offset: -3px; }
.ssq-tiles--1 > .ssq-tile, .ssq-tiles--odd > .ssq-tile:first-child { grid-column: 1 / -1; }
.ssq-tiles--odd > .ssq-tile:first-child { aspect-ratio: 4 / 3; }
.ssq-tiles--1 > .ssq-tile { aspect-ratio: auto; min-height: 120px; }
.ssq-tiles--1 > .ssq-tile .ssq-tile__b img { height: auto; max-height: 70vh; }
.ssq-tiles--1 > .ssq-tile--vid:not([data-poster]), .ssq-tiles--1 > .ssq-tile--dl { aspect-ratio: 4 / 3; }
.ssq-tile--vid .ssq-tile__b { cursor: pointer; }
.ssq-tiles .ssq-tile__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 0; border-radius: 50%; background: rgba(13, 22, 38, .62); color: #fff; }
.ssq-tile__play svg { width: 30px; height: 30px; }
.ssq-tiles .ssq-tile__len { position: absolute; right: 8px; bottom: 8px; display: block; width: auto; height: auto; padding: 1px 9px; border: 0; border-radius: 999px; background: rgba(13, 22, 38, .72); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ssq-tile--dl { display: grid; place-items: center; border: 1.5px solid var(--line); background: var(--paper); color: var(--navy); text-decoration: none; }
.ssq-tiles .ssq-tile--dl span { display: grid; place-content: center; width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: 1rem; font-weight: 800; text-align: center; color: var(--navy); }
.ssq-tile--dl small { display: block; font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.ssq-tiles > .ssq-tile.is-open { grid-column: 1 / -1; aspect-ratio: auto; min-height: 0; overflow: visible; border-radius: 0; background: none; scroll-margin-top: calc(var(--top-h, 56px) + env(safe-area-inset-top) + 90px); }
.ssq-tile__big { display: grid; gap: 6px; }
.ssq-tile__img { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 13px; overflow: hidden; background: var(--film); cursor: zoom-out; }
.ssq-tile__img img { display: block; width: 100%; height: auto; }
/* (W-276) 바탕이 투명한 그림(원장님 설명 그림 png · webp)이 어두운 타일 · 크게 보기 바탕에 묻혀 글씨가 안 보이던 것 — 그림 뒤에 흰 바탕 */
.ssq-tile--pic .ssq-tile__b img, .ssq-tile__img img, .ssq-view__img { background: #fff; }
.ssq-tile__big video { display: block; width: 100%; max-height: 78vh; border-radius: 13px; background: var(--film); }
.ssq-tile__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ssq-tile__x { min-height: 48px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font: 700 1rem/1.2 var(--font); cursor: pointer; }
.ssq-tiles > .ssq-bub__file { grid-column: 1 / -1; }
/* 원장님 답변 — 이 화면에서 가장 눈에 띄는 덩어리: 카드 폭 가득(옆 여백까지) · 남색 머리 띠 + 흰 바탕 · 왼쪽 금빛 띠 */
.ssq-thread .ssq-ans { margin: 4px -12px 0; outline: none; scroll-margin-top: calc(var(--top-h, 56px) + env(safe-area-inset-top) + 76px); }
.ssq-ans__h { display: grid; gap: 2px; margin: 0; padding: 12px 14px; background: var(--navy); color: #fff; }
.ssq-ans__h b { font-size: 1.25rem; line-height: 1.4; font-weight: 800; }
.ssq-thread .ssq-ans .ssq-ans__h .ssq-bub__w { margin: 0; font-size: 1rem; font-weight: 700; color: var(--gold); }
.ssq-ans__b { padding: 14px 12px 14px 17px; border-bottom: 2px solid var(--navy); background: #fff; box-shadow: inset 5px 0 0 var(--gold); font-size: 1.125rem; line-height: 1.75; color: var(--ink); }
.ssq-ans__b .ssq-bub__h > p { margin: 0 0 14px; }
.ssq-ans__b .dx-note2 { margin: 14px 0 0; font-size: 1rem; line-height: 1.6; }
.ssq-thread .ssq-post__tel { margin: 0; }
/* 기다리는 중 — 알약 + 점선 상자를 한 줄 하나로 */
.ssq-thread .ssq-thread__state { justify-self: stretch; display: flex; align-items: flex-start; gap: 8px; min-height: 0; margin: 0; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--warm); color: var(--navy); font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.ssq-thread .ssq-thread__state[hidden] { display: none; }
.ssq-thread__state svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--copper); }
/* 오간 댓글 — 폭 가득 · 누가 썼는지는 색 띠 + 이름표 */
.ssq-thread .ssq-talk { gap: 14px; }
.ssq-thread .ssq-bub--c { max-width: none; padding: 10px 12px 10px 16px; border-radius: 12px; font-size: 1.0625rem; line-height: 1.7; }
.ssq-thread .ssq-bub--c.ssq-bub--me { background: var(--warm); box-shadow: inset 4px 0 0 var(--line); }
.ssq-thread .ssq-bub--c.ssq-bub--dr { background: #fff; border: 1.5px solid var(--navy); box-shadow: inset 4px 0 0 var(--navy); }
.ssq-thread .ssq-bub--c .ssq-bub__w { margin: 0 0 6px; font-weight: 600; color: var(--ink-soft); }
.ssq-bub__who { display: inline-block; margin-right: 4px; padding: 0 9px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 800; color: var(--ink-soft); }
.ssq-bub--dr .ssq-bub__who { border-color: var(--navy); background: var(--navy); color: #fff; }
/* 댓글 쓰기 — 상자 속 상자를 없애고 입력칸이 카드 폭 가득 · 머리 글은 자리 표시 글로 · 한도 안내는 쓰기 시작하면 보임 */
.ssq-thread .ssq-cw { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.ssq-thread .ssq-cw__t { min-height: 84px; border-color: var(--navy); }
.ssq-thread .ssq-cw.is-over .ssq-cw__t { border-color: var(--copper); background: #fdf3e6; }
.ssq-cw__t::placeholder { color: var(--ink-soft); opacity: .75; }
.ssq-thread .ssq-cw .ssq-photo__fine { display: none; }
.ssq-thread .ssq-cw:focus-within .ssq-photo__fine { display: block; }
/* 글 관리 — 접어 둠(공개 동의 · 비밀번호 없이 열기 · 내 글로 가져오기 · 지우기) · 맨 아래 작은 【접기 ▲】는 접힌 줄 곁에 */
.ssq-mngw { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 2px 0 0; padding: 10px 0 0; border-top: 1.5px solid var(--line); }
.ssq-mng { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.ssq-mngw > .ssq-fold--end { grid-column: 2; grid-row: 1; align-self: start; position: relative; z-index: 1; }
.ssq-mng > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 0 92px 0 2px; border-radius: 12px; cursor: pointer; font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.ssq-mng > summary::-webkit-details-marker { display: none; }
.ssq-mng__s::after { content: " ▾"; }
.ssq-mng[open] .ssq-mng__s::after { content: " ▴"; }
.ssq-mng__tag { padding: 1px 9px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 1rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.ssq-mng__tag.is-on { border-color: var(--navy); color: var(--navy); }
.ssq-mng__in { display: grid; gap: 14px; padding: 10px 0 0; }
.ssq-mng:not([open]) > .ssq-mng__in { display: none; }   /* 접힌 동안은 확실히 감춤(웹킷은 display 를 준 자식을 접힌 details 안에서도 그림) */
.ssq-mng .ssq-agree2, .ssq-mng .ssq-keyl, .ssq-mng .ssq-claim1 { margin: 0; padding: 0 0 14px; border: 0; border-bottom: 1.5px dashed var(--line); border-radius: 0; background: none; }
.ssq-mng .ssq-del { margin: 0; }
.ssq-thread .ssq-cw__go, .ssq-thread .ssq-cw__t, .ssq-mng > summary, .ssq-mng .dx-b, .ssq-mng .ssq-del__b, .ssq-tile__x, .ssq-fold--end { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* 목록 줄 — 「내 글」 작은 딱지 · 「새 답변」(점 + 구릿빛) · 폰에서는 딱지를 글 아래 줄로(제목이 줄 폭을 다 씀) */
.ssq-lk__w em.ssq-lk__me { display: inline-block; margin-left: 4px; padding: 0 8px; border: 1.5px solid var(--copper); border-radius: 999px; font-size: 1rem; line-height: 1.4; font-weight: 700; color: var(--copper); white-space: nowrap; }
.ssq-lk__s.is-a.is-new { display: inline-flex; align-items: center; gap: 6px; background: var(--copper); color: #fff; font-weight: 800; }
.ssq-lk__dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
@media (max-width: 480px) {
  .ssq-locks .ssq-lk__b { grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; }
  .ssq-locks .ssq-lk__s { grid-column: 2; justify-self: start; }
}
@media (min-width: 700px) { .ssq-thread .ssq-tiles { max-width: 560px; } }   /* PC — 타일 묶음이 지나치게 커지지 않게 */
@media (hover: hover) {
  .ssq .ssq-thread .ssq-goans:hover { background: var(--copper); border-color: var(--copper); color: #fff; }
  .ssq-tile__x:hover, .ssq-mng > summary:hover { color: var(--copper); }
  .ssq-tile__x:hover { border-color: var(--copper); }
}
/* W-258 완료 */

/* ---------- (W-259 · 2026-10-04) 수정할 때 글 칸이 글 전체 높이 · 새 번호 안내 한 줄 ---------- */
#ssq-pw-gen { min-height: 0; line-height: 1.5; }
#ssq-pw-gen[hidden] { display: none; }
#ssq-form[data-edit] .ssq-text { overflow-y: auto; }   /* 높이는 ask.js edGrow 가 글 전체에 맞춤 — 화면 두 배를 넘는 긴 글만 칸 안에서 굴림 */

/* ==========================================================================
   (W-261 · 2026-10-04 · 원장님 「원장님께 물어보기의 범위는 네이버 톡톡까지 한 테두리 · 글 작성 직후 · 수정 직후에는 내가 쓴 글을 · 1,2,3 이 한 화면에」)
   ① 글쓰기 카드 = 머리 줄(.ssq-write__head) + 글 칸 + 맨 아래 톡 단추 줄(.ssq-ways — 옅은 가로줄로 가름)
   ② 보낸 직후 · 수정한 직후 · 그 뒤 30분 안에 다시 온 때 = 카드를 머리 한 줄로 접음(.is-fold — ask.js foldSync) · 오른쪽 【새 질문 쓰기 ▾】(#ssq-again)
   ③ 「받았습니다」 카드(#ssq-done) = 접힌 줄 아래 따로 선 작은 카드 · 긴 설명은 「자세히 ▾」(#ssq-done-more)
   ④ 내 글 줄(#ssq-just) = 「내가 쓴 질문」 맨 위 · 딱지 + 질문 번호 + 제목 + 【글 보기 ▾】 · 그동안 목록 설명 글은 「자세히 ▾」(.ssq-locks__more)
   - 색 · 글자 크기는 있던 것만 · 누르는 자리 48px · PC 에만 걸리는 것은 맨 아래 「W-261 PC」 덩어리 하나
   ========================================================================== */
.ssq-write__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.ssq-write .ssq-write__head h2 { margin: 0; }
.ssq-write__new { flex: none; min-height: 48px; padding: 0 14px; white-space: nowrap; }
.ssq-write__new[hidden] { display: none; }
.ssq-write.is-fold { margin-bottom: 8px; padding: 4px 8px 4px 16px; scroll-margin-top: calc(var(--top-h, 56px) + env(safe-area-inset-top) + 8px); }
.ssq-write.is-fold > :not(.ssq-write__head) { display: none !important; }
.ssq-write.is-fold > .ssq-write__head { margin: 0; }
.ssq-write.is-fold .ssq-write__head h2 { font-size: 1.125rem; }
.ssq-write > .ssq-ways { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.ssq-write.is-cf > .ssq-ways { display: none; }   /* 아이폰의 화면 안 확인 상자가 떠 있는 동안은 톡 단추 줄도 함께 접음 */
/* 「받았습니다」 카드 */
.ssq-done { margin: 8px 0 0; padding: 10px 12px 8px; border: 2px solid var(--navy); border-radius: 16px; background: #fff; }
.ssq-done .ssq-done__h { margin: 0 0 2px; gap: 8px; font-size: 1.25rem; }
.ssq-done .ssq-done__h svg { width: 28px; height: 28px; }
.ssq-done .ssq-ticket { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.ssq-done .ssq-done__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-done__nums > span { white-space: nowrap; }
.ssq-done__nums .ssq-ticket__n b, .ssq-done__nums .ssq-ticket__p b { margin: 0 0 0 4px; font-size: 1.375rem; line-height: 1.3; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ssq-done__nums .ssq-ticket__p { font-size: 1rem; }
.ssq-done .ssq-ticket__ed { margin: 0 0 6px; font-size: 1rem; line-height: 1.4; }
.ssq-done p.ssq-done__re { margin: 0 0 6px; font-size: 1rem; line-height: 1.4; }
.ssq-done .ssq-up { margin: 0 0 8px; padding: 8px 12px; }
.ssq-done .ssq-up .ssq-up__m { margin: 0 0 6px; font-size: 1rem; }
.ssq-done .ssq-up .dx-b { margin-top: 6px; min-height: 48px; }
.ssq-done .ssq-done__b2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.ssq-done .ssq-done__b2 .dx-b { min-height: 48px; padding: 0 6px; }
.ssq-done p.ssq-ticket__m { min-height: 0; margin: 6px 0 0; }
.ssq-done p.ssq-ticket__m:empty { display: none; }
.ssq-done p.ssq-done__more { margin: 4px 0 0; text-align: right; line-height: 1.2; }
.ssq-done__more .ssq-more__b { margin: -10px -6px -12px 0; }
.ssq-done__morep { margin: 12px 0 4px; padding: 12px 0 0; border-top: 1px solid var(--line); color: var(--ink); }
.ssq-done__morep .ssq-ticket__b { margin: 4px 0 10px; }
#ssq-done-pics { color: var(--ink-soft); }
/* 내 글 줄 — 「방금 보낸 글」 · 「방금 수정한 글」 */
.ssq-mine .ssq-just { margin: 0 0 10px; padding: 8px 10px 8px 12px; }
.ssq-just__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ssq-just__hd { display: grid; gap: 2px; min-width: 0; margin: 0; }
.ssq-just__l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 1rem; line-height: 1.4; color: var(--ink-soft); }
.ssq-just__tag { padding: 1px 10px; border-radius: 999px; background: var(--copper); color: #fff; font-style: normal; font-weight: 800; font-size: 1rem; white-space: nowrap; }
.ssq-just__i { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ssq-just__i svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--copper); }
.ssq-just__i .ssq-lk__m i { font-style: normal; font-weight: 700; margin: 0 4px 0 2px; }
.ssq-just__w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.0625rem; line-height: 1.4; color: var(--navy); }
.ssq-just .ssq-just__open { min-height: 48px; padding: 0 14px; white-space: nowrap; }
.ssq-just__no { display: none; }   /* 폰: 질문 번호는 카드 · 연 글에 — 줄에는 딱지 · 사진 수 · 제목만(두 줄) */
.ssq-mine.is-just { margin-top: 8px; }
.ssq-mine.is-just > summary { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
.ssq-write > .ssq-ways .dx-b { padding-left: 4px; padding-right: 4px; }
.ssq-just__kb { margin: 8px 0 0; }
.ssq-just__kb[hidden] { display: none; }
.ssq-just .ssq-just__rsm:not(:empty) { margin: 8px 0 0; }
.ssq-just__pv { display: none; }
.ssq-locks__more { margin: -2px 0 8px; text-align: right; line-height: 1.2; }
.ssq-locks__more[hidden], .ssq-locks__h[hidden] { display: none; }
.ssq-locks__more .ssq-more__b { margin: -10px -6px -10px 0; }
@media (hover: hover) and (pointer: fine) {
  .ssq-write__new:hover, .ssq-done .dx-b:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
}
/* ---------- W-261 PC — PC 에만 걸리는 것은 이 덩어리 하나(지우면 PC 도 폰과 같은 꼴: 내 글이 한 줄 · 미리 보기 없음 · 카드 여백 폰 값) ---------- */
@media (min-width: 900px) {
  .ssq-write.is-fold { padding: 8px 12px 8px 22px; }
  .ssq-done { padding: 14px 20px 10px; }
  .ssq-done .ssq-done__nums { gap: 0 28px; }
  .ssq-done .ssq-done__b2 { grid-template-columns: repeat(2, minmax(0, 260px)); }
  .ssq-mine .ssq-just { padding: 12px 14px 12px 16px; }
  .ssq-just__w { white-space: normal; font-size: 1.125rem; }
  .ssq-just__no { display: inline; }
  /* 내 글 미리 보기 — 작성자 · 때 → 본문 앞 세 줄 → 사진 · 영상 작은 타일 한 줄 → 답 기다림 한 줄 · 【글 보기 ▾】로 펼치면 숨음 */
  .ssq-just__pv { display: block; margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 1rem; line-height: 1.55; color: var(--ink); }
  .ssq-just__pv[hidden], .ssq-just.is-open .ssq-just__pv { display: none; }
  .ssq-just__pv p { margin: 0; }
  .ssq-just__pvi, .ssq-just__pvw { color: var(--ink-soft); }
  .ssq-just__pvb { max-height: 4.65em; margin: 4px 0 0; overflow: hidden; }
  .ssq-just__pvt { display: flex; gap: 6px; margin: 8px 0 0; }
  .ssq-just__pvt span { position: relative; display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--warm); }
  .ssq-just__pvt img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ssq-just__pvt .is-v::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1rem; text-shadow: 0 1px 4px rgba(13,22,38,.6); }
  .ssq-just__pvw { margin: 8px 0 0 !important; }
}
@media (min-width: 900px) and (max-height: 760px) {   /* 낮은 창(1280 × 720 등) — 미리 보기를 줄임(본문 한 줄 + 답 기다림 한 줄 · 작성자 줄과 작은 타일은 뺌 — 사진 · 영상 수는 줄의 아이콘에) */
  .ssq-just__pv { margin-top: 8px; padding: 6px 14px; }
  .ssq-just__pvb { max-height: 1.55em; margin-top: 0; }
  .ssq-just__pvi, .ssq-just__pvt { display: none; }
  .ssq-just__pvw { margin-top: 2px !important; }
}
/* W-261 완료 */

/* ---------- W-262 (2026-10-04) — 비슷한 질문의 원장님 답변: 글 쓰는 동안에는 없음 · 보낸 후 「기다리시는 동안」 접힌 한 줄 ----------
   ㉠ 연 내 글의 「답변을 기다리는 중입니다」 바로 아래 ㉡ 보낸 직후 내 글 줄 아래(내 글을 펼치면 ㉠ 과 겹치므로 감춤) · 있는 색 · 크기만 */
.ssq-wsim { margin: 0; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.ssq-wsim__s { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px; list-style: none; cursor: pointer; color: var(--copper); font-size: 1rem; font-weight: 800; line-height: 1.4; }
.ssq-wsim__s::-webkit-details-marker { display: none; }
.ssq-wsim__s > span { flex: 1 1 auto; min-width: 0; }
.ssq-wsim__k { white-space: nowrap; }   /* 「원장님 답변 N」은 한 덩어리로 줄을 넘김(숫자만 떨어지지 않게) */
.ssq-wsim__s::after { content: "▾"; flex: none; font-size: 1rem; }
.ssq-wsim[open] > .ssq-wsim__s::after { content: "▴"; }
.ssq-wsim__s:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 12px; }
.ssq-wsim__in { padding: 0 10px 10px; }
.ssq-wsim__in .ssqa-folds { margin: 0; }
.ssq-wsim__n { margin: 8px 4px 0; font-size: 1rem; color: var(--ink-soft); }
.ssq-just__sim:empty { display: none; }
.ssq-just__sim { margin: 8px 0 0; }
.ssq-just.is-open .ssq-just__sim { display: none; }
/* W-262 완료 */

/* ---------- (W-263 · 원장님 10/4) 「원장님이 답변한 질문」 · 「자주 묻는 질문」 — 「내가 쓴 질문」 카드와 같은 접는 카드(.ssq-fcard — 위 85~91줄 규칙을 함께 씀) · 있는 색 · 크기만 ---------- */
.ssq-fcard > summary > .ssq-fcard__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; font: inherit; line-height: 1.4; color: inherit; }
.ssq-fcard__h small { font-size: 1rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ssq-fcard__h small:empty { display: none; }
.ssq-fcard .ssq-h2s { margin: 0 0 12px; }
.ssq-fcard .ssq-h2s b { color: var(--copper); }
.ssq-faq__h { margin: 18px 0 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.4; color: var(--copper); }
.ssq-faq__h + .ssqa-folds { margin-top: 8px; }
.ssq-faql .ssqa-fold__a p:last-child { margin-bottom: 12px; }
.ssq-faq__end { margin: 12px 0 0; }
/* W-263 완료 */

/* ---------- 감독 고침 2026-10-04 — 펼쳐진 글쓰기 카드도 손으로 접기(원장님 「우측 상단에도 펼침-접기 버튼」) · 다른 카드의 「펼치기 ▾ / 접기 ▴」와 같은 글자 꼴 ---------- */
.ssq-write__tg { flex: none; min-height: 48px; margin: 0 -6px 0 0; padding: 0 6px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 1rem; font-weight: 700; color: var(--copper); cursor: pointer; white-space: nowrap; }
.ssq-write__tg[hidden] { display: none; }
.ssq-write.is-shut { margin-bottom: 8px; padding: 4px 14px 4px 16px; }
.ssq-write.is-shut > :not(.ssq-write__head) { display: none !important; }
.ssq-write.is-shut > .ssq-write__head { margin: 0; }
.ssq-write.is-shut .ssq-write__head h2 { font-size: 1.125rem; }
@media (min-width: 900px) { .ssq-write.is-shut { padding: 8px 18px 8px 22px; } }
@media (hover: hover) and (pointer: fine) { .ssq-write__tg:hover { background: var(--warm); } }

/* ---------- W-264 (2026-10-04 · 원장님 「한번에 하나의 메뉴만 펴지는 것처럼」 · 「내 작성글의 목록만」) — 카드 넷은 한 번에 하나 · ② 는 내 글 줄만 · 있는 색 · 크기만 ----------
   ① 접힌 글쓰기 카드에 쓰던 글이 있으면 머리 줄에 「쓰던 글이 있습니다」(.ssq-write.is-shut.has-wip — 제목 아래 둘째 줄 · 오른쪽 단추 「이어 쓰기 ▾」)
   ② 내 글 줄(#ssq-my — 목록 줄 .ssq-lk 꼴 그대로) · 접힌 한 줄 「다른 기기에서 쓴 글 찾기 ▾」(.ssq-other__b — 「질문 번호를 잊으셨으면」과 같은 꼴) → #ssq-other
      내 글이 없는 분(.ssq-mine 에 has-mine 없음)께는 그 한 줄이 숨고 안의 것이 전처럼 그대로 보임 */
.ssq-write__wip { display: none; }
.ssq-write.is-shut.has-wip .ssq-write__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; }
.ssq-write.is-shut.has-wip .ssq-write__head h2 { grid-column: 1; grid-row: 1; padding-top: 6px; }
.ssq-write.is-shut.has-wip .ssq-write__wip { display: block; grid-column: 1; grid-row: 2; padding-bottom: 6px; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--copper); }
.ssq-write.is-shut.has-wip .ssq-write__wip[hidden] { display: none; }
.ssq-write.is-shut.has-wip .ssq-write__tg { grid-column: 2; grid-row: 1 / span 2; }
.ssq-my[hidden] { display: none; }
.ssq-other__t { margin: 0; }
.ssq-mine:not(.has-mine) .ssq-other__t { display: none; }
.ssq-other__b { display: flex; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 1.0625rem; font-weight: 700; color: var(--copper); text-align: left; cursor: pointer; }
.ssq-other__b:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.ssq-mine.has-mine .ssq-other:not(.is-open) { display: none; }
.ssq-mine.has-mine .ssq-other.is-open { margin-top: 6px; }
.ssq-mine.has-mine > .ssq-mine__in > .ssq-login--mine { margin: 0 0 6px; }
@media (hover: hover) and (pointer: fine) { .ssq-other__b:hover { color: var(--navy); } }
.ssq-thread .ssq-cw.is-used .ssq-photo__fine { display: block; }   /* 댓글 칸에 한 번 들어섰으면 한도 안내 글을 그대로 둠 — 초점이 빠질 때 아래 줄이 튀지 않게(ask.js) */
/* 폰(480px 까지) — 내 글 줄은 두 줄로 낮게(제목 한 줄 · 그 아래 쓴 날 · 사진 수 + 오른쪽 딱지 · 자물쇠 그림은 뺌): 390 × 664 에서 내 글 3개까지 ② 가 굴리지 않고 한 화면에 */
@media (max-width: 480px) {
  .ssq-locks.ssq-my .ssq-lk__b { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 12px; }
  .ssq-my .ssq-lk__i { display: none; }
  .ssq-my .ssq-lk__w { display: contents; }
  .ssq-my .ssq-lk__w b { grid-column: 1 / -1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ssq-my .ssq-lk__w > span { grid-column: 1; grid-row: 2; min-width: 0; font-size: 1rem; color: var(--ink-soft); }
  .ssq-locks.ssq-my .ssq-lk__s { grid-column: 2; grid-row: 2; justify-self: end; padding: 2px 10px; }
  .ssq-mine.has-mine .ssq-my { margin-bottom: 4px; }
  .ssq-mine.has-mine > .ssq-mine__in { padding-bottom: 4px; }
  .ssq-mine.has-mine:not(.is-just) > .ssq-mine__in { padding-top: 8px; }   /* 방금 보낸 글 줄이 떠 있는 동안(.is-just)은 W-261 의 한 화면 값 그대로 */
}
/* W-264 완료 */

/* ---------- W-266 (2026-10-04 · 원장님 「카톡이나 아이폰 대화창처럼 … 이미지와 동영상은 너무 크게 나올 필요는 없고 클릭하면 크게 … 내 답변의 가장 마지막은 내 사인」) ----------
   연 글 = 대화창 꼴: 첫 질문(머리 덩어리) → 사진 · 영상 작은 썸네일 한 줄 → 대화(원장님 = 왼쪽 말풍선 · 쓰신 분 = 오른쪽 말풍선 · 날짜 줄) → 입력 줄 → 【글 관리 ▾】
   있는 색 · 크기 안에서 — 새 색은 둘(--ssq-chat-bg 대화 바탕 · --ssq-view-bg 보기 창 바탕) + 사인의 두 색(#000000 · #0095e9 — 원장님이 주신 값 · 글 안에 그대로)
   말풍선 폭: 폰 = 쓰신 분 86% · 원장님 댓글 92% · 원장님 답변 98%(긴 글이라 넉넉히 — 390 에서 답변 글 폭 319px = W-258 의 341px 의 94%) / PC(700px 부터) = 68% · 답변 76% · 모서리 18px(꼬리 쪽 4px)
   되돌리기: 이 절을 지우고 ask.js 를 백업(7_작업/백업/W-266전_20261004/)의 것으로 → W-258 모양 */
.ssq, .ssq-view { --ssq-chat-bg: #f3f4f6; --ssq-view-bg: rgba(13, 22, 38, .94); }
/* 원장님 사인 한 줄(글 안에 끼운 것은 그 줄 그대로) */
.ss-signp { margin: 10px 0 0; font-size: 1.125rem; line-height: 1.4; }
.ss-sign { white-space: nowrap; }
/* (W-308 · 원장님 10/6 「빈칸 여러 개: 쓰신 그대로」) 원장님 답변 · 병원 댓글에서 서버(inc/ask-talk.php ssg_ask_dr_ws)가 감싼 빈칸만 쓴 수대로 — 이어진 빈칸 · 탭 · 줄 첫머리 빈칸. 말풍선 전체가 아니라 이 조각만이라 줄바꿈은 전과 같음(두 배 안 됨) · 줄 끝에서는 접힘(옆 넘침 없음) */
.ssq-ws { white-space: pre-wrap; }
/* ② 사진 · 영상 = 작은 썸네일 한 줄(폰 4칸 · PC 6칸 · 정사각) · 넘치면 마지막 칸에 「+N」 */
.ssq-thread .ssq-tiles--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; max-width: 420px; }
.ssq-tiles--row > .ssq-tile { aspect-ratio: 1 / 1; min-height: 0; border-radius: 12px; }
.ssq-tiles--row > .ssq-tile.is-more { display: none; }
.ssq-tiles--row.is-all > .ssq-tile.is-more { display: block; }
.ssq-tiles--row.is-all > .ssq-tile--dl.is-more { display: grid; }
.ssq-tiles .ssq-tile__more { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(13, 22, 38, .6); color: #fff; font-size: 1.25rem; font-weight: 800; pointer-events: none; }
.ssq-tiles--row .ssq-tile__play { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.ssq-tiles--row .ssq-tile__play svg { width: 20px; height: 20px; }
.ssq-tiles--row .ssq-tile__len { right: 4px; bottom: 4px; padding: 0 6px; line-height: 1.35; }
.ssq-tiles--row .ssq-tile--dl span { line-height: 1.3; }
.ssq-tiles--row > .ssq-tile.is-open { margin: 2px 0; }
@media (min-width: 700px) { .ssq-thread .ssq-tiles--row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 560px; } }
/* ③ 대화 바탕 — 카드 폭 가득(옆 여백까지) · 아주 연한 회색 */
.ssq-thread .ssq-talk { grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.ssq-thread .ssq-chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; margin: 2px -12px 0; padding: 14px 8px; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); background: var(--ssq-chat-bg); }
.ssq-chat .ssq-talk__list { grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.ssq-day { justify-self: center; margin: 2px 0; text-align: center; }
.ssq-day span { display: inline-block; padding: 1px 12px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: 1rem; line-height: 1.5; font-weight: 700; color: var(--ink-soft); }
/* 원장님 답변 = 왼쪽 말풍선(흰 바탕 · 연한 테두리 · 그림자 · 꼬리 모서리 왼쪽 아래) · 위에 작은 이름 줄(남색은 이름의 작은 강조로) */
.ssq-thread .ssq-chat .ssq-ans { position: relative; justify-self: start; min-width: 0; max-width: 98%; margin: 0; }
.ssq-chat .ssq-ans__h { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0 0 4px 4px; padding: 0; background: none; color: var(--ink-soft); }
.ssq-chat .ssq-ans__h b { font-size: 1rem; line-height: 1.5; font-weight: 800; color: var(--navy); }
.ssq-thread .ssq-chat .ssq-ans .ssq-ans__h .ssq-bub__w { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--ink-soft); }
.ssq-chat .ssq-ans__b { padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 1px 3px rgba(13, 22, 38, .08); }
.ssq-chat .ssq-ans__b .ssq-bub__h > p:last-child, .ssq-chat .ssq-bub__in .ssq-bub__h > p:last-child { margin-bottom: 0; }
.ssq-chat .ssq-ans:focus-visible .ssq-ans__b { outline: 3px solid var(--copper); outline-offset: 2px; }
.ssq-ans__f { display: grid; gap: 8px; justify-items: start; min-width: 0; margin: -4px 0 0 4px; }
.ssq-thread .ssq-ans__f .dx-note2 { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.ssq-ans__f .ssq-post__tel .dx-b { min-height: 48px; background: #fff; }
/* 오간 댓글 — 쓰신 분 = 오른쪽(지금 .ssq-bub--me 의 색 계열 · 글자 어둡게) · 원장님 = 왼쪽 · 시각은 풍선 아래(위) 작게 */
.ssq-thread .ssq-bub--c { position: relative; display: grid; gap: 4px; min-width: 0; max-width: 86%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 1.0625rem; line-height: 1.7; }
.ssq-thread .ssq-bub--c.ssq-bub--me { justify-self: end; justify-items: end; border: 0; background: none; box-shadow: none; }
.ssq-thread .ssq-bub--c.ssq-bub--dr { justify-self: start; justify-items: start; max-width: 92%; border: 0; background: none; box-shadow: none; }
.ssq-bub__in { min-width: 0; max-width: 100%; padding: 10px 14px; overflow-wrap: anywhere; }
.ssq-bub__in > :first-child, .ssq-bub__m > :first-child { margin-top: 0; }
.ssq-bub__m > :last-child { margin-bottom: 0; }
.ssq-bub--me > .ssq-bub__in { border: 1.5px solid var(--line); border-radius: 18px 18px 4px 18px; background: var(--warm); color: var(--ink); }
.ssq-bub--dr > .ssq-bub__in { border: 1.5px solid var(--line); border-radius: 18px 18px 18px 4px; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(13, 22, 38, .08); }
.ssq-thread .ssq-bub--c .ssq-bub__w { margin: 0 4px; font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--ink-soft); }
.ssq-chat .ssq-bub__who { display: inline; margin: 0 4px 0 0; padding: 0; border: 0; border-radius: 0; background: none; font-weight: 800; color: var(--navy); }
.ssq-chat .ssq-bub--dr .ssq-bub__who { border: 0; background: none; color: var(--navy); }
.ssq-chat .ssq-talk__d { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 2px; margin: 0; }
.ssq-chat .ssq-talk__q { flex: 1 0 100%; text-align: left; }
/* 답을 기다리는 중 = 왼쪽 연한 말풍선 꼴 한 줄 */
.ssq-thread .ssq-chat .ssq-thread__state { justify-self: start; max-width: 92%; padding: 10px 14px; border: 1.5px dashed var(--line); border-radius: 18px 18px 18px 4px; background: #fff; color: var(--ink-soft); font-size: 1.0625rem; font-weight: 700; }
.ssq-chat .ssq-wsim { min-width: 0; }
/* ④ 입력 줄 — 둥근 입력칸 한 줄(5줄까지 자람 — ask.js) · 왼쪽 사진 넣기 아이콘 · 오른쪽 【보내기】 · 오류 · 넣은 사진 · 올리기 진행은 줄 위 · 한도 안내는 줄 아래 · 🔴 고정(fixed · sticky)하지 않음 */
.ssq-thread .ssq-cw { display: block; margin: 0; }
.ssq-thread .ssq-cw > * { margin: 0 0 8px; }
.ssq-thread .ssq-cw > .ssq-cw__row { margin: 0; }
.ssq-thread .ssq-cw > .ssq-photo__fine { margin: 8px 0 0; }   /* 한도 안내는 입력 줄 아래(들어설 때 보이는 글 — 위에 두면 입력 줄이 밀려 누름이 빗나감) */
.ssq-thread .ssq-cw__thumbs:empty, .ssq-thread .ssq-cw__pm:empty, .ssq-thread .ssq-cw__m:empty, .ssq-thread .ssq-cw__e:empty { display: none; }
.ssq-thread .ssq-cw__row { display: flex; align-items: flex-end; gap: 8px; }
.ssq-thread .ssq-cw__row .ssq-cw__pick { position: relative; flex: none; width: 48px; min-width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0; gap: 0; border-width: 1.5px; border-radius: 50%; }
.ssq-thread .ssq-cw__row .ssq-cw__pick svg { width: 24px; height: 24px; }
.ssq-thread .ssq-cw__t { flex: 1 1 0; width: auto; min-width: 0; min-height: 48px; max-height: none; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 24px; background: #fff; font-size: 1.0625rem; line-height: 1.5; resize: none; overflow-y: auto; }
.ssq-thread .ssq-cw__t:focus { border-color: var(--navy); }
.ssq-thread .ssq-cw__row .ssq-cw__go { flex: none; min-height: 48px; margin: 0; padding: 0 18px; border-radius: 999px; font-size: 1.0625rem; white-space: nowrap; }
.ssq-thread .ssq-cw__go, .ssq-thread .ssq-cw__t { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 380px) { .ssq-thread .ssq-cw__row { display: flex; } .ssq-thread .ssq-cw__row .ssq-cw__go { padding: 0 14px; } }
@media (min-width: 700px) {
  .ssq-thread .ssq-chat { padding: 18px 16px; }
  .ssq-thread .ssq-bub--c, .ssq-thread .ssq-bub--c.ssq-bub--dr, .ssq-thread .ssq-chat .ssq-thread__state { max-width: 68%; }
  .ssq-thread .ssq-chat .ssq-ans, .ssq-ans__f { max-width: 76%; }
}
/* PC 크게 보기 창(마우스에서만 뜸 — ask.js viewOpen) · 휠 확대 · 끌어 옮기기 · Esc */
.ssq-view { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100000; background: var(--ssq-view-bg); color: #fff; font-family: var(--font, inherit); }
.ssq-view [hidden] { display: none !important; }
.ssq-view__stage { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; place-items: center; overflow: hidden; cursor: zoom-out; }
.ssq-view__img { display: block; width: auto; height: auto; max-width: calc(100vw - 160px); max-height: calc(100vh - 120px); transform-origin: 50% 50%; cursor: zoom-in; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.ssq-view__stage.is-zoom .ssq-view__img { cursor: grab; }
.ssq-view__stage.is-drag, .ssq-view__stage.is-drag .ssq-view__img { cursor: grabbing; }
.ssq-view__vid { display: block; max-width: calc(100vw - 160px); max-height: calc(100vh - 150px); background: #000; cursor: auto; }
.ssq-view__x, .ssq-view__nav { position: absolute; display: grid; place-items: center; margin: 0; padding: 0; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(13, 22, 38, .66); color: #fff; font: 700 1.5rem/1 var(--font, inherit); cursor: pointer; }
.ssq-view__x { right: 16px; top: 16px; width: 52px; height: 52px; border-radius: 50%; font-size: 1.25rem; }
.ssq-view__nav { top: 50%; width: 52px; height: 84px; margin-top: -42px; border-radius: 14px; font-size: 2.25rem; }
.ssq-view__prev { left: 14px; }
.ssq-view__next { right: 14px; }
.ssq-view__x:hover, .ssq-view__nav:hover { background: var(--copper); border-color: var(--copper); }
.ssq-view__x:focus-visible, .ssq-view__nav:focus-visible, .ssq-view__dl:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ssq-view__n { position: absolute; left: 50%; bottom: 14px; margin: 0; padding: 2px 16px; transform: translateX(-50%); border-radius: 999px; background: rgba(13, 22, 38, .66); font-size: 1rem; line-height: 1.6; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.ssq-view__dl { position: absolute; right: 18px; bottom: 6px; display: inline-flex; align-items: center; min-height: 48px; color: #fff; font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
/* W-266 완료 */

/* ---------- W-268: 이 기기에서 목록 지우기(글은 안 지워짐) — ② 「다른 기기에서 쓴 글 찾기 ▾」 줄 오른쪽(좁으면 바로 아래) · 글 관리 안 · 「받았습니다」 카드 맨 아래 한 줄 · 글 비밀번호로 연 직후 한 줄
   확인 상자는 화면 안(.ssq-clr__box — 고정 창 아님) · 【이 글 지우기】 상자(구릿빛 테두리 · 흰 바탕)와 달리 남색 테두리 · 연한 바탕 · 단추는 남색 채움 ---------- */
.ssq-mine .ssq-other__t { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; }
.ssq-other__t .ssq-other__b { flex: 1 1 auto; width: auto; }
.ssq-clr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin: 0; }
.ssq-clr[hidden] { display: none; }
.ssq-clr__b { min-height: 48px; margin: 0; padding: 0 4px; border: 0; border-radius: 10px; background: none; color: var(--navy); font: 700 1rem/1.3 var(--font); text-align: left; text-decoration: underline dotted; text-underline-offset: 5px; cursor: pointer; }
.ssq-clr__b:focus-visible, .ssq-clr__out:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.ssq-clr__s { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.ssq-keyl__s { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-keyl .ssq-clr { margin-top: 2px; }
.ssq-other__t .ssq-clr__b, .ssq-keyl .ssq-clr__b { padding-left: 0; }
.ssq-keyl__on { margin-top: 0; }
.ssq-done p.ssq-done__clr { margin: 6px 0 0; font-size: 1rem; line-height: 1.4; color: var(--ink-soft); }
.ssq-thnote { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-clr__box { margin: 6px 0 10px; padding: 16px; border: 2px solid var(--navy); border-radius: 16px; background: var(--paper); }
.ssq-clr__box:focus { outline: none; }
.ssq-clr__h { margin: 0 0 6px; font-size: 1.1875rem; line-height: 1.4; font-weight: 800; color: var(--navy); }
.ssq-clr__t { margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.ssq-clr__q { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-clr__l { display: grid; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.ssq-clr__l li { display: flex; flex-wrap: wrap; column-gap: 16px; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.ssq-clr__l b { margin-left: 6px; font-size: 1.25rem; font-weight: 800; color: var(--navy); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.ssq-clr__out { min-height: 48px; margin: 0; padding: 0 6px; border: 0; border-radius: 10px; background: none; color: var(--navy); font: 700 1rem/1.2 var(--font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ssq-clr__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ssq-clr__acts .dx-b { min-height: 52px; margin: 0; font-size: 1.0625rem; }
.ssq-clr__acts .dx-b[disabled] { opacity: .7; cursor: progress; }
.ssq-clr__m { margin: 10px 0 0; font-size: 1rem; font-weight: 700; color: var(--navy); }
.ssq-clr__m:empty { display: none; }
@media (hover: hover) and (pointer: fine) { .ssq-clr__b:hover, .ssq-clr__out:hover { color: var(--copper); } }
/* W-268 완료 */

/* ---------- (W-269 · 원장님 10/4 밤 「1번으로 하고, 문구를 아주 잘 써야해」) 컴퓨터 · 태블릿은 눌러야 30일 기억 — 안내 줄 셋(ⓐ 카드 맨 아래 상자 → 한 줄 · ⓑ 내 글 줄 위 한 줄 · ⓒ 연 직후 한 줄)
   있는 색 · 크기만(새 색 없음) · 글자 16px 이상 · 누르는 곳 48px 이상 · 줄 안의 단추 【다음에도 내 글 바로 보기】는 【내 글 안 보이게 하기】(.ssq-clr__b)와 같은 꼴 · 상자 안의 단추만 채운 꼴 ---------- */
.ssq-keepq[hidden], .ssq-keepn[hidden], .ssq-keepok[hidden], .ssq-kl[hidden], .ssq-kt[hidden] { display: none; }
.ssq-done .ssq-keepq { margin: 8px 0 0; padding: 10px 12px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); }
.ssq-done .ssq-keepq p.ssq-keepq__q { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.4; color: var(--navy); }
.ssq-done .ssq-keepq .ssq-keep__b { width: 100%; min-height: 48px; margin: 0; font-size: 1.0625rem; }
.ssq-done .ssq-keepq p.ssq-keepq__s { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-done p.ssq-keepok { color: var(--navy); font-weight: 700; }
.ssq-keepok:focus, .ssq-thnote:focus { outline: none; }
.ssq-keepn { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-keepn .ssq-keep__b, .ssq-thnote .ssq-keep__b { min-height: 48px; margin: 0; padding: 0 4px; border: 0; border-radius: 10px; background: none; color: var(--navy); font: 700 1rem/1.3 var(--font); text-align: left; text-decoration: underline dotted; text-underline-offset: 5px; cursor: pointer; }
.ssq-keep__b:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ssq-keepn .ssq-keep__b:hover, .ssq-thnote .ssq-keep__b:hover { color: var(--copper); } }
@media (min-width: 700px) { .ssq-done .ssq-keepq { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; } .ssq-done .ssq-keepq[hidden] { display: none; } .ssq-done .ssq-keepq p.ssq-keepq__q { margin: 0; } .ssq-done .ssq-keepq .ssq-keep__b { width: auto; justify-self: start; padding: 0 18px; } .ssq-done .ssq-keepq p.ssq-keepq__s { grid-column: 1 / -1; } }
/* W-269 완료 */

/* ---------- (W-244b · 2026-10-05) 옛 질문답변에서 옮겨 온 글 — 화면 쪽 마무리 ----------
   · .ssq-oldpw = 옛 글의 글 비밀번호 칸(여는 칸 · 지우는 칸) — 글자 비밀번호라 숫자 칸보다 넓게 · 글자 사이를 벌리지 않음(W-244 가 인라인 값으로 넣었던 것을 그대로 옮김)
   · .ssq-lk__nopin = 글 비밀번호 없는 옛 글 줄을 눌렀을 때의 전화 안내(글 + 【전화하기】) — 비밀번호 칸 자리(.ssq-lk__pin 의 안쪽 여백 · 글 꼴)를 그대로 씀 */
.ssq-lk__pin input.ssq-oldpw, .ssq-del__l input.ssq-oldpw { letter-spacing: normal; width: 12em; max-width: 100%; }
.ssq-lk__nopin { display: grid; gap: 10px; align-items: start; justify-items: start; }   /* 전화 단추는 글자 폭만큼(답변 아래 전화 단추 .ssq-ans__f 와 같은 꼴) */
.ssq-lk__nopin p { min-height: 0; color: var(--navy); line-height: 1.55; }
.ssq-lk__nopin .ssq-post__tel { margin: 0; }
.ssq-lk__nopin .ssq-post__tel .dx-b { min-height: 52px; padding: 0 22px; }
/* W-244b 완료 */

/* ---------- W-244c (2026-10-05 · 원장님 「아바타 자리 할당」) 답한 이의 아바타 자리 — 사람별 한 칸 ----------
   어디: 연 글(대화창)의 병원 쪽 말풍선 — 답변(.ssq-ans)의 이름 줄 맨 앞 · 병원 쪽 댓글(.ssq-bub--dr.ssq-bub--c)의 이름 줄 맨 앞
   누구: <span class="ssq-ava" data-who="kim | won | staff" data-ini="김 | 원 | 상"> — kim 김흥동 원장(새 글 · 답한 이 빈칸 포함) · won 원동철 원장 · staff 상담실(직원)
        이름 글자 · 한 글자는 서버 한 곳(inc/sign.php ssg_dr_who_list)에서 옴
   지금: 사진 없음 — 점선 동그라미 안에 한 글자만 옅게(디자인이 아니라 「여기가 자리」라는 표시 · 화면 읽기에는 읽히지 않음)
   크기: 아래 --ssq-ava 한 값(지금 28px). 이름 줄(높이 24px)의 첫 줄 앞에 얹어 두어(자리만 차지하고 줄 높이는 그대로) 말풍선 높이 · 폭이 달라지지 않음
   🔴 사진 넣는 법(나중에 · 원장님이 정하신 뒤): 아래 변수 한 줄에 그림 주소를 넣음 — 예) --ssq-ava-kim: url("../img/ava-kim.jpg");
        · 원장님 얼굴 사진은 --ssq-ava-kim 에만. --ssq-ava-won · --ssq-ava-staff 에는 원장님 얼굴을 넣지 않음(원장님 2026-10-05) — 자리가 사람별로 나뉘어 있어 kim 의 사진이 다른 자리에 들어가지 않음
        · 사진이 들어간 자리는 사진이 한 글자를 덮음. 점선 테두리를 없애려면 그 사람의 줄에 border-style: solid 를 더함
   되돌리기: 이 절을 지우고 ask.js 를 백업(7_작업/백업/W-244c전_20261005/)의 것으로 */
.ssq, .ssq-view { --ssq-ava: 28px; --ssq-ava-kim: none; --ssq-ava-won: none; --ssq-ava-staff: none; }
.ssq-ava { position: relative; display: inline-block; flex: none; box-sizing: border-box; width: var(--ssq-ava, 28px); height: var(--ssq-ava, 28px); border: 1.5px dashed var(--ink-soft); border-radius: 50%; background: #fff; overflow: hidden; vertical-align: middle; }
.ssq-ava::before { content: attr(data-ini); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 100%; height: 100%; font-size: 1rem; line-height: 1; font-weight: 800; color: var(--ink-soft); }
.ssq-ava::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: none center / cover no-repeat; }
.ssq-ava[data-who="kim"]::after { background-image: var(--ssq-ava-kim, none); }
.ssq-ava[data-who="won"]::after { background-image: var(--ssq-ava-won, none); }
.ssq-ava[data-who="staff"]::after { background-image: var(--ssq-ava-staff, none); }
/* 이름 줄의 첫 줄 앞에 얹음 — 자리는 흐름 밖(absolute)이라 줄 높이를 늘리지 않고, 이름만 자리 폭만큼 들여 씀 · 말풍선의 왼쪽 끝에 맞춤(이름 줄의 왼쪽 여백 4px 만큼 왼쪽으로) */
.ssq-chat .ssq-ans__h > .ssq-ava, .ssq-chat .ssq-bub--dr > .ssq-bub__w > .ssq-ava { position: absolute; left: -4px; top: calc((1.5rem - var(--ssq-ava, 28px)) / 2); }
.ssq-chat .ssq-ans__h > .ssq-ava + b { margin-left: calc(var(--ssq-ava, 28px) + 2px); }
.ssq-chat .ssq-bub--dr > .ssq-bub__w { position: relative; padding-left: calc(var(--ssq-ava, 28px) + 2px); }
/* W-244c 완료 */

/* ==========================================================================
   (W-244d · 2026-10-05) 관리자(병원 사람)로 연 글 — 띠 한 줄 · 관리자 입력 칸 · 목록 줄의 「관리자로 열기」
   서버가 관리자에게만 주는 값(SSQ.adm · 응답의 admin)이 있을 때만 그려짐 — 손님 화면에는 이 줄들이 닿는 요소가 없음. 있는 색 · 크기만 씀
   ========================================================================== */
.ssq-adm__bar { margin: 10px 0 0; padding: 8px 12px; border: 1.5px dashed var(--copper); border-radius: 12px; background: #fff; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.ssq-adm__bar b { color: var(--copper); }
.ssq-lk__w em.ssq-lk__adm { display: inline-block; margin-left: 4px; padding: 0 8px; border: 1.5px dashed var(--copper); border-radius: 999px; font-size: 1rem; line-height: 1.4; font-style: normal; font-weight: 700; color: var(--copper); white-space: nowrap; }
.ssq-talk--adm .ssq-chat.is-empty { display: none; }
.ssq-aw { margin: 12px 0 0; padding: 14px; border: 1.5px solid var(--navy); border-radius: 14px; background: #fff; }
.ssq-aw__h { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.ssq-aw__t { display: block; width: 100%; min-height: 168px; margin: 0; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.6; resize: vertical; box-sizing: border-box; }
.ssq-aw__t:focus { border-color: var(--navy); outline: none; }
.ssq-aw__t::placeholder { color: var(--ink-soft); opacity: .75; }
.ssq-aw.is-miss .ssq-aw__t { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(143,82,24,.18); }
.ssq-aw__s, .ssq-aw__f, .ssq-aw__n { margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-aw__e { margin: 6px 0 0; font-size: 1rem; font-weight: 700; color: var(--copper); }
.ssq-aw__e:empty, .ssq-aw__m:empty { display: none; }
.ssq-aw__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.ssq-aw__row .ssq-aw__go { min-height: 48px; margin: 0; padding: 0 22px; font-size: 1.0625rem; white-space: nowrap; }
.ssq-aw__row .ssq-aw__n { margin: 0; }
.ssq-aw__m { margin: 8px 0 0; font-size: 1.0625rem; font-weight: 700; color: var(--navy); }
.ssq-aw__m:focus { outline: none; }
.ssq-aw__f a { display: inline-block; min-height: 48px; line-height: 48px; color: var(--navy); font-weight: 700; text-decoration: underline dotted; text-underline-offset: 5px; }
.ssq-aw__go, .ssq-aw__t { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* W-244d 완료 */

/* (감독 2026-10-05 · 원장님 ①) 목록 줄 둘째 줄 맨 앞의 글 번호 — 이름·날짜와 같은 옅은 색 · 숫자 폭 고정(줄마다 자리 맞음) · 조금만 또렷하게. 제목은 그대로 */
.ssq-lk__no { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--ink-soft); }

/* (감독 2026-10-05 · 원장님 「글 번호를 넣어도 폰 가독성이 떨어지지 않게」) 폰(≤480px)에서는 딱지가 둘째 행 왼쪽에 내려가 오른쪽이 비므로,
   사진·영상 아이콘을 그 빈 자리(둘째 행 오른쪽)로 보냄 → 「번호 · 이름 · 날짜」 줄이 아이콘 때문에 다음 줄로 밀리지 않고 줄 높이도 그대로.
   PC(>480px)는 전처럼 아이콘이 날짜 옆에 붙음. 공개된 줄(.ssq-lk__m--pub · 가린 사진 수)은 글이 길어 제자리에 둠 */
@media (max-width: 480px) {
  .ssq-locks .ssq-lk__b { position: relative; }
  .ssq-locks .ssq-lk__b .ssq-lk__m:not(.ssq-lk__m--pub) { position: absolute; right: 14px; bottom: 11px; margin-left: 0; }
}

/* ---------- W-278 (2026-10-05 · 원장님 「관리자인 내가 보는 창에서는 왼쪽은 환자가 보내는 메시지, 오른쪽은 내가 보내는 쪽」) 관리자로 연 손님 화면 — 대화창 좌우를 병원 기준으로 ----------
   언제: 「관리자로 열람 중」일 때만 — ask.js 가 관리자로 연 글(p.admin)에만 그리는 틀 .ssq-talk--adm 안에서만 닿음(손님 · 비밀번호로 연 화면에는 이 class 가 없어 한 픽셀도 달라지지 않음)
   무엇: 병원 쪽(답변 .ssq-ans · 병원 댓글 .ssq-bub--dr — 직원 · 원동철 원장 답 포함) = 오른쪽 · 꼬리 오른쪽 아래 / 환자 댓글(.ssq-bub--me) = 왼쪽 · 꼬리 왼쪽 아래
        이름 줄 · 프로필 동그라미 · 시각 줄 · 답변 아래 안내 · 입력 칸의 단추도 같은 쪽으로. 색 · 폭 · HTML 차례는 그대로(CSS 만) · 날짜 띠는 가운데 그대로 · 관리 화면(inc/ask-admin.php)과 같은 좌우
   되돌리기: 이 절을 지우고 ask.js 의 ADM_BAR 를 백업(7_작업/스크래치/W-278/백업/)의 것으로 */
.ssq-thread .ssq-talk--adm .ssq-chat .ssq-ans { justify-self: end; }
.ssq-talk--adm .ssq-chat .ssq-ans__h { flex-direction: row-reverse; margin: 0 4px 4px 0; }
.ssq-talk--adm .ssq-chat .ssq-ans__b { border-radius: 18px 18px 4px 18px; }
.ssq-talk--adm .ssq-ans__f { justify-self: end; justify-items: end; margin: -4px 4px 0 0; }
.ssq-thread .ssq-talk--adm .ssq-bub--c.ssq-bub--dr { justify-self: end; justify-items: end; }
.ssq-thread .ssq-talk--adm .ssq-bub--c.ssq-bub--me { justify-self: start; justify-items: start; }
.ssq-talk--adm .ssq-bub--dr > .ssq-bub__in { border-radius: 18px 18px 4px 18px; }
.ssq-talk--adm .ssq-bub--me > .ssq-bub__in { border-radius: 18px 18px 18px 4px; }
.ssq-talk--adm .ssq-chat .ssq-talk__d { justify-content: flex-start; }
/* 프로필 동그라미 — 말풍선의 오른쪽 끝에 · 이름은 그 왼쪽 · 시각은 이름의 왼쪽 */
.ssq-talk--adm .ssq-chat .ssq-ans__h > .ssq-ava, .ssq-talk--adm .ssq-chat .ssq-bub--dr > .ssq-bub__w > .ssq-ava { left: auto; right: -4px; }
.ssq-talk--adm .ssq-chat .ssq-ans__h > .ssq-ava + b { margin-left: 0; margin-right: calc(var(--ssq-ava, 28px) + 2px); }
.ssq-talk--adm .ssq-chat .ssq-bub--dr > .ssq-bub__w { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding-left: 0; padding-right: calc(var(--ssq-ava, 28px) + 2px); }
.ssq-talk--adm .ssq-chat .ssq-bub--dr .ssq-bub__who { margin: 0; }
/* 입력 칸(답변 쓰기 · 댓글로 이어 답하기) — 단추를 오른쪽(내 쪽)으로 */
.ssq-talk--adm .ssq-aw__row { flex-direction: row-reverse; }
/* W-278 완료 */

/* ---------- W-329 (2026-10-07 · 답변 편집기를 게시판에 넣기 ③ 손님 화면 — 설계 W-287 2-3 · 덧붙임 30 ~ 34) ----------
   ① 글 사이 사진(ask.js inlinePics) — 하나 = .ssq-tiles--one(제 크기 · 높이 한도 420px) · 둘 이상 = .ssq-tiles--in(자르지 않음 · 한 줄의 사진은 높이가 같고 폭은 비율대로)
      값은 편집기 미리 보기(ssg-editor.css .sse-pics · --rh 110 · --rm 170 · 두 장이면 260 · 사이 6px · 둥근 12px)와 같음 — 한쪽을 고치면 다른 쪽도(관리 화면 inc/ask-admin.php 도 이 값을 따름)
      --ar(가로 ÷ 세로)는 서버가 준 w · h 로 타일의 style 에 적힘(모르면 1 — 그때도 잘리지 않음: contain)
   ② 관리자 입력 칸에 띄운 편집기(.ssq-aw--ed) — 댓글 칸은 댓글 말풍선 글씨(17px / 1.7) · 폰 쓰기 전용 화면 동안 관리 띠 · 아래 고정 띠 숨김
   되돌리기: 이 절과 위의 「(W-329)」 두 곳(ol · mark)을 백업(7_작업/스크래치/W-329/백업/ask.css)의 것으로 */
.ssq-thread .ssq-tiles--one, .ssq-thread .ssq-tiles--in { display: block; grid-template-columns: none; gap: 0; max-width: none; margin: 0 0 14px; }
.ssq-thread .ssq-tiles--in { --rh: 110px; --rm: 170px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.ssq-thread .ssq-tiles--in[data-n="2"] { --rm: 260px; }
.ssq-bub__h > .ssq-tiles--one:last-child, .ssq-bub__h > .ssq-tiles--in:last-child { margin-bottom: 0; }
.ssq-tiles--one > .ssq-tile, .ssq-tiles--in > .ssq-tile { min-width: 44px; min-height: 44px; aspect-ratio: auto; border: 1px solid var(--line); border-radius: 12px; background: #eef0f3; box-sizing: border-box; }
.ssq-tiles--one > .ssq-tile { display: inline-block; max-width: 100%; vertical-align: top; line-height: 0; }
.ssq-tiles--one > .ssq-tile > .ssq-tile__b { width: auto; height: auto; min-width: 44px; min-height: 44px; max-width: 100%; line-height: 0; }
.ssq-tiles--one > .ssq-tile > .ssq-tile__b img { width: auto; height: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
/* 크기를 아는 그림(서버가 준 w · h → ask.js 가 --w · --ar 를 적음) — 받기 전에도 제 자리가 잡혀 있음(글이 밀리지 않음) · 작은 그림은 키우지 않음(scale-down — 44px 칸 가운데에) */
.ssq-tiles--one > .ssq-tile[style*="--w:"] { width: min(100%, var(--w)); aspect-ratio: var(--ar, 1); }
.ssq-tiles--one > .ssq-tile[style*="--w:"] > .ssq-tile__b { width: 100%; height: 100%; }
.ssq-tiles--one > .ssq-tile[style*="--w:"] > .ssq-tile__b img { width: 100%; height: 100%; max-height: none; object-fit: scale-down; }
.ssq-tiles--one > .ssq-tile--vid:not([data-poster]), .ssq-tiles--one > .ssq-tile--dl { width: min(100%, 320px); aspect-ratio: 4 / 3; }
.ssq-tiles--one > .ssq-tile--vid:not([data-poster]) { background: var(--film); }
.ssq-tiles--one > .ssq-tile--vid:not([data-poster]) > .ssq-tile__b { width: 100%; height: 100%; }
.ssq-tiles--in > .ssq-tile { flex: var(--ar, 1) 1 calc(var(--ar, 1) * var(--rh)); aspect-ratio: var(--ar, 1); max-width: min(100%, calc(var(--ar, 1) * var(--rm))); }
.ssq-tiles--in > .ssq-tile > .ssq-tile__b img { object-fit: contain; }
.ssq-tiles--in > .ssq-tile--vid:not([data-poster]) { background: var(--film); }
.ssq-tiles--one > .ssq-tile.is-open, .ssq-tiles--in > .ssq-tile.is-open { display: block; flex: 1 0 100%; width: 100%; max-width: 100%; aspect-ratio: auto; border: 0; background: none; line-height: inherit; }
.ssq-tiles--one .ssq-tile__play, .ssq-tiles--in .ssq-tile__play { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.ssq-tiles--one .ssq-tile__play svg, .ssq-tiles--in .ssq-tile__play svg { width: 28px; height: 28px; }
.ssq-tiles--one .ssq-tile__len, .ssq-tiles--in .ssq-tile__len { right: 4px; bottom: 4px; padding: 0 6px; line-height: 1.35; }
/* 사진 묶음이 든 병원 쪽 말풍선은 폭을 다 씀(나란히 놓이는 칸 수가 폭으로 정해지므로 — 편집기 미리 보기와 같게) · 관리자로 연 화면(.ssq-talk--adm — 오른쪽 말풍선)도 같음 */
.ssq-thread .ssq-chat .ssq-ans:has(.ssq-tiles--in), .ssq-thread .ssq-chat .ssq-bub--c.ssq-bub--dr:has(.ssq-tiles--in) { width: 100%; }
.ssq-thread .ssq-chat .ssq-bub--c.ssq-bub--dr:has(.ssq-tiles--in) > .ssq-bub__in { width: 100%; box-sizing: border-box; }
/* 사인 후에 오는 「따로 붙인 사진」 · 문서(글 → 사인 → 따로 붙인 사진 → 문서) */
.ssq-thread .ss-signp + .ssq-tiles--row { margin-top: 12px; }
/* 말풍선 안의 작은 썸네일 줄 — PC 6칸이 좁은 말풍선(화면 폭 1024 안팎 · 칸 하나 40px)에서 44px 아래로 내려가지 않게: 6칸이 못 들어가면 칸 수를 줄여 다음 줄로(넓으면 전과 같은 6칸) */
@media (min-width: 700px) { .ssq-thread .ssq-chat .ssq-ans__b .ssq-tiles--row, .ssq-thread .ssq-chat .ssq-bub__in .ssq-tiles--row { grid-template-columns: repeat(auto-fill, minmax(max(44px, calc((100% - 40px) / 6)), 1fr)); } }
/* 관리자로 연 글 — 【답변 고치기】(답변 말풍선 바로 아래 · 내 쪽 = 오른쪽) */
.ssq-ans__fix { justify-self: end; margin: -4px 4px 0 0; }
.ssq-ans__fix[hidden] { display: none; }
.ssq-thread .ssq-ansfix { min-height: 44px; margin: 0; padding: 0 14px; gap: 6px; background: #fff; font-size: 1rem; white-space: nowrap; }
/* 관리자 입력 칸 = 편집기 — 편집기가 제 테두리를 가지므로 바깥 틀은 걷음 */
.ssq-aw--ed { padding: 0; border: 0; border-radius: 0; background: none; }
.ssq-aw__hr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 44px; margin: 0 0 6px; }
.ssq-aw__hr .ssq-aw__h { margin: 0; }
.ssq-aw__hr .ssq-aw__back { min-height: 44px; margin: 0; padding: 0 14px; background: #fff; font-size: 1rem; white-space: nowrap; }
.ssq-aw__hr .ssq-aw__back[hidden] { display: none; }
.ssq-aw__box { min-width: 0; }
.ssq-aw--ed .sse { scroll-margin-top: calc(var(--sse-top, 0px) + 8px); }
/* 댓글 칸(댓글로 이어 답하기)에 띄운 편집기 = 댓글 말풍선 글씨(.ssq-bub--c 17px / 1.7 — 덧붙임 33) · 답변 쓰기 · 고치기는 편집기 값(답변 말풍선 18px / 1.75) 그대로 */
.ssq-aw--ed[data-ed="new"] .sse-ed, .ssq-aw--ed[data-ed="new"] .sse-view { font-size: 17px; line-height: 1.7; }
/* 폰 쓰기 전용 화면(편집기 .sse.is-full — 화면을 덮음 · z 99990) 동안: 그 위에 뜨는 워드프레스 관리 띠(z 99999 · 32 / 46px)와 아래 고정 띠 · 옆 단추를 숨김(ask.js edFull 이 html 에 표시) */
html.ssq-edfull #wpadminbar, html.ssq-edfull .ss-bar, html.ssq-edfull .dx-rail { display: none !important; }
/* W-329 완료 */

/* ==========================================================================
   (W-372 · 원장님 2026-10-07 「질문자가 그 글을 보고 질문했다는 것을 알 수 있도록」) 어느 글을 보고 물었는지
   · .ssq-from--w   글 칸 맨 위 한 줄 「이 글을 보고 묻습니다: 제목 · 글 보기」 + 【×】(누르는 자리 44px)
   · .ssq-from--tag 연 글의 머리 아래 꼬리표(손님 화면 · 원장님이 연 화면 함께)
   ========================================================================== */
.ssq-from { font-size: 1rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.ssq-from[hidden] { display: none; }
.ssq-from__l { color: var(--ink-soft); }
.ssq-from__t { color: var(--navy); font-weight: 800; }
.ssq-from__a { display: inline-block; margin-left: 0; padding: 0 2px 0 0; color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ssq-from--w { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 4px 4px 4px 14px; border: 2px solid var(--line); border-left: 6px solid var(--gold); border-radius: 14px; background: #fff; }
.ssq-from--w .ssq-from__p { flex: 1 1 auto; min-width: 0; margin: 0; padding: 6px 0; }
.ssq-from--w.is-off { padding: 10px 14px; border-left-width: 2px; }
.ssq-from__x { flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.ssq-from__x:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .ssq-from__x:hover { background: #f1efe9; color: var(--navy); } }
.ssq-from--tag { margin: 8px 0 0; padding: 6px 12px; border-left: 6px solid var(--gold); border-radius: 0 10px 10px 0; background: #faf7f0; }
/* W-372 완료 */

/* ---------- (W-424) 「받았습니다」 카드의 상자(#ssq-keepq) 안 【내 글 안 보이게 하기】 — 넓은 화면(두 칸 틀)에서 확인 상자가 한 칸에 끼지 않고 상자 폭을 다 쓰게 · 새 색 · 새 크기 없음 ---------- */
.ssq-done .ssq-keepq .ssq-clr__box { grid-column: 1 / -1; }
/* 한 줄 「내 휴대폰이면 누르세요 · 함께 쓰는 기기면 누르지 마세요」(작은 글과 같은 크기 · 색) · 둘째 길(남과 함께 쓰는 …인가요? 【내 글 안 보이게 하기】)은 좁은 화면에서 따로 한 줄 · 넓은 화면에서는 작은 글에 이어 붙임(PC 한 화면 값을 지키려고) */
.ssq-done .ssq-keepq p.ssq-keepq__w { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ssq-keepq__c { display: block; margin: 4px 0 0; }
@media (min-width: 700px) {
  .ssq-done .ssq-keepq p.ssq-keepq__q { grid-column: 1; grid-row: 1; }
  .ssq-done .ssq-keepq p.ssq-keepq__w { grid-column: 1; grid-row: 2; margin: 0; }
  .ssq-done .ssq-keepq .ssq-keep__b { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .ssq-keepq__c { display: inline; margin: 0; }
}
/* W-424 완료 */