/* 공통 CSS (자동 생성) — 모든 페이지 만장일치 규칙 */
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
.nav-inner {
      max-width: 1440px; margin: 0 auto; width: 100%; padding: 0 14px;
      display: flex; align-items: center; justify-content: space-between;
    }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-img { height: 32px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links > li { position: relative; }
.nav-links a:hover { color: var(--blue); }
.nav-dropdown {
      position: absolute; top: calc(100% + 8px); left: 50%;
      transform: translateX(-50%) translateY(-4px);
      background: rgba(255,255,255,0.70); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
      display: flex; flex-direction: row; gap: 4px; width: max-content;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      transition-delay: 0.12s;
    }
.nav-dropdown::before {
      content: ''; position: absolute;
      top: -12px; left: 0; right: 0; height: 12px;
    }
.nav-dropdown::after {
      content: ''; position: absolute;
      top: -7px; left: 50%; transform: translateX(-50%);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid rgba(255,255,255,0.70);
      filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.08));
    }
.nav-links > li:hover .nav-dropdown {
      opacity: 1; pointer-events: all;
      transform: translateX(-50%) translateY(0);
      transition-delay: 0s;
    }
.nav-dropdown a:hover { color: var(--blue); }
.nav-dropdown a.active { color: var(--blue); font-weight: 700; }
.nav-dropdown a + a {
      border-left: 1px solid rgba(0,0,0,0.12);
      margin-left: 2px; padding-left: 14px;
    }
section { padding: 96px 14px; }
.section-inner { max-width: 1440px; margin: 0 auto; }
.section-header .section-title { background: linear-gradient(180deg, #4A90D9 0%, #1a2a6c 50%, #0a0a0a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 55px; line-height: 1.1; }
.section-header .section-desc { margin: 0; max-width: none; text-align: center; }
.section-desc br { display: none; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.hero-image-area {
      width: 100%; background: var(--gradient);
      height: 440px; overflow: hidden; position: relative;
      display: flex; align-items: center;
    }
.hero-image-area::before {
      content: ''; position: absolute; inset: 0;
      background: rgba(255,255,255,0.88); z-index: 1;
    }
.hero-bg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center; z-index: 0;
    }
.hero-text {
      flex: 1;
      display: flex; flex-direction: column; gap: 14px;
      align-items: flex-start;
    }
.hero-mockup {
      flex: 1;
      display: flex; align-items: center; justify-content: flex-end;
    }
.hero-mockup img {
      max-height: 400px; max-width: 100%;
      width: auto; display: block; object-fit: contain;
    }
.hero-text p {
      font-size: 18px; color: var(--text-gray); line-height: 1.85;
    }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--blue); color: white;
      font-size: 19px; font-weight: 700; padding: 12px 17px;
      border-radius: 999px; min-width: 140px; justify-content: center; text-decoration: none;
      transition: transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 4px 16px rgba(74,108,247,0.25);
    }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(74,108,247,0.35); }
.btn-outline:hover { background: var(--blue); color: white; }
.hero-ctas .btn-outline { background: white; }
.hero-ctas .btn-outline:hover { background: white; color: var(--blue); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(74,108,247,0.15); }
.hero-products {
      background: white; padding: 32px 14px;
    }
a.product-card { display: block; text-decoration: none; color: inherit; }
.product-card:hover { border-color: var(--blue); box-shadow: 0 8px 32px rgba(74,108,247,0.1); }
.product-card:hover .product-card-front { opacity: 0; pointer-events: none; }
.product-card-front-img { width: 60%; object-fit: contain; display: block; align-self: flex-end; }
.product-card-back { padding: 32px; }
.product-card-icon {
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; font-size: 24px;
    }
