/* 상품 랜딩(개발자용 API 소개)과 마이페이지 시작하기 탭.
   색·글자 크기·모서리는 public/css 에 이미 있는 값만 쓴다(test/ui_rules_baseline.test.js). */

/* ── 상품 랜딩 ───────────────────────────── */
.api-landing-wrap { width:min(1240px, calc(100% - 48px)); margin:0 auto; box-sizing:border-box; }
.data-intro .api-landing-wrap { width:auto; }
/* 고정 헤더 아래에서 시작한다(체험 화면의 기존 서브 비주얼 자리). */
.api-landing-wrap--top { margin-top:130px; }
.api-landing { color:#17233c; word-break:keep-all; }
.api-landing code { overflow-wrap:anywhere; }
.api-landing__hero { padding:28px 28px 24px; border:1px solid #dce4f1; border-radius:20px; background:#f6f8fc; }
.api-landing__badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:#344cdb; color:#fff; font-size:13px; font-weight:700; line-height:1.4; vertical-align:middle; }
.api-landing__title { margin:10px 0 8px; font-size:32px; line-height:1.3; font-weight:800; color:#17233c; }
.api-landing__lead { margin:0 0 6px; font-size:17px; line-height:1.6; color:#17233c; max-width:820px; }
.api-landing__audience { margin:0; font-size:14px; line-height:1.6; color:#475467; }
.api-landing__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.api-landing__btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid #344cdb; border-radius:8px; background:#fff; color:#2d45c2; font-size:15px; font-weight:700; text-decoration:none; }
.api-landing__btn:hover { background:#eef2ff; }
.api-landing__btn--primary { background:#344cdb; color:#fff; }
.api-landing__btn--primary:hover { background:#2d45c2; color:#fff; }
.api-landing__btn--ghost { border-color:#dce4f1; color:#475467; }
.api-landing__grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:12px; }
.api-landing__card { min-width:0; padding:20px 22px; border:1px solid #dce4f1; border-radius:12px; background:#fff; box-sizing:border-box; }
.api-landing--docs { display:grid; gap:12px; margin:24px 0 48px; }
.api-landing__h2 { margin:0 0 10px; font-size:20px; line-height:1.4; font-weight:800; color:#17233c; }
.api-landing__uses, .api-landing__price, .api-landing__terms, .api-landing__errors { list-style:none; margin:0; padding:0; }
.api-landing__uses { display:grid; gap:10px; }
.api-landing__uses li { display:grid; gap:2px; font-size:14px; line-height:1.6; color:#475467; }
.api-landing__uses strong { font-size:15px; color:#17233c; }
.api-landing__price li { padding:8px 12px; margin-bottom:6px; border-radius:8px; background:#eef2ff; font-size:15px; font-weight:700; color:#17233c; line-height:1.5; }
.api-landing__terms li { position:relative; padding-left:14px; margin:6px 0; font-size:14px; line-height:1.6; color:#475467; }
.api-landing__terms li::before { content:""; position:absolute; left:2px; top:10px; width:5px; height:5px; border-radius:50%; background:#344cdb; }
.api-landing__more, .api-landing__note { margin:10px 0 0; font-size:14px; line-height:1.6; color:#667085; }
.api-landing__more a, .api-landing__note a { color:#2d45c2; text-decoration:underline; text-underline-offset:3px; }
.api-landing__code { margin-top:10px; border:1px solid #dce4f1; border-radius:8px; overflow:hidden; }
.api-landing__code-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 6px 0 12px; background:#f6f8fc; font-size:14px; cursor:default; }
details.api-landing__code > summary { cursor:pointer; list-style:revert; }
.api-landing__code-tools { display:flex; justify-content:flex-end; padding:6px; background:#f6f8fc; }
.api-landing__copy { min-height:44px; min-width:44px; padding:6px 12px; border:1px solid #dce4f1; border-radius:8px; background:#fff; color:#2d45c2; font-size:14px; font-weight:700; cursor:pointer; }
.api-landing__code pre { margin:0; padding:14px; max-height:420px; overflow:auto; background:#17233c; color:#fff; font-size:13px; line-height:1.6; }
.api-landing__code pre code { white-space:pre; overflow-wrap:normal; }
.api-landing__errors { display:grid; gap:8px; margin-top:10px; }
.api-landing__errors li { padding:10px 12px; border:1px solid #dce4f1; border-radius:8px; }
.api-landing__errors p { margin:4px 0 0; font-size:14px; line-height:1.6; color:#475467; }
.api-landing__error-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.api-landing__error-head code { font-size:14px; font-weight:700; color:#17233c; }
.api-landing__http { padding:2px 8px; border-radius:999px; background:#eef2ff; color:#2d45c2; font-size:13px; font-weight:700; }
.api-landing__cta { padding:20px 22px; border-radius:12px; background:#eef2ff; }
.api-landing__cta p { margin:0; font-size:16px; color:#17233c; }
.api-landing__cta .api-landing__actions { margin-top:10px; }
.api-experience-page .api-landing-try .sub-body { padding-top:24px; padding-bottom:0; }
.api-landing-try .head-comment a { color:#2d45c2; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px) {
    .api-landing-wrap { width:calc(100% - 16px); }
    .api-landing-wrap--top { margin-top:104px; }
    .api-landing__hero { padding:16px 14px 14px; border-radius:12px; }
    .api-landing__title { font-size:24px; margin:8px 0 6px; }
    .api-landing__lead { font-size:15px; }
    .api-landing__actions { margin-top:12px; }
    .api-landing__actions .api-landing__btn { flex:1 1 calc(50% - 4px); padding:10px 8px; }
    .api-landing__actions .api-landing__btn--primary { flex-basis:100%; }
    .api-landing__grid { grid-template-columns:minmax(0, 1fr); gap:8px; margin-top:8px; }
    .api-landing__card { padding:14px; }
    .api-landing--docs { gap:8px; margin:12px 0 28px; }
    .api-landing__h2 { font-size:17px; margin-bottom:6px; }
    .api-landing__cta { padding:14px; }
    .api-experience-page .api-landing-try .sub-body { padding-top:8px; padding-bottom:0; }
}

/* ── 시작하기 탭 ───────────────────────────── */
.api-start { color:#17233c; }
.api-start__title { font-size:22px; font-weight:700; line-height:1.4; margin:4px 0 6px; }
.api-start__lead { font-size:15px; line-height:1.6; color:#475467; margin:0 0 14px; }
.api-start__steps { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.api-start__step { border:1px solid #dce4f1; border-radius:12px; padding:14px 16px; background:#fff; min-width:0; }
.api-start__step > p { font-size:14px; line-height:1.6; margin:6px 0; overflow-wrap:anywhere; }
.api-start__step-title { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:700; margin:0 0 4px; }
.api-start__num { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#344cdb; color:#fff; font-size:14px; flex:none; }
.api-start code { overflow-wrap:anywhere; }
.api-start__key { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 4px; }
.api-start__key code { flex:1 1 180px; min-width:0; padding:10px 12px; border-radius:8px; background:#f6f8fc; border:1px solid #dce4f1; font-size:14px; }
.api-start__btn { min-height:44px; padding:8px 14px; border-radius:8px; border:1px solid #344cdb; background:#fff; color:#2d45c2; font-weight:700; font-size:14px; cursor:pointer; }
.api-start__btn:hover { background:#eef2ff; }
.api-start__note { font-size:13px; color:#667085; }
.api-start__note a, .api-start__step a { color:#2d45c2; text-decoration:underline; text-underline-offset:3px; }
.api-start__code { margin:10px 0 0; border:1px solid #dce4f1; border-radius:8px; overflow:hidden; }
.api-start__code-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; padding:6px 6px 6px 12px; background:#f6f8fc; }
.api-start__code-head strong { font-size:14px; }
.api-start__code-head small { font-weight:400; color:#667085; font-size:13px; margin-left:4px; }
.api-start__code pre { margin:0; padding:12px; background:#17233c; color:#fff; overflow-x:auto; font-size:13px; line-height:1.6; }
.api-start__code pre code { white-space:pre; overflow-wrap:normal; }
.api-start__status { padding:10px 12px; border-radius:8px; background:#f6f8fc; }
.api-start__status[data-state="done"] { color:#157a58; font-weight:700; background:#fff; border:1px solid #157a58; }
.api-start__next { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.api-start__link { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:8px; background:#eef2ff; font-size:14px; font-weight:700; }
.api-start .api-start__link { text-decoration:none; }
.api-start .api-start__link--primary { background:#344cdb; color:#fff; }
@media (max-width:480px) {
    .api-start__step { padding:12px; }
    .api-start__title { font-size:20px; }
}