/* 화면별 스타일. 공용 컴포넌트는 css/app.css. */

/* ═══ 0. 스플래시 ═══════════════════════════════════
   워드마크(MatchaMint 실제 글자꼴, PDF 추출)가 흰색으로 등장 →
   무지개가 좌에서 우로 채워짐 → 점점 커지며 로그인으로 넘어간다. */

#screen-splash {
  align-items: center;
  justify-content: center;
  background: var(--c-primary);
  padding-inline: var(--sp-6);
}

.splash-mark {
  width: min(62vw, 17rem);
  transform-origin: 50% 46%;
  animation: splash-grow 2100ms var(--e-out) forwards;
}

.splash-mark svg { display: block; width: 100%; height: auto; }

/* 무지개 겹만 좌→우로 개봉 — 흰 글자가 무지개로 "채워지는" 연출 */
.splash-mark .mk-fill {
  clip-path: inset(0 100% 0 0);
  animation: splash-fill 1150ms 340ms var(--e-out) forwards;
}

.splash-tagline {
  margin: var(--sp-4) 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 0;
  animation: fade-up 520ms 620ms var(--e-out) forwards;
}

@keyframes splash-fill {
  to { clip-path: inset(0 -2% 0 0); }
}

@keyframes splash-grow {
  0% { transform: scale(0.82); }
  38% { transform: scale(1); }
  100% { transform: scale(1.42); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

/* ═══ 1. 로그인 ════════════════════════════════════
   4코너 메시 그라디언트 위, 물방울 속에 마스코트가 동동 떠 있다. */

#screen-login {
  background: var(--g-tr);
  background-image:
    radial-gradient(115% 88% at 0% 0%, var(--g-tl) 0%, rgba(255, 187, 174, 0) 62%),
    radial-gradient(120% 95% at 0% 100%, var(--g-bl) 0%, rgba(131, 218, 183, 0) 64%),
    radial-gradient(125% 100% at 100% 100%, var(--g-br) 0%, rgba(195, 241, 255, 0) 66%);
  text-align: center;
}

.login-head {
  margin: var(--sp-6) 0 0;
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: 1.34;
}

.login-head span {
  display: block;
  font-size: 0.82em;
  font-weight: 700;
}

/* 물방울: 마스코트 뒤에 놓이는 반투명 흰 구 + 주변을 떠도는 작은 방울들 */
.droplet-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.droplet {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  animation: bob var(--bob-dur, 6s) ease-in-out infinite alternate;
  animation-delay: var(--bob-delay, 0s);
}

.droplet--main {
  left: 50%;
  top: 50%;
  width: 58vw;
  max-width: 17rem;
  aspect-ratio: 1;
  margin: -29vw 0 0 -29vw;
  background: rgba(255, 255, 255, 0.72);
  filter: blur(0.3px);
}

@keyframes bob {
  from { transform: translate3d(0, -1.4%, 0) scale(0.985); }
  to { transform: translate3d(0, 2.2%, 0) scale(1.015); }
}

/* ═══ 2. 약관 / 4. 접근권한 ═════════════════════════ */

#screen-terms {
  background: var(--g-tr);
  background-image:
    radial-gradient(110% 60% at 0% 0%, var(--g-tl) 0%, rgba(255, 187, 174, 0) 58%),
    radial-gradient(130% 70% at 0% 100%, var(--g-bl) 0%, rgba(131, 218, 183, 0) 55%),
    radial-gradient(120% 70% at 100% 100%, var(--g-br) 0%, rgba(195, 241, 255, 0) 58%);
  padding-block: var(--sp-6) var(--sp-5);
}

.agree-all {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: 700;
  text-align: left;
  transition: transform var(--d-fast) var(--e-out);
}

.agree-all:active { transform: scale(0.985); }

.agree-list {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.agree-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.agree-list .label {
  flex: 1;
  font-size: var(--t-body);
  text-align: left;
}

.agree-list .more {
  color: var(--c-ink-mute);
  font-size: var(--t-caption);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 체크박스 — 시안의 둥근 사각 토글 */
.chk {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 7px;
  background: #e7e4dd;
  transition: background-color var(--d-fast) linear;
}

.chk::after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: no-repeat center / 62% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--d-fast) linear, transform var(--d-fast) var(--e-back);
}

