/*
 * 애착 유형 테스트 — 상담실 점검지
 * 클립보드(갈색 보드 + 금속 집게) 위 줄 노트 종이, 타자기 글씨(Nanum Gothic Coding),
 * 연필 표시(Gaegu), 압정과 붉은 실로 그린 관계 지도. 포인트 색은 붉은 실 하나.
 */
:root {
  --brand: #c4473a;
  --brand-pressed: #a83a2f;
  --brand-soft: #f6dcd6;
  --brand-on: #ffffff;

  --font-display: "Gaegu", "Nanum Pen Script", "Pretendard Variable", Pretendard, cursive;

  /* 장식 전용 */
  --art-board: #b48a5e;
  --art-board-dark: #8f6a44;
  --art-paper: #fbf9f3;
  --art-rule: #c9d9e6;
  --art-margin: #e6a3a0;
  --art-lead: #36383b;
  --art-lead-soft: #74777d;
  --art-metal: #c3c7cc;
  --art-metal-dark: #7f868d;
  --art-note: #fbe58c;
  --art-pencil: #f2c14e;
  --art-wood: #ecd2ad;
  --art-eraser: #e89aa0;
  --art-typed: "Nanum Gothic Coding", "D2Coding", ui-monospace, "SF Mono", Menlo, monospace;
  --art-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --art-ruled: repeating-linear-gradient(180deg, transparent 0 27px, var(--art-rule) 27px 28px);
  --art-graph: linear-gradient(var(--art-rule) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, var(--art-rule) 1px, transparent 1px) 0 0 / 14px 14px;
  --art-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  background: color-mix(in srgb, var(--art-board) 18%, var(--art-paper));
}

.app {
  position: relative;
}

/* ---------- 클립보드 ---------- */
.at-board {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-24) var(--sp-8) var(--sp-10);
  border-radius: var(--r-12);
  background-color: var(--art-board);
  background-image: var(--art-grain);
  background-blend-mode: multiply;
  box-shadow: var(--shadow-m);
}

.at-clip {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -6px;
  width: 132px;
  height: 40px;
  margin-left: -66px;
  border-radius: var(--r-8) var(--r-8) var(--r-4) var(--r-4);
  background: linear-gradient(180deg, var(--art-metal) 0%, var(--art-metal-dark) 100%);
  box-shadow: var(--shadow-s);
}

.at-clip i {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 48px;
  height: 12px;
  margin-left: -24px;
  border-radius: var(--r-full);
  background: var(--art-board-dark);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35);
}

.at-paper {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--sp-24) var(--sp-16) var(--sp-16) var(--sp-24);
  background: var(--art-ruled), var(--art-paper);
  background-position: 0 6px;
  color: var(--art-lead);
  box-shadow: var(--shadow-s);
}

/* 왼쪽 빨간 여백선 */
.at-paper::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--art-margin);
}

/* ---------- 첫 화면 ---------- */
.at-intro {
  padding-top: var(--sp-8);
}

.at-intro .at-board {
  flex: 1 1 auto;
}

.at-head {
  border-bottom: 2px solid var(--art-lead);
  padding-bottom: var(--sp-8);
}

.at-head__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font: 700 26px/1.15 var(--art-typed);
  letter-spacing: -0.03em;
}

.at-head__title small {
  margin-top: var(--sp-4);
  font: 400 13px/1.3 var(--art-typed);
  color: var(--art-lead-soft);
}

.at-head__title--sm {
  font-size: 19px;
}

.at-head__meta {
  display: flex;
  justify-content: space-between;
  margin: var(--sp-6) 0 0;
  font: 400 12px/1.4 var(--art-typed);
  color: var(--art-lead-soft);
}

.at-stage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-10) 0 var(--sp-8);
}

/* 첫 화면: 남는 세로 공간은 지도 위아래로 나눠 갖는다 */
.at-stage .at-mapbox {
  flex: 1 1 auto;
  align-content: center;
}

