/* SDK 다운로드 (public-spec section 9) -- design-handoffs/asportal-public/
   download sdk/Portal_SDK 다운로드*.png + T) Portal_SDK 다운로드.css (a real
   Figma CSS export for the Tablet main listing, added after the initial
   pixel-sampling pass below). The exact export superseded several
   pixel-sampled guesses: card `border-radius` is a real 12px (not
   --radius-md's 8px -- close enough on a 2x-scale PNG sample to look
   right, but the export says otherwise), the gap between cards is 16px
   (not 24, measured directly from two adjacent "List" layers' left/top
   deltas: 368-352=16 horizontal, 480-464=16 vertical), and release-note
   bullets are a custom 4x4px dot + text row, not a native `<li>` list-
   style bullet.

   **Layout is a staggered/masonry column packing, not a synchronized
   grid** -- confirmed directly from the export's own absolute positions:
   with 3 cards at Tablet's 2-column width, the 3rd card (iOS Swift) sits
   at `left:0, top:480`, directly below card 1 (Android, `top:0,
   height:464` -- 464+16=480), *not* waiting for card 2 (iOS Objective-C,
   `height:491`, taller due to its 2-line title) to finish first. A plain
   `display:grid` 2-column layout would force card 3 down to whichever
   row starts after the tallest card in row 1 (491+16=507), leaving a
   visible gap under the shorter card 1 -- exactly the "it's not a grid"
   complaint. CSS multi-column (`column-count`) is the standard no-JS way
   to get this packing; exactly which card lands in which column is left
   to the browser's own column-balancing (there's no CSS-only way to pin
   "shortest column gets the next card" the way a JS masonry library
   would), but the core visual behavior -- short cards not blocked by a
   tall sibling -- matches.

   Colors/background not touched by the new export (card background,
   footer background, "최신" pill fill) were already pixel-sampled/
   confirmed against existing tokens before this file arrived and are
   unchanged: `--color-border-faint`/`--color-nav-bg`/
   `--color-accent-orange`.

   A second export, `T) Portal_SDK 다운로드> Android SDK.css`, covers 전체
   버전 (all_versions.html) and corrected several more guessed values:
   the per-version `gap` inside a section is 16px, not 24 (this page's
   own rhythm is tighter than the main listing card's); each section's
   own padding is `24px 8px` (24 vertical, 8 horizontal -- not the 24px
   uniform/0-horizontal guessed earlier); the divider between versions is
   `--color-border-light` (#F2F3F5), not `--color-border-faint`
   (#EBEEF1); and the whole list is additionally framed by its own
   top+bottom `--color-border-strong` (#CDD1D5) border, which didn't
   exist in the earlier build at all. The 최신 pill's own padding/font-
   size (`2px 12px`/14px) also differ slightly from the main listing's
   version already built from pixel-sampling. `.sdk-version-section:last-
   child` drops its own bottom divider so it doesn't double up against
   the outer frame's own bottom border sitting immediately below it --
   the export applies the same per-item divider style to every row
   including the last (a Figma component-reuse artifact, not a
   deliberate doubled-border design), so this is a judgment call toward
   the cleaner rendered result rather than a literal reproduction.

   Main listing (index.html): PC 3-column / Tablet 2-column / Mobile
   1-column staggered card layout, one card per SDK engine (Android/iOS
   Objective-C/iOS Swift), each showing only its latest visible version.
   전체 버전 (all_versions.html): a flat divider-separated list, one
   section per historical version of a single engine, no card border --
   confirmed as a genuinely different (non-card) treatment across all
   three PNGs, not a missed style. */

.sdk-grid {
  column-count: 3;
  column-gap: 16px;
}

@media (max-width: 1199px) {
  .sdk-grid {
    column-count: 2;
  }
}

@media (max-width: 767px) {
  .sdk-grid {
    column-count: 1;
  }
}

