/* ============================================
   Connectia Components
   반드시 tokens.css 를 먼저 로드할 것.

   board-proto-delivery.zip 이후 추가된 항목
   .toggle-sm : 36×22px 소형 토글 변형
   ============================================ */


/* ==========================================
   LABEL
   ========================================== */

.label {
  display: block;
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label);
  color: var(--color-text-sub);
}

.label-required::after {
  content: ' *';
  color: var(--color-destructive);
}


/* ==========================================
   BUTTON
   ========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--font-base);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    opacity          var(--motion-fast) var(--ease-standard),
    transform        var(--motion-fast) var(--ease-standard);
}

.btn:active         { transform: scale(0.98); }
.btn:disabled,
.btn[disabled]      { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* sizes */
.btn-xs  { height: 28px; padding: 0 8px;  font-size: var(--fs-badge);    border-radius: var(--r-xs); }
.btn-sm  { height: 32px; padding: 0 12px; font-size: 13px;               border-radius: var(--r-xs); }
.btn-md  { height: 40px; padding: 0 16px; font-size: var(--fs-body);     border-radius: var(--r-sm); }
.btn-lg  { height: 48px; padding: 0 20px; font-size: var(--fs-body-lg);  border-radius: var(--r-md); }
.btn-xl  { height: 52px; padding: 0 20px; font-size: 16px;               border-radius: var(--r-lg); }

.btn-block { width: 100%; }
.btn-pill  { border-radius: var(--r-full) !important; }

/* fill — primary */
.btn-fill-primary            { background: var(--color-primary); color: var(--color-on-primary); }
.btn-fill-primary:hover      { background: var(--color-primary-dark); }

/* fill — dark */
.btn-fill-dark               { background: var(--color-text-sub); color: var(--color-on-primary); }
.btn-fill-dark:hover         { background: var(--color-text); }

/* fill — danger */
.btn-fill-danger             { background: var(--color-destructive); color: var(--color-on-primary); }
.btn-fill-danger:hover       { filter: brightness(0.9); }

.btn-fill-success            { background: var(--color-success-dark); color: var(--color-on-primary); }
.btn-fill-success:hover      { filter: brightness(0.92); }

/* fill — fellows (펠로우즈 공식 모임·운영 화면 전용 올리브 그린) */
.btn-fill-fellows            { background: var(--color-fellows); color: var(--color-on-fellows); }
.btn-fill-fellows:hover      { filter: brightness(0.92); }
.btn-weak-fellows            { background: var(--color-fellows-subtle); color: var(--color-fellows-dark); }
.btn-weak-fellows:hover      { background: var(--color-fellows-light); }

/* fill — campus (펠로우즈 캠퍼스 초록) */
.btn-fill-campus             { background: var(--color-campus); color: var(--color-on-campus); }
.btn-fill-campus:hover       { background: var(--color-campus-dark); }
.btn-weak-campus             { background: var(--color-campus-weak); color: var(--color-campus); }
.btn-weak-campus:hover       { background: var(--color-campus-subtle); }

/* fill — kakao (소셜 로그인 전용 브랜드 버튼) */
.btn-fill-kakao              { background: var(--color-kakao); color: var(--color-on-kakao); }
.btn-fill-kakao:hover        { filter: brightness(0.95); }

/* fill — apple (Sign in with Apple 가이드: 검정 면 + 흰 글자) */
.btn-fill-apple              { background: var(--color-apple); color: var(--color-on-apple); }
.btn-fill-apple:hover        { opacity: 0.85; }

/* fill — light (색이 깔린 면·사진 위에 얹는 흰 버튼) */
.btn-fill-light              { background: var(--color-surface); color: var(--color-text); }
.btn-fill-light:hover        { background: var(--color-surface-sub); }

/* fill — gradient (대화하기 등 브랜드 CTA) */
.btn-fill-gradient           { background: var(--color-brand-gradient); color: var(--color-on-primary); }
.btn-fill-gradient:hover     { opacity: 0.9; }

/* weak — primary */
.btn-weak-primary            { background: rgba(107,107,225,0.12); color: var(--color-primary); }
.btn-weak-primary:hover      { background: rgba(107,107,225,0.18); }

