* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    background: #f4f5f1;
    color: #1f2937;
}

.app {
    display: flex;
    min-height: 100vh;
}

/* 좌측 햄버거 메뉴 */
.sidebar {
    position: fixed;
    top: 56px;
    left: 12px;
    width: 190px;
    height: auto;
    background: #fff;
    z-index: 9999;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    border-radius: 18px;
    padding: 10px 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px 10px 18px;
}

.logo-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #eef7ea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.logo-text h1 {
    font-size: 22px;
    color: #2f5d37;
    margin-bottom: 4px;
}

.logo-text p {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.sidebar-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-menu li {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 15px;
    color: #374151;
    cursor: pointer;
}

.sidebar-menu li.active {
    background: #eaf3e7;
    color: #2f5d37;
    font-weight: 700;
}



/* 메인 */
.main-page {
    flex: 1;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* 공통 카드 */
.card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title-row h3 {
    font-size: 22px;
    color: #1f2937;
}

.section-title-row p {
    font-size: 10px;
    color: #6b7280;
}

/* 배너 */


.hero-subtitle {
    font-size: 15px;
    color: #4b5563;
    margin-bottom: 12px;
}


.hero-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 22px;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 15px;
    cursor: pointer;
}

.primary-btn {
    background: #6da85c;
    color: #fff;
    font-weight: 700;
}

#save-today-log {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 10px;
    width: auto;
}

.secondary-btn {
    background: #fff;
    color: #2f5d37;
    border: 1px solid #cdd9c4;
    font-weight: 600;
}


.hero-circle {
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: #ffffff;
    border: 16px solid #e7f0de;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-circle span {
    font-size: 70px;
}

/* 페이지 헤더 */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-greeting {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 4px;
}

.page-header h2 {
    font-size: 32px;
    color: #111827;
}

.page-chip {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    color: #6b7280;
}

/* 상단 정보 카드 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.info-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 20px;
}

.info-label {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 10px;
}

.info-card h3 {
    font-size: 28px;
    margin-bottom: 8px;
    color: #111827;
}

.info-card p:last-child {
    font-size: 14px;
    color: #6b7280;
}




/* 날씨 * 이 밑에 지워  */


/* 내 스케쥴 */
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.calendar-day {
    background: #f7f8f5;
    border-radius: 14px;
    text-align: center;
    padding: 16px 0;
    font-weight: 600;
    color: #4b5563;
}

.calendar-day.active {
    background: #dfeeda;
    color: #2f5d37;
    font-weight: 800;
}

/* 브리핑 */
.briefing-box {
    background: #f5f8ef;
    border: 1px solid #dfe7d7;
    border-radius: 18px;
    padding: 20px;
}

.briefing-box p {
    font-size: 16px;
    line-height: 1.8;
    color: #374151;
}

/* 2열 콘텐츠 */
.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.chat-bubble {
    border-radius: 16px;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.chat-bubble.user {
    background: #edf4fb;
}

.chat-bubble.leaf {
    background: #f7f8f5;
}

.chat-questions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.chat-questions button {
    border: none;
    background: #eef2f7;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
}

.progress-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
}

.progress-list li {
    font-size: 15px;
    color: #374151;
    display: flex;
    justify-content: space-between;
}

.progress-list strong {
    color: #2f5d37;
}

/* 하단 메뉴 */
.bottom-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.menu-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.menu-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eef6ea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.menu-card h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.menu-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}


.flow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.flow-tabs {
    display: flex;
    gap: 8px;
}

.flow-tab {
    border: none;
    background: #eef2f7;
    color: #374151;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
}

.flow-tab.active {
    background: #6da85c;
    color: #ffffff;
    font-weight: 700;
}

.today-log-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.log-item label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
}

.log-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;   /* ↓ 더 줄이기 */
}

.log-btn {
    border: none;
    background: #eef2f7;
    color: #374151;
    padding: 6px 10px;    /* 핵심 ↓ */
    border-radius: 999px;
    font-size: 11px;      /* 핵심 ↓ */
    cursor: pointer;
    line-height: 1.2;
}

.log-btn.active {
    background: #6da85c;
    color: #ffffff;
    font-weight: 600;     /* 700 → 살짝 낮추기 */
}

.today-log-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .today-log-grid {
        grid-template-columns: 1fr;
    }
}

html {
    scroll-behavior: smooth;
}

.sidebar-menu li {
    transition: all 0.2s ease;
}


.chat-input-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.chat-input-row input {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    outline: none;
}

.chat-input-row input:focus {
    border-color: #6da85c;
}

.chat-input-row button {
    border: none;
    background: #6da85c;
    color: white;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.quick-question {
    border: none;
    background: #eef2f7;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
}


.banner-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}



.hero-text {
  width: 55%;
}


.hero-text h2 {
  font-size: 22px;
  line-height: 1.3;
}

.banner-content {
    text-align: center;
  color: #1b2b1b;
}
.banner-content button {
  margin-top: 8px;
  padding: 6px 14px;
  border: none;
  background: #4caf50;
  color: white;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
}

.banner {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  background: #dfe5db;

  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-section {
  display: flex;
  gap: 20px;
  align-items: center;
}

.calendar-right {
  flex: 1;
}

.top-row {
  display: flex;
  gap: 20px;
}

/*.top-row > div {
  flex: 1; }   */


.calendar-card .calendar-week {
  display: flex;
  gap: 6px;
}

.summary-card {
  padding: 16px;
}

.today-summary-row {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.today-summary-row > div {
  flex: 1;
}

.score-card,
.cosmetic-list-card {
  padding: 20px;
}

.top-row {
  display: flex;
  gap: 20px;
}

/* 오늘 일정 */
.info-card {
  flex: 1.2;
}

/* 오늘 관리 요약 (조금 더 키움) */
.summary-card {
  flex: 1.4;
}

/* 내 스케쥴 (조금 줄임) */
.calendar-right {
  flex: 3.4;
}


/* 온보딩 css*/



.onboarding-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.onboarding-modal.hidden {
  display: none;
}

.onboarding-box {
  width: 420px;
  max-width: 90%;
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.onboarding-header h2 {
  font-size: 22px;
  margin: 0;
}

.close-btn {
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.onboarding-body {
  min-height: 180px;
}

#onboarding-question {
  font-size: 16px;
  margin-bottom: 18px;
  line-height: 1.5;
}

#onboarding-text-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 14px;
  box-sizing: border-box;
}

.onboarding-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-btn {
  width: auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid #d8e5d8;
  border-radius: 999px;
  background: #f7fbf7;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.option-btn.selected {
  background: #6cab55;
  border-color: #6cab55;
  color: #fff;
  font-weight: 600;
}

.onboarding-footer {
  margin-top: 20px;
  text-align: right;
}

#onboarding-next-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  background: #4caf50;
  color: white;
  cursor: pointer;
}

/* 상단바 */
/* ===== 상단바 4칸 구조: 메뉴 / 언어 / 로고 / 프로필 ===== */
.top-bar {
    position: relative;
    z-index: 1000;
    display: grid;
    grid-template-columns: 36px 54px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: #fff;
}

.top-bar {
    position: relative;
}

.menu-btn {
    grid-column: 1;
}

.language-selector {
    grid-column: 2;
    margin: 0;
    justify-self: start;
}

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    z-index: 1200;

    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 16px;
    font-weight: 700;

    white-space: nowrap;
}

.right-area {
    grid-column: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

.sidebar-start {
  margin: 14px 0 18px 0;
}






.today-date {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.date-start-btn {
    border: none;
    background: #4caf50;
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}



.drawer {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    padding: 20px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

/* ===== 상단바 / 햄버거 / 점3개 메뉴 최종본 ===== */

.top-bar {
    position: relative;
    z-index: 1000;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    padding: 12px;
    background: #fff;
}

.menu-btn,
.alarm-btn,
.more-btn {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    position: relative;
    z-index: 2000;
}


.right-area {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
    width: auto;
    position: relative;
    z-index: 1500;
}

.drawer {
    position: fixed;
    top: 56px;
    left: 12px;
    width: 190px;
    height: auto;
    background: #fff;
    z-index: 9999;
    padding: 10px 0;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    border-radius: 18px;
}

.drawer.hidden {
    display: none !important;
}

.drawer-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-content li {
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
}

.drawer-content li:hover {
    background: #f5f7f2;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 2000;
}

.more-menu {
    position: absolute;
    top: 56px;
    right: 12px;
    width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    z-index: 3000;
}

.more-menu p {
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
}

.more-menu p:hover {
    background: #f5f5f5;
}

.drawer.hidden,
.more-menu.hidden,
.hidden {
    display: none !important;
}

body {
    margin: 0;
    background: #f3f4f6;
    font-family: sans-serif;
}

.app-shell {
    width: 100%;
    max-width: 520px;
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
}

.drawer {
    transition: all 0.2s ease;
    transform: translateY(-10px);
    opacity: 0;
}

.drawer:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
}

.app-shell {
    position: relative;
}

.drawer {
    position: absolute;
}

.record-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.record-title h3 {
    margin: 0;
}

.record-title p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.briefing-content-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.briefing-content-row .score-card {
    width: 150px;
    flex-shrink: 0;
    border-radius: 18px;
    padding: 18px;
}

.briefing-content-row .briefing-box {
    flex: 1;
    margin: 0;
}

.briefing-content-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.briefing-content-row .score-card {
    width: 140px;
    flex: 0 0 140px;
    margin: 0;
}

.briefing-content-row .briefing-box {
    flex: 1;
    margin: 0;
}

.cosmetic-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.more-mini-btn {
    border: none;
    background: #eef2f7;
    color: #374151;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.bottom-tabbar {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
}

.quick-menu-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
}

.quick-menu-item .menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eef5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.quick-menu-item p {
    margin: 0;
    font-size: 11px;
    color: #374151;
}
.gauge-card {
    width: 170px;
    flex: 0 0 170px;
    padding: 18px 14px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: none;
    text-align: center;
}

.gauge-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

.gauge-wrap {
    position: relative;
    width: 120px;
    height: 82px;
    margin: 0 auto 10px;
}

.gauge-svg {
    display: block;
    width: 120px;
    height: 70px;
}

.gauge-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 8;
    stroke-linecap: round;
}

.gauge-fill {
    fill: none;
    stroke: #7bbd8a;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 78 100; /* 점수만큼 채움 */
}

.gauge-center {
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.gauge-score {
    font-size: 24px;
    font-weight: 800;
    color: #56a56a;
    line-height: 1;
}

.gauge-score span {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-left: 2px;
}

.gauge-status {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
}

.gauge-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 10px 0 12px;
}