.at-sec {
  margin: 0;
  font: 700 13px/1.2 var(--art-typed);
  color: var(--art-lead-soft);
}

.at-row {
  min-height: 92px;
  opacity: 0.35;
  transition: opacity 300ms;
}

.at-row.is-on { opacity: 1; }

.at-row__q {
  margin: 0;
  min-height: 44px;
  font: 400 15px/22px var(--art-typed);
}

.at-row__no { font-weight: 700; }

.at-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--art-lead);
  animation: at-caret 0.9s steps(2) infinite;
}

.at-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.at-scale__n {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  font: 700 22px/1 var(--font-display);
  color: var(--art-lead);
}

.at-loop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 40px;
  margin: -20px 0 0 -27px;
  overflow: visible;
  pointer-events: none;
}

.at-loop path {
  fill: none;
  stroke: var(--art-lead);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.is-circled .at-loop path {
  animation: at-draw 420ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

.is-circled.is-instant .at-loop path {
  animation: none;
  stroke-dashoffset: 0;
}

.at-mapbox {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 230px) 1fr;
  align-items: end;
  gap: var(--sp-4);
}

.at-map {
  width: 100%;
  height: auto;
  overflow: visible;
}

.at-map__grid line { stroke: var(--art-rule); stroke-width: 1; }
.at-map__frame { fill: none; stroke: var(--art-lead); stroke-width: 1.5; }
.at-map__mid { stroke: var(--art-lead-soft); stroke-width: 1.2; stroke-dasharray: 4 4; }

.at-map__q text {
  font: 700 17px var(--font-display);
  fill: var(--art-lead-soft);
  transition: fill 200ms;
}

.at-map__q text.is-hit {
  fill: var(--brand);
  animation: at-wiggle 600ms var(--art-spring);
  transform-box: fill-box;
  transform-origin: center;
}

.at-map__axis text {
  font: 400 10px var(--art-typed);
  fill: var(--art-lead-soft);
}

.at-map__axis .at-map__axname {
  font-weight: 700;
  fill: var(--art-lead);
}

.at-map__ghosts circle { fill: none; stroke: var(--art-lead-soft); stroke-width: 1.5; stroke-dasharray: 2 2; }
.at-map__ghosts text { font: 400 9px var(--art-typed); fill: var(--art-lead-soft); }

.at-string {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.at-pin.is-set .at-string {
  animation: at-draw 700ms ease-out 260ms forwards;
}

.at-pin__base { fill: var(--art-metal-dark); }

.at-pin__head circle { fill: var(--brand); }
.at-pin--1 .at-pin__head circle { fill: var(--art-lead); }
.at-pin__head .at-pin__shine { fill: var(--art-paper); opacity: 0.7; }
.at-pin__shadow { fill: var(--art-lead); opacity: 0.18; }

.at-pin__label {
  font: 700 15px var(--font-display);
  fill: var(--art-lead);
}

.at-pin .at-pin__head > * {
  transform: translateY(-40px);
  opacity: 0;
}

.at-pin.is-set .at-pin__head > * {
  animation: at-pin-drop 640ms var(--art-spring) forwards;
}

.at-map__link {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.at-map__link.is-drawn { animation: at-draw 900ms ease-out 700ms forwards; }

.at-scrawl {
  margin: 0 0 var(--sp-24);
  font: 700 19px/1.25 var(--font-display);
  color: var(--brand);
  transform: rotate(-6deg);
  opacity: 0;
}

.at-stage[data-scene="4"] .at-scrawl {
  animation: at-scrawl 700ms var(--art-spring) forwards;
}

/* 연필 */
.at-pencil {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 112px;
  height: 22px;
  overflow: visible;
  transform-origin: 0 50%;
  transform: translate(260px, 40px) rotate(-38deg);
  transition: transform 640ms var(--art-spring);
  pointer-events: none;
  filter: drop-shadow(2px 6px 3px rgba(0, 0, 0, 0.18));
}

.at-pencil.is-scribble { animation: at-scribble 420ms linear 1; }
.at-pencil__wood { fill: var(--art-wood); }
.at-pencil__lead { fill: var(--art-lead); }
.at-pencil__body { fill: var(--art-pencil); }
.at-pencil__band { fill: var(--art-metal); }
.at-pencil__eraser { fill: var(--art-eraser); }
.at-pencil__line { stroke: var(--art-board-dark); stroke-width: 1; opacity: 0.4; }

/* 체크박스 버튼 (시작) */
.at-check {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--sp-12);
  width: 100%;
  min-height: 68px;
  margin-top: var(--sp-8);
  padding: var(--sp-10) var(--sp-8);
  border: 0;
  border-top: 2px solid var(--art-lead);
  border-bottom: 2px solid var(--art-lead);
  background: var(--art-paper);
  color: var(--art-lead);
  text-align: left;
  cursor: pointer;
  transition: transform 300ms var(--art-spring);
}

.at-check:active { transform: scale(0.98); transition-duration: 60ms; }

.at-check__box {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border: 2.5px solid var(--art-lead);
  border-radius: var(--r-4);
  background: var(--color-surface);
  transform: rotate(-2deg);
}

.at-check__box svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.at-check__box path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.at-check:hover .at-check__box path { stroke-dashoffset: 0.82; transition: stroke-dashoffset 200ms; }
.at-check.is-ticked .at-check__box path { animation: at-draw 380ms cubic-bezier(0.6, 0, 0.3, 1) forwards; }
.at-check.is-ticked .at-check__box { animation: at-wiggle 500ms var(--art-spring); }

.at-check__text {
  font: 700 18px/1.3 var(--art-typed);
  letter-spacing: -0.03em;
}

.at-check__meta {
  font: 400 12px/1.4 var(--art-typed);
  color: var(--art-lead-soft);
}

.at-check--again {
  grid-template-rows: auto;
  margin-top: var(--sp-24);
  border-radius: var(--r-4);
}

.at-last {
  min-height: 40px;
  margin-top: var(--sp-4);
  border: 0;
  background: none;
  color: var(--art-lead);
  font: 400 13px/1.3 var(--art-typed);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- 문항 ---------- */
.at-quiz {
  padding-top: var(--sp-8);
}

.at-quiz .at-board {
  min-height: calc(100dvh - var(--sp-16));
}

.at-quizbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.at-back {
  min-height: 44px;
  padding: 0 var(--sp-8);
  border: 0;
  background: none;
  color: var(--art-lead);
  font: 700 14px/1 var(--art-typed);
  cursor: pointer;
}

.at-back:active { transform: translateX(-3px); }

.at-count {
  font: 700 22px/1 var(--font-display);
  color: var(--art-lead);
}

.at-ticks {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
  margin: var(--sp-8) 0 var(--sp-16);
  padding: 0;
  list-style: none;
}

.at-ticks li {
  position: relative;
  aspect-ratio: 1;
  border: 1.5px solid var(--art-lead-soft);
  background: var(--color-surface);
}

.at-ticks li.is-now { border-color: var(--brand); border-width: 2px; }

.at-tick {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  overflow: visible;
}

.at-tick path {
  fill: none;
  stroke: var(--art-lead);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.at-qwrap {
  flex: 1;
  overflow: hidden;
}

.at-q {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.at-q.from-next { animation: at-sheet-up 520ms var(--art-spring) both; }
.at-q.from-prev { animation: at-sheet-down 520ms var(--art-spring) both; }

.at-q__no {
  margin: 0;
  font: 700 14px/28px var(--art-typed);
  color: var(--art-lead-soft);
}

.at-q__text {
  min-height: 112px;
  margin: 0 0 var(--sp-16);
  font: 700 21px/28px var(--art-typed);
  letter-spacing: -0.03em;
}

.at-scale--big {
  gap: var(--sp-2);
  margin-top: auto;
  padding: var(--sp-12) 0 var(--sp-8);
  border-top: 1.5px dashed var(--art-lead-soft);
}

.at-scale__btn {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-6);
  min-height: 100px;
  padding: var(--sp-6) 0;
  border: 0;
  background: none;
  color: var(--art-lead);
  transition: transform 260ms var(--art-spring);
}

.at-scale__btn:active { transform: scale(0.92); transition-duration: 60ms; }

.at-scale--big .at-scale__n {
  width: 52px;
  height: 52px;
  font-size: 30px;
}

.at-scale--big .at-loop {
  width: 64px;
  height: 50px;
  margin: -25px 0 0 -32px;
}

.at-scale--big .at-loop path { stroke: var(--brand); stroke-width: 3; }

.at-scale__l {
  font: 400 11px/1.35 var(--art-typed);
  color: var(--art-lead-soft);
  text-align: center;
}

.at-scale__btn[aria-checked="true"] .at-scale__l { color: var(--art-lead); font-weight: 700; }

.at-q__hint {
  margin: var(--sp-16) 0 0;
  font: 700 17px/1.3 var(--font-display);
  color: var(--art-lead-soft);
  transform: rotate(-1.5deg);
}

/* ---------- 결과지 ---------- */
.at-topbar {
  display: flex;
  align-items: center;
  min-height: 52px;
}

.at-topbar__from {
  margin: 0;
  font: 700 15px/1.3 var(--art-typed);
}

.at-res .at-board { margin-top: var(--sp-16); }

.at-namefield {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: var(--sp-8) 0 0;
  font: 400 13px/1 var(--art-typed);
  color: var(--art-lead-soft);
}

.at-namefield input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-bottom: 1.5px solid var(--art-lead);
  background: transparent;
  font: 700 20px/1 var(--font-display);
  color: var(--art-lead);
  outline: none;
}

.at-namefield input::placeholder { font: 400 12px var(--art-typed); color: var(--art-lead-soft); }
.at-namefield b { font: 700 22px/1 var(--font-display); color: var(--art-lead); }

.at-verdict {
  margin: var(--sp-16) 0 var(--sp-8);
}

.at-verdict__pre {
  margin: 0;
  font: 400 13px/1.4 var(--art-typed);
}

.at-verdict__type {
  position: relative;
  display: inline-block;
  margin: var(--sp-4) 0 0;
  font: 700 44px/1.1 var(--font-display);
  color: var(--art-lead);
}

.at-verdict__type span {
  font-size: 26px;
  margin-left: var(--sp-4);
}

.at-under {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  width: 100%;
  height: 12px;
  overflow: visible;
}

.at-under path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.at-under.is-drawn path { animation: at-draw 600ms ease-out forwards; }

.at-verdict__line {
  margin: var(--sp-12) 0 0;
  font: 400 14px/1.5 var(--art-typed);
}

.at-mapbox--res,
.at-pair .at-mapbox {
  display: block;
  max-width: 320px;
  margin: var(--sp-8) auto 0;
}

.at-scores {
  display: grid;
  gap: var(--sp-8);
  margin: var(--sp-16) 0;
}

.at-score {
  display: grid;
  grid-template-columns: 3em 1fr 2.4em;
  align-items: center;
  gap: var(--sp-8);
}

.at-score__name { font: 700 14px/1 var(--art-typed); }

.at-score__bar {
  position: relative;
  height: 16px;
  border: 1.5px solid var(--art-lead);
}

/* 연필 빗금으로 채운 막대 */
.at-score__bar i {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: calc((100% - 4px) * var(--p) / 100);
  background: repeating-linear-gradient(-55deg, var(--art-lead) 0 1.5px, transparent 1.5px 5px);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.at-score__bar i.is-grow { animation: at-grow 1000ms var(--art-spring) 400ms forwards; }

.at-score__bar em {
  position: absolute;
  left: 50%;
  top: -6px;
  bottom: -6px;
  width: 0;
  border-left: 1.5px dashed var(--brand);
  font: 400 9px/1 var(--art-typed);
  font-style: normal;
  color: transparent;
}

.at-score__v {
  font: 700 24px/1 var(--font-display);
  text-align: right;
}

.at-typed {
  margin: 0 0 var(--sp-8);
  font: 400 15px/28px var(--art-typed);
  letter-spacing: -0.02em;
}

.at-h3 {
  margin: var(--sp-16) 0 var(--sp-4);
  font: 700 22px/28px var(--font-display);
  color: var(--brand);
}

.at-checks,
.at-tries {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 14px/28px var(--art-typed);
  letter-spacing: -0.02em;
}

.at-checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-8);
  align-items: start;
}

.at-box {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 6px;
  border: 1.5px solid var(--art-lead);
}

.at-box .at-tick path { stroke: var(--brand); }

.at-tries {
  counter-reset: try;
}

.at-tries li {
  position: relative;
  padding-left: 26px;
  counter-increment: try;
}

.at-tries li::before {
  content: counter(try) ")";
  position: absolute;
  left: 0;
  font-weight: 700;
}

.at-sticky {
  position: relative;
  margin: var(--sp-24) var(--sp-8) var(--sp-16);
  padding: var(--sp-16);
  background: var(--art-note);
  box-shadow: var(--shadow-s);
  transform: rotate(-1.5deg);
}

.at-sticky::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 70px;
  height: 20px;
  margin-left: -35px;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(3deg);
}

.at-sticky__label {
  margin: 0 0 var(--sp-6);
  font: 700 12px/1.3 var(--art-typed);
}

.at-sticky__say {
  margin: 0;
  font: 700 21px/1.35 var(--font-display);
}

.at-gentle {
  margin: var(--sp-8) 0 0;
  padding: var(--sp-10) var(--sp-12);
  border: 1.5px dashed var(--art-lead-soft);
  font: 400 12px/1.6 var(--art-typed);
  color: var(--art-lead-soft);
  background: var(--art-paper);
}

/* 서류철 탭 모양 공유 버튼 */
.at-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
}