[aria-checked="true"] > .chk { background: var(--c-primary); }
[aria-checked="true"] > .chk::after { opacity: 1; transform: none; }
.agree-all .chk { background: rgba(255, 255, 255, 0.34); }
.agree-all[aria-checked="true"] .chk { background: #ffffff; }
.agree-all[aria-checked="true"] .chk::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236040ec' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

/* 권한 목록 */
.perm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.perm-list li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) 0;
}

.perm-list .ico {
  grid-row: span 2;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-ink-mute);
}

.perm-list dt { margin: 0; font-weight: 700; }
.perm-list dd { margin: 0; color: var(--c-ink-mute); font-size: var(--t-body-sm); }
.perm-list li[data-granted="true"] .ico { color: var(--c-primary); }

/* ═══ 3·5·6. 온보딩 대화 화면 ═══════════════════════ */

/* .screen 이 이미 absolute/inset:0 로 전면을 차지한다 — 여기서 position 을 덮으면
   언덕(.hill)의 % 높이 기준과 도크의 margin-top:auto 가 함께 무너진다. */
.talk {
  background: var(--c-cream);
  align-items: stretch;
  padding-top: calc(var(--sp-safe-t) + var(--sp-6));
}

/* 언덕만 흐름 밖(absolute)에 남기고, 나머지 내용은 언덕 위로 올린다. */
.talk > :not(.hill) { position: relative; z-index: 3; }

/* 이름 확인 3지선다 */
.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.choice-row .cta { min-height: 3rem; font-size: 0.9375rem; }

.name-field {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 var(--sp-4);
  border: 2px solid var(--c-primary);
  border-radius: 16px;
  background: var(--c-card);
  color: var(--c-ink);
  font: inherit;
  font-weight: 700;
  text-align: center;
}

.name-field::placeholder { color: var(--c-ink-mute); font-weight: 500; }
.name-field:focus { outline: 3px solid rgba(96, 64, 236, 0.24); outline-offset: 2px; }

/* 듣는 중 표시 — 마이크가 열려 있음을 파형으로 알린다 */
.listening {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 1.5rem;
  margin: 0 0 var(--sp-3);
}

.listening span {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--c-primary);
  transform-origin: 50% 100%;
  animation: wave 900ms ease-in-out infinite;
}

.listening span:nth-child(2) { animation-delay: 120ms; }
.listening span:nth-child(3) { animation-delay: 240ms; }
.listening span:nth-child(4) { animation-delay: 360ms; }
.listening span:nth-child(5) { animation-delay: 480ms; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.28); }
  50% { transform: scaleY(1); }
}

/* 네잎클로버 팡팡 — 이름 확정 순간에만 터진다 */
.confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.clover {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 34px;
  height: 34px;
  color: #93d9a4;
  opacity: 0;
  animation: pop 1500ms var(--e-out) forwards;
  animation-delay: var(--pop-delay, 0ms);
}

.clover svg { display: block; width: 100%; height: 100%; }

@keyframes pop {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.2) rotate(0deg); }
  22% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--pop-x)), calc(-50% + var(--pop-y)), 0)
      scale(var(--pop-s, 1)) rotate(var(--pop-r, 180deg));
  }
}

/* ═══ 7. 홈 ════════════════════════════════════════ */

#screen-home { background: var(--c-cream); padding-inline: var(--sp-4); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  z-index: 4;
}

.topbar .right { display: flex; align-items: center; gap: var(--sp-2); }

.iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: #9a9384;
  transition: background-color var(--d-fast) linear, transform var(--d-fast) var(--e-out),
    color var(--d-fast) linear;
}

.iconbtn .ico { width: 1.625rem; height: 1.625rem; }
.iconbtn:active { transform: scale(0.9); background: rgba(0, 0, 0, 0.05); }
.iconbtn:focus-visible { outline: 3px solid rgba(96, 64, 236, 0.3); outline-offset: 0; }

/* 배지 — 알림 개수(보라)와 옷장 신규(노랑)는 다른 의미라 다른 색 */
.badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.125rem;
  text-align: center;
}

.badge--new {
  top: -1px;
  right: -2px;
  background: #ffd93d;
  color: #6b5200;
  font-size: 0.625rem;
}

/* 홈 중앙 대사 */
.home-say {
  margin-top: var(--sp-5);
  white-space: pre-line;
}

/* 실행 상태 토스트 — 코어가 앱을 다루는 동안 뜬다 */
.worktoast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: 16px;
  background: var(--c-toast);
  color: #fff;
  font-size: var(--t-body-sm);
  line-height: 1.42;
  animation: bubble-in var(--d-normal) var(--e-out) both;
}

