/* ═══ UseGuide — OwnerFlow Design System ═══ */
:root {
   --ug-primary: #3182f6;
   --ug-primary-dark: #1b64da;
   --ug-primary-light: #e8f3ff;
   --ug-purple: #423ae5;
   --ug-purple-light: #eeedfc;
   --ug-success: #00c471;
   --ug-success-light: #e6f9f0;
   --ug-warning: #f59f00;
   --ug-text: #191f28;
   --ug-text-sec: #4e5968;
   --ug-text-muted: #8b95a1;
   --ug-bg: #f7f8fa;
   --ug-white: #ffffff;
   --ug-border: #e5e8eb;
}

/* ── Hero ── */
.ug-hero {
   background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px), radial-gradient(ellipse at 70% 10%, rgba(99, 102, 241, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(49, 130, 246, 0.12) 0%, transparent 50%), linear-gradient(160deg, #0b0f1a 0%, #111827 30%, #1e1b4b 60%, #1a1547 100%);
   background-size:
      24px 24px,
      100% 100%,
      100% 100%,
      100% 100%;
   padding: 80px 24px 60px;
   text-align: center;
   color: #fff;
   position: relative;
   overflow: hidden;
}
.ug-hero::before {
   content: '';
   position: absolute;
   top: -15%;
   right: -8%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 40%, transparent 70%);
   border-radius: 50%;
   filter: blur(40px);
   animation: ug-hero-glow 8s ease-in-out infinite;
}
.ug-hero::after {
   content: '';
   position: absolute;
   bottom: -20%;
   left: -8%;
   width: 450px;
   height: 450px;
   background: radial-gradient(circle, rgba(49, 130, 246, 0.12) 0%, rgba(49, 130, 246, 0.04) 40%, transparent 70%);
   border-radius: 50%;
   filter: blur(40px);
   animation: ug-hero-glow 8s ease-in-out infinite reverse;
}
@keyframes ug-hero-glow {
   0%,
   100% {
      transform: translate(0, 0) scale(1);
   }
   50% {
      transform: translate(-15px, 10px) scale(1.05);
   }
}
.ug-hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.07);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   padding: 8px 20px;
   border-radius: 24px;
   font-size: 12.5px;
   font-weight: 600;
   margin-bottom: 28px;
   letter-spacing: 0.8px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   position: relative;
   z-index: 1;
}
.ug-hero h1 {
   font-size: 40px;
   font-weight: 800;
   margin: 0 0 18px;
   line-height: 1.2;
   letter-spacing: -1px;
   position: relative;
   z-index: 1;
   text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.ug-hero p {
   font-size: 17px;
   color: rgba(255, 255, 255, 0.72);
   max-width: 580px;
   margin: 0 auto;
   line-height: 1.7;
   position: relative;
   z-index: 1;
}

/* ── Layout ── */
.ug-layout {
   display: flex;
   max-width: 1100px;
   margin: 0 auto;
   padding: 48px 24px;
   gap: 40px;
}
.ug-main {
   flex: 1;
   min-width: 0;
}

/* ── Sidebar ── */
.ug-sidebar {
   flex: 0 0 220px;
   position: sticky;
   top: 90px;
   height: fit-content;
}
.ug-nav {
   background: var(--ug-white);
   border-radius: 16px;
   border: 1px solid var(--ug-border);
   overflow: hidden;
}
.ug-nav-title {
   padding: 18px 20px;
   font-size: 15px;
   font-weight: 700;
   color: var(--ug-text);
   border-bottom: 1px solid var(--ug-border);
   display: flex;
   align-items: center;
   gap: 8px;
}
.ug-nav-title i {
   color: var(--ug-primary);
   font-size: 14px;
}
.ug-nav-item {
   padding: 13px 20px;
   font-size: 14px;
   color: var(--ug-text-sec);
   cursor: pointer;
   transition: all 0.2s ease;
   border-left: 3px solid transparent;
   display: flex;
   align-items: center;
   gap: 10px;
}
.ug-nav-item:hover {
   background: var(--ug-bg);
   color: var(--ug-text);
}
.ug-nav-item.active {
   background: var(--ug-primary-light);
   color: var(--ug-primary);
   border-left-color: var(--ug-primary);
   font-weight: 600;
}
.ug-nav-num {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   border-radius: 6px;
   background: var(--ug-bg);
   font-size: 11px;
   font-weight: 700;
   color: var(--ug-text-muted);
   flex-shrink: 0;
}
.ug-nav-item.active .ug-nav-num {
   background: var(--ug-primary);
   color: #fff;
}

/* ── Section ── */
.ug-section {
   padding: 0 0 48px;
}
.ug-section-header {
   text-align: center;
   margin-bottom: 36px;
}
.ug-section-label {
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   color: var(--ug-primary);
   background: var(--ug-primary-light);
   padding: 4px 12px;
   border-radius: 12px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   margin-bottom: 10px;
}
.ug-section-header h2 {
   font-size: 26px;
   font-weight: 800;
   color: var(--ug-text);
   margin: 0 0 10px;
   letter-spacing: -0.3px;
}
.ug-section-header p {
   font-size: 15px;
   color: var(--ug-text-sec);
   max-width: 480px;
   margin: 0 auto;
   line-height: 1.6;
}

/* ── Timeline ── */
.ug-timeline {
   position: relative;
   padding-left: 40px;
}
.ug-timeline::before {
   content: '';
   position: absolute;
   left: 15px;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--ug-border);
}
.ug-step {
   position: relative;
   margin-bottom: 32px;
}
.ug-step:last-child {
   margin-bottom: 0;
}
.ug-step-dot {
   position: absolute;
   left: -40px;
   top: 24px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--ug-primary);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 800;
   z-index: 1;
   box-shadow: 0 2px 8px rgba(49, 130, 246, 0.25);
}
.ug-step.complete .ug-step-dot {
   background: var(--ug-success);
   box-shadow: 0 2px 8px rgba(0, 196, 113, 0.25);
}
.ug-step-card {
   background: var(--ug-white);
   border: 1px solid var(--ug-border);
   border-radius: 16px;
   transition: all 0.25s ease;
   overflow: hidden;
}
.ug-step-card:hover {
   border-color: var(--ug-primary);
   box-shadow: 0 8px 24px rgba(49, 130, 246, 0.08);
   transform: translateY(-2px);
}
.ug-step.complete .ug-step-card:hover {
   border-color: var(--ug-success);
   box-shadow: 0 8px 24px rgba(0, 196, 113, 0.08);
}
.ug-step-head {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px 24px;
   border-bottom: 1px solid var(--ug-border);
}
.ug-step-icon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: var(--ug-primary-light);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
}
.ug-step.complete .ug-step-icon {
   background: var(--ug-success-light);
}
.ug-step-info h3 {
   font-size: 17px;
   font-weight: 700;
   color: var(--ug-text);
   margin: 0 0 4px;
}
.ug-step-info p {
   font-size: 13.5px;
   color: var(--ug-text-sec);
   margin: 0;
   line-height: 1.5;
}
.ug-step-body {
   padding: 20px 24px;
}
.ug-step-body h4 {
   font-size: 13px;
   font-weight: 700;
   color: var(--ug-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.4px;
   margin: 0 0 14px;
}
.ug-checklist {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.ug-checklist li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 14px;
   background: var(--ug-bg);
   border-radius: 10px;
   font-size: 14px;
   color: var(--ug-text-sec);
}
.ug-checklist-icon {
   font-size: 18px;
   flex-shrink: 0;
}
.ug-step-footer {
   padding: 0 24px 20px;
   display: flex;
   align-items: center;
   gap: 12px;
}
.ug-time-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   background: var(--ug-primary-light);
   color: var(--ug-primary);
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
}
.ug-complete-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   background: var(--ug-success-light);
   color: var(--ug-success);
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
}

