/* 배송조회 API 문서 (/docs/api)
   사이트 토큰(--paper/--ink/--orange)을 그대로 쓰되, 문서용 2단 레이아웃과
   어두운 코드블록만 여기서 정의한다. */

.api-docs {
    --api-sidebar: 15.5rem;
    --api-code-bg: #1b201d;
    --api-code-ink: #e8e4da;
    --api-code-line: rgba(232, 228, 218, 0.14);
    background: var(--paper);
}

.api-docs__layout {
    display: grid;
    grid-template-columns: var(--api-sidebar) minmax(0, 1fr);
    gap: 3.5rem;
    width: var(--container);
    margin: 0 auto;
    padding: 2.5rem 0 6rem;
    /* align-items: start를 쓰면 안 된다. 그러면 사이드바 격자 칸이 자기 내용
       높이만큼만 차지해서, position: sticky가 붙어 있을 공간이 그 안에서
       끝난다 — 조금만 스크롤해도 목차가 화면 밖으로 사라진다.
       stretch(기본값)로 둬야 칸이 본문 높이만큼 늘어나 sticky가 끝까지 산다. */
    align-items: stretch;
}

/* ---------- 사이드바 ---------- */

.api-nav__inner {
    position: sticky;
    /* 상단 고정 헤더 아래에 붙는다. 2rem이면 헤더에 절반이 가린다. */
    top: 6rem;
    /* top(6rem)을 빼지 않으면 상자 아래쪽이 뷰포트 밖으로 나가, 세로가 짧은
       화면에서 목차 마지막 항목("OpenAPI 스펙")에 영영 닿을 수 없다. */
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.75rem;
    border-right: 1px solid var(--line-soft);
}

.api-nav__eyebrow {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange-deep);
}

.api-nav__version {
    margin: 0.1rem 0 1.4rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.api-nav__group {
    margin: 1.5rem 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.api-nav__group:first-of-type { margin-top: 0; }

.api-nav__link {
    display: block;
    padding: 0.3rem 0.7rem;
    margin-left: -0.7rem;
    border-radius: 0.4rem;
    font-size: 0.86rem;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.api-nav__link:hover,
.api-nav__link:focus-visible {
    background: var(--paper-muted);
    color: var(--ink);
}

/* 20개가 넘는 절을 스크롤하는 문서다. 지금 어디인지 표시가 없으면 목차가
   이동 수단일 뿐 위치 감각을 주지 못한다. */
.api-nav__link--current {
    background: var(--orange-wash);
    color: var(--orange-deep);
    font-weight: 700;
}

/* ---------- 본문 ---------- */

.api-main {
    max-width: 52rem;
    min-width: 0;
    /* 스킵 링크("본문 바로가기")의 착지점이 여기다. 고정 헤더 높이만큼
       비워 두지 않으면 건너뛴 직후 히어로 제목이 헤더에 가려, 스킵 링크가
       "어디로 갔는지 모르겠다"가 된다. .api-section과 같은 값이다. */
    scroll-margin-top: 6rem;
}

.api-hero {
    padding-bottom: 2.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line-soft);
}

.api-hero__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange-deep);
}

.api-hero__title {
    margin: 0 0 0.9rem;
    font-size: clamp(2.1rem, 4.4vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.api-hero__lede {
    margin: 0 0 1.5rem;
    max-width: 44rem;
    font-size: 1.03rem;
    line-height: 1.72;
    color: var(--ink-soft);
}

.api-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.api-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-strong);
    font-size: 0.78rem;
}

.api-chip code {
    background: none;
    padding: 0;
    font-size: 0.78rem;
}

.api-chip--muted {
    color: var(--ink-soft);
    border-style: dashed;
}

.api-section {
    padding: 2.75rem 0;
    /* 상단 내비게이션이 고정이라, 앵커로 들어왔을 때 제목이 헤더에 가리지 않도록
       헤더 높이만큼 여백을 준다. */
    scroll-margin-top: 6rem;
}

/* 13개 절을 스크롤로 훑는 문서다. 절 사이에 선이 없으면 소제목(h3)과 새 절이
   같은 간격으로 읽혀 경계가 사라진다. */
.api-section + .api-section { border-top: 1px solid var(--line-soft); }

.api-section__title {
    margin: 0 0 1rem;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
}