/* weak — dark */
.btn-weak-dark               { background: rgba(37,38,56,0.06); color: var(--color-text-sub); }
.btn-weak-dark:hover         { background: rgba(37,38,56,0.10); }

/* weak — danger */
.btn-weak-danger             { background: rgba(201,64,34,0.10); color: var(--color-destructive); }
.btn-weak-danger:hover       { background: rgba(201,64,34,0.16); }

/* line — dark */
.btn-line-dark               { background: transparent; color: var(--color-text-sub); border: 1px solid var(--color-border); }
.btn-line-dark:hover         { background: rgba(37,38,56,0.04); }

/* line — light: 사진·어두운 면 위에 얹는 흰 테두리 버튼 */
.btn-line-light              { background: transparent; color: var(--color-on-primary); border: 1px solid var(--color-on-primary); }
.btn-line-light:hover        { background: var(--color-scrim); }

/* glass — 사진 위에 얹는 반투명 유리 버튼 (사진이 비쳐 테두리가 덜 도드라진다) */
.btn-glass-light             { background: var(--color-glass-fill); color: var(--color-on-primary); border: 1px solid var(--color-glass-line); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); }
.btn-glass-light:hover       { background: var(--color-scrim); }

/* loading */
.btn.is-loading {
  pointer-events: none;
  color: transparent;
  position: relative;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: var(--color-on-primary);
  border-radius: 50%;
  animation: _btn-spin 0.6s linear infinite;
}
/* 밝은 면(카카오 노랑) 위 로딩 — 흰 스피너가 묻히지 않게 글자색으로 */
.btn-fill-kakao.is-loading::after { border-color: transparent; border-top-color: var(--color-on-kakao); }
@keyframes _btn-spin { to { transform: rotate(360deg); } }


/* ==========================================
   ICON BUTTON
   ========================================== */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-fast) var(--ease-standard);
}
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* sizes */
.icon-btn-sm { width: 32px; height: 32px; border-radius: var(--r-xs); }
.icon-btn-lg { width: 48px; height: 48px; border-radius: var(--r-md); }

/* 원형 (소셜 로그인 아이콘 등) */
.icon-btn-pill { border-radius: var(--r-full); }

/* clear (기본) */
.icon-btn-clear:hover,
.icon-btn-clear:active       { background: rgba(107,107,225,0.08); }

/* fill */
.icon-btn-fill               { background: var(--color-primary-light); color: var(--color-primary); }
.icon-btn-fill:hover         { background: var(--color-primary-subtle); }
.icon-btn-fill-primary       { background: var(--color-primary); color: var(--color-on-primary); }
.icon-btn-fill-primary:hover { background: var(--color-primary-dark); }
/* 소셜 공유 — 브랜드 색 고정 */
.icon-btn-fill-kakao         { background: var(--color-kakao); color: var(--color-on-kakao); }
.icon-btn-fill-linkedin      { background: var(--color-linkedin); color: var(--color-on-linkedin); }
.icon-btn-fill-kakao:hover,
.icon-btn-fill-linkedin:hover { filter: brightness(0.95); }
/* 브랜드 로고 — assets의 공식 로고를 마스크로 찍고 색은 토큰으로 채운다 */
.brand-logo {
  display: inline-block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}
.brand-logo-kakao    { width: 24px; height: 24px; -webkit-mask-image: url("assets/kakao-symbol.svg"); mask-image: url("assets/kakao-symbol.svg"); }
.brand-logo-facebook { color: var(--color-facebook); -webkit-mask-image: url("assets/Platform=Facebook,%20Color=Negative.svg"); mask-image: url("assets/Platform=Facebook,%20Color=Negative.svg"); }
.brand-logo-linkedin { width: 20px; height: 20px; -webkit-mask-image: url("assets/linkedin-symbol.svg"); mask-image: url("assets/linkedin-symbol.svg"); }

/* border */
.icon-btn-border             { border: 1px solid var(--color-border); }
.icon-btn-border:hover       { background: var(--color-primary-light); color: var(--color-primary); }


/* ==========================================
   INPUT
   ========================================== */