.gauge-age {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

.briefing-content-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.score-card.gauge-card {
    width: 150px;
    min-width: 150px;
    padding: 14px 10px;
    border-radius: 18px;
    box-sizing: border-box;
    text-align: center;
    background: #ffffff;
}

.gauge-title {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.gauge-wrap {
    position: relative;
    width: 120px;
    height: 82px;
    margin: 0 auto;
}

.gauge-svg {
    width: 120px;
    height: 70px;
    display: block;
}

.gauge-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 8;
    stroke-linecap: round;
}

.gauge-fill {
    fill: none;
    stroke: #7bbd86;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 78 100;
}

.gauge-center {
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.gauge-score {
    font-size: 20px;
    font-weight: 800;
    color: #2f9e62;
    line-height: 1;
}

.gauge-score span {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
}

.gauge-status {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.gauge-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 10px 0;
}

.gauge-age {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.briefing-box {
    flex: 1;
    min-width: 0;
}

.brief-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.brief-tag {
    background: #dce8d6;
    color: #3f6b3d;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.title-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.voice-btn {
    margin-bottom: 8px;
    border: none;
    background: #eef2f7;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.chat-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.chat-input-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #d9ddd2;
    border-radius: 20px;
    padding: 10px 12px;
    box-sizing: border-box;
    min-height: 56px;
}

.chat-plus-btn,
.chat-mic-btn,
.chat-voice-btn {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: #4b5563;
    padding: 0;
    flex-shrink: 0;
}

#chat-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #111827;
    background: transparent;
}

#chat-input::placeholder {
    color: #9ca3af;
}


.calendar-section {
  display: flex;
  gap: 20px;
  align-items: center;
}

.calendar-right {
  flex: 1;
}

/* 내 스케쥴 */
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.calendar-day {
    background: #f7f8f5;
    border-radius: 14px;
    text-align: center;
    padding: 10px 0 12px;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    box-sizing: border-box;
    cursor: pointer;
}

.calendar-day.active {
    background: #dfeeda;
    color: #2f5d37;
}

.calendar-day .day-name {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    color: #9ca3af;
}

.calendar-day .day-date {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
}

.calendar-day.active .day-name {
    color: #5f8a62;
}

.calendar-day.active .day-date {
    color: #2f5d37;
}

.calendar-summary {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    line-height: 1.5;
}

.calendar-more-btn {
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.calendar-more-btn:hover {
    color: #374151;
}

.briefing-box {
    display: flex;
    flex-direction: column;
}

.briefing-box p {
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.65;
}

.briefing-box p:last-of-type {
    margin-bottom: 14px;
}

.briefing-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.brief-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.brief-tag {
    background: #dce8d6;
    color: #3f6b3d;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.voice-btn {
    border: none;
    background: #eef2f7;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.today-summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

/* 공통 카드 */
.flow-card,
.cosmetic-list-card {
    padding: 18px 16px;
    border-radius: 20px;
    box-sizing: border-box;
}

/* 피부 흐름 */
.flow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.flow-tabs {
    display: flex;
    gap: 6px;
}

.flow-tab {
    border: none;
    background: #eef2f7;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.flow-tab.active {
    background: #7fb166;
    color: #ffffff;
}

.flow-subtitle {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.flow-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.flow-tag {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e7efe1;
    color: #53724f;
    font-size: 11px;
    font-weight: 700;
}

.flow-main-text {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.55;
}

.flow-sub-text {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* 나의 화장품 */
.cosmetic-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.more-mini-btn {
    border: none;
    background: #eef2f7;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 999px;
    cursor: pointer;
}

.cosmetic-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cosmetic-tag {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.cosmetic-main-text {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.55;
}

.cosmetic-sub-text {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.bottom-tabbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.quick-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px 12px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
}

.menu-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef3e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.quick-menu-item p {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    line-height: 1.2;
}

/* 오늘의 피부 전략 */
.briefing-section {
    padding: 18px 16px;
}

.briefing-content-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 14px;
}

.briefing-box {
    flex: 1;
    min-width: 0;
    background: #f4f6ee;
    border: 1px solid #d9ddd2;
    border-radius: 18px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.briefing-box p {
    margin: 0 0 6px 0;
    line-height: 1.45;
    font-size: 15px;
    color: #1f2937;
}

.briefing-box p:last-of-type {
    margin-bottom: 8px;
}

.briefing-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 12px;
}

.brief-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.brief-tag {
    background: #dce8d6;
    color: #3f6b3d;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.voice-btn {
    border: none;
    background: #eef2f7;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 피부 흐름 */
.flow-box {
    background: #fbfcf8;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 16px;
}

.flow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.flow-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.flow-tabs {
    display: flex;
    gap: 6px;
}

.flow-tab {
    border: none;
    background: #eef2f7;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.flow-tab.active {
    background: #7fb166;
    color: #ffffff;
}

.flow-subtitle {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.flow-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.flow-tag {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e7efe1;
    color: #53724f;
    font-size: 11px;
    font-weight: 700;
}

.flow-main-text {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.55;
}

.flow-sub-text {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* 나의 화장품 */
.my-cosmetics-card {
    padding: 18px 16px;
    border-radius: 20px;
    margin-top: 14px;
}

.my-cosmetics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.my-cosmetics-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}

.my-cosmetics-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-cosmetic-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #eef2f7;
}

.my-cosmetic-item:first-child {
    border-top: none;
    padding-top: 0;
}

.my-cosmetic-left {
    flex: 1;
    min-width: 0;
}

.my-cosmetic-type {
    display: inline-block;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef3e8;
    color: #4f6f49;
    font-size: 11px;
    font-weight: 700;
}

.my-cosmetic-name {
    margin: 2px 0 2px 0;
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    line-height: 1.4;
}

.my-cosmetic-desc {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.detail-mini-btn {
    border: none;
    background: #eef2f7;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
}

/* 하단 탭 */
.bottom-tabbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.quick-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px 12px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
}

.menu-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef3e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.quick-menu-item p {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    line-height: 1.2;
}

/* 오늘의 피부 전략 */
.briefing-section {
    padding: 18px 16px;
}

.strategy-top-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 12px;
}

.gauge-card {
    width: 150px;
    min-width: 150px;
    flex-shrink: 0;
}

.flow-box {
    flex: 1;
    background: #fbfcf8;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 16px;
    box-sizing: border-box;
}

.full-width-briefing {
    width: 100%;
    background: #f4f6ee;
    border: 1px solid #d9ddd2;
    border-radius: 18px;
    padding: 16px;
    box-sizing: border-box;
}

.full-width-briefing p {
    margin: 0 0 10px 0;
    line-height: 1.7;
    font-size: 15px;
    color: #1f2937;
}

.full-width-briefing p:last-of-type {
    margin-bottom: 14px;
}

.briefing-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.brief-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.brief-tag {
    background: #dce8d6;
    color: #3f6b3d;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.voice-btn {
    border: none;
    background: #eef2f7;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
}

/* 피부 흐름 */
.flow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.flow-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.flow-tabs {
    display: flex;
    gap: 6px;
}

.flow-tab {
    border: none;
    background: #eef2f7;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.flow-tab.active {
    background: #7fb166;
    color: #ffffff;
}

.flow-subtitle {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.flow-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.flow-tag {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e7efe1;
    color: #53724f;
    font-size: 11px;
    font-weight: 700;
}

.flow-main-text {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.55;
}

.flow-sub-text {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.brief-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.brief-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.briefing-open-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background-color: #6fbf73;
    color: #fff;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

/* ===== 날씨 (NEW UI) ===== */

.weather-section {
    margin-top: 10px;
}

.weather-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* 카드 */
.weather-box {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px 16px;
    border: 1px solid #eef2eb;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* 상단 (아이콘 + 지역) */
.weather-label-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

.weather-icon {
    font-size: 18px;
    margin-top: 2px;
}

.weather-label-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.weather-label {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    font-weight: 600;
}

.weather-label-text strong {
    font-size: 15px;
    color: #2a3342;
}

/* 중간 (날씨 + 온도) */
.weather-main-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.weather-emoji {
    font-size: 26px;
}

.weather-main-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.weather-desc {
    font-size: 14px;
    color: #4b5563;
    margin: 0;
}

.weather-temp {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.weather-feels {
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
}

/* 하단 (미세먼지 / 자외선) */
.weather-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.weather-info p {
    margin: 0;
    font-size: 13px;
    color: #5f6b76;
}

.weather-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    cursor: pointer;
}


.weather-toggle-btn:hover {
    color: #111827;
}



.weather-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.weather-location-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.calendar-more-btn {
    text-decoration: none;
    font-size: 14px;
    color: #6b7280;
    font-weight: 600;
}

.calendar-more-btn:hover {
    color: #111827;
}

/* ===== 리프 기록 페이지 ===== */

.record-page {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f7f8f4;
    padding: 18px 14px 40px;
}




.record-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 18px;
    min-height: 42px;
}

.record-back-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border: 1px solid #dfe7d7;
    border-radius: 14px;
    background: #ffffff;
    color: #374151;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.record-header {
    position: relative;
    min-height: 42px;
    margin-bottom: 18px;
}

.record-back-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border: 1px solid #dfe7d7;
    border-radius: 14px;
    background: #ffffff;
    color: #374151;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.record-header-text {
    width: 100%;
    text-align: center;
}

.record-header-text h1 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.record-header-text p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.record-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.record-tab {
    height: 46px;
    border: 1px solid #dfe7d7;
    border-radius: 16px;
    background: #ffffff;
    color: #4b5563;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.record-tab.active {
    background: #eef6e8;
    border-color: #b8d59f;
    color: #2f5d2f;
}


/* ===== record 페이지 달력 카드 전체 ===== */
.record-calendar-card {
    background: #ffffff;
    border: 1px solid #e7ebdf;
    border-radius: 22px;
    padding: 14px 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    margin-bottom: 14px;
}

/* 달력 상단: 이전/월제목/다음 */
.record-calendar-top {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* 월 제목 */
.record-calendar-top h2 {
    margin: 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
    color: #27452d;
    font-weight: 800;
}

/* 좌우 화살표 버튼 */
.calendar-arrow {
    width: 32px;
    height: 32px;
    border: 1px solid #dfe7d7;
    border-radius: 10px;
    background: #f8faf5;
    color: #4b5563;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}

/* 요일 줄 */
.record-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}

/* 요일 텍스트 */
.record-week-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}

/* 날짜 그리드 */
.record-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

/* 날짜 버튼
   기존 aspect-ratio: 1/1 제거 -> 높이 줄이는 핵심 */
.record-date {
    width: 100%;
    height: 40px;
    min-width: 0;
    border: 1px solid #e5eadf;
    border-radius: 12px;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

/* 이전달/다음달 날짜 */
.record-date.muted {
    color: #c0c7d1;
    background: #fafbf8;
}

/* 선택한 날짜 */
.record-date.selected {
    background: #e7f1dd;
    border-color: #bdd6a8;
    color: #2f5d2f;
}

/* 선택 날짜 문구 영역 */
.record-selected-date {
    margin-bottom: 14px;
    padding: 0 2px;
}

/* 선택 날짜 텍스트 */
.record-selected-date p {
    margin: 0;
    font-size: 15px;
    color: #4b5563;
}

/* 선택 날짜 강조 */
.record-selected-date strong {
    color: #1f2937;
}

/* 다가오는 7일 일정 상단 */
.record-upcoming-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0 2px;
}

/* 다가오는 7일 일정 제목 */
.record-upcoming-top h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

/* 우측 보조 문구 */
.record-upcoming-top span {
    font-size: 13px;
    color: #94a3b8;
    white-space: nowrap;
}

/* 일정 카드 리스트 */
.record-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 일정 카드 */
.record-schedule-card {
    background: #ffffff;
    border: 1px solid #e7ebdf;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* 일정 카드 상단 */
.record-schedule-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

/* 날짜 */
.record-schedule-head strong {
    display: block;
    font-size: 17px;
    color: #1f2937;
    margin-bottom: 4px;
}

/* 피부 상태 */
.record-schedule-head p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

/* 알림 버튼 */
.record-alarm-btn {
    border: none;
    background: #eef6e8;
    color: #2f5d2f;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* 일정/메모 줄 */
.record-schedule-line {
    margin: 0 0 6px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
}

/* 마지막 줄 아래 여백 제거 */
.record-schedule-line:last-child {
    margin-bottom: 0;
}



/* ===== 홈 브리핑 / 음성 대화 / 하단 데이터 카드 ===== */



.leaf-briefing-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.leaf-briefing-mascot-wrap {
    flex-shrink: 0;
    width: 76px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.leaf-briefing-mascot {
    width: 68px;
    height: auto;
    display: block;
}

.leaf-briefing-content {
    flex: 1;
    min-width: 0;
}

.leaf-briefing-greeting {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.35;
}

.leaf-briefing-desc {
    margin: 0 0 12px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}

.leaf-briefing-points {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.leaf-briefing-points p {
    margin: 0;
    font-size: 13px;
    color: #5b6472;
    line-height: 1.5;
}



.leaf-briefing-more-btn:hover {
    color: #355f26;
}


.leaf-briefing-audio-btn:hover {
    background: #dcebca;
}

/* 대화 카드 */


/* 퀵 질문 */

.leaf-chat-quick-btn:hover {
    background: transparent;
    color: #31435a;
}

/* 음성 + 입력 */

.leaf-chat-input::placeholder {
    color: #a1a8b3;
}


/* 하단 카드 2개 */
.leaf-skin-data-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.leaf-mini-card {
    background: #ffffff;
    border: 1px solid #e7ebdf;
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.leaf-mini-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

.leaf-mini-card-top h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.35;
}

.leaf-mini-more-btn {
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: #7b8794;
    white-space: nowrap;
}

.leaf-score-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.leaf-score-number {
    font-size: 34px;
    font-weight: 800;
    color: #27452d;
    line-height: 1;
}

.leaf-score-number span {
    font-size: 16px;
    color: #8b95a1;
    margin-left: 2px;
}

.leaf-score-badge {
    background: #e7f1dd;
    color: #355f26;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.leaf-mini-info {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.leaf-mini-info li {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.45;
}

.leaf-analysis-tabs {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
}

.leaf-analysis-tab {
    border: none;
    background: #f1f4ee;
    color: #7b8794;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 11px;
    border-radius: 999px;
    cursor: pointer;
}

.leaf-analysis-tab.active {
    background: #91c96f;
    color: #ffffff;
}

.leaf-analysis-sub {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #4b5563;
}

.leaf-analysis-graph {
    height: 78px;
    border-radius: 14px;
    background: #f7faf4;
    border: 1px dashed #dbe6d1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa3af;
    font-size: 13px;
    margin-bottom: 10px;
}

.leaf-analysis-summary {
    margin: 0;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.55;
}

/* 모바일에서 아주 좁을 때 */
@media (max-width: 420px) {
    .leaf-briefing-main {
        gap: 10px;
    }

    .leaf-briefing-mascot-wrap {
        width: 62px;
    }

    .leaf-briefing-mascot {
        width: 56px;
    }

    .leaf-briefing-greeting {
        font-size: 18px;
    }

    .leaf-skin-data-row {
        grid-template-columns: 1fr;
    }

    .leaf-chat-voice-row {
        align-items: stretch;
    }

    .leaf-chat-input-row {
        padding-right: 6px;
    }
}




.chat-message.user {
    align-self: flex-end;
    background: #eef3ff;
    color: #1f2937;
}




.chat-message.user {
    align-self: flex-end;
    background: #eef3ff;
    color: #1f2937;
}


/* 오늘의 피부 요인 - 한 줄형 최종 */
.today-log-section {
    padding: 24px 22px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5eadf;
}

.record-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.record-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

.record-title p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.today-log-actions {
    flex-shrink: 0;
}

.today-log-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.log-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px 0;
}

.log-row label {
    flex: 0 0 96px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #2f3a2f;
    line-height: 1.2;
}

.log-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.log-btn {
    border: none;
    outline: none;
    background: #e9edf1;
    color: #4b5563;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.log-btn:hover {
    background: #dde4e8;
}

.log-btn:active {
    transform: scale(0.97);
}

.log-btn.active {
    background: #7aaa5a;
    color: #ffffff;
}

#save-today-log.primary-btn {
    border: none;
    background: #7aaa5a;
    color: #ffffff;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

#save-today-log.primary-btn:hover {
    opacity: 0.92;
}

#save-today-log.primary-btn:active {
    transform: scale(0.98);
}

/* 모바일 */
@media (max-width: 640px) {
    .today-log-section {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .record-header {
        align-items: flex-start;
    }

    .today-log-actions {
        width: 100%;
    }

    #save-today-log.primary-btn {
        width: 100%;
    }

    .log-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .log-row label {
        flex: none;
    }

    .log-options {
        width: 100%;
    }
}

.my-cosmetics-viewport {
    overflow: hidden;
    height: 72px; /* 3줄 기준 */
}

.my-cosmetics-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease;
}

.my-cosmetic-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    font-size: 14px;
}

.cos-type {
    background: #e7f1e4;
    color: #5e8d4a;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.cos-text {
    color: #374151;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analysis-range-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.analysis-range-btn {
    border: none;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
}

.analysis-range-btn.active {
    background: #7aaa5a;
    color: #fff;
}

.analysis-graph-box {
    margin-top: 12px;
    height: 160px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f5f8ef 0%, #ffffff 100%);
    border: 1px dashed #dbe4d3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 14px;
}

.analysis-report-card {
    background: #ffffff;
    border: 1px solid #e5eadf;
    border-radius: 16px;
    padding: 16px;
    margin-top: 12px;
}

.analysis-report-line {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #374151;
}

.analysis-report-line:last-child {
    margin-bottom: 0;
}


.cosmetic-category {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cosmetic-icon {
    font-size: 14px;
}

.cosmetic-type-text {
    font-size: 12px;
    font-weight: 700;
    color: #5f8b45;
}

@media (max-width: 640px) {
    .cosmetics-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cosmetics-sort {
        width: 100%;
    }
}


/* =========================
   내 화장품 페이지
========================= */

.cosmetics-page {
    max-width: 430px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.cosmetics-tabs {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.cosmetics-tab {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 14px;
    background: #eef0ea;
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.cosmetics-tab.active {
    background: #dceac7;
    color: #223322;
}



.cosmetics-list {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid #e3e7dc;
    border-radius: 18px;
    overflow: hidden;
}

.cosmetic-list-item {
    padding: 14px 12px;
    border-bottom: 1px solid #edf1e8;
}

.cosmetic-list-item:last-child {
    border-bottom: none;
}

.cosmetic-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cosmetic-index {
    width: 36px;
    font-size: 12px;
    font-weight: 700;
    color: #9aa3af;
    flex-shrink: 0;
}

.cosmetic-category {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 74px;
    flex-shrink: 0;
}

.cosmetic-icon {
    font-size: 14px;
    line-height: 1;
}

.cosmetic-type-text {
    font-size: 12px;
    font-weight: 700;
    color: #5f8b45;
    line-height: 1;
}

.cosmetic-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    word-break: keep-all;
    flex: 1;
}

.cosmetic-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-left: 112px;
    gap: 10px;
}

.cosmetic-date {
    font-size: 12px;
    color: #8a94a6;
    flex-shrink: 0;
}

.cosmetic-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;   /* 🔥 핵심 */
}

.cosmetic-action-btn {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
}

.cosmetic-action-btn.feature {
    color: #5f8b45;
}

.cosmetic-action-btn.danger {
    color: #b45309;
}

@media (max-width: 640px) {
    .cosmetic-bottom-row {
        padding-left: 112px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .cosmetic-actions {
        flex-wrap: wrap;
    }
}

.cosmetic-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* 🔥 양쪽 정렬 */
    gap: 10px;
}

.cosmetic-sub-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cosmetic-date {
    font-size: 12px;
    color: #8a94a6;
    flex-shrink: 0;
}

.cosmetic-feature-btn {
    border: none;
    background: #edf5e6;
    color: #5f8b45;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.cosmetic-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cosmetic-action-btn {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
}

.cosmetic-action-btn.danger {
    color: #b45309;
}

@media (max-width: 640px) {
    .cosmetic-bottom-row {
        padding-left: 112px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .cosmetic-sub-left {
        width: 100%;
    }

    .cosmetic-actions {
        margin-left: 0;
    }
}

.cosmetics-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.cosmetics-search {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 1px solid #d9dfd1;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    background: #ffffff;
    box-sizing: border-box;
}

.cosmetics-sort {
    flex-shrink: 0;
    width: 110px;
    height: 42px;
    border: 1px solid #d9dfd1;
    border-radius: 12px;
    padding: 0 10px;
    font-size: 13px;
    background: #ffffff;
    color: #111827;
    box-sizing: border-box;
    appearance: auto;
}

.cosmetics-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.cosmetics-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cosmetics-search {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 1px solid #d9dfd1;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    background: #ffffff;
    box-sizing: border-box;
}

.cosmetics-search-btn {
    flex-shrink: 0;
    height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    background: #dceac7;
    color: #223322;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cosmetics-sort {
    flex-shrink: 0;
    width: 110px;
    height: 42px;
    border: 1px solid #d9dfd1;
    border-radius: 12px;
    padding: 0 10px;
    font-size: 13px;
    background: #ffffff;
    color: #111827;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .cosmetics-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cosmetics-search-wrap {
        width: 100%;
    }

    .cosmetics-sort {
        width: 100%;
    }
}


/* 특징보기 모달 */
.feature-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.38);
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
}

.feature-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-modal-content {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: #ffffff;
    border-radius: 20px;
    padding: 22px 18px 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.feature-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.feature-modal-content h3 {
    margin: 0;
    padding-right: 34px;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    line-height: 1.4;
}

.feature-modal-category {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: #5f8b45;
}

.feature-modal-section {
    margin-top: 18px;
}

.feature-modal-section h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.feature-modal-section p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
    word-break: keep-all;
}

/*화장품 추천용 */

.cosmetics-empty-state {
    margin-top: 12px;
    background: #ffffff;
    border: 1px solid #e3e7dc;
    border-radius: 18px;
    padding: 26px 18px;
    text-align: center;
}

.cosmetics-empty-state h4 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    color: #1f2937;
}

.cosmetics-empty-state p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
}

.record-tabs {
  position: relative;
  z-index: 9999;
}

.record-tab {
  position: relative;
  z-index: 10000;
}



.record-tabs {
  position: relative;
  z-index: 9999;
}

.record-tab {
  position: relative;
  z-index: 10000;
}

.record-tabs {
  display: flex;
  gap: 12px;
}

.record-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid #d7dfcf;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: #31435a;
  font-weight: 700;
}