.sdk-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  border: 1px solid var(--color-border-faint);
  border-radius: 12px;
  background: var(--color-surface);
  overflow: hidden;
  break-inside: avoid;
}

.sdk-card-body {
  padding: 24px;
}

.sdk-card-badge {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
}

.sdk-card-title {
  margin: 0 0 24px;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

/* Shared by both the main listing's card body and the all-versions flat
   list -- "Assets"/"Release Notes" labels, asset download rows, and the
   release-notes bullet list are visually identical in both places. */
.sdk-section-label {
  margin: 0 0 12px;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  color: var(--color-text-faint);
}

.sdk-assets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}

.sdk-assets:last-child {
  margin-bottom: 0;
}

/* 전체 버전's own section rhythm is tighter (16px) than the main
   listing card's (24px) -- confirmed by each export's own numbers, not
   the same value reused across both contexts. */
.sdk-version-section .sdk-assets {
  margin-bottom: 16px;
}

.sdk-version-section .sdk-assets:last-child {
  margin-bottom: 0;
}

.sdk-asset {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 150%;
  letter-spacing: var(--letter-spacing-tight);
}

.sdk-asset .icon {
  flex: none;
  color: var(--color-text-muted);
}

.sdk-asset-link {
  color: var(--color-link);
  text-decoration: none;
  /* A flex item's default min-width is auto (its content's natural
     width), not 0 -- an unbroken filename token with no space/hyphen for
     the browser's default wrap algorithm to break at (e.g. no-space
     .pdf/.tgz names) refuses to shrink and forces the row, and the
     .sdk-asset-size text after it, past the mobile viewport edge (found
     via QA: scrollWidth 394 vs innerWidth 390 at 390px -- same overflow-
     wrap gap already fixed once for #trainingModal's long-token value
     column, modal.css). min-width: 0 lets it actually shrink to the
     row's available space; overflow-wrap: anywhere then lets an
     unbreakable token itself wrap mid-word instead of forcing that
     width. */
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .sdk-asset-link:hover {
    text-decoration: underline;
  }
}

.sdk-asset-size {
  color: var(--color-text-faint);
}

/* Each release-note line is a custom 4x4px dot + text row (`Dot Area`/
   `Dot` in the export) -- not a native `<li>` list-style bullet. The
   dot's own `padding-top: 9px` in the export aligns it to the first
   line's cap-height rather than vertically centering against the full
   (possibly multi-line) text block. */
.sdk-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.sdk-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 150%;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.sdk-note-dot {
  flex: none;
  width: 4px;
  height: 4px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--color-text-faint);
}

.sdk-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  border-top: 1px solid var(--color-border-faint);
  background: var(--color-nav-bg);
  text-decoration: none;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 150%;
  color: var(--color-text-muted);
}

@media (hover: hover) {
  .sdk-card-footer:hover {
    background: var(--color-surface-hover);
  }
}

.sdk-card-footer .icon {
  color: var(--color-text-muted);
}

/* 최신 pill -- all_versions.html only, next to whichever version entry
   is the newest. Fill sampled at rgb(237,119,47), an exact match for
   --color-accent-orange; padding/font-size corrected to the export's
   `2px 12px`/14px (was an earlier pixel-sampled guess of 4px 12px/13px). */
.badge-latest {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-orange);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-inverse);
  white-space: nowrap;
}

/* all_versions.html's flat per-version sections -- no card border, each
   separated by a divider line instead (confirmed distinct from the main
   listing's bordered cards across all three PNGs). Framed top+bottom by
   its own border-strong border, per the export -- didn't exist in the
   earlier pixel-sampled build at all. */
.sdk-version-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
}

.sdk-version-section {
  display: flex;
  flex-direction: column;
  padding: 24px 8px;
  border-bottom: 1px solid var(--color-border-light);
}

.sdk-version-section:last-child {
  border-bottom: none;
}

.sdk-version-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.sdk-version-heading h2 {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}