.product-card-name { font-size: 23px; font-weight: 800; color: var(--text-dark); }
.product-card-type { font-size: 13px; color: var(--blue); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.product-feature { display: flex; gap: 14px; align-items: flex-start; }
.feature-text { font-size: 18px; color: var(--text-gray); line-height: 1.7; }
.feature-text strong { display: block; font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
#media { background: white; }
.logo-grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
      margin-top: 8px;
    }
.logo-item {
      border: 1px solid var(--border); border-radius: 10px;
      height: 64px; background: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 600; color: var(--text-light);
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; letter-spacing: 0.5px;
    }
.logo-item:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-3px); box-shadow: 0 4px 12px rgba(74,108,247,0.1); }
.logo-item img { height: 24px; width: auto; max-width: 80%; object-fit: contain; }
.logo-item-app { gap: 10px; }
.logo-item-app:hover span { color: var(--blue); }
.media-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 40px; background: var(--bg-light); border-radius: 999px; padding: 6px; width: fit-content; margin-left: auto; margin-right: auto; border: 1px solid var(--border); }
.media-tab { display: flex; align-items: center; justify-content: center; padding: 9px 20px; border-radius: 999px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-gray); transition: background 0.2s, box-shadow 0.2s, color 0.2s; }
.media-tab-icon { display: none; }
.media-tab-label { font-size: 14px; font-weight: 700; color: inherit; white-space: nowrap; }
.media-tab:hover { color: var(--blue); }
.media-tab.active { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); color: var(--blue); }
#targeting { background: white; }
.sub-section-header { margin-top: 56px; margin-bottom: 16px; text-align: center; }
.sub-section-title { font-size: 32px; font-weight: 900; color: var(--text-dark); margin-bottom: 4px; }
.sub-section-desc { font-size: 19px; color: var(--text-gray); margin-bottom: 0; }
.sub-section-divider { border: none; border-top: 1px solid var(--border); }
.dmp-carousel-wrapper {
      position: relative;
      margin-bottom: 64px;
    }
.dmp-card-wrap[data-dist="0"] { z-index: 3; }
.dmp-card-wrap[data-dist="1"] { z-index: 2; }
.dmp-card-wrap[data-dist="2"] { z-index: 1; }
.dmp-card-wrap[data-dist="0"] .dmp-card {
      border-color: var(--blue);
      box-shadow: 0 4px 24px rgba(74,108,247,0.18);
    }
.dmp-logo-circle {
      position: absolute;
      bottom: -24px;
      left: 50%;
      transform: translateX(-50%);
      width: 68px; height: 68px;
      border-radius: 50%;
      border: 3px solid white;
      background: white;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      display: flex; align-items: center; justify-content: center;
    }
.dmp-logo-circle img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.dmp-card-body {
      padding: 44px 24px 28px;
      text-align: center;
      display: flex; flex-direction: column; align-items: center;
    }
.dmp-name { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.dmp-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.dmp-arrow { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dark); transition: border-color 0.2s, color 0.2s, opacity 0.2s; flex-shrink: 0; }
.dmp-arrow:hover:not([disabled]) { border-color: var(--blue); color: var(--blue); }
.dmp-arrow[disabled] { opacity: 0.25; cursor: default; }
.dmp-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dmp-dots { display: flex; justify-content: center; gap: 8px; align-items: center; }
.dmp-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--border);
      transition: background 0.2s, transform 0.2s;
      cursor: pointer;
    }
.dmp-dot.active { background: var(--blue); transform: scale(1.3); }
.audience-ticker-container {
      overflow: hidden;
      padding-top: 8px;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    }
.audience-ticker {
      display: flex;
      width: max-content;
      animation: audienceScroll 60s linear infinite;
    }
.audience-ticker-container:hover .audience-ticker,
    .audience-ticker-container.paused .audience-ticker { animation-play-state: paused; }
.audience-ticker-item {
      flex: 0 0 auto;
      width: 200px;
      margin-right: 10px;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 12px;
      background: white;
      display: flex; flex-direction: column; align-items: center;
      gap: 6px; text-align: center;
      cursor: default;
      transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    }
.audience-ticker-container:hover .audience-ticker-item:hover,
    .audience-ticker-item.active {
      border-color: var(--blue);
      box-shadow: 0 4px 16px rgba(74,108,247,0.12);
      transform: translateY(-4px);
    }
.audience-ticker-item .audience-icon { font-size: 28px; line-height: 1; }
.audience-ticker-item .audience-cat { font-size: 15px; font-weight: 700; color: var(--text-dark); transition: color 0.2s; }
.audience-ticker-container:hover .audience-ticker-item:hover .audience-cat,
    .audience-ticker-item.active .audience-cat { color: var(--blue); }
.audience-ticker-item .audience-detail {
      font-size: 12px; color: var(--text-gray); line-height: 1.4;
      max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height 0.3s ease, opacity 0.25s ease;
    }
.audience-ticker-container:hover .audience-ticker-item:hover .audience-detail,
    .audience-ticker-item.active .audience-detail { max-height: 60px; opacity: 1; }