.record-tab.active {
  background: #eef6e5;
  border-color: #b8d39a;
  color: #5f7f3a;
}

.leaf-chat-message-preview {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
    background: transparent;
    border: none;
    padding: 0;
}

.leaf-chat-mascot-wrap {
    width: 64px;
    height: 54px;
    background: #ffffff;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.leaf-chat-mascot {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
}

.leaf-chat-bubble {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 2px 0 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: #31435a;
    max-width: 100%;
    box-shadow: none;
}

.leaf-chat-message-preview {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 16px;
}

.leaf-chat-quick-row {
    display: flex;
    gap: 8px;
}

.leaf-chat-quick-btn {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 8px;
    font-size: 12px;
    border-radius: 18px;
}

/* 통합 카드 */
.leaf-brief-chat-card {
    background: #f9fbf6;
    border: 1px solid #e7ecdf;
    border-radius: 24px;
    padding: 14px 14px 12px;
    box-shadow: none;
    margin-bottom: 14px;
}

/* 상단 브리핑 */
.leaf-briefing-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.leaf-briefing-mascot-wrap {
    width: 58px;
    height: 58px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.leaf-briefing-mascot {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
}

.leaf-briefing-content {
    flex: 1;
    min-width: 0;
}

.leaf-briefing-greeting {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: #24364b;
    line-height: 1.4;
}

.leaf-briefing-desc {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.65;
    color: #425466;
}

.leaf-briefing-points p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #5a6472;
}

.leaf-briefing-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.leaf-briefing-more-btn {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: #6b8b45;
    cursor: pointer;
}

.leaf-briefing-audio-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: #eef5e6;
    color: #4d6c36;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.leaf-brief-chat-divider {
    height: 1px;
    background: #e8edde;
    margin: 12px 0 10px;
}


/* 프리뷰 문구 */
.leaf-chat-message-preview {
    margin-bottom: 6px;
}

.leaf-chat-message-preview.no-mascot {
    margin: 0 0 6px 72px;
}

.leaf-chat-bubble {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #31435a;
    box-shadow: none;
}

/* 퀵 질문 */
.leaf-chat-quick-row {
    display: flex;
    gap: 14px;
    margin: 2px 0 10px 72px;
}

.leaf-chat-quick-btn {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 2px 0;
    font-size: 12px;
    font-weight: 600;
    color: #7b8591;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
}

.leaf-chat-quick-btn:hover {
    background: transparent;
    color: #31435a;
}

/* 입력 영역 */
.leaf-chat-voice-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.leaf-chat-mic-main-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 999px;
    background: #6fbe5c;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none;
}

.leaf-chat-listen-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: #f3f7ee;
    color: #5c7a46;
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
}

.leaf-chat-input-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e8ede0;
    border-radius: 16px;
    padding: 7px 7px 7px 11px;
    min-width: 0;
}

.leaf-chat-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #374151;
    outline: none;
}

.leaf-chat-input::placeholder {
    color: #a1a8b3;
}

.leaf-chat-send-btn {
    border: none;
    background: #eef4e6;
    color: #5a743f;
    padding: 8px 11px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}




/* 통합 리프 홈 카드 */
.leaf-home-card {
    background: #f8faf5;
    border: 1px solid #e7ecdf;
    border-radius: 26px;
    padding: 16px 16px 14px;
    box-shadow: none;
    margin-bottom: 14px;
}

/* 상단 브리핑 */
.leaf-briefing-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.leaf-briefing-mascot-wrap {
    width: 58px;
    height: 58px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.leaf-briefing-mascot {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
}

.leaf-briefing-content {
    flex: 1;
    min-width: 0;
}

.leaf-briefing-greeting {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: #24364b;
    line-height: 1.4;
}

.leaf-briefing-desc {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.65;
    color: #425466;
}

.leaf-briefing-points p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #5a6472;
}

/* 액션 텍스트 줄 */
.leaf-home-actions {
    display: flex;
    gap: 18px;
    margin: 18px 0 16px 72px;
    padding-top: 12px;
    border-top: 1px solid #e7ecdf;
}

.leaf-home-action-btn {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #7c8794;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
}

.leaf-home-action-btn:hover {
    color: #31435a;
}

/* 입력 영역 */
.leaf-home-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

/* 마이크/듣기 버튼 */
.leaf-home-icon-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: #6f7b88;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none;
    padding: 0;
}

.leaf-home-icon-btn:hover {
    background: #f1f4ed;
    color: #31435a;
}

/* 입력 박스 */
.leaf-home-input-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e5ebdc;
    border-radius: 18px;
    padding: 8px 8px 8px 12px;
    min-width: 0;
}

.leaf-home-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #374151;
    outline: none;
}

.leaf-home-input::placeholder {
    color: #a1a8b3;
}

.leaf-home-send-btn {
    border: none;
    background: #eef4e6;
    color: #5a743f;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}


.weather-info {
    margin-top: 10px;
}

.weather-info p {
    margin: 0 0 4px 0;
    font-size: 12px;
    line-height: 1.5;
    color: #5b6573;
}

.weather-info p:last-child {
    margin-bottom: 0;
}

.weather-divider {
    margin: 0 6px;
    color: #c3c9d1;
}

.weather-info span {
    white-space: nowrap;
}

.weather-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.weather-modal.show {
    display: block;
}

.weather-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 28, 20, 0.35);
}

.weather-modal-sheet {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 430px);
    max-height: 86vh;
    overflow-y: auto;
    background: #f8faf5;
    border: 1px solid #e4eadc;
    border-radius: 26px;
    padding: 18px 16px 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

.weather-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.weather-modal-label {
    margin: 0 0 4px;
    font-size: 12px;
    color: #7d8793;
}

.weather-modal-title {
    margin: 0;
    font-size: 22px;
    color: #24364b;
    font-weight: 800;
}

.weather-modal-close {
    border: none;
    background: transparent;
    font-size: 20px;
    color: #6e7884;
    cursor: pointer;
    padding: 2px 4px;
}

.weather-modal-summary {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e6ecdf;
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 16px;
}

.weather-modal-current {
    display: flex;
    align-items: center;
    gap: 10px;
}

.weather-modal-emoji {
    font-size: 28px;
}

.weather-modal-desc {
    margin: 0 0 4px;
    font-size: 14px;
    color: #5b6573;
}

.weather-modal-temp {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #24364b;
}

.weather-modal-temp span {
    font-size: 14px;
    font-weight: 600;
    color: #8c95a0;
    margin-left: 4px;
}

.weather-modal-summary-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    text-align: right;
}

.weather-modal-summary-right p {
    margin: 0;
    font-size: 13px;
    color: #5b6573;
}

.weather-modal-section {
    margin-bottom: 16px;
}

.weather-modal-section-title-row h4 {
    margin: 0 0 10px;
    font-size: 15px;
    color: #24364b;
}

.weather-hourly-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.weather-hour-item {
    min-width: 82px;
    background: #ffffff;
    border: 1px solid #e6ecdf;
    border-radius: 18px;
    padding: 10px 8px;
    text-align: center;
    flex-shrink: 0;
}

.weather-hour-time,
.weather-hour-icon,
.weather-hour-temp,
.weather-hour-rain {
    margin: 0;
}

.weather-hour-time {
    font-size: 12px;
    color: #7d8793;
    margin-bottom: 6px;
}

.weather-hour-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.weather-hour-temp {
    font-size: 18px;
    font-weight: 700;
    color: #24364b;
    margin-bottom: 4px;
}

.weather-hour-rain {
    font-size: 11px;
    color: #7d8793;
}

.weather-week-list {
    background: #ffffff;
    border: 1px solid #e6ecdf;
    border-radius: 20px;
    overflow: hidden;
}

.weather-week-item {
    display: grid;
    grid-template-columns: 42px 34px 1fr auto;
    grid-template-areas:
        "day icon desc temp"
        "day icon extra temp";
    gap: 2px 6px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2e8;
    align-items: center;
}

.weather-week-item:last-child {
    border-bottom: none;
}

.weather-week-day {
    grid-area: day;
    font-size: 14px;
    font-weight: 700;
    color: #24364b;
}

.weather-week-icon {
    grid-area: icon;
    font-size: 18px;
}

.weather-week-desc {
    grid-area: desc;
    font-size: 14px;
    color: #445160;
}

.weather-week-temp {
    grid-area: temp;
    font-size: 14px;
    font-weight: 700;
    color: #24364b;
    text-align: right;
}

.weather-week-extra {
    grid-area: extra;
    font-size: 12px;
    color: #7d8793;
}

.weather-modal-footer {
    padding-top: 2px;
}

.weather-modal-footer p {
    margin: 0 0 6px;
    font-size: 12px;
    color: #7d8793;
    line-height: 1.5;
}

.weather-modal-footer p:last-child {
    margin-bottom: 0;
}

/* 날씨 모달 자연스럽게 올라오게  */

.weather-modal-sheet {
    transform: translate(-50%, 100%);
    transition: transform 0.35s ease;
}

.weather-modal.show .weather-modal-sheet {
    transform: translate(-50%, -50%);
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 1px;
}

.sidebar-menu a {
    display: block;
    padding: 8px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2; 
}

.sidebar-menu a.active {
    background: #dfe7d7;
    color: #2f5d34;
}

.sidebar-menu a:hover {
    background: #edf3e8;
}

/* 오른쪽 점... 메뉴 */

.more-menu a {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    color: #374151;
    font-size: 15px;
}

.more-menu a:hover {
    background: #f3f4f6;
}

.more-menu button {
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 15px;
    color: #ef4444;
    cursor: pointer;
}

.profile-page {
    max-width: 420px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    background: #ffffff;
}

.profile-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1f2937;
}

.profile-group {
    margin-bottom: 18px;
}

.profile-group label,
.profile-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #374151;
}

.profile-group input,
.profile-group select,
.profile-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
}

.profile-check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 14px;
    color: #374151;
}

.profile-check-list label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}

.profile-actions {
    margin-top: 28px;
}

#save-profile-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: #dfe7d7;
    color: #2f5d34;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}


.settings-page {
    max-width: 420px;
    margin: 0 auto;
    padding: 24px 20px;
}

.settings-group {
    margin-bottom: 20px;
    font-size: 14px;
    color: #374151;
}

.settings-group h3 {
    margin-bottom: 6px;
}

.settings-group ul {
    padding-left: 16px;
}

/******* 내 피부 사진************************** */
/* ===== photo page ===== */

.photo-page {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f7f8f4;
    padding: 18px 16px 40px;
}

.photo-header {
    margin-bottom: 20px;
}

.photo-header h1 {
    font-size: 28px;
    margin-bottom: 8px;
    color: #1f2937;
}

.photo-header p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}



.photo-page .card {
    width: 100%;
}

.photo-page .card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.photo-page h3 {
    font-size: 22px;
    margin-bottom: 14px;
    color: #1f2937;
}

.photo-page h4 {
    font-size: 16px;
    margin: 14px 0 8px;
    color: #1f2937;
}

.photo-page input[type="date"],
.photo-page select,
.photo-page textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
}

.photo-page input[type="file"] {
    display: block;
    margin-top: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.photo-page textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.6;
}

.photo-page button {
    background: #f28c28;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.photo-page button:hover {
    opacity: 0.92;
}

.photo-date-info {
    margin-top: 12px;
    font-size: 14px;
    color: #374151;
}

.photo-date-result,
.recent-photo-list,
.photo-preview-list {
    min-height: 180px;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
    padding: 14px;
    background: #fafafa;
    margin-top: 12px;
}

.photo-preview-item,
.photo-record-item {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.photo-preview-item img,
.photo-record-item img {
    width: 100%;
    max-width: 180px;
    border-radius: 10px;
    display: block;
    margin-top: 8px;
}

.photo-zone-select-wrap {
    margin: 12px 0;
}

.photo-action-row {
    display: flex;
    gap: 10px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.photo-policy-text {
    margin-top: 12px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
}

#load-photo-date-btn,
#photo-more-btn {
    margin-top: 10px;
}

@media (max-width: 1100px) {
    .photo-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== photo tabs ===== */
.photo-tabs {
    display: flex;
    gap: 10px;
    margin: 20px 0 24px;
    flex-wrap: wrap;
}

.photo-tabs .photo-tab {
    min-width: 150px;
    padding: 14px 20px;
    border: 1px solid #d9d9d9;
    border-radius: 14px;
    background: #f7f7f7 !important;
    color: #222 !important;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}

.photo-tabs .photo-tab:hover {
    background: #f0f4ea !important;
    color: #222 !important;
}

.photo-tabs .photo-tab.active {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 2px solid #c7d9a7;
    box-shadow: 0 0 0 4px rgba(199, 217, 167, 0.18);
}

.photo-tab-panel {
    display: none;
    width: 100%;
}

.photo-tab-panel.active {
    display: block;
}

/* 분석 패널만 숨김 */
.is-hidden {
    display: none;
}

#photo-tab-calendar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ===== photo 페이지 (record 복사) ===== */

.photo-page {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f7f8f4;
    padding: 18px 16px 40px;
}

.photo-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 18px;
    min-height: 42px;
}

.photo-back-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border: 1px solid #dfe7d7;
    border-radius: 14px;
    background: #ffffff;
    color: #374151;
    font-size: 24px;
    cursor: pointer;
}

.photo-header-text {
    width: 100%;
    text-align: center;
}

.photo-header-text h1 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.photo-header-text p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.photo-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.photo-tab {
    height: 46px;
    border: 1px solid #dfe7d7;
    border-radius: 16px;
    background: #ffffff;
    color: #4b5563;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.photo-tab.active {
    background: #eef6e8;
    border-color: #b8d59f;
    color: #2f5d2f;
}

/* ===== photo 카드 공통 ===== */
.photo-card,
.photo-calendar-card {
    background: #ffffff;
    border: 1px solid #e7ebdf;
    border-radius: 24px;
    padding: 18px 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    margin-bottom: 16px;
}
/* ===== photo 달력 ===== */
.photo-calendar-top {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.photo-calendar-top h2 {
    margin: 0;
    text-align: center;
    font-size: 22px;
    line-height: 1.2;
    color: #27452d;
    font-weight: 800;
}

.calendar-arrow {
    width: 36px;
    height: 36px;
    border: 1px solid #dfe7d7 !important;
    border-radius: 12px;
    background: #f8faf5 !important;
    color: #4b5563 !important;
    font-size: 18px;
    cursor: pointer;
    padding: 0 !important;
    box-shadow: none !important;
}

.photo-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.photo-week-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
}

.photo-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

/* ===== photo 날짜 버튼 ===== */

.photo-date { position: relative !important; }

.photo-date {
    position: relative !important;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border: 1px solid #e5eadf !important;
    border-radius: 14px;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}


.photo-date:hover {
    background: #f8faf5 !important;
}

.photo-date.muted {
    color: #c0c7d1 !important;
    background: #fafbf8 !important;
}

.photo-date.selected {
    background: #e7f1dd !important;
    border-color: #bdd6a8 !important;
    color: #2f5d2f !important;
}

/* 사진 있는 날짜 숫자 표시 */
.photo-date-badge {
    position: absolute;
    right: 3px;
    bottom: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f28c28;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    z-index: 5;
}

/* ===== 선택 날짜 텍스트 ===== */
.photo-selected-date {
    margin-bottom: 18px;
    padding: 0 2px;
}

.photo-selected-date p {
    margin: 0;
    font-size: 16px;
    color: #4b5563;
}

.photo-selected-date strong {
    color: #1f2937;
}


/* 6개 사진 슬롯 */
.photo-slot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.photo-slot-label {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
    text-align: center;
}

.photo-slot-box {
    height: 110px;
    border: 1px dashed #cfd8c5;
    border-radius: 16px;
    background: #fafbf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #9aa4b2;
    text-align: center;
    padding: 8px;
}


.photo-calendar-card {
    position: relative;
    z-index: 10;
}

.photo-date-badge {
    z-index: 20 !important;
}
/* ************************** */


/* Spring Leaf 핵심 버튼 컬러 */
:root {
    --leaf-green: #b8d59f;
    --leaf-green-deep: #6f9656;
    --leaf-green-bg: #eef6e8;
    --leaf-border: #dfe7d7;
    --leaf-text: #2f5d2f;
}

/* 분석 버튼 영역 */
.photo-analysis-action {
    display: flex;
    justify-content: center;
    margin: 18px 0 14px;
}

.photo-analysis-toggle-btn {
    width: 100%;
    max-width: 320px;
    height: 48px;
    border: 1px solid var(--leaf-green);
    border-radius: 18px;
    background: var(--leaf-green-bg);
    color: var(--leaf-text);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(111, 150, 86, 0.12);
}

.photo-analysis-toggle-btn:hover {
    background: #e7f1dd;
}

/* 분석 패널 */
.photo-analysis-panel {
    margin-top: 8px;
}

.photo-analysis-box {
    background: #ffffff;
    border: 1px solid #e7ebdf;
    border-radius: 20px;
    padding: 18px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.photo-analysis-box h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: #1f2937;
}

.photo-analysis-box p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}