/* ── Features ── */
.ug-features {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
}
.ug-feature {
   background: var(--ug-white);
   border: 1px solid var(--ug-border);
   border-radius: 16px;
   padding: 24px 20px;
   text-align: center;
   transition: all 0.2s;
}
.ug-feature:hover {
   border-color: var(--ug-primary);
   box-shadow: 0 8px 24px rgba(49, 130, 246, 0.08);
}
.ug-feature-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: var(--ug-primary-light);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin-bottom: 14px;
}
.ug-feature:nth-child(2) .ug-feature-icon {
   background: var(--ug-purple-light);
}
.ug-feature:nth-child(3) .ug-feature-icon {
   background: #fff4e6;
}
.ug-feature:nth-child(4) .ug-feature-icon {
   background: var(--ug-success-light);
}
.ug-feature h4 {
   font-size: 15px;
   font-weight: 700;
   color: var(--ug-text);
   margin: 0 0 6px;
}
.ug-feature p {
   font-size: 13px;
   color: var(--ug-text-muted);
   margin: 0;
   line-height: 1.5;
}

/* ── Support ── */
.ug-support {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
}
.ug-support-card {
   background: var(--ug-white);
   border: 1px solid var(--ug-border);
   border-radius: 16px;
   padding: 28px 24px;
   text-align: center;
   transition: all 0.2s;
}
.ug-support-card:hover {
   border-color: var(--ug-primary);
   box-shadow: 0 8px 24px rgba(49, 130, 246, 0.08);
}
.ug-support-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: var(--ug-primary-light);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin-bottom: 14px;
}
.ug-support-card:nth-child(2) .ug-support-icon {
   background: #fff4e6;
}
.ug-support-card h4 {
   font-size: 16px;
   font-weight: 700;
   color: var(--ug-text);
   margin: 0 0 6px;
}
.ug-support-card p {
   font-size: 13px;
   color: var(--ug-text-muted);
   margin: 0 0 16px;
   line-height: 1.5;
}
.ug-support-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 10px 24px;
   border-radius: 10px;
   font-size: 14px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: all 0.2s;
   text-decoration: none;
   background: var(--ug-primary);
   color: #fff;
}
.ug-support-btn:hover {
   background: var(--ug-primary-dark);
   color: #fff;
   text-decoration: none;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(49, 130, 246, 0.25);
}
.ug-support-card:nth-child(2) .ug-support-btn {
   background: #fee500;
   color: #191f28;
}
.ug-support-card:nth-child(2) .ug-support-btn:hover {
   background: #f5dc00;
   color: #191f28;
   box-shadow: 0 4px 12px rgba(254, 229, 0, 0.35);
}