@keyframes audienceScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
#banner { background: white; }
.product-note {
      text-align: center; font-size: 18px; font-weight: 600;
      color: var(--text-gray); padding: 14px 11px;
      background: white; border: 1px solid var(--border);
      border-radius: 8px; margin-bottom: 40px;
      letter-spacing: 0.3px;
    }
.product-selector {
      display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start;
    }
.product-selector.reverse { grid-template-columns: 1fr 240px; align-items: stretch; }
.video-btns {
      display: flex; flex-direction: column; gap: 6px;
      align-self: center;
    }
.video-btns .selector-btn { padding: 9px 8px; }
.banner-selector { grid-template-columns: 240px 1fr; align-items: stretch; }
.selector-btns { display: flex; flex-direction: column; gap: 8px; }
.banner-btns {
      display: flex; flex-direction: column; gap: 6px;
      align-self: center;
    }
.banner-btns .selector-btn { padding: 9px 8px; }
.selector-btn:hover { border-color: var(--blue); color: var(--blue); }
.selector-btn.active {
      border-color: var(--blue); background: rgba(74,108,247,0.06);
      color: var(--blue);
    }
.selector-preview {
      background: white; border: 1px solid var(--border);
      border-radius: 16px; padding: 36px;
      display: flex; flex-direction: column; gap: 20px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
.selector-preview:hover { border-color: var(--blue); box-shadow: 0 8px 32px rgba(74,108,247,0.1); }
.preview-image {
      width: 100%; aspect-ratio: 16/9; border-radius: 12px;
      background: linear-gradient(135deg, rgba(74,108,247,0.08), rgba(123,94,167,0.08));
      border: 1.5px dashed var(--border);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-light); font-size: 18px;
    }
.preview-name { font-size: 22px; font-weight: 800; color: var(--text-dark); }
.preview-desc-label {
      font-size: 13px; font-weight: 700; color: var(--blue);
      letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px;
    }
.preview-desc-text { font-size: 19px; color: var(--text-gray); line-height: 1.7; }
#banner-peffect::after {
      content: '광고 거부감 없이 브랜드 노출';
      height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
    }
#video-peffect::after {
      content: '기간 내 이벤트 메시지 강조';
      height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
    }
.preview-note {
      font-size: 13px; color: var(--text-gray); line-height: 1.7;
      text-align: center;
    }
.banner-tab-circle { display: none; }
.banner-tab-name { font-size: 14px; font-weight: 700; color: var(--text-gray); white-space: nowrap; transition: color 0.2s; }
.banner-tab-btn:hover .banner-tab-name { color: var(--blue); }
.banner-tab-btn.active .banner-tab-name { color: var(--blue); }
.banner-detail {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 16px;
      padding: 20px 40px; background: white;
      border: 1px solid var(--border); border-radius: 16px;
      max-width: 950px; margin-left: auto; margin-right: auto; width: 100%;
    }
.banner-detail-info {
      flex: 0 0 auto; width: 100%;
      display: flex; flex-direction: column; gap: 10px;
      text-align: center; align-items: center; justify-content: center;
    }
.product-divider { border: none; border-top: 1px solid var(--border); width: 100%; margin: 0; }
.banner-detail-desc { font-size: 16px; color: var(--text-gray); line-height: 1.6; text-align: center; }
.banner-mockup-wrap { display: flex; flex-direction: column; align-items: center; }
.mockup-disclaimer { font-size: 14px; color: var(--text-light); text-align: center; margin-top: 10px; }
.banner-mockup-bg {
      display: flex; align-items: center; justify-content: center;
      min-height: auto; overflow: hidden;
    }
#weather-container > img { width: 100% !important; height: 100% !important; object-fit: cover; }
.adweather-v1, .adweather-v2 { width: 100% !important; }
.video-mockup-wrap { display: flex; flex-direction: column; align-items: center; }
#video-vertical-composite > div { height: 648px; }
#video-vertical-composite > div > div:nth-child(2) { flex: 1; min-height: 0; }
.video-timer-bar {
      background: #343434; display: flex; align-items: center; justify-content: center;
      gap: 5px; height: 60px; width: 100%; max-width: 702px; flex-shrink: 0;
    }
