/* ════════════════════════════════════════════════
 * assets/css/embed_mode.css
 *
 * 임베드 모드 (?embed=1) 전용 스타일 — speed-test 위젯이 외부 사이트의
 * iframe 안에 들어갈 때만 적용. 컴팩트 + 자족적(self-contained).
 * ════════════════════════════════════════════════ */

.emb-body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34, 211, 238, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #061226 0%, #0c1b35 100%);
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #fff;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 임베드 모드에선 페이지 컨테이너 마진 제거 (iframe 사이즈에 맞춤) */
.emb-body .kt-section-wrapper,
.emb-body .kt-section-wrapper-1 {
    background: transparent;
    padding: 10px 10px 8px;
}
.emb-body .kt-section-inner {
    padding: 0;
    max-width: none;
}

/* ────────────────────────────────────────────────
   첫 화면 컴팩트 노출 정책
   상단 헤더 / Cloudflare 파트너 / 신뢰 strip / Technical Specifications 박스 모두 숨김.
   사용자가 iframe 을 보자마자 [측정 시작 버튼 + 3개 게이지] 가 바로 보이도록.
   상세 사양 정보는 측정 후 결과 영역에 노출.
   ──────────────────────────────────────────────── */
.emb-body .kt-internet-section-header,
.emb-body .stx-tool-header,
.emb-body .stx-tool__meta,
.emb-body .stx-tech-specs__head,
.emb-body .stx-tool__footer {
    display: none;
}

/* 임베드 모드 도구 카드 — 외곽 그림자 제거, 패딩 축소 */
.emb-body .stx-tool__inner {
    padding: 14px 12px;
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 임베드 모드 — 기술 사양 박스 자체는 숨기되 안의 시작 버튼은 노출.
   그리드의 사양 셀(다운로드/업로드/Ping/정확도) 만 숨기고 action 셀은 풀폭 노출 */
.emb-body .stx-tech-specs {
    padding: 0;
    margin: 0 0 14px;
    border: 0;
    background: transparent;
}
.emb-body .stx-tech-specs__grid {
    display: block;
    grid-template-columns: none;
    gap: 0;
}
.emb-body .stx-tech-specs__item {
    display: none;
}
.emb-body .stx-tech-specs__action {
    display: block;
    width: 100%;
    margin: 0;
}

/* 측정 시작 버튼 — 풀폭 + 큼직 (CTA) */
.emb-body .stx-btn--start {
    width: 100%;
    min-width: 0;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 18px rgba(34, 211, 238, 0.28);
}
.emb-body .stx-btn--start i {
    margin-right: 6px;
}

/* 임베드 모드 — 게이지 3열 고정 컴팩트 */
.emb-body .stx-gauges {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}
.emb-body .stx-gauge__num span:first-child {
    font-size: 20px;
}
.emb-body .stx-gauge__icon {
    font-size: 13px;
}
.emb-body .stx-gauge__label {
    font-size: 11px;
}
.emb-body .stx-gauge__hint {
    font-size: 10px;
}
.emb-body .stx-gauge__unit {
    font-size: 11px;
}

/* 임베드 모드 — 결과 카드 1열 */
.emb-body .stx-result__grid {
    grid-template-columns: 1fr;
    gap: 10px;
}
.emb-body .stx-result__num {
    font-size: 28px;
}

/* 임베드 모드 — B2B 시나리오 1열 */
.emb-body .stx-scenario-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}
.emb-body .stx-result__overall {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 16px 14px;
}
.emb-body .stx-result__overall-badge {
    width: 76px;
    height: 76px;
}
.emb-body .stx-result__overall-letter {
    font-size: 30px;
}

/* 임베드 모드 — 시작 버튼 풀폭 */
.emb-body .stx-btn--start {
    width: 100%;
    min-width: 0;
}

/* 임베드 모드 — 방법론 푸터 1열 */
.emb-body .stx-tool__footer {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 16px;
    margin-top: 20px;
}

/* 임베드 모드 — floating CTA 숨김 (이미 임베드라 sticky 불필요) */
.emb-body .stx-floating-cta {
    display: none !important;
}

/* ════════════════════════════════════════════════
   백링크 푸터 — "Powered by KT 기업인터넷 가입센터"
   외부 사이트에서 자동 노출되는 핵심 SEO 자산
   ════════════════════════════════════════════════ */
.emb-credit {
    padding: 14px 18px;
    text-align: center;
    background: rgba(0, 0, 0, 0.30);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
}
.emb-credit__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
}
.emb-credit__link strong {
    color: #67e8f9;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.emb-credit__link:hover {
    color: #fff;
}
.emb-credit__link:hover strong {
    color: #a5f3fc;
}

/* ────────────────────────────────────────────────
   반응형 — iframe 너비별 단계적 축소
   ──────────────────────────────────────────────── */

/* 480 미만: 모바일 작은 화면 — 게이지 작게 + 시작 버튼 더 강조 */
@media (max-width: 480px) {
    .emb-body .kt-section-wrapper,
    .emb-body .kt-section-wrapper-1 { padding: 8px 8px 6px; }
    .emb-body .stx-tool__inner { padding: 12px 10px; }
    .emb-body .stx-btn--start { padding: 14px 16px; font-size: 15px; }
    .emb-body .stx-gauges { gap: 6px; margin-top: 10px; }
    .emb-body .stx-gauge__num span:first-child { font-size: 16px; }
    .emb-body .stx-gauge__icon { font-size: 11px; }
    .emb-body .stx-gauge__label { font-size: 10px; }
    .emb-body .stx-gauge__hint { display: none; }
    .emb-body .stx-gauge__unit { font-size: 10px; }
}

/* 360 미만: 매우 작은 화면 (구형 폰) — 게이지 1열 stack */
@media (max-width: 360px) {
    .emb-body .stx-gauges {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .emb-body .stx-gauge__num span:first-child { font-size: 22px; }
    .emb-body .stx-gauge__label { font-size: 11px; }
    .emb-body .stx-gauge__hint { display: inline; font-size: 10px; }
}

/* 결과 표시 영역도 컴팩트하게 */
.emb-body .stx-result-section { margin-top: 14px; }
.emb-body .stx-livegraph { margin-top: 10px; }