/* ===========================================================
   KingSchool — 심슨 애니메이션 스타일 테마
   노란색 + 하늘색 + 도넛 핑크, 굵은 검정 테두리, 만화체(Jua)
   =========================================================== */
:root {
  --sky: #70d1fe;
  --sky-deep: #38b6f1;
  --yellow: #ffd90f;
  --yellow-soft: #fff3ae;
  --pink: #f14e90;
  --pink-soft: #ffe1ee;
  --blue: #107dc0;
  --green: #58a832;
  --green-soft: #e3f5d5;
  --red: #e03a3e;
  --brown: #7c4f20;
  --ink: #1a1a1a;
  --paper: #fffdf5;
  --radius: 16px;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
  margin: 0;
  font-family: "Jua", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  color: var(--ink);
  line-height: 1.6;
  /* 심슨 오프닝의 하늘 + 뭉게구름 */
  background:
    radial-gradient(ellipse 320px 90px at 12% 16%, rgba(255,255,255,.9) 58%, transparent 60%),
    radial-gradient(ellipse 260px 80px at 78% 8%, rgba(255,255,255,.85) 58%, transparent 60%),
    radial-gradient(ellipse 380px 100px at 55% 32%, rgba(255,255,255,.55) 58%, transparent 60%),
    radial-gradient(ellipse 300px 90px at 20% 68%, rgba(255,255,255,.4) 58%, transparent 60%),
    radial-gradient(ellipse 340px 95px at 88% 55%, rgba(255,255,255,.45) 58%, transparent 60%),
    linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

body > div { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }

/* ---------- 헤더 ---------- */
header { position: relative; margin-bottom: 20px; text-align: center; }
.logo {
  display: block; margin: 0 auto 4px;
  width: min(430px, 82%); height: auto;
  transform: rotate(-1.5deg);
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.18));
}
.subtitle { margin: 6px 0 0; color: var(--ink); font-size: 1.02rem; }
.badge {
  font-size: 0.72rem; background: var(--paper); color: var(--blue);
  border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px;
  vertical-align: middle; box-shadow: 2px 2px 0 var(--ink);
}
.llm-status {
  position: absolute; top: 0; right: 0;
  font-size: 0.8rem; padding: 4px 12px; border-radius: 999px;
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.llm-status.on { background: var(--green-soft); color: var(--green); }
.llm-status.off { background: #fdeaea; color: var(--red); }

/* ---------- 탭 ---------- */
.tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.tabs button {
  flex: 1; padding: 12px 0; min-height: 48px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 1rem; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.tabs button:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--ink); }
.tabs button.active {
  background: var(--yellow);
  transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- 본문 카드 ---------- */
main {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 7px 7px 0 rgba(0,0,0,.8);
}

.row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.row label { white-space: nowrap; font-size: 1.02rem; }

select, textarea, input[type="number"] {
  width: 100%; padding: 10px 12px;
  border: 2px solid var(--ink); border-radius: 12px;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px; /* 모바일에서 자동 확대 방지 */
  background: #fffef8;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.06);
}
select { width: auto; flex: 1; font-family: inherit; }
.row input[type="number"] { width: 100px; }
textarea { resize: vertical; }
select:focus, textarea:focus, input:focus {
  outline: 3px solid var(--yellow); outline-offset: 1px; border-color: var(--ink);
}

.hint { margin: 0 0 12px; font-size: 0.92rem; color: var(--brown); }
.area-help {
  margin: -6px 0 14px 0;
  padding: 8px 10px;
  color: var(--brown);
  background: var(--yellow-soft);
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 0.88rem;
}
.repair-note {
  margin: -4px 0 14px;
  padding: 8px 10px;
  color: var(--blue);
  background: #e9f7ff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 0.88rem;
}
.progress-card {
  margin: -4px 0 16px;
  padding: 12px 14px;
  background: #e9f7ff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
}
.progress-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
.progress-head .dim { margin-left: auto; white-space: nowrap; }
.progress-card p {
  margin: 8px 0 0;
  color: var(--brown);
  font-size: 0.86rem;
}
.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid var(--paper);
  border-top-color: var(--blue);
  border-right-color: var(--pink);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.progress-track {
  height: 9px;
  margin-top: 10px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
}
.progress-track span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: var(--yellow);
  animation: progress-slide 1.15s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes progress-slide {
  0% { transform: translateX(-110%); }
  50% { transform: translateX(70%); }
  100% { transform: translateX(250%); }
}
.citations {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
}
.citation {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fffef8;
  color: var(--brown);
  font-size: 0.8rem;
}
.dim { color: #8a7a55; font-size: 0.85em; }

.meta { display: flex; justify-content: space-between; align-items: center; margin: 8px 2px; font-size: 0.9rem; flex-wrap: wrap; gap: 6px; }
.over { color: var(--red); }
.under { color: #c77700; }

/* ---------- 버튼 ---------- */
button.primary {
  margin-top: 12px; width: 100%; padding: 13px; min-height: 50px;
  background: var(--pink); color: #fff;
  border: 3px solid var(--ink); border-radius: 14px;
  font-family: inherit; font-size: 1.08rem; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
button.primary:not(:disabled):hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
button.primary:disabled { opacity: 0.55; cursor: not-allowed; }
button.primary.wide { width: 100%; }

.actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-top: 16px; flex-wrap: wrap;
}
.actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
.actions button {
  padding: 10px 16px; min-height: 46px;
  border: 3px solid var(--ink); border-radius: 12px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 0.95rem; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.actions button:not(:disabled):hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.actions button:disabled { opacity: 0.55; cursor: not-allowed; }
.actions button.primary { margin-top: 0; width: auto; background: var(--pink); color: #fff; }

button.mini {
  padding: 4px 12px; font-size: 0.8rem;
  border: 2px solid var(--ink); border-radius: 10px;
  background: var(--yellow); color: var(--ink);
  font-family: inherit; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
button.mini:not(:disabled):hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
button.mini:disabled { opacity: 0.55; cursor: not-allowed; }
button.mini.apply { background: var(--green); color: #fff; }

/* ---------- 스테퍼 ---------- */
.stepper { display: flex; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.stepper li {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 4px; font-size: 0.85rem; color: var(--brown);
  border: 2px solid transparent; border-radius: 12px; cursor: default;
}
.stepper li .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
  background: #eee4c3; border: 2px solid var(--ink);
  font-size: 0.8rem;
}
.stepper li.current {
  color: var(--ink); background: var(--yellow);
  border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.stepper li.current .num { background: var(--paper); }
.stepper li.done { color: var(--green); cursor: pointer; }
.stepper li.done .num { background: var(--green); color: #fff; }

/* ---------- 첨삭 제안 카드 ---------- */
.suggestions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.suggestion {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px;
  cursor: pointer; background: #fffef8; box-shadow: 3px 3px 0 rgba(0,0,0,.15);
}
.suggestion.selected { background: var(--yellow-soft); box-shadow: 3px 3px 0 var(--ink); }
.suggestion input { margin-top: 5px; accent-color: var(--pink); width: 18px; height: 18px; }
.suggestion b { font-size: 0.95rem; }
.suggestion p { margin: 2px 0 0; font-size: 0.85rem; color: var(--brown); font-family: "Malgun Gothic", sans-serif; }

/* ---------- 초안 보기 (첨삭 단계) ---------- */
.draftview {
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--yellow-soft); border: 2px solid var(--ink); border-radius: 12px;
}
.draftview summary { cursor: pointer; font-size: 0.9rem; }
.draftview p { margin: 8px 0 2px; font-size: 0.92rem; font-family: "Malgun Gothic", sans-serif; }

/* ---------- 검사 단계 ---------- */
.verdict {
  display: inline-block; margin-bottom: 14px; padding: 6px 16px;
  border: 2px solid var(--ink); border-radius: 999px;
  font-size: 0.95rem; box-shadow: 3px 3px 0 var(--ink);
}
.verdict.ok { background: var(--green); color: #fff; }
.verdict.warn { background: var(--yellow); color: var(--ink); }

.stale {
  margin-bottom: 12px; padding: 10px 14px;
  background: var(--yellow-soft); border: 2px dashed var(--ink); border-radius: 12px;
  font-size: 0.88rem; color: var(--brown);
}

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pane { display: flex; flex-direction: column; }
.pane h4 { margin: 0 0 8px; font-size: 0.95rem; }
.pane textarea { flex: 1; min-height: 180px; }
.pane .proposal { flex: 1; }
.proposal {
  min-height: 180px; padding: 12px; font-size: 0.94rem;
  background: var(--green-soft); border: 2px solid var(--ink); border-radius: 12px;
  white-space: pre-wrap; word-break: break-word;
  font-family: "Malgun Gothic", sans-serif;
}
.proposal mark { background: var(--yellow); border-radius: 3px; padding: 0 2px; }
.caret { color: var(--green); animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }

.badge-src {
  font-size: 0.72rem; background: var(--pink); color: #fff;
  border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px;
  vertical-align: middle;
}

.issues {
  margin: 12px 0; padding: 10px 14px; list-style: none;
  background: var(--pink-soft); border: 2px solid var(--ink); border-radius: 12px;
  font-size: 0.88rem;
}
.issues code { background: #ffc3d9; padding: 0 6px; border-radius: 4px; margin-left: 6px; }

.notes {
  margin-top: 14px; padding: 12px 16px;
  background: var(--yellow-soft); border: 2px solid var(--ink); border-radius: 12px;
  font-size: 0.9rem;
}
.notes h4 { margin: 0 0 6px; font-size: 0.92rem; }
.issue-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; margin: 4px 0; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer; font-size: 0.88rem;
  font-family: "Malgun Gothic", sans-serif;
}
.issue-item:hover { background: #fff9d6; }
.issue-item.selected { background: #fff; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.issue-item input { margin-top: 3px; accent-color: var(--pink); width: 17px; height: 17px; }

.loopbox {
  margin-top: 14px; padding: 14px 16px;
  background: #e2f3fd; border: 2px solid var(--ink); border-radius: 12px;
}
.loopbox h4 { margin: 0 0 10px; font-size: 0.95rem; color: var(--blue); }
.loop-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 10px; font-size: 0.82rem; flex-wrap: wrap;
}
.loop-actions button.primary {
  margin-top: 0; width: auto; padding: 10px 16px; min-height: 46px; font-size: 0.95rem;
}

/* ---------- 결과/기타 ---------- */
.result {
  margin-top: 16px; padding: 16px;
  background: #fffef8; border: 2px solid var(--ink); border-radius: 12px;
  font-size: 0.94rem; word-break: break-word;
  font-family: "Malgun Gothic", sans-serif;
  box-shadow: 4px 4px 0 rgba(0,0,0,.15);
}
.result h3 { margin: 10px 0 4px; font-size: 1.02rem; color: var(--blue); font-family: "Jua", sans-serif; }
.result h4 { margin: 8px 0 4px; font-size: 0.96rem; }
.result li { margin-left: 18px; }

.finalbox {
  padding: 14px 16px; background: #fffef8;
  border: 2px solid var(--ink); border-radius: 12px; margin-bottom: 10px;
}
.finalbox p { margin: 0 0 8px; font-size: 0.94rem; }

.error {
  color: #fff; background: var(--red);
  border: 2px solid var(--ink); border-radius: 12px;
  padding: 8px 14px; font-size: 0.9rem; margin-top: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}

footer {
  margin-top: 28px; text-align: center; font-size: 0.8rem;
  color: var(--ink);
  background: rgba(255,255,255,.65);
  border-radius: 999px; padding: 6px 16px;
}

/* ===========================================================
   모바일 최적화
   =========================================================== */
@media (max-width: 700px) {
  .compare { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body > div { padding: 14px 10px 36px; }
  .logo { width: min(300px, 88%); }
  .subtitle { font-size: 0.9rem; }
  .llm-status { position: static; display: inline-block; margin-top: 6px; }
  main { padding: 14px; box-shadow: 5px 5px 0 rgba(0,0,0,.8); }

  .tabs { gap: 8px; }
  .tabs button { font-size: 0.9rem; padding: 10px 0; }

  /* 스테퍼: 현재 단계만 라벨 표시, 나머지는 번호만 */
  .stepper { gap: 4px; }
  .stepper li { padding: 6px 2px; flex: 0 1 auto; }
  .stepper li.current { flex: 1; }
  .stepper li span:not(.num) { display: none; }
  .stepper li.current span:not(.num) { display: inline; }

  .row { gap: 8px; }
  .row select { width: 100%; flex: 1 1 100%; }
  .row input[type="number"] { width: 84px; }

  .actions { flex-direction: column-reverse; align-items: stretch; }
  .actions > div { width: 100%; }
  .actions > div button { flex: 1; }
  .actions > button { width: 100%; }

  .loop-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .loop-actions button.primary { width: 100%; }

  .meta { font-size: 0.82rem; }
  .pane textarea, .proposal { min-height: 140px; }
}

/* ---------- 로그인 / 사용자 ---------- */
.userbox { position: absolute; top: 0; left: 0; }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 4px 8px 4px 12px; box-shadow: 2px 2px 0 var(--ink);
}
.plan-badge {
  font-size: 0.7rem; border: 2px solid var(--ink); border-radius: 999px;
  padding: 1px 8px; background: var(--yellow-soft); color: var(--ink);
}
.plan-badge.paid { background: var(--pink); color: #fff; }
.quota { color: var(--brown); white-space: nowrap; }
button.mini.login { background: var(--sky); }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink);
  padding: 24px; width: min(360px, 90vw); text-align: center;
}
.modal h3 { margin: 0 0 8px; }
.modal-desc { margin: 0 0 16px; font-size: 0.9rem; color: var(--brown); }
.social {
  display: block; margin: 10px 0; padding: 12px;
  border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none; font-weight: bold; color: var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.social:not(.disabled):hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.social.kakao { background: #fee500; }
.social.naver { background: #03c75a; color: #fff; }
.social.disabled { opacity: 0.45; cursor: not-allowed; }
.modal-note { font-size: 0.78rem; color: var(--red); }
/* 모달 직계(로그인 모달처럼 단독 배치)일 때만 위 여백 — 버튼 줄에 낀 닫기는 정렬 유지 */
.modal > .close { margin-top: 8px; }

@media (max-width: 640px) {
  .userbox { position: static; margin-top: 8px; }
}

/* ---------- 내 정보 모달 / 한도 임박 배너 ---------- */
.user-chip.clickable { cursor: pointer; }
.user-chip.clickable:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

.notice {
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--yellow-soft); border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink); font-size: 0.9rem;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.profile-modal { text-align: left; max-height: 86vh; overflow-y: auto; }
.profile-modal h3 { text-align: center; }
.profile-rows { display: grid; gap: 6px; font-size: 0.9rem; }
.profile-rows > div { display: flex; justify-content: space-between; align-items: center; }
.profile-sub { margin: 16px 0 8px; font-size: 0.95rem; }
.progress {
  height: 14px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); overflow: hidden;
}
.progress-fill { height: 100%; background: var(--sky-deep); transition: width .3s; }
.usage-line { margin: 6px 0 0; font-size: 0.85rem; }
.recent { margin-top: 8px; font-size: 0.8rem; display: flex; gap: 8px; flex-wrap: wrap; }
.recent-day {
  background: var(--paper); border: 1px solid var(--ink); border-radius: 8px;
  padding: 1px 7px; white-space: nowrap;
}
.plan-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
  border: 2px solid var(--ink); border-radius: 10px; overflow: hidden;
}
.plan-table th, .plan-table td { padding: 6px 10px; border-bottom: 1px solid #e5decf; text-align: center; }
.plan-table td:first-child { text-align: left; }
.plan-table th { background: var(--yellow-soft); border-bottom: 2px solid var(--ink); }
.plan-table th.now { background: var(--sky); }
.plan-table tr:last-child td { border-bottom: none; }
.interest-box { margin: 14px 0 4px; }
.interest-on { margin: 0; text-align: center; color: var(--green); }
.profile-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; gap: 8px;
}
button.mini.danger { background: #fdeaea; color: var(--red); }

/* ---------- 플랜 카드 (프로필 모달) ---------- */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.plan-card {
  position: relative; padding: 12px 10px; text-align: center;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.plan-card.now { background: var(--yellow-soft); box-shadow: 3px 3px 0 var(--ink); }
.plan-name { font-size: 1rem; }
.plan-price { font-size: 0.85rem; color: var(--pink); }
.plan-limit { font-size: 0.8rem; color: var(--brown); }
.plan-feats { margin: 4px 0 0; padding: 0 0 0 2px; list-style: none; text-align: left; font-size: 0.72rem; color: var(--brown); }
.plan-feats li::before { content: "· "; }
.now-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 0.66rem; background: var(--sky-deep); color: #fff;
  border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; white-space: nowrap;
}
.plan-badge.plus { background: var(--sky); }
.plan-badge.pro, .plan-badge.paid { background: var(--pink); color: #fff; }

.mini-link {
  display: inline-block; padding: 4px 12px; font-size: 0.8rem;
  border: 2px solid var(--ink); border-radius: 10px;
  background: var(--sky); color: var(--ink); text-decoration: none;
  box-shadow: 2px 2px 0 var(--ink);
}
.mini-link:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- 검사 단계 보완 ---------- */
/* AI 제안이 없으면 '내 문구'가 전체 폭 사용 (빈 오른쪽 열 방지) */
.compare.single { grid-template-columns: 1fr; }

.allclear {
  margin: 12px 0; padding: 10px 14px;
  background: var(--green-soft); border: 2px solid var(--ink); border-radius: 12px;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}

/* ---------- 개인정보 동의 ---------- */
.consent {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 4px 0 10px; font-size: 0.85rem; cursor: pointer;
}
.consent input { width: 17px; height: 17px; accent-color: var(--green); }
.consent a { color: var(--blue); }
footer a { color: var(--blue); }

/* ---------- 버튼 정렬 통일 ---------- */
/* 텍스트 사이에 끼어 있는 mini 버튼·링크는 항상 세로 중앙 정렬 */
button.mini, .mini-link { vertical-align: middle; }

/* 글자수 줄 오른쪽(조정 버튼 + NEIS/무시/적용 버튼 묶음)을 flex로 정렬 */
.meta > span:last-child {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* 검사 단계 두 패널: 제목 줄 높이를 맞춰 본문 시작점을 나란히 */
.pane h4 {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-height: 30px;
}

/* 프로필 모달 하단: 버튼과 링크를 같은 축에 정렬 */
.profile-actions > span {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}