/* Compact mobile layout. Keep this sheet after the section styles.
   Page/section titles: 10px smaller than their previous mobile size.
   Body copy and item names: 2px smaller. Desktop/tablet stay unchanged. */
@media (width <= 720px) {
  .figma-layout { font-size: 14px; }
  .figma-layout .hero h1 { font-size: clamp(16px, calc(6.4vw - 10px), 34px); }
  .figma-layout .hero { min-height: 420px; }
  .figma-layout .hero-content { gap: 24px; }
  .figma-layout .hero .hero-start { font-size: 16px; }
  .figma-layout #story h2,
  .figma-layout #problems h2 { font-size: 14px; }
  .figma-layout #story p { font-size: 14px; margin-top: 12px; }
  .figma-layout #features .section-heading h2,
  .figma-layout #new h2,
  .figma-layout #market .section-heading h2 { font-size: 22px; }
  .figma-layout .participation h2,
  .figma-layout .faq h2 { font-size: 18px; }
  .figma-layout #features .section-heading > p,
  .figma-layout #market .section-heading > p { font-size: 16px; }
  .figma-layout #features .section-heading,
  .figma-layout #new > .container > .section-heading,
  .figma-layout #market .section-heading { margin-bottom: 24px; }

  /* Numbered problem rows replace the stacked cards. */
  .figma-layout #problems .problem-grid { gap: 0; }
  .figma-layout #problems .problem-grid article {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 6px;
    min-height: 0;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--soft-stroke);
    border-radius: 0;
    background: transparent;
  }
  .figma-layout #problems .problem-grid .number {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
  }
  .figma-layout #problems .problem-grid h3 {
    grid-column: 2;
    margin: 0;
    font-size: 20px;
  }
  .figma-layout #problems .problem-grid h3 br { display: none; }
  .figma-layout #problems .problem-grid p { grid-column: 2; font-size: 14px; }

  /* Product illustration scales as one canvas; callouts become a list. */
  .figma-layout #solution .solution-visual { width: 88%; max-width: 320px; margin-inline: auto; }
  .figma-layout #solution .solution-callouts { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 16px; }
  .figma-layout #solution .solution-callouts li {
    padding: 12px 0;
    border-bottom: 1px solid var(--soft-stroke);
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    box-shadow: none;
  }
  .figma-layout #solution .solution-caption { font-size: 14px; margin-top: 20px; }

  /* Compact feature rows retain a tappable thumbnail and image preview. */
  .figma-layout #features .feature-grid { gap: 0; }
  .figma-layout #features .feature-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--soft-stroke);
    border-radius: 0;
    background: transparent;
  }
  .figma-layout #features .card-content { grid-column: 1; grid-row: 1; min-height: 0; }
  .figma-layout #features .card-copy { gap: 6px; }
  .figma-layout #features .card-title { font-size: 18px; }
  .figma-layout #features .card-body { font-size: 14px; }
  .figma-layout #features .feature-visual {
    grid-column: 2;
    grid-row: 1;
    width: 96px;
    aspect-ratio: 582 / 380;
    margin: 0;
  }
  .figma-layout #features .feature-media { border-radius: 8px; }
  .figma-layout #features button.feature-media::after {
    content: "크게 보기";
    right: 4px;
    bottom: 4px;
    display: grid;
    place-items: center;
    padding: 2px 6px;
    font-size: 10px;
  }
  .figma-layout #features .feature-placeholder { padding: 8px; font-size: 12px; }
  .figma-layout #features .feature-chip,
  .figma-layout #features .file-badge { display: none; }

  .figma-layout #new .spotlight { gap: 20px; }
  .figma-layout #new .spotlight h3 { font-size: 24px; }
  .figma-layout #new .spotlight-copy > p { font-size: 14px !important; }
  .figma-layout #new .spotlight-visual { width: 88%; max-width: 280px; align-self: center; }
  .figma-layout #new .spotlight-chip { display: none; }
  .figma-layout #new .figma-prompts,
  .figma-layout #new .spotlight-reverse .figma-prompts { margin-top: 16px; gap: 0; }
  .figma-layout #new .figma-prompts p {
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid var(--soft-stroke);
    border-radius: 0;
    font-size: 12px;
    box-shadow: none;
  }
  .figma-layout #new .prompt-send { width: 24px; height: 24px; flex-basis: 24px; }
  .figma-layout #new .prompt-send img { width: 16px; height: 16px; }

  /* Agent list contains only the name and description, including placeholders. */
  .figma-layout #market .agent-examples-heading h3 { font-size: 16px; }
  .figma-layout #market .agent-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .figma-layout #market .agent-card {
    display: block;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--soft-stroke);
    border-radius: 0;
    background: transparent;
  }
  .figma-layout #market .agent-card .card-media,
  .figma-layout #market .agent-card .card-media.placeholder { display: none; }
  .figma-layout #market .card-content,
  .figma-layout #market .card-copy { gap: 6px; }
  .figma-layout #market .agent-card .card-title { font-size: 18px; }
  .figma-layout #market .agent-card .card-body { font-size: 13px; }
  .figma-layout #market .center-action .button { font-size: 16px; }

  .figma-layout .participation-grid { gap: 0; }
  .figma-layout .participation-grid article {
    padding: 20px 0;
    border-bottom: 1px solid var(--soft-stroke);
    border-radius: 0;
    background: transparent;
  }
  .figma-layout .participation-grid h3 { font-size: 20px; margin-bottom: 16px; }
  .figma-layout .participation-grid .button { font-size: 14px; }
  .figma-layout .faq-heading > p:not(.eyebrow) { font-size: 14px; }
  .figma-layout .faq-list { gap: 0; }
  .figma-layout .faq-list details {
    padding-inline: 0;
    border: 0;
    border-bottom: 1px solid var(--soft-stroke);
    border-radius: 0;
    background: transparent;
  }
  .figma-layout .faq-list summary,
  .figma-layout .faq-list details > p { font-size: 12px; }
  .figma-layout .button-text,
  .figma-layout .footer .button-text { font-size: 12px !important; }
  .figma-layout .footer-main p,
  .figma-layout .footer-links a { font-size: 12px; }

  /* Secondary pages share the mobile type scale. */
  .secondary-page { font-size: 14px; }
  .secondary-page h1 { font-size: 20px; }
  .secondary-page .section-heading > p:not(.eyebrow) { font-size: 14px; }
  .secondary-page .security-description,
  .secondary-page .security-list p { font-size: 12px; }
  .secondary-page .security-list h3 { font-size: 14px; }
  .secondary-page .security-list { gap: 0; }
  .secondary-page .security-list > li {
    padding: 16px 0;
    border-bottom: 1px solid var(--soft-stroke);
    border-radius: 0;
    background: transparent;
  }
  .secondary-page .security-media { min-height: 200px; }
  .secondary-page .case-media { min-height: 200px; }

  .site-header .site-nav-link { font-size: 14px; }
  .site-header .site-case-links a,
  .site-header .site-menu-toggle { font-size: 12px; }
  .use-cases-page .cases-intro h1 { font-size: 24px; }
  .use-cases-page .cases-lead,
  .use-cases-page .case-heading > p,
  .use-cases-page .case-story-copy > p,
  .use-cases-page .case-prompt,
  .use-cases-page .case-detail p,
  .use-cases-page .case-role p,
  .use-cases-page .scene-description,
  .use-cases-page .example-conversation p,
  .use-cases-page .case-application .application-copy { font-size: 14px; }
  .use-cases-page .case-heading h2 { font-size: 18px; }
  .use-cases-page .case-application h2 { font-size: 16px; }
  .use-cases-page .case-story h3 { font-size: 19px; }
  .use-cases-page .case-detail h3,
  .use-cases-page .case-role h3 { font-size: 18px; }
  .use-cases-page .case-subheading,
  .use-cases-page .case-scene h3 { font-size: 20px; }
  .use-cases-page .cases-index,
  .use-cases-page .case-three,
  .use-cases-page .case-scenes,
  .use-cases-page .case-flow,
  .use-cases-page .tool-examples { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .use-cases-page .cases-index a,
  .use-cases-page .case-story,
  .use-cases-page .case-detail,
  .use-cases-page .case-role,
  .use-cases-page .case-scene,
  .use-cases-page .case-flow > div,
  .use-cases-page .case-application,
  .use-cases-page .tool-examples li {
    padding: 16px 0;
    border-bottom: 1px solid var(--soft-stroke);
    border-radius: 0;
    background: transparent;
  }
  .use-cases-page .case-story figure { width: 88%; max-width: 280px; justify-self: center; }
  .use-cases-page .cases-index strong { font-size: 13px; }
  .use-cases-page .case-flow strong { font-size: 16px; }
  .use-cases-page .case-flow p,
  .use-cases-page .education-steps li { font-size: 13px; }
  .use-cases-page .nfc-requests p { font-size: 15px; }
  .use-cases-page .nfc-steps strong { font-size: 14px; }
  .use-cases-page .nfc-steps p { font-size: 12px; }

  .c-page .c-intro h1 { font-size: 22px; }
  .c-page .c-lead { font-size: 14px; }
  .c-page .c-panel-heading h2,
  .c-page .c-preview h2 { font-size: 14px; }
  .c-page .c-intro-note { padding: 16px 0; border-radius: 0; background: transparent; }
  .c-page .c-intro-note strong,
  .c-page .c-intro-note p,
  .c-page .c-preview-description,
  .c-page .c-field > label,
  .c-page .c-group-label,
  .c-page .c-interests > legend,
  .c-page .c-consent { font-size: 12px; }
  .c-page .c-section { padding: 20px 0; border-radius: 0; border-bottom: 1px solid var(--soft-stroke); background: transparent; }
  .c-page .c-primary { font-size: 14px !important; }
}

@media (width < 360px) {
  .figma-layout .hero h1 { font-size: 14px; }
  .figma-layout #features .section-heading h2,
  .figma-layout #new h2,
  .figma-layout #market .section-heading h2 { font-size: 18px; }
  .figma-layout #features .section-heading > p { font-size: 14px; }
  .figma-layout #features .card-title,
  .figma-layout #market .agent-card .card-title { font-size: 16px; }
  .figma-layout #features .feature-card { grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; }
  .figma-layout #features .feature-visual { width: 80px; }
  .figma-layout #solution .solution-caption { font-size: 12px; }
  .secondary-page h1 { font-size: 16px; }
  .use-cases-page .cases-intro h1 { font-size: 19px; }
  .use-cases-page .case-heading h2 { font-size: 15px; }
}