.vt-height-ref { position: relative; width: 100%; max-width: 702px; }
.vt-size-ref { visibility: hidden; width: 100%; display: block; }
.vt-open1 { font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.75); white-space: nowrap; }
.vt-day   { font-size: 18px; font-weight: 800; color: #fff; margin: 0 10px 0 4px; white-space: nowrap; }
.vt-timer { display: flex; align-items: center; gap: 5px; }
.vt-pair {
      display: flex;
      background: linear-gradient(to bottom, #fff 0%, #f5f5f5 49%, #d0d0d0 49%, #d0d0d0 51%, #e8e8e8 51%, #fff 100%);
      border-radius: 6px; overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.15);
    }
.vt-digit {
      flex: none;
      width: 22px; height: 38px; background: transparent; color: #111;
      font-size: 23px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      text-align: center; line-height: 1;
      font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
    }
.vt-pair .vt-digit + .vt-digit { border-left: 1px solid rgba(0,0,0,0.5); }
.vt-sep { color: rgba(255,255,255,0.6); font-size: 18px; font-weight: 700; line-height: 1; margin: 0; }
@keyframes skinObjMove {
      0%   { left: 0;   transform: scaleX(1); }
      46%  { left: 73%; transform: scaleX(1); }
      50%  { left: 73%; transform: scaleX(-1); }
      96%  { left: 0;   transform: scaleX(-1); }
      100% { left: 0;   transform: scaleX(1); }
    }
.skin-obj { position: absolute; bottom: 0; width: 25%; height: auto; cursor: pointer; animation: skinObjMove 30s linear infinite; transform-origin: center bottom; }
.skin-pc-view { width: 100%; max-width: 702px; }
.skin-mo-view { width: 100%; display: flex; flex-direction: column; align-items: center; }
#video { background: white; }
.pricing-grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
      margin-top: 48px;
    }
.pricing-card {
      border: 1px solid var(--border); border-radius: 14px; padding: 24px 8px;
      text-align: center; transition: border-color 0.2s, box-shadow 0.2s;
    }
.pricing-card:hover { border-color: var(--blue); box-shadow: 0 4px 20px rgba(74,108,247,0.1); }
.pricing-logo {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; margin: 0 auto 12px;
    }
.pricing-name { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.pricing-desc { font-size: 18px; color: var(--text-gray); line-height: 1.6; margin-bottom: 16px; }
.pricing-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 24px; }
.pricing-condition { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.pricing-condition span { font-size: 14px; font-weight: 600; color: var(--blue); background: rgba(74,108,247,0.08); border-radius: 4px; padding: 7px 8px; text-align: center; }
.pricing-cpm {
      font-family: 'Paperozi', sans-serif; font-size: 18px; font-weight: 800;
      color: var(--blue); margin-bottom: 14px;
    }
.pricing-carousel-wrapper { position: relative; margin-top: 16px; }
.pricing-clip { overflow: hidden; }
.pricing-stage { position: relative; height: 280px; }
.pricing-card-wrap {
      position: absolute; width: 333px;
      top: 50%; left: 0; transform-origin: center center;
      transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.5s ease, opacity 0.5s ease;
      cursor: pointer;
    }
.pricing-card-wrap[data-dist="0"] { z-index: 3; }
.pricing-card-wrap[data-dist="1"] { z-index: 2; }
.pricing-card-wrap[data-dist="2"] { z-index: 1; }
.pricing-card-wrap[data-dist="0"] .pricing-card { border-color: var(--blue); box-shadow: 0 4px 24px rgba(74,108,247,0.18); }
.pricing-carousel-bottom { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.pricing-arrow { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dark); transition: border-color 0.2s, color 0.2s, opacity 0.2s; flex-shrink: 0; }
.pricing-arrow:hover:not([disabled]) { border-color: var(--blue); color: var(--blue); }
.pricing-arrow[disabled] { opacity: 0.25; cursor: default; }
.pricing-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pricing-dots { display: flex; justify-content: center; gap: 8px; align-items: center; }
.pricing-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.2s, transform 0.2s; cursor: pointer; }
.pricing-dot.active { background: var(--blue); transform: scale(1.3); }
#reference { background: white; }
.reference-single {
      max-width: 1200px; margin: 0 auto; width: 100%;
      border: 1px solid var(--border); border-radius: 16px;
      position: relative; cursor: pointer; display: block; text-decoration: none;
      padding: 20px; background: white;
    }