.photo-analysis-box p:last-child {
    margin-bottom: 0;
}

.photo-analysis-wrapper {
    margin: 18px 0;
}

.photo-analysis-action {
    display: flex;
    justify-content: center;
}

.photo-analysis-toggle-btn {
    width: 100%;
    max-width: 320px;
    height: 48px;
    border: none !important;
    border-radius: 18px;
    background: #e7f1dd !important;
    color: #2f5d2f !important;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.photo-analysis-panel {
    margin-top: 14px;
}

.photo-analysis-box {
    background: #ffffff;
    border: 1px solid #e7ebdf;
    border-radius: 20px;
    padding: 18px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.hidden {
    display: none !important;
}

/* 피부 분석 버튼 위아래 간격 조정 */
.photo-analysis-wrapper {
    margin: 14px 0 20px !important;  /* 위 공간 50% 줄임 */
}

/* 버튼 가운데 정렬 유지 */
.photo-analysis-toggle-btn {
    margin: 0 auto !important;
    display: block;
}

/* 버튼 아래 분석 박스 간격 */
.photo-analysis-panel {
    margin-top: 16px;
}

.photo-analysis-wrapper {
    margin-top: 14px !important;
}

/* 사진 슬롯 카드 아래 간격 줄이기 */
.photo-slot-card {
    margin-bottom: 4px !important;
}

/* 분석 버튼 영역 */
.photo-analysis-wrapper {
    margin: 4px 0 20px !important;
}

/* 버튼 */
.photo-analysis-toggle-btn {
    margin: 0 auto !important;
    display: block;
}

/* 버튼 아래 분석 박스 */
.photo-analysis-panel {
    margin-top: 16px;
}

/* ===== photo 탭 전환 강제 ===== */
.photo-tab-panel {
    display: none !important;
    width: 100%;
}

.photo-tab-panel.active {
    display: block !important;
}

/* 분석 패널 숨김 */
.is-hidden {
    display: none !important;
}


/* 사진촬영  */
.photo-capture-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.photo-capture-btn {
    width: 100%;
    max-width: 320px;
    padding: 14px;
    background: #A8D5BA; /* 🌱 스프링리프 */
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
}

.photo-upload-link {
    font-size: 14px;
    color: #888;
    cursor: pointer;
}

.preview-img {
    width: 100%;
    border-radius: 12px;
    margin: 12px 0;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.slot {
    height: 100px;
    border: 1px dashed #ccc;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.save-btn {
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    background: #A8D5BA;
    border-radius: 10px;
    border: none;
}

.analysis-btn {
    width: 100%;
    padding: 14px;
    background: #A8D5BA;
    border-radius: 12px;
    margin-top: 16px;
}

.analysis-panel {
    margin-top: 12px;
}

.hidden {
    display: none;
}

.photo-hidden-input {
    display: none;
}

.photo-capture-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.photo-capture-btn {
    width: 100%;
    max-width: 320px;
    padding: 14px;
    background: #e7f1dd;
    border: 1px solid #b8d59f;
    border-radius: 14px;
    text-align: center;
    font-weight: 700;
    color: #2f5d2f;
    cursor: pointer;
}

.photo-upload-link {
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
    text-decoration: underline;
}

.preview-img {
    width: 100%;
    border-radius: 12px;
    margin: 12px 0;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.slot {
    height: 100px;
    border: 1px dashed #cfd8c5;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #4b5563;
    background: #fafbf8;
    text-align: center;
}

.slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.save-btn {
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    background: #e7f1dd;
    color: #2f5d2f;
    border: 1px solid #b8d59f;
    border-radius: 12px;
    font-weight: 700;
}

.photo-analysis-wrapper {
    margin: 12px 0 18px;
}

.photo-analysis-action {
    display: flex;
    justify-content: center;
}

.photo-analysis-toggle-btn {
    width: 100%;
    max-width: 320px;
    height: 48px;
    border: none !important;
    border-radius: 18px;
    background: #e7f1dd !important;
    color: #2f5d2f !important;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.photo-analysis-panel {
    margin-top: 14px;
}

.photo-analysis-box {
    background: #ffffff;
    border: 1px solid #e7ebdf;
    border-radius: 20px;
    padding: 18px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.hidden,
.is-hidden {
    display: none !important;
}

.photo-hidden-input {
    display: none;
}

.photo-guide-text {
    margin: 6px 0 14px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.photo-capture-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.photo-capture-btn {
    width: 100%;
    max-width: 320px;
    padding: 14px;
    background: #e7f1dd;
    border: 1px solid #b8d59f;
    border-radius: 14px;
    text-align: center;
    font-weight: 700;
    color: #2f5d2f;
    cursor: pointer;
}

.photo-upload-link {
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
    text-decoration: underline;
}

.preview-img {
    width: 100%;
    border-radius: 12px;
    margin: 12px 0;
    object-fit: cover;
}

.photo-slot-select {
    margin-top: 10px;
}

.photo-slot-select label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.photo-slot-select select {
    width: 100%;
    height: 44px;
    border: 1px solid #dfe7d7;
    border-radius: 12px;
    padding: 0 12px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
}

.save-btn {
    margin-top: 12px;
    width: 100%;
    padding: 12px;
    background: #e7f1dd;
    color: #2f5d2f;
    border: 1px solid #b8d59f;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.slot {
    position: relative;
    height: 100px;
    border: 1px dashed #cfd8c5;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fafbf8;
    overflow: hidden;
    cursor: pointer;
}

.slot-label {
    font-size: 13px;
    color: #4b5563;
    text-align: center;
    padding: 8px;
}

.slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.photo-analysis-wrapper {
    margin: 12px 0 18px;
}

.photo-analysis-action {
    display: flex;
    justify-content: center;
}

.photo-analysis-toggle-btn {
    width: 100%;
    max-width: 320px;
    height: 48px;
    border: none !important;
    border-radius: 18px;
    background: #e7f1dd !important;
    color: #2f5d2f !important;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.photo-analysis-panel {
    margin-top: 14px;
}

.photo-analysis-box {
    background: #ffffff;
    border: 1px solid #e7ebdf;
    border-radius: 20px;
    padding: 18px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.hidden,
.is-hidden {
    display: none !important;
}

.photo-guide-text {
    margin: 6px 0 14px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.photo-hidden-input {
    display: none !important;
}

.photo-camera-frame {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 16px;
    border: 3px solid #b7b7b7;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-camera-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-camera-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
}

.photo-sub-btn,
.photo-save-btn {
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #78b84a;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.photo-main-capture-btn {
    height: 42px;
    border-radius: 10px;
    background: #111111;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.photo-upload-inline {
    margin-top: 12px;
    text-align: right;
}

.photo-upload-inline-link {
    font-size: 13px;
    color: #6b7280;
    text-decoration: underline;
    cursor: pointer;
}



/* 3333 */



.login-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: #f3f4f6;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 32px 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.login-title {
    font-size: 28px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 8px;
    text-align: center;
}

.login-subtitle {
    font-size: 18px;
    color: #4b5563;
    text-align: center;
    margin-bottom: 24px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form input {
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    padding: 0 14px;
    font-size: 15px;
}

.login-btn {
    height: 28px;
    border: none;
    border-radius: 14px;
    background: #7aaa5a;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.login-divider {
    text-align: center;
    color: #9ca3af;
    margin: 18px 0 14px;
    font-size: 14px;
}

.login-simple-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-sub-btn {
    height: 44px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.login-bottom {
    margin-top: 18px;
    text-align: center;
}

.login-bottom a {
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
}

.signup-btn {
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #ffffff;
    color: #374151;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.top-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #7aaa5a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}

/* =========================
   CHAT ROOM FINAL
========================= */

.hidden {
    display: none !important;
}

html, body {
    height: 100%;
    margin: 0;
    background: #ffffff;
}

/* 전체 페이지 */
.chat-room-page {
    height: 100dvh;
    max-width: 520px;
    margin: 0 auto;
    background: #ffffff;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 12px;
}

/* 상단 헤더 */
.chat-room-header {
    display: grid;
    grid-template-columns: 96px 1fr 96px;
    align-items: center;
    margin-bottom: 0;
    background: #ffffff;
    flex-shrink: 0;
}

.chat-top-btn {
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    padding: 0;
}

.chat-home-btn {
    text-align: right;
}

.chat-room-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    color: #25472d;
}

/* 왼쪽 패널 */
.chat-side-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 82%;
    max-width: 340px;
    height: 100%;
    background: #ffffff;
    z-index: 20;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
}

.chat-side-inner {
    height: 100%;
    overflow-y: auto;
    padding: 14px;
    box-sizing: border-box;
    background: #ffffff;
}

.chat-side-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    z-index: 10;
}

.chat-side-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.chat-side-head button {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}

.chat-side-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.chat-side-tab {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 800;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
}

.chat-side-tab.active {
    color: #111827;
}

.chat-side-panel-box {
    display: none;
}

.chat-side-panel-box.active {
    display: block;
}

.chat-side-input {
    width: 100%;
    height: 40px;
    border: 1px solid #e5e7eb;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 12px;
    background: #ffffff;
    border-radius: 10px;
}

.chat-side-item {
    width: 100%;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
}

.chat-side-item.active {
    background: #eef6e8;
}

.chat-side-item .main {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}

.chat-side-item .sub {
    font-size: 12px;
    color: #6b7280;
}

/* 본문 */
.chat-room-body {
    min-height: 0;
    display: grid;
    grid-template-rows: 1fr auto auto;
    overflow: hidden;
    background: #ffffff;
    padding-top: 8px;
}


/* 사용자 질문 */
.chat-message.user {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    background: transparent;
}

.chat-user-text {
    display: inline-block;
    max-width: 72%;
    background: #edf7e7;
    border: 1px solid #edf7e7;
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.7;
    color: #365314;
    text-align: right;
    box-sizing: border-box;
    word-break: keep-all;
}

/* 리프 답변 */
.chat-message.bot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 12px 0;
    white-space: pre-line;
}

.chat-answer-card {
    width: 100%;
    background: transparent;   /* ⭐ 완전 제거 */
    border: none;              /* ⭐ 제거 */
    border-radius: 0;          /* ⭐ 제거 */
    padding: 0;                /* ⭐ 제거 */
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
    box-shadow: none;
    box-sizing: border-box;
    word-break: keep-all;
}

.chat-answer-label {
    font-size: 12px;
    font-weight: 600;
    color: #8fa184;
    margin-bottom: 6px;
}

/* 스피커 버튼 */
.chat-speaker-btn {
    margin-top: 8px;
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: #eef5e6;
    color: #4d6c36;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 빠른 질문 */
.chat-room-quick-row {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 8px 0 10px;
    background: #ffffff;
    flex-shrink: 0;
}

.chat-room-quick-btn {
    flex: 1;
    border: none;
    background: #eef4e8;
    color: #4d6647;
    border-radius: 999px;
    height: 34px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* 입력창 */
.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 0 6px;
    flex-shrink: 0;
    background: #ffffff;
}

.chat-mic-btn {
    width: 36px;
    height: 34px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: #4b5563;
    flex-shrink: 0;
}

.chat-input-shell {
    flex: 1;
    height: 56px;
    background: #ffffff;
    border: 1px solid #d9dfd1;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 12px;
    position: relative;
    box-sizing: border-box;
}

.chat-plus-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.chat-plus-btn {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #111827;
    padding: 0;
}

.chat-plus-menu {
    position: absolute;
    left: 0;
    bottom: 52px;
    width: 150px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    padding: 8px;
    z-index: 30;
    box-sizing: border-box;
}

.chat-plus-item {
    width: 100%;
    border: none;
    background: #f8faf7;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.chat-plus-item:last-child {
    margin-bottom: 0;
}

.chat-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
    color: #111827;
}

.chat-input::placeholder {
    color: #9ca3af;
}

.chat-send-btn {
    border: none;

    background: linear-gradient(135deg, #8ccf6e 0%, #5fae4f 100%);

    color: #ffffff;
    font-size: 15px;
    font-weight: 700;

    /* 🔥 30% 축소 */
    width: 38px;
    height: 38px;
    border-radius: 50%;

    cursor: pointer;
    flex-shrink: 0;

    box-shadow: 0 3px 8px rgba(95, 174, 79, 0.22);

    transition: all 0.18s ease;
}

.chat-send-btn:hover {
    transform: translateY(-1px);
}

.chat-send-btn:active {
    transform: scale(0.95);
}

.chat-input-box {
    min-height: 46px;
}




/* 왼쪽 목록 패널 스크롤바 */
.chat-side-inner::-webkit-scrollbar {
    width: 8px;
}

.chat-side-inner::-webkit-scrollbar-thumb {
    background: #c9cfc2;
    border-radius: 999px;
}

.chat-side-inner::-webkit-scrollbar-track {
    background: transparent;
}


.chat-answer-card p {
    margin: 6px 0;
}

/* ===== 프로필 페이지 ===== */

.profile-page {
    max-width: 430px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    background: #f5f6f2;
    min-height: 100vh;
    box-sizing: border-box;
}

.profile-title {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 18px;
    color: #1f2937;
}

/* 카드 */
.profile-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e5eadf;
}

/* 한 줄 */
.profile-row {
    display: grid;
    grid-template-columns: 110px 1fr 50px;
    align-items: center;
    padding: 14px 14px;
    border-bottom: 1px solid #eef2e8;
}

.profile-row:last-child {
    border-bottom: none;
}

/* 라벨 */
.profile-label {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

/* 값 */
.profile-value {
    font-size: 14px;
    color: #111827;
    word-break: keep-all;
}

/* 수정 버튼 */
.profile-edit-btn {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
    cursor: pointer;
}

/* 저장 버튼 */
.profile-actions {
    margin-top: 20px;
}

#save-profile-btn {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border: none;
    background: #cfd7c4;
    color: #2f5d37;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

/* ===== 모바일 최적화 ===== */
@media (max-width: 480px) {

    .profile-row {
        grid-template-columns: 90px 1fr 45px;
        padding: 12px;
    }

    .profile-label {
        font-size: 13px;
    }

    .profile-value {
        font-size: 13px;
    }

    .profile-edit-btn {
        font-size: 12px;
    }
}

/* ===== 선택 모달 ===== */

#custom-select-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
}

.modal-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 430px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 20px;
}

.modal-box h3 {
    text-align: center;
    margin-bottom: 15px;
}

.modal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-option {
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #f3f6ef;
    font-size: 14px;
    cursor: pointer;
}



/* ===== 선택 모달 ===== */

#custom-select-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
}

.modal-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 430px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 20px;
}

.modal-box h3 {
    text-align: center;
    margin-bottom: 15px;
}

.modal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-option {
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #f3f6ef;
    font-size: 14px;
    cursor: pointer;
}



.modal-option.active {
    background: #7fae63;
    color: white;
}

.modal-confirm {
    margin-top: 12px;
    padding: 14px;
    width: 100%;
    border: none;
    border-radius: 12px;
    background: #374151; /* 검정 계열 */
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.modal-cancel {
    width: 100%;
    height: 52px;
    margin-top: 14px;

    border: none;
    border-radius: 14px;

    background: #e5e7eb;
    color: #374151;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;
}

.modal-confirm:hover {
    background: #000000;
}

.top-user-nickname {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef2f7;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.hidden {
    display: none !important;
}

/* 점3개 버튼 두껍게  */

.more-menu a,
.more-menu p {
    display: flex;
    align-items: center;   /* 세로 중앙 */
}

.more-menu a {
    font-size: 15px;
    font-weight: 700;  /* 핵심 */
}

.more-menu a {
    display: block;
    padding: 14px 16px;  /* UX에서 모바일에서 터치 편함 넓혀라 */
}


.more-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.profile-icon {
    width: 32px;
    height: 32px;
    display: block;
}

.profile-bg {
    fill: #cfcfcf;
}

.profile-person {
    fill: #ffffff;
}

.profile-icon {
    transform: scale(1.1);
}

/* ===== PC 프레임 ===== */
.pc-frame {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: #f3f4f6;
}

/* ===== 좌우 영역 ===== */
.pc-side {
    flex: 1;
    min-width: 140px;
    position: relative;
    overflow: hidden;
}

/* 🌿 왼쪽 파스텔 */
.pc-side-left {
    background: linear-gradient(180deg, #eef7ea 0%, #f8fbf5 100%);
    border-right: 1px solid #e3eadc;
}

/* 🌿 오른쪽 파스텔 */
.pc-side-right {
    background: linear-gradient(180deg, #f5f8ef 0%, #fbfcf8 100%);
    border-left: 1px solid #e3eadc;
}

/* ===== 얇은 격자 패턴 ===== */
.pc-side::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(150,170,150,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150,170,150,0.10) 1px, transparent 1px);

    background-size: 42px 42px;
    opacity: 0.35;
}

/* ===== 🌱 리프 워터마크 (핵심) ===== */

/* ===== 🌱 리프 워터마크 ===== */

.pc-side-left::after,
.pc-side-right::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

/* 왼쪽 */
.pc-side-left::after {
    background-image:
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg");

    background-repeat: no-repeat;

    background-size:
        120px auto,
        96px auto,
        130px auto,
        110px auto,
        90px auto,
        126px auto,
        100px auto,
        138px auto;

    background-position:
        16% 8%,
        70% 14%,
        30% 26%,
        76% 38%,
        18% 52%,
        64% 66%,
        26% 80%,
        72% 92%;

    opacity: 0.16;
}

/* 오른쪽 */
.pc-side-right::after {
    background-image:
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg"),
        url("/images/leaf-mascot.jpg");

    background-repeat: no-repeat;

    background-size:
        110px auto,
        136px auto,
        92px auto,
        124px auto,
        104px auto,
        140px auto,
        90px auto,
        118px auto;

    background-position:
        72% 10%,
        24% 22%,
        68% 34%,
        28% 48%,
        74% 60%,
        24% 72%,
        68% 84%,
        22% 94%;

    opacity: 0.16;
}

/* ===== 가운데 앱 ===== */
.pc-frame .app-shell {
    width: 100%;
    max-width: 520px;
    min-height: 100vh;

    background: #ffffff;

    box-shadow:
        0 12px 36px rgba(31,41,55,0.08);

    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;

    position: relative;
    z-index: 2;
}

/* ===== 모바일 대응 ===== */
@media (max-width: 900px) {

    .pc-frame {
        display: block;
        padding: 0;
        background: #f3f4f6;
    }

    .pc-side {
        display: none;
    }

    .pc-frame .app-shell {
        max-width: 520px;
        margin: 0 auto;
        box-shadow: none;
    }
}

/* 아주 작은 화면 */
@media (max-width: 520px) {
    .pc-frame .app-shell {
        max-width: 100%;
        border-left: none;
        border-right: none;
    }
}

.pc-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(150,170,150,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150,170,150,0.10) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.22;
}


/* =========================
   서브 페이지 공통 프레임
========================= */

.page-shell {
    width: 100%;
    max-width: 520px;
    min-height: 100vh;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    box-shadow: 0 12px 36px rgba(31, 41, 55, 0.08);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

/* 상단바 */
.sub-top-bar {
    height: 56px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #edf1e8;
    background: #ffffff;
}

.back-btn,
.home-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 18px;
    color: #334155;
}

.back-btn:hover,
.home-btn:hover {
    background: #f4f7f1;
}

.sub-brand-title {
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: #2f5d37;
    line-height: 1;
}

.sub-page-content {
    padding: 22px 18px 34px;
    box-sizing: border-box;
}

.sub-card {
    background: #ffffff;
    border: 1px solid #e5eadf;
    border-radius: 20px;
    padding: 18px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.sub-page-title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

/* 입력 영역 */
.form-group {
    margin-bottom: 16px;
}

.field-label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.time-input,
.text-input,
.select-input,
.text-area {
    width: 100%;
    height: 46px;
    border: 1px solid #d9dfd1;
    border-radius: 14px;
    background: #ffffff;
    padding: 0 14px;
    box-sizing: border-box;
    font-size: 14px;
    color: #111827;
    outline: none;
}

.text-area {
    min-height: 130px;
    padding: 14px;
    resize: vertical;
}

.time-input:focus,
.text-input:focus,
.select-input:focus,
.text-area:focus {
    border-color: #95bb7a;
    box-shadow: 0 0 0 4px rgba(149, 187, 122, 0.12);
}

/* 설정 행 */
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #eef2ea;
}

.setting-row:first-of-type {
    border-top: none;
    padding-top: 0;
}

.setting-text {
    flex: 1;
    min-width: 0;
}

.setting-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

.setting-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}

/* 토글 */
.switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    inset: 0;
    background: #d8dde3;
    border-radius: 999px;
    transition: 0.2s ease;
    cursor: pointer;
}

.switch-slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.switch input:checked + .switch-slider {
    background: #88bc69;
}

.switch input:checked + .switch-slider::before {
    transform: translateX(20px);
}

/* 버튼 */
.primary-action-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 14px;
    background: #7aaa5a;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 18px;
}