.input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  height: var(--input-h);
  padding: 0 var(--input-px);
  font-family: var(--font-base);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  outline: none;
  -webkit-appearance: none;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.input::placeholder   { color: var(--color-text-muted); }
.input:focus          { border-color: var(--color-primary); }
.input:disabled       { opacity: 0.5; cursor: not-allowed; background: var(--color-bg); }
.input.is-error       { border-color: var(--color-destructive); }
/* 크게 — 한 화면에 입력 하나를 크게 받을 때 */
.input-lg             { height: var(--input-h-lg); font-size: var(--fs-title-sm); border-radius: var(--r-md); }

.input-error-msg {
  margin-top: 6px;
  font-family: var(--font-base);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-destructive);
}

/* ==========================================
   TEXTAREA
   ========================================== */

.textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: var(--textarea-py) var(--input-px);
  font-family: var(--font-base);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-lg);
  color: var(--color-text);
  outline: none;
  resize: vertical;
  min-height: var(--textarea-h);
  -webkit-appearance: none;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.textarea::placeholder { color: var(--color-text-muted); }
.textarea:focus        { border-color: var(--color-primary); }
.textarea:disabled     { opacity: 0.5; cursor: not-allowed; }
.textarea.is-error     { border-color: var(--color-destructive); }
.textarea-auto         { resize: none; overflow: hidden; }
/* 크게 — 받아쓴 글·긴 답변을 크게 보여주고 고칠 때 */
.textarea-lg           { padding: 16px 20px; font-size: var(--fs-title-sm); line-height: var(--lh-body-lg); border-radius: var(--r-md); resize: none; }

/* ==========================================
   CHECKBOX
   ========================================== */

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-xs);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background-color: var(--color-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M10.4795 0.253841C10.8179 0.592295 10.8179 1.14104 10.4795 1.47949L4.47949 7.47949C4.14104 7.81795 3.59229 7.81795 3.25384 7.47949L0.253841 4.47949C-0.0846136 4.14104 -0.0846136 3.5923 0.253841 3.25384C0.592295 2.91539 1.14104 2.91539 1.47949 3.25384L3.86667 5.64102L9.25384 0.253841C9.59229 -0.0846136 10.141 -0.0846136 10.4795 0.253841Z' fill='%23b0b4be'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.checkbox:checked {
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M10.4795 0.253841C10.8179 0.592295 10.8179 1.14104 10.4795 1.47949L4.47949 7.47949C4.14104 7.81795 3.59229 7.81795 3.25384 7.47949L0.253841 4.47949C-0.0846136 4.14104 -0.0846136 3.5923 0.253841 3.25384C0.592295 2.91539 1.14104 2.91539 1.47949 3.25384L3.86667 5.64102L9.25384 0.253841C9.59229 -0.0846136 10.141 -0.0846136 10.4795 0.253841Z' fill='white'/%3E%3C/svg%3E");
}
.checkbox:focus-visible     { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.checkbox:disabled          { opacity: 0.4; cursor: not-allowed; }


/* ==========================================
   RADIO
   ========================================== */

.radio {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background   var(--motion-fast) var(--ease-standard);
}
.radio:checked {
  border-color: var(--color-primary);
  background-image: radial-gradient(circle, var(--color-primary) 5px, transparent 5px);
  background-repeat: no-repeat;
  background-position: center;
}
.radio:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.radio:disabled      { opacity: 0.4; cursor: not-allowed; }


/* ==========================================
   TOGGLE (SWITCH)
   ========================================== */

.toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 51px;
  height: 31px;
  border-radius: var(--r-full);
  border: none;
  background: var(--color-border);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background var(--motion-standard) var(--ease-standard);
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--color-on-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--motion-standard) var(--ease-standard);
}
.toggle:checked          { background: var(--color-primary); }
.toggle:checked::after   { transform: translateX(20px); }
.toggle:focus-visible    { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.toggle:disabled         { opacity: 0.4; cursor: not-allowed; }

.toggle-sm {
  width: 36px;
  height: 22px;
}
.toggle-sm::after {
  width: 18px;
  height: 18px;
}
.toggle-sm:checked::after { transform: translateX(14px); }


/* ==========================================
   SELECT
   ========================================== */

.select {
  display: block;
  width: 100%;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767985' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  box-sizing: border-box;
  height: var(--input-h);
  padding: 0 40px 0 var(--input-px);
  font-family: var(--font-base);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.select:focus    { border-color: var(--color-primary); }
.select:disabled { opacity: 0.5; cursor: not-allowed; }


/* ==========================================
   MENU (DROPDOWN)
   ========================================== */

.menu {
  background: var(--color-surface);
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  min-width: 180px;
}
/* 바텀시트 안에서는 시트 자체가 카드 역할 — 메뉴의 테두리·그림자·라운드를 제거 */
.bottom-sheet .menu {
  border: none;
  box-shadow: none;
  border-radius: 0;
  min-width: 0;
}

.menu-header {
  padding: 14px 16px 8px;
  font-family: var(--font-base);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-base);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--motion-fast) var(--ease-standard);
}
.menu-item:first-of-type  { border-top: none; }
.menu-item:hover          { background: var(--color-bg); }
.menu-item.is-selected    { color: var(--color-primary); font-weight: var(--fw-semibold); }
.menu-item.is-danger      { color: var(--color-destructive); }