.at-tab {
  position: relative;
  min-height: 60px;
  padding: var(--sp-16) var(--sp-12) var(--sp-8);
  border: 0;
  background: var(--art-wood);
  color: var(--art-lead);
  font: 700 14px/1.3 var(--art-typed);
  letter-spacing: -0.03em;
  text-align: left;
  clip-path: polygon(0 10px, 12px 0, 58% 0, 64% 10px, 100% 10px, 100% 100%, 0 100%);
  cursor: pointer;
  transition: transform 260ms var(--art-spring);
}

.at-tab:active { transform: translateY(3px) scale(0.98); transition-duration: 60ms; }

.at-tab--alt { background: var(--art-rule); }

.at-tab__clip {
  position: absolute;
  right: 12px;
  top: 14px;
  width: 10px;
  height: 22px;
  border: 2px solid var(--art-metal-dark);
  border-radius: var(--r-full);
}

.at-tab--sm {
  min-height: 48px;
  padding-top: var(--sp-12);
  white-space: nowrap;
}

.at-tab.is-loading { opacity: 0.6; pointer-events: none; }

/* 인덱스 카드 */
.at-card {
  position: relative;
  margin-top: var(--sp-16);
  padding: var(--sp-16);
  background: var(--art-ruled), var(--color-surface);
  background-position: 0 30px;
  box-shadow: var(--shadow-s);
  color: var(--art-lead);
}