/* h3는 크기를 올리되 위 간격은 줄인다 — 절에 종속된 소제목임이 보여야 한다. */
.api-subtitle {
    margin: 1.75rem 0 0.6rem;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* 응답 필드 표를 객체 단위로 나눌 때 쓰는 한 단계 아래 제목. 표가 여럿 이어질
   때 h3와 같은 무게로 두면 절이 몇 개인지 알 수 없게 된다. */
.api-subtitle--minor {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.api-subtitle--minor code {
    font-size: 0.92em;
    color: var(--ink);
}

.api-section p { line-height: 1.75; }

/* 본문 링크. 색만으로 구분하면 색각 이상에서 안 보이고, 이 팔레트에서는
   본문색과 거의 같아 링크인 줄도 모른다. 밑줄을 기본으로 둔다.
   기준을 .api-section이 아니라 .api-main으로 잡는다 — 히어로 리드문의
   링크("등급별 실측")는 절 밖이라 예전 규칙에 안 걸려 맨 본문색이었다. */
.api-main a:not(.api-shortcut):not(.api-download):not(.api-chip):not(.api-nav__link) {
    color: var(--orange-deep);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

.api-main a:not(.api-shortcut):not(.api-download):not(.api-chip):hover {
    text-decoration-thickness: 2px;
}

.api-table a { color: var(--orange-deep); text-decoration: underline; }

.api-section code {
    padding: 0.1em 0.36em;
    border-radius: 0.28rem;
    background: var(--paper-muted);
    font-family: var(--mono);
    font-size: 0.86em;
    /* 인라인 코드에는 URL·헤더값처럼 공백 없는 긴 토큰이 들어온다. 끊을
       자리가 없으면 상자를 뚫고 나가 320px에서 페이지 전체가 가로로
       스크롤됐다(OpenAPI 스펙 주소). 다른 데서 못 끊으면 아무 데서나 끊는다. */
    overflow-wrap: anywhere;
}

.api-steps {
    margin: 1rem 0 1.5rem;
    padding-left: 1.2rem;
    line-height: 1.9;
}

/* 실시간 위치 공유 링크의 OG 카드 예시. 실제 카드와 같은 5:3 비율을 유지하고,
   설명은 이미지 바깥에 둬 작은 화면에서도 카드 자체가 흐려지지 않게 한다. */
.api-share-preview {
    width: min(100%, 42rem);
    margin: 1.25rem 0 1.75rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--paper-strong);
}

.api-share-preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    background: #f4f0e8;
}

.api-share-preview figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.55;
}

.api-share-preview figcaption strong {
    color: var(--ink);
    font-weight: 650;
}

/* ---------- 코드블록 ---------- */

.api-code {
    position: relative;
    margin: 1.25rem 0 1.5rem;
    border-radius: 0.7rem;
    background: var(--api-code-bg);
    overflow: hidden;
}

.api-code::after {
    content: attr(data-lang);
    /* 가로 스크롤 중에는 코드가 이 태그 밑을 지나간다. 배경을 깔아 둔다. */
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    background: rgba(27, 32, 29, 0.92);
    position: absolute;
    top: 0.65rem;
    right: 0.85rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    /* rgba(232,228,218,0.42)이면 코드 배경(#1b201d) 위에서 대비가 3.4:1로
       본문 기준(4.5:1)에 못 미쳤다. 알파 대신 불투명색으로 박는다 — 계산이
       확인 가능하고(4.9:1), 뒤로 코드가 지나가도 값이 흔들리지 않는다. */
    color: #8f8c85;
}

.api-code__label {
    /* 오른쪽 여백은 data-lang 태그(::after, absolute) 자리다. 안 비워 두면
       상태 배지·복사 버튼이 그 밑으로 들어가 겹친다. */
    padding: 0.6rem 4.5rem 0.6rem 0.95rem;
    border-bottom: 1px solid var(--api-code-line);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(232, 228, 218, 0.68);
}

.api-code__status { margin-left: 0.35rem; }

