body {margin:0; letter-spacing:-0.5px; overflow-x:hidden;}
/* 위 default.css 의 html 규칙과 같은 이유 - sticky 를 살리려면 clip 이어야 한다. */
@supports (overflow: clip) { body {overflow-x:clip;} }

header{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;right:0;z-index:1000;height:9rem;padding:0 max(1rem, calc((100vw - 2100px) / 2));background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform 0.3s ease, box-shadow 0.3s ease;}
#container .main-cont{padding-left:max(0px, calc((100vw - 2100px) / 2));padding-right:max(0px, calc((100vw - 2100px) / 2));box-sizing:border-box;}
#container .main06,
#container .template-showcase{padding-left:0;padding-right:0;}
header.header-hidden{transform:translateY(-100%);}
header.header-scrolled{box-shadow:0 2px 20px rgba(0,0,0,0.08);}
.logo {position:absolute; left:max(3rem, calc((100vw - 2100px) / 2 + 3rem)); height:3rem;}
.logo img {height:100%;}
nav {display:flex;gap:50px}
header nav {gap:32px;}
header nav a {font-size:15px; font-weight:500; color:#3f3f46; letter-spacing:-0.01em; transition:color .2s ease;}
header nav a:hover {color:#0f0e0e;}
header .actions {position:absolute; right:max(3rem, calc((100vw - 2100px) / 2 + 3rem)); display:flex; align-items:center; gap:35px;}

.lang{position:relative}
.lang button {border:none; color:#3f3f46; cursor:pointer; font-size:15px; font-weight:500;}
.lang button:focus{outline:none;}
.lang button img {margin-left:1.5rem;}
.lang-options{display:none;position:absolute;top:40px;left:0;background:#444;border-radius:6px;overflow:hidden;min-width:60px;box-shadow:0 6px 18px rgba(0,0,0,.25);}
.lang-options.show{display:block}
.lang-options a{display:block;padding:8px 10px;color:#fff;text-decoration:none}
.lang-options a:hover{background:#555}

.trial-btn{background:#3b82f6; border:1px solid #3b82f6; color:#fff;padding:7px 12px;border-radius:10px;cursor:pointer; width:17rem; transition:0.3s;}
.trial-btn:hover {color:#3b82f6; background:#fff;}

.burger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:6px;}
.burger div{width:22px;height:2px;background:#424242}


/* ----����---- */

/* ���� */
.main-cont {padding:12rem 0;}
.flex-wrap {display:flex;}
.main-wrap {padding:0 9rem; max-width:190rem; margin:0 auto;}
.eng {font-family:'Montserrat', 'Noto Sans KR', dotum, sans-serif;}
.con-dot {display:inline-block; width:1.25rem; height:1.25rem; background:#3b82f6; border-radius:50px;}
.main-title {text-align:center;}
.main-title h2 {font-size:7rem; font-weight:bold; color:#0f0e0e; margin-bottom:4rem; word-break:keep-all;}
.main-title p {font-size:2.4rem; font-weight:500; color:#979797; text-align:center;}



/* main01 */
.main01 {overflow:hidden; padding:9rem 0 0; position:relative; min-height:100vh; min-height:100dvh; box-sizing:border-box;}
.main01.flex-wrap {display:flex; align-items:center; justify-content:flex-start; min-height:100vh; min-height:100dvh;}
.main01 .visual-txt {width:60%; flex-direction:column; padding-left:5rem; position:relative; z-index:2; letter-spacing: -5%;}
.main01 .typing {font-size:11rem; color:#0f0e0e; font-weight:bold; line-height:1.3; min-height:30rem; white-space:nowrap;}
.main01 .typing .highlight {color:#fff; text-shadow: -1px 0 #0f0e0e, 0 1px #0f0e0e, 1px 0 #0f0e0e, 0 -1px #0f0e0e;}
.main01 .typing .dot {display:inline-block; width:2.5rem; height:2.5rem; border-radius:50%; background:#3b82f6; margin:0 0 -1rem 1rem; animation:dotBlink 1.2s ease-in-out infinite;}
.main01 .visual-txt .btn01 {font-size:2rem; padding:0.8rem 2rem; letter-spacing:1px; line-height:1; margin-top:5rem;}
.main01 .main-visual {position:absolute; right:-5%; top:50%; transform:translateY(-50%); width:55%; max-width:95rem; box-shadow:-20px 0 60px rgba(0, 0, 0, 0.08); border-radius:2rem 0 0 2rem; overflow:hidden; opacity:0; transition:transform .8s cubic-bezier(.2,.7,0,.99), opacity .8s ease;}
.main01 .main-visual.enter {opacity:1; transform:translateY(-50%) translateX(0);}
.main01 .main-visual img {display:block; width:100%; height:auto; object-fit:cover;}
.main01 .scroll {margin-top: 5rem; display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease;}
.main01 .scroll span {font-size:1.6rem; font-weight:bold; color:#0f0e0e; vertical-align:baseline;}
.main01 .scroll.show {opacity:1; transform:none;}
.main01 .scroll.show img {width:2rem; display:block; will-change:transform, opacity; animation:scrollHint 1.6s cubic-bezier(.45,.05,.2,.95) infinite;}

.main01 .btn.btn01{opacity:0; transform:translateY(8px) scale(.98); transition:opacity .45s ease, transform .45s ease; pointer-events:none;}
.main01 .btn.btn01.show{opacity:1; transform:none; pointer-events:auto;}


@keyframes scrollHint{
  0%   { transform:translateY(-3px); opacity:.9; }
  60%  { transform:translateY(10px); opacity:1; }
  100% { transform:translateY(-3px); opacity:.9; }
}

@keyframes dotBlink{
  0%,100%{opacity:.35; transform:translateY(0)}
  50%{opacity:1; transform:translateY(-2px)}
}



/* main02 - AI Demo Section */
.ai-demo-section {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1e3a8a 100%);
  padding: 8rem 0 10rem;
  overflow: hidden;
  min-height: 90rem;
}

.ai-demo-header {
  text-align: center;
  max-width: 80rem;
  margin: 0 auto 5rem;
  padding: 0 2rem;
}

.ai-demo-header h2 {
  font-size: 5rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2rem;
  line-height: 1.3;
}

.ai-demo-header p {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  text-align: center;
}

.ai-demo-container {
  display: flex;
  max-width: 140rem;
  margin: 0 auto;
  padding: 0 4rem;
  gap: 3rem;
  height: 55rem;
}

/* 채팅 패널 (40%) */
.ai-chat-panel {
  width: 40%;
  background: #1e3a5f;
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 2rem 2.5rem;
  background: #234874;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

.ai-avatar {
  width: 4.5rem;
  height: 4.5rem;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-avatar span {
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
}

.ai-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ai-name {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
}

.ai-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #94a3b8;
  font-size: 1.3rem;
}

.status-dot {
  width: 0.8rem;
  height: 0.8rem;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.chat-messages {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 메시지 스타일 */
.chat-message {
  max-width: 85%;
  padding: 1.4rem 1.8rem;
  border-radius: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
  animation: messageIn 0.4s ease forwards;
}

@keyframes messageIn {
  to { opacity: 1; transform: translateY(0); }
}

.chat-message.ai {
  align-self: flex-start;
  background: #234874;
  color: #fff;
  border-bottom-left-radius: 0.4rem;
}

.chat-message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  border-bottom-right-radius: 0.4rem;
}

/* 타이핑 인디케이터 */
.typing-indicator {
  display: flex;
  gap: 0.5rem;
  padding: 1.4rem 1.8rem;
  background: #234874;
  border-radius: 1.6rem;
  border-bottom-left-radius: 0.4rem;
  align-self: flex-start;
  opacity: 0;
  animation: messageIn 0.4s ease forwards;
}

.typing-indicator span {
  width: 0.8rem;
  height: 0.8rem;
  background: #94a3b8;
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.1s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.2s; }

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}

.chat-input-area {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: #152d4a;
  border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.chat-input-area input {
  flex: 1;
  background: #1e3a5f;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 1rem;
  padding: 1.2rem 1.5rem;
  color: #94a3b8;
  font-size: 1.5rem;
  outline: none;
}

.send-btn {
  width: 4.5rem;
  height: 4.5rem;
  background: #3b82f6;
  border: none;
  border-radius: 1rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

/* 웹 프리뷰 패널 (60%) */
.web-preview-panel {
  width: 60%;
}

.browser-frame {
  background: #1e3a5f;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.browser-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.2rem 1.8rem;
  background: #234874;
}

.browser-buttons {
  display: flex;
  gap: 0.8rem;
}

.browser-buttons span {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
}

.btn-red { background: #ef4444; }
.btn-yellow { background: #eab308; }
.btn-green { background: #22c55e; }

.browser-url {
  flex: 1;
  background: #1e3a5f;
  border-radius: 0.6rem;
  padding: 0.6rem 1.2rem;
  text-align: center;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.browser-url span {
  color: #94a3b8;
  font-size: 1.3rem;
}

.browser-content {
  flex: 1;
  background: #152d4a;
  overflow: hidden;
}

.preview-wrapper {
  position: relative;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

.preview-wrapper.zoom-title {
  transform: scale(1.2);
  transform-origin: 10% 35%;
}

.preview-wrapper.zoom-button {
  transform: scale(1.2);
  transform-origin: 10% 60%;
}

/* 스캔 오버레이 */
.scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

.scan-overlay.active {
  opacity: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.15) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: scan 1.5s ease-in-out;
}

@keyframes scan {
  0% { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}

/* 프리뷰 사이트 */
.preview-site {
  background: linear-gradient(135deg, #fefefe 0%, #f1f5f9 100%);
  height: 100%;
  padding: 1.2rem 1.5rem;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* 샐러드 가게 테마 */
.preview-site.salad-shop {
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
  padding: 1.5rem 2.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease, transform .8s ease;
}
.preview-site.salad-shop.visible {
  opacity: 1;
  transform: translateY(0);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.preview-logo {
  font-size: 1.6rem;
  font-weight: bold;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon {
  color: #3b82f6;
  font-size: 1.4rem;
}

.preview-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.preview-nav span {
  font-size: 1.2rem;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s ease;
}

.preview-nav span:hover {
  color: #3b82f6;
}

.preview-nav .nav-cta {
  background: #3b82f6;
  color: #fff;
  padding: 0.5rem 1.2rem;
  border-radius: 2rem;
  font-size: 1.1rem;
  line-height: 1;
}

/* 히어로 섹션 - 랜딩페이지 스타일 */
.preview-hero-section {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  height: calc(100% - 4rem);
}

.hero-content {
  flex: 1;
  text-align: left;
}

.hero-visual {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 0.9rem;
  padding: 0.3rem 1rem;
  border-radius: 2rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
}

/* 샐러드 가게 테마 배지 */
.salad-shop .hero-badge {
  background: #16a34a;
  color: #fff;
}

.salad-shop .preview-nav .nav-cta {
  background: #16a34a;
  color: #fff;
}

.salad-shop .logo-icon {
  color: #16a34a;
}

/* 하단 카운트다운 */
.countdown-bottom {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.countdown-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(107, 83, 68, 0.95);
  padding: 0.6rem 1.2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(107, 83, 68, 0.3);
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
}

.countdown-num {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
}

.countdown-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  margin-top: 0.2rem;
}

.countdown-colon {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.preview-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 0.6rem;
  transition: font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: inline-block;
  line-height: 1.2;
}

.preview-title.highlight {
  outline: 3px solid #3b82f6;
  outline-offset: 8px;
  border-radius: 4px;
}

.preview-title.grow {
  font-size: 2.4rem;
}

.preview-subtitle {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.hero-buttons {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.preview-cta {
  padding: 0.7rem 1.8rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 0.6rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  position: relative;
}

/* 샐러드 가게 CTA 버튼 */
.salad-shop .preview-cta {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);
  border-radius: 2rem;
  line-height: 1;
}

.salad-shop .preview-cta-secondary {
  border-color: #16a34a;
  color: #15803d;
  border-radius: 2rem;
  line-height: 1;
}

.preview-cta-secondary {
  padding: 0.7rem 1.5rem;
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 0.6rem;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-cta-secondary .play-icon {
  font-size: 0.8rem;
  color: #10b981;
}

.preview-cta-secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* 통계 영역 */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e5e7eb;
}

.stat-item {
  text-align: center;
}

.stat-item strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #1f2937;
}

.stat-item span {
  font-size: 0.9rem;
  color: #9ca3af;
}

.stat-divider {
  width: 1px;
  height: 2.5rem;
  background: #e5e7eb;
}

/* 히어로 비주얼 영역 */
.hero-image-placeholder {
  width: 90%;
  height: 70%;
  background: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 100%);
  border-radius: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.placeholder-content {
  text-align: center;
}

.placeholder-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.5rem;
}

.placeholder-text {
  font-size: 1rem;
  color: #6b7280;
  font-weight: 500;
}

/* 아치형 이미지 프레임 */
.arch-image-frame {
  width: 85%;
  height: 85%;
  position: relative;
  border-radius: 50% 50% 4% 4% / 45% 45% 4% 4%;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(166, 124, 82, 0.2);
  border: 4px solid #fff;
}

.arch-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 정보 태그 */
.hero-info-tags {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

.info-tag {
  background: #fff;
  border: 1px solid #e8d5c4;
  color: #8b7355;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-size: 0.95rem;
  font-weight: 500;
}

/* 메뉴 섹션 */
.preview-menu-section {
  padding: 1.2rem 0 0;
  text-align: center;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .6s ease, transform .6s ease;
}
.preview-menu-section.slide-in {
  opacity: 1;
  transform: translateY(0);
}
.menu-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #15803d;
  margin-bottom: .8rem;
  letter-spacing: .1em;
}
.menu-grid {
  display: flex;
  gap: .6rem;
  justify-content: center;
}
.menu-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .8rem;
  padding: .7rem .5rem;
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.menu-emoji {
  font-size: 1.5rem;
}
.menu-name {
  font-size: .7rem;
  font-weight: 700;
  color: #1f2937;
}
.menu-price {
  font-size: .65rem;
  color: #16a34a;
  font-weight: 600;
}

/* 출시 완료 오버레이 */
.publish-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  border-radius: 0 0 1.5rem 1.5rem;
}
.publish-overlay.active {
  opacity: 1;
}
.publish-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.publish-icon {
  font-size: 3rem;
  animation: publishBounce 0.6s ease;
}
.publish-text {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
}
.publish-url {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.15);
  padding: .3rem 1.2rem;
  border-radius: 50px;
}
@keyframes publishBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 플로팅 카드 (미사용) */
.floating-card {
  background: #fff;
  padding: 0.6rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 8px 25px rgba(166, 124, 82, 0.2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #f5ebe0;
}


/* 플로팅 카드 */
.floating-card {
  position: absolute;
  background: #fff;
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  animation: floatCard 3s ease-in-out infinite;
}

.floating-card .card-icon {
  font-size: 1.4rem;
}

.floating-card .card-text {
  display: flex;
  flex-direction: column;
}

.floating-card .card-text strong {
  font-size: 1rem;
  color: #1f2937;
  font-weight: 600;
}

.floating-card .card-text span {
  font-size: 0.85rem;
  color: #9ca3af;
}

.card-1 {
  top: 15%;
  right: -5%;
  animation-delay: 0s;
}

.card-2 {
  bottom: 20%;
  left: -5%;
  animation-delay: -1.5s;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.preview-cta.highlight {
  outline: 3px solid #3b82f6;
  outline-offset: 6px;
  border-radius: 0.8rem;
}

.preview-cta.orange {
  background: linear-gradient(135deg, #e07a5f, #d56a4a);
  box-shadow: 0 4px 14px rgba(224, 122, 95, 0.5);
}

/* 하이라이트 링 */
.highlight-ring {
  position: absolute;
  pointer-events: none;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.highlight-ring.active {
  opacity: 1;
}

/* 스파클 이펙트 */
.sparkle-effect {
  position: absolute;
  font-size: 3rem;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
}

.sparkle-effect.active {
  animation: sparkle 0.8s ease forwards;
}

@keyframes sparkle {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* 반응형 */
@media (max-width: 1024px) {
  .ai-demo-section {
    min-height: auto;
    padding: 6rem 0 8rem;
  }

  .ai-demo-header {
    margin-bottom: 4rem;
  }

  .ai-demo-header h2 {
    font-size: 3.5rem;
  }

  .ai-demo-header p {
    font-size: 1.6rem;
  }

  .ai-demo-container {
    flex-direction: column;
    height: auto;
  }

  .ai-chat-panel,
  .web-preview-panel {
    width: 100%;
  }

  .ai-chat-panel {
    height: 35rem;
  }

  .web-preview-panel {
    max-height: 50rem;
  }

  .browser-frame {
    max-height: 50rem;
  }

  .browser-content {
    min-height: 30rem;
    max-height: 42rem;
    overflow: hidden;
  }

  /* 프리뷰 사이트 반응형 */
  .preview-hero-section {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-content {
    text-align: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-visual {
    height: 20rem;
  }

  .floating-card {
    display: none;
  }

  .preview-nav .nav-cta {
    display: none;
  }

  .hero-info-tags {
    justify-content: center;
  }

  .arch-image-frame {
    width: 70%;
    height: 70%;
  }
}



/* main03 */
.main03 {background:url(../img/main/bg-section03.webp); background-size:cover;}
.main03 h1 {font-size:11rem; line-height:1; font-weight:bold; color:#0f0e0e; text-transform: uppercase;}
.main03 .txt {margin-top:11rem; text-align:right;}
.main03 .txt h3 {font-size:5rem; font-weight:bold; color:#0f0e0e; margin-bottom:4rem;}
.main03 .txt p {font-size:2.4rem; font-weight:500; color:#626262; text-align:right;}



/* ===== Main Process Section (인포그래픽) ===== */
.main-process-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 12rem 2rem 10rem;
  text-align: center;
}
.process-header {
  max-width: 80rem;
  margin: 0 auto 6rem;
}
#en .process-header {
  max-width: 110rem;
}
.process-header h2 {
  font-size: 5rem;
  font-weight: 800;
  color: #0f0e0e;
  line-height: 1.3;
  margin-bottom: 2rem;
  word-break: keep-all;
}
.process-header h2 span {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.process-header p {
  font-size: 2rem;
  color: #64748b;
  line-height: 1.7;
  text-align: center;
  word-break: keep-all;
}
.process-image {
  max-width: 100rem;
  margin: 0 auto;
}
.process-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .main-process-section { padding: 9rem 2rem 7rem; }
  .process-header h2 { font-size: 36px; }
  .process-header p { font-size: 17px; }
  .process-header { margin-bottom: 4rem; }
}
@media (max-width: 768px) {
  #container .main-process-section { padding: 7rem 2.4rem 5rem; }
  .process-header h2 { font-size: 28px; margin-bottom: 1.4rem; }
  .process-header p { font-size: 15px; }
  .process-header { margin-bottom: 3rem; }
}
@media (max-width: 480px) {
  .process-header h2 { font-size: 24px; }
  .process-header p { font-size: 14px; }
}

/* ===== main02 - Step Demo Section ===== */
.step-demo-section {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1e3a8a 100%);
  padding: 8rem 0 10rem;
  overflow: hidden;
}
.step-demo-header {
  text-align: center;
  max-width: 80rem;
  margin: 0 auto 4rem;
}
.step-demo-header h2 {
  font-size: 5rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2rem;
}
.step-demo-header p {
  font-size: 2rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  text-align: center;
  word-break: keep-all;
}

/* 스텝 인디케이터 */
.step-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 4rem;
}
.step-ind {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  padding: 8px 20px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all .3s ease;
  font-size: 14px;
  font-weight: 600;
}
.step-ind.active {
  background: #fff;
  border-color: #fff;
  color: #1e40af;
}
.step-ind .step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.step-ind.active .step-num {
  background: #3b82f6;
  color: #fff;
}
.step-line {
  width: 40px;
  height: 2px;
  background: rgba(255,255,255,0.2);
}

/* 스튜디오 프레임 */
.studio-frame {
  max-width: 110rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}
.studio-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e8ed;
}
.studio-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.studio-badge {
  font-size: 11px;
  font-weight: 700;
  color: #3b82f6;
  background: #eff6ff;
  padding: 3px 10px;
  border-radius: 50px;
}
.studio-tabs {
  display: flex;
  gap: 4px;
}
.studio-tab {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  padding: 6px 16px;
  border-radius: 8px;
  cursor: default;
  transition: all .2s;
}
.studio-tab.active {
  background: #eff6ff;
  color: #3b82f6;
}
.studio-actions {
  display: flex;
  gap: 8px;
}
.studio-btn-outline {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  padding: 6px 16px;
  border: 1px solid #e5e8ed;
  border-radius: 8px;
  transition: all .2s;
}
.studio-btn-outline.highlight {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

/* 스튜디오 바디 */
.studio-body {
  position: relative;
  min-height: 480px;
}

/* 스텝 패널 */
.step-panel {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 38% 62%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.step-panel.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* 왼쪽 - 채팅 */
.sp-left {
  background: #fff;
  border-right: 1px solid #f0f2f5;
  padding: 24px;
  overflow-y: auto;
  max-height: 480px;
}
.sp-chat-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sp-ai-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.sp-bubble {
  background: #f1f5f9;
  padding: 12px 16px;
  border-radius: 4px 16px 16px 16px;
  font-size: 14px;
  color: #334155;
  line-height: 1.6;
  max-width: 85%;
}
.sp-user-msg {
  display: flex;
  justify-content: flex-end;
}
.sp-bubble-user {
  background: #3b82f6;
  color: #fff;
  padding: 12px 16px;
  border-radius: 16px 4px 16px 16px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 85%;
}

/* 오른쪽 - 콘텐츠 */
.sp-right {
  background: #f8fafc;
  padding: 24px;
  overflow-y: auto;
  max-height: 480px;
}

/* 기획서 스타일 */
.sp-doc {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e8ed;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease .5s, transform .8s ease .5s;
}
.step-panel.active .sp-doc {
  opacity: 1;
  transform: translateY(0);
}
.sp-doc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e8ed;
}
.sp-doc-icon { font-size: 18px; }
.sp-doc-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}
.sp-doc-body {
  padding: 20px;
}
.sp-doc-body h4 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 16px 0 8px;
}
.sp-doc-body h4:first-child { margin-top: 0; }
.sp-doc-body p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}
.sp-doc-body ul {
  margin: 0;
  padding-left: 18px;
}
.sp-doc-body li {
  font-size: 13px;
  color: #64748b;
  line-height: 2;
}

/* 사이트 프리뷰 */
.sp-preview {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e8ed;
  overflow: hidden;
  position: relative;
}
.sp-preview-site {
  padding: 0;
  transition: filter .3s;
}
.sp-site-dimmed {
  filter: blur(2px) brightness(0.7);
}
.sp-site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f2f5;
}
.sp-site-logo {
  font-size: 14px;
  font-weight: 800;
  color: #15803d;
}
.sp-site-nav-links {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #64748b;
}
.sp-site-hero {
  display: flex;
  align-items: center;
  padding: 24px 20px;
  gap: 20px;
}
.sp-site-hero-txt {
  flex: 1;
}
.sp-site-badge {
  display: inline-block;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 8px;
}
.sp-site-hero-txt h3 {
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.4;
  margin: 0 0 8px;
}
.sp-site-hero-txt p {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px;
}
.sp-site-cta {
  background: #16a34a;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  cursor: default;
}
.sp-site-hero-img {
  width: 40%;
  border-radius: 12px;
  overflow: hidden;
}
.sp-site-hero-img img {
  width: 100%;
  height: auto;
  display: block;
}
.sp-site-menu {
  padding: 16px 20px 20px;
  border-top: 1px solid #f0f2f5;
}
.sp-site-menu h4 {
  font-size: 13px;
  font-weight: 800;
  color: #15803d;
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: .1em;
}
.sp-menu-cards {
  display: flex;
  gap: 8px;
}
.sp-menu-item {
  flex: 1;
  background: #f0fdf4;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-menu-item span { font-size: 24px; }
.sp-menu-item b { font-size: 12px; color: #1e293b; }
.sp-menu-item em { font-size: 11px; color: #16a34a; font-style: normal; font-weight: 600; }

/* 출시 프리뷰 */
.sp-preview-publish {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

/* 출시 모달 */
/* 출시 모달 오버레이 */
.sp-publish-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.sp-publish-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.sp-publish-modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  text-align: center;
  min-width: 320px;
  transform: scale(0.9);
  transition: transform .3s ease;
}
.sp-publish-overlay.active .sp-publish-modal {
  transform: scale(1);
}
.sp-modal-icon { font-size: 40px; margin-bottom: 8px; }
.sp-publish-modal h3 {
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 20px;
}
.sp-modal-field {
  text-align: left;
  margin-bottom: 20px;
}
.sp-modal-field label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  display: block;
  margin-bottom: 6px;
}
.sp-modal-url {
  background: #f8fafc;
  border: 1px solid #e5e8ed;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #334155;
}
.sp-modal-url b { color: #3b82f6; }
.sp-modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.sp-modal-cancel {
  padding: 10px 24px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: default;
}
.sp-modal-submit {
  padding: 10px 24px;
  background: #3b82f6;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: default;
}

/* 커서 애니메이션 */
.sp-cursor {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  top: 60%;
  right: 50%;
}
#stepPanel2.active .sp-cursor {
  animation: cursorMove 2s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes cursorMove {
  0%   { opacity: 0; top: 60%; right: 50%; }
  10%  { opacity: 1; top: 60%; right: 50%; }
  55%  { opacity: 1; top: -12px; right: 24px; }
  65%  { opacity: 1; top: -12px; right: 24px; transform: scale(0.8); }
  75%  { opacity: 1; top: -12px; right: 24px; transform: scale(1); }
  90%  { opacity: 0; top: -12px; right: 24px; }
  100% { opacity: 0; top: -12px; right: 24px; }
}

/* STEP 1 스켈레톤 → 콘텐츠 전환 */
.sp-doc-skeleton {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity .4s ease;
}
.sp-doc-skeleton.hidden {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e5e8ed 25%, #f1f3f6 50%, #e5e8ed 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.5s ease infinite;
}
.skel-h {
  height: 16px;
  margin-top: 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, #d4d9e1 25%, #e5e8ed 50%, #d4d9e1 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.5s ease infinite;
}
@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.sp-doc-real {
  opacity: 0;
  transition: opacity .5s ease;
}
.sp-doc-real.visible {
  opacity: 1;
}

/* STEP 3 프리뷰 - 기본 따뜻한 톤 (초록 깜빡임 방지) */
#stepPanel2 .sp-preview-site {
  background: linear-gradient(180deg, #fef7ed 0%, #fdf2e6 100%);
}
#stepPanel2 .sp-site-badge { background: #ea580c; }
#stepPanel2 .sp-site-cta { background: #ea580c; }
#stepPanel2 .sp-site-logo { color: #c2410c; }
#stepPanel2 .sp-site-menu h4 { color: #c2410c; }
#stepPanel2 .sp-menu-item { background: #fff7ed; }
#stepPanel2 .sp-menu-item em { color: #ea580c; }

/* STEP 2 따뜻한 톤 전환 - 대각선 채우기 */
.sp-preview-site {
  position: relative;
  z-index: 0;
}
.sp-preview-site::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #fef7ed 0%, #fdf2e6 40%, #fef3e2 100%);
  z-index: -1;
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 1.2s cubic-bezier(.4,0,.2,1);
}
.sp-preview-site.warm::after {
  clip-path: inset(0 0 0 0);
}
.sp-preview-site.warm .sp-site-badge {
  background: #ea580c;
  transition: background .5s ease;
}
.sp-preview-site.warm .sp-site-cta {
  background: #ea580c;
  transition: background .5s ease;
}
.sp-preview-site.warm .sp-site-logo {
  color: #c2410c;
  transition: color .5s ease;
}
.sp-preview-site.warm .sp-site-menu h4 {
  color: #c2410c;
  transition: color .5s ease;
}
.sp-preview-site.warm .sp-menu-item {
  background: #fff7ed;
  transition: background .5s ease;
}
.sp-preview-site.warm .sp-menu-item em {
  color: #ea580c;
  transition: color .5s ease;
}

/* 모달 내 커서 */
.sp-modal-cursor {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  top: 50%;
  left: 50%;
}
.sp-modal-cursor {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
}
.sp-modal-cursor.animate {
  animation: modalCursorMove 1.5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes modalCursorMove {
  0%   { opacity: 0; left: var(--cx-start); top: var(--cy-start); }
  15%  { opacity: 1; left: var(--cx-start); top: var(--cy-start); }
  60%  { opacity: 1; left: var(--cx-end); top: var(--cy-end); }
  70%  { opacity: 1; left: var(--cx-end); top: var(--cy-end); transform: scale(0.8); }
  80%  { opacity: 1; left: var(--cx-end); top: var(--cy-end); transform: scale(1); }
  81%  { opacity: 0; left: var(--cx-end); top: var(--cy-end); }
  100% { opacity: 0; left: var(--cx-end); top: var(--cy-end); }
}

/* 모달 출시 버튼 클릭 하이라이트 */
.sp-modal-submit.clicked {
  background: #2563eb;
  transform: scale(0.95);
  transition: all .15s;
}

/* 출시 완료 */
.sp-publish-done {
  display: none;
  text-align: center;
  padding: 40px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  min-width: 320px;
}
.sp-publish-done.active {
  display: block;
  animation: doneAppear .5s ease forwards;
}
.sp-done-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.sp-publish-done h3 {
  font-size: 24px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 8px;
}
.sp-publish-done p {
  font-size: 16px;
  color: #3b82f6;
  margin: 0;
  background: #eff6ff;
  display: inline-block;
  padding: 6px 20px;
  border-radius: 50px;
  font-weight: 600;
}
@keyframes doneAppear {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* 메시지 등장 애니메이션 */
.sp-animate-msg {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.step-panel.active .sp-animate-msg {
  opacity: 1;
  transform: translateY(0);
}
.step-panel.active .sp-delay-1 { transition-delay: .8s; }
.step-panel.active .sp-delay-2 { transition-delay: 1.6s; }
.step-panel.active .sp-delay-3 { transition-delay: 2.4s; }

/* 스텝 데모 반응형 */
@media (max-width: 1024px) {
  .step-demo-section { padding: 6rem 24px 8rem; }
  .step-demo-header h2 { font-size: 36px; }
  .step-demo-header p { font-size: 16px; }
  .studio-body { min-height: 400px; }
  .step-panel { grid-template-columns: 40% 60%; }
  .sp-left, .sp-right { max-height: 400px; padding: 16px; }
}
@media (max-width: 768px) {
  #container .step-demo-section { padding: 48px 24px 64px; }
  .step-demo-header h2 { font-size: 28px; }
  .step-demo-header p { font-size: 15px; }
  .step-demo-header { margin-bottom: 3rem; }
  .step-indicators { gap: 0; margin-bottom: 2.4rem; }
  .step-ind { padding: 6px 12px; font-size: 12px; }
  .step-ind .step-num { width: 20px; height: 20px; font-size: 11px; }
  .step-line { width: 20px; }
  .step-panel { grid-template-columns: 1fr; }
  .sp-left { max-height: 220px; border-right: none; border-bottom: 1px solid #f0f2f5; }
  .sp-right { max-height: 300px; }
  .studio-body { min-height: auto; }
  .studio-tabs { display: none; }
  .studio-topbar { padding: 10px 16px; }
  .sp-publish-modal { min-width: 260px; padding: 24px; }
}
@media (max-width: 480px) {
  .step-demo-header h2 { font-size: 24px; }
  .step-ind .step-label { display: none; }
  .sp-bubble, .sp-bubble-user { font-size: 13px; }
}

/* main04 */
.main04 {}
.main04 > div {max-width:200rem; margin:0 auto;}
.main04 h2 {font-size:4rem; font-weight:bold; color:#0f0e0e; margin-bottom:7rem;}
.app {margin: 24px auto; overflow: clip; display: grid; grid-template-columns: 440px 1fr; min-height: 540px; gap:90px;}

.app .tablist {padding: 12px; display: grid; align-content: start; padding-left:9rem;}
.app .tab {position:relative; appearance: none; border-bottom:1px solid #ebebeb; padding: 1.5rem 2rem; text-align: left; font-size:1.8rem; font-weight: 600; color:#2d3033; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .06s ease; outline: none; letter-spacing:-0.5px;}
.app .tab:hover { background: #3b82f6; color: #fff; }
.app .tab:active { transform: translateY(1px); }
.app .tab[aria-selected="true"] {background: #3b82f6; color:#fff;}
.app .tab .arrow {width:2.4rem; height:1.8rem; background:url(../img/main/ic-arrow-right.svg); background-size:cover; position:absolute; right:1.5rem; top:0; bottom:0; margin:auto;}

.panels {position: relative; padding: 7rem 0 7rem 9rem; overflow: auto; background:#f7f7f7; border-radius:17rem 0 0 17rem; overflow-x: hidden;}
.panel {display: none; animation: fade .18s ease-out;}
.panel[aria-hidden="false"] { display: block; }

.panel > div {align-items: center;}
.panel .txt {width:30%; margin-right:5%;}
.panel .txt span {font-size:1.8rem; font-weight:300; color:#3b82f6; margin-bottom:2rem; display:block; text-transform: uppercase;}
.panel .txt h3 {font-size:4rem; font-weight:bold; color:#0f0e0e; margin-bottom:3rem; word-break:keep-all;}
.panel .txt p {font-size:2rem; font-weight:500; color:#7f7f7f;}
.panel .img {width:65%; overflow:visible;}
.panel .img img {min-width:100%; max-width:110%; height:auto;}

@keyframes fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }



/* main05 */
.main05 {position:relative; background:url(../img/main/bg-section05.webp) center; background-size:cover; padding:50rem 0 18rem;}
.main05 .txt {text-align:center; position:relative; z-index:3;}
.main05 .txt h2 {font-size:7rem; color:#0f0e0e; font-weight:bold; margin-bottom:7rem;}
.main05 .txt h2 span {color:#3b82f6; display:block;}
.main05 .txt p {font-size:2.4rem; color:#979797; font-weight:500; text-align:center;}

.layer-box {position: absolute; inset: 0; z-index:2; max-width:200rem; margin:0 auto;}
.layer-box .layer {position: absolute; will-change: transform, opacity;}
.layer-box .layer-inner {position: relative; display: inline-block;}
.layer-box .img-wrapper {position: relative; display: inline-block; width: auto; height: auto;}
.layer-box .img-wrapper img {display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.7s ease;}
.layer-box .img-wrapper img.on {opacity: 0; z-index: 2; position: absolute;}
.layer-box .img-wrapper img.off {opacity: 1; z-index: 1;}
.layer-box .layer:hover .img-wrapper img.on {opacity: 1;}
.layer-box .layer:hover .img-wrapper img.off {opacity: 0;}
.layer-box .layer{opacity: 0; transform: translate3d(0,0,0); transition: transform .9s cubic-bezier(.20,.70,0,.99), opacity .6s ease;}
.layer-box .layer.pre{transform: translate3d(var(--fromX,0), var(--fromY,0), 0) scale(.92); opacity: 0;}
.layer-box .layer.in{transform: translate3d(0,0,0) scale(1); opacity: 1;}
.layer-box .layer-inner{will-change: transform; animation: floatY var(--dur, 8s) ease-in-out var(--delay, 0s) infinite alternate;}

.layer01 {top: 12%; left: 5%;  --dur: 6s;  --delay: 0s;}
.layer02 {bottom: 10%; left: 10%; --dur: 10s; --delay: -2s;}
.layer03 {top: 20%; left: 45%; --dur: 12s; --delay: -1s;}
.layer04 {bottom: 11%; right: 10%; --dur: 11s; --delay: -0.5s;}
.layer05 {top: 8%; right: 5%;  --dur: 9s;  --delay: -3s;}

@keyframes floatY {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-6px) scale(1.01); }
  50%  { transform: translateY(-12px) scale(1); }
  75%  { transform: translateY(-6px) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}



/* main06 */
.main06 {text-align:center;}
.main06 .main-wrap p {margin-bottom:7rem;}
.main06 .slide-box {max-width:200rem; margin:0 auto;}
.main06 .slide-box .swiepr-0 {margin-bottom:1rem;}
.main06 .slide-box .swiper-slide {border-radius:3rem; overflow:hidden; margin:0 1rem;}
.main06 .slide-box .swiper-slide .info {position:absolute; top:0; opacity:0; transition:0.3s; background:rgba(0, 0, 0, 0.55); width:100%; height:100%; color:#fff; align-content: center; padding:5%;}
.main06 .slide-box .swiper-slide:hover .info {opacity:1;}
.main06 .slide-box .swiper-slide .info h3 {width:100%; text-align:center; font-size:4rem; font-weight:bold; position:relative; margin-bottom:6rem;}
.main06 .slide-box .swiper-slide .info h3:after {content:''; width:50px; height:1px; background:#fff; position:absolute; left:0; right:0; top:7rem; margin:auto;}
.main06 .slide-box .swiper-slide .info p {width:80%; text-align:center; font-size:1.8rem; font-weight:bold; margin:0 auto;}
.swiper-wrapper{transition-timing-function: linear;}


/* main07 */
.main07 {position:relative;}
.main07:before {content:''; width:50%; height:100%; position:absolute; right:0; top:0; background:#f5f5f5;}
.main07 .main-title {width:36%; margin-bottom:8rem;text-align:left;}
.main07 .main-title p {text-align:left;}

.custom_slide_wrap {width:35%; margin-right:5%;}
.swiper-pagination-custom {display: flex; flex-wrap:wrap; justify-content: flex-start; text-align: center; gap:5%;}
.swiper-pagination-custom > div {width:calc(80% / 5); cursor:pointer;}
.custom_bullet {transition: all .3s; margin-bottom:4rem; }
.custom_bullet:last-child {margin-right: 0;}
.custom_bullet .img {position:relative; width:90%; aspect-ratio: 1 / 1; border-radius:50%; margin:0 auto 1.5rem;; background-color:#e7f0fc; }
.custom_bullet .img:after{content:''; position:absolute; inset: 0; background-position:center; background-repeat:no-repeat; background-size:inherit; filter: brightness(0) invert(0); pointer-events: none;}
.custom_bullet span {font-size:1.6rem; font-weight: 500; color: #3a80f2; word-break:keep-all; transition: all .3s;}
.custom_bullet:hover span{font-weight:bold;}
.custom_bullet:hover .img {background-color:#3a80f2;}
.custom_bullet:hover .img::after {filter: brightness(0) invert(1);}

.swiper-pagination-custom-bullet-active .img {background-color:#3a80f2;}
.swiper-pagination-custom-bullet-active .img::after {filter: brightness(0) invert(1);}
.swiper-pagination-custom-bullet-active span {font-weight:bold;}
.swiper-pagination-custom-bullet-active:hover span {font-weight:bold;}

.custom_bullet:nth-child(1) .img:after {background-image: url(../img/main/ic-admin01.svg);}
.custom_bullet:nth-child(2) .img:after {background-image: url(../img/main/ic-admin02.svg);}
.custom_bullet:nth-child(3) .img:after {background-image: url(../img/main/ic-admin03.svg);}
.custom_bullet:nth-child(4) .img:after {background-image: url(../img/main/ic-admin04.svg);}
.custom_bullet:nth-child(5) .img:after {background-image: url(../img/main/ic-admin05.svg);}
.custom_bullet:nth-child(6) .img:after {background-image: url(../img/main/ic-admin06.svg);}
.custom_bullet:nth-child(7) .img:after {background-image: url(../img/main/ic-admin07.svg);}
.custom_bullet:nth-child(8) .img:after {background-image: url(../img/main/ic-admin08.svg);}
.custom_bullet:nth-child(9) .img:after {background-image: url(../img/main/ic-admin09.svg);}
.custom_bullet:nth-child(10) .img:after {background-image: url(../img/main/ic-admin10.svg);}

.swiper-bottom {width:60%; overflow:hidden; margin-top:-45rem;}
.swiper-bottom .swiper-slide {overflow:hidden;}
.swiper-bottom .swiper-slide .img-box {}
.swiper-bottom .swiper-slide .img-box img {box-shadow:17px 0 15px rgba(0, 0, 0, 0.06); border-radius:3rem;}
.swiper-bottom .swiper-slide .info-box {padding-left:25%; margin-top:5rem;}
.swiper-bottom .swiper-slide .info-box h2 {font-size:4.5rem; color:#3a80f2; font-weight:bold;}
.swiper-bottom .swiper-slide .info-box ul {margin:4rem 0 1rem;}
.swiper-bottom .swiper-slide .info-box ul li {position:relative; font-size:2.1rem; font-weight:900; color:#333; padding-left:2.5rem; margin-bottom:3rem;}
.swiper-bottom .swiper-slide .info-box ul li:before {content:''; width:8px; height:8px; border-radius:50%; background:#333; position:absolute; left:0; top:12px;}
.swiper-bottom .swiper-slide .info-box ul li span {display:block; font-size:1.8rem; font-weight:500; color:#555; word-break:keep-all;}
.swiper-bottom .swiper-slide .info-box p {font-size:2rem; font-weight:bold; color:#333; background:#fff; padding:1rem 2rem; border-radius:50px; }



/* main08 */
.main08 {}
.main08 .board-box {margin-top:6rem;}
.main08 .board-box ul {flex-wrap:wrap; gap:3rem 1.5rem;}
.main08 .board-box ul li {width:calc(96% / 4);}
.main08 .board-box ul li a {display:block; position:relative; transition:0.3s;}
.main08 .board-box .cate {padding:0.5rem 1.5rem; border-radius:50px; background:#626262; font-size:1.4rem; font-weight:500; color:#fff; position:absolute; top:15px; left:15px; transition:0.3s;}
.main08 .board-box .image-container {overflow: hidden; display: flex; align-items: center; justify-content: center; width:100%; height: 170px;}
.main08 .board-box .image-container img {width: 100%; object-fit: cover}
.main08 .board-box .txt-box {display:block; padding:3rem 2rem 1.5rem; border:1px solid #cdcdcd; border-top:none;}
.main08 .board-box .txt-box h3 {font-size:2rem; font-weight:bold; color:#525559; word-break:keep-all; margin-bottom:2.5rem;}
.main08 .board-box .txt-box p {font-size:1.7rem; font-weight:500; color:#979797; margin-bottom:1.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main08 .board-box .txt-box .date {display:block; font-size:1.6rem; font-weight:500; color:#979797; text-align:right; padding-top:1.5rem; border-top:1px dashed #cdcdcd;}
.main08 .board-box ul li a:hover {box-shadow:5px 5px 5px rgba(0, 0, 0, 0.05);}
.main08 .board-box ul li a:hover .cate {background:#3a80f2;}
.main08 .more-btn {display:block; margin:4rem auto 0; width: fit-content;}
.main08 .more-btn button {font-size:1.6rem; font-weight:bold; color:#626262;}
.main08 .more-btn button span {display:block; margin:0 auto;}

.board-box:not(.expanded) .flex-wrap > li:nth-child(n+5) {display: none;}
.board-box.expanded .flex-wrap > li {animation: fadeUp .25s ease both;}
.board-box.expanded .flex-wrap > li:nth-child(5) { animation-delay: .02s; }
.board-box.expanded .flex-wrap > li:nth-child(6) { animation-delay: .05s; }
.board-box.expanded .flex-wrap > li:nth-child(7) { animation-delay: .08s; }
.board-box.expanded .flex-wrap > li:nth-child(8) { animation-delay: .11s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.main08 .more-btn button[aria-expanded="true"] span img {transform: rotate(180deg); transition: transform .2s ease;}
.main08 .more-btn button span img {transition: transform .2s ease;}



/* main09 */
.main09 {padding:0;}
.main09 .flex-wrap {max-width:200rem; margin:0 auto;}
.main09 .flex-wrap > div {width:50%;}
.main09 .main-title {text-align:left;}
.main09 .main-title h2 {font-size:4rem; margin-bottom:2rem;}
.main09 .main-title p {font-size:1.8rem; text-align:left;}

.main09 .faq  {background:#f4f4f4; padding:13rem 13rem 12rem;}
.main09 .faq .faq-list { margin: 0 auto; }
.main09 .faq .faq-item { border-bottom: 1px solid #727272; }
.main09 .faq .faq-q { margin: 0; }
.main09 .faq .faq-toggle {width: 100%; text-align: left; background: none; border: 0; padding: 5rem 0; cursor: pointer; position: relative; font-size:2.2rem; color:#0f0e0e; font-weight:bold; outline:none !important;}
.main09 .faq .faq-toggle span {font-size:3rem;}
.main09 .faq .faq-a {font-size:2rem; color: #4b5563; border-top:1px dashed #bcbcbc; padding:3rem 0;}
.main09 .faq .faq-a[hidden] { display: none; }
.main09 .faq .faq-a.reveal { animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from {opacity:0; transform: translateY(-2px)} to {opacity:1; transform: translateY(0)} }

.main09 .cs{padding:13rem 13rem 12rem;}
.main09 .cs .contact-form{margin:8rem auto 0}
.main09 .cs .cf-row{margin-bottom:0.5rem; display:flex; flex-wrap:wrap;}
.main09 .cs .cf-row label{width:15%; margin-right:5%; font-weight:700; color:#0f0e0e; font-size:2.2rem;}
.main09 .cs .cf-req{color:#ff3b30}
.main09 .cs input[type="text"],
.main09 .cs input[type="email"],
.main09 .cs select,
.main09 .cs textarea{width:80%; font-size:2rem; padding:1rem 1.5rem; border-radius:5px; background:#f4f4f4; outline:none; border:none;}
.main09 .cs textarea{resize:vertical}
.main09 .cs input:focus,.main09 .cs select:focus,.main09 .cs textarea:focus{border-color:#2f6fff;box-shadow:0 0 0 3px rgba(47,111,255,.12)}
.main09 .cs .cf-error{width:80%; min-height:18px; margin: 0.5rem 0 0 20%; font-size:1.5rem; color:#ef4444;}
.main09 .cs .cf-agree{display:flex; align-items:center; gap:10px; margin:8px 0 0 20%;}
.main09 .cs .cf-agree label {font-size:2rem; font-weight:700; color:#0f0e0e;}
.main09 .cs .cf-agree input[type="checkbox"]{width:2.1rem;height:2.1rem;border:none;border-radius:5px;appearance:auto;background:#f4f4f4;}
.main09 .cs .cf-agree-desc{margin:0 0 1.5rem 20%; font-size:1.5rem; color:#6b7280}
.main09 .cs .cf-submit{width:80%; margin-left:20%; padding:1rem 2.5rem;border:none;border-radius:5px; background:#3b82f6;color:#fff;font-size:2.4rem;font-weight:800;cursor:pointer;transition:opacity .15s ease, background .15s ease}
.main09 .cs .cf-submit:disabled{opacity:.5;cursor:not-allowed}
.main09 .cs .cf-submit:not(:disabled):active{background:#1e4ed8}
/* 문의하기(ContactForm) 보강 — 연락처·유형 칸, 선택 표시, 숨은 칸, 보내기 실패 안내 */
.main09 .cs input[type="tel"]{width:80%; font-size:2rem; padding:1rem 1.5rem; border-radius:5px; background:#f4f4f4; outline:none; border:none;}
.main09 .cs select{appearance:auto; height:4.8rem;}
.main09 .cs input[aria-invalid="true"],.main09 .cs textarea[aria-invalid="true"]{box-shadow:0 0 0 2px rgba(239,68,68,.45)}
.main09 .cs .cf-opt{font-size:1.5rem; font-weight:500; color:#6b7280;}
.main09 .cs .cf-agree-desc a{color:#2563eb; text-decoration:underline;}
.main09 .cs .cf-error-agree{margin:-1rem 0 1rem 20%;}
.main09 .cs .cf-send-error{width:80%; margin:0 0 1.2rem 20%; padding:1rem 1.4rem; border-radius:5px; background:#fef2f2; color:#b91c1c; font-size:1.6rem; line-height:1.5;}
.main09 .cs .cf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.main09 .cs{position:relative;}
/* 칸 이름을 입력칸 위로 — 반쪽 폭에서 「문의 유형」·「이메일 *」이 두 줄로 깨지지 않게(좁은 화면과 같은 배치) */
.main09 .cs .contact-form{margin-top:5rem;}
.main09 .cs .cf-row label{width:100%; margin:0 0 .8rem; font-size:1.9rem; white-space:nowrap;}
.main09 .cs input[type="text"],
.main09 .cs input[type="email"],
.main09 .cs input[type="tel"],
.main09 .cs select,
.main09 .cs textarea,
.main09 .cs .cf-error,
.main09 .cs .cf-error-agree,
.main09 .cs .cf-send-error,
.main09 .cs .cf-agree-desc,
.main09 .cs .cf-submit{width:100%; margin-left:0;}
.main09 .cs .cf-agree{margin-left:0;}
.main09 .cs .cf-error{margin-top:.4rem;}



/* main10 */

.main10 { position: relative; overflow: hidden;}
.main10 h2 {font-size:13rem; color:#000; text-transform: uppercase; font-weight:bold; text-align:center;}
.main10 p {font-size:2.4rem; color:#000; font-weight:300; text-align:center; margin:3rem auto 5rem;}
.main10 button {display:block; font-size:3.2rem; font-weight:500; color:#fff; width:40rem; padding:2rem 1.5rem; border-radius:50px; background:#3b82f6; transition:0.3s; border:1px solid #3b82f6; margin:0 auto;}
.main10 button:hover {color:#3b82f6; background:#fff;}
/* 「시작하기」 아래 두 번째 길 — 같은 폭, 테두리 버튼 */
.main10 .main10-estimate {display:block; box-sizing:border-box; font-size:2.4rem; font-weight:600; color:#3b82f6; width:40rem; padding:1.6rem 1.5rem; border-radius:50px; background:rgba(255,255,255,0.9); border:1.5px solid #3b82f6; margin:1.6rem auto 0; text-align:center; text-decoration:none; transition:0.3s;}
.main10 .main10-estimate:hover {color:#fff; background:#3b82f6;}

.main-cont.main10 .bg-area{position:absolute;left:0;right:0;bottom:0; height:50%;z-index:-1;pointer-events:none;overflow:hidden;transition: height 0.8s ease;}
.main-cont.main10 .bg-flow{position:absolute;left:50%;top:50%; width:130%;height:130%; transform:translate(-50%,-50%); overflow:hidden;}
.main-cont.main10 .bg-drift{position:absolute;left:50%;top:50%; width:120%;height:120%; transform:translate(-50%,-50%); object-fit:cover;display:block; will-change:transform; animation:driftMove 12s ease-in-out infinite; opacity:0.95;}
.main-cont.main10 .bg-pan{position:absolute;left:0;top:0;right:0;bottom:0; background-size:180% auto; background-position:50% 50%; background-repeat:no-repeat; mix-blend-mode:normal; opacity:0.85; will-change:background-position; animation:panMove 10s ease-in-out infinite alternate;}
.main-cont.main10.inview .bg-area {height: 100%;}

@keyframes driftMove{
  0%   { transform:translate(-50%,-50%) scale(1.08) rotate(0deg)    translate(0,0); }
  25%  { transform:translate(-50%,-50%) scale(1.10) rotate(0.3deg)  translate(-2vw, 1.2vh); }
  50%  { transform:translate(-50%,-50%) scale(1.09) rotate(-0.2deg) translate(2.5vw,-1.6vh); }
  75%  { transform:translate(-50%,-50%) scale(1.11) rotate(0.4deg)  translate(-1.8vw,-1.2vh); }
  100% { transform:translate(-50%,-50%) scale(1.08) rotate(0deg)    translate(0,0); }
}

@keyframes panMove{
  0%   { background-position:48% 46%; }
  20%  { background-position:60% 40%; }
  45%  { background-position:55% 60%; }
  70%  { background-position:42% 52%; }
  100% { background-position:65% 45%; }
}



/* footer */

.site-footer{position:relative; background:#222222; color:#b6b6b6;}
.site-footer::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,#b7e0ff, #e6b7ff, #b7e0ff); opacity:.9;}
.site-footer .footer-inner{margin:0 auto; padding:6rem 9rem; border:1px solid #3a3a3a; box-sizing:border-box;}
.footer-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.footer-left{ flex:1 1 auto; min-width:280px; }
.footer-right{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:16px;}
.footer-info{ list-style:none; margin:0 0 12px; padding:0; }
.footer-info li{ margin:0 0 6px; line-height:1.7; color:#b6b6b6; }
.footer-info strong{ color:#d6d6d6; font-weight:300; margin-right:4px; }
.footer-info a{ color:#b6b6b6; text-decoration:none; }
.footer-info .ftc-check{ display:inline-block; padding:2px 10px; border:1px solid #4a4a4a; border-radius:4px; font-size:.92em; line-height:1.5; }
.footer-info .ftc-check:hover{ color:#ffffff; border-color:#6a6a6a; }
.footer-info .bar{ display:inline-block; margin:0 10px; color:#808080; }
.footer-info .gap{ display:inline-block; width:28px; }
.copy{ margin:12px 0 0; color:#9a9a9a; font-size:1.7rem;}

.footer-links{ display:flex; align-items:center; gap:10px; }
.footer-links a{ color:#b6b6b6; text-decoration:none; font-weight:300; }
.footer-links a:hover{ color:#ffffff; }

.sns{ display:flex; align-items:center; gap:10px; }
.sns a{width:34px; height:34px; display:flex; align-items:center; justify-content:center; text-decoration:none; line-height:1;}
.sns a:hover{ filter:brightness(.92); }


/* Top Button — 채널톡 런처(우하단 코너)와 겹치지 않도록 런처 위로 올림 */
.top_btn{position: fixed; right: 3rem; bottom: calc(3vh + 84px); z-index: 9999; width: 46px; height: 46px; border-radius: 999px; background: rgba(66, 66, 66, 0.5); display: flex; align-items: center; justify-content: center; cursor: pointer;}
.top_btn img{display:block; }


/* ========== 서브페이지 공통 ========== */

/* 페이지 히어로 */
.page-hero {padding:18rem 0 8rem; background:linear-gradient(135deg, #f8fafc 0%, #e8f4fc 100%); text-align:center;}
.page-hero-inner {max-width:120rem; margin:0 auto; padding:0 2rem;}
.page-hero h1 {font-size:5rem; font-weight:bold; color:#0f0e0e; margin-bottom:2rem;}
.page-hero p {font-size:2rem; color:#666; font-weight:400; text-align:center;}

/* 공지사항 섹션 */
.notice-section {padding:8rem 0 12rem; background:#fff;}
.notice-wrap {max-width:140rem; margin:0 auto; padding:0 4rem;}

/* 카테고리 필터 */
.notice-filter {display:flex; gap:1rem; margin-bottom:4rem; flex-wrap:wrap;}
.filter-btn {padding:1rem 2.5rem; border:1px solid #ddd; border-radius:50px; background:#fff; font-size:1.6rem; font-weight:500; color:#666; cursor:pointer; transition:all 0.3s ease;}
.filter-btn:hover {border-color:#3b82f6; color:#3b82f6;}
.filter-btn.active {background:#3b82f6; border-color:#3b82f6; color:#fff;}

/* 공지 목록 */
.notice-list ul {list-style:none; padding:0; margin:0;}
.notice-list li {border-bottom:1px solid #eee;}
.notice-list li a {display:flex; align-items:center; gap:3rem; padding:3rem 0; transition:all 0.3s ease;}
.notice-list li a:hover {background:#f9fafb; padding-left:2rem; padding-right:2rem; margin:0 -2rem; border-radius:1rem;}

.notice-thumb {position:relative; flex-shrink:0; width:20rem; height:14rem; border-radius:1rem; overflow:hidden;}
.notice-thumb img {width:100%; height:100%; object-fit:cover;}
.notice-thumb .cate {position:absolute; top:1rem; left:1rem; padding:0.4rem 1.2rem; border-radius:50px; background:#3b82f6; font-size:1.2rem; font-weight:600; color:#fff;}
.notice-thumb .cate.news {background:#3b82f6;}
.notice-thumb .cate.update {background:#10b981;}
.notice-thumb .cate.event {background:#f59e0b;}

.notice-info {flex:1; min-width:0;}
.notice-info h3 {font-size:2.2rem; font-weight:bold; color:#0f0e0e; margin-bottom:1.2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notice-info p {font-size:1.6rem; color:#666; line-height:1.6; margin-bottom:1.5rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.notice-info .date {font-size:1.4rem; color:#999;}

/* 페이지네이션 */
.pagination {display:flex; justify-content:center; align-items:center; gap:0.8rem; margin-top:6rem;}
.pagination a {display:flex; align-items:center; justify-content:center; min-width:4rem; height:4rem; padding:0 1rem; border-radius:0.8rem; font-size:1.6rem; font-weight:500; color:#666; text-decoration:none; transition:all 0.2s ease;}
.pagination a:hover {background:#f1f5f9; color:#3b82f6;}
.pagination a.active {background:#3b82f6; color:#fff;}
.pagination .page-arrow {color:#999;}
.pagination .page-arrow:hover {background:#f1f5f9; color:#3b82f6;}
.pagination .page-dots {font-size:1.6rem; color:#999; padding:0 0.5rem;}

/* 메뉴 활성화 */
header nav a.active {color:#3b82f6;}

/* 공지사항 상세 페이지 */
.page-hero-detail {padding:18rem 0 6rem;}

.notice-detail-section {padding:4rem 0 12rem; background:#fff;}
.notice-detail-wrap {max-width:100rem; margin:0 auto; padding:0 4rem;}

.notice-detail-header {text-align:center; padding-bottom:4rem; border-bottom:1px solid #eee; margin-bottom:4rem;}
.notice-detail-header .cate {display:inline-block; padding:0.6rem 2rem; border-radius:50px; background:#3b82f6; font-size:1.4rem; font-weight:600; color:#fff; margin-bottom:2rem;}
.notice-detail-header h2 {font-size:3.6rem; font-weight:bold; color:#0f0e0e; line-height:1.4; margin-bottom:2rem; word-break:keep-all;}
.notice-detail-header .notice-meta {display:flex; justify-content:center; gap:2rem; color:#999; font-size:1.6rem;}
.notice-detail-header .notice-meta .date {color:#666;}

.notice-detail-content {margin-bottom:6rem;}
.notice-thumb-large {margin-bottom:4rem; border-radius:1.5rem; overflow:hidden;}
.notice-thumb-large img {width:100%; height:auto; display:block;}

/* 로고형 썸네일: 작게 가운데 정렬 (모두의 창업·TIPS 등) */
.notice-thumb.thumb-logo {display:flex; align-items:center; justify-content:center; background:#f4f6fb;}
.notice-thumb.thumb-logo img {width:auto; height:auto; max-width:72%; max-height:62%; object-fit:contain;}
.notice-thumb-large.thumb-logo {display:flex; align-items:center; justify-content:center; background:#f4f6fb; padding:4.5rem 2rem;}
.notice-thumb-large.thumb-logo img {width:auto; height:auto; max-width:34rem; max-height:16rem; margin:0 auto; object-fit:contain;}

.notice-body {font-size:1.8rem; line-height:1.9; color:#333;}
.notice-body p {margin-bottom:2rem;}
.notice-body ul {margin:2rem 0 3rem 2rem; padding-left:2rem;}
.notice-body ul li {margin-bottom:1rem; position:relative;}
.notice-body ul li::before {content:''; position:absolute; left:-2rem; top:1rem; width:6px; height:6px; border-radius:50%; background:#3b82f6;}
.notice-body img {max-width:100%; height:auto; border-radius:12px;}
/* default.css:20 의 hr{display:none} 상쇄 — 작성자가 넣은 구분선이 사라지던 문제.
   목록은 일부러 건드리지 않는다: 위 li::before 커스텀 불릿이 base.css:73 의 list-style:none 을 전제로 한다. */
.notice-body hr {display:block; height:1px; border:0; background:#e5e7eb; margin:3rem 0;}

.notice-detail-nav {display:flex; justify-content:center; padding-top:4rem; border-top:1px solid #eee;}
.notice-detail-nav .btn-list {display:inline-flex; align-items:center; gap:1rem; padding:1.5rem 4rem; border:1px solid #ddd; border-radius:50px; font-size:1.6rem; font-weight:600; color:#666; transition:all 0.3s ease;}
.notice-detail-nav .btn-list:hover {background:#3b82f6; border-color:#3b82f6; color:#fff;}
.notice-detail-nav .btn-list svg {width:1.6rem; height:1.6rem;}

/* 문의 완료 모달 */
.modal-overlay {display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:10000; align-items:center; justify-content:center; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.modal-overlay.show {display:flex;}
.modal-content {background:#fff; border-radius:2rem; padding:4rem 5rem; text-align:center; max-width:40rem; width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.2); animation:modalIn 0.3s ease;}
.modal-icon {margin-bottom:2rem;}
.modal-title {font-size:2.4rem; font-weight:bold; color:#0f0e0e; margin-bottom:1.5rem;}
.modal-message {font-size:1.6rem; color:#666; line-height:1.7; margin-bottom:3rem; text-align: center;}
.modal-close-btn {background:#3b82f6; color:#fff; border:none; padding:1.2rem 4rem; border-radius:50px; font-size:1.6rem; font-weight:600; cursor:pointer; transition:all 0.3s ease;}
.modal-close-btn:hover {background:#2563eb;}

@keyframes modalIn {
  from {opacity:0; transform:scale(0.9) translateY(-20px);}
  to {opacity:1; transform:scale(1) translateY(0);}
}


/* ���� */

#en .main01 .visual-txt {width:50%; max-width:86rem;}
#en .main01 .main-visual {width:50%; max-width:90rem;}
#en .main01 .typing {font-size:9rem; min-height:22.5rem;}

#en .app .tab {padding:1.5rem 2.5rem 1.5rem 2rem;}

#en #main6 .main-title h2 {font-size:4.2rem;}

#en #main7 .main-title h2 {font-size:4.2rem;}
#en #main7 .main-title p {font-size:2rem;}
#en .main09 .cs .cf-agree {align-items: start;}


/* 헤더: 모두의 창업 공식 기관 페이지 링크 */
/* 헬퍼 1기 모집 라벨(머리말 「헬퍼」 옆 작은 알약) */
.nav-helper{display:inline-flex;align-items:center;gap:6px;}
.nav-badge{display:inline-block;font-size:11px;font-weight:700;line-height:1;color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6);padding:4px 7px;border-radius:999px;white-space:nowrap;}
.modoo-org-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#0f172a;background:#f1f5f9;border:1px solid #e2e8f0;padding:7px 15px;border-radius:999px;white-space:nowrap;transition:border-color .2s ease, color .2s ease, box-shadow .2s ease;}
.modoo-org-link img{display:block;height:17px;width:auto;}
.modoo-org-link:hover,.modoo-org-link:focus{color:#3b82f6;border-color:#3b82f6;box-shadow:0 4px 14px rgba(59,130,246,0.18);}
/* 모두의창업 풀 텍스트는 1440 이상에서 노출. 그 아래(≤1439)에서만 로고로 축약해 혼잡 방지.
   (드롭다운 안의 링크는 더 구체적인 'header nav .modoo-org-link' 규칙이 텍스트를 다시 노출) */
@media (max-width:1439px){
  .modoo-org-link span{display:none;}
  .modoo-org-link{padding:7px 11px;}
}
/* 햄버거 분기점(1024px) 위 ~1699px 의 혼잡 데스크톱: 가로 메뉴를 컴팩트하게 + 무료체험 폭 축소해
   모두의창업 풀 텍스트(1440+)와 6개 메뉴가 우측에서 겹치지 않게. full 헤더(gap40·trial 17rem)는 ≥1700. */
@media (min-width:1025px) and (max-width:1699px){
  header nav{gap:30px;}
  header nav a{font-size:14px;}
  .trial-btn{width:auto;}
}

/* 모바일: 햄버거 메뉴 안으로 이동된 모두의 창업 링크 / 언어 메뉴 (JS가 이동시킴) */
header nav .modoo-org-link{width:100%;justify-content:flex-start;background:none;border:none;border-radius:0;box-shadow:none;font-size:16px;padding:15px;border-bottom:1px dashed #ddd;}
header nav .modoo-org-link span{display:inline;}
header nav .modoo-org-link img{height:16px;}
header nav .lang{width:100%;font-size:16px;border-bottom:1px dashed #ddd;}
header nav .lang button{width:100%;justify-content:flex-start;display:flex;align-items:center;color:#333;font-size:16px;padding:15px;font-weight:bold;}
header nav .lang button img{margin-left:auto;}
header nav .lang-options{position:static;width:100%;background:#f7f8fa;border-radius:0;box-shadow:none;min-width:0;}
header nav .lang-options a{color:#333;padding:12px 28px;}
header nav .lang-options a:hover{background:#eef1f5;}
header nav .lang:last-child,header nav .modoo-org-link:last-child{border-bottom:none;}

/* 모두의창업 알약 끝 「신청 D-n」 — 신청 기간에만 */
.modoo-dday{font-style:normal;font-size:11px;font-weight:800;line-height:1;color:#fff;background:#ef4444;padding:4px 7px;border-radius:999px;white-space:nowrap;}
@media (max-width:768px){ .modoo-dday{display:none;} }
/* 캠페인 배지 묶음(헬퍼 · 모두의창업) — 기존 모두의창업 배지 자리에서 위로 쌓는다. 안의 배지는 묶음 기준으로 놓인다. */
.campaign-floats{position:fixed;right:3rem;bottom:calc(3vh + 150px);z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.campaign-floats .modoo-float{position:static;}
.helper-float img{height:20px;}
.helper-float .mf-txt{color:#4f46e5;}
@media (max-width:1024px){ .campaign-floats{right:5%;} }
/* 휴대폰 번갈아 보이기: 두 배지를 한 칸에 겹치고 꺼진 쪽만 흐리게 숨긴다 */
.campaign-floats.swap{display:grid;justify-items:end;}
.campaign-floats.swap > a{grid-area:1/1;transition:opacity .35s ease, transform .35s ease;}
.campaign-floats.swap > a.is-off{opacity:0;transform:translateY(6px);pointer-events:none;}
@media (prefers-reduced-motion: reduce){ .campaign-floats.swap > a{transition:none;} }
/* 모두의 창업 플로팅 배지 (탑버튼 위) — 흰 배경 + 로고로 깔끔하게 */
.modoo-float{position:fixed;right:3rem;bottom:calc(3vh + 150px);z-index:9999;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f0;padding:9px 16px;border-radius:999px;box-shadow:0 6px 20px rgba(15,23,42,0.12);text-decoration:none;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.modoo-float:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,23,42,0.18);border-color:#c7d2fe;}
.modoo-float img{display:block;height:22px;width:auto;}
.modoo-float .mf-txt{display:flex;flex-direction:column;line-height:1.25;font-size:13px;font-weight:800;color:#0f172a;}
.modoo-float .mf-txt em{font-style:normal;font-size:11px;font-weight:600;color:#64748b;}
@media (max-width:1024px){
  .modoo-float{right:5%;}
}
@media (max-width:768px){
  .modoo-org-link span{display:none;}
  .modoo-org-link{padding:6px 10px;}
  .modoo-org-link img{height:15px;}
  .modoo-float{right:5%;padding:7px 13px;gap:8px;}
  .modoo-float img{height:18px;}
  .modoo-float .mf-txt{font-size:11px;}
  .modoo-float .mf-txt em{font-size:10px;}
}
/* 첫 화면 위에서는 헤더를 투명하게 두어 배경 그라데이션이 끊기지 않게 한다. 스크롤 후 기존 흰 배경 복귀. */
header:not(.header-scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}

/* 데스크톱 헤더 비율 재조정: 높이 76, 메뉴 16px/500, 우측 묶음 정돈.
   모두의창업 배지는 "AI 솔루션 공급기업" 문구를 데스크톱 전역에서 노출한다
   (기존 ≤1439 숨김 규칙을 이 블록이 덮어씀). 문구가 들어간 만큼 우측 묶음이 넓어지므로
   간격·패딩을 줄여 가운데 메뉴가 한쪽으로 쏠리지 않게 맞춘다. */
@media (min-width:1025px){
  header{height:76px;}
  .logo{height:28px;}
  header nav{gap:32px;}
  header nav a{font-size:16px;font-weight:500;color:#3f3f46;}
  header .actions{gap:16px;}
  .modoo-org-link span{display:inline;}
  .modoo-org-link{padding:0 13px;height:36px;font-size:12.5px;gap:7px;}
  .modoo-org-link img{height:15px;}
  .trial-btn{height:38px;width:auto;padding:0 16px;font-size:15px;font-weight:600;border-radius:999px;display:inline-flex;align-items:center;}
  .lang button{font-size:15px;}
}

/* 1025–1599 데스크톱: 가운데 정렬 메뉴가 오른쪽 묶음(모두의창업 알약 · 무료 체험)과 겹쳤다
   (운영 1280 폭에서 「문의」가 알약 밑에 가려짐, 10/19 확인). 이 폭에선 메뉴를 로고 옆에서 시작한다. */
@media (min-width:1025px) and (max-width:1599px){
  header{justify-content:flex-start;}
  header nav{margin-left:calc(max(3rem, calc((100vw - 2100px) / 2 + 3rem)) + 100px);gap:24px;}
  header nav a{font-size:15px;}
}
/* 1025–1279: 그래도 빠듯해 알약은 로고만, 메뉴 간격 · 글자를 한 단계 줄인다. */
@media (min-width:1025px) and (max-width:1279px){
  header nav{gap:16px;}
  header nav a{font-size:14px;}
  .modoo-org-link span{display:none;}
  .modoo-org-link{padding:0 10px;}
  .nav-badge{font-size:10px;padding:3px 6px;}
}

/* 머리말 「기업관」(/enterprise) — 문의 뒤 남색 알약. 데스크톱은 아이콘 + 글자, NEW 배지는 햄버거 메뉴에서만 */
header nav a.nav-corp{display:inline-flex;align-items:center;gap:6px;position:relative;white-space:nowrap;text-decoration:none;height:32px;padding:0 13px 0 11px;margin:-5px 0 -5px -8px;border-radius:999px;background:#0f172a;color:#fff;font-size:14px;font-weight:700;box-shadow:0 4px 12px rgba(15,23,42,.18);transition:background .2s}
header nav a.nav-corp:hover{background:#1e293b;color:#fff;text-decoration:none}
header nav a.nav-corp svg{width:15px;height:15px;flex:none}
header nav a.nav-corp .nav-badge{display:none}
header nav a.nav-corp.active{color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 5px #3b82f6,0 6px 16px rgba(15,23,42,.22)}
@media (min-width:1025px) and (max-width:1279px){
  header nav a.nav-corp{height:28px;padding:0 10px;margin:-3px 0 -3px -4px;font-size:13px}
  header nav a.nav-corp svg{display:none}
}
@media (max-width:1024px){
  header nav a.nav-corp{height:auto;margin:0;padding:15px;border-radius:0;background:none;box-shadow:none;font-size:16px}
  header nav a.nav-corp,header nav a.nav-corp:hover,header nav a.nav-corp.active{color:#3b82f6;background:none;box-shadow:none}
  header nav a.nav-corp .nav-badge{display:inline-block;background:#0f172a}
}