/* =====================================================================
   이진숙 감정연구소 - 공통 스타일
   기반: Bootstrap 5(CDN) 위에 얹는 프로젝트 토큰 레이어
   원칙: 색·간격·그림자는 CSS 변수 한 곳에서만 정의한다(단일 출처).
   ===================================================================== */

:root {
  /* 색 토큰 */
  --ink:        #221C35;   /* 본문·관리자 사이드바 바탕 (딥 플럼 잉크) */
  --ink-soft:   #4A4160;   /* 보조 텍스트 */
  --paper:      #F5F3FA;   /* 앱 배경 (라일락 기운의 화이트) */
  --surface:    #FFFFFF;   /* 카드 표면 */
  --accent:     #6C4CE0;   /* 주 강조 (바이올렛) */
  --accent-ink: #4B2FB0;   /* 주 강조 진한 값 (hover) */
  --accent-soft:#EDE7FF;   /* 주 강조 배경 */
  --rose:       #FF7FA3;   /* 감정·사랑 계열 보조 강조 */
  --teal:       #17B3A3;   /* 긍정·완료 */
  --amber:      #E8A33D;   /* 주의 */
  --danger:     #E0525F;   /* 오류·차단 */
  --line:       #E4E0F0;   /* 경계선 */

  /* 그림자 (Soft UI) */
  --shadow-sm: 0 2px 6px rgba(34, 28, 53, .06);
  --shadow-md: 0 10px 24px rgba(34, 28, 53, .09);
  --shadow-lg: 0 18px 44px rgba(34, 28, 53, .14);

  /* 형태 */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  /* 레이아웃 */
  --sidebar-w: 248px;
  --bottom-tab-h: 62px;
}

/* --- 기본 --- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  letter-spacing: -.01em;
  overflow-x: hidden;           /* 375px 가로 스크롤 방지 */
}
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.03em; }
h1 { font-size: 1.6rem; line-height: 1.28; }
h2 { font-size: 1.28rem; }
h3 { font-size: 1.08rem; }
p  { line-height: 1.7; color: var(--ink-soft); }
a  { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .text-muted-2 { color: var(--ink-soft); }

/* 키보드 포커스는 항상 보이게 (접근성) */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 모션 최소화 환경 존중 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- 카드 --- */
.soft-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.soft-card--raised { box-shadow: var(--shadow-md); border-color: transparent; }

/* --- 버튼 --- */
.btn { font-weight: 600; border-radius: var(--r-sm); }
.btn-accent { background: var(--accent); color: #fff; border: none; }
.btn-accent:hover, .btn-accent:focus { background: var(--accent-ink); color: #fff; }
.btn-outline-accent { border: 1.5px solid var(--accent); color: var(--accent-ink); background: transparent; }
.btn-outline-accent:hover { background: var(--accent-soft); color: var(--accent-ink); }
.btn-lg-block { width: 100%; padding: .85rem 1rem; font-size: 1.02rem; }

/* --- 폼 --- */
.form-control, .form-select {
  border-radius: var(--r-sm);
  border-color: var(--line);
  padding: .68rem .85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(108, 76, 224, .16);
}
.form-label { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }

/* 폼 하단 표준 오류 영역(§02-1). 기본 숨김, .is-visible 로 노출 */
.form-error-area {
  display: none;
  margin-top: .9rem;
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  background: #FDECEE;
  border: 1px solid #F6C6CB;
  color: #96222E;
  font-size: .9rem;
}
.form-error-area.is-visible { display: block; }
.form-error-area ul { margin: 0; padding-left: 1.1rem; }

/* --- 인증 화면(독립 문서). 폼 중앙 정렬 강제 --- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(900px 480px at 12% -8%, #E9E2FF 0%, rgba(233,226,255,0) 62%),
    radial-gradient(760px 420px at 96% 4%, #FFE3EC 0%, rgba(255,227,236,0) 58%),
    var(--paper);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;            /* 좌측 쏠림 방지 */
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 26px;
}
.auth-brand { font-weight: 800; font-size: 1.22rem; letter-spacing: -.035em; }
.auth-brand span { color: var(--accent); }

/* --- 상단 Navbar(사용자) --- */
#appNavbar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
#appNavbar .navbar-brand { font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
#appNavbar .navbar-brand span { color: var(--accent); }

/* --- 하단 탭바(사용자, 모바일 앱 룩앤필) --- */
#bottomTab {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  height: var(--bottom-tab-h);
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
#bottomTab a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: .72rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
#bottomTab a .tab-ico { font-size: 1.15rem; line-height: 1; }
#bottomTab a.is-active { color: var(--accent); }
body[data-shell="user"] { padding-bottom: calc(var(--bottom-tab-h) + 12px); }
@media (min-width: 992px) {
  #bottomTab { display: none; }
  body[data-shell="user"] { padding-bottom: 24px; }
}

/* --- 관리자 사이드바 --- */
#adminSidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045;
  width: var(--sidebar-w);
  background: var(--ink);
  color: #D9D3EC;
  padding: 20px 14px;
  overflow-y: auto;
  transition: transform .22s ease;
}
#adminSidebar .side-brand { color: #fff; font-weight: 800; letter-spacing: -.035em; font-size: 1.06rem; }
#adminSidebar .side-group { font-size: .74rem; color: #8E85AE; margin: 18px 8px 6px; font-weight: 700; }
#adminSidebar a.side-link {
  display: block; padding: .58rem .7rem; border-radius: var(--r-sm);
  color: #D9D3EC; font-size: .93rem; font-weight: 600; text-decoration: none;
}
#adminSidebar a.side-link:hover { background: rgba(255,255,255,.08); color: #fff; }
#adminSidebar a.side-link.is-active { background: var(--accent); color: #fff; }