.reference-single img { width: 100%; height: auto; display: block; border-radius: 10px; filter: blur(6px); transition: filter 0.3s, transform 0.3s; }
.reference-single:hover img { filter: blur(6px) grayscale(1); transform: translateY(-6px); }
.reference-single-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; opacity: 0; transition: opacity 0.3s; }
.reference-single:hover .reference-single-overlay { opacity: 1; }
.reference-view-btn { background: var(--blue); color: white; font-size: 16px; font-weight: 700; padding: 12px 28px; border-radius: 999px; border: none; cursor: pointer; font-family: inherit; box-shadow: 0 4px 16px rgba(74,108,247,0.35); transition: transform 0.2s; }
.reference-view-btn:hover { transform: scale(1.05); }
.ref-more, .section-cta {
      display: flex; justify-content: center; margin-top: 40px;
    }
.biz-product-link {
      display: flex; flex-direction: column; align-items: center;
      font-size: 16px; font-weight: 600; color: var(--blue);
      text-decoration: none; margin-top: 14px;
      transition: opacity 0.2s; line-height: 1.4;
    }
.biz-product-link .link-arrow { font-size: 12px; line-height: 1; }
.biz-product-link:hover { opacity: 0.7; }
footer { background: var(--text-dark); padding: 60px 14px 32px; }
.footer-inner { max-width: 1440px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand .nav-logo-img { filter: brightness(0) invert(1); }
.footer-desc { font-size: 18px; color: rgba(255,255,255,0.45); line-height: 1.8; margin-top: 16px; font-weight: 700; letter-spacing: 0.5px; }
.footer-info { font-size: 14px; color: rgba(255,255,255,0.3); line-height: 2; margin-top: 10px; }
.footer-col-title { font-size: 18px; font-weight: 700; color: white; margin-bottom: 16px; letter-spacing: 0.5px; }
.footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col-links a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-size: 14px; color: rgba(255,255,255,0.3); }
.footer-social { display: flex; gap: 12px; }
.footer-social a:hover { border-color: var(--blue); color: var(--blue); }
#scroll-top {
      position: fixed; bottom: 32px; right: 32px; z-index: 999;
      width: 44px; height: 44px;
      background: var(--blue); color: white;
      border: none; border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(74,108,247,0.35);
      opacity: 0; pointer-events: none;
      transform: translateY(12px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
#scroll-top.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
#scroll-top:hover { background: #3a5ae0; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,108,247,0.45); }
#scroll-top svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-hamburger span {
      display: block; width: 22px; height: 2px;
      background: var(--text-dark); border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.25s ease;
      transform-origin: center;
    }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
      position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
      background: white; z-index: 998;
      padding: 8px 11px 40px; overflow-y: auto;
      transform: translateX(100%); transition: transform 0.3s ease;
      border-top: 1px solid var(--border);
    }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-item {
      display: block; padding: 16px 0;
      font-size: 21px; font-weight: 600; color: var(--text-dark);
      text-decoration: none; border-bottom: 1px solid var(--border);
    }
.mobile-menu-item:hover { color: var(--blue); }
.mobile-sub-group { border-bottom: 1px solid var(--border); }
.mobile-sub-label {
      padding: 16px 0; font-size: 21px; font-weight: 600; color: var(--text-dark);
    }
.mobile-sub-links { padding: 0 0 14px 7px; display: flex; flex-direction: column; }
.mobile-sub-links a {
      display: block; padding: 10px 0;
      font-size: 19px; font-weight: 500; color: var(--text-gray); text-decoration: none;
    }
.mobile-sub-links a:hover { color: var(--blue); }
.mobile-sub-links a.active { color: var(--blue); font-weight: 700; }
.mobile-cta-btn {
      display: block; margin-top: 24px;
      background: var(--blue); color: white; text-align: center;
      border-radius: 8px; padding: 14px 11px;
      font-size: 20px; font-weight: 700; text-decoration: none;
    }
.mobile-cta-btn:hover { opacity: 0.9; }
.nav-mega {
      flex-direction: column !important;
      align-items: center !important;
      padding: 8px 4px !important;
      gap: 0 !important;
      width: max-content !important;
    }
.nav-mega a + a { border-left: none !important; margin-left: 0 !important; padding-left: 9px !important; border-top: 1px solid rgba(0,0,0,0.07); }
@keyframes adw-v1 {
      0%, 25%       { opacity: 0.7; }  
      31.25%        { opacity: 0; }    
      93.75%        { opacity: 0; }    
      100%          { opacity: 0.7; }  
    }