.api-code__status--ok { background: rgba(88, 160, 106, 0.24); color: #9fd6ad; }
.api-code__status--warn { background: rgba(214, 148, 46, 0.24); color: #ecc383; }

.api-code pre {
    margin: 0;
    /* 라벨(figcaption)이 없는 블록은 pre가 맨 위에서 시작해 data-lang 태그
       (::after, absolute)와 첫 줄이 같은 자리를 쓴다. 태그 아래까지 비운다. */
    padding: 2.15rem 1.1rem 1rem;
    overflow-x: auto;

    /* 세로 높이를 묶는다.
       언어별 예제는 오류 분기까지 담아 100줄이 넘는다. 그대로 두면 코드 한
       덩어리가 화면 몇 개를 차지해서, 스크롤로 문서를 훑던 사람이 "여기가
       어디인지"를 잃는다. 목차의 현재 위치 표시도 그 구간에서 멈춘 것처럼
       보인다. 상자 안에서 스크롤하게 두면 문서의 리듬이 유지된다.
       (아래 syncScrollRegions가 넘칠 때만 tabindex를 붙여 키보드로도 닿게 한다.) */
    max-height: 32rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 잘렸다는 신호. 없으면 스크롤 없는 짧은 예제와 구분되지 않아, 아래가 더
   있는 줄 모르고 지나간다. 상자에 붙어 있고(scroll) 끝에 닿으면 사라진다. */
.api-code pre {
    background-image:
        linear-gradient(to bottom, var(--api-code-bg) 30%, rgba(0, 0, 0, 0)),
        linear-gradient(to top, var(--api-code-bg) 30%, rgba(0, 0, 0, 0)),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)),
        linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
    background-repeat: no-repeat;
    background-size: 100% 2.4rem, 100% 2.4rem, 100% 0.7rem, 100% 0.7rem;
    background-position: top, bottom, top, bottom;
    background-attachment: local, local, scroll, scroll;
}

/* 라벨이 있으면 그 줄이 이미 태그 자리를 차지한다. */
.api-code__label + pre { padding-top: 1rem; }

.api-code code {
    padding: 0;
    background: none;
    color: var(--api-code-ink);
    font-family: var(--mono);
    font-size: 0.83rem;
    line-height: 1.65;
    white-space: pre;
}

/* ---------- 엔드포인트 ---------- */

.api-endpoint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background: var(--paper-strong);
}

.api-method--get { background: var(--orange-wash); color: var(--orange-deep); }

.api-endpoint__path {
    background: none;
    padding: 0;
    font-size: 0.92rem;
    font-weight: 600;
    word-break: break-all;
}

/* ---------- 표 ---------- */

.api-table-wrap {
    margin: 1rem 0 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line-soft);
    border-radius: 0.55rem;

    /* 잘린 쪽에만 그림자를 띄운다(콘솔 키 표와 같은 방식). 앞의 두 겹은
       배경과 같은 색 덮개인데 `local`이라 내용과 함께 스크롤하고, 뒤의 두
       겹은 `scroll`이라 상자에 붙어 있는다. 스크롤이 끝에 닿으면 덮개가
       그림자를 정확히 가리고, 스크롤할 게 없으면 처음부터 가려져 아무것도
       안 보인다. 항상 켜 두면 잘리지도 않은 표에 "더 있다"고 거짓말이 된다. */
    background:
        linear-gradient(to right, var(--paper-strong) 30%, rgba(255, 253, 248, 0)) left / 2rem 100% no-repeat local,
        linear-gradient(to left, var(--paper-strong) 30%, rgba(255, 253, 248, 0)) right / 2rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(31, 41, 36, 0.16), rgba(31, 41, 36, 0)) left / 0.7rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(31, 41, 36, 0.16), rgba(31, 41, 36, 0)) right / 0.7rem 100% no-repeat scroll;
    background-color: var(--paper-strong);
}

/* 스크롤 컨테이너로 초점이 갈 수 있게 JS가 tabindex를 붙인다(넘칠 때만).
   초점 링이 없으면 키보드 사용자는 어디에 있는지 알 수 없다. */
.api-table-wrap:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* 코드블록은 .api-code의 overflow: hidden에 잘리므로 링을 안쪽에 그린다. */
.api-code pre:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}

.api-table {
    width: 100%;
    /* 좁은 화면에서 열이 눌려 "설명"이 찢어지느니 가로 스크롤이 낫다. */
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.88rem;
    /* 배경은 상자(.api-table-wrap)가 깐다. 여기에 불투명 배경을 두면
       스크롤 그림자를 통째로 덮어 버린다. */
}

.api-table th {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper-muted);
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

.api-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
    line-height: 1.6;
}

.api-table tbody tr:last-child td { border-bottom: none; }

.api-req {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--orange-deep);
}

/* 이 "—"는 장식이 아니라 "미제공"을 뜻하는 값이다. opacity로 흐리면
   본문 대비 기준(4.5:1)에 못 미쳐 읽히지 않는다. */
.api-dash { color: var(--ink-soft); }

/* 집화 확인 표의 "인수됐나" 열. 색만으로 구분하지 않는다 — 셀에 이미
   "예"/"아니오"라는 글자가 있고, 색은 훑을 때의 보조 신호일 뿐이다. */