.at-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  height: 2px;
  background: var(--art-margin);
}

.at-card p {
  margin: 0 0 var(--sp-12);
  font: 400 14px/28px var(--art-typed);
  letter-spacing: -0.02em;
}

.at-card__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-8);
  min-height: 30px;
  margin: 0 0 var(--sp-16);
  font: 700 22px/1.2 var(--font-display);
}

.at-card__title small { font: 400 11px var(--art-typed); color: var(--art-lead-soft); }

.at-input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-8);
  border: 0;
  border-bottom: 2px solid var(--art-lead);
  background: transparent;
  font: 400 14px var(--art-typed);
  color: var(--art-lead);
  outline: none;
}

.at-input:focus { border-color: var(--brand); }

.at-link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: 700 13px/1.3 var(--art-typed);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.at-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/1.5 var(--art-typed);
  color: var(--art-lead);
}

.at-table th,
.at-table td {
  padding: var(--sp-6) var(--sp-4);
  border: 1px solid var(--art-lead-soft);
  text-align: left;
  vertical-align: top;
}

.at-table th { font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--art-rule) 35%, transparent); }
.at-table--hist td, .at-table--hist th, .at-table--pair td, .at-table--pair th { text-align: center; }

.at-pair__note {
  margin-top: var(--sp-12) !important;
  padding: var(--sp-8) var(--sp-12);
  background: var(--art-note);
  font: 700 18px/1.45 var(--font-display) !important;
  letter-spacing: 0 !important;
}