.worktoast .appicon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: #fff center / 78% no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.worktoast .txt { flex: 1; }
.worktoast b { font-weight: 800; }

.spinner {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border: 3px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 780ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* 홈 하단 인디케이터 */
.homebar {
  width: 42%;
  height: 6px;
  margin: var(--sp-3) auto 0;
  border-radius: var(--r-pill);
  background: var(--c-bar);
}

/* ═══ 옷장 ═════════════════════════════════════════
   시안에서 옷장은 흰 시트가 아니라 홈과 같은 크림 지면이고, 말랑이가 그리드 위에
   그대로 떠 있다. 그래서 배경을 크림으로 두고 마스코트 레이어를 시트 위로 올린다. */

.sheet[data-sheet="closet"] { background: var(--c-cream); }

/* 캐릭터가 위쪽 절반을 쓰고 그리드는 아래로 — 시안의 옷장 화면 구성 */
.sheet[data-sheet="closet"] .closet-grid { margin-top: 42vh; }

.closet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.closet-tile {
  aspect-ratio: 1;
  border-radius: var(--r-tile);
  background: var(--c-card);
  box-shadow: 0 4px 14px rgba(76, 62, 44, 0.07);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}

.closet-tile:active { transform: scale(0.95); }

.closet-tile[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--c-primary), 0 8px 18px rgba(96, 64, 236, 0.2);
}

.closet-tile .swatch {
  display: block;
  width: 54%;
  height: 54%;
  margin: 23%;
  border-radius: 50%;
}

.closet-tile .lock { color: var(--c-ink-mute); font-size: 1.25rem; }

/* ═══ 시트(설정·내 정보·알림·옷장) ═══════════════════
   전체 화면을 덮는 흰 판. 홈 위에 얹혀 뜨고 내려간다. */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: var(--sp-safe-t) var(--sp-edge) var(--sp-safe-b);
  background: var(--c-card);
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 2.5%, 0);
  transition: opacity var(--d-normal) var(--e-out), transform var(--d-normal) var(--e-out),
    visibility 0s linear var(--d-normal);
}

.sheet.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--d-normal) var(--e-out), transform var(--d-normal) var(--e-out),
    visibility 0s;
}

.sheet-head {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  align-items: center;
  margin-bottom: var(--sp-5);
}

.sheet-head h1 {
  grid-column: 2;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  text-align: center;
}

.sheet-head .iconbtn { grid-column: 3; color: var(--c-ink-soft); }

.sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 설정 메뉴 행 */
.menu { margin: 0; padding: 0; list-style: none; border-top: 1px solid #eeece6; }

.menu li { border-bottom: 1px solid #eeece6; }

.menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) var(--sp-1);
  font-weight: 700;
  text-align: left;
  transition: background-color var(--d-fast) linear;
}

.menu button:active { background: #f6f4ef; }
.menu .chev { width: 1.25rem; height: 1.25rem; color: var(--c-ink-mute); }

/* 내 정보 */
.avatar {
  display: block;
  width: 7rem;
  height: 7rem;
  margin: var(--sp-2) auto 0;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    var(--rb-4),
    var(--rb-3),
    var(--rb-2),
    var(--rb-1),
    var(--rb-5),
    var(--rb-4)
  );
  transition: transform var(--d-fast) var(--e-out);
}

.avatar:active { transform: scale(0.95); }

.avatar-caption {
  margin: var(--sp-2) 0 var(--sp-6);
  color: var(--c-ink-mute);
  font-size: var(--t-caption);
  text-align: center;
}

.field-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-ink-mute);
  font-size: var(--t-caption);
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid #eeece6;
  font-weight: 700;
}

.field-row .val { color: var(--c-ink-mute); font-weight: 500; }

/* 알림 목록 */
.notilist { margin: 0; padding: 0; list-style: none; }

.notilist li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid #eeece6;
}

.notilist .dot {
  grid-row: span 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-primary-dim);
}

.notilist li[data-unread="true"] .dot { background: var(--c-primary); }
.notilist .t { margin: 0; font-weight: 700; }
.notilist .s { margin: 0; color: var(--c-ink-mute); font-size: var(--t-body-sm); }

.empty {
  padding: var(--sp-6) 0;
  color: var(--c-ink-mute);
  font-size: var(--t-body-sm);
  text-align: center;
}