@keyframes adw-v2 {
      0%, 43.75%    { opacity: 0; }    
      50%           { opacity: 0.7; }  
      75%           { opacity: 0.7; }  
      81.25%        { opacity: 0; }    
      100%          { opacity: 0; }    
    }
.adweather-v1 { animation: adw-v1 8s linear infinite; }
.adweather-v2 { animation: adw-v2 8s linear infinite; }
.time-banner-wrap { width: 540px; }
.ADrolling2 { position: relative; width: 540px; height: 450px; overflow: hidden; border-radius: 4px; }
.ADrolling2 .full img { width: 540px; height: 450px; object-fit: cover; display: block; }
.time_box {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: #545353;
      padding: 14px 11px;
    }
.time_box_in { display: flex; align-items: center; justify-content: center; gap: 12px; }
.open_text01, .open_text02 { color: rgba(255,255,255,0.85); font-size: 13px; white-space: nowrap; }
.timer { display: flex; align-items: center; gap: 3px; }
.timer_b {
      background: #343434; color: #fff; font-weight: 700; font-size: 18px;
      padding: 4px 7px; border-radius: 3px; min-width: 34px; text-align: center;
      box-shadow: 0 0 0 1.5px #1F1F1F, 0 2px 6px rgba(31,31,31,0.8);
      font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
    }
.timer_division { color: #fff; font-weight: 700; font-size: 18px; line-height: 1; }
#native-container {
      width: 540px; height: 450px;
      overflow: hidden; border-radius: 8px;
      margin: 0 auto; max-width: 100%;
      border: 1px solid var(--border); background: white;
    }
#NativeBannerAd { width: 100%; height: 100%; display: flex; flex-direction: column; }
.NBimage { flex: none; overflow: hidden; position: relative; }
.NBimage img { width: 100%; height: auto; display: block; }
.NBad-label {
      position: absolute; top: 8px; right: 8px;
      background: rgba(0,0,0,0.45); color: white;
      font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
      padding: 2px 6px; border-radius: 3px;
      font-family: 'Paperozi', sans-serif;
    }
.NBtitle-row {
      flex-shrink: 0; padding: 0 14px;
      height: 70px; display: flex; align-items: center; justify-content: center;
      border-top: 1px solid var(--border); background: white;
    }
.NBtitle {
      font-size: 18px; font-weight: 800; color: var(--text-dark);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      font-family: 'Paperozi', sans-serif; text-align: center;
    }
.NBbottom {
      flex-shrink: 0; height: 90px;
      display: flex; align-items: center;
      padding: 0 14px; gap: 12px;
      border-top: 1px solid var(--border); background: white;
    }
.NBadvertiser {
      flex: 1; font-size: 13px; color: var(--text-gray);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      font-family: 'Paperozi', sans-serif;
    }
.NBcta {
      flex-shrink: 0; background: #075985; color: white;
      border-radius: 6px; padding: 7px 18px;
      font-size: 14px; font-weight: 700;
      font-family: 'Paperozi', sans-serif; white-space: nowrap; cursor: pointer;
    }
#vote-container {
      width: 540px; height: 450px; position: relative;
      overflow: hidden; border-radius: 4px; margin: 0 auto; max-width: 100%;
      user-select: none;
    }
#vote-container > .vote-bg {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    }
.vote-sides {
      position: absolute; inset: 0; display: flex; z-index: 1;
    }
.vote-side {
      flex: 1; cursor: pointer; position: relative;
      transition: background 0.2s;
    }
.vote-side.hover-off { pointer-events: none; background: transparent !important; }
.vote-left:hover  { background: rgba(255,255,255,0.18); }
.vote-right:hover { background: rgba(255,255,255,0.18); }
.vote-divider { display: none; }
.vote-gauge {
      position: absolute; bottom: 0; left: 0; right: 0; height: 35px;
      display: flex; align-items: center; justify-content: center;
      padding: 0 20%; background: none; pointer-events: none; z-index: 2;
    }
.vote-gauge-l {
      height: 18px; border-radius: 999px 0 0 999px;
      background: #F4845F;
      display: flex; align-items: center; justify-content: flex-end; padding-right: 6px;
      transition: flex 0.5s cubic-bezier(0.4,0,0.2,1);
      flex: 50; min-width: 24px;
    }
.vote-gauge-r {
      height: 18px; border-radius: 0 999px 999px 0;
      background: #4A90D9;
      display: flex; align-items: center; justify-content: flex-start; padding-left: 6px;
      transition: flex 0.5s cubic-bezier(0.4,0,0.2,1);
      flex: 50; min-width: 24px;
    }