.api-yes { color: var(--success, #3f6c40); font-weight: 700; }

/* 작은 상태 라벨은 기하를 한 벌로 맞춘다. 변형은 색만 바꾼다 — padding·radius·
   크기가 제각각이면 같은 행에 나란히 놓였을 때 어긋남이 그대로 보인다. */
.api-badge,
.api-error__status,
.api-code__status,
.api-method {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

.api-error__status,
.api-code__status,
.api-method {
    font-family: var(--mono);
    letter-spacing: 0.04em;
}

.api-badge--yes,
.api-badge--final { background: rgba(63, 108, 64, 0.14); color: var(--success); }
.api-badge--charged { background: var(--orange-wash); color: var(--orange-deep); }
.api-badge--free { background: var(--paper-muted); color: var(--ink-soft); }

/* 아직 정확도가 충분치 않은 기능(현재는 eta뿐)임을 등장하는 자리마다
   따로 표시한다 — "표본 부족"(약함, --warning)과는 결이 달라 브랜드 강조색을
   쓴다: 데이터 품질 문제가 아니라 "기능 자체가 아직 베타"라는 신호다. */
.api-badge--beta {
    background: var(--orange-wash);
    color: var(--orange-deep);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- 노트 ---------- */

/* 세 변형을 3px 선 색만으로 구분하면 스캔 거리에서 거의 같아 보인다.
   아이콘을 붙여 "정보 / 이득 / 함정"이 한눈에 갈리게 한다. */
.api-note {
    position: relative;
    margin: 1.35rem 0;
    padding: 0.9rem 1.1rem 0.9rem 2.75rem;
    border-left: 3px solid var(--line);
    border-radius: 0 0.35rem 0.35rem 0;
    background: var(--paper-muted);
}

.api-note::before {
    content: "\f05a";
    position: absolute;
    top: 0.95rem;
    left: 1.05rem;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.api-note--accent::before { content: "\f0eb"; color: var(--orange-deep); }
.api-note--warn::before { content: "\f071"; color: var(--warning); }

.api-note p { margin: 0; font-size: 0.91rem; line-height: 1.7; }

.api-note--accent {
    border-left-color: var(--orange);
    background: var(--orange-wash);
}

.api-fineprint {
    font-size: 0.86rem;
    color: var(--ink-soft);
}

/* ---------- 오류 목록 ---------- */

.api-errors {
    display: grid;
    gap: 0.7rem;
    margin: 1.5rem 0;
}

.api-error {
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--line-soft);
    border-radius: 0.55rem;
    background: var(--paper-strong);
    /* problem+json의 type URL을 타고 들어오는 착지점. 고정 헤더를 피한다. */
    scroll-margin-top: 6rem;
}

/* type URL을 타고 들어왔을 때 해당 항목을 눈에 띄게 한다 */
.api-error:target {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-wash);
}

.api-error__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.api-error__code {
    padding: 0;
    background: none;
    font-family: var(--mono);
    font-size: 0.92rem;
    font-weight: 700;
}

.api-error__status { background: var(--paper-muted); color: var(--ink-soft); }

.api-error__status--s400,
.api-error__status--s401,
.api-error__status--s404,
.api-error__status--s422,
.api-error__status--s429 { background: rgba(183, 90, 24, 0.14); color: var(--warning); }

.api-error__status--s500,
.api-error__status--s502,
.api-error__status--s503 { background: rgba(168, 59, 48, 0.14); color: var(--danger); }

.api-error__meaning { margin: 0 0 0.4rem; font-size: 0.9rem; }

.api-error__action {
    margin: 0;
    font-size: 0.87rem;
    color: var(--ink-soft);
}

.api-error__action-label {
    display: inline-block;
    margin-right: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange-deep);
}

/* ---------- 반응형 ---------- */

@media (max-width: 60rem) {
    .api-docs__layout {
        /* 그냥 1fr로 두면 minmax(auto, 1fr)이라, 표·코드블록의 min-content가
           칸을 밀어 폭이 1090px까지 커진다(375px 화면에서 페이지 전체가 가로로
           스크롤됐다). 데스크톱 규칙과 같이 최소값을 0으로 못박는다. */
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding-top: 1.5rem;
    }

    /* 문서가 길어서 목차가 위로 흘러가면 되돌아오는 길이 사라진다. 좁은
       화면에서 사이트 헤더 높이는 68px(=4.25rem)이고, 그 바로 아래에 붙인다.
       sticky는 격자 항목인 aside에 건다 — __inner에 걸면 aside 자기 높이만큼만
       버티다 같이 밀려 올라가서 사실상 안 붙는다. */
    .api-nav {
        position: sticky;
        z-index: 5;
        top: 4.25rem;
        background: var(--paper);
    }

    .api-nav__inner {
        position: static;
        max-height: none;
        padding: 0.6rem 0;
        border-right: none;
        border-bottom: 1px solid var(--line-soft);
        background: var(--paper);
    }

    /* 좁은 화면에서는 목차를 가로 스크롤 칩으로 */
    .api-nav nav {
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .api-nav nav::-webkit-scrollbar { display: none; }
    .api-nav__group { display: none; }

    /* 붙어 있는 목차는 화면을 계속 잡아먹는다. 제목("TAEKBAE API"/"v1")은
       이미 사이트 헤더와 히어로가 말하고 있으니 좁은 화면에서는 뺀다. */
    .api-nav__eyebrow,
    .api-nav__version { display: none; }

    .api-nav__link {
        flex: 0 0 auto;
        margin-left: 0;
        border: 1px solid var(--line-soft);
        border-radius: 999px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .api-hero__title { font-size: clamp(1.85rem, 7vw, 2.3rem); }
    .api-section { padding-top: 2.25rem; }
    /* 헤더(4.25rem)에 붙어 있는 목차(약 3.6rem)까지 피해야 제목이 가리지 않는다. */
    .api-main,
    .api-section,
    .api-error { scroll-margin-top: 8.5rem; }
}

/* 자동 감지 표본이 부족한 택배사. 신뢰 등급과 같은 색이면 "다 된다"로 읽힌다. */
.api-badge--weak { background: rgba(183, 90, 24, 0.14); color: var(--warning); }

/* 주의 노트. 강조(accent)와 달리 "이걸 그대로 믿지 마세요" 쪽이다. */
.api-note--warn {
    border-left-color: var(--warning);
    background: rgba(183, 90, 24, 0.1);
}

/* ---------- 언어 탭 ---------- */

.api-tabs { margin: 1.25rem 0 1.5rem; }

.api-tabs__list {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line-soft);
}

.api-tabs__list::-webkit-scrollbar { display: none; }

.api-tabs__tab {
    flex: 0 0 auto;
    padding: 0.5rem 0.85rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease;
}

.api-tabs__tab:hover { color: var(--ink); }

.api-tabs__tab[aria-selected="true"] {
    color: var(--orange-deep);
    border-bottom-color: var(--orange);
}

.api-tabs__tab:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}

.api-tabs__panel:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.api-tabs__panel .api-code { margin-top: 0.9rem; }

/* 바로가기 링크. 문장 속 평범한 a는 링크인지 알아채기 어려워서, 눌러야 할
   곳은 칩 모양으로 도드라지게 한다. */
.api-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--orange);
    border-radius: 999px;
    background: var(--orange-wash);
    color: var(--orange-deep);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 140ms ease;
}