.primary-action-btn:hover {
    opacity: 0.94;
}

@media (max-width: 900px) {
    .page-shell {
        max-width: 520px;
        margin: 0 auto;
        box-shadow: none;
    }
}

@media (max-width: 520px) {
    .page-shell {
        max-width: 100%;
        border-left: none;
        border-right: none;
    }

    .sub-page-content {
        padding: 18px 16px 28px;
    }
}

/* =========================
   프로필 페이지
========================= */

.profile-card {
    display: flex;
    flex-direction: column;
}

.profile-row {
    display: grid;
    grid-template-columns: 110px 1fr 56px;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #eef2ea;
}

.profile-row:first-child {
    border-top: none;
    padding-top: 0;
}

.profile-row-last {
    padding-bottom: 0;
}

.profile-label {
    font-size: 13px;
    font-weight: 700;
    color: #5b6472;
    line-height: 1.4;
    word-break: keep-all;
}

.profile-value {
    font-size: 14px;
    color: #1f2937;
    line-height: 1.6;
    word-break: keep-all;
}

.profile-edit-btn {
    height: 32px;
    border: none;
    border-radius: 999px;
    background: #edf5e6;
    color: #5f8b45;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.profile-edit-btn:hover {
    opacity: 0.92;
}

.profile-actions {
    margin-top: 18px;
}

@media (max-width: 520px) {
    .profile-row {
        grid-template-columns: 90px 1fr 52px;
        gap: 10px;
    }

    .profile-label {
        font-size: 12px;
    }

    .profile-value {
        font-size: 13px;
    }

    .profile-edit-btn {
        font-size: 11px;
        height: 30px;
    }
}

/* =========================
   1:1 문의 / FAQ / 정책
========================= */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    border: 1px solid #e7ebdf;
    border-radius: 16px;
    overflow: hidden;
    background: #fbfcf8;
}

.faq-question {
    width: 100%;
    border: none;
    background: #fbfcf8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.faq-question.active {
    background: #f3f8ed;
}

.faq-icon {
    flex-shrink: 0;
    font-size: 18px;
    color: #6b7280;
}

.faq-answer {
    display: none;
    padding: 0 16px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: #5b6472;
    background: #fbfcf8;
}

.policy-card {
    padding-top: 20px;
    padding-bottom: 20px;
}

.policy-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    color: #1f2937;
}

.policy-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
}

.policy-list {
    margin: 0;
    padding-left: 18px;
}

.policy-list li {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #5b6472;
}

.policy-list li:last-child {
    margin-bottom: 0;
}

/* =========================
   1:1 문의 페이지
========================= */

.contact-notice-box {
    margin: 16px 0 18px;
    padding: 14px 14px 14px 16px;
    border-radius: 16px;
    background: #f7faf4;
    border: 1px solid #e3eadb;
}

.contact-notice-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 800;
    color: #4f6f49;
}

.contact-notice-list {
    margin: 0;
    padding-left: 18px;
}

.contact-notice-list li {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #5b6472;
}

.contact-notice-list li:last-child {
    margin-bottom: 0;
}

.secondary-action-btn {
    width: 100%;
    height: 46px;
    border: 1px solid #d7dfcf;
    border-radius: 14px;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
}

.secondary-action-btn:hover {
    background: #f8faf7;
}

/* =========================
   데이터 관리 페이지
========================= */

.data-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.data-info-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #eef2ea;
}

.data-info-item:first-child {
    border-top: none;
    padding-top: 0;
}

.data-info-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

.data-info-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}

.data-info-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e7f1dd;
    color: #4f7a3f;
    font-size: 12px;
    font-weight: 700;
}

.data-info-badge.soft {
    background: #f1f4ee;
    color: #7b8794;
}

.danger-note-box {
    margin-top: 14px;
    padding: 14px 14px 14px 16px;
    border-radius: 16px;
    background: #fff7f7;
    border: 1px solid #f2d6d6;
}

.danger-note-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 800;
    color: #c24141;
}

.danger-note-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #7a4b4b;
}

.danger-btn {
    width: 100%;
    height: 46px;
    border: 1px solid #f1c5c5;
    border-radius: 14px;
    background: #fff7f7;
    color: #c24141;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 14px;
}

.danger-btn:hover {
    background: #fff1f1;
}


/* =========================
   고객센터 페이지
========================= */

.support-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #eef2ea;
}

.support-info-item:first-child {
    border-top: none;
    padding-top: 0;
}

.support-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef5e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.support-info-text {
    flex: 1;
    min-width: 0;
}

.support-info-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.support-info-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #5b6472;
    word-break: keep-all;
}

.support-map-box {
    margin-top: 14px;
    height: 220px;
    border-radius: 18px;
    border: 1px solid #dfe7d7;
    background:
        linear-gradient(180deg, #f7fbf4 0%, #edf5e6 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.support-map-pin {
    font-size: 28px;
    margin-bottom: 10px;
}

.support-map-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: #2f5d37;
}

.support-map-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #5b6472;
}

/* =========================
   약관 및 정책 페이지
========================= */

/* 맨 위 소개 박스 - 테두리 없음 */
.policy-intro-box {
    margin-bottom: 10px;
    padding: 8px 2px 2px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.policy-intro-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

.policy-intro-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
}

/* 정책 카드 */
.policy-card {
    padding: 18px 16px 14px;
}

.policy-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.policy-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.4;
}

.policy-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e7f1dd;
    color: #4f7a3f;
    font-size: 12px;
    font-weight: 700;
}

.policy-chip.soft {
    background: #f1f4ee;
    color: #7b8794;
}

.policy-body {
    min-width: 0;
}

.policy-text {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.75;
    color: #4b5563;
    word-break: keep-all;
}

.policy-list {
    margin: 0;
    padding-left: 18px;
}

.policy-list li {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.65;
    color: #5b6472;
    word-break: keep-all;
}

.policy-list li:last-child {
    margin-bottom: 0;
}

/* 오른쪽 아래 더보기 버튼 */
.policy-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.policy-more-btn {
    border: none;
    background: transparent;
    color: #7aaa5a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 0;
    white-space: nowrap;
}

.policy-more-btn:hover {
    text-decoration: underline;
}

@media (max-width: 520px) {
    .policy-intro-title {
        font-size: 17px;
    }

    .policy-intro-desc,
    .policy-text,
    .policy-list li {
        font-size: 13px;
    }

    .policy-title {
        font-size: 15px;
    }

    .policy-more-btn {
        font-size: 12px;
    }
}

/* 왼쪽 피부점수 카드 안의 피부사진 */
.leaf-score-diary-card {
    display: flex;
    flex-direction: column;
}

.leaf-inner-photo-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 8px;
}

.leaf-inner-photo-top h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.leaf-inner-photo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.leaf-inner-photo-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.leaf-inner-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.leaf-inner-photo-thumb.empty {
    background: #f8fafc;
    border: 1px dashed #d1d5db;
}


/* 홈 건조와 피부나이 한줄 */
.leaf-mini-info {
    margin: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}

.leaf-mini-info li {
    list-style: none !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    color: #4b5563;
}

.leaf-mini-info li:not(:last-child)::after {
    content: "|";
    margin-left: 8px;
    color: #9ca3af;
}

/* =========================
   홈 - 내 화장품 + 추천 최종
========================= */

.home-cosmetics-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 16px;
    align-items: start;
}

.home-cosmetics-left,
.home-cosmetics-right {
    min-width: 0;
}

.my-cosmetics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.my-cosmetics-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

.my-cosmetics-list-simple {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
}

.my-cosmetic-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cos-type {
    flex-shrink: 0;
    background: #e7f1e4;
    color: #5e8d4a;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.2;
}

.cos-text {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}








