* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: none;
      text-decoration: none;
      background: none;
      font-family: auto;
      -webkit-font-smoothing: antialiased;
    }
    
   a,
		a:visited,
		a:hover,
		a:active {
		  color: inherit;
		  text-decoration: none;
		}

    :root {
      --bsk-black: #292923;
      --bsk-gray: #dddddd;
      --bsk-white: #fcfcf5;
      --bsk-blue: #0084ff;
      --bsk-green: #00d777;
      --bsk-yellow: #ffb300;
      --bsk-pink: #ff518e;
      --light-active: #f4f4f4;
      --dark-hover: #858585;
      --normal-hover: #c7c7c7;
    }

    body {
      font-family: 'PretendardVariable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      background: var(--light-active);
      line-height: 1.6;
      color: var(--bsk-black);
    }

    .container {
      max-width: 1540px;
      margin: 0 auto;
      /* padding: 0 20px; */
    }

    /* Header */
    header {
/*       position: sticky; */
/*       top: 0; */
/*       z-index: 1000; */
      width: 100%;
    }

    .header-top {
		background: var(--bsk-black);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		max-width: 1540px;
		margin: 0 auto;
		min-height: 55px;
		margin-top: 1%;
	}

	.nav-left {
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;
    }

    .menu-icon {
      width: 25px;
      height: 25px;
      cursor: pointer;
    }

    /* 기존 데스크톱 가로 메뉴 - 데스크톱에서만 표시 */
    .desktop-nav-menu {
      display: flex;
      gap: 0;
      align-items: center;
    }

    /* 데스크톱에서 확실하게 표시 */
    @media (min-width: 769px) {
      .desktop-nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        pointer-events: auto !important;
        z-index: auto !important;
      }

      .desktop-nav-menu * {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        pointer-events: auto !important;
        z-index: auto !important;
      }

      .desktop-nav-menu .nav-item,
      .desktop-nav-menu .nav-divider {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        pointer-events: auto !important;
        z-index: auto !important;
      }
    }

    .nav-item {
      padding: 13px 20px;
      color: var(--light-active, #f4f4f4) !important;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.3s;
      text-decoration: none;
      display: inline-block;
    }

    .nav-item:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .nav-item a {
      color: var(--light-active, #f4f4f4);
      text-decoration: none;
    }

    .nav-divider {
      color: var(--light-active);
      padding: 0 10px;
    }

    .nav-right {
      display: flex;
      gap: 25px;
      align-items: center;
    }

    .login-btn {
      background: var(--light-active);
      color: var(--bsk-black);
      padding: 5px 10px;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      min-width: 65px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon-btn {
      width: 25px;
      height: 25px;
      cursor: pointer;
    }

    /* Logo Section */
    .logo-section {
      padding: 19px 0;
      max-width: 1542px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      font-family: Proxima Nova;
    }

    .logo-left {
      font-size: 32px;
      line-height: 0.9;
      font-weight: 600;
      color: #000;
      text-align: left;
    }

    .logo-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-center svg,
    .logo-center img {
      height: 84px;
      width: auto;
    }

    .logo-right {
      font-size: 23px;
      line-height: 1;
      font-weight: 600;
      color: #000;
      text-align: right;
    }

    .divider-line {
      background: var(--bsk-black);
      height: 5px;
      width: 100%;
      max-width: 1540px;
      margin: 0 auto;
    }

    /* Hero Image */
    .hero-image {
      max-width: 1540px;
      margin: 0 auto 100px auto;
      /*  margin: 50px auto;
      padding: 0 20px; */
    }

    .hero-image img {
      width: 100%;
      height: auto;
      max-height: 462px;
      object-fit: cover;
    }

    /* Blue Banner */
    .blue-banner {
      background: var(--bsk-blue);
      padding: 67px 64px;
      max-width: 1540px;
      margin: 50px auto;
      font-family: Proxima Nova;
    }

    .blue-banner-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

    .banner-text {
      color: var(--bsk-gray);
      font-size: 25px;
      line-height: 1.6;
      font-weight: 600;
      flex: 1;
    }

    .banner-logo {
      font-size: 48px;
      font-weight: 900;
      letter-spacing: 8px;
      color: var(--bsk-gray);
    }

    /* Section Header */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .section-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 1.3;
    }

    .section-nav {
      display: flex;
      gap: 15px;
    }

    .nav-arrow {
      width: 24px;
      height: 24px;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.3s;
    }

    .nav-arrow.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .nav-arrow:hover {
      opacity: 1 !important;
    }

    .nav-arrow:active {
      opacity: 1 !important;
    }

    .more-btn {
      background: var(--bsk-black);
      color: var(--bsk-gray);
      padding: 8px 13px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.3s;
    }

    .more-btn:hover {
      background: #3a3a34;
    }
    
    /* 섹션 푸터 - 데스크톱에서 숨기기 */
    .section-footer {
      display: none;
    }

    /* Featured Articles Section */
    .featured-section {
      max-width: 1540px;
      margin: 60px auto;
    }

    .featured-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-top: 20px;
    }

    .article-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* article-list에 empty-message만 있을 때 전체 그리드 차지 */
    .featured-grid > .article-list:has(.empty-message:only-child) {
      grid-column: 1 / -1;
    }

    .article-item {
      display: flex;
      align-items: center;
      gap: 45px;
      padding: 15px 0;
      border-bottom: 1px solid var(--normal-hover);
      cursor: pointer;
      transition: background 0.3s;
    }
    
    .article-item:hover {
      background: rgba(0, 0, 0, 0.02);
    }

    .article-item:first-child {
      border-top: 3px solid #000;
    }

    .article-meta {
      display: flex;
      flex-direction: column;
      min-width: 137px;
      position: relative;
    }

	.article-badge {
		position: absolute;
		bottom: 0;
		left: 0;
		display: inline-flex;
		align-items: center;
		gap: 0;
		overflow: hidden;
	}

	.article-badge.right-top {
		top: 0;
		right: 0;
		bottom: auto;
		left: auto;
	}

	.article-badge.left-top {
		top: 0;
		left: 0;
		bottom: auto;
		right: auto;
	}

	.article-badge.right-bottom {
		bottom: 0;
		right: 0;
		top: auto;
		left: auto;
	}

	.article-badge.left-bottom {
		bottom: 0;
		left: 0;
		top: auto;
		right: auto;
		z-index: 3;
	}

	.article-badge .tagWrap {
		display: flex;
		justify-content: flex-start;
	}

	.article-badge .category {
		position: relative;
		display: inline-block;
		text-align: center;
		padding: 10px;
		color: #fff;
		background-color: var(--category-bg-color, #2029ac);
	}


	.article-badge .category::after {
		content: '';
		position: absolute;
		bottom: 0;
		right: -10px;
		width: 10px;
		height: 50%;
		background-color: var(--category-bg-color, inherit);
	}

	.article-badge .name {
		display: inline-block;
		width: 80px;
		text-align: center;
		padding: 10px;
		background-color: var(--bsk-black);
		color:  var(--bsk-gray);
	}

	.featured-section .article-badge {
		position: static;
		/* width: auto; */
	}

	.featured-card-image-div .featured-card-category,
	.featured-card .featured-card-category {
		position: absolute !important;
		bottom: 0;
		left: 0;
		z-index: 1;
	}


    .badge {
      /* padding: 0 10px; */
      font-size: 14px;
      font-weight: 500;
      color: var(--bsk-gray);
      height: 26px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .badge-blue { background: var(--bsk-blue); }
    .badge-yellow { background: var(--bsk-yellow); color: var(--bsk-black); }
    .badge-green { background: var(--bsk-green); color: var(--bsk-black); }
    .badge-pink { background: var(--bsk-pink); }

    .badge-triangle {
      width: 0;
      height: 0;
      border-top: 12.5px solid transparent;
      border-bottom: 12.5px solid transparent;
      margin-left: -11px;
    }

    .badge-triangle-blue { border-left: 25px solid var(--bsk-blue); }
    .badge-triangle-yellow { border-left: 25px solid var(--bsk-yellow); }
    .badge-triangle-green { border-left: 25px solid var(--bsk-green); }
    .badge-triangle-pink { border-left: 25px solid var(--bsk-pink); }

    .author-badge {
      display: flex;
      align-items: center;
      gap: 0;
      background: var(--bsk-black);
      margin-left: -8px;
      color: var(--bsk-white);
      overflow: hidden;
    }

    .main-seminar-section .author-badge {
      background: var(--bsk-gray);
      color: var(--bsk-white);
    }

    .author-triangle {
      width: 0;
      height: 0;
      border-top: 12.5px solid transparent;
      border-bottom: 12.5px solid transparent;
      border-left: 25px solid var(--bsk-gray);
    }

    .author-name {
/*       background: var(--bsk-gray); */
      color: var(--bsk-gray);
/*       padding: 12px 10px 10px; */
      font-size: 14px;
      font-weight: 500;
      height: 26px;
      display: flex;
      align-items: center;
      /* margin-left: -11px; */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .featured-grid .author-name,
    .articles-section .author-name,
    .video-section .author-name {
      color: var(--bsk-gray);
    }

    .article-date {
      font-size: 18px;
      font-weight: 500;
      color: var(--bsk-black);
    }

    .article-title-text {
      font-size: 23px;
      font-weight: 600;
      line-height: 1.3;
      flex: 1;
    }

    .featured-card {
      position: relative;
/*       height: 361px; */
      overflow: hidden;
    }
    
    .featured-card-image-div {
    	position: relative;
    }

    .featured-card-image {
      display: block;
      width: 100%;
      height: 361px;
/*       height: 100%; */
      object-fit: cover;
    }
    
    

    .featured-card-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
 /*   padding: 15px;
      background: rgba(0, 0, 0, 0.7); */
    }

    .featured-card-title {
/*       color: var(--bsk-gray); */
      font-size: 32px;
      font-weight: 600;
      line-height: 1.3;
    }

    /* Article Cards Grid */
    .articles-section {
      max-width: 1540px;
      margin: 60px auto;
      /* padding: 0 20px; */
    }

    .articles-grid {
     /*  display: grid;
      grid-template-columns: repeat(4, 1fr); */
      gap: 45px;
      margin-top: 50px;
    }

    .articles-grid.slider-viewport {
      gap: 0;
    }
    
    .article-img {
    	height: 200px;
    	position: relative;
    }

    .article-card {
      display: flex;
      flex-direction: column;
      transition: transform 0.3s;
      flex-shrink: 0;
      width: 351px;
      box-sizing: border-box;
    }

    .article-card:hover {
      transform: translateY(-5px);
    }

    .article-card-image {
      width: 100%;
      height: 172px;
      object-fit: cover;
      margin-bottom: 10px;
    }

    .article-card-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 20px;
      background: var(--bsk-black);
      min-height: 90px;
      border-bottom: 3px solid #000;
    }

    .article-card-title {
      color: var(--bsk-gray);
      font-size: 18px;
      font-weight: 600;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .article-card-desc {
      color: var(--dark-hover);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Video Cards */
    .video-section {
      max-width: 1540px;
      margin: 60px auto;
/*       padding: 0 20px; */
    }

    .video-grid {
      gap: 24px;
      margin-top: 50px;
    }

    .video-grid.slider-viewport {
      display: block;
      gap: 0;
    }
    
     .video-img {
      height: 200px;
      position: relative;
    }
    

    .video-card {
      display: flex;
      flex-direction: column;
      transition: transform 0.3s;
      flex-shrink: 0;
      width: 351px;
      box-sizing: border-box;
      transform: translateY(0);
    }

    .video-card:hover {
      transform: translateY(-5px);
    }

    .video-card-image {
      width: 100%;
      height: 172px;
      object-fit: cover;
      position: relative;
    }

    .video-card-content {
      padding: 10px 20px;
      background: var(--bsk-black);
      min-height: 90px;
    }

    /* Ad Banner */
    .ad-banner {
      background: #c7c7c7;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 1540px;
      margin: 60px auto;
      font-size: 23px;
      font-weight: 600;
    }

    /* Seminar Section - Main Page */
    .main-seminar-section {
      max-width: 1540px;
      margin: 60px auto;
/*       padding: 0 20px; */
    }

    .main-seminar-grid {
      display: grid;
      grid-template-columns: 750px 1fr 1fr;
      gap: 44px;
      margin-top: 50px;
    }

    .main-seminar-featured {
      display: grid;
      grid-template-columns: 434px 1fr;
      height: 380px;
      transition: transform 0.3s;
    }

    .main-seminar-featured:hover {
      transform: translateY(-5px);
    }

    .main-seminar-featured .author-badge {
      background: var(--bsk-gray);
      color: var(--bsk-white);
    }

    .main-seminar-featured .author-name {
      color: var(--bsk-black);
    }

    .main-seminar-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .main-seminar-info {
      background: var(--bsk-blue);
      padding: 23px 29px;
      display: flex;
      flex-direction: column;
      gap: 30px;
      color: var(--bsk-gray);
      max-width:300px;
    }

    .main-seminar-content {
      display: flex;
      flex-direction: column;
      gap: 50px;
      color: var(--bsk-white);
    }

    .main-seminar-text {
      display: flex;
      flex-direction: column;
      gap: 20px;
      color: var(--bsk-white);
      overflow: hidden;
    }

    .main-seminar-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--bsk-white);
    }

    .main-seminar-subtitle {
      font-size: 20px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--bsk-white);
    }

    .main-seminar-date {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;
      color: var(--bsk-white);
    }

    .main-seminar-btn {
      background: var(--light-active);
      color: var(--bsk-black);
      padding: 10px 27px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: background 0.3s;
    }

    .main-seminar-btn:hover {
      background: #e4e4e4;
    }

    .main-seminar-card {
      display: flex;
      flex-direction: column;
      height: 380px;
      transition: transform 0.3s;
    }

    .main-seminar-card:hover {
      transform: translateY(-5px);
    }

    .main-seminar-card-image {
      width: 100%;
      height: 290px;
      object-fit: cover;
    }

    .main-seminar-card-content {
      padding: 10px 20px;
      min-height: 90px;
      display: flex;
      align-items: center;
    }

    .main-seminar-section .main-seminar-card-content {
      background: var(--bsk-black);
    }

    .main-seminar-card-title {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--bsk-gray);}

    /* Category Section */
    .category-section {
      max-width: 1540px;
      margin: 60px auto;
      padding: 100px 0;
    }

    .category-rows {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 20px;
    }
    
    /* Category section의 empty-message 중앙 정렬 */
    .category-section .category-rows .empty-message {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
      text-align: center;
      color: #6c757d;
    }

    .category-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .category-tag {
      background: var(--bsk-black);
      color: var(--bsk-gray);
      padding: 6px 31px;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.3s;
    }

    .category-tag:hover {
      background: #3a3a34;
    }

    /* CTA Section */
    .cta-section {
      max-width: 1540px;
      margin: 60px auto;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .cta-button {
      display: flex;
      align-items: center;
      padding: 13px 20px;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    .cta-button:hover {
      opacity: 0.9;
    }

    .cta-primary {
      background: var(--bsk-blue);
      height: 50px;
    }

    .cta-secondary {
      background: var(--bsk-black);
      height: 50px;
      width: 30%;
    }

    .cta-text {
      font-size: 23px;
      font-weight: 600;
      color: var(--bsk-gray);
    }

    .cta-arrow {
      margin-left: 20px;
    }
    
    .cta-logo {
    	margin-left: auto;
    }
    
    .cta-logo img {
    	height: 28px;
    }
    

    /* Footer */
    footer {
      background: var(--light-active);
      width: 100%;
    }

    .footer-wrapper {
      width: 100%;
      background: var(--light-active);
    }

    .footer-content {
      max-width: 1540px;
      margin: 0 auto;
      padding: 0 20px;
      background: var(--light-active);
      width: 100%;
    }

    /* Top Section: Action Buttons */
    .footer-top-section {
      display: flex;
      flex-direction: column;
      gap: 0;
      width: 100%;
    }

    .footer-customer-btn {
      background: var(--bsk-black);
      color: var(--bsk-white);
      padding: 13px 200px 13px 20px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      cursor: pointer;
      transition: background 0.3s;
      font-size: 23px;
      font-weight: 600;
    }

    .footer-customer-btn:hover {
      background: #3a3a34;
    }

    .footer-b2b-section {
      display: flex;
      align-items: stretch;
      width: 100%;
      position: relative;
      margin-top: 0;
    }

    .footer-b2b-btn {
      background: var(--bsk-blue);
      color: var(--bsk-white);
      padding: 13px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      cursor: pointer;
      transition: background 0.3s;
      font-size: 23px;
      font-weight: 600;
      min-height: 50px;
    }

    .footer-b2b-btn:hover {
      background: #0073e6;
    }

    .footer-b2b-logo {
      color: var(--bsk-white);
      font-size: 23px;
      font-weight: 600;
      padding: 0 20px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      pointer-events: none;
    }

    .footer-arrow-icon {
      width: 20px;
      height: 20px;
      filter: brightness(0) invert(1);
    }

    /* Navigation Bar */
    .footer-nav-bar {
      background: var(--bsk-black);
      width: 100%;
      margin-top: 0;
    }

    .footer-nav-content {
      max-width: 1540px;
      margin: 0 auto;
      display: flex;
      gap: 20px;
      padding: 13px 20px;
      flex-wrap: wrap;
    }

    .footer-nav-bar a {
      color: var(--bsk-white);
      font-size: 18px;
      font-weight: 500;
      transition: opacity 0.3s;
    }

    .footer-nav-bar a:hover {
      opacity: 0.8;
    }

    /* Company Information */
    .footer-company-info {
      padding: 30px 0 20px 0;
      width: 100%;
    }

    .footer-company-name {
      color: var(--bsk-black);
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 15px;
    }

    .footer-company-details {
      color: var(--bsk-black);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.6;
    }

    /* Copyright Section */
    .footer-copyright {
      padding: 20px 0;
      width: 100%;
    }

    .footer-copyright-text {
      color: var(--bsk-black);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.6;
      margin-bottom: 10px;
    }

    .footer-copyright-notice {
      color: var(--bsk-black);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.6;
    }

    .footer-divider {
      background: var(--bsk-black);
      height: 1px;
      width: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
      margin-bottom: 20px;
      border: 2px solid var(--bsk-black);
    }

    /* Dots Navigation */
    .dots-nav {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin: 30px 0;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--bsk-black);
      cursor: pointer;
    }

    .dot.inactive {
      opacity: 0.5;
    }

    /* Terms Page Styles - frame-598 design */
    .terms-container {
			background: var(--light-active, #f4f4f4);
			min-height: calc(100vh - 200px);
			padding: 40px 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			max-width: 1540px;
			margin: 0 auto;
		}
		
	.terms-title-wrapper {
		color: var(--bsk-black, #292923);
		text-align: center;
		font-family: var(--h2-font-family, "PretendardVariable-SemiBold", sans-serif);
		font-size: var(--h2-font-size, 32px);
		line-height: var(--h2-line-height, 130%);
		font-weight: var(--h2-font-weight, 600);
		margin-bottom: 40px;
		width: 100%;
		max-width: 672px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
		
	.terms-container .frame-598 {
		background: var(--light-hover, #fafafa);
		padding: 20px 40px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: center;
		justify-content: center;
		align-self: center;
		width: 100%;
		max-width: 672px;
		position: relative;
	}
		
		.frame-313,
		.frame-314,
		.frame-315,
		.frame-316,
		.frame-317,
		.frame-318 {
			display: flex;
			flex-direction: column;
			gap: 10px;
			align-items: flex-start;
			justify-content: flex-start;
			align-self: stretch;
			flex-shrink: 0;
			position: relative;
		}
		
	.terms-article-number {
		color: var(--bsk-black, #292923);
		text-align: left;
		font-family: var(--t3-font-family, "PretendardVariable-SemiBold", sans-serif);
		font-size: var(--t3-font-size, 14px);
		line-height: var(--t3-line-height, 130%);
		font-weight: var(--t3-font-weight, 600);
		position: relative;
		width: 100%;
		max-width: 500px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	/* FAQ 검색란 스타일 */
	.faq-search-wrapper {
		width: 100%;
		margin-bottom: 20px;
	}

	.faq-search-box {
		background: var(--bsk-gray, #dddddd);
		padding: 15px 20px;
		display: flex;
		flex-direction: row;
		gap: 15px;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: 60px;
	}

	.faq-search-icon {
		opacity: 0.5;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		position: relative;
		overflow: visible;
	}

	.faq-search-input-field {
		color: var(--bsk-black, #292923);
		text-align: left;
		font-family: var(--t1-font-family, "PretendardVariable-SemiBold", sans-serif);
		font-size: var(--t1-font-size, 18px);
		line-height: var(--t1-line-height, 160%);
		font-weight: var(--t1-font-weight, 600);
		opacity: 0.5;
		position: relative;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background: transparent;
		border: none;
		outline: none;
		width: 100%;
	}

	.faq-search-input-field::placeholder {
		color: var(--bsk-black, #292923);
		opacity: 0.5;
	}

	.faq-search-input-field:focus {
		opacity: 1;
	}

	/* FAQ specific styles */
	.faq-item-wrapper {
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: flex-start;
		justify-content: flex-start;
		align-self: stretch;
		flex-shrink: 0;
		position: relative;
		width: 100%;
	}

	.faq-item-wrapper .terms-article-number {
		cursor: pointer;
		padding: 10px 0;
		margin-bottom: 10px;
	}

	.faq-item-wrapper .frame-220 {
		margin-top: 0;
		padding-top: 10px;
	}
		

		
		.terms-article-content {
			color: var(--bsk-black, #292923);
			text-align: left;
			font-family: var(--text2-font-family, "PretendardVariable-Regular", sans-serif);
			font-size: 14px;
			line-height: 160%;
			font-weight: 400;
			position: relative;
			flex: 1;
			align-items: center;
			justify-content: flex-start;
		}



    /* Responsive Design */
    @media (max-width: 1600px) {
      .main-seminar-grid {
        grid-template-columns: 1fr 1fr;
      }

      .main-seminar-featured {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 1200px) {
      .featured-grid {
        grid-template-columns: 1fr;
      }

      .main-seminar-grid {
        grid-template-columns: 1fr;
      }

      .main-seminar-featured {
        grid-column: 1;
      }

      .article-card,
      .video-card {
        width: calc((100% - 48px) / 3);
      }
    }

    @media (max-width: 900px) {
      .article-card,
      .video-card {
        width: calc((100% - 24px) / 2);
      }

      .logo-section {
        padding: 10px;
      }

      .logo-center {
        position: static;
        transform: none;
      }

      .banner-text {
        font-size: 20px;
      }

      .main-seminar-featured {
        grid-template-columns: 1fr;
        height: auto;
      }
    }

    @media (max-width: 600px) {
      .article-card,
      .video-card {
        width: 100%;
      }
    }

    /* 드롭다운 메뉴 박스 */
    .dropdown-menu-box {
      position: absolute;
      top: calc(100% + 1px);
      left: 0;
      width: 400px;
      max-width: 90vw;
      background: #2a2a2a;
      z-index: 1000;
      display: none;
      flex-direction: column;
      gap: 0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      margin-top: 0;
      max-height: 80vh;
      overflow-y: auto;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .dropdown-menu-box.active {
      display: flex;
      opacity: 0.9;
      transform: translateY(0);
    }

    .dropdown-menu-header {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropdown-close-btn {
      color: var(--light-active);
      font-size: 32px;
      font-weight: 300;
      cursor: pointer;
      line-height: 1;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s;
    }

    .dropdown-close-btn:hover {
      opacity: 0.7;
    }

    .dropdown-menu-content {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .dropdown-nav-section {
      margin-bottom: 30px;
    }

    .dropdown-nav-section-title {
      color: var(--light-active);
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .dropdown-nav-section-item {
      padding: 10px 0;
      color: var(--light-active);
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    .dropdown-nav-section-item:hover {
      opacity: 0.7;
    }

    .dropdown-nav-section-item a {
      color: var(--light-active);
      display: block;
      width: 100%;
      text-decoration: none;
    }

    .dropdown-nav-item {
      padding: 15px 0;
      color: var(--light-active);
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.3s;
    }

    .dropdown-nav-item:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .dropdown-nav-item a {
      color: var(--light-active);
    }

    .dropdown-nav-item-highlight {
      background: rgba(255, 255, 255, 0.15);
    }

    @media (max-width: 768px) {
      /* Header Top - 모바일 스타일 재정의 */
      .header-top {
        margin-top: 0 !important;
        min-height: 60px;
        padding: 0 20px;
        align-items: center;
      }

      /* Nav Left - 모바일 스타일 */
      .nav-left {
        gap: 15px;
      }

      /* 데스크톱 네비게이션 메뉴 - 모바일에서 완전히 숨김 */
      .desktop-nav-menu,
      .nav-left .desktop-nav-menu,
      header .desktop-nav-menu,
      .header-top .desktop-nav-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        pointer-events: none !important;
        z-index: -9999 !important;
      }

      /* 데스크톱 네비게이션 메뉴의 모든 하위 요소들도 완전히 숨김 */
      .desktop-nav-menu *,
      .nav-left .desktop-nav-menu *,
      header .desktop-nav-menu *,
      .header-top .desktop-nav-menu * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        pointer-events: none !important;
        z-index: -9999 !important;
      }

      /* nav-item과 nav-divider도 별도로 숨김 */
      .desktop-nav-menu .nav-item,
      .desktop-nav-menu .nav-divider,
      .nav-left .desktop-nav-menu .nav-item,
      .nav-left .desktop-nav-menu .nav-divider {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        pointer-events: none !important;
        z-index: -9999 !important;
      }

      /* Menu Icon 표시 */
      .menu-icon {
        display: block;
      }

      /* Nav Right - 모바일 스타일 */
      .nav-right {
        gap: 15px;
      }

      /* Logo Section - 모바일에서 로고 크기 축소 */
      .logo-center img {
        height: 50px;
        width: auto;
      }
      
      .hero-image {
      	margin: 0;
      }

      /* Hero Image - 모바일에서 slide 1.5배 확대 */
      .hero-image .slide {
        min-height: 200px;
      }

      .hero-image .slide img {
        height: 100%;
        object-fit: cover;
      }

      .articles-grid,
      .video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .section-title {
        font-size: 24px;
      }

      .blue-banner {
        padding: 20px 10px;
        margin: 20px auto;
      }

      .blue-banner-content {
        text-align: center;
      }

      .banner-text {
        font-size: 12px;
      }

      .featured-card-title {
        font-size: 24px;
      }

      .article-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .category-row {
        justify-content: center;
      }

      .cta-section {
        padding: 0 20px;
      }

      .footer-nav-content {
        gap: 10px;
      }

      .footer-nav-bar a {
        font-size: 14px;
      }

      /* .footer-b2b-section {
        flex-direction: column;
      } */

      .footer-b2b-logo {
        position: static;
        padding: 10px 20px;
        background: var(--bsk-blue);
        justify-content: center;
      }

      .footer-b2b-btn {
        width: 100%;
      }

      .footer-content {
        padding: 20px 0;
      }

      .footer-company-info {
        padding-left: 20px;
        padding-right: 20px;
      }

      .footer-copyright-notice {
        padding-left: 20px;
        padding-right: 20px;
      }
    }

    @media (max-width: 480px) {
      .section-title {
        font-size: 20px;
      }

      .logo-left,
      .logo-right {
        font-size: 15px;
      }

      .banner-text {
        font-size: 12px;
      }

      .article-title-text {
        font-size: 18px;
      }

      .category-tag {
        padding: 6px 20px;
        font-size: 16px;
      }
    }

    /* About Page Styles - Full Image */
    .about-page-image {
      width: 100%;
      overflow-x: hidden;
      background: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 0;
      margin: 0;
    }

    .about-full-image {
      width: 100%;
      max-width: 1540px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    /* Legacy styles - can be removed if not needed */
    .about-page {
      width: 100%;
      overflow-x: hidden;
    }

    .about-section {
      width: 100%;
      padding: 80px 20px;
      box-sizing: border-box;
    }

    /* Section 1: Hero Section */
    .about-hero {
      background: var(--light-active, #f4f4f4);
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 120px 20px 80px;
    }

    .about-hero-content {
      max-width: 1540px;
      margin: 0 auto;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 60px;
      align-items: start;
    }

    .about-hero-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .about-hero-title {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .about-hero-why {
      display: flex;
      align-items: center;
      gap: 0;
    }

    .why-badge {
      background: var(--bsk-pink, #ff518e);
      color: #dddddd;
      padding: 18px 38px;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 50px;
      line-height: 90%;
      font-weight: 600;
      display: inline-block;
    }

    .about-hero-main-title {
      color: var(--bsk-black, #292923);
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 80px;
      line-height: 90%;
      font-weight: 600;
      margin: 0;
      padding: 0;
    }

    .about-hero-bsk-btn {
      display: flex;
      align-items: center;
      gap: 0;
      margin-top: 8px;
    }

    .bsk-btn-badge {
      background: var(--bsk-blue, #0084ff);
      color: #dddddd;
      padding: 18px 38px;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 50px;
      line-height: 90%;
      font-weight: 600;
      display: inline-block;
    }

    .about-hero-right {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .about-hero-text-blocks {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
    }

    .about-text-block {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .text-block-highlight {
      padding: 18px 38px;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 50px;
      line-height: 90%;
      font-weight: 600;
      color: #dddddd;
      display: inline-block;
      width: fit-content;
    }

    .text-block-highlight.green {
      background: var(--bsk-green, #00d777);
    }

    .text-block-highlight.blue {
      background: var(--bsk-blue, #0084ff);
    }

    .about-text-block p {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 20px;
      line-height: 130%;
      font-weight: 500;
      margin: 0;
    }

    .about-hero-images {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      margin-top: 20px;
    }

    .about-hero-img-1,
    .about-hero-img-2 {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    /* Section 2: CTA Section */
    .about-cta {
      background: var(--bsk-blue, #0084ff);
      padding: 150px 20px;
    }

    .about-cta-content {
      max-width: 1156px;
      margin: 0 auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 150px;
      align-items: center;
    }

    .about-cta-question {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h1-font-size, 46px);
      line-height: var(--h1-line-height, 130%);
      font-weight: var(--h1-font-weight, 600);
      margin: 0;
    }

    .about-cta-points {
      display: flex;
      flex-direction: column;
      gap: 100px;
      width: 100%;
      max-width: 1081px;
    }

    .about-cta-point {
      display: flex;
      flex-direction: row;
      gap: 20px;
      align-items: flex-start;
    }

    .cta-point-number {
      font-family: var(--d2-font-family, "ProximaNova-Bold", sans-serif);
      font-size: var(--d2-font-size, 94px);
      line-height: var(--d2-line-height, 130%);
      font-weight: var(--d2-font-weight, 700);
      flex-shrink: 0;
      min-width: 120px;
      text-align: center;
    }

    .cta-point-number.pink {
      color: var(--bsk-pink, #ff518e);
    }

    .cta-point-number.yellow {
      color: var(--bsk-yellow, #ffb300);
    }

    .cta-point-number.green {
      color: var(--bsk-green, #00d777);
    }

    .cta-point-content {
      display: flex;
      flex-direction: column;
      gap: 30px;
      flex: 1;
    }

    .cta-point-title {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h2-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h2-font-size, 32px);
      line-height: var(--h2-line-height, 130%);
      font-weight: var(--h2-font-weight, 600);
      margin: 0;
    }

    .cta-point-description {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      margin: 0;
    }

    /* Section 3: Testimonials */
    .about-testimonials {
      background: var(--bsk-black, #292923);
      padding: 150px 20px;
    }

    .about-testimonials-content {
      max-width: 1540px;
      margin: 0 auto;
      width: 100%;
      position: relative;
    }

    .about-testimonials-title {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h1-font-size, 46px);
      line-height: var(--h1-line-height, 130%);
      font-weight: var(--h1-font-weight, 600);
      margin: 0 0 80px 0;
    }

    .about-testimonials-wrapper {
      display: flex;
      flex-direction: row;
      gap: 60px;
      align-items: flex-start;
      position: relative;
    }

    .about-testimonials-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px 60px;
      flex: 1;
      max-width: calc(100% - 280px);
      align-items: start;
    }

    .testimonial-card {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
    }

    /* Staggered layout for cards */
    .testimonial-card.card-1 {
      grid-column: 1;
      grid-row: 1;
    }

    .testimonial-card.card-2 {
      grid-column: 2;
      grid-row: 1;
      margin-top: 100px;
    }

    .testimonial-card.card-3 {
      grid-column: 1;
      grid-row: 2;
    }

    .testimonial-card.card-4 {
      grid-column: 2;
      grid-row: 2;
      margin-top: 100px;
    }

    .testimonial-card.card-5 {
      grid-column: 1;
      grid-row: 3;
    }

    .testimonial-member {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .testimonial-member img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
    }

    .testimonial-name {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
    }

    .testimonial-text-wrapper {
      display: flex;
      flex-direction: row;
      gap: 0;
      align-items: stretch;
    }

    .testimonial-color-bar {
      width: 24px;
      flex-shrink: 0;
      background: var(--bsk-green, #00d777);
    }

    .testimonial-color-bar.green {
      background: var(--bsk-green, #00d777);
    }

    .testimonial-color-bar.yellow {
      background: var(--bsk-yellow, #ffb300);
    }

    .testimonial-color-bar.pink {
      background: var(--bsk-pink, #ff518e);
    }

    .testimonial-text {
      background: var(--bsk-gray, #dddddd);
      padding: 20px 30px;
      color: var(--bsk-black, #292923);
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      min-height: 180px;
      display: flex;
      align-items: center;
      flex: 1;
    }

    .about-testimonials-logo {
      position: sticky;
      top: 50%;
      transform: translateY(-50%);
      width: 120px;
      height: 800px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 20px;
    }

    .testimonials-logo-text {
      color: #dddddd;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 72px;
      line-height: 1.1;
      font-weight: 600;
      text-transform: uppercase;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      white-space: nowrap;
      letter-spacing: 12px;
    }

    /* Responsive Styles */
    @media (max-width: 1400px) {
      .about-hero-content {
        grid-template-columns: 1fr 1.2fr;
        gap: 40px;
      }

      .about-hero-main-title {
        font-size: 60px;
      }

      .why-badge,
      .bsk-btn-badge,
      .text-block-highlight {
        font-size: 40px;
        padding: 14px 30px;
      }

      .about-testimonials-logo {
        width: 180px;
        height: 500px;
      }

      .testimonials-logo-text {
        font-size: 50px;
      }
    }

    @media (max-width: 1200px) {
      .about-hero-content {
        grid-template-columns: 1fr;
        gap: 60px;
      }

      .about-hero-text-blocks {
        grid-template-columns: 1fr;
      }

      .about-hero-images {
        grid-template-columns: 1fr;
      }

      .about-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .about-testimonials-logo {
        position: static;
        transform: none;
        margin: 60px auto 0;
        width: 100%;
        max-width: 416px;
      }

      .testimonials-logo-text {
        position: relative;
        height: auto;
        padding: 40px 0;
      }

      .logo-broken,
      .logo-seoul,
      .logo-korea {
        position: static;
        text-align: center;
        margin: 10px 0;
      }
    }

    @media (max-width: 768px) {
      .about-section {
        padding: 60px 20px;
      }

      .about-hero {
        padding: 100px 20px 60px;
      }

      .about-hero-main-title {
        font-size: 48px;
      }

      .why-badge,
      .bsk-btn-badge,
      .text-block-highlight {
        font-size: 32px;
        padding: 12px 24px;
      }

      .about-text-block p {
        font-size: 18px;
      }

      .about-cta {
        padding: 100px 20px;
      }

      .about-cta-content {
        gap: 80px;
      }

      .about-cta-question {
        font-size: 32px;
      }

      .about-cta-points {
        gap: 60px;
      }

      .about-cta-point {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .cta-point-number {
        font-size: 72px;
        min-width: auto;
      }

      .cta-point-title {
        font-size: 24px;
      }

      .cta-point-description {
        font-size: 18px;
      }

      .about-testimonials-title {
        font-size: 32px;
      }

      .about-testimonials-wrapper {
        flex-direction: column;
        gap: 40px;
      }

      .about-testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 30px;
      }

      .testimonial-card.card-2,
      .testimonial-card.card-4 {
        margin-top: 0;
      }

      .about-testimonials-logo {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        margin: 40px auto 0;
        max-width: 300px;
      }

      .testimonials-logo-text {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 48px;
        letter-spacing: 4px;
      }

      .testimonial-text-wrapper {
        flex-direction: row;
      }

      .testimonial-color-bar {
        width: 20px;
      }

      .testimonial-text {
        min-height: auto;
        padding: 20px;
        font-size: 18px;
      }
    }

    @media (max-width: 480px) {
      .about-hero-main-title {
        font-size: 36px;
      }

      .why-badge,
      .bsk-btn-badge,
      .text-block-highlight {
        font-size: 24px;
        padding: 10px 20px;
      }

      .about-text-block p {
        font-size: 16px;
      }

      .about-cta-question {
        font-size: 24px;
      }

      .cta-point-number {
        font-size: 60px;
      }

      .cta-point-title {
        font-size: 20px;
      }

      .cta-point-description {
        font-size: 16px;
      }

      .about-testimonials-title {
        font-size: 24px;
      }

      .testimonial-text {
        font-size: 16px;
      }
    }

    /* Legacy styles for backward compatibility - can be removed later */
    .pc-ver-bsk-about,
    .pc-ver-bsk-about * {
      box-sizing: border-box;
    }
    .pc-ver-bsk-about {
      background: var(--light-active, #f4f4f4);
      min-height: 6049px;
      position: relative;
      overflow: hidden;
      padding-top: 230px;
    }
    .pc-ver-bsk-about .layer-1 {
      opacity: 0.3;
      width: 1542px;
      height: 1469px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 230px;
      overflow: visible;
    }
    .pc-ver-bsk-about .frame-361 {
      background: var(--bsk-black, #292923);
      padding: 80px 50px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 470px;
      height: 300px;
      position: absolute;
      left: 1260px;
      top: 225px;
    }
    .pc-ver-bsk-about .broken-seoul-korea {
      color: #dddddd;
      text-align: left;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 90px;
      line-height: 90%;
      font-weight: 600;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .pc-ver-bsk-about .frame-557 {
      display: flex;
      flex-direction: row;
      gap: 0px;
      align-items: center;
      justify-content: flex-start;
      width: 629px;
      height: 70px;
      position: absolute;
      left: 789px;
      top: 525px;
    }
    .pc-ver-bsk-about .frame-363 {
      background: var(--bsk-green, #00d777);
      padding: 18px 38px;
      flex-shrink: 0;
      width: 24px;
      height: 70px;
      position: relative;
    }
    .pc-ver-bsk-about .frame-362 {
      background: var(--bsk-black, #292923);
      padding: 18px 38px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 605px;
      height: 70px;
      position: relative;
    }
    .pc-ver-bsk-about .broken-seoul-korea2 {
      color: #dddddd;
      text-align: left;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 50px;
      line-height: 90%;
      font-weight: 600;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .pc-ver-bsk-about .frame-563 {
      display: flex;
      flex-direction: row;
      gap: 0px;
      align-items: center;
      justify-content: flex-start;
      width: 629px;
      height: 70px;
      position: absolute;
      left: 789px;
      top: 1381px;
    }
    .pc-ver-bsk-about .frame-3622 {
      background: var(--bsk-blue, #0084ff);
      padding: 18px 38px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 605px;
      height: 70px;
      position: relative;
    }
    .pc-ver-bsk-about .div,
    .pc-ver-bsk-about .div2,
    .pc-ver-bsk-about .div3,
    .pc-ver-bsk-about .div4 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 20px;
      line-height: 130%;
      font-weight: 500;
      position: absolute;
      width: 290px;
      height: 183px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .pc-ver-bsk-about .div {
      left: 815px;
      top: 625px;
    }
    .pc-ver-bsk-about .div2 {
      left: 815px;
      top: 1168px;
    }
    .pc-ver-bsk-about .div3 {
      left: 1129px;
      top: 625px;
    }
    .pc-ver-bsk-about .div4 {
      left: 1129px;
      top: 1168px;
    }
    .pc-ver-bsk-about .rectangle-139 {
      background: var(--bsk-black, #292923);
      width: 1540px;
      height: 1848px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 3491px;
    }
    .pc-ver-bsk-about .div5 {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h1-font-size, 46px);
      line-height: var(--h1-line-height, 130%);
      font-weight: var(--h1-font-weight, 600);
      position: absolute;
      left: 598.67px;
      top: 3657px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-ver-bsk-about .frame-376,
    .pc-ver-bsk-about .frame-374,
    .pc-ver-bsk-about .frame-375,
    .pc-ver-bsk-about .frame-3742,
    .pc-ver-bsk-about .frame-3752,
    .pc-ver-bsk-about .frame-3762 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 99.87px;
      position: absolute;
    }
    .pc-ver-bsk-about .frame-376 {
      left: calc(50% - 284px);
      top: calc(50% - -1312.5px);
    }
    .pc-ver-bsk-about .frame-374 {
      left: calc(50% - 128px);
      top: calc(50% - -952.5px);
    }
    .pc-ver-bsk-about .frame-375 {
      left: calc(50% - -185px);
      top: calc(50% - -1132.5px);
    }
    .pc-ver-bsk-about .frame-3742 {
      right: 51.47%;
      left: 43.33%;
      bottom: 15.41%;
      top: 82.28%;
    }
    .pc-ver-bsk-about .frame-3752 {
      right: 35.16%;
      left: 59.64%;
      bottom: 18.38%;
      top: 79.3%;
    }
    .pc-ver-bsk-about .frame-3762 {
      right: 59.59%;
      left: 35.21%;
      bottom: 21.36%;
      top: 76.33%;
    }
    .pc-ver-bsk-about .vector,
    .pc-ver-bsk-about .vector2,
    .pc-ver-bsk-about .vector3,
    .pc-ver-bsk-about .vector4,
    .pc-ver-bsk-about .vector5,
    .pc-ver-bsk-about .vector6 {
      flex-shrink: 0;
      width: 100px;
      height: 100px;
      position: relative;
      overflow: visible;
    }
    .pc-ver-bsk-about .k,
    .pc-ver-bsk-about .b,
    .pc-ver-bsk-about .s {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-ver-bsk-about .frame-570,
    .pc-ver-bsk-about .frame-565 {
      background: var(--bsk-gray, #dddddd);
      padding: 20px 50px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 603px;
      height: 180px;
      position: absolute;
    }
    .pc-ver-bsk-about .frame-570 {
      left: 502px;
      top: 4777px;
    }
    .pc-ver-bsk-about .frame-565 {
      left: 501px;
      top: 4137px;
    }
    .pc-ver-bsk-about .div6,
    .pc-ver-bsk-about .div7 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .pc-ver-bsk-about .frame-571,
    .pc-ver-bsk-about .frame-5692,
    .pc-ver-bsk-about .frame-568 {
      display: flex;
      flex-direction: row;
      gap: 0px;
      align-items: flex-start;
      justify-content: flex-start;
      position: absolute;
    }
    .pc-ver-bsk-about .frame-571 {
      left: 948px;
      top: 4957px;
    }
    .pc-ver-bsk-about .frame-5692 {
      left: 947px;
      top: 3957px;
    }
    .pc-ver-bsk-about .frame-568 {
      left: 321px;
      top: 4317px;
    }
    .pc-ver-bsk-about .frame-566 {
      background: var(--bsk-gray, #dddddd);
      padding: 20px 50px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 625px;
      height: 180px;
      position: relative;
    }
    .pc-ver-bsk-about .frame-567 {
      background: var(--bsk-gray, #dddddd);
      padding: 20px 30px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 313px;
      height: 180px;
      position: relative;
    }
    .pc-ver-bsk-about .group-145 {
      width: 416px;
      height: 256px;
      position: static;
    }
    .pc-ver-bsk-about .seoul,
    .pc-ver-bsk-about .korea,
    .pc-ver-bsk-about .broken {
      color: #dddddd;
      text-align: left;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 80px;
      line-height: 90%;
      font-weight: 600;
      text-transform: uppercase;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .pc-ver-bsk-about .seoul {
      right: 25.26%;
      left: 61.51%;
      width: 13.23%;
      bottom: 24.24%;
      top: 74.57%;
      height: 1.19%;
    }
    .pc-ver-bsk-about .korea {
      right: 19.9%;
      left: 66.67%;
      width: 13.44%;
      bottom: 22.71%;
      top: 76.1%;
      height: 1.19%;
    }
    .pc-ver-bsk-about .broken {
      left: 1280px;
      top: 4419px;
    }
    .pc-ver-bsk-about .frame-3632,
    .pc-ver-bsk-about .frame-3633 {
      background: var(--bsk-green, #00d777);
      padding: 18px 38px;
      width: 25px;
      height: 180px;
      position: absolute;
    }
    .pc-ver-bsk-about .frame-3632 {
      left: 1105px;
      top: 4777px;
    }
    .pc-ver-bsk-about .frame-3633 {
      left: 947px;
      top: 3957px;
      flex-shrink: 0;
    }
    .pc-ver-bsk-about .frame-569 {
      display: flex;
      flex-direction: row;
      gap: 0px;
      align-items: center;
      justify-content: flex-start;
      position: absolute;
      left: 322px;
      top: 4597px;
    }
    .pc-ver-bsk-about .frame-373,
    .pc-ver-bsk-about .frame-3732 {
      background: var(--bsk-yellow, #ffb300);
      padding: 18px 38px;
      flex-shrink: 0;
      width: 24px;
      height: 180px;
      position: relative;
    }
    .pc-ver-bsk-about .frame-3732 {
      background: var(--bsk-pink, #ff518e);
    }
    .pc-ver-bsk-about .rectangle-149 {
      background: var(--bsk-blue, #0084ff);
      width: 1540px;
      height: 1740px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 1751px;
    }
    .pc-ver-bsk-about .frame-410 {
      display: flex;
      flex-direction: column;
      gap: 150px;
      align-items: center;
      justify-content: flex-start;
      width: 1156px;
      position: absolute;
      left: 382px;
      top: 1960px;
    }
    .pc-ver-bsk-about .div8 {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h1-font-size, 46px);
      line-height: var(--h1-line-height, 130%);
      font-weight: var(--h1-font-weight, 600);
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-ver-bsk-about .frame-372 {
      display: flex;
      flex-direction: column;
      gap: 100px;
      align-items: flex-start;
      justify-content: flex-start;
      flex-shrink: 0;
      width: 1081px;
      position: relative;
    }
    .pc-ver-bsk-about .frame-359,
    .pc-ver-bsk-about .frame-358,
    .pc-ver-bsk-about .frame-360 {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .pc-ver-bsk-about ._1,
    .pc-ver-bsk-about ._2,
    .pc-ver-bsk-about ._3 {
      text-align: center;
      font-family: var(--d2-font-family, "ProximaNova-Bold", sans-serif);
      font-size: var(--d2-font-size, 94px);
      line-height: var(--d2-line-height, 130%);
      font-weight: var(--d2-font-weight, 700);
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-ver-bsk-about ._1 {
      color: var(--bsk-pink, #ff518e);
    }
    .pc-ver-bsk-about ._2 {
      color: var(--bsk-yellow, #ffb300);
    }
    .pc-ver-bsk-about ._3 {
      color: var(--bsk-green, #00d777);
    }
    .pc-ver-bsk-about .frame-356,
    .pc-ver-bsk-about .frame-357 {
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .pc-ver-bsk-about .div9 {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h2-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h2-font-size, 32px);
      line-height: var(--h2-line-height, 130%);
      font-weight: var(--h2-font-weight, 600);
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-ver-bsk-about .div10 {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-ver-bsk-about ._2000 {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h2-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h2-font-size, 32px);
      line-height: var(--h2-line-height, 130%);
      font-weight: var(--h2-font-weight, 600);
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-ver-bsk-about .frame-564 {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
      justify-content: flex-start;
      width: 320px;
      position: absolute;
      left: 478px;
      top: 838px;
    }
    .pc-ver-bsk-about .frame-556,
    .pc-ver-bsk-about .frame-561 {
      display: flex;
      flex-direction: row;
      gap: 0px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      height: 70px;
      position: relative;
    }
    .pc-ver-bsk-about .frame-476,
    .pc-ver-bsk-about .frame-4762 {
      background: var(--bsk-black, #292923);
      padding: 18px 38px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 289px;
      height: 70px;
      position: relative;
    }
    .pc-ver-bsk-about .frame-4762 {
      background: var(--bsk-blue, #0084ff);
    }
    .pc-ver-bsk-about .why,
    .pc-ver-bsk-about .bsk {
      color: #dddddd;
      text-align: left;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 50px;
      line-height: 90%;
      font-weight: 600;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .pc-ver-bsk-about .frame-475,
    .pc-ver-bsk-about .frame-4752 {
      background: var(--bsk-pink, #ff518e);
      padding: 18px 38px;
      flex-shrink: 0;
      width: 24px;
      height: 70px;
      position: relative;
    }
    .pc-ver-bsk-about .frame-4752 {
      background: var(--bsk-black, #292923);
    }
    .pc-ver-bsk-about .business-media {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 80px;
      line-height: 90%;
      font-weight: 600;
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .pc-ver-bsk-about .broken-seoul-korea3 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: "ProximaNova-Semibold", sans-serif;
      font-size: 80px;
      line-height: 90%;
      font-weight: 600;
      position: absolute;
      left: 1125px;
      top: 880px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .pc-ver-bsk-about .rectangle-148,
    .pc-ver-bsk-about .rectangle-150 {
      position: absolute;
      object-fit: cover;
    }
    .pc-ver-bsk-about .rectangle-148 {
      width: 290px;
      height: 300px;
      left: 815px;
      top: 838px;
    }
    .pc-ver-bsk-about .rectangle-150 {
      width: 470px;
      height: 300px;
      left: 1260px;
      top: 1451px;
    }

    /* Search Overlay */
    .search-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(192px + 462px); /* header height (55px + 122px + 5px + margin) + hero-image height */
      max-height: calc(192px + 462px);
      background: rgba(42, 42, 42, 0.95);
      backdrop-filter: blur(10px);
      z-index: 10000;
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease;
      border: 20px solid var(--light-active);
      box-sizing: border-box;
    }

    .search-overlay.active {
      display: block;
      opacity: 1;
    }

    .search-overlay-content {
      width: 100%;
      height: 100%;
      max-width: 1540px;
      margin: 0 auto;
      padding: 40px 50px;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .search-overlay-header {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      margin-bottom: 40px;
    }

    .search-close-btn {
      color: var(--light-active);
      font-size: 32px;
      font-weight: 300;
      cursor: pointer;
      line-height: 1;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s;
    }

    .search-close-btn:hover {
      opacity: 0.7;
    }

    .search-main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 40px;
    }

    .search-title {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 20px;
    }

    .search-title-bsk {
      color: var(--light-active);
      font-size: 46px;
      font-weight: 600;
      font-family: "ProximaNova-Semibold", sans-serif;
    }

    .search-title-text {
      color: var(--light-active);
      font-size: 46px;
      font-weight: 600;
      font-family: "PretendardVariable-SemiBold", sans-serif;
    }

    .search-input-wrapper {
      width: 100%;
      max-width: 1200px;
      position: relative;
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      padding: 15px 20px;
      gap: 15px;
    }

    .search-icon {
      width: 25px;
      height: 25px;
      flex-shrink: 0;
      filter: brightness(0) invert(1);
    }

    .search-input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--light-active);
      font-size: 18px;
      font-weight: 500;
      outline: none;
      font-family: "PretendardVariable-Medium", sans-serif;
    }

    .search-input::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }

    .recent-searches {
      width: 100%;
      max-width: 1200px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }

    .recent-searches-title {
      color: var(--light-active);
      font-size: 18px;
      font-weight: 500;
      font-family: "PretendardVariable-Medium", sans-serif;
      text-align: center;
    }

    .recent-searches-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      align-items: center;
    }

    .search-tag {
      background: rgba(255, 255, 255, 0.15);
      color: var(--light-active);
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      font-family: "PretendardVariable-Medium", sans-serif;
      cursor: pointer;
      transition: background 0.3s;
      white-space: nowrap;
    }

    .search-tag:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    .search-pagination {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }

    .pagination-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transition: all 0.3s;
    }

    .pagination-dot.active {
      width: 10px;
      height: 10px;
      background: rgba(255, 255, 255, 0.6);
    }

    @media (max-width: 768px) {
      .search-overlay {
        height: calc(192px + 462px);
        border: 10px solid var(--light-active);
      }

      .search-overlay-content {
        padding: 30px 20px;
      }

      .search-title-bsk,
      .search-title-text {
        font-size: 32px;
      }

      .search-input-wrapper {
        padding: 12px 15px;
      }

      .search-input {
        font-size: 16px;
      }

      .recent-searches-tags {
        flex-direction: column;
        align-items: stretch;
      }

      .search-tag {
        width: 100%;
        text-align: center;
        padding: 12px 20px;
      }
    }

    /* Login Page Styles */
    .login-container {
      min-height: calc(100vh - 500px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 100px 20px;
      background: var(--light-active);
    }

    .error-message {
      color: #ff518e;
      margin-bottom: 20px;
      padding: 12px 20px;
      background-color: rgba(255, 81, 142, 0.1);
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      font-family: "PretendardVariable-Medium", sans-serif;
    }

    .frame-232 {
      display: flex;
      flex-direction: column;
      gap: 60px;
      align-items: flex-start;
      justify-content: flex-start;
      width: 592px;
      max-width: 100%;
      position: relative;
    }

    .frame-1035 {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .frame-230 {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .login-form {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      width: 100%;
      flex-shrink: 0;
    }

    .frame-229 {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .frame-228 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .frame-220 {
      background: var(--normal, #dddddd);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    
    .frame-221 {
      background: var(--normal, #dddddd);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      align-self: stretch;
      flex-shrink: 0;
      height: 50px;
      position: relative;
    }

    .login-input {
      background: transparent;
      border: none;
      color: var(--bsk-black, #292923);
      font-family: var(--l1-font-family, "PretendardVariable-Medium", sans-serif);
      font-size: var(--l1-font-size, 18px);
      line-height: 1.3;
      font-weight: var(--l1-font-weight, 500);
      flex: 1;
      outline: none;
      min-width: 0;
    }

    .login-input::placeholder {
      color: var(--dark, #a6a6a6);
      font-family: var(--l1-font-family, "PretendardVariable-Medium", sans-serif);
      font-size: var(--l1-font-size, 18px);
      line-height: var(--l1-line-height, 130%);
      font-weight: var(--l1-font-weight, 500);
    }

    .visibility {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      position: relative;
      overflow: visible;
      aspect-ratio: 1;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    .visibility:hover {
      opacity: 0.7;
    }

    .frame-222 {
      background: var(--bsk-black, #292923);
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      height: 50px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s;
    }

    .frame-222:hover {
      background: var(--darker, #4d4d4d);
    }

    .login-btn-submit {
      background: transparent;
      border: none;
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--l1-font-family, "PretendardVariable-Medium", sans-serif);
      font-size: var(--l1-font-size, 18px);
      line-height: var(--l1-line-height, 130%);
      font-weight: var(--l1-font-weight, 500);
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .frame-225 {
      display: flex;
      flex-direction: row;
      gap: 0;
      align-items: center;
      justify-content: space-between;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .frame-224 {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      position: relative;
    }

    .check-input {
      width: 24px;
      height: 24px;
      min-width: 24px;
      min-height: 24px;
      cursor: pointer;
      accent-color: var(--bsk-black, #292923);
    }

    .div3 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 18px;
      line-height: 100%;
      font-weight: 400;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      cursor: pointer;
    }

    .div4 {
      color: var(--dark-hover, #858585);
      text-align: right;
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 16px;
      line-height: 100%;
      font-weight: 400;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
    }

    .find-link {
      color: var(--dark-hover, #858585);
      text-decoration: none;
      transition: color 0.3s;
    }

    .find-link:hover {
      color: var(--bsk-black, #292923);
    }

    .frame-231 {
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .line-2 {
      margin-top: -1px;
      border-style: solid;
      border-color: var(--bsk-white, #fcfcf5);
      border-width: 1px 0 0 0;
      align-self: stretch;
      flex-shrink: 0;
      height: 0px;
      position: relative;
    }

    .frame-227 {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 188px;
      position: relative;
    }

    .div5 {
      color: var(--dark-hover, #858585);
      text-align: center;
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 16px;
      line-height: 100%;
      font-weight: 400;
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .frame-226 {
      /* display: flex; */
      flex-direction: row;
      gap: 34px;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      position: relative;
    }

    .check4 {
      padding: 7px;
      flex-direction: row;
    }

    .group {
      height: auto;
      overflow: visible;
      width:183px;
    }

    @media (max-width: 768px) {
      .login-container {
        padding: 50px 20px;
      }

      .frame-232 {
        width: 100%;
        gap: 40px;
      }

      .frame-225 {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
      }

      .frame-226 {
        gap: 20px;
      }
    }

    /* Submit Page Styles */
    .submit-container {
      min-height: calc(100vh - 500px);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px 20px 100px;
      background: var(--light-active);
    }

    .submit-container .div5 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: var(--h2-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h2-font-size, 32px);
      line-height: var(--h2-line-height, 130%);
      font-weight: var(--h2-font-weight, 600);
      margin-bottom: 40px;
    }

    .submit-form {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 661px;
    }

    .frame-606 {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      max-width: 661px;
      position: relative;
    }

    .frame-605 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .frame-598,
    .frame-599,
    .frame-600,
    .frame-601,
    .frame-604 {
      background: var(--light-hover, #fafafa);
      padding: 20px 29px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .frame-598,
    .frame-599 {
      min-height: 164px;
    }

    .frame-600 {
      min-height: 173px;
    }

    .frame-601 {
      min-height: 564px;
    }

    .frame-604 {
      min-height: 155px;
    }

    .frame-313,
    .frame-314 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .submit-container .div6 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: var(--t3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t3-font-size, 14px);
      line-height: var(--t3-line-height, 130%);
      font-weight: var(--t3-font-weight, 600);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .submit-container .frame-220 {
      background: var(--light-active, #f4f4f4);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      width: 100%;
      position: relative;
    }

    .submit-container .div7 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 14px;
      line-height: 160%;
      font-weight: 400;
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .frame-270,
    .frame-2702 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .frame-270 {
      gap: 18px;
    }

    .frame-269 {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .frame-264,
    .frame-2642,
    .frame-265,
    .frame-268,
    .frame-2703 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .submit-container .div8 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: var(--t3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t3-font-size, 14px);
      line-height: var(--t3-line-height, 130%);
      font-weight: var(--t3-font-weight, 600);
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .frame-263,
    .frame-2632,
    .frame-2633 {
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .frame-263,
    .frame-2632 {
      height: 45px;
      width: 100%;
    }

    .frame-2633 {
      height: 200px;
    }

    .frame-2202 {
      background: var(--light-active, #f4f4f4);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 45px;
      position: relative;
    }

    .submit-input,
    .submit-select,
    .submit-textarea {
      background: transparent;
      border: none;
      color: var(--bsk-black, #292923);
      font-family: var(--l3-font-family, "PretendardVariable-Medium", sans-serif);
      font-size: var(--l3-font-size, 14px);
      line-height: var(--l3-line-height, 160%);
      font-weight: var(--l3-font-weight, 500);
      flex: 1;
      outline: none;
      width: 100%;
    }

    .submit-input::placeholder,
    .submit-textarea::placeholder {
      color: var(--dark, #a6a6a6);
    }

    .submit-textarea {
      resize: none;
      height: 100%;
      min-height: 170px;
      font-family: "PretendardVariable-Regular", sans-serif;
    }

    .submit-select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: none;
      color: var(--dark, #a6a6a6);
      cursor: pointer;
      width: 100%;
      padding: 0;
    }

    .submit-select:focus {
      color: var(--bsk-black, #292923);
    }

    .submit-select option {
      color: var(--bsk-black, #292923);
    }

    .submit-select option:disabled {
      color: var(--dark, #a6a6a6);
    }

    .frame-267 {
      display: flex;
      flex-direction: row;
      gap: 17px;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      width: 100%;
      position: relative;
    }

    .frame-2203 {
      background: var(--light-active, #f4f4f4);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-width: 0;
      height: 30px;
      position: relative;
    }

    .submit-container .frame-221 {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 45px;
      height: 30px;
      position: relative;
      overflow: visible;
      pointer-events: none;
    }

    .frame-221 img {
      /* width: 100%; */
      height: 100%;
      object-fit: contain;
    }

    .frame-2692 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .frame-2204 {
      background: var(--bsk-gray, #dddddd);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      width: 100%;
      height: 30px;
      position: relative;
    }

    .frame-2205 {
      background: var(--bsk-gray, #dddddd);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      height: 200px;
      position: relative;
    }

    .frame-271 {
      flex-shrink: 0;
      width: 100%;
      height: 15px;
      position: relative;
      overflow: visible;
      margin: 10px 0;
    }

    .frame-272 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .frame-2206 {
      background: var(--light-active, #f4f4f4);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      flex: 1;
      min-width: 0;
      height: 30px;
      position: relative;
      width: 100%;
    }

    .submit-container .div10 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 14px;
      line-height: 100%;
      font-weight: 500;
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .submit-file-input {
      display: none;
    }

    .frame-2212 {
      border-style: solid;
      border-color: var(--bsk-gray, #dddddd);
      border-width: 1px;
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 30px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s;
    }

    .frame-2212:hover {
      background: var(--normal-hover, #c7c7c7);
    }

    .submit-container .div12 {
      color: var(--bsk-black, #292923);
      text-align: center;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 13px;
      line-height: 100%;
      font-weight: 500;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }

    .jpg-png-pdf-ppt-xls-20-mb {
      color: var(--dark-hover, #858585);
      text-align: left;
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 13px;
      line-height: 160%;
      font-weight: 400;
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 10px;
    }

    .frame-603 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      width: 100%;
      position: relative;
    }

    .frame-276,
    .frame-277 {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .frame-276 {
      align-items: flex-start;
    }

    .submit-container .div13 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: var(--t3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t3-font-size, 14px);
      line-height: var(--t3-line-height, 130%);
      font-weight: var(--t3-font-weight, 600);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .submit-container ._3 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: var(--text3-font-family, "PretendardVariable-Regular", sans-serif);
      font-size: var(--text3-font-size, 14px);
      line-height: var(--text3-line-height, 160%);
      font-weight: var(--text3-font-weight, 400);
      position: relative;
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }

    ._3-span {
      padding-left: 20px;
      margin: 0;
    }

    ._3-span li {
      margin-bottom: 5px;
    }

    .frame-284 {
      background: var(--bsk-black, #292923);
      padding: 12px 258px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      height: 50px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s;
      width: 100%;
    }

    .frame-284:hover {
      background: var(--darker, #4d4d4d);
    }

    .frame-284 button {
      background: transparent;
      border: none;
      cursor: pointer;
    }

    .submit-container .div14 {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    @media (max-width: 768px) {
      .submit-container {
        padding: 30px 20px 50px;
      }

      .frame-606 {
        max-width: 100%;
      }

      .frame-284 {
        padding: 12px 20px;
      }

      .frame-267 {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }

      .frame-2203 {
        width: 100%;
      }

      .frame-221 {
        width: 100%;
        height: auto;
      }
    }

    /* Confirm Modal Styles */
    .confirm-modal-overlay {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: rgba(0, 0, 0, 0.5) !important;
      z-index: 10000 !important;
      display: none !important;
      align-items: center !important;
      justify-content: center !important;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .confirm-modal-overlay.active {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    .confirm-modal-container {
      width: 433px;
      height: 514px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      transform: translate(0, 0);
    }

    .confirm-modal-content {
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: var(--light-active, #f4f4f4);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .frame-598-modal {
      background: var(--light-hover, #fafafa);
      padding: 20px 29px 10px 29px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-end;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .close-small {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      position: relative;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    .close-small:hover {
      opacity: 0.7;
    }

    .frame-347 {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 25px;
      height: 25px;
      position: relative;
      overflow: visible;
    }

    .confirm-modal-content .frame-313 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .frame-1067 {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      flex-shrink: 0;
      width: 100%;
      position: relative;
    }

    .frame-1068 {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      flex-shrink: 0;
      width: 100%;
      position: relative;
    }

    .frame-1066 {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      flex-shrink: 0;
      position: relative;
    }

    .confirm-modal-content .div2 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: var(--t3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t3-font-size, 14px);
      line-height: var(--t3-line-height, 130%);
      font-weight: var(--t3-font-weight, 600);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .confirm-modal-content .frame-220 {
      background: var(--light-active, #f4f4f4);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .confirm-modal-content .div3 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 12px;
      line-height: 160%;
      font-weight: 400;
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .frame-1064 {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .frame-1065 {
      display: flex;
      flex-direction: row;
      gap: 0;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;
      position: relative;
      width: 20px;
      height: 20px;
    }

    .confirm-check-input {
      position: absolute;
      opacity: 0;
      width: 20px;
      height: 20px;
      margin: 0;
      padding: 0;
      cursor: pointer;
      z-index: 1;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
    }

    .confirm-check-label {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      position: relative;
      cursor: pointer;
      z-index: 2;
      pointer-events: auto;
      border: 2px solid var(--bsk-gray, #dddddd);
      background-color: white;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    
    .confirm-check-label:hover {
      border-color: var(--bsk-blue, #0084ff);
      background-color: var(--light-active, #f4f4f4);
    }
    
    /* 체크박스가 체크되었을 때 label 스타일 */
    .confirm-check-input:checked + .confirm-check-label {
      background-color: var(--bsk-black, #292923);
      border-color: var(--bsk-black, #292923);
    }
    
    /* 체크 표시 (체크되었을 때만 표시) */
    .confirm-check-input:checked + .confirm-check-label::after {
      content: '';
      position: absolute;
      left: 6px;
      top: 2px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    
    .confirm-check-label img {
      pointer-events: none;
      user-select: none;
    }

    .confirm-modal-content .check,
    .confirm-modal-content .check2 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      position: absolute;
      left: 0px;
      top: 0px;
      overflow: visible;
      aspect-ratio: 1;
      transition: opacity 0.3s;
    }

    .frame-10642 {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      position: relative;
    }

    .frame-607-modal {
      background: var(--light-hover, #fafafa);
      padding: 10px 29px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-end;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .frame-608-modal {
      background: var(--light-hover, #fafafa);
      padding: 20px 29px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      height: 79px;
      position: relative;
      width: 100%;
    }

    .confirm-modal-content .frame-2202 {
      background: var(--bsk-blue, #0084ff);
      padding: 5px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
      cursor: pointer;
      transition: background 0.3s;
    }

    .confirm-modal-content .frame-2202:hover {
      background: var(--bsk-blue, #0084ff);
      opacity: 0.9;
    }


    .confirm-modal-content .div4 {
      color: var(--bsk-gray, #dddddd);
      text-align: center;
      font-family: var(--t1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t1-font-size, 18px);
      line-height: var(--t1-line-height, 160%);
      font-weight: var(--t1-font-weight, 600);
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @media (max-width: 768px) {
      .confirm-modal-container {
        width: 90%;
        max-width: 433px;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
        margin: 0;
      }

      .confirm-modal-content {
        height: auto;
        min-height: 514px;
      }
    }

    /* Form Validation Error Styles for Submit Page */
    .submit-container .error-message {
      color: #ff4444;
      font-size: 13px;
      font-family: "PretendardVariable-Regular", sans-serif;
      margin-top: 8px;
      margin-bottom: 0;
      display: none;
      line-height: 1.5;
      padding: 0;
      width: 100%;
      text-align: left;
      min-height: 18px;
    }
    
    .submit-container .error-message:not(:empty) {
      display: block;
    }
    
    /* 각 폼 필드 컨테이너가 flex column으로 에러 메시지를 아래에 표시 */
    .submit-container .frame-263,
    .submit-container .frame-2632,
    .submit-container .frame-267,
    .submit-container .frame-2692,
    .submit-container .frame-2633,
    .submit-container .frame-272 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      min-height: auto; /* 높이 제한 해제 */
      flex-wrap: wrap; /* 에러 메시지가 아래로 내려가도록 */
    }
    
    /* .frame-272 내부의 에러 메시지는 전체 너비 차지 */
    .submit-container .frame-272 .error-message {
      flex-basis: 100%;
      order: 10; /* 항상 마지막에 표시 */
    }
    
    /* .frame-2206과 .frame-2212가 한 라인에 오도록 */
    .submit-container .frame-272 > .frame-2206,
    .submit-container .frame-272 > .frame-2212 {
      flex-shrink: 0;
    }
    
    .submit-container .frame-272 > .frame-2206 {
      flex: 1;
      min-width: 0;
    }
    
    /* 기존 높이 설정 유지하되 에러 메시지 공간 확보 */
    .submit-container .frame-263,
    .submit-container .frame-2632 {
      height: auto;
      min-height: 45px;
    }
    
    .submit-container .frame-2633 {
      height: auto;
      min-height: 200px;
    }
    
    /* 에러 메시지가 각 필드 아래에 명확하게 표시되도록 */
    .submit-container .frame-263 .error-message,
    .submit-container .frame-2632 .error-message,
    .submit-container .frame-267 .error-message,
    .submit-container .frame-2692 .error-message,
    .submit-container .frame-2633 .error-message,
    .submit-container .frame-272 .error-message {
      order: 10; /* 항상 마지막에 표시 */
      margin-top: 6px;
      padding-left: 2px;
      flex-shrink: 0;
    }

    .submit-container .error-field {
      border: 2px solid #ff4444 !important;
      background-color: #fff5f5 !important;
    }

    .submit-container #nameWrapper.error-field,
    .submit-container #emailWrapper.error-field,
    .submit-container #typeWrapper.error-field,
    .submit-container #titleWrapper.error-field,
    .submit-container #contentWrapper.error-field,
    .submit-container #fileWrapper.error-field {
      border: 2px solid #ff4444 !important;
      background-color: #fff5f5 !important;
    }

    .submit-container .submit-input.error-field,
    .submit-container .submit-select.error-field,
    .submit-container .submit-textarea.error-field {
      border: 2px solid #ff4444 !important;
      background-color: #fff5f5 !important;
    }

    /* FAQ Page Styles - uses terms-container styles */

    /* FAQ Item Styles - uses terms styles with dropdown functionality */
    .faq-item-wrapper {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      width: 100%;
    }

    .faq-item {
      cursor: pointer;
      width: 100%;
    }

    .faq-item .terms-article-number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
    }

    .faq-arrow {
      flex-shrink: 0;
      width: 8px;
      height: 14px;
      position: relative;
      overflow: visible;
      transition: transform 0.3s ease;
    }

    .faq-item.active .faq-arrow {
      transform: rotate(90deg);
    }

    .faq-answer {
      display: none;
    }

    .faq-item.active ~ .faq-answer,
    .faq-item-wrapper:has(.faq-item.active) .faq-answer {
      display: flex;
    }


    /* News Page Styles */
    .news-container {
      min-height: calc(100vh - 500px);
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0 20px 100px;
      background: var(--light-active, #f4f4f4);
      position: relative;
      gap: 50px;
      max-width: 1542px;
      margin: 0 auto;
      padding-top: 0;
    }

    .news-main-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      flex: 1;
      max-width: 1066px;
      position: relative;
      padding-top: 0;
    }

    /* 상단 탭 스타일 */
    .news-top-tabs {
      padding: 19px 20px;
      max-width: 1542px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 0px;
      width: 100%;
      background: var(--light-active, #f4f4f4);
      box-sizing: border-box;
    }

    .news-tab-item {
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 40px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s;
      border-style: solid;
      border-color: var(--light-active, #f4f4f4);
      border-width: 0px 1px 0px 0px;
    }

    .news-tab-item:first-child {
      background: var(--bsk-gray, #dddddd);
      width: 33.3%;
    }

    .news-tab-item:nth-child(2) {
      background: var(--bsk-gray, #dddddd);
      width: 33.3%;
    }

    .news-tab-item:last-child {
      background: var(--bsk-gray, #dddddd);
      width: 33.3%;
      border-width: 0px 0px 0px 1px;
    }

    .news-tab-item.active {
      background: var(--bsk-black, #292923);
    }

    .news-tab-item.active .news-tab-text {
      color: var(--bsk-gray, #dddddd);
    }

    .news-tab-item:not(.active) .news-tab-text {
      color: var(--bsk-black, #292923);
    }

    .news-tab-text {
      text-align: center;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bsk-black, #292923);
    }

    .news-container .div6 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: var(--h1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h1-font-size, 46px);
      line-height: var(--h1-line-height, 130%);
      font-weight: var(--h1-font-weight, 600);
      margin-bottom: 30px;
    }

    .frame-660 {
      display: flex;
      flex-direction: row;
      gap: 0px;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 10px;
    }

    .frame-247,
    .frame-248 {
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 100px;
      height: 30px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s;
      background: var(--bsk-gray, #dddddd);
    }

	.frame-247.active,
    .frame-248.active {
      background: var(--bsk-black, #292923);
    }

	.frame-247.active,
    .frame-248.active .div8 {
      color: var(--bsk-gray, #dddddd);
    }

    .news-container .div7,
    .news-container .div8 {
      text-align: center;
      font-family: var(--t1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t1-font-size, 18px);
      line-height: var(--t1-line-height, 160%);
      font-weight: var(--t1-font-weight, 600);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .news-container .div8 {
      color: var(--bsk-gray, #dddddd);
      color: var(--bsk-black, #292923);
    }

    ._000 {
      text-align: right;
      font-family: var(--t2-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t2-font-size, 16px);
      line-height: var(--t2-line-height, 130%);
      font-weight: var(--t2-font-weight, 600);
      margin-bottom: 10px;
      align-self: flex-end;
    }

    ._000-span {
      color: var(--bsk-black, #292923);
    }

    ._000-span2 {
      color: var(--bsk-pink, #ff518e);
    }

    .line-7 {
      margin-top: -3px;
      border-style: solid;
      border-color: var(--bsk-black, #292923);
      border-width: 3px 0 0 0;
      width: 100%;
      height: 0px;
      margin-bottom: 0;
    }

    .frame-991 {
      display: flex;
      flex-direction: column;
      gap: 0px;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      position: relative;
    }

    .group-202,
    .group-203,
    .group-204,
    .group-205,
    .group-206,
    .group-207,
    .group-208,
    .group-209,
    .group-210 {
      align-self: stretch;
      flex-shrink: 0;
      height: 140px;
      position: relative;
      width: 100%;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    .group-202:hover,
    .group-203:hover,
    .group-204:hover,
    .group-205:hover,
    .group-206:hover,
    .group-207:hover,
    .group-208:hover,
    .group-209:hover,
    .group-210:hover {
      opacity: 0.8;
    }

    .frame-393 {
      display: flex;
      flex-direction: row;
      gap: 45px;
      align-items: center;
      justify-content: flex-start;
      width: 73.73%;
      height: 42.86%;
      position: absolute;
      right: 26.27%;
      left: 0%;
      bottom: 28.57%;
      top: 28.57%;
    }

    .frame-392 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      flex-shrink: 0;
      position: relative;
    }

    .news-container .s {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .frame-157 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }

    .frame-151,
    .frame-1513,
    .frame-1514,
    .frame-1515 {
      padding: 12px 10px 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 25px;
      position: relative;
    }

    .frame-151 {
      background: var(--bsk-blue, #0084ff);
    }

    .frame-1513 {
      background: var(--bsk-pink, #ff518e);
    }

    .frame-1514 {
      background: var(--bsk-green, #00d777);
    }

    .frame-1515 {
      background: var(--bsk-yellow, #ffb300);
    }

    .news-container .div9 {
      color: var(--bsk-gray, #dddddd);
      text-align: left;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 14px;
      line-height: 100%;
      font-weight: 500;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      white-space: nowrap;
    }

    .news-container .div10 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 14px;
      line-height: 100%;
      font-weight: 500;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      white-space: nowrap;
    }

    .news-container .vector,
    .news-container .vector2,
    .news-container .vector3,
    .news-container .vector4,
    .news-container .vector5,
    .news-container .vector6,
    .news-container .vector7,
    .news-container .vector8,
    .news-container .vector9,
    .news-container .vector10,
    .news-container .vector11,
    .news-container .vector12,
    .news-container .vector13,
    .news-container .vector14,
    .news-container .vector15,
    .news-container .vector16,
    .news-container .vector17,
    .news-container .vector18 {
      flex-shrink: 0;
      width: 25px;
      height: 19px;
      position: relative;
      overflow: visible;
      margin-left: -11px;
    }

    .frame-158 {
      margin-left: -11px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      flex: 1;
      height: 25px;
      position: relative;
    }

    .news-container .vector2,
    .news-container .vector4,
    .news-container .vector6,
    .news-container .vector8,
    .news-container .vector10 {
      width: 25px;
      height: 20px;
    }

    .frame-155 {
      margin-left: -11px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      height: 38px;
      position: relative;
    }

    .frame-1512 {
      background: var(--bsk-black, #292923);
      padding: 12px 10px 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 25px;
      position: relative;
    }

    .news-container ._2025-00-00 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      line-height: 130%;
      font-weight: 500;
      position: static;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .news-container ._20-2026 {
      color: var(--bsk-black, #292923);
      text-align: left;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      position: relative;
      width: 604px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .news-container .rectangle-16 {
      width: 16.14%;
      height: 71.43%;
      position: absolute;
      right: 0%;
      left: 83.86%;
      bottom: 14.29%;
      top: 14.29%;
      object-fit: cover;
    }

    .line-8 {
      margin-top: -1px;
      border-style: solid;
      border-color: var(--normal-hover, #c7c7c7);
      border-width: 1px 0 0 0;
      width: 100%;
      height: 0%;
      position: absolute;
      right: 0%;
      left: 0%;
      bottom: 0%;
      top: 100%;
    }

    .line-9 {
      width: 100%;
      height: 0%;
      position: absolute;
      right: 0%;
      left: 0%;
      bottom: 100%;
      top: 0%;
    }

    .frame-177 {
      display: flex;
      flex-direction: row;
      gap: 5px;
      align-items: center;
      justify-content: center;
      height: 25px;
      margin-top: 30px;
      align-self: center;
    }

    .news-container .arrow-back-ios,
    .news-container .arrow-forward-ios {
      flex-shrink: 0;
      width: 15px;
      height: 19px;
      position: relative;
      overflow: visible;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.3s;
    }

    .news-container .arrow-forward-ios {
      opacity: 1;
    }

    .news-container .arrow-back-ios:hover,
    .news-container .arrow-forward-ios:hover {
      opacity: 1;
    }

    .frame-243 {
      display: flex;
      flex-direction: row;
      gap: 0px;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      position: relative;
    }

    .frame-238,
    .frame-239,
    .frame-240,
    .frame-241,
    .frame-242 {
      padding: 4px 9px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s;
    }

    .frame-238 {
      background: var(--bsk-black, #292923);
    }

    .frame-238.active ._1 {
      color: var(--bsk-gray, #dddddd);
    }

    .frame-239,
    .frame-240,
    .frame-241,
    .frame-242 {
      background: var(--light-active, #f4f4f4);
    }

    .frame-239.active,
    .frame-240.active,
    .frame-241.active,
    .frame-242.active {
      background: var(--bsk-black, #292923);
    }

    .frame-239.active ._12,
    .frame-240.active ._12,
    .frame-241.active ._12,
    .frame-242.active ._12 {
      color: var(--bsk-gray, #dddddd);
    }

    .news-container ._1,
    .news-container ._12 {
      text-align: center;
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 20px;
      font-weight: 400;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .news-container ._1 {
      color: var(--bsk-gray, #dddddd);
    }

    .news-container ._12 {
      color: var(--bsk-black, #292923);
    }

    /* 좌측 사이드바 */
    .news-container .frame-223 {
      background: var(--bsk-black, #292923);
      padding: 29px 38px;
      display: flex;
      flex-direction: column;
      gap: 25px;
      align-items: flex-start;
      justify-content: flex-start;
      width: 316px;
      min-height: 1046px;
      position: sticky;
      top: 150px;
      flex-shrink: 0;
      align-self: flex-start;
    }

    .news-container .frame-414 {
      background: var(--darker, #4d4d4d);
      padding: 7px 6px 7px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      width: 100%;
      height: 40px;
      position: relative;
    }

    .news-container .data-loss-prevention {
      flex-shrink: 0;
      width: 25px;
      height: 25px;
      position: relative;
      overflow: visible;
    }

    .news-search-input {
      color: var(--bsk-gray, #dddddd);
      text-align: left;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      line-height: 130%;
      font-weight: 500;
      background: transparent;
      border: none;
      outline: none;
      flex: 1;
      padding: 0;
    }

    .news-search-input::placeholder {
      color: var(--bsk-gray, #dddddd);
      opacity: 0.5;
    }

    .news-container .frame-412 {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
      justify-content: flex-start;
      flex-shrink: 0;
      width: 100%;
      position: relative;
    }

    .news-container .l-blue,
    .news-container .l-blue2,
    .news-container .frame-206,
    .news-container .frame-207,
    .news-container .frame-208,
    .news-container .frame-209,
    .news-container .frame-210,
    .news-container .frame-211,
    .news-container .l-green,
    .news-container .l-yellow {
      padding: 6px 31px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      width: 100%;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

	.news-container .l-blue,
    .news-container .l-blue2,
    .news-container .frame-206,
    .news-container .frame-207,
    .news-container .frame-208,
    .news-container .frame-209,
    .news-container .frame-210,
    .news-container .frame-211,
    .news-container .l-green,
    .news-container .l-yellow {
      background: var(--bsk-black, #292923);
    }

    /* Hover 효과 - active가 아닐 때만 */
    .news-container .l-blue:hover:not(.active),
    .news-container .l-blue2:hover:not(.active),
    .news-container .frame-206:hover:not(.active),
    .news-container .frame-207:hover:not(.active),
    .news-container .frame-208:hover:not(.active),
    .news-container .frame-209:hover:not(.active),
    .news-container .frame-210:hover:not(.active),
    .news-container .frame-211:hover:not(.active),
    .news-container .l-green:hover:not(.active),
    .news-container .l-yellow:hover:not(.active) {
      background: rgba(221, 221, 221, 0.3);
      transform: translateX(5px);
    }

    /* Active 상태 - 클릭된 항목 */
	.news-container .l-blue.active,
    .news-container .l-blue2.active,
    .news-container .frame-206.active,
    .news-container .frame-207.active,
    .news-container .frame-208.active,
    .news-container .frame-209.active,
    .news-container .frame-210.active,
    .news-container .frame-211.active,
    .news-container .l-green.active,
    .news-container .l-yellow.active {
      background: var(--bsk-gray, #dddddd);
      border-color: var(--bsk-pink, #ff518e);
      box-shadow: 0 0 0 2px rgba(255, 81, 142, 0.2);
      transform: translateX(5px);
    }

	.news-container .l-blue.active .div11,
    .news-container .l-blue2.active .div12,
    .news-container .frame-206.active .div12,
    .news-container .frame-207.active .div12,
    .news-container .frame-208.active .div12,
    .news-container .frame-209.active .div12,
    .news-container .frame-210.active .div12,
    .news-container .frame-211.active .div12,
    .news-container .l-green.active .div12,
    .news-container .l-yellow.active .div12 {
      color: #292923;
      font-weight: 600;
    }

    /* 클릭 시 피드백 */
    .news-container .l-blue:active,
    .news-container .l-blue2:active,
    .news-container .frame-206:active,
    .news-container .frame-207:active,
    .news-container .frame-208:active,
    .news-container .frame-209:active,
    .news-container .frame-210:active,
    .news-container .frame-211:active,
    .news-container .l-green:active,
    .news-container .l-yellow:active {
      transform: translateX(3px) scale(0.98);
    }

    .news-container .div11,
    .news-container .div12 {
      text-align: left;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      line-height: 130%;
      font-weight: 500;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

	.news-container .div11,
    .news-container .div12 {
      color: var(--bsk-gray, #dddddd);
    }

    @media (max-width: 1200px) {
      .news-container {
        flex-direction: column;
        align-items: center;
      }

      .news-container .frame-223 {
        position: relative;
        top: 0;
        width: 100%;
        max-width: 316px;
      }

      .news-main-content {
        max-width: 100%;
      }
    }

    /* News Page Mobile Styles */
    @media (max-width: 768px) {
      .news-container {
        flex-direction: column;
        padding: 0 16px 40px;
        gap: 0;
      }

      /* 상단 탭 모바일 */
      .news-top-tabs {
        padding: 0;
        background: var(--light-active, #f4f4f4);
      }

      .news-tab-item {
        padding: 12px 16px;
        height: 48px;
        border-width: 0px 1px 0px 0px;
      }

      .news-tab-item:last-child {
        border-width: 0px;
      }

      .news-tab-text {
        font-size: 16px;
      }

      /* 사이드바 모바일 - 상단으로 이동 */
      .news-container .frame-223 {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        padding: 16px;
        background: var(--light-active, #f4f4f4);
        order: 2;
      }

      .news-container .frame-414 {
        background: #ffffff;
        border: 1px solid var(--bsk-gray, #dddddd);
        border-radius: 4px;
        margin-bottom: 16px;
      }

      .news-search-input {
        font-size: 14px;
      }

      /* 카테고리 그리드 모바일 */
      .news-container .frame-412 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }

      .news-container .l-blue,
      .news-container .l-blue2,
      .news-container .frame-206,
      .news-container .l-green,
      .news-container .l-yellow {
        padding: 8px 12px;
        width: 100%;
        min-height: 36px;
        border-radius: 4px;
      }

      .news-container .div11,
      .news-container .div12 {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* 메인 콘텐츠 모바일 */
      .news-main-content {
        order: 3;
        width: 100%;
        padding: 16px 0;
      }

      .news-container .div6 {
        font-size: 24px;
        line-height: 130%;
        margin-bottom: 16px;
        text-align: center;
      }

      ._000 {
        text-align: center;
        align-self: center;
        margin-bottom: 16px;
        font-size: 14px;
      }

      .frame-660 {
        justify-content: center;
        margin-bottom: 16px;
      }

      .frame-247,
      .frame-248 {
        width: 80px;
        height: 36px;
        padding: 8px 16px;
      }

      .news-container .div7,
      .news-container .div8 {
        font-size: 14px;
      }

      .line-7 {
        margin-bottom: 16px;
      }

      /* 뉴스 리스트 모바일 */
      .frame-991 {
        gap: 0;
      }

      .group-202,
      .group-203 {
        height: auto;
        min-height: 80px;
        padding: 12px 0;
        border-bottom: 1px solid var(--bsk-gray, #dddddd);
      }

      .group-202:last-child,
      .group-203:last-child {
        border-bottom: none;
      }

      .frame-393 {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 0;
        bottom: auto;
        top: auto;
        right: auto;
        left: auto;
      }

      .frame-392 {
        width: 100%;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }

      /* 뱃지 모바일 */
      .article-badge {
        display: flex;
        flex-direction: row;
        gap: 6px;
        align-items: center;
        flex-wrap: nowrap;
        flex-shrink: 0;
      }

      .badge {
        padding: 4px 8px;
        font-size: 11px;
        height: auto;
        min-height: 22px;
        border-radius: 4px;
      }

      .author-badge {
        padding: 4px 8px;
        font-size: 11px;
        height: auto;
        min-height: 22px;
        border-radius: 4px;
      }

      .author-name {
        font-size: 11px;
      }

      .news-container ._2025-00-00 {
        position: relative;
        font-size: 12px;
        color: var(--bsk-black, #292923);
        margin-left: auto;
        flex-shrink: 0;
        white-space: nowrap;
      }

      .news-container ._20-2026 {
        width: 100%;
        font-size: 14px;
        line-height: 140%;
        margin-top: 4px;
      }

      .news-container .rectangle-16 {
        display: none;
      }

      .line-8,
      .line-9 {
        display: none;
      }

      /* 페이지네이션 모바일 */
      .semina-pagination {
        margin-top: 24px;
        justify-content: center;
      }

      .pagination-arrow,
      .pagination-number {
        min-width: 32px;
        height: 32px;
        font-size: 14px;
      }

      /* 동영상 그리드 모바일 */
      .video-news-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .video-news-card {
        width: 100%;
      }

      .video-card-title {
        font-size: 14px;
        line-height: 140%;
      }
    }

    /* Contact Page Styles */
    .contact-container {
      width: 100%;
      background: var(--light-active, #f4f4f4);
    }

    .contact-banner {
      background: var(--bsk-blue, #0084ff);
      max-width: 1542px;
      margin: 0 auto;
      padding: 80px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .contact-banner-content {
      width: 100%;
      text-align: center;
    }

    .banner-title {
      color: #ffffff;
      font-family: var(--h1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h1-font-size, 46px);
      line-height: var(--h1-line-height, 130%);
      font-weight: var(--h1-font-weight, 600);
      margin-bottom: 20px;
    }

    .banner-description {
      color: #ffffff;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      line-height: 160%;
      font-weight: 500;
      opacity: 0.9;
    }

    .contact-section {
      padding: 80px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .top-line {
    	max-width: 1540px;
    	border-top: 1px solid var(--bsk-gray);
    	padding-top: 200px;
    	margin:auto;
    }

    .section-content {
      max-width: 1540px;
      width: 100%;
    }

    .section-title {
      color: var(--bsk-black, #292923);
      font-family: var(--h1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h1-font-size, 46px);
      line-height: var(--h1-line-height, 130%);
      font-weight: var(--h1-font-weight, 600);
      /* margin-bottom: 30px; */
    }

    .section-description {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      line-height: 160%;
      font-weight: 500;
      text-align: center;
      margin-bottom: 50px;
    }

    /* 포트폴리오 그리드 */
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 40px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    .portfolio-item {
      width: 100%;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 8px;
    }

    .portfolio-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 더보기 버튼 */
    .more-button-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 40px;
    }

    .more-button {
      background: var(--bsk-black, #292923);
      color: #ffffff;
      border: none;
      padding: 12px 24px;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .more-button:hover {
      background: #1a1a1a;
    }

    .arrow-icon {
      width: 16px;
      height: 16px;
    }

    /* BSK 소개 요청 버튼 */
    .bsk-intro-button {
      background: var(--light-active, #f4f4f4);
      color: var(--bsk-black, #292923);
      border: 1px solid var(--bsk-black, #292923);
      padding: 16px 48px;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      font-weight: 500;
      display: block;
      margin: 0 auto;
      cursor: pointer;
      transition: all 0.3s;
    }

    .bsk-intro-button:hover {
      background: var(--bsk-black, #292923);
      color: #ffffff;
    }

    /* 스토리텔링 섹션 */
    .storytelling-section,
    .growth-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .section-icon {
      width: 230px;
      height: 230px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .section-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .section-text {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }

    .section-text p {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      line-height: 160%;
      font-weight: 500;
      margin-bottom: 20px;
    }

    .section-text p:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 768px) {
      .banner-title {
        font-size: 32px;
      }

      .section-title {
        font-size: 32px;
      }

      .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }

      .section-text {
        text-align: center;
      }
    }

    /* 아이디 찾기 팝업 스타일 */
    .find-id-popup {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .find-id-popup-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(2px);
    }

    .find-id-popup-content {
      position: relative;
      background: var(--bsk-white, #fcfcf5);
      border-radius: 8px;
      width: 100%;
      max-width: 500px;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      z-index: 10001;
      margin: auto;
    }

    .find-id-popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--bsk-gray, #dddddd);
    }

    .find-id-popup-header h2 {
      margin: 0;
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-SemiBold", sans-serif;
      font-size: 24px;
      font-weight: 600;
    }

    .find-id-popup-close {
      background: none;
      border: none;
      font-size: 32px;
      color: var(--dark-hover, #858585);
      cursor: pointer;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: color 0.3s;
    }

    .find-id-popup-close:hover {
      color: var(--bsk-black, #292923);
    }

    .find-id-popup-body {
      padding: 24px;
    }

    .find-id-form-group {
      margin-bottom: 20px;
    }

    .find-id-form-group label {
      display: block;
      margin-bottom: 8px;
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 16px;
      font-weight: 500;
    }

    .find-id-input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid var(--bsk-gray, #dddddd);
      border-radius: 4px;
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 16px;
      color: var(--bsk-black, #292923);
      box-sizing: border-box;
      transition: border-color 0.3s;
    }

    .find-id-input:focus {
      outline: none;
      border-color: var(--bsk-black, #292923);
    }

    .find-id-input::placeholder {
      color: var(--dark, #a6a6a6);
    }

    .find-id-token-display {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .find-id-token-display span {
      flex: 1;
      padding: 12px 16px;
      background: var(--light-active, #f4f4f4);
      border: 1px solid var(--bsk-gray, #dddddd);
      border-radius: 4px;
      font-family: "PretendardVariable-SemiBold", sans-serif;
      font-size: 18px;
      color: var(--bsk-black, #292923);
      text-align: center;
      letter-spacing: 2px;
    }

    .find-id-token-btn {
      padding: 12px 24px;
      background: var(--bsk-black, #292923);
      color: var(--bsk-white, #fcfcf5);
      border: none;
      border-radius: 4px;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.3s;
      white-space: nowrap;
    }

    .find-id-token-btn:hover {
      background: var(--darker, #4d4d4d);
    }

    .find-id-error-message {
      padding: 12px;
      background: #fff3cd;
      border: 1px solid #ffc107;
      border-radius: 4px;
      color: #856404;
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 14px;
      margin-bottom: 20px;
    }

    .find-id-popup-buttons {
      display: flex;
      gap: 12px;
      margin-top: 24px;
    }

    .find-id-btn {
      flex: 1;
      padding: 14px 24px;
      border: none;
      border-radius: 4px;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
    }

    .find-id-btn-primary {
      background: var(--bsk-black, #292923);
      color: var(--bsk-white, #fcfcf5);
    }

    .find-id-btn-primary:hover {
      background: var(--darker, #4d4d4d);
    }

    .find-id-btn-secondary {
      background: var(--bsk-gray, #dddddd);
      color: var(--bsk-black, #292923);
    }

    .find-id-btn-secondary:hover {
      background: var(--dark-hover, #858585);
    }

    .find-id-result {
      text-align: center;
    }

    .find-id-result h3 {
      margin: 0 0 24px 0;
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-SemiBold", sans-serif;
      font-size: 20px;
      font-weight: 600;
    }

    .find-id-result-info {
      background: var(--light-active, #f4f4f4);
      border-radius: 4px;
      padding: 24px;
      margin-bottom: 24px;
    }

    .find-id-result-info p {
      margin: 12px 0;
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 16px;
    }

    .find-id-result-info strong {
      font-family: "PretendardVariable-Medium", sans-serif;
      font-weight: 500;
      margin-right: 8px;
    }

    .find-id-result-info span {
      font-family: "PretendardVariable-Regular", sans-serif;
    }

    .find-id-token-countdown {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: var(--light-active, #f4f4f4);
      border-radius: 4px;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 14px;
    }

    .countdown-label {
      color: var(--dark-hover, #858585);
    }

    .countdown-time {
      color: var(--bsk-black, #292923);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      letter-spacing: 1px;
    }

    @media (max-width: 768px) {
      .find-id-popup {
        padding: 15px;
      }
      
      .find-id-popup-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 30px);
        margin: 0;
      }

      .find-id-popup-header {
        padding: 16px 20px;
      }

      .find-id-popup-header h2 {
        font-size: 20px;
      }

      .find-id-popup-body {
        padding: 20px;
      }

      .find-id-token-display {
        flex-direction: column;
      }

      .find-id-token-display span {
        width: 100%;
      }

      .find-id-token-btn {
        width: 100%;
      }

      .find-id-popup-buttons {
        flex-direction: column;
      }
    }

    /* ============================================
       MyPage Styles
       ============================================ */
    .mypage-container {
      min-height: calc(100vh - 500px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 100px 20px;
      background: var(--light-active);
    }

    .mypage-form-wrapper {
      width: 592px;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
    }

    .mypage-title {
      color: var(--bsk-black, #292923);
      text-align: center;
      font-family: var(--h2-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h2-font-size, 32px);
      line-height: var(--h2-line-height, 130%);
      font-weight: var(--h2-font-weight, 600);
      margin-bottom: 20px;
    }

    .profile-image-container {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: var(--normal, #dddddd);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      overflow: hidden;
      position: relative;
    }

    .profile-image-placeholder {
      width: 60px;
      height: 60px;
      opacity: 0.5;
    }

    .mypage-form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .mypage-form .form-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mypage-form .form-group.center-align {
      align-items: center;
    }

    .mypage-form .form-group .consent-section {
      width: 100%;
    }

    .form-label {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 16px;
      font-weight: 500;
    }

    .form-input-wrapper {
      background: var(--normal, #dddddd);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      position: relative;
    }

    .form-input-wrapper.readonly {
      background: var(--light-hover, #fafafa);
    }

    .form-input-wrapper.with-button {
      padding-right: 10px;
    }

    .mypage-input {
      background: transparent;
      border: none;
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      line-height: 1.3;
      font-weight: 500;
      flex: 1;
      outline: none;
      min-width: 0;
    }

    .mypage-input:disabled {
      color: var(--dark, #a6a6a6);
    }

    .mypage-input::placeholder {
      color: var(--dark, #a6a6a6);
    }

    .form-button-small {
      background: var(--bsk-black, #292923);
      color: var(--bsk-gray, #dddddd);
      border: none;
      padding: 8px 16px;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.3s;
    }

    .form-button-small:hover {
      background: var(--darker, #4d4d4d);
    }

    .gender-group {
      display: flex;
      flex-direction: row;
      gap: 10px;
    }

    .gender-option {
      flex: 1;
      background: var(--normal, #dddddd);
      padding: 15px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.3s;
      position: relative;
    }

    .gender-option input[type="radio"] {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    .gender-option label {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      width: 100%;
      text-align: center;
    }

    .gender-option input[type="radio"]:checked + label {
      color: var(--bsk-black, #292923);
    }

    .gender-option.selected {
      background: var(--light-hover, #fafafa);
    }

    .birth-date-group {
      display: flex;
      flex-direction: row;
      gap: 10px;
    }

    .birth-date-select {
      flex: 1;
      background: var(--normal, #dddddd);
      padding: 15px 20px;
      border: none;
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      font-weight: 500;
      outline: none;
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .consent-section {
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 20px 0;
    }

    .consent-item {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .consent-item .check-input {
      flex-shrink: 0;
      margin: 0;
    }

    .consent-item label {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 16px;
      font-weight: 400;
      cursor: pointer;
      flex: 1;
      min-width: 0;
      margin: 0;
    }

    .consent-link {
      color: var(--dark-hover, #858585);
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 14px;
      text-decoration: none;
      margin-left: auto;
    }

    .consent-link:hover {
      color: var(--bsk-black, #292923);
    }

    .notification-methods {
      display: flex;
      flex-direction: row;
      gap: 20px;
      margin-top: 10px;
    }

    .notification-method {
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: center;
    }

    .notification-method input[type="checkbox"] {
      width: 20px;
      height: 20px;
      cursor: pointer;
      accent-color: var(--bsk-black, #292923);
    }

    .notification-method label {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
    }

    .consent-notice {
      color: var(--dark, #a6a6a6);
      font-family: "PretendardVariable-Regular", sans-serif;
      font-size: 12px;
      line-height: 1.5;
      margin-top: 10px;
    }

    .form-actions {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      margin-top: 20px;
    }

    .mypage-submit-btn {
      background: var(--bsk-black, #292923);
      color: var(--bsk-gray, #dddddd);
      border: none;
      padding: 15px 20px;
      width: 100%;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.3s;
    }

    .mypage-submit-btn:hover {
      background: var(--darker, #4d4d4d);
    }
    
     .withdraw-link {
      background: #dc3545;
      color: var(--bsk-gray, #dddddd);
      border: none;
      padding: 15px 20px;
      width: 100%;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.3s;
      text-align: center;
    }
    
    .withdraw-link:hover {
       background: var(--darker, #4d4d4d);
    }

    @media (max-width: 768px) {
      .mypage-container {
        padding: 50px 20px;
      }

      .mypage-form-wrapper {
        width: 100%;
      }

      .notification-methods {
        padding-left: 0;
        flex-direction: column;
        gap: 10px;
      }
    }

    /* ============================================
       Contact Page - Introduction Popup Styles
       ============================================ */
    .intro-popup-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1001;
      align-items: center;
      justify-content: center;
    }

    .intro-popup-overlay.active {
      display: flex;
    }

    .intro-popup-content {
      background: white;
      padding: 30px;
      border-radius: 8px;
      max-width: 600px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
    }

    .intro-popup-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #999;
    }

    .intro-popup-title {
      margin-bottom: 20px;
      color: #292923;
      font-size: 24px;
    }

    .intro-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .intro-form-label {
      font-weight: 600;
      color: #495057;
      display: block;
      margin-bottom: 8px;
    }

    .intro-form-label .required {
      color: #dc3545;
    }

    .intro-form-input,
    .intro-form-textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      font-size: 16px;
      box-sizing: border-box;
    }

    .intro-form-textarea {
      resize: vertical;
      font-family: inherit;
    }

    .error-message {
      color: #dc3545;
      font-size: 14px;
      margin-top: 5px;
      display: none;
    }

    .error-message.show {
      display: block;
    }

    .intro-form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 20px;
    }

    .intro-form-btn {
      padding: 10px 20px;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    .intro-form-btn-cancel {
      background: #6c757d;
    }

    .intro-form-btn-submit {
      background: #292923;
    }

    /* ============================================
       Main Page - Inline Style Replacements
       ============================================ */
    .empty-message {
      padding: 40px;
      text-align: center;
      color: #6c757d;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    /* Featured section의 empty-message는 전체 그리드 컬럼 차지 */
    .featured-section .article-list:has(.empty-message) {
      grid-column: 1 / -1;
    }
    
    /* :has() 미지원 브라우저를 위한 대체 방법 */
    .featured-section .empty-message {
      grid-column: 1 / -1;
    }
    
    /* article-list가 empty-message만 있을 때 전체 너비 차지 */
    .featured-section .article-list:only-child .empty-message,
    .featured-section .article-list:first-child:has(.empty-message:only-child) {
      width: 100%;
    }

    /* Slider track 안의 empty-message는 전체 너비 차지 */
    .empty-message.grid-full {
      grid-column: 1 / -1;
      width: 100%;
      min-height: 200px;
    }

    /* Video section의 slider-track이 empty-message만 있을 때 flex로 변경하여 전체 너비 차지 */
    .video-section .video-grid .slider-track:has(.empty-message:only-child) {
      display: flex !important;
      justify-content: center;
      align-items: center;
      width: 100%;
      grid-template-columns: none !important;
      gap: 0 !important;
    }
    
    /* Video section의 empty-message가 slider-viewport 전체 너비 차지 */
    .video-section .video-grid.slider-viewport {
      position: relative;
    }
    
    .video-section .video-grid .slider-track .empty-message.grid-full {
      grid-column: 1 / -1;
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    
    /* slider-track이 empty-message만 있을 때 flex로 변경 */
    .video-section .video-grid .slider-track:has(.empty-message.grid-full:only-child) {
      display: flex !important;
      grid-template-columns: none !important;
      gap: 0 !important;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: relative;
    }
    
    .video-section .video-grid .slider-track:has(.empty-message.grid-full:only-child) .empty-message.grid-full {
      position: static;
      width: 100%;
    }

    /* Articles section의 slider-track이 empty-message만 있을 때 flex로 변경하여 전체 너비 차지 */
    .articles-section .articles-grid .slider-track:has(.empty-message:only-child) {
      display: flex !important;
      justify-content: center;
      align-items: center;
      width: 100%;
      grid-template-columns: none !important;
      gap: 0 !important;
    }
    
    /* Articles section의 empty-message가 slider-viewport 전체 너비 차지 */
    .articles-section .articles-grid.slider-viewport {
      position: relative;
    }
    
    .articles-section .articles-grid .slider-track .empty-message.grid-full {
      grid-column: 1 / -1;
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    
    /* slider-track이 empty-message만 있을 때 flex로 변경 */
    .articles-section .articles-grid .slider-track:has(.empty-message.grid-full:only-child) {
      display: flex !important;
      grid-template-columns: none !important;
      gap: 0 !important;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: relative;
    }
    
    .articles-section .articles-grid .slider-track:has(.empty-message.grid-full:only-child) .empty-message.grid-full {
      position: static;
      width: 100%;
    }

    /* Slider track이 flex인 경우를 위한 추가 스타일 */
    .slider-track .empty-message.grid-full {
      width: 100%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Video section의 slider-viewport가 전체 너비를 차지하도록 */
    .video-section .video-grid.slider-viewport {
      width: 100%;
    }
    
    /* Articles section의 slider-viewport가 전체 너비를 차지하도록 */
    .articles-section .articles-grid.slider-viewport {
      width: 100%;
    }

    .article-img,
    .video-img {
      width: 100%;
      height: 172px;
    }

    .article-img {
      background-size: cover;
      background-position: center;
    }

    .video-img {
      position: relative;
    }

    .video-play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 48px;
      color: white;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      z-index: 2;
      pointer-events: none;
    }

    .video-preview {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    .cursor-pointer {
      cursor: pointer;
    }

    .category-row.center {
      margin: auto;
    }

    .category-row.right-align {
      margin-right: auto;
    }

    .category-row.left-align {
      margin-left: auto;
    }

    .author-name.black {
      color: #000000;
    }

    .seminar-thumbnail-bg {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .seminar-thumbnail-bg.fixed-height {
      height: 290px;
    }

    /* ============================================
       News Page Styles
       ============================================ */
    .semina-pagination {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 80px;
      margin: 0 auto;
    }

    .pagination-arrow {
      cursor: pointer;
      padding: 8px 12px;
      color: var(--bsk-black, #292923);
      font-size: 18px;
      transition: color 0.3s;
    }

    .pagination-arrow:hover {
      color: var(--bsk-pink, #ff518e);
    }

    .pagination-arrow.disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    .pagination-numbers {
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: center;
    }

    .pagination-number {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-family: var(--t1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t1-font-size, 18px);
      font-weight: var(--t1-font-weight, 600);
      color: var(--bsk-black, #292923);
      transition: all 0.3s;
    }

    .pagination-number.active {
      background: var(--bsk-black, #292923);
      color: var(--bsk-gray, #dddddd);
    }

    .pagination-number:hover:not(.active) {
      color: var(--bsk-pink, #ff518e);
    }

    .video-news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      width: 100%;
      margin-bottom: 40px;
      margin-top: 1%;
    }

    .video-news-card {
      display: flex;
      flex-direction: column;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .video-news-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .video-card-image-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: var(--light-active, #f4f4f4);
    }

    .video-card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-card-badge {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    }

    .video-card-badge .badge {
      padding: 4px 10px;
      border-radius: 4px;
    }

    .video-card-badge .author-badge {
      background: rgba(41, 41, 35, 0.8);
      padding: 4px 10px;
      border-radius: 4px;
      margin-left: 0;
    }

    .video-card-badge .author-name {
      color: var(--bsk-gray, #dddddd);
      font-size: 14px;
      font-weight: 500;
    }

    /* /news 페이지의 video-card-badge에서 article-badge 스타일 적용 */
    .video-card-badge .article-badge {
      position: static;
      display: inline-flex;
      align-items: center;
      gap: 0;
    }

    .video-card-badge .article-badge .tagWrap {
      display: flex;
      justify-content: flex-start;
    }

    .video-card-badge .article-badge .category {
      position: relative;
      display: inline-block;
      text-align: center;
      padding: 4px 10px;
      color: #fff;
      background-color: var(--category-bg-color, #2029ac);
      border-radius: 4px 0 0 4px;
    }

    .video-card-badge .article-badge .category::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: -10px;
      width: 10px;
      height: 50%;
      background-color: var(--category-bg-color, inherit);
    }

    .video-card-badge .article-badge .name {
      display: inline-block;
      width: auto;
      min-width: 60px;
      text-align: center;
      padding: 4px 10px;
      background-color: var(--category-bg-color, rgba(41, 41, 35, 0.8));
      color: var(--bsk-gray, #dddddd);
      border-radius: 0 4px 4px 0;
    }

    /* /news 페이지의 frame-392 안의 article-badge 스타일 */
    .frame-392 .article-badge {
      position: static;
      display: inline-flex;
      align-items: center;
      gap: 0;
    }

    .frame-392 .article-badge .tagWrap {
      display: flex;
      justify-content: flex-start;
    }

    .frame-392 .article-badge .category {
      position: relative;
      display: inline-block;
      text-align: center;
      padding: 10px;
      color: #fff;
      background-color: var(--category-bg-color, #2029ac);
    }

    .frame-392 .article-badge .category::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: -10px;
      width: 10px;
      height: 50%;
      background-color: var(--category-bg-color, inherit);
    }

    .frame-392 .article-badge .name {
      display: inline-block;
      width: 80px;
      text-align: center;
      padding: 10px;
      color: var(--bsk-gray, #dddddd);
    }

    .video-card-title {
      padding: 20px;
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-SemiBold", sans-serif;
      font-size: 18px;
      line-height: 1.5;
      font-weight: 600;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 54px;
    }

    @media (max-width: 1200px) {
      .video-news-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .video-news-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================
       QNA Page Styles
       ============================================ */
    .success-message {
      background: #d4edda;
      color: #155724;
      padding: 12px 20px;
      border-radius: 4px;
      margin-bottom: 20px;
      border: 1px solid #c3e6cb;
      display: none;
    }

    .success-message.show {
      display: block;
    }

    .error-message-box {
      background: #f8d7da;
      color: #721c24;
      padding: 12px 20px;
      border-radius: 4px;
      margin-bottom: 20px;
      border: 1px solid #f5c6cb;
      display: none;
    }

    .error-message-box.show {
      display: block;
    }

    .submit-file-input-hidden {
      display: none;
    }

    /* ============================================
       Login Page Styles
       ============================================ */
    .login-checkbox-wrapper {
      margin-top: 10px;
    }

    .social-login-btn {
      cursor: pointer;
    }

    .find-id-popup,
    .find-password-popup {
      display: none;
    }

    .find-id-popup.active,
    .find-password-popup.active {
      display: block;
    }

    .find-id-step {
      display: none;
    }

    .find-id-step.active {
      display: block;
    }

    .find-id-token-countdown {
      display: none;
    }

    .find-id-token-countdown.show {
      display: block;
    }

    .find-id-error-message {
      display: none;
    }

    .find-id-error-message.show {
      display: block;
    }

    /* ============================================
       Special News Page Styles
       ============================================ */
    .specialnews-container {
      max-width: 1540px;
      margin: 0 auto;
      padding: 60px 20px;
    }

    .specialnews-header {
      text-align: center;
      margin-bottom: 80px;
    }

    .specialnews-header h1 {
      font-size: 48px;
      font-weight: 700;
      line-height: 1.3;
      color: var(--bsk-black);
    }

    .monthly-featured-section {
      margin-bottom: 100px;
    }

    .monthly-featured-section .featured-grid {
      gap: 20px;
      margin-top: 20px;
    }

    .all-special-section {
      margin-bottom: 100px;
    }

    .all-special-header {
      margin-bottom: 30px;
    }

    .all-special-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--bsk-black);
      margin-bottom: 30px;
    }

    .special-tabs-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
      border-bottom: 3px solid var(--bsk-black);
    }

    .special-tabs {
      display: flex;
      gap: 0;
    }

    .all-special-count {
      font-size: 16px;
      font-weight: 600;
      color: var(--bsk-black);
    }

    .all-special-count .count-number {
      color: red;
    }

    .special-tab {
      padding: 10px 20px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      background: transparent;
      color: var(--bsk-black);
      transition: all 0.3s;
      border: none;
      background-color: var(--bsk-gray);
    }

    .special-tab.active {
      background: var(--bsk-black);
      color: var(--bsk-white);
    }

    .special-articles-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      margin-bottom: 50px;
    }

    .special-article-card {
      cursor: pointer;
      transition: transform 0.3s;
      max-height: 350px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-bottom: 3px solid var(--bsk-black);
    }

    .special-article-card:hover {
      transform: translateY(-5px);
    }

    .special-article-thumbnail-wrapper {
      position: relative;
      width: 100%;
      height: 200px;
      margin-bottom: 12px;
    }

    .special-article-thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .special-article-meta {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
    }

    .special-article-title {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 8px;
      color: var(--bsk-black);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }

    .special-article-desc {
      font-size: 14px;
      line-height: 1.5;
      color: #666;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
      min-height: 0;
      margin-bottom: 40px;
    }

    /* articles-section에서도 special-article-card 스타일 사용 */
    .articles-section .special-article-card {
      flex-shrink: 0;
      width: 351px;
      box-sizing: border-box;
    }

    .articles-section .special-article-thumbnail-wrapper {
      position: relative;
      width: 100%;
      height: 200px;
      margin-bottom: 12px;
    }

    .articles-section .special-article-thumbnail-wrapper .article-meta {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
    }

    .past-special-section {
      margin-bottom: 100px;
    }

    .past-special-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
    }

    .past-special-grid {
      display: flex;
      gap: 30px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .past-special-grid::-webkit-scrollbar {
      display: none;
    }

    .past-special-grid .special-article-card {
      flex: 0 0 auto;
      width: calc((100% - 90px) / 4);
      min-width: 300px;
    }

    .yearly-news-section {
      margin-bottom: 80px;
      border-bottom: 1px solid var(--bsk-gray);
    }

    .yearly-news-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .yearly-news-title {
      font-size: 28px;
      font-weight: 600;
    }

    .yearly-news-list {
      display: flex;
      gap: 30px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .yearly-news-list::-webkit-scrollbar {
      display: none;
    }

    .yearly-news-list .yearly-news-item {
      flex: 0 0 auto;
      width: calc((100% - 90px) / 4);
      min-width: 300px;
    }

    .yearly-news-item {
      padding: 15px 0;
      cursor: pointer;
      transition: background 0.3s;
      display: flex;
      flex-direction: column;
    }

    .yearly-news-item:hover {
      background: rgba(0, 0, 0, 0.02);
    }

    .yearly-news-date {
      display: inline-block;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--bsk-black);
    }

    .yearly-news-meta {
      margin-bottom: 10px;
    }

    .yearly-news-item .article-badge {
      display: inline-flex;
      align-items: center;
      gap: 0;
      position: static;
      min-width: 160px;
    }

    .yearly-news-item .author-name {
      color: var(--bsk-white);
    }

    .yearly-news-title-text {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--bsk-black);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }

    /* ============================================
       Notice Page Styles
       ============================================ */
    .notice-search-form {
      display: flex;
      flex: 1;
      gap: 10px;
    }

    .notice-search-input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none;
    }

    .notice-item-border {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .notice-article-number {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .notice-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .notice-title-text {
      font-size: 20px;
      font-weight: 600;
      color: #292923;
    }

    .notice-date-text {
      font-size: 14px;
      color: #6c757d;
      font-weight: normal;
      width: 100%;
      text-align: left;
    }

    .notice-pagination {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .notice-pagination-link {
      padding: 8px 12px;
      color: #292923;
      text-decoration: none;
      font-size: 18px;
    }

    .notice-pagination-link.disabled {
      padding: 8px 12px;
      color: #ccc;
      font-size: 18px;
    }

    .notice-pagination-page-link {
      padding: 8px 12px;
      display: inline-block;
      color: #292923;
      text-decoration: none;
      font-size: 16px;
    }

    .notice-pagination-page-active {
      padding: 8px 12px;
      display: inline-block;
      background: #292923;
      color: #fafafa;
      font-size: 16px;
      border-radius: 4px;
    }

    /* ============================================
       Semina Page Styles
       ============================================ */
    .semina-container {
      min-height: calc(100vh - 500px);
      background: var(--light-active, #f4f4f4);
      padding-bottom: 100px;
    }

    .semina-top-tabs {
      padding: 19px 20px;
      max-width: 1542px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 0px;
      width: 100%;
      background: var(--light-active, #f4f4f4);
      box-sizing: border-box;
    }

    .semina-tab-item {
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 40px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s;
      border-style: solid;
      border-color: var(--light-active, #f4f4f4);
      border-width: 0px 1px 0px 0px;
      width: 33.33%;
    }

    .semina-tab-item:first-child {
      background: var(--bsk-gray, #dddddd);
    }

    .semina-tab-item:not(:first-child) {
      background: var(--bsk-gray, #dddddd);
    }

    .semina-tab-item.active {
      background: var(--bsk-black, #292923);
    }

    .semina-tab-item.active .semina-tab-text {
      color: var(--bsk-gray, #dddddd);
    }

    .semina-tab-item:not(.active) .semina-tab-text {
      color: var(--bsk-black, #292923);
    }

    .semina-tab-item:last-child {
      border-width: 0px 0px 0px 1px;
    }

    .semina-tab-text {
      text-align: center;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .semina-main-content {
      max-width: 1542px;
      margin: 0 auto;
      padding: 50px 20px 0;
    }

    .semina-headline {
      color: var(--bsk-black, #292923);
      text-align: center;
      font-family: var(--h1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h1-font-size, 46px);
      line-height: var(--h1-line-height, 130%);
      font-weight: var(--h1-font-weight, 600);
      margin-bottom: 50px;
    }

    .semina-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 50px;
    }

    .semina-card {
      position: relative;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      background: var(--bsk-white, #fcfcf5);
      height: 400px;
    }

    .semina-card-image-wrapper {
      position: relative;
      width: 66.67%;
      height: 100%;
      overflow: hidden;
    }

    .semina-card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .semina-card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.5);
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      font-weight: var(--h3-font-weight, 600);
      z-index: 10;
      pointer-events: none;
    }

    .semina-card-labels {
      position: absolute;
      top: 20px;
      left: 20px;
      display: flex;
      flex-direction: row;
      gap: 8px;
      z-index: 20;
    }

    .semina-card-category {
      background: var(--bsk-yellow, #ffb300);
      color: var(--bsk-black, #292923);
      padding: 6px 12px;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 14px;
      font-weight: 500;
      border-radius: 4px;
    }

    .semina-card-author {
      background: var(--bsk-gray, #dddddd);
      color: var(--bsk-black, #292923);
      padding: 6px 12px;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 14px;
      font-weight: 500;
      border-radius: 4px;
    }

    .semina-card-content {
      width: 33.33%;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: var(--bsk-yellow, #ffb300);
    }

    .semina-card-content.blue {
      background: var(--bsk-blue, #0084ff);
    }

    .semina-card-content.yellow {
      background: var(--bsk-yellow, #ffb300);
    }

    .semina-card-content.green {
      background: var(--bsk-green, #00d777);
    }

    .semina-card-content.pink {
      background: var(--bsk-pink, #ff518e);
    }

    .semina-card-content.dark-blue {
      background: #1a237e;
    }

    .semina-card-title {
      color: var(--bsk-black, #292923);
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
      margin-bottom: 15px;
    }

    .semina-card-subtitle {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      line-height: 160%;
      font-weight: 500;
      margin-bottom: 20px;
    }

    .semina-card-date {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 16px;
      line-height: 160%;
      font-weight: 500;
      margin-bottom: 30px;
    }

    .semina-card-content.dark-blue .semina-card-title,
    .semina-card-content.dark-blue .semina-card-subtitle,
    .semina-card-content.dark-blue .semina-card-date {
      color: var(--bsk-white, #fcfcf5);
    }

    .semina-apply-btn {
      background: var(--bsk-gray, #dddddd);
      color: var(--bsk-black, #292923);
      border: none;
      padding: 12px 24px;
      font-family: var(--t1-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t1-font-size, 18px);
      font-weight: var(--t1-font-weight, 600);
      cursor: pointer;
      transition: background 0.3s;
      align-self: flex-start;
      border-radius: 4px;
    }

    .semina-apply-btn:hover {
      background: var(--bsk-black, #292923);
      color: var(--bsk-gray, #dddddd);
    }

    .semina-card-content.dark-blue .semina-apply-btn {
      background: var(--bsk-white, #fcfcf5);
      color: var(--bsk-black, #292923);
    }

    .semina-card-content.dark-blue .semina-apply-btn:hover {
      background: var(--light-hover, #fafafa);
    }

    .past-seminars {
      max-width: 1542px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .past-seminar-year {
      margin-bottom: 30px;
    }

    .past-seminar-year-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      cursor: pointer;
      border-bottom: 1px solid var(--normal, #dddddd);
    }

    .past-seminar-year-title {
      color: var(--bsk-black, #292923);
      font-family: var(--h2-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h2-font-size, 32px);
      line-height: var(--h2-line-height, 130%);
      font-weight: var(--h2-font-weight, 600);
    }

    .past-seminar-year-arrow {
      width: 24px;
      height: 24px;
      transition: transform 0.3s;
    }

    .past-seminar-year.expanded .past-seminar-year-arrow {
      transform: rotate(90deg);
    }

    .past-seminar-list {
      display: none;
      flex-direction: column;
      gap: 15px;
      padding: 20px 0;
    }

    .past-seminar-year.expanded .past-seminar-list {
      display: flex;
    }

    .past-seminar-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 15px;
      padding: 15px;
      background: var(--bsk-white, #fcfcf5);
      transition: background 0.3s;
    }

    .past-seminar-item:hover {
      background: var(--light-hover, #fafafa);
    }

    .past-seminar-tag {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .past-seminar-tag.yellow {
      background: var(--bsk-yellow, #ffb300);
    }

    .past-seminar-tag.green {
      background: var(--bsk-green, #00d777);
    }

    .past-seminar-tag.blue {
      background: var(--bsk-blue, #0084ff);
    }

    .past-seminar-tag.pink {
      background: var(--bsk-pink, #ff518e);
    }

    .past-seminar-date {
      color: var(--dark, #a6a6a6);
      font-family: var(--t2-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--t2-font-size, 16px);
      font-weight: var(--t2-font-weight, 600);
      min-width: 120px;
    }

    .past-seminar-title {
      color: var(--bsk-black, #292923);
      font-family: var(--l2-font-family, "PretendardVariable-Medium", sans-serif);
      font-size: var(--l2-font-size, 16px);
      font-weight: var(--l2-font-weight, 500);
      flex: 1;
    }

    .semina-empty {
      text-align: center;
      padding: 50px;
    }

    .semina-empty p {
      font-size: 18px;
      color: #666;
    }

    @media (max-width: 1024px) {
      .semina-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .semina-card {
        flex-direction: column;
        height: auto;
      }

      .semina-card-image-wrapper {
        width: 100%;
        height: 300px;
      }

      .semina-card-content {
        width: 100%;
      }
    }

    @media (max-width: 768px) {
      .semina-grid {
        grid-template-columns: 1fr;
      }

      .semina-headline {
        font-size: 32px;
      }

      .semina-top-tabs {
        padding: 15px 10px;
      }

      .semina-tab-item {
        width: 33.33%;
      }

      .semina-tab-text {
        font-size: 18px;
      }
    }

    /* ============================================
       Join Page Styles
       ============================================ */
    .join-container {
      min-height: calc(100vh - 500px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 100px 20px;
      background: var(--light-active);
    }

    .join-form-wrapper {
      width: 592px;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
    }

    .join-title {
      color: var(--bsk-black, #292923);
      text-align: center;
      font-family: var(--h2-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h2-font-size, 32px);
      line-height: var(--h2-line-height, 130%);
      font-weight: var(--h2-font-weight, 600);
      margin-bottom: 20px;
    }

    .join-form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .form-label {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 16px;
      font-weight: 500;
    }

    .form-input-wrapper {
      background: var(--normal, #dddddd);
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      position: relative;
    }

    .form-input-wrapper.with-button {
      padding-right: 10px;
    }

    .join-input {
      background: transparent;
      border: none;
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      line-height: 1.3;
      font-weight: 500;
      flex: 1;
      outline: none;
      min-width: 0;
    }

    .join-input::placeholder {
      color: var(--dark, #a6a6a6);
    }

    .form-button-small {
      background: var(--bsk-black, #292923);
      color: var(--bsk-gray, #dddddd);
      border: none;
      padding: 8px 16px;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.3s;
    }

    .form-button-small:hover {
      background: var(--darker, #4d4d4d);
    }

    .gender-group {
      display: flex;
      flex-direction: row;
      gap: 10px;
    }

    .gender-option {
      flex: 1;
      background: var(--normal, #dddddd);
      padding: 15px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.3s;
      position: relative;
    }

    .gender-option input[type="radio"] {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    .gender-option label {
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      width: 100%;
      text-align: center;
    }

    .gender-option.selected {
      background: var(--light-hover, #fafafa);
    }

    .birth-date-group {
      display: flex;
      flex-direction: row;
      gap: 10px;
    }

    .birth-date-select {
      flex: 1;
      background: var(--normal, #dddddd);
      padding: 15px 20px;
      border: none;
      color: var(--bsk-black, #292923);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      font-weight: 500;
      outline: none;
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .join-submit-btn {
      background: var(--bsk-black, #292923);
      color: var(--bsk-gray, #dddddd);
      border: none;
      padding: 15px 20px;
      width: 100%;
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.3s;
      margin-top: 10px;
    }

    .join-submit-btn:hover {
      background: var(--darker, #4d4d4d);
    }

    .join-input[readonly],
    .birth-date-select[disabled] {
      background-color: #f0f0f0 !important;
      cursor: not-allowed !important;
      color: #666 !important;
    }

    .gender-option.disabled {
      background-color: #f0f0f0 !important;
      cursor: not-allowed !important;
      opacity: 0.6;
    }

    .gender-option.disabled input[type="radio"] {
      cursor: not-allowed !important;
    }

    .form-button-small:disabled {
      background-color: #999 !important;
      cursor: not-allowed !important;
      opacity: 0.6;
    }

    @media (max-width: 768px) {
      .join-container {
        padding: 50px 20px;
      }

      .join-form-wrapper {
        width: 100%;
      }
    }

    /* ============================================
       News Detail Page Styles
       ============================================ */
    .news-detail-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 30px;
      font-size: 14px;
      color: #6c757d;
    }

    .breadcrumb a {
      color: #6c757d;
      text-decoration: none;
    }

    .breadcrumb a:hover {
      color: #292923;
    }

    .breadcrumb-separator {
      color: #6c757d;
    }

    .news-detail-content {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 40px;
    }

    .article-main {
      flex: 1;
    }

    .article-header {
      border-top: 2px solid var(--bsk-black);
      padding-top: 10px;
      margin-bottom: 30px;
    }

    .article-title {
      font-size: 32px;
      font-weight: 600;
      color: #292923;
      line-height: 1.4;
      margin-bottom: 20px;
    }

    .article-meta {
      display: flex;
      align-items: center;
    }

    .article-date {
      font-size: 16px;
      color: #6c757d;
    }

    .article-engagement {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .engagement-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
      color: #6c757d;
    }

    .engagement-item.clickable {
      cursor: pointer;
      transition: all 0.3s;
    }

    .engagement-item.clickable:hover {
      color: #292923;
      transform: scale(1.05);
    }

    .engagement-item.clickable .liked {
      color: #ff518e;
    }

    .article-intro {
      background: #f8f9fa;
      padding: 20px;
      border-left: 4px solid #292923;
      margin-bottom: 30px;
    }

    .article-intro ul {
      margin: 0;
      padding-left: 20px;
    }

    .article-intro li {
      margin-bottom: 10px;
      line-height: 1.6;
    }

    .article-quote {
      background: #f8f9fa;
      padding: 30px;
      margin: 40px 0;
      border-left: 4px solid #ff518e;
      font-size: 20px;
      font-weight: 500;
      color: #292923;
      font-style: italic;
    }

    .article-image {
      width: 100%;
      margin: 30px 0;
      border-radius: 8px;
    }

    .article-content {
      font-size: 16px;
      line-height: 1.8;
      color: #292923;
      margin-bottom: 40px;
    }

    .article-content p {
      margin-bottom: 20px;
    }

    .article-warning {
      background: #fff3cd;
      padding: 20px;
      border-left: 4px solid #ffb300;
      margin: 40px 0;
    }

    .article-warning h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #292923;
    }

    .article-warning ul {
      margin: 0;
      padding-left: 20px;
    }

    .article-warning li {
      margin-bottom: 10px;
      line-height: 1.6;
    }

    .article-sidebar {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    .author-card {
      padding: 20px 20px 50px 20px;
      border-top: 2px solid var(--bsk-black);
      border-bottom: 1px solid var(--bsk-gray);
    }

    .author-header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
    }

    .author-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #292923;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fafafa;
      font-weight: 600;
    }

    .author-name {
      font-size: 16px;
      font-weight: 600;
      color: #292923;
    }

    .author-bio {
      font-size: 14px;
      line-height: 1.6;
      color: #6c757d;
    }

    .ad-box {
      background: #e9ecef;
      padding: 40px 20px;
      text-align: center;
      color: #6c757d;
      border-radius: 8px;
    }

    .comments-section {
      margin-top: 60px;
      padding-top: 40px;
      border-top: 1px solid #e9ecef;
    }

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

    .comments-title {
      font-size: 24px;
      font-weight: 600;
      color: #292923;
    }

    .comments-count {
      font-size: 16px;
      color: #6c757d;
    }

    .rating-input {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .star-rating {
      display: flex;
      gap: 5px;
    }

    .star {
      font-size: 24px;
      color: #ddd;
      cursor: pointer;
    }

    .star.active {
      color: #ffb300;
    }

    .comment-form {
      margin-bottom: 40px;
    }

    .comment-input {
      width: 100%;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      resize: vertical;
      min-height: 100px;
      margin-bottom: 15px;
    }

    .comment-submit {
      background: #292923;
      color: #fafafa;
      border: none;
      padding: 12px 24px;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
    }

    .comment-submit:hover {
      background: #1a1a1a;
    }

    .comment-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .comment-item {
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      margin-bottom: 15px;
    }

    .comment-rating {
      display: flex;
      gap: 5px;
      margin-bottom: 10px;
    }

    .comment-text {
      font-size: 14px;
      line-height: 1.6;
      color: #292923;
      margin-bottom: 10px;
    }

    .comment-meta {
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: #6c757d;
    }

    .comment-author {
      font-weight: 600;
    }

    .comment-login-required {
      margin-bottom: 30px;
    }

    .related-articles {
      margin-top: 60px;
      padding-top: 40px;
      border-top: 1px solid #e9ecef;
    }

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

    .related-title {
      font-size: 24px;
      font-weight: 600;
      color: #292923;
    }

    .related-nav {
      display: flex;
      gap: 10px;
    }

    .nav-arrow {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .nav-arrow:hover {
      background: #292923;
      color: #fafafa;
    }

    .related-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .related-item {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .related-item:hover {
      background: #e9ecef;
    }

    .related-tag {
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    .related-tag.news {
      background: #0084ff;
      color: #fafafa;
    }

    .related-tag.semina {
      background: #ffb300;
      color: #292923;
    }

    .related-content {
      flex: 1;
    }

    .related-item-title {
      font-size: 16px;
      font-weight: 600;
      color: #292923;
      margin-bottom: 5px;
    }

    .related-item-date {
      font-size: 14px;
      color: #6c757d;
    }

    @media (max-width: 1024px) {
      .news-detail-content {
        grid-template-columns: 1fr;
      }

      .article-sidebar {
        order: -1;
      }
    }

    /* ============================================
       Semina Detail Page Styles
       ============================================ */
    .semina-detail-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .semina-tags {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .semina-tag {
      padding: 6px 12px;
      background: #0084ff;
      color: #fafafa;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }

    .semina-banner {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 30px;
      background: #292923;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fafafa;
      position: relative;
      overflow: hidden;
    }

    .semina-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .semina-detail-content {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 40px;
    }

    .author-info {
      flex: 1;
    }

    .author-affiliation {
      font-size: 14px;
      color: #6c757d;
      margin-bottom: 10px;
    }

    .author-engagement {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 10px;
    }

    .apply-section {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
    }

    .apply-fee {
      font-size: 16px;
      color: #292923;
      margin-bottom: 15px;
    }

    .apply-fee-label {
      font-weight: 600;
      margin-right: 10px;
    }

    .apply-fee-value {
      color: #0084ff;
      font-weight: 600;
    }

    .semina-basic-info {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #e9ecef;
    }

    .semina-basic-info-item {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .semina-basic-info-label {
      font-size: 14px;
      color: #6c757d;
    }

    .semina-basic-info-value {
      font-size: 16px;
      font-weight: 600;
      color: #292923;
    }

    .semina-info-box {
      background: #f8f9fa;
      padding: 30px;
      border-radius: 8px;
      margin: 30px 0;
    }

    .semina-info-row {
      display: flex;
      padding: 15px 0;
      border-bottom: 1px solid #e9ecef;
    }

    .semina-info-row:last-child {
      border-bottom: none;
    }

    .semina-info-label {
      font-weight: 600;
      color: #292923;
      width: 120px;
      flex-shrink: 0;
    }

    .semina-info-value {
      color: #6c757d;
      flex: 1;
    }

    .semina-recommendation {
      background: #f8f9fa;
      padding: 30px;
      border-radius: 8px;
      margin: 30px 0;
    }

    .semina-recommendation-title {
      font-size: 20px;
      font-weight: 600;
      color: #292923;
      margin-bottom: 20px;
    }

    .semina-recommendation-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .semina-recommendation-list li {
      padding: 10px 0;
      padding-left: 20px;
      position: relative;
      line-height: 1.6;
      color: #292923;
    }

    .semina-recommendation-list li:before {
      content: "•";
      position: absolute;
      left: 0;
      color: #292923;
    }

    .semina-apply-btn:disabled {
      background: #6c757d;
      cursor: not-allowed;
    }

    .semina-detail-author-card {
      margin-bottom: 20px;
    }

    .semina-detail-author-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6c757d;
      font-weight: 600;
      flex-shrink: 0;
    }

    .semina-detail-author-bio {
      margin-bottom: 15px;
    }

    .semina-apply-btn-full-width {
      width: 100%;
    }

    .semina-apply-btn-disabled {
      background: #6c757d;
      cursor: not-allowed;
    }

    @media (max-width: 1024px) {
      .semina-detail-content {
        grid-template-columns: 1fr;
      }

      .article-sidebar {
        order: -1;
      }

      .semina-banner {
        height: 300px;
      }

      .semina-basic-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }
    }

    @media (max-width: 768px) {
      .semina-detail-container {
        padding: 20px 15px;
      }

      .article-title {
        font-size: 24px;
      }

      .semina-banner {
        height: 250px;
      }

      .semina-info-label {
        width: 100px;
        font-size: 14px;
      }

      .semina-info-value {
        font-size: 14px;
      }
    }

    /* ============================================
       Category Page Styles
       ============================================ */
    .category-container {
      max-width: 1540px;
      margin: 0 auto;
      padding: 60px 20px;
      background: var(--bsk-white, #fcfcf5);
    }

    .category-header {
      text-align: center;
      margin-bottom: 50px;
    }

    .category-header h1 {
      font-size: 42px;
      font-weight: 700;
      line-height: 1.4;
      color: var(--bsk-black);
      margin-bottom: 30px;
    }

    .category-search {
      max-width: 800px;
      margin: 0 auto 40px;
    }

    .category-search-input {
      width: 100%;
      padding: 15px 20px;
      font-size: 18px;
      border: 1px solid var(--normal-hover);
      background: var(--bsk-white);
      border-radius: 4px;
    }

    .category-search-input:focus {
      outline: none;
      border-color: var(--bsk-black);
    }

    .category-tags {
      max-width: 1200px;
      margin: 0 auto 60px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .category-tags-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }

    .category-tag {
      padding: 10px 20px;
      background: var(--bsk-black);
      color: var(--bsk-white);
      border-radius: 20px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
    }

    .category-tag:hover {
      background: var(--dark-hover);
      transform: translateY(-2px);
    }

    .category-tag.active {
      background: var(--bsk-blue);
    }

    .category-section {
      margin-bottom: 80px;
    }

    .category-section-title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 30px;
      color: var(--bsk-black);
    }

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

    .category-section .section-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--bsk-black);
      margin: 0;
    }

    .category-section .section-nav {
      display: flex;
      gap: 15px;
    }

    .category-section .nav-arrow {
      width: 24px;
      height: 24px;
      cursor: pointer;
      opacity: 1;
      transition: opacity 0.3s;
    }

    .category-section .nav-arrow.disabled {
      opacity: 0.5;
    }

    .category-section .nav-arrow:hover {
      opacity: 1 !important;
    }

    .category-section .articles-grid {
      gap: 0;
      margin-top: 0;
      margin-bottom: 40px;
    }

    .category-section .articles-grid.slider-viewport {
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .category-section .articles-grid.slider-viewport::-webkit-scrollbar {
      display: none;
    }

    .category-section .slider-track {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .article-list-item {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px;
      border-bottom: 1px solid var(--normal-hover);
      cursor: pointer;
      transition: background 0.3s;
    }

    .article-list-item:hover {
      background: rgba(0, 0, 0, 0.02);
    }

    /* category-section의 article-list-item에서 article-badge 스타일 */
    .category-section .article-list-item .article-badge {
      position: static;
      display: inline-flex;
      align-items: center;
      gap: 0;
      flex-shrink: 0;
      min-width: 160px;
    }

    .article-tag {
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      color: var(--bsk-white);
      border-radius: 4px;
      white-space: nowrap;
    }

    .article-tag.blue {
      background: var(--bsk-blue);
    }

    .article-tag.pink {
      background: var(--bsk-pink);
    }

    .article-tag.green {
      background: var(--bsk-green);
    }

    .article-tag.yellow {
      background: var(--bsk-yellow);
      color: var(--bsk-black);
    }

    .article-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 40px;
    }

    .article-date {
      font-size: 16px;
      color: #666;
      min-width: 100px;
    }

    .article-title {
      flex: 1;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--bsk-black);
    }

    .article-thumbnail {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 30px;
    }

    .pagination-number {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.3s;
      color: var(--bsk-black);
    }

    .pagination-number:hover {
      background: var(--normal-hover);
    }

    .pagination-number.active {
      background: var(--bsk-black);
      color: var(--bsk-white);
    }

    /* Articles section slider 설정 */
    .articles-section .articles-grid.slider-viewport {
      gap: 0;
      overflow: hidden;
      width: 100%;
      max-width: calc(351px * 4 + 25px * 3); /* 4개 카드 + 3개 gap = 1479px */
    }

    .articles-section .articles-grid .slider-track {
      display: flex;
      gap: 25px;
      transition: transform 0.4s ease;
    }
    
    .articles-section .articles-grid .slider-track .special-article-card {
      flex-shrink: 0;
      width: 351px;
    }

    .articles-section .articles-grid .slider-track .empty-message {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      font-size: 18px;
      width: 100%;
      color: #666;
    }

    .video-section .video-grid {
      display: grid;
      /* grid-template-columns: repeat(4, 1fr); */
      gap: 25px;
      margin-bottom: 40px;
    }

    /* category-section의 video-grid는 한 줄에 4개씩 표시 */
    .category-section.video-section .video-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
      margin-top: 50px;
      margin-bottom: 40px;
    }

    .category-section.video-section .video-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
    }

    .video-section .video-grid.slider-viewport {
      gap: 0;
      overflow: hidden;
      width: 100%;
      max-width: calc(351px * 4 + 25px * 3); /* 4개 카드 + 3개 gap = 1479px */
    }

    .video-section .video-grid .slider-track {
      display: flex;
      gap: 25px;
      transition: transform 0.4s ease;
    }
    
    .video-section .video-grid .slider-track .video-card {
      flex-shrink: 0;
      width: 351px;
    }

    .video-section .video-grid .slider-track .empty-message {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      font-size: 18px;
      width: 100%;
      color: #666;
    }

    .video-card {
      cursor: pointer;
      transition: transform 0.3s;
    }

    .video-card:hover {
      transform: translateY(-5px);
    }

    .video-thumbnail {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 4px;
      position: relative;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .video-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--bsk-white);
      border-radius: 4px;
    }

    .seminar-section .seminar-grid {
      display: grid;
      /* grid-template-columns: repeat(4, 1fr); */
      gap: 25px;
    }

    .seminar-section .seminar-grid.slider-viewport {
      display: block !important;
      gap: 0;
      overflow: hidden;
      width: 100%;
      max-width: calc(351px * 4 + 25px * 3); /* 4개 카드 + 3개 gap = 1479px */
    }

    /* category-section의 seminar-section도 동일하게 적용 */
    .category-section.seminar-section .seminar-grid.slider-viewport {
      display: block !important;
      gap: 0 !important;
      overflow: hidden !important;
      width: 100% !important;
      max-width: calc(351px * 4 + 25px * 3) !important; /* 4개 카드 + 3개 gap = 1479px */
    }

    .seminar-section .seminar-grid.slider-viewport::-webkit-scrollbar {
      display: none;
    }

    .seminar-section .seminar-grid .slider-track {
      display: flex !important;
      flex-direction: row !important;
      gap: 25px;
      transition: transform 0.3s ease-in-out;
    }

    .seminar-section .seminar-grid .slider-track .main-seminar-card {
      flex-shrink: 0;
      width: 351px;
    }

    /* category-section의 seminar-section slider-track도 동일하게 적용 */
    .category-section.seminar-section .seminar-grid .slider-track {
      display: flex !important;
      flex-direction: row !important;
      gap: 25px;
      transition: transform 0.3s ease-in-out;
    }

    .category-section.seminar-section .seminar-grid .slider-track .main-seminar-card {
      flex-shrink: 0;
      width: 351px;
    }

    .seminar-card {
      cursor: pointer;
      transition: transform 0.3s;
    }

    .seminar-card:hover {
      transform: translateY(-5px);
    }

    .seminar-thumbnail {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 15px;
      position: relative;
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .seminar-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--bsk-white);
      border-radius: 4px;
    }

    .seminar-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--bsk-black);
    }

    .recommended-section .recommended-grid {
      display: grid;
      /* grid-template-columns: repeat(4, 1fr); */
      gap: 25px;
    }

    .recommended-section .recommended-grid.slider-viewport {
      display: block !important;
      gap: 0;
      overflow: hidden;
      width: 100%;
      max-width: calc(351px * 4 + 25px * 3); /* 4개 카드 + 3개 gap = 1479px */
    }

    .recommended-section .recommended-grid.slider-viewport::-webkit-scrollbar {
      display: none;
    }

    .recommended-section .recommended-grid .slider-track {
      display: flex !important;
      flex-direction: row !important;
      gap: 25px;
      transition: transform 0.3s ease-in-out;
    }

    .recommended-section .recommended-grid .slider-track .special-article-card {
      flex-shrink: 0;
      width: 351px;
    }

    .recommended-section .recommended-grid .slider-track .empty-message {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      font-size: 18px;
      width: 100%;
      color: #666;
    }

    .recommended-card {
      cursor: pointer;
      transition: transform 0.3s;
    }

    .recommended-card:hover {
      transform: translateY(-5px);
    }

    .recommended-thumbnail {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 15px;
      position: relative;
      background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    }

    .recommended-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--bsk-white);
      border-radius: 4px;
    }

    .recommended-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--bsk-black);
    }

    @media (max-width: 1200px) {
      .video-grid,
      .seminar-grid,
      .recommended-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 768px) {
      .video-grid,
      .seminar-grid,
      .recommended-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .category-header h1 {
        font-size: 28px;
      }

      .article-list-item {
        flex-wrap: wrap;
      }

      .article-thumbnail {
        width: 100%;
        height: 200px;
      }
    }

    /* ============================================
       Common Utility Classes
       ============================================ */
    .cursor-pointer {
      cursor: pointer;
    }

    .empty-message {
      padding: 40px;
      text-align: center;
      color: #6c757d;
    }

    .grid-full {
      grid-column: 1 / -1;
    }

    .pagination-arrow.disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    .join-error-message {
      color: #ff518e;
      margin-bottom: 20px;
      padding: 12px 20px;
      background-color: rgba(255, 81, 142, 0.1);
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      font-family: 'PretendardVariable-Medium', sans-serif;
    }

    .join-success-message {
      color: #00d777;
      margin-bottom: 20px;
      padding: 12px 20px;
      background-color: rgba(0, 215, 119, 0.1);
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      font-family: 'PretendardVariable-Medium', sans-serif;
    }

    .naver-login-notice {
      color: #03c75a;
      margin-bottom: 20px;
      padding: 12px 20px;
      background-color: rgba(3, 199, 90, 0.1);
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      font-family: 'PretendardVariable-Medium', sans-serif;
    }

    .kakao-login-notice {
      color: #FEE500;
      margin-bottom: 20px;
      padding: 12px 20px;
      background-color: rgba(254, 229, 0, 0.1);
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      font-family: 'PretendardVariable-Medium', sans-serif;
    }

    .google-login-notice {
      color: #4285F4;
      margin-bottom: 20px;
      padding: 12px 20px;
      background-color: rgba(66, 133, 244, 0.1);
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      font-family: 'PretendardVariable-Medium', sans-serif;
    }

    .readonly-input {
      background-color: #f0f0f0;
      cursor: not-allowed;
    }

    .comment-item-empty {
      text-align: center;
      color: #6c757d;
      padding: 40px;
    }

    .semina-apply-btn-center {
      text-align: center;
      margin-top: 40px;
    }

    .semina-apply-btn-full-width {
      width: 100%;
    }

    .semina-apply-btn-disabled {
      background: #6c757d;
      cursor: not-allowed;
    }

    .related-item-cursor {
      cursor: pointer;
    }

    .comment-login-link {
      color: #292923;
      text-decoration: underline;
    }

    .comment-login-link:hover {
      color: #0084ff;
    }

    /* ============================================
       Admin Page Styles
       ============================================ */
    .admin-news-tab.active {
      color: #007bff !important;
      border-bottom-color: #007bff !important;
    }

    .admin-news-tab:hover {
      color: #007bff !important;
    }

    .admin-success-message {
      background: #d4edda;
      color: #155724;
      padding: 12px 20px;
      border-radius: 4px;
      margin-bottom: 30px;
      border: 1px solid #c3e6cb;
    }

    .admin-error-message {
      background: #f8d7da;
      color: #721c24;
      padding: 12px 20px;
      border-radius: 4px;
      margin-bottom: 30px;
      border: 1px solid #f5c6cb;
    }

    .admin-user-count {
      margin-bottom: 20px;
      font-size: 16px;
      color: #333;
    }

    .admin-table-wrapper {
      overflow-x: auto;
    }

    .admin-user-table {
      width: 100%;
      border-collapse: collapse;
      background: white;
    }

    .admin-user-table thead tr {
      background: #f8f9fa;
      border-bottom: 2px solid #dee2e6;
    }

    .admin-user-table th {
      padding: 12px;
      text-align: left;
      font-weight: 600;
      color: #495057;
    }

    .admin-user-table tbody tr {
      border-bottom: 1px solid #dee2e6;
      cursor: pointer;
    }

    .admin-user-table tbody tr:hover {
      background-color: #f8f9fa;
    }

    .admin-user-table td {
      padding: 12px;
      color: #212529;
    }

    .admin-user-table tbody tr.empty-row td {
      padding: 40px;
      text-align: center;
      color: #6c757d;
    }

    .admin-pagination {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .admin-news-tabs {
      margin-bottom: 20px;
      border-bottom: 2px solid #dee2e6;
    }

    .admin-news-tab {
      display: inline-block;
      padding: 12px 24px;
      text-decoration: none;
      color: #495057;
      font-weight: 600;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: all 0.3s;
    }

    .admin-search-form-wrapper {
      margin-bottom: 20px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
    }

    .admin-search-form {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .admin-search-input {
      flex: 1;
      padding: 10px 15px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      font-size: 14px;
    }

    .admin-search-button {
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .admin-reset-button {
      padding: 10px 20px;
      background: #6c757d;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
    }

    .admin-search-keyword {
      color: #6c757d;
      font-size: 14px;
    }

    .admin-pagination-link {
      padding: 8px 16px;
      border: 1px solid #dee2e6;
      background: white;
      cursor: pointer;
      border-radius: 4px;
      text-decoration: none;
      color: #495057;
    }

    .admin-pagination-link:hover {
      background: #f8f9fa;
    }

    .admin-pagination-disabled {
      padding: 8px 16px;
      color: #ccc;
    }

    .admin-pagination-info {
      padding: 8px 16px;
      color: #495057;
    }

    .admin-button-wrapper {
      margin-top: 30px;
      margin-bottom: 20px;
    }

    .admin-button-auto {
      width: auto;
      padding: 10px 20px;
    }

    .admin-popup-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1001;
      align-items: center;
      justify-content: center;
    }

    .admin-popup-overlay.show,
    .admin-popup-overlay.admin-popup-show {
      display: flex;
    }

    .admin-popup-content {
      background: white;
      padding: 30px;
      border-radius: 8px;
      max-width: 500px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
    }

    .admin-popup-content.large {
      max-width: 600px;
    }

    .admin-popup-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #999;
    }

    .admin-popup-title {
      margin-bottom: 20px;
      color: #292923;
      font-size: 24px;
    }

    .admin-detail-info {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .admin-detail-item {
      display: flex;
      flex-direction: column;
    }

    .admin-detail-label {
      font-weight: 600;
      color: #495057;
      display: block;
      margin-bottom: 5px;
    }

    .admin-detail-value {
      padding: 10px;
      background: #f8f9fa;
      border-radius: 4px;
      color: #212529;
    }

    .admin-popup-actions {
      margin-top: 30px;
      display: flex;
      gap: 10px;
    }

    .admin-popup-form-flex {
      flex: 1;
    }

    .admin-button-danger {
      background: #dc3545;
    }

    .admin-button-danger:hover {
      background: #c82333;
    }

    .admin-button-full-width {
      width: 100%;
    }

    .admin-button-secondary {
      flex: 1;
      padding: 10px 20px;
      background: #6c757d;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .admin-button-secondary:hover {
      background: #5a6268;
    }

    .admin-pagination-numbers {
      display: flex;
      gap: 4px;
    }

    .admin-pagination-btn {
      padding: 8px 12px;
      border: 1px solid #dee2e6;
      background: white;
      color: #495057;
      text-decoration: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .admin-pagination-btn:hover {
      background: #f8f9fa;
    }

    .admin-pagination-btn-disabled {
      padding: 8px 12px;
      border: 1px solid #dee2e6;
      background: #f8f9fa;
      color: #adb5bd;
      border-radius: 4px;
    }

    .admin-pagination-number {
      padding: 8px 12px;
      border: 1px solid #dee2e6;
      background: white;
      color: #495057;
      text-decoration: none;
      border-radius: 4px;
      min-width: 40px;
      text-align: center;
    }

    .admin-pagination-number:hover {
      background: #f8f9fa;
    }

    .admin-pagination-number.active {
      border: 1px solid #007bff;
      background: #007bff;
      color: white;
      font-weight: bold;
    }

    .admin-detail-row {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e9ecef;
    }

    .admin-detail-row label {
      display: inline-block;
      width: 120px;
      font-weight: 600;
      color: #495057;
    }

    .admin-detail-row span {
      color: #212529;
    }

    .admin-detail-row-hidden,
    .admin-detail-item-hidden {
      display: none;
    }

    .admin-popup-actions {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 2px solid #dee2e6;
    }

    .admin-popup-actions form {
      margin: 0;
    }

    .admin-reset-password-btn {
      width: 100%;
      padding: 12px;
      background: #dc3545;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.3s;
    }

    .admin-reset-password-btn:hover {
      background: #c82333;
    }

    .admin-toast-message {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 20px;
      border-radius: 4px;
      z-index: 2000;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      animation: slideInRight 0.3s ease-out;
    }

    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .admin-toast-success {
      background: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    .admin-toast-error {
      background: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }

    .admin-form-actions {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .admin-form-btn-cancel {
      padding: 10px 20px;
      background: #6c757d;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.3s;
    }

    .admin-form-btn-cancel:hover {
      background: #5a6268;
    }

    .password-mismatch-error {
      display: none;
      color: #dc3545;
      font-size: 14px;
      margin-top: 5px;
    }

    .admin-table-row-clickable {
      cursor: pointer;
    }

    .admin-pagination-info {
      padding: 8px 16px;
      color: #495057;
    }

    .admin-register-btn-wrapper {
      margin-top: 30px;
      margin-bottom: 20px;
    }

    .admin-form-submit-btn-link {
      display: inline-block;
      width: auto;
      padding: 10px 20px;
      text-decoration: none;
      color: white;
    }

    .admin-search-form-wrapper {
      margin-bottom: 20px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
    }

    .admin-search-form {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .admin-search-input {
      flex: 1;
      padding: 10px 15px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      font-size: 14px;
    }

    .admin-search-button {
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .admin-reset-button {
      padding: 10px 20px;
      background: #6c757d;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
    }

    .admin-reset-button:hover {
      background: #5a6268;
    }

    .admin-search-keyword {
      color: #6c757d;
      font-size: 14px;
    }

    .admin-action-btn-edit {
      padding: 6px 12px;
      background: #28a745;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      margin-right: 5px;
      font-size: 12px;
    }

    .admin-action-btn-edit:hover {
      background: #218838;
    }

    .admin-action-btn-delete {
      padding: 6px 12px;
      background: #dc3545;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
    }

    .admin-action-btn-delete:hover {
      background: #c82333;
    }

    .admin-table-th-center {
      text-align: center;
    }

    .admin-table-td-center {
      text-align: center;
    }

    .admin-form-hidden {
      display: none;
    }

    .admin-detail-content-text {
      white-space: pre-wrap;
      word-wrap: break-word;
      min-height: 100px;
    }

    .admin-detail-file-link {
      color: #007bff;
      text-decoration: underline;
    }

    .admin-detail-file-link:hover {
      color: #0056b3;
    }

    .admin-category-register-box {
      background: white;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      border: 1px solid #dee2e6;
    }

    .admin-category-register-title {
      margin-bottom: 20px;
      color: #495057;
      font-size: 18px;
    }

    .admin-category-register-form {
      display: flex;
      gap: 15px;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    .admin-category-register-field {
      flex: 1;
      min-width: 200px;
    }

    .admin-category-register-label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #495057;
    }

    .admin-category-register-input {
      width: 100%;
      padding: 10px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      font-size: 14px;
    }

    .admin-category-color-picker-wrapper {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .admin-category-color-picker {
      width: 60px;
      height: 40px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      cursor: pointer;
    }

    .admin-category-color-code {
      flex: 1;
      padding: 10px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      font-size: 14px;
      background: #f8f9fa;
      color: #212529;
      font-weight: 600;
    }

    .admin-category-register-btn {
      padding: 10px 30px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      height: 40px;
    }

    .admin-category-register-btn:hover {
      background: #0056b3;
    }

    .admin-category-color-preview {
      width: 40px;
      height: 40px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
    }

    /* ============================================
       Semina Apply Page Styles
       ============================================ */
    .semina-apply-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .semina-apply-content {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 40px;
    }

    .apply-main {
      flex: 1;
    }

    .apply-title {
      font-size: 32px;
      font-weight: 600;
      color: #292923;
      line-height: 1.4;
      margin-bottom: 30px;
    }

    .apply-form-section {
      background: #f8f9fa;
      padding: 30px;
      border-radius: 8px;
      margin-bottom: 30px;
    }

    .form-section-title {
      font-size: 20px;
      font-weight: 600;
      color: #292923;
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

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

    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
      box-sizing: border-box;
    }

    .form-group input:read-only {
      background: #e9ecef;
      cursor: not-allowed;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }

    .ticket-box {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ticket-label {
      font-size: 16px;
      font-weight: 600;
      color: #292923;
    }

    .ticket-quantity {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .quantity-btn {
      width: 30px;
      height: 30px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .quantity-input {
      width: 50px;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
    }

    .ticket-price {
      font-size: 18px;
      font-weight: 600;
      color: #0084ff;
    }

    .survey-section {
      margin-top: 30px;
    }

    .survey-question {
      margin-bottom: 25px;
    }

    .survey-question-title {
      font-size: 16px;
      font-weight: 600;
      color: #292923;
      margin-bottom: 15px;
    }

    .survey-option {
      margin-bottom: 10px;
    }

    .survey-option input[type="checkbox"],
    .survey-option input[type="radio"] {
      width: auto;
      margin-right: 8px;
    }

    .survey-option label {
      font-weight: normal;
      cursor: pointer;
    }

    .privacy-section {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      margin-top: 30px;
      max-height: 200px;
      overflow-y: auto;
      font-size: 14px;
      line-height: 1.6;
      color: #6c757d;
    }

    .agree-checkbox {
      margin-top: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .agree-checkbox input[type="checkbox"] {
      width: auto;
    }

    .apply-sidebar {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .sidebar-box {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
    }

    .sidebar-title {
      font-size: 18px;
      font-weight: 600;
      color: #292923;
      margin-bottom: 15px;
    }

    .sidebar-price {
      font-size: 32px;
      font-weight: 600;
      color: #292923;
      margin-bottom: 20px;
    }

    .cancel-info {
      font-size: 14px;
      color: #6c757d;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .required-agreements {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .required-agreement {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 14px;
      color: #292923;
    }

    .required-agreement input[type="checkbox"] {
      width: auto;
      margin-top: 2px;
    }

    .required-agreement label {
      cursor: pointer;
      line-height: 1.5;
    }

    .required-badge {
      color: #ff518e;
      font-weight: 600;
    }

    .apply-submit-btn {
      width: 100%;
      background: #292923;
      color: #fafafa;
      border: none;
      padding: 15px;
      font-size: 18px;
      font-weight: 600;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .apply-submit-btn:hover {
      background: #1a1a1a;
    }

    .apply-submit-btn:disabled {
      background: #6c757d;
      cursor: not-allowed;
    }

    .hidden-checkbox {
      display: none;
    }

    @media (max-width: 1024px) {
      .semina-apply-content {
        grid-template-columns: 1fr;
      }

      .apply-sidebar {
        order: -1;
      }

      .form-row {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================
       Mypage Likes/Recent/Seminars Page Styles
       ============================================ */
    .likes-container,
    .recent-container,
    .seminars-container {
      min-height: calc(100vh - 500px);
      background: var(--light-active, #f4f4f4);
      padding-bottom: 100px;
    }

    .likes-header,
    .recent-header,
    .seminars-header {
      background: var(--bsk-black, #292923);
      padding: 15px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1542px;
      margin: 0 auto;
    }

    .likes-user-info,
    .recent-user-info,
    .seminars-user-info {
      color: var(--bsk-gray, #dddddd);
      font-family: "PretendardVariable-Medium", sans-serif;
      font-size: 16px;
      font-weight: 500;
    }

    .likes-user-info a,
    .recent-user-info a,
    .seminars-user-info a {
      color: var(--bsk-gray, #dddddd);
      text-decoration: none;
      margin-left: 10px;
    }

    .likes-user-info a:hover,
    .recent-user-info a:hover,
    .seminars-user-info a:hover {
      text-decoration: underline;
    }

	/* 탭 영역 */
    .likes-tabs,
    .recent-tabs,
    .seminars-tabs {
      background: var(--bsk-gray);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      max-width: 1540px;
      margin: 0 auto;
      gap: 0;
    }

    .likes-tab-item,
    .recent-tab-item,
    .seminars-tab-item {
      padding: 15px 30px;
      width: 33.34%;
      background: var(--bsk-gray, #dddddd);
      color: var(--bsk-black, #292923);
      border: none;
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      font-weight: var(--h3-font-weight, 600);
      cursor: pointer;
      transition: background 0.3s;
      border-right: 1px solid var(--light-active, #f4f4f4);
    }

    .likes-tab-item:last-child,
    .recent-tab-item:last-child,
    .seminars-tab-item:last-child {
      border-right: none;
    }

    .likes-tab-item.active,
    .recent-tab-item.active,
    .seminars-tab-item.active {
      background: var(--bsk-black);
      color: var(--bsk-gray);
    }

 /* 메인 콘텐츠 */
    .likes-main-content,
    .recent-main-content,
    .seminars-main-content {
      max-width: 1542px;
      margin: 0 auto;
      padding: 50px 20px 0;
    }

    .likes-section,
    .recent-section {
      margin-bottom: 80px;
    }

    .seminars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 30px;
    }

    .video-thumbnail-wrapper,
    .seminar-thumbnail-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      overflow: hidden;
    }

    .video-thumbnail,
    .seminar-thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-tags,
    .seminar-tags {
      display: flex;
      flex-direction: row;
      gap: 8px;
      margin-bottom: 10px;
    }

    .video-title,
    .seminar-title {
      color: var(--bsk-black, #292923);
      font-family: var(--h3-font-family, "PretendardVariable-SemiBold", sans-serif);
      font-size: var(--h3-font-size, 23px);
      line-height: var(--h3-line-height, 130%);
      font-weight: var(--h3-font-weight, 600);
    }

    .seminar-grid-wrapper {
      position: relative;
    }

    .seminar-nav-arrows {
      position: absolute;
      right: -60px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: row;
      gap: 10px;
    }

    .mypage-empty-message {
      padding: 40px;
      text-align: center;
      color: #999;
    }

    .logout-form-hidden {
      display: none;
    }

    @media (max-width: 1024px) {
      .video-grid,
      .seminar-grid,
      .seminars-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .seminar-nav-arrows {
        position: static;
        transform: none;
        margin-top: 20px;
        justify-content: center;
      }
    }
    
    /* 메인 */
    @media (max-width: 768px) {
    	.featured-section,
    	.articles-section,
    	.main-seminar-section {
    		padding: 0 10px;
    	}
    	
    	/* 섹션 타이틀 크기 줄이기 */
    	.section-title {
    		font-size: 24px;
    	}
    	
    	/* 작가명 배지 크기 줄이기 */
    	.article-badge .name {
    		width: 60px;
    		padding: 6px 8px;
    		font-size: 12px;
    	}
    	
    	.article-badge .category {
    		padding: 6px 8px;
    		font-size: 12px;
    	}
    	
    	.article-badge .category::after {
    		right: -8px;
    		width: 8px;
    	}
    	
    	/* 이달의 특집기사 섹션 - 날짜를 작가 배지 오른쪽에 배치 */
    	.featured-section .article-meta {
    		flex-direction: row;
    		align-items: center;
    		gap: 10px;
    		min-width: auto;
    	}
    	
    	.featured-section .article-date {
    		font-size: 14px;
    		margin-left: auto;
    	}
    	
    	/* featured-card 모바일에서 숨기기 */
    	.featured-card {
    		display: none;
    	}
    	
    	/* 섹션 헤더의 더보기 버튼 모바일에서 숨기기 */
    	.section-header .more-btn {
    		display: none;
    	}
    	
    	/* 섹션 푸터 스타일 */
    	.section-footer {
    		display: flex;
    		justify-content: flex-start;
    		margin-top: 20px;
    	}
    	
    	/* 이달의 특집기사 섹션 더보기 버튼 중앙 정렬 */
    	.featured-section .section-footer {
    		justify-content: center;
    	}
    	
    	/* 슬라이더 화살표 버튼 모바일에서 숨기기 */
    	.articles-section .section-nav,
    	.video-section .section-nav {
    		display: none;
    	}
    	
    	/* 슬라이더 뷰포트 모바일에서 세로 배치 */
    	.articles-section .slider-viewport,
    	.video-section .slider-viewport {
    		overflow: visible;
    	}
    	
    	.articles-section .slider-track,
    	.video-section .slider-track {
    		display: flex;
    		flex-direction: column;
    		flex-wrap: wrap;
    		gap: 16px;
    	}
    	
    	.articles-section .special-article-card,
    	.articles-section .article-card,
    	.video-section .video-card {
    		width: 100%;
    		flex-shrink: 0;
    	}
    	
    	/* 모바일에서 카드 4개까지만 표시 */
    	.articles-section .special-article-card:nth-child(n+5),
    	.articles-section .article-card:nth-child(n+5),
    	.video-section .video-card:nth-child(n+5) {
    		display: none;
    	}
    	
    	/* articles-section, video-section 더보기 버튼 중앙 정렬 */
    	.articles-section .section-footer,
    	.video-section .section-footer {
    		justify-content: center;
    	}
    	
    	.mobile-more-btn {
    		display: inline-block;
    	}
    	
    	/* footer-top-section 모바일 스타일 */
    	.footer-top-section {
    		padding: 0 10px !important;
    	}
    	
    	.footer-customer-btn {
    		font-size: 16px;
    		padding: 10px 15px;
    	}
    	
    	.footer-b2b-btn {
    		font-size: 16px;
    		padding: 10px 15px;
    		min-height: 44px;
    	}
    	
    	.footer-b2b-logo {
    		font-size: 16px;
    		padding: 0 15px;
    	}
    	
    	.footer-arrow-icon {
    		width: 16px;
    		height: 16px;
    	}
    }

    @media (max-width: 768px) {
      .likes-header,
      .recent-header,
      .seminars-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
      }

      .likes-tab-item,
      .recent-tab-item {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--light-active, #f4f4f4);
      }

      .article-item {
        flex-direction: column;
        align-items: flex-start;
      }

      .article-thumbnail {
        width: 100%;
        height: 200px;
      }

      .video-grid,
      .seminar-grid,
      .seminars-grid {
        grid-template-columns: 1fr;
      }
    }

    .form-required {
      color: #dc3545;
    }

    .admin-detail-title-value {
      font-size: 20px;
      font-weight: 600;
      color: #333;
    }

    .admin-detail-empty-text {
      color: #6c757d;
    }

    .admin-detail-container-relative {
      position: relative;
    }

    .admin-special-btn-wrapper {
      position: absolute;
      top: 0;
      right: 0;
    }

    .admin-special-form {
      display: inline-block;
    }

    .admin-special-toggle-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
    }

    .thumbnail-upload-hint {
      margin: 0;
      color: #6c757d;
    }

    .thumbnail-upload-size {
      margin: 10px 0 0 0;
      color: #adb5bd;
      font-size: 14px;
    }

    .thumbnail-preview-img {
      display: block;
      max-width: 100%;
      max-height: 400px;
      margin-top: 20px;
      border-radius: 8px;
    }

    .video-url-label {
      margin-top: 20px;
    }

    .admin-survey-question-box {
      margin-bottom: 30px;
      padding: 0;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e5e5e5;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }

    .admin-survey-question-title {
      font-weight: 600;
      margin: 0;
      padding: 18px 20px;
      color: #ffffff;
      background: linear-gradient(135deg, #0084ff 0%, #0073e6 100%);
      font-size: 16px;
      line-height: 1.5;
      border-bottom: 2px solid #0066cc;
    }

    .admin-survey-answers-wrapper {
      margin: 0;
      padding: 15px 20px;
      background: #f8f9fa;
    }

    .admin-survey-answer-item {
      padding: 12px 16px;
      margin-bottom: 8px;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #e5e5e5;
      color: #495057;
      font-size: 14px;
      line-height: 1.6;
      transition: all 0.2s;
    }

    .admin-survey-answer-item:last-child {
      margin-bottom: 0;
    }

    .admin-survey-answer-item:hover {
      border-color: #0084ff;
      background: #f0f7ff;
      box-shadow: 0 1px 3px rgba(0, 132, 255, 0.1);
    }

    .admin-detail-info-item {
      margin-bottom: 8px;
    }

    .admin-btn-edit {
      background: #007bff;
      margin-left: 10px;
    }

    .admin-btn-edit:hover {
      background: #0056b3;
    }

    .admin-form-inline {
      display: inline-block;
      margin-left: 10px;
    }

    .admin-table-th-fixed-width {
      width: 80px;
    }
    
    
    .gray{
    	background: var(--bsk-gray) !important;
    	color: var(--bsk-black) !important;
    }