.api-shortcut:hover { background: #ffd0bd; }

.api-shortcut__go { font-size: 0.72em; opacity: 0.75; }

/* 스펙 경로 자체도 눌러서 받을 수 있다. */
.api-endpoint__path--link {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
}

.api-endpoint__path--link:hover { color: var(--orange-deep); }

.api-download {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--orange);
    border-radius: 0.35rem;
    background: var(--orange);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.api-download:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

/* 히어로의 칩 중 하나만 링크다(OpenAPI 내려받기). 옆의 .api-chip--muted와
   글자색·테두리가 똑같아 누를 수 있는 것인지 알 수가 없었다. 링크 칩에는
   실선 주황 테두리와 밑줄을 준다 — 색 하나에만 기대지 않는다. */
a.api-chip {
    gap: 0.3rem;
    border-color: var(--orange);
    border-style: solid;
    /* 글자는 --ink-soft 그대로 둔다. --orange-deep은 이 칩 배경
       (--paper-strong) 위에서 4.38:1이라 본문 기준(4.5:1)에 못 미친다.
       구분은 밑줄과 실선 주황 테두리가 맡는다 — 색 하나에 기대지 않는다. */
    color: var(--ink-soft);
    text-decoration: none;
}

/* 밑줄은 a가 아니라 글자를 감싼 span에 건다. a에 걸면 flex 아이템인
   아이콘 글리프 밑으로도 줄이 지나가 지저분해진다. */
a.api-chip .api-chip__label {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

a.api-chip:hover {
    background: var(--orange-wash);
    border-color: var(--orange-deep);
}

a.api-chip:hover .api-chip__label { text-decoration-thickness: 2px; }

/* 코드블록 복사 버튼. 라벨 줄 오른쪽에 붙는다. */
.api-code__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.api-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid rgba(232, 228, 218, 0.28);
    border-radius: 0.3rem;
    background: transparent;
    color: rgba(232, 228, 218, 0.82);
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

.api-copy:hover {
    background: rgba(232, 228, 218, 0.12);
    border-color: rgba(232, 228, 218, 0.5);
}

.api-copy:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }