/* =====================================================================
   MIND LINKER — Counselor (상담사) surface
   Reuses tokens.css + components.css + responsive.css (.sidebar, .content,
   .card, .lrow, .gradpanel, .chip, .trend, .appseg, .input, .scrim/.modal).
   Only counselor-specific pieces live here.
   ===================================================================== */

/* counselor shell: Korean text should break between words, not mid-word */
.shell--c .content, .shell--c .modal { word-break: keep-all; line-break: strict; }

/* stat tiles row */
.cstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (min-width: 1024px) { .cstats { gap: 16px; } }
.cstat { padding: 18px 16px; }
.cstat__ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 12px; }
.cstat__ic svg { width: 19px; height: 19px; }
.cstat__n { font: var(--fw-display) 30px var(--font-display); letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.cstat__l { font: var(--fw-label) 12.5px var(--font-body); color: var(--ink-3); margin-top: 7px; word-break: keep-all; }

/* care / crisis — calm, non-stigma. teal, never coral on emotion data */
.care-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font: var(--fw-strong) 11.5px var(--font-body); background: var(--teal-50); color: var(--teal-600);
  border: 1px solid color-mix(in srgb, var(--teal-300) 50%, transparent); white-space: nowrap; flex: 0 0 auto; }
.care-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); animation: carePulse 2.4s ease-in-out infinite; }
@keyframes carePulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .care-chip__dot { animation: none; } }

.care-banner { position: relative; border-radius: 22px; padding: 18px 20px; overflow: hidden;
  background: linear-gradient(135deg, var(--teal-50), color-mix(in srgb, var(--green-100) 55%, transparent));
  border: 1px solid color-mix(in srgb, var(--teal-300) 45%, transparent); }
.care-banner__t { font: var(--fw-display) 16px var(--font-display); letter-spacing: -.01em; color: var(--ink); word-break: keep-all; }
.care-banner__b { font: var(--fw-label) 13px var(--font-body); color: var(--ink-2); margin-top: 5px; line-height: 1.5; word-break: keep-all; }

/* dark mode: brand pastel ramp (--teal-50/--green-100) isn't theme-aware, so override surfaces here */
[data-theme="dark"] .care-banner {
  background: linear-gradient(135deg, oklch(31% 0.052 196 / 0.5), oklch(34% 0.06 165 / 0.38));
  border-color: color-mix(in srgb, var(--teal-300) 24%, transparent); }
[data-theme="dark"] .care-chip {
  background: oklch(38.5% 0.061 203 / 0.5); color: var(--teal-200);
  border-color: color-mix(in srgb, var(--teal-300) 30%, transparent); }

/* mood orb dot (per-client mood) */
.mooddot { --m: var(--green-400); width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background:
    radial-gradient(34% 30% at 32% 26%, oklch(100% 0 160 / .85) 0, oklch(100% 0 160 / 0) 45%),
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--m) 70%, white), var(--m));
  box-shadow: inset -3px -4px 8px oklch(20% .04 200 / .25), 0 3px 8px color-mix(in oklch, var(--m) 34%, transparent); }
.mooddot--lg { width: 52px; height: 52px; }

/* client list row mood meta */
.crow__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.crow__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* AI recommendation reasons */
.aireason { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; }
.aireason + .aireason { border-top: 1px solid var(--line-soft); }
.aireason__ic { width: 24px; height: 24px; border-radius: 8px; background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px; }
.aireason__ic svg { width: 14px; height: 14px; }
.aireason__t { font: var(--fw-label) 13.5px var(--font-body); color: var(--ink-2); line-height: 1.5; word-break: keep-all; }
.aireason__t b { font-weight: var(--fw-strong); color: var(--ink); }

/* slot picker (accept → first session) */
.slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; }
.slot { padding: 12px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface);
  cursor: pointer; text-align: center; font: var(--fw-strong) 14px var(--font-body); color: var(--ink-2);
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.slot small { display: block; font: var(--fw-mono) 10px var(--font-mono); color: var(--ink-3); margin-top: 4px; }
.slot:hover { border-color: var(--green-300); }
.slot[data-on] { border-color: transparent; background: var(--grad-signature); color: oklch(29.8% .055 171.9);
  box-shadow: 0 4px 12px oklch(64.7% .134 162.2 / .3); }
.slot[data-on] small { color: oklch(29.8% .055 171.9); }
.slot:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 2px; }
.slot--ro { cursor: default; }
.slot--ro:hover { border-color: var(--line); }

/* booked-time confirmation card (accept modal) */
.bookedcard { border-radius: 18px; padding: 18px 20px; background: var(--grad-signature);
  box-shadow: 0 6px 18px oklch(64.7% .134 162.2 / .28); }
.bookedcard__t { font: var(--fw-display) 30px var(--font-display); letter-spacing: -.03em; line-height: 1; color: oklch(23.2% 0.038 171.6); }
.bookedcard__d { font: var(--fw-strong) 13px var(--font-body); color: oklch(29.8% .055 171.9); margin-top: 8px; }
.slotbadge { display: inline-block; margin-top: 7px; font: 700 9.5px var(--font-mono); letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); }
.slotbadge--ok { background: var(--teal-50); color: var(--teal-600); }
.slot[data-on] .slotbadge { background: oklch(100% 0 89.9 / 0.6); color: oklch(29.8% .055 171.9); }

/* per-day availability range bar */
.daybar__scale { display: flex; justify-content: space-between; padding: 0 4px 0 42px; margin-bottom: 6px;
  font: var(--fw-mono) 9.5px var(--font-mono); color: var(--ink-3); }
.daybar { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.daybar__d { width: 22px; flex: 0 0 auto; font: var(--fw-strong) 13px var(--font-body); color: var(--ink-2); text-align: center; }
.daybar__track { position: relative; flex: 1; height: 38px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--line-soft); cursor: pointer; touch-action: none; overflow: hidden; }
.daybar__tick { position: absolute; top: 7px; bottom: 7px; width: 1px; background: var(--line); transform: translateX(-0.5px); opacity: .5; }
.daybar__tick:first-of-type, .daybar__tick:last-of-type { opacity: 0; }
.daybar__hint { position: absolute; inset: 0; display: grid; place-items: center; font: var(--fw-label) 11.5px var(--font-body); color: var(--ink-3); pointer-events: none; }
.daybar__fill { position: absolute; top: 4px; bottom: 4px; border-radius: 9px; background: var(--grad-signature);
  box-shadow: 0 3px 10px oklch(64.7% .134 162.2 / .3); cursor: grab; touch-action: none; }
.daybar__fill:active { cursor: grabbing; }
.daybar__handle { position: absolute; top: 50%; width: 18px; height: 26px; border-radius: 7px; background: oklch(100% 0 89.9);
  border: 1.5px solid oklch(64.7% .134 162.2 / .5); box-shadow: 0 2px 6px oklch(41.9% .076 171.9 / .3);
  transform: translate(-50%, -50%); cursor: ew-resize; touch-action: none; }
.daybar__handle::after { content: ''; position: absolute; inset: 0; margin: auto; width: 2px; height: 11px; border-radius: 2px;
  background: var(--green-500); box-shadow: 3px 0 0 var(--green-500), -3px 0 0 var(--green-500); }