.at-dare p b { font: 700 20px/1 var(--font-display); color: var(--brand); }

/* ---------- SEO 본문: 상담실 안내문 ---------- */
.at-doc {
  margin-top: var(--sp-48);
  padding: var(--sp-24) var(--sp-16) var(--sp-24) var(--sp-24);
  background: var(--art-paper);
  box-shadow: var(--shadow-s);
  color: var(--art-lead);
  position: relative;
}

.at-doc::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--art-margin);
}

.at-doc__head {
  padding-bottom: var(--sp-12);
  border-bottom: 3px double var(--art-lead);
}

.at-doc__head p {
  margin: 0;
  font: 400 12px/1.4 var(--art-typed);
  color: var(--art-lead-soft);
}

.at-doc h2 {
  margin: var(--sp-4) 0 0;
  font: 700 22px/1.3 var(--art-typed);
  color: var(--art-lead);
  letter-spacing: -0.04em;
}

.at-doc__sec {
  margin-top: var(--sp-24);
}

.at-doc h3 {
  margin: 0 0 var(--sp-8);
  font: 700 16px/1.4 var(--art-typed);
  color: var(--art-lead);
}

.at-doc h3 span { color: var(--brand); }

.at-doc__pen {
  margin: var(--sp-8) 0 0;
  font: 700 17px/1.35 var(--font-display) !important;
  color: var(--art-lead-soft);
}