/* ==========================================
   BADGE
   ========================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--r-full);
  font-family: var(--font-base);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  line-height: 1;
}

/* sizes */
.badge-sm { padding: 2px 7px;  font-size: 10px; }
.badge-md { padding: 3px 8px;  font-size: var(--fs-badge); }
.badge-lg { padding: 4px 10px; font-size: var(--fs-caption); }

/* fill */
.badge-fill-primary { background: var(--color-primary);     color: var(--color-on-primary); }
.badge-fill-dark    { background: var(--color-text-sub);    color: var(--color-on-primary); }
.badge-fill-danger  { background: var(--color-destructive); color: var(--color-on-primary); }
.badge-fill-neutral { background: var(--color-border);      color: var(--color-text-sub); }

/* weak */
.badge-weak-primary { background: var(--color-primary-light);  color: var(--color-primary); }
.badge-weak-dark    { background: rgba(37,38,56,0.07);          color: var(--color-text-sub); }
.badge-weak-danger  { background: rgba(201,64,34,0.10);         color: var(--color-destructive); }
.badge-weak-neutral { background: var(--color-surface-sub);     color: var(--color-text-muted); }
.badge-weak-success { background: var(--color-success-subtle);  color: var(--color-success-dark); }
.badge-weak-warning { background: var(--color-warning-subtle);  color: var(--color-warning-dark); }

/* Fellows — 펠로우즈 공식 모임 표시용 포인트 (큰 면에는 쓰지 않는다) */
.badge-weak-fellows { background: var(--color-fellows-light);  color: var(--color-fellows-dark); }

/* Glass — 사진 위에 얹는 뱃지 (사진 색을 해치지 않게 흰 반투명) */
.badge-glass        { background: var(--color-surface-glass);  color: var(--color-text); }
.badge-glass-danger { background: var(--color-surface-glass);  color: var(--color-destructive); }


/* ==========================================
   BOTTOM SHEET
   ========================================== */

.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,19,24,0.5);
  z-index: 200;
  opacity: 0;
  transition: opacity var(--motion-standard) var(--ease-enter);
  pointer-events: none;
}
.bottom-sheet-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  z-index: 201;
  box-shadow: var(--shadow-4);
  transform: translateY(100%);
  transition: transform var(--motion-standard) var(--ease-enter);
}
.bottom-sheet.is-open { transform: translateY(0); }

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--color-border);
  margin: 0 auto 20px;
}


/* ==========================================
   TOAST
   ========================================== */

.toast-container {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: var(--color-text);
  color: var(--color-on-primary);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  box-shadow: var(--shadow-3);
  white-space: nowrap;
  max-width: calc(100vw - 40px);
  pointer-events: auto;
  animation: _toast-in var(--motion-standard) var(--ease-enter);
}
@keyframes _toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 액션이 붙는 토스트 (예: 실행 취소) */
.toast-with-action {
  display: flex;
  align-items: center;
  gap: 16px;
}
.toast-action {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-subtle);
  white-space: nowrap;
}