.home-recommend-images {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.home-recommend-thumb {
    display: block;
    flex: 1;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

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

/* 모바일에서 내 화장품 / 추천 화장품을 세로로 내려보내기 */
@media (max-width: 640px) {
    .home-cosmetics-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .my-cosmetics-header h3 {
        font-size: 17px;
    }

    .cos-text {
        font-size: 12px;
    }

    .home-recommend-images {
        gap: 8px;
    }
}



/* 돈포겟미 */

.today-log-cta-section {
    margin: 0 12px 14px;
}

.today-log-cta-btn {
    width: 100%;
    border-radius: 16px;
    padding: 18px 16px;
    cursor: pointer;
    background: #ffffff;
    border: 1.5px solid #d9eecb;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    text-align: center;
}

.today-log-cta-main {
    display: inline-block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #7fbf5b;
}

.today-log-cta-arrow {
    margin-left: 8px;
    font-size: 18px;
    color: #7fbf5b;
}

.today-log-cta-sub {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #8c8c8c;
}

.today-log-cta-btn:active {
    transform: scale(0.98);
}

/*style.css에 모달 CSS 추가*/

.today-log-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.today-log-modal.show {
    display: block;
}

.today-log-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
}

.today-log-modal-sheet {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 20px 16px 18px;
    box-shadow: 0 -12px 30px rgba(0,0,0,0.12);
    max-height: 88vh;
    overflow-y: auto;
}

.today-log-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.today-log-modal-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.today-log-modal-header p {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.today-log-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.today-log-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.today-log-modal-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.today-log-modal-row label {
    font-size: 15px;
    font-weight: 800;
    color: #2f3a2f;
}

.today-log-modal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.today-log-alarm-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.today-log-alarm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

#wakeup-time {
    height: 42px;
    border: 1px solid #d9dfd1;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
    background: #ffffff;
}

.today-log-modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.today-log-cancel-btn,
.today-log-save-btn {
    flex: 1;
    height: 46px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.today-log-cancel-btn {
    background: #f3f4f6;
    color: #4b5563;
}

.today-log-save-btn {
    background: #7fbf5b;
    color: #ffffff;
}

@media (max-width: 640px) {
    .today-log-modal-sheet {
        padding: 18px 14px 16px;
    }
}.today-log-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.today-log-modal.show {
    display: block;
}

.today-log-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
}

.today-log-modal-sheet {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 20px 16px 18px;
    box-shadow: 0 -12px 30px rgba(0,0,0,0.12);
    max-height: 88vh;
    overflow-y: auto;
}

.today-log-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.today-log-modal-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.today-log-modal-header p {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.today-log-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.today-log-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.today-log-modal-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.today-log-modal-row label {
    font-size: 15px;
    font-weight: 800;
    color: #2f3a2f;
}

.today-log-modal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.today-log-alarm-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.today-log-alarm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

#wakeup-time {
    height: 42px;
    border: 1px solid #d9dfd1;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
    background: #ffffff;
}

.today-log-modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.today-log-cancel-btn,
.today-log-save-btn {
    flex: 1;
    height: 46px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.today-log-cancel-btn {
    background: #f3f4f6;
    color: #4b5563;
}

.today-log-save-btn {
    background: #7fbf5b;
    color: #ffffff;
}

@media (max-width: 640px) {
    .today-log-modal-sheet {
        padding: 18px 14px 16px;
    }
}

/* =========================
   오늘의 한 줄 기록 (메모 영역)
========================= */

/* 설명 문구 */
.today-log-memo-desc {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #8a8f98;
    line-height: 1.4;
}

/* textarea 입력 영역 */
.today-log-memo-input {
    width: 100%;
    min-height: 70px; /* 너무 크지 않게 */
    resize: none; /* 사용자가 크기 변경 못하게 */
    border-radius: 14px;
    border: 1px solid #d9dfd1;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #1f2937;
    background: #ffffff;
    outline: none;
}

/* 포커스 시 (입력할 때) */
.today-log-memo-input:focus {
    border-color: #7fbf5b;
    box-shadow: 0 0 0 2px rgba(127, 191, 91, 0.15);
}



/* =========================
   오늘 기록 모달 - 알람 UX
========================= */

/* 알람 카드 전체 박스 */
.today-log-alarm-card {
    background: #f8fbf5;
    border: 1px solid #e3ecd9;
    border-radius: 16px;
    padding: 14px 14px 12px;
}

/* 알람 설명 문구 */
.today-log-alarm-desc {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

/* 알람 ON/OFF 버튼 줄 */
.today-log-alarm-toggle-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

/* 알람 ON/OFF 버튼 기본 스타일 */
.alarm-toggle-btn {
    flex: 1;
    height: 40px;
    border: 1px solid #d8e5cf;
    border-radius: 12px;
    background: #ffffff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* 선택된 ON/OFF 버튼 */
.alarm-toggle-btn.active {
    background: #7fbf5b;
    border-color: #7fbf5b;
    color: #ffffff;
}

/* 시간 조절 영역 */
.today-log-alarm-time-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

/* + / - 버튼 */
.alarm-adjust-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #d9dfd1;
    color: #374151;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}

/* 현재 시간 표시 */
.today-log-alarm-time {
    min-width: 110px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #d9dfd1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: 1px;
}

/* 빠른 선택 버튼 영역 */
.today-log-alarm-quick-row {
    display: flex;
    gap: 8px;
}

/* 빠른 시간 버튼 */
.alarm-quick-btn {
    flex: 1;
    height: 38px;
    border: 1px solid #d8e5cf;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* 빠른 시간 버튼 선택 상태 */
.alarm-quick-btn.active {
    background: #edf8e6;
    border-color: #7fbf5b;
    color: #5b9b3c;
}

/* 알람 OFF일 때 흐리게 처리 */
.today-log-alarm-time-wrap.disabled,
.today-log-alarm-quick-row.disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* 상단 날자 굵게*/
.today-date {
  font-weight: bold;
}

/* ===== 상단 배너 최종본 2026-04-19 ===== */



.banner-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.banner {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: block;
}


.banner-dots {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.dot.active {
    background: #63b45f;
}

.hero-banner {
    position: relative;
    margin: 4px 12px 8px;
    padding: 0;
    z-index: 1;
}

.banner-container {
    width: 100%;
    height: 105px;
    overflow: hidden;
    border-radius: 24px;
    background: #dfe5db;
}

.date-section {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
     padding: 10px 12px 14px;
    margin: 0;
    background: #fff;
}

.banner-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.10);
    transform-origin: center center;
}

/* 피부일기 상단 대표 카드의 날짜 라벨 */
.record-day-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef6e8;
    color: #2f5d2f;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* 선택 날짜 피부일기 카드와 최근 7일 사이 여백 */
.record-diary-focus {
    margin-bottom: 18px;
}

/* 피부 분석 구간 카드 간격 */
.analysis-range-section,
.analysis-graph-section,
.analysis-summary-section,
.analysis-report-section {
    margin-bottom: 18px;
}

/* ===== photo 상단 뒤로가기 버튼: 홈이 아니라 뒤로/홈 공용 ===== */
.photo-back-btn {
    cursor: pointer;
}

/* ===== 사진 슬롯 안 이미지 ===== */
.photo-slot-image,
.upload-slot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* ===== 업로드 탭 저장 위치 선택 ===== */
.photo-slot-picker {
    margin-top: 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.photo-slot-picker label {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.photo-slot-picker select {
    flex: 1;
    height: 40px;
    border: 1px solid #d9dfd1;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
    background: #ffffff;
}

/* ===== 달력 날짜 안 배지 ===== */
.photo-date {
    position: relative;
}

.photo-date-badge {
    position: absolute;
    right: 6px;
    bottom: 5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f59e0b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ===== 탭 패널 표시/숨김 ===== */
.photo-tab-panel {
    display: none;
}

.photo-tab-panel.active {
    display: block;
}

/* ===== 홈 메인 내 스케쥴 타이틀 ===== */

.calendar-title-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 월 표시 */
.home-calendar-month {
    font-size: 13px; /* 약 70% */
    font-weight: 700;
    color: #8da79a; /* 연두톤 */
}

/* ===== 블록 구분 ===== */
.home-calendar-block {
    margin-top: 8px;
}

.home-calendar-next-block {
    margin-top: 10px;
}

.home-calendar-label {
    margin: 0 0 8px 2px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.home-calendar-label.small {
    font-size: 11px;
    color: #94a3b8;
}

/* ===== 이번 주 달력 ===== */
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-day {
    background: #f7f8f5;
    border-radius: 14px;
    text-align: center;
    padding: 10px 0 12px;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    box-sizing: border-box;
}

.calendar-day .day-name {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    color: #9ca3af;
}

.calendar-day .day-date {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
}

/* 오늘 */
.calendar-day.today {
    border: 1px solid #b8d39a;
    background: #eef6e5;
    color: #2f5d2f;
}

.calendar-day.today .day-name {
    color: #5f8a62;
}

.calendar-day.today .day-date {
    color: #2f5d2f;
}

/* 선택/강조 */
.calendar-day.active {
    background: #dfeeda;
    color: #2f5d37;
}

/* ===== 다음 주는 작게 ===== */
.calendar-week-mini .calendar-day,
.calendar-day.mini {
    min-height: 48px;
    padding: 8px 0;
    border-radius: 12px;
    background: #fafbf8;
    opacity: 0.88;
}

.calendar-week-mini .calendar-day .day-name,
.calendar-day.mini .day-name {
    font-size: 10px;
    margin-bottom: 4px;
}

.calendar-week-mini .calendar-day .day-date,
.calendar-day.mini .day-date {
    font-size: 16px;
}

/* =========================================================
   피부일기 페이지 폭 강제 고정
   - 데스크탑에서도 모바일 앱처럼 가운데만 보이게
========================================================= */
.diary-page {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f6f7f2;
    padding: 18px 14px 90px;
    box-sizing: border-box;
}

/* =========================================================
   [공용] 초미니 달력 시스템
   ---------------------------------------------------------
   사용 목적:
   - 홈, 피부일기, 사진기록, 내 스케쥴 화면 공통 사용
   - 공간을 적게 차지하는 압축형 달력
   - 모바일 앱 스타일 기준
========================================================= */

/* ===== 공용 달력 카드 ===== */
.mini-calendar-card {
    background: #ffffff;
    border: 1px solid #e5eadf;
    border-radius: 18px;
    padding: 8px 8px 7px;
    box-sizing: border-box;
    box-shadow: none;
}

/* ===== 공용 달력 상단 ===== */
.mini-calendar-top {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

/* ===== 공용 달력 제목 ===== */
.mini-calendar-title {
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #2d4e2d;
    line-height: 1.2;
}

/* ===== 공용 달력 좌우 버튼 ===== */
.mini-calendar-arrow {
    width: 28px;
    height: 28px;
    border: 1px solid #dfe7d7;
    border-radius: 9px;
    background: #f8faf5;
    color: #6b7280;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* ===== 공용 요일 줄 ===== */
.mini-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 5px;
}

/* ===== 공용 요일 텍스트 ===== */
.mini-calendar-week span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    font-size: 9px;
    font-weight: 700;
    color: #a5adb8;
    line-height: 1;
}

/* ===== 공용 날짜 grid ===== */
.mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

/* ===== 공용 날짜 버튼 ===== */
.mini-calendar-date {
    width: 100%;
    height: 32px;
    min-width: 0;
    border: 1px solid #e7ebdf;
    border-radius: 9px;
    background: #ffffff;
    color: #374151;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 선택 날짜 ===== */
.mini-calendar-date.is-selected {
    background: #dff0d0;
    border-color: #b7d69a;
    color: #2f5d2f;
}

/* ===== 이전/다음 달 흐린 날짜 ===== */
.mini-calendar-date.is-muted {
    background: #fafbf8;
    color: #c6ccd4;
}

/* ===== 오늘 날짜(선택과는 별도) ===== */
.mini-calendar-date.is-today {
    border-color: #c8dcb7;
    color: #416236;
}

/* ===== 작은 배지 필요할 때 ===== */
.mini-calendar-date.has-dot {
    position: relative;
}

.mini-calendar-date.has-dot::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #91c96f;
}

/* ===== 아주 작은 화면 대응 ===== */
@media (max-width: 390px) {
    .mini-calendar-card {
        padding: 7px 7px 6px;
        border-radius: 16px;
    }

    .mini-calendar-top {
        grid-template-columns: 26px 1fr 26px;
        gap: 5px;
        margin-bottom: 5px;
    }

    .mini-calendar-title {
        font-size: 14px;
    }

    .mini-calendar-arrow {
        width: 26px;
        height: 26px;
        font-size: 13px;
        border-radius: 8px;
    }

    .mini-calendar-week {
        gap: 3px;
        margin-bottom: 4px;
    }

    .mini-calendar-week span {
        font-size: 8px;
        height: 12px;
    }

    .mini-calendar-grid {
        gap: 3px;
    }

    .mini-calendar-date {
        height: 29px;
        border-radius: 8px;
        font-size: 9px;
    }
}


/* =========================================================
   피부일기 페이지 전체
   ---------------------------------------------------------
   사용 대상:
   - record-diary.html
   - 하루 단위 피부일기 화면
========================================================= */

/* ===== 피부일기 페이지 바깥 여백 ===== */
.diary-page {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f6f7f2;
    padding: 18px 14px 90px;
    box-sizing: border-box;
}

/* ===== 상단 헤더 ===== */
.diary-header {
    position: relative;
    min-height: 44px;
    margin-bottom: 16px;
}

/* ===== 뒤로가기 버튼 ===== */
.diary-back-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #dfe7d7;
    border-radius: 12px;
    background: #ffffff;
    color: #4b5563;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ===== 헤더 텍스트 ===== */
.diary-header-text {
    text-align: center;
    padding: 0 40px;
}

.diary-header-text h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.diary-header-text p {
    margin: 0;
    font-size: 12px;
    color: #8b95a1;
    line-height: 1.4;
}

/* ===== 상단 탭 ===== */
.diary-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

/* ===== 탭 버튼 ===== */
.diary-tab {
    height: 38px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.diary-tab.active {
    background: #e9f3dd;
    border-color: #bcd59f;
    color: #4d7a35;
}
/* =========================================================
   [최종] 공용 mini-calendar + 피부일기 페이지 CSS
   ---------------------------------------------------------
   사용 방법
   1) 이 코드를 style.css 맨 아래에 추가
   2) 피부일기 HTML은 mini-calendar-* 구조를 사용
   3) 다른 달력 화면도 mini-calendar-* 재사용 가능
========================================================= */


/* =========================================================
   1. 공용 초미니 달력 시스템
   ---------------------------------------------------------
   - 모든 페이지에서 재사용하는 달력
   - 홈/피부일기/사진기록/내 스케쥴 공통 기준
========================================================= */

/* ===== 공용 달력 카드 ===== */
.mini-calendar-card {
    background: #ffffff;
    border: 1px solid #e5eadf;
    border-radius: 18px;
    padding: 8px 8px 7px;
    box-sizing: border-box;
    box-shadow: none;
    margin-bottom: 12px; /* 카드 아래 간격 */
}

/* ===== 공용 달력 상단 ===== */
.mini-calendar-top {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

/* ===== 공용 달력 제목 ===== */
.mini-calendar-title {
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #2d4e2d;
    line-height: 1.2;
}

/* ===== 공용 좌우 화살표 버튼 ===== */
.mini-calendar-arrow {
    width: 28px;
    height: 28px;
    border: 1px solid #dfe7d7;
    border-radius: 9px;
    background: #f8faf5;
    color: #6b7280;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* ===== 공용 요일 줄 ===== */
.mini-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 5px;
}

/* ===== 공용 요일 텍스트 ===== */
.mini-calendar-week span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    font-size: 9px;
    font-weight: 700;
    color: #a5adb8;
    line-height: 1;
}

/* ===== 공용 날짜 grid ===== */
.mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

/* ===== 공용 날짜 버튼 ===== */
.mini-calendar-date {
    width: 100%;
    height: 32px;
    min-width: 0;
    border: 1px solid #e7ebdf;
    border-radius: 9px;
    background: #ffffff;
    color: #374151;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 선택 날짜 ===== */
.mini-calendar-date.is-selected {
    background: #dff0d0;
    border-color: #b7d69a;
    color: #2f5d2f;
}

/* ===== 이전/다음 달 날짜 ===== */
.mini-calendar-date.is-muted {
    background: #fafbf8;
    color: #c6ccd4;
}

/* ===== 오늘 날짜 강조 (선택과 별도) ===== */
.mini-calendar-date.is-today {
    border-color: #c8dcb7;
    color: #416236;
}

/* ===== 작은 점 표시가 필요할 때 ===== */
.mini-calendar-date.has-dot {
    position: relative;
}

.mini-calendar-date.has-dot::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #91c96f;
}

/* ===== 아주 작은 화면 대응 ===== */
@media (max-width: 390px) {
    .mini-calendar-card {
        padding: 7px 7px 6px;
        border-radius: 16px;
    }

    .mini-calendar-top {
        grid-template-columns: 26px 1fr 26px;
        gap: 5px;
        margin-bottom: 5px;
    }

    .mini-calendar-title {
        font-size: 14px;
    }

    .mini-calendar-arrow {
        width: 26px;
        height: 26px;
        font-size: 13px;
        border-radius: 8px;
    }

    .mini-calendar-week {
        gap: 3px;
        margin-bottom: 4px;
    }

    .mini-calendar-week span {
        font-size: 8px;
        height: 12px;
    }

    .mini-calendar-grid {
        gap: 3px;
    }

    .mini-calendar-date {
        height: 29px;
        border-radius: 8px;
        font-size: 9px;
    }
}


/* =========================================================
   2. 피부일기 페이지 전체
========================================================= */

/* ===== 피부일기 페이지 바깥 영역 ===== */
.diary-page {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f6f7f2;
    padding: 18px 14px 90px; /* 플로팅 버튼 여유 */
    box-sizing: border-box;
}

/* ===== 상단 헤더 ===== */
.diary-header {
    position: relative;
    min-height: 44px;
    margin-bottom: 16px;
}

/* ===== 뒤로가기 버튼 ===== */
.diary-back-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #dfe7d7;
    border-radius: 12px;
    background: #ffffff;
    color: #4b5563;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ===== 헤더 텍스트 ===== */
.diary-header-text {
    text-align: center;
    padding: 0 40px;
}

.diary-header-text h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.diary-header-text p {
    margin: 0;
    font-size: 12px;
    color: #8b95a1;
    line-height: 1.4;
}


/* =========================================================
   3. 상단 탭
========================================================= */
.diary-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.diary-tab {
    height: 38px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.diary-tab.active {
    background: #e9f3dd;
    border-color: #bcd59f;
    color: #4d7a35;
}


/* =========================================================
   4. 선택 날짜 피부일기 메인 카드
========================================================= */
.diary-focus-card {
    background: #ffffff;
    border: 1px solid #e3e9db;
    border-radius: 22px;
    padding: 16px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    margin-bottom: 14px; /* 달력 아래와 카드 사이 간격 */
}

/* ===== 카드 상단 ===== */
.diary-focus-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.diary-focus-top h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

/* ===== 우측 배지 ===== */
.diary-label-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #edf5e6;
    color: #5d8645;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   5. 점수 / 피부나이 / 상태
========================================================= */
.diary-score-box {
    border: 1px solid #edf1e8;
    border-radius: 18px;
    background: #fbfcf8;
    padding: 14px;
    margin-bottom: 14px;
}

.diary-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.diary-score-number {
    font-size: 38px;
    font-weight: 800;
    color: #1f5134;
    line-height: 1;
}

.diary-score-number span {
    font-size: 18px;
    color: #8b95a1;
    margin-left: 3px;
}

.diary-skin-age {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

.diary-status-line {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #4b5563;
}


/* =========================================================
   6. 공통 섹션 헤더
========================================================= */
.diary-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.diary-section-head h3,
.diary-section-head h4 {
    margin: 0;
    color: #1f2937;
}

.diary-section-head h3 {
    font-size: 18px;
    font-weight: 800;
}

.diary-section-head h4 {
    font-size: 14px;
    font-weight: 800;
}

.diary-section-head p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #94a3b8;
}

/* ===== 수정 버튼 ===== */
.diary-edit-btn {
    border: none;
    background: #eef2f7;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}


/* =========================================================
   7. 자동 피부일기 영역
========================================================= */
.diary-auto-box {
    border-top: 1px solid #edf1e8;
    padding-top: 14px;
    margin-top: 14px;
}

.diary-auto-body p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    word-break: keep-all;
}

.diary-auto-body p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   8. 자유일기 카드
========================================================= */
.diary-free-note-card {
    background: #ffffff;
    border: 1px solid #e3e9db;
    border-radius: 22px;
    padding: 16px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    margin-bottom: 14px;
}

.diary-free-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #edf5e6;
    color: #5d8645;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.diary-free-note-body {
    min-height: 92px;
    background: #fafbf8;
    border: 1px solid #e8ede2;
    border-radius: 16px;
    padding: 14px;
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    white-space: pre-wrap;
    word-break: keep-all;
    box-sizing: border-box;
}


/* =========================================================
   9. 플로팅 버튼
========================================================= */
.diary-floating-btn {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 9998;
    border: none;
    border-radius: 999px;
    background: #7aaa5a;
    color: #ffffff;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(122, 170, 90, 0.28);
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.diary-floating-btn:hover {
    opacity: 0.95;
}

.diary-floating-btn:active {
    transform: scale(0.97);
}


/* =========================================================
   10. 모달 공통
========================================================= */
.diary-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.hidden {
    display: none !important;
}

.diary-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
}

.diary-modal-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 430px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 18px 14px 20px;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

.diary-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.diary-modal-header h3 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    color: #111827;
}

.diary-modal-header p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.diary-modal-close-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: #f3f4f6;
    color: #374151;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ===== 입력창 ===== */
.diary-textarea {
    width: 100%;
    min-height: 190px;
    resize: none;
    border: 1px solid #d9dfd1;
    border-radius: 18px;
    background: #fbfcf8;
    padding: 16px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.7;
    color: #1f2937;
    outline: none;
}

.diary-textarea:focus {
    border-color: #9bc27b;
    background: #ffffff;
}

.diary-textarea::placeholder {
    color: #9ca3af;
}

/* ===== 모달 하단 버튼 ===== */
.diary-modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.diary-cancel-btn,
.diary-save-btn {
    flex: 1;
    height: 48px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.diary-cancel-btn {
    background: #eef2f7;
    color: #475569;
}

.diary-save-btn {
    background: #7aaa5a;
    color: #ffffff;
}


/* =========================================================
   11. 피부일기 페이지 모바일 미세 조정
========================================================= */
@media (max-width: 390px) {
    .diary-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .diary-header-text h1 {
        font-size: 21px;
    }

    .diary-score-number {
        font-size: 34px;
    }

    .diary-floating-btn {
        right: 16px;
        bottom: 18px;
        padding: 13px 16px;
        font-size: 13px;
    }
}

/* =========================================================
   리프 버튼 공통 스타일
========================================================= */
.leaf-btn {
    border: 1px solid #bcd59f;
    background: #e9f3dd;
    color: #4d7a35;

    font-size: 12px;
    font-weight: 700;

    padding: 8px 12px;
    border-radius: 999px;

    cursor: pointer;
    white-space: nowrap;

    transition: all 0.15s ease;
}

/* hover */
.leaf-btn:hover {
    background: #dff0d0;
}

/* active */
.leaf-btn:active {
    transform: scale(0.97);
}

/* =========================================================
   내 스케쥴 화면 CSS
   - 공용 mini-calendar 사용
   - 4칸 그리드: 시간 / 일정 / 장소 / ⋯
   - 6줄 고정 + 더보기 구조
========================================================= */

/* ===== 페이지 전체 ===== */
.schedule-page {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f6f7f2;
    padding: 18px 14px 90px;
    box-sizing: border-box;
}

/* ===== 상단 헤더 ===== */
.schedule-header {
    position: relative;
    min-height: 44px;
    margin-bottom: 16px;
}

.schedule-back-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #dfe7d7;
    border-radius: 12px;
    background: #ffffff;
    color: #4b5563;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.schedule-header-text {
    text-align: center;
    padding: 0 40px;
}

.schedule-header-text h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.schedule-header-text p {
    margin: 0;
    font-size: 12px;
    color: #8b95a1;
    line-height: 1.4;
}

/* ===== 상단 탭 ===== */
.schedule-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.schedule-tab {
    height: 38px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.schedule-tab.active {
    background: #e9f3dd;
    border-color: #bcd59f;
    color: #4d7a35;
}

/* ===== 선택 날짜 + 정렬 ===== */
.schedule-date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 10px;
}

.schedule-date-row h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.schedule-sort-btn {
    width: 34px;
    height: 30px;
    border: 1px solid #bcd59f;
    border-radius: 999px;
    background: #e9f3dd;
    color: #4d7a35;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

/* ===== 일정 그리드 카드 ===== */
.schedule-grid-card {
    background: #ffffff;
    border: 1px solid #e3e9db;
    border-radius: 22px;
    padding: 12px 10px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

/* ===== 일정 리스트 ===== */
.schedule-grid-list {
    display: flex;
    flex-direction: column;
}

/* ===== 일정 한 줄: 엑셀형 4칸 ===== */
.schedule-grid-row {
    display: grid;
    grid-template-columns: 92px 1fr 72px 26px;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    border-bottom: 1px solid #edf1e8;
    box-sizing: border-box;
}

/* ===== 시간 칸 ===== */
.schedule-time-cell {
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* ===== 일정 칸 ===== */
.schedule-title-cell {
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 장소 칸 ===== */
.schedule-place-cell {
    font-size: 12px;
    font-weight: 600;
    color: #8b95a1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 빈 줄 처리 ===== */
.schedule-grid-row.empty .schedule-title-cell {
    color: transparent;
}

/* ===== 점3개 버튼 ===== */
.schedule-more-btn {
    width: 24px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.schedule-more-btn:hover {
    background: #f3f4f6;
}

/* ===== 더보기 버튼 ===== */
.schedule-more-list-btn {
    width: 100%;
    margin-top: 12px;
    height: 38px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #f8faf5;
    color: #4d7a35;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

/* =========================================================
   일정 관리 액션 모달
========================================================= */

.schedule-action-modal,
.schedule-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.schedule-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
}

.schedule-action-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 430px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 18px 14px 20px;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

.schedule-action-sheet h3 {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 800;
    color: #111827;
}

.schedule-action-item {
    width: 100%;
    height: 46px;
    border: none;
    border-bottom: 1px solid #edf1e8;
    background: #ffffff;
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.schedule-action-item:last-child {
    border-bottom: none;
}

.schedule-action-item.danger {
    color: #b45309;
}

/* =========================================================
   일정 입력 / 수정 모달
========================================================= */

.schedule-edit-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 430px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 18px 14px 20px;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

.schedule-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.schedule-modal-header h3 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    color: #111827;
}

.schedule-modal-header p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.schedule-modal-close-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: #f3f4f6;
    color: #374151;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ===== 폼 섹션 ===== */
.schedule-form-section {
    margin-bottom: 14px;
}

.schedule-form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #374151;
}

/* ===== 시간 없음 / 시간 설정 ===== */
.schedule-time-type-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.schedule-time-type-row label {
    flex: 1;
    height: 38px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #f8faf5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
}

/* ===== 시간 입력 ===== */
.schedule-time-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.schedule-time-input-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
}

.schedule-time-input-row input,
.schedule-text-input {
    width: 100%;
    height: 42px;
    border: 1px solid #d9dfd1;
    border-radius: 14px;
    background: #fbfcf8;
    padding: 0 12px;
    box-sizing: border-box;
    font-size: 14px;
    color: #1f2937;
    outline: none;
}

.schedule-time-input-row input:focus,
.schedule-text-input:focus {
    border-color: #9bc27b;
    background: #ffffff;
}

/* ===== 반복 버튼 ===== */
.schedule-repeat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.schedule-repeat-btn {
    height: 38px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.schedule-repeat-btn.active {
    background: #e9f3dd;
    border-color: #bcd59f;
    color: #4d7a35;
}

/* ===== 알림 버튼 ===== */
.schedule-alarm-row {
    display: flex;
}

.schedule-alarm-toggle {
    width: 100%;
    height: 40px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* ===== 모달 하단 버튼 ===== */
.schedule-modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.schedule-cancel-btn,
.schedule-save-btn {
    flex: 1;
    height: 48px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.schedule-cancel-btn {
    background: #eef2f7;
    color: #475569;
}

.schedule-save-btn {
    background: #7aaa5a;
    color: #ffffff;
}

/* ===== 숨김 공통 ===== */
.hidden {
    display: none !important;
}

/* ===== 작은 화면 보정 ===== */
@media (max-width: 390px) {
    .schedule-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .schedule-grid-row {
        grid-template-columns: 86px 1fr 64px 24px;
        gap: 5px;
    }

    .schedule-time-cell {
        font-size: 10px;
    }

    .schedule-title-cell {
        font-size: 12px;
    }

    .schedule-place-cell {
        font-size: 11px;
    }
}

/* =========================================================
   홈 내 스케쥴 2주 달력
========================================================= */

.home-schedule-card {
    padding: 18px 16px;
}

.home-schedule-desc {
    margin: 10px 0 12px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

.home-schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.home-schedule-day {
    height: 46px;
    border: 1px solid #e5eadf;
    border-radius: 14px;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    padding: 5px 0;
    box-sizing: border-box;
    text-align: center;
}

.home-schedule-day-name {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    line-height: 1.1;
}

.home-schedule-day-number {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.home-schedule-day.today {
    background: #dff0d0;
    border-color: #b7d69a;
    color: #2f5d2f;
}

.home-schedule-day:active {
    transform: scale(0.97);
}

/* =========================================================
   홈 내 스케쥴 2주 달력 정리
   - 날짜 카드 외곽선 제거
   - 오늘 날짜 강조
========================================================= */

/* 날짜 카드 기본 테두리 제거 */
.calendar-day {
    border: none !important;
    box-shadow: none !important;
}

/* 날짜 카드 배경은 은은하게만 */
.calendar-day {
    background: #f8faf5;
}

/* 오늘 날짜 카드 */
.calendar-day.active {
    background: #dff0d0;
    border: 1px solid #b7d69a !important;
}

/* 오늘 날짜 숫자 크게 */
.calendar-day.active .day-date {
    font-size: 24px;
    font-weight: 900;
    color: #2f5d2f;
}

/* 오늘 요일도 살짝 강조 */
.calendar-day.active .day-name {
    color: #4d7a35;
    font-weight: 800;
}

/* =========================================================
   피부 리포트 화면
   - record-analysis.html 전용
   - 기간 기반 리포트: 오늘 / 최근 7일 / 최근 30일 / 최근 3개월
========================================================= */

/* ===== 페이지 전체 ===== */
.skin-report-page {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f6f7f2;
    padding: 18px 14px 90px;
    box-sizing: border-box;
}

/* ===== 상단 헤더 ===== */
.skin-report-header {
    position: relative;
    min-height: 44px;
    margin-bottom: 16px;
}

.skin-report-back-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #dfe7d7;
    border-radius: 12px;
    background: #ffffff;
    color: #4b5563;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.skin-report-header-text {
    text-align: center;
    padding: 0 40px;
}

.skin-report-header-text h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.skin-report-header-text p {
    margin: 0;
    font-size: 12px;
    color: #8b95a1;
    line-height: 1.4;
}

/* ===== 상단 탭 ===== */
.skin-report-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.skin-report-tab {
    height: 38px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.skin-report-tab.active {
    background: #e9f3dd;
    border-color: #bcd59f;
    color: #4d7a35;
}

/* ===== 공통 카드 ===== */
.skin-report-range-card,
.skin-report-summary-card,
.skin-report-graph-card,
.skin-report-card,
.skin-report-history-card {
    background: #ffffff;
    border: 1px solid #e3e9db;
    border-radius: 22px;
    padding: 16px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    margin-bottom: 14px;
}

/* ===== 기간 선택 ===== */
.skin-report-range-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.skin-report-range-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.skin-report-range-btn {
    height: 38px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.skin-report-range-btn.active {
    background: #e9f3dd;
    border-color: #bcd59f;
    color: #4d7a35;
}

/* ===== 카드 헤더 ===== */
.skin-report-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.skin-report-card-head h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

.skin-report-card-head p {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}

/* ===== 점수 배지 ===== */
.skin-report-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #edf5e6;
    color: #4d7a35;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

/* ===== 핵심 요약 본문 ===== */
.skin-report-main-text {
    margin: 0;
    padding: 14px;
    border-radius: 16px;
    background: #fbfcf8;
    border: 1px solid #edf1e8;
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    word-break: keep-all;
}

/* ===== 그래프 박스 ===== */
.skin-report-graph-box {
    min-height: 160px;
    border-radius: 18px;
    background: #fbfcf8;
    border: 1px solid #edf1e8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.skin-report-graph-placeholder {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
}

/* ===== 분석 요약 줄 ===== */
.skin-report-lines {
    padding: 14px;
    border-radius: 16px;
    background: #fbfcf8;
    border: 1px solid #edf1e8;
}

.skin-report-lines p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    word-break: keep-all;
}

.skin-report-lines p:last-child {
    margin-bottom: 0;
}

/* ===== 관리 제안 ===== */
.skin-report-advice-box {
    padding: 14px;
    border-radius: 16px;
    background: #fbfcf8;
    border: 1px solid #edf1e8;
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    word-break: keep-all;
}

/* ===== 지난 리포트 보기 ===== */
.skin-report-history-card {
    padding: 12px 14px;
}

.skin-report-history-btn {
    width: 100%;
    height: 42px;
    border: 1px solid #d8e2cf;
    border-radius: 999px;
    background: #f8faf5;
    color: #4d7a35;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.skin-report-history-btn:active,
.skin-report-range-btn:active {
    transform: scale(0.98);
}

/* ===== 작은 화면 보정 ===== */
@media (max-width: 390px) {
    .skin-report-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .skin-report-header-text h1 {
        font-size: 21px;
    }

    .skin-report-range-buttons {
        gap: 8px;
    }

    .skin-report-range-btn {
        font-size: 12px;
    }

    .skin-report-card-head h3 {
        font-size: 17px;
    }
}

/* =========================
   내일 일정 섹션
========================= */
.schedule-next-section {
    margin-top: 18px;
}

/* 메인 요약 */
.weather-summary {
    margin-top: 6px;
    font-size: 13px;
    color: #6b8f4e;
    font-weight: 500;
}

/* ===== 화장품 페이지 추가 UI ===== */

/* 제품 올리기 버튼 */
.cosmetics-add-area {
    margin: 0 0 12px;
}

.cosmetics-add-btn {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: #dcecc7;
    color: #263b1f;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

/* 구매하기 버튼 */
.cosmetic-action-btn.buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f5f30;
    background: #eef7e8;
    text-decoration: none;
}

/* 추천 탭 검색 / 정렬 */
.recommend-toolbar {
    display: grid;
    grid-template-columns: 1fr 64px 110px;
    gap: 8px;
    margin-bottom: 12px;
}

.recommend-toolbar input,
.recommend-sort {
    height: 42px;
    border: 1px solid #dfe8d6;
    border-radius: 14px;
    padding: 0 12px;
    font-size: 13px;
    background: #ffffff;
}

#recommend-search-btn {
    height: 42px;
    border: none;
    border-radius: 14px;
    background: #dcecc7;
    color: #1f2a1f;
    font-weight: 800;
    cursor: pointer;
}

/* 추천 리스트 */
.recommend-list {
    background: #ffffff;
    border: 1px solid #e3ecd9;
    border-radius: 22px;
    overflow: hidden;
}

.recommend-list-item {
    padding: 16px 14px;
    border-bottom: 1px solid #edf2e8;
}

.recommend-list-item:last-child {
    border-bottom: none;
}

.recommend-top-row {
    display: grid;
    grid-template-columns: 42px 86px 1fr;
    align-items: center;
    gap: 8px;
}

.recommend-index {
    color: #9ca3af;
    font-size: 15px;
    font-weight: 800;
}

.recommend-category {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #3a6b2f;
    font-size: 14px;
    font-weight: 800;
}

.recommend-icon {
    font-size: 18px;
}

.recommend-name {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
}

.recommend-bottom-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.recommend-sub-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.recommend-price {
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.recommend-tag {
    background: #eef7e8;
    color: #5e9f3b;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

.recommend-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;   /* 🔥 줄바꿈 금지 */
}

.cosmetic-action-btn,
.recommend-like-btn,
.recommend-reason-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.recommend-reason-btn {
    background: #eef7e8;
    color: #3a6b2f;
}

.recommend-action-btn {
    background: #f3f4f6;
    color: #374151;
}

.recommend-like-btn {
    background: #ffffff;
    color: #f39a2e;
    border: 1px solid #f0d7b5;
}

/* 제품 올리기 모달 */
.product-add-modal,
.recommend-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.product-add-modal.is-hidden,
.recommend-modal.is-hidden {
    display: none !important;
}

.product-add-overlay,
.recommend-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.product-add-content,
.recommend-modal-content {
    position: relative;
    z-index: 2;
    width: calc(100% - 32px);
    max-width: 420px;
    margin: 80px auto 0;
    background: #ffffff;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.product-add-header,
.recommend-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.product-add-header h3,
.recommend-modal-header h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #111827;
}

.product-add-close,
.recommend-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: #eef2f7;
    color: #334155;
    font-size: 16px;
    cursor: pointer;
}

/* 제품 올리기 내부 탭 */
.product-add-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

/* HEAD*/
.product-add-tab {
    height: 40px;
    border: none;
    border-radius: 13px;
    background: #eef0eb;
    color: #1f2937;
    font-weight: 800;
    cursor: pointer;
}

.product-add-tab.active {
    background: #dcecc7;
    color: #263b1f;
}

.product-add-panel {
    background: #f8faf5;
    border: 1px solid #e3ecd9;
    border-radius: 16px;
    padding: 14px;
}

.product-add-panel p {
    margin: 0 0 12px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

.product-qr-btn,
.product-manual-save-btn {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 13px;
    background: #101723;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.product-add-panel-manual input {
    width: 100%;
    height: 40px;
    margin-bottom: 8px;
    border: 1px solid #dfe8d6;
    border-radius: 12px;
}


.recommend-search-row input {
    flex: 1;
    height: 38px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 0 10px;
    font-size: 13px;
}


/* 추천 이유 모달 */
.recommend-modal-body {
    background: #f8faf5;
    border: 1px solid #e3ecd9;
    border-radius: 16px;
    padding: 14px;
}

.recommend-modal-body p {
    margin: 0;
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
}

/* 모바일 대응 */
@media (max-width: 430px) {
    .recommend-toolbar {
        grid-template-columns: 1fr 58px 96px;
        gap: 6px;
    }

    .recommend-toolbar input,
    .recommend-sort,
    #recommend-search-btn {
        height: 38px;
        font-size: 12px;
        padding: 0 8px;
    }

    .recommend-top-row {
        grid-template-columns: 34px 72px 1fr;
        gap: 6px;
    }

    .recommend-name {
        font-size: 14px;
    }

    .recommend-bottom-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .recommend-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .product-add-content,
    .recommend-modal-content {
        margin-top: 48px;
        width: calc(100% - 24px);
    }
}

.recommend-search-row button {
    height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    border: none;
    background: #7fbf5b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* 리스트 */
.recommend-product-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 카드 */
.recommend-product-card {
    background: #fff;
    border: 1px solid #e3ecd9;
    border-radius: 16px;
    padding: 12px;
}

/* 상단 정보 */
.recommend-product-info h4 {
    margin: 4px 0;
    font-size: 15px;
    font-weight: 800;
    color: #111827;
}

.recommend-category {
    font-size: 11px;
    color: #7fbf5b;
    font-weight: 700;
}

.recommend-brand {
    font-size: 12px;
    color: #6b7280;
}

.recommend-price {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

/* 하단 버튼 */
.recommend-product-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.recommend-product-actions a,
.recommend-product-actions button {
    flex: 1;
    height: 34px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

/* 링크 버튼 */
.recommend-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    text-decoration: none;
    color: #374151;
}

/* 추천 이유 버튼 */
.recommend-reason-btn {
    background: #eef6e7;
    color: #3a6b2f;
    border: none;
}

/* 관심 버튼 */
.recommend-like-btn {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
}

/* 추천 이유 모달 숨김 강제 */
.recommend-modal.is-hidden {
    display: none !important;
}

/* =========================
   관리자 회원관리 페이지
========================= */

.admin-page {
    max-width: 1180px;
    margin: 40px auto;
    padding: 24px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
}

.admin-page h1 {
    margin: 0 0 8px;
    font-size: 26px;
    color: #111827;
}

.admin-desc {
    margin: 0 0 20px;
    font-size: 14px;
    color: #6b7280;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-user-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: #ffffff;
}

.admin-user-table th,
.admin-user-table td {
    height: 44px;
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-table th {
    background: #f5f7f2;
    color: #374151;
    font-weight: 800;
}

.admin-user-table td {
    color: #1f2937;
}

.col-no { width: 54px; }
.col-username { width: 130px; }
.col-nickname { width: 110px; }
.col-email { width: 200px; }
.col-created { width: 150px; }
.col-record { width: 90px; }
.col-detail { width: 90px; }
.col-status { width: 130px; }
.col-delete { width: 70px; }

.admin-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef6e8;
    color: #2f5d37;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.admin-status-box {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.admin-status-btn {
    border: none;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.admin-status-btn.active-normal {
    background: #6da85c;
    color: #ffffff;
}

.admin-status-btn.active-stop {
    background: #e57373;
    color: #ffffff;
}

.admin-status-btn.inactive {
    background: #eeeeee;
    color: #777777;
}

.admin-delete-btn {
    border: none;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* 로그인 / 회원가입 탭 */
.login-tab-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 18px 0 16px;
}

.login-tab-btn {
    height: 44px;
    border: 1px solid #d9dfd1;
    border-radius: 14px;
    background: #ffffff;
    color: #374151;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.login-tab-btn.active {
    background: #6da85c;
    color: #ffffff;
    border-color: #6da85c;
}


/* 카카오 검증 */
.onboarding-help-text {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #9ca3af;
}

.onboarding-help-text.error {
    color: #e74c3c;
}

.onboarding-help-text.success {
    color: #5f9f52;
}

.profile-select {
    width: 48%;
    min-width: 140px;
    height: 32px;
    border: 1px solid #d9dfd1;
    border-radius: 999px;
    padding: 0 12px;
    background: #f7fbf3;
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
}

/* =========================
   AI 음성 입력 웨이브
========================= */

.voice-btn {
    position: relative;
    overflow: hidden;
}

.voice-wave {
    display: none;
}

.voice-btn.listening {
    background: radial-gradient(circle at center, #7fbe6b 0%, #4f8f46 70%);
    box-shadow:
        0 0 0 4px rgba(109, 168, 92, 0.18),
        0 0 18px rgba(109, 168, 92, 0.55);
    animation: voicePulse 1.2s infinite ease-in-out;
}

.voice-btn.listening .voice-icon {
    display: none;
}



.voice-btn.listening .voice-wave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 18px;
}

.voice-btn.listening .voice-wave span {
    width: 4px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    animation: aiVoiceWave 0.8s infinite ease-in-out;
}

.voice-btn.listening .voice-wave span:nth-child(1) {
    animation-delay: 0s;
}

.voice-btn.listening .voice-wave span:nth-child(2) {
    animation-delay: 0.15s;
    height: 14px;
}

.voice-btn.listening .voice-wave span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes aiVoiceWave {
    0%, 100% {
        transform: scaleY(0.45);
        opacity: 0.65;
    }

    50% {
        transform: scaleY(1.6);
        opacity: 1;
    }
}

@keyframes voicePulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

/* =========================
   요금제 안내 / 구독 관리
========================= */

.settings-page {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f7f8f4;
    padding: 22px 16px 40px;
    box-sizing: border-box;
}

.settings-page h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 800;
    color: #1f2937;
}

.settings-page > p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}

.pricing-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pricing-card,
.subscription-current-card,
.subscription-upgrade-card,
.subscription-future-card {
    background: #ffffff;
    border: 1px solid #e5eadf;
    border-radius: 22px;
    padding: 18px 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.pricing-card.recommended {
    border-color: #91c96f;
    background: #fbfff7;
}

.pricing-card.locked {
    opacity: 0.78;
}

.pricing-card h3,
.subscription-current-card h3,
.subscription-upgrade-card h3,
.subscription-future-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: #27452d;
}

.price {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}

.pricing-card ul,
.subscription-upgrade-card ul {
    margin: 0 0 16px;
    padding-left: 18px;
}

.pricing-card li,
.subscription-upgrade-card li {
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
}

.pricing-btn,
.subscription-pay-btn {
    display: block;
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 12px 14px;
    background: #eef2f7;
    color: #374151;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.pricing-btn.primary,
.subscription-pay-btn {
    background: #7aaa5a;
    color: #ffffff;
}

.pricing-btn.disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

.subscription-label {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
}

.subscription-current-card p,
.subscription-future-card p,
.subscription-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}

.subscription-upgrade-card {
    margin-top: 14px;
}

.subscription-future-card {
    margin-top: 14px;
}

.subscription-note {
    margin-top: 12px;
    font-size: 12px;
    color: #9ca3af;
}

.upgrade-btn {
    width: 100%;
    margin-top: 12px;
    border: none;
    border-radius: 999px;
    padding: 12px 14px;
    background: #eef6e8;
    color: #2f5d2f;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

/* 날씨 카드 오른쪽 버튼 묶음 */
.weather-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 지역 변경 ... 버튼 */
.weather-more-btn {
    border: none;
    background: #eef5e9;
    color: #2f5d37;
    width: 34px;
    height: 30px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

/* 지역 변경 모달 배경 */
.location-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* 숨김 처리 */
.location-modal.hidden {
    display: none;
}

/* 모달 박스 */
.location-modal-box {
    width: 360px;
    max-width: 90%;
    background: #ffffff;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* 모달 상단 */
.location-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

/* 닫기 버튼 */
.location-modal-header button {
    border: none;
    background: #eef2f7;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
}

/* 설명 문구 */
.location-modal-desc {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 14px;
}

/* 입력창 */
.location-input {
    width: 100%;
    height: 44px;
    border: 1px solid #d9dfd1;
    border-radius: 14px;
    padding: 0 14px;
    font-size: 14px;
    box-sizing: border-box;
}

/* 모달 버튼 */
.location-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.location-modal-actions button {
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.location-modal-actions button:last-child {
    background: #6da85c;
    color: #ffffff;
}

.weather-location-click {
    cursor: pointer;
    border-radius: 12px;
    padding: 4px 6px;
    margin: -4px -6px;
}

.weather-location-click:hover {
    background: #eef5e9;
}

/* 클릭 가능 지역 */
.weather-location-click {
    cursor: pointer;
    border-radius: 12px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: 0.2s;
}

.weather-location-click:hover {
    background: #eef5e9;
}


/* ========================= */
/* 지역 변경 모달 */
/* ========================= */

.location-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9999;
}

.location-modal.hidden {
    display: none;
}

.location-modal-box {
    width: 360px;
    max-width: 90%;

    background: #ffffff;

    border-radius: 24px;

    padding: 24px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.location-modal-box h3 {
    font-size: 22px;
    margin-bottom: 14px;
    color: #17351f;
}

.location-modal-text {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}

.location-input {
    width: 100%;
    height: 46px;

    border: 1px solid #d9dfd1;
    border-radius: 14px;

    padding: 0 14px;

    font-size: 15px;

    box-sizing: border-box;
}

.location-confirm-text {
    margin-top: 16px;
    font-size: 14px;
    color: #333;
}

.location-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 22px;
}

.location-modal-buttons button {
    border: none;

    padding: 10px 18px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.location-no-btn {
    background: #eef2f7;
    color: #444;
}

.location-yes-btn {
    background: #6faa5b;
    color: #fff;
}

.start-btn.completed {
    background: #edf3e7 !important;
    color: #6b7d63 !important;
    border: 1px solid #d9e5cf;
    cursor: default;
}

/* Sogun 메인 버튼 */
.sogun-btn {
    border: 1px solid #e5eadf;
    background: #ffffff;
    color: #2f5d37;

    padding: 8px 14px;
    border-radius: 14px;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);

    /* 무료 기본 시스템 글꼴: 가독성 좋고 안정적 */
    font-family: "Inter", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    white-space: nowrap;
}

.sogun-btn:hover {
    background: #f7faf4;
    border-color: #d7e5ce;
}

.sogun-btn:active {
    transform: scale(0.98);
}

/* ===== 언어 선택 버튼 ===== */

.language-selector {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 4px;
    margin-right: 8px;
    z-index: 4000;
}

.language-current-btn {
    min-width: 48px;
    height: 30px;
    border: 1px solid #dfe7d7;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.language-menu {
    position: absolute;
    top: 36px;
    left: 0;
    width: 120px;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 5000;
}

.language-menu button {
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
}

.language-menu button:hover {
    background: #eef6e8;
    color: #2f5d37;
}

/* ===== i18n 배너 구조 ===== */

/* 배너 슬라이드 한 장씩 정확히 보이게 */
.banner-slide {
    position: relative;
    min-width: 100%;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 24px;
}

/* 배경 이미지 꽉 채우기 */
.banner-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 배너 글자 */
.banner-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    color: #263b27;
}

.banner-text-left {
    left: 28px;
    max-width: 55%;
}

.banner-text h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
}

.banner-text p {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
}

/* 배너1 오른쪽 */
.banner-1 .banner-content {
    text-align: right;
    margin-left: auto;
    padding-right: 20px;
}

/* 배너1 글씨 위치 */
.banner-1 .banner-text-left {
    left: 42%;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}
/* 배너2 글씨 위치 */
.banner-2 .banner-text-center {
    left: 30%;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}


/* 배너3 현재 유지 */
.banner-3 .banner-content {
    text-align: center;
}


/* 처음1회 기본정보입력 버튼 */
.start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    padding: 5px 12px;

    border: none;
    border-radius: 999px;

    background: linear-gradient(135deg, #79b86a 0%, #5f9d51 100%);
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    box-shadow: 0 2px 6px rgba(109, 168, 92, 0.18);

    transition: all 0.2s ease;
}

/* 눌렀을 때 */
.start-btn:active {
    transform: scale(0.97);
}

/* 입력 완료 상태 */
.start-btn.completed {
    background: #edf3e7;
    color: #6b7d63;
    border: 1px solid #d9e5cf;
    box-shadow: none;
    cursor: default;
}

.leaf-briefing-desc {
    white-space: pre-line;
}

/* 피부종류 선택 */
.modal-guide {
    margin: -6px 0 18px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
}

.modal-save {
    width: 100%;
    height: 52px;
    margin-top: 14px;

    border: none;
    border-radius: 14px;

    /* 🔥 회색 계열 */
   background: #e5e7eb;

    color: #374151;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;
}

.modal-save:active {
    transform: scale(0.98);
}


.chat-message.user {
    align-self: flex-end;
   background: #eef7ea;
    color: #1f2937;
}

.chat-answer-card p {
    margin: 6px 0;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.chat-message {
    max-width: 85%;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: keep-all;
}

.chat-message.user {
    align-self: flex-end;
   background: #eef7ea;
    color: #1f2937;
}

.chat-answer-card p {
    margin: 6px 0;
}

/* 리프 답변 카드: 챗봇 느낌 제거 */
.chat-answer-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
    box-shadow: none;
    box-sizing: border-box;
    word-break: keep-all;
}

/* ===== chat-room 화면 높이/스크롤 안정화 ===== */

/* 채팅방 전체를 화면 높이에 맞춤 */
.chat-room-page {
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 상단 헤더는 고정 높이 영역 */
.chat-room-header {
    flex: 0 0 auto;
}

/* 채팅 본문은 세로 flex 구조 */
.chat-room-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 실제 대화 영역만 스크롤 */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 14px 8px;
    scroll-behavior: smooth;
}

/* 시간대 버튼 영역은 입력창 위에 고정 */
.chat-room-quick-row {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    white-space: nowrap;
}

/* 입력창은 항상 하단에 보이게 유지 */
.chat-input-bar {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #ffffff;
    padding: 8px 12px 12px;
}

/* 질문/답변 사이 간격 축소 */
.chat-message {
    margin-bottom: 10px;
}