.at-doc .at-calc li { font: inherit; }

.at-calc {
  margin: 0;
  padding-left: var(--sp-20);
  font: 400 13px/1.7 var(--art-typed);
}

.at-example {
  margin-top: var(--sp-12);
  padding: var(--sp-12);
  background: var(--art-graph), var(--color-surface);
  border: 1.5px solid var(--art-lead);
}

.at-doc .at-example__row {
  display: grid;
  grid-template-columns: 5.5em 5.2em 1.4em auto;
  align-items: baseline;
  gap: var(--sp-8);
  margin: 0;
  font: 400 13px/2 var(--art-typed);
}

.at-hand {
  font: 700 22px/1 var(--font-display);
  color: var(--brand);
}

.at-doc .at-example__out {
  margin: var(--sp-8) 0 0;
  font: 700 13px/1.6 var(--art-typed);
}

.at-example__out b {
  font: 700 19px/1 var(--font-display);
  background: linear-gradient(transparent 55%, var(--art-note) 55%);
}

.at-grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--art-lead);
  background: var(--art-graph), var(--color-surface);
}

.at-grid4__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-10);
  border: 1px dashed var(--art-lead-soft);
}

.at-grid4__cell b { font: 700 22px/1 var(--font-display); color: var(--brand); }
.at-grid4__cell span { font: 700 11px/1.4 var(--art-typed); }
.at-grid4__cell em { font: 400 12px/1.5 var(--art-typed); font-style: normal; color: var(--art-lead-soft); }

/* ---------- 자주 나온 질문: 상담 축어록 ----------
 * 상담 기록처럼 줄 번호 + 화자(내담자/상담자) + 발화. 내담자 줄을 누르면 상담자 줄이 타이핑되듯 이어진다. */
