@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp");

* { box-sizing: border-box; }

/* ===== CSS VARIABLES ===== */
:root {
  /* Colors */
  --color-primary: #CBDD61;
  --color-secondary: #667eea;
  --color-text-deactive: #B3B3B3;
  --color-border: #e9ecef;
}

/* ===== CUSTOM BASE STYLES ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {font-weight: 600;}

a {text-decoration: none;color: inherit;}

textarea {resize: none;}
.material-icons-round {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}

/* ===== CUSTOM COMPONENTS ===== */
/* Navigation */
.nav-link-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5em;
  text-decoration: none;
  color: var(--color-text-deactive);
  font-weight: 500;
  font-size: 10px;
  transition: color 0.3s ease;
}

.nav-link-user.active {
  color: var(--color-primary);
}

/* Slick Dots Customization */
.slick-dots li button:before { 
  color: #cfe7b8; 
}

.slick-dots li.slick-active button:before { 
  color: var(--color-primary); 
}

/* AI Recommendation */
.progress-step {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

.progress-step.active, .progress-step.completed {
  background: white;
}

.survey-container {
    max-height: calc(100vh - 240px);
}

.survey-container div[id^="step-"] {
    display: none;
    transition: opacity .24s ease, transform .18s ease;
}

/* 활성 단계만 보이도록 */
.survey-container div[id^="step-"].active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.option-card {
    background: white;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: slideUp 0.4s ease-out;
}

.option-card:hover, .option-card.selected {
    border-color: var(--color-secondary);
    background-color: #f0f4ff;
}

/* Custom Background Color */
.bg-CBDD61 {
  background-color: var(--color-primary) !important;
}

.bg-FAF5FF {
    background-color: #FAF5FF;
}

.border-CBDD61 {
    border-color: var(--color-primary) !important;
}

.text-FF7700 {
    color: #FF7700;
}

.text-A853F2 {
    color: #A853F2;
}

.profile-header {
    background: linear-gradient(135deg, #3F82F4 0%, #9234E8 100%);
}

.setting-item:hover {
    background-color: #F5F5F5;
}

/* Custom Utility Classes (non-Bootstrap) */
.vh-1 { height: 1vh; }
.vh-5 { height: 5vh; }
.vh-10 { height: 10vh; }
.vh-20 { height: 20vh; }
.vh-30 { height: 30vh; }
.vh-50 { height: 50vh; }
.fs-7 { font-size: 0.875rem; }
.fs-8 { font-size: 0.75rem; }
.fs-9 { font-size: 0.625rem; }
.w-init { width: initial; }
.w-12px { width: 0.75rem; }
.w-16px { width: 1rem; }
.w-20px { width: 1.25rem; }
.h-20px { height: 1.25rem; }
.pt-45 { padding-top: 45%; }
.pt-100 { padding-top: 100%; }
.aspect-ratio-114 { aspect-ratio: 100/114; }
.pb-10vh { padding-bottom: 10vh; }
.cursor-pointer { cursor: pointer; }
.top-_7vh { top: -7vh; }
.top-_4vh { top: -4vh; }
.top-_2vh { top: -2vh; }
.mw-sm { max-width: 576px; }
.mh-70vh { max-height: 70vh; }
.resize-none { resize: none; }
.list-style-circle { list-style-type: circle; }
.list-style-position-outside { list-style-position: outside; }
.gradient-to-r-1EB983-179588 { background: linear-gradient(to right, #1EB983, #179588); }
.linear-gradient-135deg-A853F2-D92579 { background: linear-gradient(135deg, #A853F2 0%, #D92579 100%); }

.textCut {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.2;
    height: 2.4em;
}

/* Animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-link-user:not(.active):hover .nav-link-user-image {
    filter: brightness(.5);
}

.nav-link-user.active .nav-link-user-image {
    filter: brightness(0) saturate(100%) invert(94%) sepia(45%) saturate(723%) hue-rotate(9deg) brightness(90%) contrast(91%);
}

.recommendation-sparkle-filter {
    filter: brightness(0) saturate(100%) invert(74%) sepia(83%) saturate(1648%) hue-rotate(359deg) brightness(102%) contrast(103%);
}

.bookmark-secondary-filter {
    filter: brightness(0) saturate(100%) invert(41%) sepia(0%) saturate(0%) hue-rotate(278deg) brightness(94%) contrast(88%);
}

.profile-image {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.8rem;
    height:1.8rem;
    border-radius:50%;
    background:#B3B3B3;       /* 배경 회색 */
    color:white;            /* 아이콘 색 */
}

a.nav-link-user .profile-image {
    width:1.25rem;
    height:1.25rem;
    font-size:.8rem;
}

a.nav-link-user:not(.active):hover {
    color: black;
}

a.nav-link-user:not(.active):hover .profile-image {
    color: black;
    background: white;
}

a.nav-link-user.active .profile-image {
    background: #CBDD61;
}

.checkbox-icon{
    width:1.625em;
    height:1.625em;
    min-width:1.625em;
    border-radius:50%;
    border:2px solid #656565;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    transition: all .15s ease;
    box-sizing:border-box;
    color: transparent; /* 체크 마크 색(내부) */
    font-size:.875em;
}

.checkbox-icon::after{
    content: "✓";
    color: #656565;
    font-weight: 700;
}

/* 체크 되었을 때(입력 checked인 경우 라벨의 자손 규칙) */
label input:checked + .checkbox-icon {
    background: #2fb96f;
    border-color: #2fb96f;
}

label input:checked + .checkbox-icon::after {
    color: white;
}

.shadow-header {
    box-shadow: 0.25rem 0.25rem 0.25rem rgba(0,0,0,.25);
}

#spinner {
    display: none;
    width: 3rem;
    height: 3rem;
    border: 5px solid grey;
    border-top: 5px solid #CBDD61;
    border-radius: 50%;
    animation: loading 1s linear infinite;
    margin: 1.5rem auto;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.text-auto-pharse {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 기본 스타일 */
.star-rating {
  display: inline-block;
  direction: rtl;                 /* 역순으로 배치해서 CSS로 호버 채우기 편함 */
  unicode-bidi: bidi-override;
}

.star-input {
  display: none;                 /* 라디오는 숨김 (스크린리더는 still accessible) */
}

/* 별 기본(빈) 상태 */
.star {
    color: #cfcfcf;
    cursor: pointer;
    font-size: 3em;
    display: inline-block;
    transition: color .12s ease;
}

/* 체크된 별과 그 왼쪽(시각적으로 이전) 별을 채움 */
/* :checked + label 선택자는 역순 layout에서 동작 */
.star-input:checked ~ .star, .star:hover, .star:hover ~ .star {
  color: #ffcc00; /* 채워진 색(황금) */
}

/* 포커스 스타일(키보드 접근성) */
.star-input:focus + .star {
  outline: 2px solid #6fa8dc;
  outline-offset: 4px;
}

#recipe-detail-nav .nav-link-user {
    color: black;
}

#recipe-detail-nav .nav-link-user.active {
  background-color: inherit;   /* 활성 배경색 */
  color: #1EA34D;   /* 텍스트를 진한 초록으로 */
  font-weight: 700;
}

.blueBlackBar {
    display: inline-block;
    background-color: black;
    vertical-align: middle;
    width: .2em;
    height: .8em;
}

.blueBlackBar::before {
    content: '';
    display: inline-block;
    background-color: #3081F5;
    vertical-align: top;
    width: .2em;
    height: .4em;
}

.blue-circle:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: .9em;
    height: .9em;
    top: .2em;
    left: -1.2em;
    margin-right: .2em;
    border-radius: 100rem;
    background-color: white;
    border: 6px solid #00A6FF;
}

.blue-circle {
    position: relative;
}

.table-border-top-dark-bottom-none {
    border-top: 2px solid;
    border-bottom: 0;
}

.table-border-top-dark-bottom-none th {
    border-bottom: 0;
}

.table-layout-fixed {
    table-layout: fixed;
}