/* 크게 — 현장에서 한눈에 읽히는 결과 토스트 */
.toast-lg {
  padding: 16px 20px;
  border-radius: var(--r-md);
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title-sm);
  letter-spacing: var(--ls-title-sm);
}
.toast-sub {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-on-primary-sub);
}

/* 결과 색 */
.toast-success { background: var(--color-success-dark); }
.toast-warning { background: var(--color-warning-dark); }
.toast-neutral { background: var(--color-text-muted); }
.toast-success .toast-action,
.toast-warning .toast-action,
.toast-neutral .toast-action { color: var(--color-on-primary); }


/* ==========================================
   DIALOG / MODAL
   ========================================== */

.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,19,24,0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 닫힘 — hidden 속성으로 토글 */
.dialog-overlay[hidden] { display: none; }

.dialog {
  background: var(--color-surface);
  border-radius: var(--r-lg);
  padding: 24px;
  width: 100%;
  max-width: 320px;
  box-shadow: var(--shadow-4);
  animation: _dialog-in var(--motion-standard) var(--ease-enter);
}
@keyframes _dialog-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.dialog-title {
  font-family: var(--font-base);
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-text);
  margin-bottom: 8px;
}

.dialog-desc {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.dialog-actions {
  display: flex;
  gap: 8px;
}
.dialog-actions .btn { flex: 1; }


/* ==========================================
   AVATAR
   ========================================== */

.avatar {
  display: inline-block;
  border-radius: 50%;
  background-color: var(--palette-purple-50);
  background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20C0 8.95431 8.95431 0 20 0H44C55.0457 0 64 8.95431 64 20V44C64 55.0457 55.0457 64 44 64H20C8.95431 64 0 55.0457 0 44V20Z' fill='%23EDEDFB'/%3E%3Cpath d='M32 37C35.9442 37 39.5944 37.9962 42.3115 39.6943C45.0051 41.3779 47 43.9169 47 47C47 47.9203 46.2542 48.6667 45.334 48.667H18.667C17.7465 48.667 17 47.9205 17 47C17 43.917 18.995 41.3779 21.6885 39.6943C24.4055 37.9962 28.0559 37.0001 32 37ZM32 15.333C37.5226 15.3331 41.9998 19.8104 42 25.333C42 30.8558 37.5227 35.3329 32 35.333C26.4773 35.3328 22 30.8557 22 25.333C22.0002 19.8104 26.4774 15.3332 32 15.333Z' fill='%23D5D5F5'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* sizes */
.avatar-xs { width: 24px;  height: 24px; }
.avatar-sm { width: 32px;  height: 32px; }
.avatar-md { width: 40px;  height: 40px; }
.avatar-lg { width: 56px;  height: 56px; }
.avatar-xl { width: 72px;  height: 72px; }
.avatar-2xl { width: 88px;  height: 88px; }

/* 정방형 라운드 (카드·그리드용) */
.avatar-rounded { border-radius: var(--r-lg); }

/* 사진 없는 사람 — 무채색 면 + 안쪽에 Lucide user-round 아이콘 */
.avatar-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-strong);
  color: var(--color-text-sub);   /* muted(3:1)는 대비가 모자라 sub 로 */
}
.avatar-blank svg { width: 55%; height: 55%; }


/* ==========================================
   DIVIDER
   ========================================== */

/* 가운데 텍스트가 들어가는 구분선 — 좌우 가로선 자동 */
.divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
}

.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}


/* ==========================================
   SUGGEST CHIP
   AI가 추천하는 답·빠른 요청. 눌러야 하는 것만 알약으로 쓴다
   (상태 표시·분류용 알약 뱃지로 쓰지 않는다)
   ========================================== */

.suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color     var(--motion-fast) var(--ease-standard);
}
.suggest-chip:hover { background: var(--color-bg); }
.suggest-chip:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
/* 고른 칩 — 무채색으로 채움 */
.suggest-chip.is-selected {
  background: var(--color-surface-dark);
  border-color: var(--color-surface-dark);
  color: var(--color-on-primary);
}
.suggest-chip svg { width: 16px; height: 16px; }
/* 작게 — 하단 고정 바처럼 자리가 좁을 때 */
.suggest-chip-sm { min-height: 32px; padding: 4px 12px; font-size: var(--fs-label); }