.at-doc .at-turn__head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--art-lead);
  border-bottom: 1px solid var(--art-lead);
  font: 400 11px/1.6 var(--art-typed);
  color: var(--art-lead-soft);
}

.at-doc details.at-turn {
  padding: 0;
  border: 0;
  border-bottom: 1px dotted var(--art-lead-soft);
}

.at-turn summary,
.at-doc .at-turn p {
  display: grid;
  grid-template-columns: 22px 46px 1fr;
  align-items: baseline;
  gap: var(--sp-6);
  margin: 0;
  padding: var(--sp-12) 0;
}

.at-turn summary {
  min-height: var(--tap-min);
  list-style: none;
  cursor: pointer;
}

.at-turn summary::-webkit-details-marker { display: none; }

.at-turn__ln {
  font: 400 10px/1.6 var(--art-typed);
  color: var(--art-margin);
  text-align: right;
}

.at-turn__who {
  font: 700 12px/1.6 var(--art-typed);
  color: var(--art-lead-soft);
}

.at-turn__say {
  font: 700 14px/1.6 var(--art-typed);
  color: var(--art-lead);
}

/* 아직 응답을 안 펼친 줄: 연필로 "응답 →" 메모 */
.at-turn summary .at-turn__say::after {
  content: " 응답 보기 ↓";
  margin-left: var(--sp-4);
  font: 700 15px/1 var(--font-display);
  color: var(--brand);
  white-space: nowrap;
}

.at-turn[open] summary .at-turn__say::after { content: ""; }

.at-doc .at-turn p {
  padding-top: 0;
  background: linear-gradient(90deg, transparent 72px, color-mix(in srgb, var(--art-note) 45%, transparent) 72px);
}

.at-turn p .at-turn__who { color: var(--brand); }

.at-turn p .at-turn__say {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.75;
  clip-path: inset(0 0 0 0);
  animation: at-type-in 700ms steps(14, end) both;
}

@keyframes at-type-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.at-doc .at-turn__foot {
  margin: var(--sp-8) 0 0;
  font: 400 11px/1.6 var(--art-typed);
  color: var(--art-lead-soft);
}

.at-doc__stamp {
  display: inline-block;
  margin: var(--sp-24) 0 0;
  padding: var(--sp-6) var(--sp-10);
  border: 2px solid var(--brand);
  color: var(--brand);
  font: 700 12px/1.3 var(--art-typed);
  transform: rotate(-2deg);
}

/* ---------- 함께 읽을 자료 (다른 도구) ----------
 * 상담실 책상 위 복사본 한 장: 회색 토너 얼룩, 왼쪽 위 스테이플, 점선 리더가 있는 자료 목록 */
.at .more-sites {
  position: relative;
  margin: var(--sp-48) var(--sp-8) var(--sp-24);
  padding: var(--sp-20) var(--sp-16) var(--sp-16);
  background:
    radial-gradient(ellipse at 96% 4%, color-mix(in srgb, var(--art-lead) 14%, transparent), transparent 38%),
    linear-gradient(90deg, color-mix(in srgb, var(--art-lead) 10%, transparent), transparent 6%, transparent 94%, color-mix(in srgb, var(--art-lead) 8%, transparent)),
    color-mix(in srgb, var(--art-lead) 4%, var(--art-paper));
  box-shadow: var(--shadow-s);
  color: var(--art-lead);
  transform: rotate(-0.8deg);
}

/* 스테이플 */
.at .more-sites::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 26px;
  height: 4px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--art-metal), var(--art-metal-dark));
  transform: rotate(-35deg);
}

.at .more-sites__title {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--sp-8) var(--sp-24);
  padding-bottom: var(--sp-8);
  border-bottom: 2px solid var(--art-lead);
  font: 700 18px/1.3 var(--art-typed);
  opacity: 1;
  letter-spacing: -0.03em;
}

