/* 우물에 물어보기 (/palja/ask/) */
.as { display: flex; flex-direction: column; gap: 16px; }
.as-form { display: flex; flex-direction: column; gap: 14px; }

/* 우물 그림 + 물결 */
.as-well { display: flex; justify-content: center; margin: 0 0 4px; }
.as-well-svg { display: block; width: 100%; max-width: 260px; height: auto; overflow: visible; }
.as-rip { transform-box: fill-box; transform-origin: center; opacity: 0; animation: as-ripple 4.8s ease-out infinite; }
.as-rip2 { animation-delay: 1.6s; }
.as-rip3 { animation-delay: 3.2s; }
.as-stone { opacity: 0; }
@keyframes as-ripple { 0% { transform: scale(.7); opacity: .65; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes as-drop { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(74px); } 100% { opacity: 0; transform: translateY(80px) scale(.6); } }
@keyframes as-splash { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.as-well.is-drop .as-stone { animation: as-drop .62s cubic-bezier(.5, 0, .9, .6) forwards; }
.as-well.is-drop .as-rip { animation: as-splash .7s ease-out .55s both; }
.as-well.is-drop .as-rip2 { animation-delay: .72s; }
.as-well.is-drop .as-rip3 { animation-delay: .9s; }

/* 주제 칩 */
.as-chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.as-legend { display: block; margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 700; color: var(--pm-sub-text); }
.as-legend small { font-weight: 400; }
.as-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.as-chip { position: relative; display: block; }
.as-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.as-chip span { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: var(--pm-tap); min-height: var(--pm-tap); padding: 0 16px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-pill); background: var(--pm-cream); color: var(--pm-ink); font-size: 15.5px; font-weight: 700; transition: background .15s, border-color .15s; }
.as-chip input:checked + span { background: var(--pm-soft2); border-color: var(--pm-ink); color: var(--pm-ink); font-weight: 700; box-shadow: var(--pm-shadow-sm); }
.as-chip input:focus-visible + span { outline: 3px solid var(--pm-focus); outline-offset: 2px; }

.as-input { box-sizing: border-box; display: block; width: 100%; min-height: var(--pm-tap); padding: 10px 14px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-input); background: var(--pm-cream); color: var(--pm-ink); font: 16px/1.5 var(--pm-font-body); }
.as-input:focus { border-color: var(--pm-water); box-shadow: 0 0 0 3px var(--pm-focus-ring); outline: 3px solid var(--pm-focus); outline-offset: 2px; }
.as-count { margin: 4px 0 0; text-align: right; }
.as-left { margin: 0; }
.as-ask button[disabled] { opacity: .55; cursor: not-allowed; }
.as-ask button.is-busy { opacity: .7; cursor: progress; }

/* 답 */
.as-res { scroll-margin-top: 80px; animation: as-in .5s ease-out both; }
.as-res:focus { outline: none; }
@keyframes as-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.as-open { margin: 0 0 8px; color: var(--pm-sub-text); font-size: 15px; line-height: 1.7; }
.as-q { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--pm-soft); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.as-body { display: flex; gap: 16px; align-items: flex-start; }
.as-card { flex: 0 0 132px; margin: 0; text-align: center; }
.as-card img { display: block; width: 132px; height: auto; aspect-ratio: 512 / 880; border-radius: 10px; border: 2px solid var(--pm-ink); background: var(--pm-soft); box-shadow: var(--pm-shadow-sm); }
.as-card.is-rev img { transform: rotate(180deg); }
.as-card-ph { display: block; width: 132px; aspect-ratio: 512 / 880; border: 2px dashed var(--pm-line); border-radius: 10px; background: var(--pm-soft); }
.as-card figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.as-card figcaption small { color: var(--pm-sub-text); }
.as-text { flex: 1; min-width: 0; }
.as-text p { margin: 0 0 10px; font-size: 16px; line-height: 1.8; }
.as-text p:last-child { margin-bottom: 0; }
.as-small { margin: 16px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--pm-soft2); }
.as-small b { display: block; font-size: 14px; color: var(--pm-sub-text); }
.as-small p { margin: 4px 0 0; font-size: 16px; line-height: 1.7; }
.as-refuse { margin: 0 0 12px; font-size: 16px; line-height: 1.8; }
.as-foot { margin: 12px 0 0; }

/* 기록 */
.as-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.as-item { border: 2px solid var(--pm-line); border-radius: 16px; background: var(--pm-cream); }
.as-item summary { display: flex; flex-direction: column; gap: 2px; min-height: var(--pm-tap); padding: 8px 14px; cursor: pointer; }
.as-item summary:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; border-radius: 14px; }
.as-item-d { font-size: 13px; color: var(--pm-sub-text); }
.as-item-q { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.as-item-b { padding: 0 14px 12px; }
.as-item-b p { margin: 0 0 8px; font-size: 15px; line-height: 1.75; }
.as-item-s b { color: var(--pm-sub-text); }
/* 기록 한 줄 지우기(2단계: 열기 -> 확인). 위 .as-item summary 규칙을 덮는다 */
.as-del { margin: 10px 0 0; }
.as-item .as-del-sum { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; min-height: var(--pm-tap); padding: 8px 16px; list-style: none; cursor: pointer; }
.as-item .as-del-sum::-webkit-details-marker { display: none; }
.as-del-form { margin: 8px 0 0; }
.as-del-form .pm-help { margin: 0 0 8px; }
.as-del-go { min-height: var(--pm-tap); }
.as-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

@media (max-width: 520px) {
  .as-body { flex-direction: column; align-items: center; }
  .as-card, .as-card img, .as-card-ph { flex-basis: auto; width: 148px; }
  .as-text { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .as-rip { animation: none; opacity: .35; transform: scale(1.15); }
  .as-rip2 { transform: scale(1.5); opacity: .22; }
  .as-rip3 { transform: scale(1.9); opacity: .12; }
  .as-res { animation: none; }
  .as-chip span { transition: none; }
}
.as-rec .pm-reg-h, .as-ask .pm-reg-h { margin-bottom: 12px; }
.as-periods { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--pm-line, #d9c8b4); }
.as-period { margin: 0 0 8px; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.as-period:last-child { margin-bottom: 0; }
.as-period b { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; background: var(--pm-soft); font-size: 13px; color: var(--pm-sub-text); }
.as-from { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--pm-soft); font-size: 15px; line-height: 1.7; }