.daybar__handle--s { left: 0; }
.daybar__handle--e { left: 100%; }
[data-theme="dark"] .daybar__handle { background: oklch(34% 0.03 195); border-color: oklch(64.7% .134 162.2 / .6); }
.daybar__meta { width: 92px; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.daybar__time { font: var(--fw-mono) 11px var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.daybar__off { font: var(--fw-label) 11.5px var(--font-body); color: var(--ink-3); }
.daybar__x { border: none; background: none; cursor: pointer; color: var(--ink-3); width: 22px; height: 22px;
  border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; }
.daybar__x:hover { background: var(--surface-2); color: var(--coral); }
@media (max-width: 560px) { .daybar__meta { width: 78px; } .daybar__time { font-size: 10px; } }

/* profile accent swatches */
.accentrow { display: flex; gap: 10px; flex-wrap: wrap; }
.accentsw { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; padding: 0;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.accentsw:hover { transform: scale(1.08); }
.accentsw[data-on] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

/* availability weekly grid (profile) */
.availrow { display: flex; align-items: center; gap: 8px; }
.availrow + .availrow { margin-top: 8px; }
.availrow__d { width: 30px; font: var(--fw-strong) 13px var(--font-body); color: var(--ink-2); flex: 0 0 auto; }
.availcells { display: flex; gap: 6px; flex: 1; }
.availcell { flex: 1; padding: 9px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; text-align: center; font: var(--fw-mono) 11px var(--font-mono); color: var(--ink-3);
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.availcell[data-on] { border-color: transparent; background: color-mix(in srgb, var(--green-100) 85%, transparent); color: var(--green-700); }
.availcell:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 1px; }

/* week strip (schedule) */
.weekstrip { display: flex; gap: 8px; }
.weekstrip__d { flex: 1; padding: 12px 0 10px; border-radius: 16px; text-align: center; background: var(--surface);
  border: 1px solid var(--line-soft); cursor: pointer; transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.weekstrip__d:hover { transform: translateY(-2px); border-color: var(--green-200); }
.weekstrip__d[data-today] { border-color: var(--green-400); box-shadow: inset 0 0 0 1px var(--green-400); }
.weekstrip__d[data-sel] { background: var(--grad-signature); border-color: transparent; box-shadow: 0 4px 12px oklch(64.7% .134 162.2 / .3); }
.weekstrip__dow { font: var(--fw-mono) 10px var(--font-mono); color: var(--ink-3); text-transform: uppercase; }
.weekstrip__n { font: var(--fw-display) 18px var(--font-display); color: var(--ink); margin-top: 4px; line-height: 1; }
.weekstrip__d[data-sel] .weekstrip__dow, .weekstrip__d[data-sel] .weekstrip__n { color: oklch(29.8% .055 171.9); }
.weekstrip__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); margin: 5px auto 0; }
.weekstrip__d[data-sel] .weekstrip__dot { background: oklch(29.8% .055 171.9); }

/* month calendar */
.calnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calnav__grp { display: flex; align-items: center; gap: 6px; }
.calnav__arrow { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.calnav__arrow:hover { background: var(--surface-2); border-color: var(--green-300); }
.calnav__label { min-width: 132px; text-align: center; font: var(--fw-display) 17px var(--font-display);
  letter-spacing: -.01em; color: var(--ink); }
.calnav__today { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--green-300); background: var(--green-100);
  color: var(--green-700); font: var(--fw-strong) 13px var(--font-body); cursor: pointer; flex: 0 0 auto;
  transition: background var(--dur-base) var(--ease); }
.calnav__today:hover { background: var(--green-200); }

.cal__head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal__dow { text-align: center; font: var(--fw-mono) 10px var(--font-mono); color: var(--ink-3); text-transform: uppercase; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__cell { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; border: 1px solid var(--line-soft);
  background: var(--surface); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 0; transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.cal__cell:hover { transform: translateY(-1px); border-color: var(--green-200); }
.cal__cell--empty { border: none; background: none; cursor: default; }
.cal__cell--empty:hover { transform: none; }
.cal__cell[data-today] { border-color: var(--green-400); box-shadow: inset 0 0 0 1px var(--green-400); }
.cal__cell[data-sel] { background: var(--grad-signature); border-color: transparent; box-shadow: 0 4px 12px oklch(64.7% .134 162.2 / .3); }
.cal__n { font: var(--fw-strong) 14px var(--font-body); color: var(--ink); }
.cal__cell[data-sel] .cal__n { color: oklch(29.8% .055 171.9); }
.cal__dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.cal__dot--up { background: var(--green-500); }
.cal__dot--past { background: var(--ink-3); opacity: .5; }
.cal__cell[data-sel] .cal__dot--up { background: oklch(29.8% .055 171.9); }
.cal__cell[data-sel] .cal__dot--past { background: oklch(29.8% .055 171.9 / .5); }
.cal__legend { display: flex; gap: 16px; justify-content: center; margin-top: 14px;
  font: var(--fw-label) 11.5px var(--font-body); color: var(--ink-3); }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 420px) { .cal__n { font-size: 12px; } .cal__cell { border-radius: 9px; } }

/* session row */
.sesrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.sesrow.tap { cursor: pointer; }
.sesrow.tap:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.sesrow__time { text-align: center; flex: 0 0 auto; min-width: 50px; }
.sesrow__t { font: var(--fw-display) 17px var(--font-display); color: var(--ink); line-height: 1.1; }
.sesrow__ampm { font: var(--fw-mono) 9px var(--font-mono); color: var(--ink-3); letter-spacing: .08em; }
.sesrow__div { width: 1px; align-self: stretch; background: var(--line-soft); flex: 0 0 auto; }

/* focus tags */
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 5px 12px; border-radius: 999px; font: var(--fw-strong) 12px var(--font-body);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }

/* note items */
.noteitem { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.noteitem + .noteitem { margin-top: 10px; }
.noteitem__d { font: var(--fw-mono) 10.5px var(--font-mono); letter-spacing: .1em; color: var(--teal-500); text-transform: uppercase; }
.noteitem__b { font: var(--fw-label) 13.5px var(--font-body); color: var(--ink-2); line-height: 1.55; margin-top: 6px; word-break: keep-all; }

/* labeled textarea field for notes */
.notefield { display: flex; flex-direction: column; gap: 7px; }
.notefield textarea { font: var(--fw-label) 14px/1.5 var(--font-body); box-sizing: border-box; width: 100%; resize: vertical; min-height: 64px;
  padding: 13px 16px; border-radius: 14px; background: var(--surface-2); color: var(--ink); border: 1.5px solid var(--line); }
.notefield textarea:focus { outline: none; border-color: var(--teal-400); background: var(--surface); box-shadow: 0 0 0 4px oklch(72.2% 0.119 187.2 / .16); }
.notefield textarea::placeholder { color: var(--ink-3); }

/* back link */
.cback { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer;
  font: var(--fw-strong) 13px var(--font-body); color: var(--ink-3); padding: 0; margin-bottom: 14px; }
.cback:hover { color: var(--green-600); }
.cback svg { width: 16px; height: 16px; transform: rotate(180deg); }

/* request urgency dot */
.urg { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-mono) 11px var(--font-mono); color: var(--ink-3); letter-spacing: .04em; }
.urg__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

/* counselor sidebar CTA differs from user's (no check-in) — reuse .sb-cta look */
.sb-cta--ghost { background: var(--surface-2); color: var(--ink-2); box-shadow: none; border: 1px solid var(--line); }
.sb-cta--ghost:hover { background: var(--surface); box-shadow: none; border-color: var(--green-300); }

/* selectable chips (전문 분야 / 상담 접근) */
.selchips { display: flex; flex-wrap: wrap; gap: 8px; }
.selchip { padding: 8px 14px; border-radius: 999px; font: var(--fw-strong) 13px var(--font-body); cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.selchip:hover { border-color: var(--green-300); }
.selchip[data-on] { border-color: transparent; background: var(--grad-signature); color: oklch(29.8% .055 171.9);
  box-shadow: 0 3px 10px oklch(64.7% .134 162.2 / .28); }
.selchip__x { width: 14px; height: 14px; display: grid; }
.selchip:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 2px; }

/* credential cards */
.credcard { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line-soft); }
.credcard + .credcard { margin-top: 10px; }
.credcard__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--green-100); color: var(--green-700); }
.credcard__ic svg { width: 20px; height: 20px; }
.credcard__t { font: var(--fw-display) 15px var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.credcard__s { font: var(--fw-label) 12.5px var(--font-body); color: var(--ink-3); margin-top: 3px; }
.credcard__rm { border: none; background: none; cursor: pointer; color: var(--ink-3); width: 32px; height: 32px;
  border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.credcard__rm:hover { background: var(--surface); color: var(--coral); }

.vchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font: var(--fw-strong) 11px var(--font-body); flex: 0 0 auto; }
.vchip svg { width: 11px; height: 11px; }
.vchip--ok { background: var(--teal-50); color: var(--teal-600); border: 1px solid color-mix(in srgb, var(--teal-300) 50%, transparent); }
.vchip--pending { background: var(--surface); color: var(--ink-3); border: 1px solid var(--line); }

.credform { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 10px; }
.credform .input { width: 100%; }
.credform__row { display: flex; gap: 10px; }

/* mobile tab bar: counselor uses 5 flat tabs (no center FAB) */
.tabbar-m--flat { justify-content: space-around; }

/* info density tweak */
.shell[data-dense] .stack { gap: 12px; }
.shell[data-dense] .cstats { gap: 10px; }
.shell[data-dense] .card { padding: 16px; }
.shell[data-dense] .sesrow, .shell[data-dense] .lrow { padding: 11px 14px; }