.at .more-sites__title small {
  font: 400 11px/1.4 var(--art-typed);
  color: var(--art-lead-soft);
}

.at .more-sites__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "no name go" "no desc go";
  column-gap: var(--sp-10);
  align-items: baseline;
  min-height: 56px;
  padding: var(--sp-10) 0;
  border-top: 0;
  border-bottom: 1px dotted var(--art-lead-soft);
  color: var(--art-lead);
  text-decoration: none;
}

.at-ref__no {
  grid-area: no;
  font: 400 11px/1.6 var(--art-typed);
  color: var(--art-lead-soft);
}

.at .more-sites__name {
  grid-area: name;
  font: 700 15px/1.4 var(--art-typed);
  text-decoration: underline;
  text-decoration-color: var(--art-rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.at .more-sites__desc { grid-area: desc; font: 400 12px/1.5 var(--art-typed); opacity: 1; color: var(--art-lead-soft); }

.at-ref__go {
  grid-area: go;
  align-self: center;
  font: 700 22px/1 var(--font-display);
  color: var(--brand);
  transition: transform var(--dur-slow) var(--art-spring);
}

.at .more-sites__item:active .at-ref__go { transform: translateX(6px); transition-duration: 60ms; }

/* 연필로 동그라미 친 첫 자료 */
.at .more-sites__item:first-child .more-sites__name {
  text-decoration-color: var(--art-pencil);
  text-decoration-thickness: 5px;
}

.at .site-footer { font-family: var(--art-typed); }

/* ---------- 키프레임 ---------- */
@keyframes at-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes at-caret {
  50% { opacity: 0; }
}

@keyframes at-wiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-6deg) scale(1.12); }
  60% { transform: rotate(4deg); }
}

@keyframes at-pin-drop {
  0% { transform: translateY(-40px); opacity: 0; }
  60% { transform: translateY(3px) scale(1.1, 0.85); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes at-scrawl {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes at-scribble {
  0%, 100% { translate: 0 0; }
  20% { translate: 4px -3px; }
  40% { translate: -3px 3px; }
  60% { translate: 4px 2px; }
  80% { translate: -2px -3px; }
}

@keyframes at-sheet-up {
  0% { opacity: 0; transform: translateY(60px) rotate(1.5deg); }
  60% { opacity: 1; transform: translateY(-4px) rotate(-0.3deg); }
  100% { transform: none; }
}

@keyframes at-sheet-down {
  0% { opacity: 0; transform: translateY(-60px) rotate(-1.5deg); }
  60% { opacity: 1; transform: translateY(4px); }
  100% { transform: none; }
}

@keyframes at-grow {
  to { transform: scaleX(1); }
}

.at-loop path { opacity: 0; }
.is-circled .at-loop path { opacity: 1; }

/* ---------- 함께 보기 (친구 초대) ----------
 * 점검지 아래 대조표: 내 칸은 타자, 상대 칸은 연필 밑줄만 그어진 빈칸 */
.at-blank {
  width: 100%;
  margin: 0 0 var(--sp-8);
  border-collapse: collapse;
  font: 400 14px/1.4 var(--art-typed);
  background: var(--color-surface);
}

.at-blank th,
.at-blank td {
  height: 40px;
  padding: 0 var(--sp-8);
  border: 1px solid var(--art-lead);
  text-align: center;
}

.at-blank thead th { height: 30px; font-weight: 700; background: color-mix(in srgb, var(--art-rule) 35%, transparent); }
.at-blank tbody th { width: 3.6em; font-weight: 700; }
.at-blank td:nth-child(2) { font-weight: 700; }

.at-blank__line {
  display: inline-block;
  width: 70%;
  height: 2px;
  background: var(--art-lead-soft);
  border-radius: var(--r-full);
  transform: rotate(-1.5deg);
  opacity: 0.6;
}

.at-card .at-blank__how {
  margin: 0 0 var(--sp-12);
  font: 700 17px/1.4 var(--font-display);
  color: var(--brand);
}