:root{
      /* 마스터 브랜드 (셀러루트) */
      --sr-master: #000000;
      --sr-master-light: #1A1A1A;
      --sr-master-soft: #333333;
      
      /* 공통 뉴트럴 컬러 */
      --neutral-50: #FAFAFA;
      --neutral-100: #F6F7FB;
      --neutral-200: #E6E8EF;
      --neutral-300: #D1D5DB;
      --neutral-400: #9CA3AF;
      --neutral-500: #6B7280;
      --neutral-600: #5B6374;
      --neutral-700: #374151;
      --neutral-800: #1F2937;
      --neutral-900: #141821;
      
      /* 공통 시맨틱 컬러 */
      --success: #10B981;
      --success-light: #D1FAE5;
      --success-dark: #047857;
      --warning: #F59E0B;
      --warning-light: #FEF3C7;
      --warning-dark: #D97706;
      --error: #EF4444;
      --error-light: #FEE2E2;
      --error-dark: #DC2626;
      --info: #3B82F6;
      --info-light: #DBEAFE;
      --info-dark: #1D4ED8;
      
      /* 루트스마일 브랜드 색상 */
      --smile-main: #FAB03C;
      --smile-50: #FFF8ED;
      --smile-100: #FFF4E1;
      --smile-200: #FFE4B8;
      --smile-300: #FFD08F;
      --smile-400: #FFC066;
      --smile-500: #FAB03C;
      --smile-600: #E09825;
      --smile-700: #C98213;
      --smile-800: #A66A0E;
      --smile-900: #7A4D0A;
      --smile-accent: #1F2A44;
      --smile-accent-light: #2D3A5C;
      --smile-neutral: #F2EFEA;
      --smile-cream: #FFF5E8;
      --smile-contrast-1: #2563EB;
      --smile-contrast-2: #10B981;
      
      /* 레거시 호환 변수 (기존 코드와의 호환성) */
      --smile: var(--smile-500);
      --smile-tint: var(--smile-100);
      --smile-shade: var(--smile-700);
      --sr-dark: var(--neutral-900);
      --sr-bg: var(--neutral-100);
      --sr-border: var(--neutral-200);
      --sr-text2: var(--neutral-600);
      --sr-surface: #FFFFFF;
      
      /* 공통 그림자/반경 */
      --shadow-sm: 0 2px 8px rgba(0,0,0,.04);
      --shadow-md: 0 10px 28px rgba(0,0,0,.06);
      --shadow-lg: 0 20px 40px rgba(0,0,0,.08);
      --radius: 18px;
      --radius-sm: 8px;
      --radius-lg: 24px;
    }
    /*
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body{ 
      background: var(--neutral-100); 
      color: var(--neutral-900); 
      font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      line-height: 1.7;
    }
    */
    .text-secondary-2{ color: var(--neutral-600)!important; }
    .bg-dark-2{ background: var(--neutral-900)!important; }
    .bg-accent{ background: var(--smile-accent)!important; }
    .text-accent{ color: var(--smile-accent)!important; }
    
    .card-soft{ 
      border:1px solid var(--neutral-200); 
      border-radius: var(--radius); 
      box-shadow: var(--shadow-md); 
      background: var(--sr-surface);
      transition: all 0.3s ease;
    }
    
    .card-soft:hover{
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }
    
    .btn-smile{ 
      background: var(--smile-500); 
      border-color: var(--smile-500); 
      color: var(--neutral-900); 
      font-weight:700;
      padding: 0.65rem 1.5rem;
      border-radius: 12px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(250,176,60,0.25);
    }
    
    .btn-smile:hover{ 
      background: var(--smile-700); 
      border-color: var(--smile-700); 
      color: var(--sr-surface);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(250,176,60,0.35);
    }
    
    .btn-outline-dark2{ 
      border-color: var(--neutral-900); 
      color: var(--neutral-900); 
      font-weight:700;
      padding: 0.65rem 1.5rem;
      border-radius: 12px;
      transition: all 0.3s ease;
      border-width: 2px;
    }
    
    .btn-outline-dark2:hover{ 
      background: var(--neutral-900); 
      color: var(--sr-surface);
      transform: translateY(-2px);
    }
    
    .kicker{ 
      letter-spacing:.08em; 
      text-transform:uppercase; 
      font-weight:800; 
      color: var(--smile-700); 
      font-size:.82rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .kicker::before{
      content: '';
      width: 32px;
      height: 3px;
      background: var(--smile-500);
      border-radius: 2px;
    }
    
    .section{ padding: 80px 0; }
    .section-tight{ padding: 48px 0; }
    /*
    .navbar{
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,0.95)!important;
      border-bottom: 1px solid var(--neutral-200);
    }
    
    .navbar-brand{
      font-weight: 800;
      font-size: 1.3rem;
      color: var(--neutral-900)!important;
    }
    
    .nav-link{
      font-weight: 600;
      color: var(--neutral-600)!important;
      transition: all 0.2s ease;
      position: relative;
    }
    
    .nav-link:hover{
      color: var(--smile-700)!important;
    }
    */
    
    /* Guide List Specific Styles */
    .guide-list-header{
      background: linear-gradient(135deg, var(--sr-surface) 0%, var(--smile-neutral) 50%, var(--neutral-100) 100%);
      border-bottom: 1px solid var(--neutral-200);
      padding: 4rem 0 3rem;
      position: relative;
      /*overflow: hidden;*/
    }
    
    .guide-list-header::before{
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      background: radial-gradient(circle at top right, rgba(250,176,60,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    
    .search-box{
      position: relative;
      max-width: 600px;
      margin: 0 auto;
    }
    
    .search-input{
      width: 100%;
      padding: 1rem 1.5rem 1rem 3.5rem;
      border: 2px solid var(--neutral-200);
      border-radius: 999px;
      font-size: 1.05rem;
      background: var(--sr-surface);
      transition: all 0.3s ease;
    }
    
    .search-input:focus{
      outline: none;
      border-color: var(--smile-500);
      box-shadow: 0 4px 20px rgba(250,176,60,0.2);
    }
    
    .search-icon{
      position: absolute;
      left: 1.25rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--neutral-400);
      font-size: 1.2rem;
    }
    
    .category-nav{
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-top: 2rem;
      justify-content: center;
    }
    
    .category-tab{
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.65rem 1.25rem;
      background: var(--sr-surface);
      border: 2px solid var(--neutral-200);
      border-radius: 999px;
      color: var(--neutral-700);
      text-decoration: none;
      font-weight: 700;
      font-size: 0.95rem;
      transition: all 0.3s ease;
    }
    
    .category-tab:hover{
      background: var(--smile-100);
      border-color: var(--smile-500);
      color: var(--smile-700);
      transform: translateY(-2px);
    }
    
    .category-tab.active{
      background: var(--smile-500);
      border-color: var(--smile-500);
      color: var(--neutral-900);
    }
    
    .category-section{
      scroll-margin-top: 96px;
      margin-bottom: 4rem;
    }
    
    .category-header{
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 3px solid var(--smile-500);
    }
    
    .category-icon{
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--smile-100) 0%, var(--smile-neutral) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      color: var(--smile-700);
      flex-shrink: 0;
    }
    
    .category-title{
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--smile-accent);
      margin: 0;
    }
    
    .category-count{
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--neutral-600);
      margin-left: 0.5rem;
    }
    
    .guide-card{
      background: var(--sr-surface);
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      padding: 1.75rem;
      text-decoration: none;
      display: block;
      transition: all 0.3s ease;
      height: 100%;
    }
    
    .guide-card:hover{
      box-shadow: var(--shadow-lg);
      transform: translateY(-4px);
      border-color: var(--smile-500);
    }
    
    .guide-card-title{
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--neutral-900);
      margin-bottom: 0.75rem;
      line-height: 1.4;
    }
    
    .guide-card-desc{
      font-size: 0.95rem;
      color: var(--neutral-600);
      margin-bottom: 0;
      line-height: 1.6;
    }
    
    .popular-badge{
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: var(--smile-500);
      color: var(--neutral-900);
      padding: 0.35rem 0.75rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    
    .guide-card-wrapper{
      position: relative;
    }
    
    .stats-section{
      background: linear-gradient(135deg, var(--smile-accent) 0%, var(--smile-accent-light) 100%);
      border-radius: var(--radius-lg);
      padding: 2.5rem;
      color: white;
      margin-bottom: 3rem;
    }
    
    .stats-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 2rem;
    }
    
    .stat-item{
      text-align: center;
    }
    
    .stat-number{
      font-size: 2.5rem;
      font-weight: 800;
      color: var(--smile-500);
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    
    .stat-label{
      font-size: 0.95rem;
      color: rgba(255,255,255,0.85);
      font-weight: 600;
    }
    
    .quick-links{
      background: var(--sr-surface);
      border: 2px solid var(--smile-500);
      border-radius: var(--radius);
      padding: 2rem;
      margin-bottom: 3rem;
    }
    
    .quick-links-title{
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--smile-accent);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .quick-links-title i{
      color: var(--smile-500);
    }
    
    .quick-links-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }
    
    .quick-link-item{
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      background: var(--neutral-50);
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius-sm);
      color: var(--neutral-900);
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.2s ease;
    }
    
    .quick-link-item:hover{
      background: var(--smile-100);
      border-color: var(--smile-500);
      color: var(--smile-700);
      transform: translateX(4px);
    }
    
    .quick-link-item i{
      color: var(--smile-500);
      font-size: 1.1rem;
    }
    /*
    footer a{
      transition: all 0.2s ease;
    }
    
    footer a:hover{
      color: var(--smile-500)!important;
    }
    */
    /* 반응형 개선 */
    @media (max-width: 991px) {
      .section{ padding: 60px 0; }
      .section-tight{ padding: 40px 0; }
      .guide-list-header{ padding: 3rem 0 2rem; }
      .category-title{ font-size: 1.5rem; }
      .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
      .stat-number{ font-size: 2rem; }
    }
    
    @media (max-width: 767px) {
      .section{ padding: 48px 0; }
      .section-tight{ padding: 32px 0; }
      .guide-list-header{ padding: 2rem 0 1.5rem; }
      .category-title{ font-size: 1.35rem; }
      .category-icon{ width: 48px; height: 48px; font-size: 1.5rem; }
      .stats-grid{ grid-template-columns: 1fr; gap: 1rem; }
      .quick-links-grid{ grid-template-columns: 1fr; }
      .category-nav{ gap: 0.5rem; }
      .category-tab{ padding: 0.5rem 1rem; font-size: 0.85rem; }
    }

    
.fs-5 {
    font-size: 1.0rem !important;
}
.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}