/* ── CTA ── */
.ug-cta {
   background: linear-gradient(135deg, #423ae5, #3182f6);
   padding: 48px 24px;
   border-radius: 20px;
   text-align: center;
   color: #fff;
}
.ug-cta h2 {
   font-size: 24px;
   font-weight: 800;
   margin: 0 0 10px;
}
.ug-cta p {
   font-size: 15px;
   opacity: 0.85;
   margin: 0 0 24px;
}
.ug-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #fff;
   color: var(--ug-purple);
   font-size: 15px;
   font-weight: 700;
   padding: 14px 32px;
   border-radius: 12px;
   border: none;
   cursor: pointer;
   transition: all 0.2s;
   text-decoration: none;
}
.ug-cta-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
   color: var(--ug-purple);
   text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 991px) {
   .ug-sidebar {
      display: none;
   }
   .ug-layout {
      padding: 36px 20px;
   }
}
@media (max-width: 767px) {
   .ug-hero {
      padding: 64px 20px 48px;
   }
   .ug-hero h1 {
      font-size: 28px;
   }
   .ug-timeline {
      padding-left: 32px;
   }
   .ug-timeline::before {
      left: 11px;
   }
   .ug-step-dot {
      left: -32px;
      width: 24px;
      height: 24px;
      font-size: 11px;
   }
   .ug-step-head {
      padding: 16px 18px;
      gap: 12px;
   }
   .ug-step-icon {
      width: 40px;
      height: 40px;
      font-size: 18px;
      border-radius: 10px;
   }
   .ug-step-info h3 {
      font-size: 15px;
   }
   .ug-step-body {
      padding: 16px 18px;
   }
   .ug-step-footer {
      padding: 0 18px 16px;
   }
   .ug-features {
      grid-template-columns: 1fr 1fr;
      gap: 12px;
   }
   .ug-support {
      grid-template-columns: 1fr;
   }
   .ug-section-header h2 {
      font-size: 22px;
   }
   .ug-cta {
      padding: 36px 20px;
      border-radius: 16px;
   }
   .ug-cta h2 {
      font-size: 20px;
   }
}
@media (max-width: 480px) {
   .ug-features {
      grid-template-columns: 1fr;
   }
}

.faq-search input {
   width: 100%;
   padding: 16px;
   border: 2px solid var(--toss-gray-200);
   border-radius: 12px;
   font-size: 16px;
}

.faq-category {
   display: flex;
   gap: 8px;
   margin-bottom: 24px;
   overflow-x: auto;
   padding-bottom: 8px;
}

.faq-category button {
   padding: 8px 16px;
   border: 1px solid var(--toss-gray-200);
   border-radius: 20px;
   font-size: 14px;
   background: white;
   white-space: nowrap;
}

.faq-category button.active {
   background: var(--toss-blue);
   color: white;
   border-color: var(--toss-blue);
}

/* ==========================================================================
   9. 지원 섹션
   ========================================================================== */
.support-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
}

.support-item {
   background: white;
   padding: 24px;
   border-radius: 12px;
   border: 1px solid var(--toss-gray-200);
   text-align: center;
}

.support-icon {
   font-size: 32px;
   margin-bottom: 16px;
}

.support-button {
   margin-top: 16px;
   padding: 12px 24px;
   background: var(--toss-blue);
   color: white;
   border: none;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s;
   display: inline-block;
   text-decoration: none;
}

.support-button:hover {
   background: #2b74e2;
   color: white !important;
}

/* ==========================================================================
   10. 애니메이션
   ========================================================================== */