#adminMain { margin-left: var(--sidebar-w); min-height: 100vh; }
#adminTopbar {
  position: sticky; top: 0; z-index: 1035;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .7rem 1rem;
}
#sidebarToggle { display: none; }
#sidebarBackdrop { display: none; }

/* 992px 미만: 사이드바를 서랍으로(§02-5.9).
   #id 로 특이도를 올려 Bootstrap 유틸리티에 밀리지 않게 한다. */
@media (max-width: 991.98px) {
  #adminSidebar { transform: translateX(-100%); visibility: hidden; box-shadow: var(--shadow-lg); }
  #adminSidebar.is-open { transform: translateX(0); visibility: visible; }
  #adminMain { margin-left: 0; }
  #sidebarToggle { display: inline-flex; }
  #sidebarBackdrop.is-open {
    display: block; position: fixed; inset: 0; z-index: 1044;
    background: rgba(34,28,53,.45);
  }
}

/* --- 상태 배지(라벨은 표시 전용, 판정은 data-status-code 로) --- */
.status-badge {
  display: inline-block; padding: .22rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; background: #EFEDF6; color: var(--ink-soft);
}
.status-badge[data-tone="success"]   { background: #E2F7F3; color: #0E7C70; }
.status-badge[data-tone="info"]      { background: #E7EEFF; color: #2D4FA8; }
.status-badge[data-tone="warning"]   { background: #FDF0DC; color: #96641A; }
.status-badge[data-tone="danger"]    { background: #FDECEE; color: #96222E; }
.status-badge[data-tone="secondary"] { background: #EFEDF6; color: #56507A; }
.status-badge[data-tone="dark"]      { background: #E3E0EC; color: #38314F; }

/* --- 민감정보 마스킹(§02-1) --- */
.masked-value { filter: blur(4.5px); user-select: none; }
.masked-note { font-size: .82rem; color: var(--ink-soft); }

/* --- 빈 상태 / 오류 상태(§02-5.3: 예시 값 폴백 금지) --- */
.state-block { text-align: center; padding: 46px 20px; }
.state-block .state-ico { font-size: 2rem; }
.state-block h3 { margin-top: .6rem; font-size: 1.02rem; }
.state-block p { margin: .35rem 0 1rem; font-size: .92rem; }

/* --- 검사 카드 --- */
.test-card { display: block; color: inherit; text-decoration: none; overflow: hidden; }
.test-card:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.test-card__thumb {
  height: 108px; border-radius: var(--r-md) var(--r-md) 0 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--rose) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.12rem; letter-spacing: -.03em;
}
.test-card__thumb[data-theme="rose"] { background: linear-gradient(135deg, #FF7FA3 0%, #FFB37F 100%); }
.test-card__thumb[data-theme="teal"] { background: linear-gradient(135deg, #17B3A3 0%, #6C4CE0 100%); }

/* --- 문항 선택지 --- */
.option-item { margin-bottom: .6rem; }
.option-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.option-item label {
  display: block; width: 100%; cursor: pointer;
  padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: .96rem; line-height: 1.5;
}
.option-item input:checked + label {
  border-color: var(--accent); background: var(--accent-soft); font-weight: 600;
}
.option-item input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

.progress-thin { height: 6px; border-radius: 999px; background: var(--line); }
.progress-thin .progress-bar { background: var(--accent); }

/* --- 결과 카드(이미지 저장 대상 영역) --- */
#resultCard {
  border-radius: var(--r-lg);
  padding: 28px 22px;
  color: #fff;
  background: linear-gradient(150deg, #6C4CE0 0%, #9A5FD0 52%, #FF7FA3 100%);
  box-shadow: var(--shadow-lg);
}
#resultCard h1 { font-size: 1.9rem; color: #fff; }
#resultCard p  { color: rgba(255,255,255,.9); }
.scale-row { margin-bottom: .75rem; }
.scale-row .scale-name { font-size: .88rem; font-weight: 600; }
.scale-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.26); overflow: hidden; }
.scale-bar > span { display: block; height: 100%; background: #fff; border-radius: 999px; }

/* --- 표 --- */
.table > :not(caption) > * > * { padding: .72rem .7rem; }
.table thead th { font-size: .82rem; color: var(--ink-soft); font-weight: 700; border-bottom-color: var(--line); }
.table tbody td { font-size: .92rem; vertical-align: middle; }

/* --- 미연동 표시(§13.8 / §02-5.5) --- */
.not-integrated {
  border: 1px dashed var(--amber); background: #FDF7EC; color: #7A5312;
  border-radius: var(--r-sm); padding: .6rem .8rem; font-size: .86rem;
}

/* --- 검증용 임시 UI 표식 --- */
.temp-block { border: 1px dashed var(--danger); border-radius: var(--r-sm); padding: .7rem .8rem; }
.temp-block .temp-flag { font-size: .74rem; font-weight: 700; color: var(--danger); }

/* --- 375px 안전 --- */
@media (max-width: 400px) {
  h1 { font-size: 1.42rem; }
  .auth-card { padding: 26px 18px; }
}

/* =====================================================================
   PHP 뷰 이식 이후 추가분
   이 파일(public/assets/css/app.css)이 정식 스타일이다.
   prototype/assets/css/app.css 는 참고용으로 동결한다.
   ===================================================================== */

/* 검사 진행 화면: 응답에 집중하도록 하단 탭을 숨기고 진행률을 붙여 둔다 */
body[data-screen="attempt.play"] { padding-bottom: 24px; }
body[data-screen="attempt.play"] #bottomTab { display: none !important; }
#playProgressBar {
  position: sticky; top: 56px; z-index: 1025;
  background: var(--paper); padding: 10px 0;
}

/* 요청 중인 버튼 */
button[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* 본문 바로가기 링크 */
.visually-hidden-focusable:focus {
  position: fixed; top: 8px; left: 8px; z-index: 2000;
  background: var(--surface); padding: .5rem .8rem; border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
}