.vote-pct {
      color: white; font-size: 10px; font-weight: 700;
      font-family: 'Paperozi', sans-serif; line-height: 1;
    }
#lift-container { margin: 0 auto; max-width: 100%; }
.lift-card {
      position: relative; display: flex; justify-content: center; align-items: flex-end;
      perspective: 2000px; overflow: hidden;
      width: 540px; height: 450px; max-width: 100%;
    }
.lift-wrapper {
      position: absolute; width: 100%; height: 100%; z-index: 1;
      transform-origin: bottom;
      animation: liftTransON 4.25s ease-in-out infinite alternate;
    }
.lift-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.lift-main {
      width: 100%; height: 100%; position: absolute; top: 0; left: 0;
      object-fit: cover; opacity: 0; z-index: 3;
      animation: liftCharON 4.25s ease-in-out infinite alternate;
    }
.lift-shadow {
      width: 100%; height: 100%; position: absolute; top: 0; left: 0;
      z-index: 2; backdrop-filter: blur(2px); opacity: 0;
      animation: liftShadowON 4.25s ease-in-out infinite alternate;
    }
@keyframes liftTransON {
      0%   { transform: none; opacity: 1; }
      80%  { transform: perspective(900px) translateY(-5%) rotateX(50deg) translateZ(0); opacity: 0.9; }
      100% { transform: perspective(900px) translateY(-5%) rotateX(50deg) translateZ(0); opacity: 0.9; }
    }
@keyframes liftCharON {
      0%   { opacity: 0; transform: translate3d(0, 0, 0); }
      80%  { opacity: 1; transform: translate3d(0, -1%, 90px); }
      100% { opacity: 1; transform: translate3d(0, -1%, 90px); }
    }
@keyframes liftShadowON {
      0%   { opacity: 0; }
      80%  { opacity: 1; }
      100% { opacity: 1; }
    }
@keyframes slideHint {
      0%   { transform: translateX(0); }
      25%  { transform: translateX(-22px); }
      50%  { transform: translateX(-6px); }
      75%  { transform: translateX(-20px); }
      100% { transform: translateX(0); }
    }
#slide-cover { cursor: grab; }
#slide-cover:active { cursor: grabbing; }
.cube-scene {
      width: 540px; height: 450px;
      perspective: 1080px;
      margin: 0 auto;
    }
.cube {
      width: 540px; height: 450px;
      position: relative;
      transform-style: preserve-3d;
      animation: cubeSpin 30s linear infinite;
    }
.cube__face {
      position: absolute;
      backface-visibility: hidden;
      overflow: hidden;
    }
.cube__face--front, .cube__face--back,
    .cube__face--right, .cube__face--left {
      width: 380px; height: 314px;
      top: 50%; left: 50%;
      margin-top: -157px; margin-left: -190px;
    }
.cube__face--front  { transform: rotateY(  0deg) translateZ(190px); }
.cube__face--back   { transform: rotateY(180deg) translateZ(190px); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(190px); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(190px); }
.cube__face--top, .cube__face--bottom { width: 380px; height: 380px; background: linear-gradient(135deg, #1a2a6c, #4A6CF7); top: 50%; left: 50%; margin-top: -190px; margin-left: -190px; }
.cube__face--top    { transform: rotateX( 90deg) translateZ(157px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(157px); }
@keyframes cubeSpin {
      from { transform: rotateY(0deg); }
      to   { transform: rotateY(360deg); }
    }
@media (max-width: 359px) {
      #cube-container { transform: translate(-50%, -50%) scale(0.4) !important; }
    }
h1, h2, h3, h4,
    .section-title, .section-desc,
    .hero-content-row h1,
    .hero-title, .hero-desc,
    .main-copy, .main-sub,
    .biz-title, .biz-subtitle,
    .biz-product-name, .biz-product-desc,
    .biz-feature-name, .biz-feature-desc {
      text-wrap: balance;
    }
.dmp-logo-circle span { font-size: 32px; }
.btn-more-outline {
      display: inline-flex; align-items: center; gap: 8px;
      border: 1.5px solid var(--blue); color: var(--blue);
      font-size: 19px; font-weight: 600; padding: 12px 14px;
      border-radius: 8px; text-decoration: none; background: white;
      transition: background 0.2s, color 0.2s;
    }
.btn-more-outline:hover { background: var(--blue); color: white; }