@keyframes progressAnimation {
   from {
      width: 0;
   }
   to {
      width: 75%;
   }
}

/* ==========================================================================
   11. 반응형
   ========================================================================== */
@media (max-width: 768px) {
   /* 레이아웃 */
   .guide-container {
      flex-direction: column;
   }

   .guide-sidebar {
      position: static;
      width: 100%;
      flex: 0 0 60px;
   }

   /* 그리드 */
   .feature-grid,
   .example-list,
   .support-grid,
   .workflow-row {
      grid-template-columns: 1fr;
      gap: 24px;
   }

   /* 워크플로우 */
   .workflow-arrow {
      display: none;
   }

   .workflow-row.reverse::before {
      display: none;
   }

   /* 타이포그래피 */
   .card-header h3,
   .card-content h3 {
      font-size: 18px;
   }

   /* 배지 */
   .timeline-badge {
      width: 40px;
      height: 40px;
   }

   .badge-icon {
      font-size: 16px;
   }
   .guide-container {
      padding: 0;
      gap: 0;
   }

   /* 사이드바 모바일 최적화 */
   .guide-sidebar {
      position: fixed;
      top: 65px;
      z-index: 100;
      background: #fff;
      border-bottom: 1px solid var(--toss-gray-200);
      margin-bottom: 16px;
      padding: 0;
   }

   .guide-nav {
      box-shadow: none;
      border-radius: 0;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
   }

   .guide-nav-title {
      display: none;
   }

   .guide-nav {
      display: flex;
      padding: 12px 16px 8px;
   }

   .guide-nav-item {
      padding: 8px 16px;
      font-size: 14px;
      border-left: none;
      border-radius: 20px;
      flex-shrink: 0;
   }

   .guide-nav-item.active {
      background: var(--toss-blue);
      color: #fff;
   }

   /* 메인 콘텐츠 최적화 */
   .guide-content {
      padding: 0 16px 24px;
   }

   .guide-section {
      padding: 74px 10px;
      border-radius: 12px;
      margin-bottom: 16px;
   }

   .guide-section-title {
      font-size: 20px;
      text-align: left;
      margin-bottom: 16px;
      letter-spacing: -0.3px;
   }

   .guide-description {
      text-align: left;
      font-size: 14px;
      color: var(--toss-gray-600);
      margin-bottom: 32px;
      letter-spacing: -0.2px;
   }

   /* 워크플로우 최적화 */
   .workflow-grid {
      margin: 0;
   }

   .workflow-item {
      padding-bottom: 32px;
   }

   .timeline-card {
      margin: 0;
      border: 1px solid var(--toss-gray-200);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   }

   .card-header {
      padding: 32px 16px 16px;
      text-align: left;
   }

   .card-icon {
      font-size: 24px;
      margin-bottom: 12px;
   }

   .header-text h3 {
      font-size: 17px;
      margin-bottom: 4px;
   }

   .header-text p {
      font-size: 14px;
   }

   .process-details {
      gap: 16px;
   }

   .detail-section h4 {
      font-size: 14px;
      padding-left: 0;
      margin-bottom: 12px;
   }

   .process-list li {
      font-size: 14px;
      padding: 12px;
      background: var(--toss-gray-50);
   }

   .process-icon {
      font-size: 16px;
   }

   .time-estimate {
      font-size: 13px;
      padding: 6px 12px;
   }

   /* 시작하기 섹션 최적화 */
   .welcome-box {
      padding: 24px 16px;
      border-radius: 12px;
   }

   .welcome-icon {
      font-size: 36px;
      margin-bottom: 12px;
   }

   .feature-grid {
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 24px;
   }

   .feature-item {
      padding: 16px;
      border-radius: 12px;
   }

   .feature-icon {
      font-size: 24px;
      margin-bottom: 8px;
   }

   .feature-item h4 {
      font-size: 15px;
      margin-bottom: 4px;
   }

   .feature-item p {
      font-size: 14px;
      color: var(--toss-gray-600);
   }

   /* 지원 섹션 최적화 */
   .support-grid {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .support-item {
      padding: 20px 16px;
      border-radius: 12px;
   }

   .support-icon {
      font-size: 24px;
      margin-bottom: 12px;
   }

   .support-item h4 {
      font-size: 16px;
      margin-bottom: 4px;
   }

   .support-item p {
      font-size: 14px;
      color: var(--toss-gray-600);
   }

   .support-button {
      width: 100%;
      padding: 12px;
      font-size: 14px;
      border-radius: 10px;
      margin-top: 12px;
   }

   /* 화살표 수정 */
   .workflow-arrow {
      height: 24px;
      margin: 8px 0;
   }

   .workflow-arrow::after {
      width: 8px;
      height: 8px;
   }
}