h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Standard Blazor error-UI hide-by-default rule - missing since app.css was removed and its rules
   were consolidated into this file; without it, #blazor-error-ui (rendered in MainLayout.razor)
   is permanently visible instead of only appearing on an actual unhandled circuit error. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* IconFinder design tokens (MvpUiFinish Visual Revision) - widened content scale, stronger
   typography roles, and a "use shadow only for meaningful grouping" surface policy, replacing the
   prior narrow single-max-width/blanket-shadow approach that read as an internal prototype. */

/* Editorial/Bento redesign (2026-07-13, direct User instruction, not an AgentConfig Request) -
   new Ember accent (replaces the prior blue, which visually collided with Font Awesome's own sky
   blue), warm-tinted neutrals instead of cold slate, and a light/dark pair switched by
   `:root[data-theme]` (set by the inline bootstrap script in App.razor + the Header's toggle
   button via IIconFinderJsService.SetThemeAsync). Token NAMES are unchanged from the prior system
   on purpose - every page already consumes --if-color-*, so only the values move, no per-page
   rewiring needed for the color system itself. */
/* Light accent (2026-08-04, direct User instruction, replacing the 2026-07-13 Ember orange) -
   orange read as "싼티" (cheap) regardless of how sparingly it was applied, so the accent itself
   changes, not just its usage. Ink/near-black (the same hue family as --if-color-text) instead of
   another saturated hue: it cannot collide with any of the 3 Provider brand colors (Bootstrap
   purple, Font Awesome sky-blue, Material green) the way blue or violet would, and near-black
   primary buttons are the actual default in real commercial products (Vercel, Linear, GitHub,
   Notion) rather than a colored accent everywhere. Dark theme's blue is untouched - this was
   scoped to Light only, same as the prior Ember decision. */
:root,
:root[data-theme="light"] {
    --if-color-bg: #faf9f7;
    --if-color-surface: #ffffff;
    --if-color-surface-tint: #f4f1ec;
    --if-color-border: #e7e2d8;
    --if-color-border-strong: #d3ccbd;
    --if-color-text: #16130f;
    --if-color-text-muted: #6b645a;
    --if-color-text-subtle: #9b9284;
    --if-color-primary: #1c1917;
    --if-color-primary-hover: #3f3a35;
    --if-color-primary-soft: #f0ede8;
    --if-color-primary-dark: #0c0a09;
}

:root[data-theme="dark"] {
    /* Direct User instruction (2026-07-13): use the SD.Nexus Showcase dark mode color tone AS-IS
       for Dark, not a re-interpreted one - background/surface/border/text AND the accent itself
       (blue, not this product's own Ember) all taken directly from that reference. Light mode is
       untouched (still Ember) - this instruction was scoped to Dark only. */
    --if-color-bg: #0a0c14;
    --if-color-surface: #12141f;
    --if-color-surface-tint: #171a26;
    --if-color-border: #242838;
    --if-color-border-strong: #333952;
    --if-color-text: #f2f3f7;
    --if-color-text-muted: #9298ab;
    --if-color-text-subtle: #676d82;
    --if-color-primary: #3b82f6;
    --if-color-primary-hover: #2563eb;
    --if-color-primary-soft: #16213d;
    --if-color-primary-dark: #1d4ed8;
    /* Provider "soft" backgrounds are pastel-bright by design for Light; on a dark surface the
       same pastels would blow out as glowing blocks, so Dark gets its own darkened-tint versions
       of the same 3 Provider hues instead of reusing Light's soft values. */
    --if-color-bootstrap-soft: #241c30;
    --if-color-fontawesome-soft: #142430;
    --if-color-material-soft: #142a1c;
}

:root {
    /* Per-provider identity color - the one visual differentiator that makes 3 Provider
       cards/badges read as 3 distinct products instead of 3 identical white boxes. Applied
       consistently across Home/Search/Detail/Saved via .if-provider-accent--{provider}. Kept
       identical across both themes (deliberately not re-tuned per-theme - these are external
       Provider brand references, not this product's own accent). */
    --if-color-bootstrap: #7952b3;
    --if-color-bootstrap-soft: #f3edfa;
    --if-color-fontawesome: #0ea5e9;
    --if-color-fontawesome-soft: #e8f7fd;
    --if-color-material: #16a34a;
    --if-color-material-soft: #eafaf0;
    --if-radius-sm: 6px;
    --if-radius-md: 10px;
    --if-radius-lg: 18px;
    --if-shadow-sm: 0 1px 2px rgba(22, 19, 15, 0.07);
    --if-shadow-md: 0 10px 28px rgba(22, 19, 15, 0.12);
    --if-max-width-narrow: 720px;
    --if-max-width: 1200px;
    /* Typography role system (IconFinderTypographyHierarchy) - 9 explicit roles, each distinct in
       size AND weight AND line-height/contrast, not size alone. Every page reuses these instead of
       inventing its own ad-hoc font-size, so hierarchy reads consistently across Home/Search/
       Detail/Saved/Header/Footer. Role -> variable map:
       Hero Display        -> --if-font-hero (Home Hero title only)
       Page Title           -> --if-font-page-title (Search/Saved/Detail h1-level)
       Section Title        -> --if-font-section-title ("사용 방법", "사용 예시 코드", etc.)
       Item / Card Title    -> --if-font-item-title (an icon's user-facing Name - the single most
                                important identity text on Search cards, Detail, Saved cards)
       Body                 -> --if-font-body (primary descriptive sentences)
       Supporting Text      -> --if-font-supporting (secondary sentences, quieter but still legible -
                                never used for content that is actually important)
       Metadata / Tech Key  -> --if-font-meta (Provider/IconKey/technical fields - deliberately the
                                weakest role, both smallest and lowest-contrast)
       Button Label         -> set directly per component (already sized correctly, unchanged)
       Navigation Label     -> set directly on nav links (already sized correctly, unchanged) */
    /* Editorial Hero scale - fluid via clamp() (no JS, no new font) so the "wide editorial
       typography" direction reads on Desktop without a fixed-size overflow risk on Mobile. */
    --if-font-hero: clamp(2.4rem, 4vw + 1rem, 4.25rem);
    --if-font-page-title: 2rem;
    --if-font-section-title: 1.35rem;
    --if-font-item-title: 1.15rem;
    --if-font-body: 1.05rem;
    --if-font-supporting: 0.92rem;
    --if-font-meta: 0.78rem;
    /* Retained only for a small number of already-narrow technical badges (Icon Detail's Provider/
       Style pills) - not used as the product's default label style anymore. */
    --if-font-label: 0.72rem;
}

body {
    font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    background: var(--if-color-bg);
    color: var(--if-color-text);
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Root-cause fix for Korean mid-word line breaks (Request Section 8.1/12 - confirmed live as
       "검"/"색하세요" and "복"/"사하는"): the CJK default line-breaking rule allows a break between
       any two Korean characters. `word-break: keep-all` restricts breaks to actual word/space
       boundaries (Korean words no longer split mid-syllable-block); `overflow-wrap: break-word`
       stays as a fallback only for a genuinely unbreakable long token so nothing can overflow.
       Applied at body level so every heading/paragraph inherits it; elements that need raw
       character-level wrapping (icon keys, code, long tokens) already carry their own more specific
       overflow-wrap/word-break overrides further down this file and are unaffected. */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Root-cause fix (2026-08-04) - Material Icons rendered small/thin everywhere (Search Result
   grid, Icon Detail hero, Saved cards) while Bootstrap/Font Awesome sized correctly. Google's own
   Material Symbols stylesheet sets `font-size: 24px` directly on `.material-symbols-outlined`
   itself, not inherited - a directly-set font-size always beats whatever size the surrounding
   `.if-icon-preview--hero`/`.if-result-card-preview`/etc. context intends, which Bootstrap/Font
   Awesome's plain `<i>` tags never fight since their own CDN stylesheets set no font-size at all.
   `font-size: inherit` here fixes every call site at once instead of patching each one. The FILL/
   weight/opsz axis values are Google's own documented recommendation for filled, medium-weight
   glyphs that stay crisp from small badges up to a 150px hero size, matching the other two
   providers' visual weight instead of the thin default. */
.material-symbols-outlined {
    font-size: inherit;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

/* Provider identity utilities - one accent color per Provider, reused everywhere a Provider is
   shown (Home trust cards, Search result cards, Detail badge/preview, Saved card label) so the
   3 providers read as 3 distinct things at a glance instead of 3 identical containers. */

.if-provider-accent--bootstrap { --if-accent: var(--if-color-bootstrap); --if-accent-soft: var(--if-color-bootstrap-soft); }
.if-provider-accent--fontawesome { --if-accent: var(--if-color-fontawesome); --if-accent-soft: var(--if-color-fontawesome-soft); }
.if-provider-accent--material { --if-accent: var(--if-color-material); --if-accent-soft: var(--if-color-material-soft); }

/* Shared Product Shell */

.if-shell-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--if-color-surface);
    border-bottom: 1px solid var(--if-color-border);
}

.if-shell-header-inner {
    max-width: var(--if-max-width);
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.if-shell-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--if-color-text);
}

.if-shell-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--if-color-primary) 0%, var(--if-color-primary-dark) 100%);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: var(--if-shadow-sm);
}

.if-shell-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Desktop Hero Polish (Section 8) - brand stronger than Navigation via both size and weight;
   height unchanged (font-size only, no padding/mark size change), so Header height does not grow. */
.if-shell-brand-name {
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.01em;
}

.if-shell-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Nav hover/active kept neutral (not accent-colored) - Landing Overhaul (2026-08-04): the accent
   color was previously applied to nearly every interactive element in the header (nav hover, nav
   active, theme toggle), which is what read as "cheap"/over-saturated. The accent is now reserved
   for the one primary action (`.if-shell-nav-link--primary`) and true primary buttons elsewhere. */
.if-shell-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--if-color-text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}

.if-shell-nav-link:hover {
    color: var(--if-color-text);
    background: var(--if-color-surface-tint);
}

.if-shell-nav-link.active {
    color: var(--if-color-text);
    background: var(--if-color-surface-tint);
}

/* The one accent-colored control in the header - the primary action ("검색"), so it visually
   outranks the theme toggle instead of competing with it on equal footing. */
.if-shell-nav-link--primary {
    color: #fff;
    background: var(--if-color-primary);
}

.if-shell-nav-link--primary:hover {
    color: #fff;
    background: var(--if-color-primary-hover);
}

/* Ghost icon button, deliberately quiet - Landing Overhaul (2026-08-04): the prior bordered filled
   circle read as an amateur widget competing for attention with the primary CTA. A plain small
   icon-only control (no border, no accent hover) is the standard pattern for a secondary/utility
   control in a commercial header. */
.if-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--if-color-text-subtle);
    font-size: 0.92rem;
    cursor: pointer;
    margin-left: 4px;
}

.if-theme-toggle:hover {
    background: var(--if-color-surface-tint);
    color: var(--if-color-text-muted);
}

/* Visual Recovery Pass 2 correction: removed `.if-shell-main { min-height: calc(100vh - 132px) }`,
   found via Pass 1 screenshot review to be exactly the "artificial min-height used to push the
   Footer down" pattern this Request's Section 13.2 explicitly forbids - it was stretching every
   page (including Saved's now-short 1-item Featured state) to near-full-viewport height regardless
   of actual content, creating the residual gap before the Footer. The Footer now follows content
   immediately; a short page is accepted as intentional per Section 13.2 rather than compensated
   with forced height. */

.if-shell-footer {
    border-top: 1px solid var(--if-color-border);
    background: var(--if-color-surface);
    padding: 22px 32px;
}

.if-shell-footer-inner {
    max-width: var(--if-max-width);
    margin: 0 auto;
}

.if-shell-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.if-shell-footer-copyright {
    margin: 14px 0 0;
    color: var(--if-color-text-subtle);
    font-size: 0.78rem;
}

.if-shell-footer-brand-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--if-color-text-subtle);
    font-size: 0.85rem;
}

.if-shell-footer-brand {
    font-weight: 700;
    color: var(--if-color-text-muted);
}

.if-shell-footer-sep {
    color: var(--if-color-border-strong);
}

.if-shell-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.if-shell-footer-links a {
    color: var(--if-color-text-subtle);
    font-size: 0.85rem;
    text-decoration: none;
}

.if-shell-footer-links a:hover {
    color: var(--if-color-text-muted);
    text-decoration: underline;
}

/* Page shell - Search/Detail/Saved use this consistent, deliberately-wide container. Home uses
   its own full-bleed hero band plus this same container for its lower sections. */

.if-page {
    max-width: var(--if-max-width);
    margin: 0 auto;
    padding: 40px 32px 56px;
}

.if-page-title {
    margin: 0 0 4px;
    font-size: var(--if-font-page-title);
    font-weight: 800;
    color: var(--if-color-text);
    letter-spacing: -0.01em;
}

.if-page-subtitle {
    margin: 0 0 20px;
    color: var(--if-color-text-muted);
    font-size: var(--if-font-body);
}

.if-error {
    padding: 12px 16px;
    border: 1px solid #e50000;
    border-radius: var(--if-radius-sm);
    background: #fff4f4;
    color: #900;
    margin-bottom: 16px;
}

.if-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.if-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    font-size: 1.02rem;
    border: 1px solid var(--if-color-border-strong);
    border-radius: var(--if-radius-sm);
    background: var(--if-color-surface);
    color: var(--if-color-text);
}

.if-search-input:focus-visible {
    outline: 2px solid var(--if-color-primary);
    outline-offset: 1px;
}

.if-search-submit {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--if-radius-sm);
    background: var(--if-color-primary);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.if-search-submit:hover {
    background: var(--if-color-primary-hover);
}

/* Search Result topbar */

.if-search-topbar {
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

/* ============================================================
   Home - Visual Foundation (20260713_113000 formal Request)
   Header / Hero / Footer only. One focused, centered search area -
   no left/right split, no KPI/badge/flow sections, no icon mosaic.
   ============================================================ */

/* Home Landing Completion (20260713_160500, Section 8.3) - Home is no longer a single viewport-
   filling Hero screen; it is now the first section of a normal scrolling landing page (Header ->
   Hero -> User Problem -> Workflow -> Core Value -> Final CTA -> Footer). The previous
   `.if-shell-main--home` full-height flex-centering modifier and the Hero's own flex/
   justify-content machinery are removed - `<main>` and `.if-home-hero` now use normal block flow
   with generous, height-independent padding instead of positioning content within "35-55% of the
   viewport". The wide content column and dark ambient glow from the prior Hero Requests are kept
   (Section 8.3 explicitly allows keeping that direction). */
.if-home-hero {
    position: relative;
    padding: 96px 32px 72px;
    overflow: hidden;
}

/* Section 14 - one low-opacity ambient radial glow is the allowed "Background Gradient" effect;
   weaker than H1/Search, not a repeated decorative pattern. The Mobile media query below pins this
   back to a more subtle opacity. */
.if-home-hero-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 780px;
    height: 560px;
    border-radius: 50%;
    background: var(--if-color-primary);
    opacity: 0.15;
    filter: blur(60px);
    pointer-events: none;
}

/* Section 7.1 (prior Hero Request) - kept: ~70% of the Desktop viewport width so the Hero column
   reads as a confident wide landing Hero rather than a narrow center panel. `width: 100%` is
   required alongside `max-width` for this to actually stretch (see the flex-column-center-width
   bug documented in the 13th Request's Report) - `.if-home-hero` is no longer a flex container as
   of this Request, but `width: 100%` is kept regardless since it is harmless and still correct for
   a normal block container. `z-index: 1` keeps H1/Description/Search above the glow. */
.if-home-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: clamp(760px, 70vw, 1010px);
    margin: 0 auto;
    text-align: center;
}

.if-home-hero-title {
    margin: 0 0 18px;
    font-size: clamp(2.6rem, 2.2vw + 1.7rem, 3.7rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--if-color-text);
}

/* Section 7.4 - switched from the dimmer `--if-color-text-muted` token to the page's main text
   color at reduced opacity for stronger contrast, while staying visibly weaker than the solid-white
   H1 and the Search input's full-opacity text. */
/* Fixed a real Light-theme contrast bug found during this Request's verification: the prior
   Request's `rgba(242, 243, 247, 0.78)` is a near-white color hardcoded for Dark theme only - in
   Light theme (white background) it was nearly invisible. Reverted to the theme-aware
   `--if-color-text-muted` token, which resolves correctly in both themes. */
.if-home-hero-desc {
    margin: 0 0 32px;
    color: var(--if-color-text-muted);
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Section 7.5 - Search is the strongest interactive element on the page: a wide unified input+
   button surface with a soft elevation shadow (existing --if-shadow-md token, not a new/heavier
   one) standing it off the background, no glow and no thicker border than the rest of the app. */
.if-home-hero-search {
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: var(--if-color-surface);
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-lg);
    box-shadow: var(--if-shadow-md);
}

.if-home-hero-search-input {
    padding: 22px 26px;
    font-size: 1.2rem;
    border: none;
    border-radius: var(--if-radius-sm);
}

.if-home-hero-search-input:focus-visible {
    outline: 2px solid var(--if-color-primary);
    outline-offset: 2px;
}

.if-home-hero-search-submit {
    padding: 22px 40px;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: var(--if-radius-sm);
}

.if-home-hero-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 0;
}

/* Reused by SearchResult.razor's own recovery/discover chips - kept as the one shared chip style
   across pages rather than duplicating a near-identical rule under a Home-only name. */
.if-hero-example-chip {
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--if-color-surface);
    border: 1px solid var(--if-color-border);
    color: var(--if-color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.if-hero-example-chip:hover {
    border-color: var(--if-color-primary);
    background: var(--if-color-primary-soft);
}

.if-home-hero-iconsets {
    margin: 20px 0 0;
    color: var(--if-color-text-subtle);
    font-size: 0.82rem;
}

/* ============================================================
   Home Feature Highlights (Landing Overhaul 2026-08-04, direct User instruction) - replaces the
   removed Search/Use "Experience" sections that transcluded Search Result's icon grid and Icon
   Detail's code panel into the landing page. This is landing-only marketing content: a plain
   divider-separated row (no card boxes/shadows - Section 4.4 "group with border, not boxes"), one
   accent color reserved for the icon glyph only so the row does not read as 3 identical AI-default
   white cards. */
.if-home-features {
    padding: 64px 32px;
    border-top: 1px solid var(--if-color-border);
    border-bottom: 1px solid var(--if-color-border);
}

.if-home-features-inner {
    max-width: var(--if-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.if-home-feature {
    padding: 0 32px;
    border-left: 1px solid var(--if-color-border);
}

.if-home-feature:first-child {
    padding-left: 0;
    border-left: none;
}

.if-home-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 16px;
    border-radius: var(--if-radius-md);
    background: var(--if-color-primary-soft);
    color: var(--if-color-primary);
    font-size: 1.15rem;
}

.if-home-feature-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--if-color-text);
}

.if-home-feature-desc {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--if-color-text-muted);
}

/* Final CTA - plain neutral surface, no accent wash (the prior orange-tinted background plus
   orange eyebrows/chips/nav-hover everywhere was the "싼티" complaint - one accent color used
   sparingly on primary actions only, not painted across every section). */
.if-home-cta {
    padding: 56px 32px 64px;
    background: var(--if-color-surface-tint);
}

.if-home-cta-inner {
    max-width: var(--if-max-width-narrow);
    margin: 0 auto;
    text-align: center;
}

.if-home-cta-title {
    margin: 0 0 12px;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--if-color-text);
}

.if-home-cta-desc {
    margin: 0 0 28px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--if-color-text-muted);
}

.if-home-cta-search {
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 8px;
    background: var(--if-color-surface);
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-lg);
}

.if-home-cta-search-input {
    padding: 15px 18px;
    font-size: 1rem;
    border: none;
    border-radius: var(--if-radius-sm);
}

.if-home-cta-search-input:focus-visible {
    outline: 2px solid var(--if-color-primary);
    outline-offset: 2px;
}

.if-home-cta-search-submit {
    padding: 15px 28px;
    font-size: 0.98rem;
    font-weight: 700;
    border-radius: var(--if-radius-sm);
}

/* ============================================================
   Search Result
   ============================================================ */

.if-result-summary {
    margin: 0 0 20px;
}

.if-result-summary-query {
    margin: 0 0 6px;
    font-size: var(--if-font-page-title);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--if-color-text);
}

.if-result-summary-state {
    margin: 0;
    color: var(--if-color-text-muted);
    font-size: var(--if-font-body);
}

.if-filter-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 14px 18px;
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-sm);
    background: var(--if-color-surface);
}

.if-filter-label {
    color: var(--if-color-text-subtle);
    font-size: var(--if-font-supporting);
    margin-right: 4px;
}

.if-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.if-filter-chip {
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.if-filter-chip:focus-visible {
    outline: 2px solid var(--if-color-primary);
    outline-offset: 2px;
}

.if-filter-chip {
    background: var(--if-color-surface-tint);
    color: var(--if-color-text-muted);
    border-color: var(--if-color-border);
}

.if-filter-chip--active {
    background: var(--if-color-primary-soft);
    border-color: var(--if-color-primary);
    color: var(--if-color-primary);
}

.if-search-empty-state {
    margin-bottom: 20px;
}

.if-search-empty-state p {
    margin: 0 0 4px;
}

.if-recovery {
    margin: 0 0 20px;
}

.if-recovery-label {
    margin: 0 0 8px;
    color: var(--if-color-text-subtle);
    font-size: 0.85rem;
}

.if-recovery-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.if-empty-state {
    padding: 16px;
    color: var(--if-color-text-subtle);
    font-style: italic;
}

/* Final Screen Structure (Section 7.1/7.4) - flat icon Grid replacing the prior 3-large-Provider-
   panel comparison layout. Every matched candidate across all 3 providers is its own grid item;
   `auto-fill`/minmax gives "4 columns or a responsive width-appropriate grid" on Desktop and
   collapses to 2 columns (Section 7.5) via the Mobile media query below. */
.if-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}

.if-result-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-md);
    background: var(--if-color-surface);
    padding: 18px;
    gap: 12px;
}

.if-result-card-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    max-height: 96px;
    border-radius: var(--if-radius-sm);
    background: var(--if-accent-soft, var(--if-color-surface-tint));
    color: var(--if-accent, var(--if-color-text));
    font-size: 44px;
}

.if-result-card-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Card content order (Section 7.4): 1 preview, 2 user-facing name, 3 iconset name, 4 technical key,
   5/6 actions - the icon's user-facing Name is the strongest text on the card; iconset + match
   status sit between name and key at Metadata weight; the raw technical key is deliberately the
   weakest/smallest role. */
.if-result-card-name {
    font-weight: 700;
    font-size: var(--if-font-item-title);
    color: var(--if-color-text);
    overflow-wrap: anywhere;
}

.if-result-card-caption {
    display: flex;
    align-items: center;
    gap: 8px;
}

.if-result-card-key {
    color: var(--if-color-text-subtle);
    font-size: var(--if-font-meta);
    font-family: "Fira Code", Consolas, monospace;
    overflow-wrap: anywhere;
}

.if-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--if-accent, var(--if-color-primary));
}

.if-provider-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--if-accent, var(--if-color-primary));
}

.if-match-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 10px;
}

.if-match-status--good {
    background: var(--if-color-primary-soft);
    color: var(--if-color-primary);
}

.if-match-status--review {
    background: #fef3c7;
    color: #b45309;
}

.if-match-status--none {
    background: #eee;
    color: #888;
}

.if-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.if-card-action-primary {
    padding: 8px 18px;
    border-radius: var(--if-radius-sm);
    background: var(--if-color-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
}

.if-card-action-primary:hover {
    background: var(--if-color-primary-hover);
}

.if-card-action-secondary {
    padding: 7px 14px;
    border-radius: var(--if-radius-sm);
    background: var(--if-color-surface);
    color: var(--if-color-text-muted);
    border: 1px solid var(--if-color-border-strong);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
}

.if-card-action-secondary:hover {
    border-color: var(--if-color-primary);
    color: var(--if-color-primary);
}

.if-search-discover {
    padding: 24px 28px;
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-md);
    background: var(--if-color-surface);
}

.if-search-discover-title {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--if-color-text);
}

.if-search-discover-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================
   Icon Detail
   ============================================================ */

.if-detail-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--if-color-text-muted);
    text-decoration: none;
    margin: 0 0 20px;
}

.if-detail-back-link:hover {
    color: var(--if-color-primary);
}

.if-detail-hero {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Section 8.3 - Preview Surface is square (or close to it) and the icon fills most of the frame;
   a fixed-width square column (rather than the prior flex:1 rectangle) removes the wide empty
   gradient space the prior layout had. */
.if-detail-preview-panel {
    position: relative;
    flex: 0 0 320px;
    width: 320px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-lg);
    background: linear-gradient(165deg, var(--if-accent-soft) 0%, var(--if-color-surface) 65%);
    overflow: hidden;
}

/* Colored backdrop disc behind the glyph - sized relative to the panel (85%) so it fills most of
   the visible frame instead of floating as a small shape inside empty space. */
.if-icon-preview-backdrop {
    position: absolute;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--if-accent) 0%, transparent 72%);
    opacity: 0.2;
}

.if-icon-preview--hero {
    position: relative;
    font-size: 150px;
    line-height: 1;
    color: var(--if-accent);
    filter: drop-shadow(0 8px 20px rgba(15, 23, 42, 0.12));
}

.if-detail-identity {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-width: 0;
}

.if-detail-identity h1 {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.if-detail-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.if-detail-provider-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--if-accent-soft, var(--if-color-primary-soft));
    color: var(--if-accent, var(--if-color-primary));
    font-size: 0.85rem;
    font-weight: 700;
}

.if-detail-style-badge {
    background: #f1f5f9;
    color: var(--if-color-text-muted);
}

.if-detail-key {
    color: var(--if-color-text-subtle);
    font-size: 0.95rem;
    font-family: "Fira Code", Consolas, monospace;
}

.if-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.if-primary-action {
    padding: 14px 30px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--if-radius-sm);
    background: var(--if-color-primary);
    color: #fff;
    cursor: pointer;
}

.if-primary-action:hover {
    background: var(--if-color-primary-hover);
}

.if-secondary-actions {
    display: flex;
    gap: 8px;
}

.if-secondary-action {
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--if-color-border-strong);
    border-radius: var(--if-radius-sm);
    background: var(--if-color-surface);
    color: var(--if-color-text-muted);
    cursor: pointer;
}

.if-secondary-action:hover:not(:disabled) {
    border-color: var(--if-color-primary);
    color: var(--if-color-primary);
}

.if-secondary-action--active {
    background: var(--if-color-primary-soft);
    border-color: var(--if-color-primary);
    color: var(--if-color-primary);
}

.if-secondary-action:disabled {
    color: #bbb;
    cursor: not-allowed;
}

.if-copy-feedback {
    margin: 0 0 8px;
    font-size: 0.85rem;
}

.if-copy-feedback--success {
    color: #15803d;
}

.if-copy-feedback--error {
    color: #b91c1c;
}

.if-saved-nav-link {
    display: inline-block;
    margin: 0 0 20px;
    font-size: 0.85rem;
    color: var(--if-color-primary);
    text-decoration: none;
    font-weight: 600;
}

.if-saved-nav-link:hover {
    text-decoration: underline;
}

/* Usage snippet panel - one coherent work surface */

.if-snippet-section {
    margin: 0 0 28px;
    padding: 24px 26px;
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-md);
    background: var(--if-color-surface);
}

.if-snippet-section h2 {
    font-size: var(--if-font-section-title);
    margin: 0 0 10px;
}

.if-snippet-note {
    margin: 0 0 8px;
    color: var(--if-color-text-muted);
    font-size: 0.88rem;
}

.if-snippet-note--warning {
    color: #b45309;
}

.if-snippet-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}

.if-snippet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.if-snippet-tab {
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--if-color-border-strong);
    border-radius: 999px;
    background: var(--if-color-surface);
    cursor: pointer;
}

.if-snippet-tab--active {
    background: var(--if-color-primary);
    border-color: var(--if-color-primary);
    color: #fff;
}

.if-code-block {
    margin: 0;
    padding: 18px;
    border-radius: var(--if-radius-sm);
    background: #0f172a;
    color: #f8fafc;
    font-family: "Fira Code", Consolas, monospace;
    font-size: 0.9rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Metadata - merged into the snippet section as a quiet footer strip (Visual Recovery), no longer
   its own bordered box - one fewer stacked container on the page. */

.if-meta-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--if-color-border);
}

.if-meta-field {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.85rem;
}

.if-meta-field-label {
    color: var(--if-color-text-subtle);
    font-size: var(--if-font-meta);
}

.if-meta-field-value {
    color: var(--if-color-text-muted);
    font-weight: 600;
}

.if-advanced-details {
    flex-basis: 100%;
    margin-top: 4px;
}

.if-advanced-details summary {
    cursor: pointer;
    color: var(--if-color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.if-advanced-details[open] summary {
    margin-bottom: 8px;
}

.if-detail-list dt {
    font-weight: 600;
    margin-top: 8px;
    font-size: 0.82rem;
}

.if-detail-list dd {
    margin: 0 0 4px;
    color: var(--if-color-text-muted);
    font-size: 0.82rem;
}

.if-detail-tokens {
    font-size: 0.8rem;
    color: var(--if-color-text-muted);
    word-break: break-word;
}

/* License notice - deliberately quiet, supplementary */

.if-license-section {
    margin: 0 0 28px;
    padding: 12px 18px;
    border-left: 3px solid var(--if-color-border-strong);
    color: var(--if-color-text-subtle);
}

.if-license-section h2 {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--if-color-text-muted);
}

.if-license-notice {
    margin: 0 0 4px;
    font-size: 0.8rem;
}

.if-license-link {
    font-size: 0.8rem;
    color: var(--if-color-primary);
    text-decoration: none;
}

.if-license-link:hover {
    text-decoration: underline;
}

.if-related-section h2 {
    font-size: var(--if-font-section-title);
    margin: 0 0 4px;
}

.if-related-note {
    margin: 0 0 16px;
    color: var(--if-color-text-subtle);
    font-size: 0.85rem;
}

.if-related-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* No individual card border per tile (Visual Recovery) - a flat hover-highlight list instead of a
   grid of small boxes, so Related Icons doesn't add another repeated-box pattern to the page. */
.if-related-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border-radius: var(--if-radius-md);
    text-decoration: none;
    color: inherit;
    font-size: 0.85rem;
    background: transparent;
    text-align: center;
}

.if-related-chip:hover {
    background: var(--if-accent-soft, var(--if-color-surface-tint));
}

.if-related-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--if-radius-sm);
    background: var(--if-accent-soft, var(--if-color-surface-tint));
    color: var(--if-accent, var(--if-color-text));
    font-size: 30px;
}

.if-related-key {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ============================================================
   Saved Icons
   ============================================================ */

.if-saved-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
}

.if-saved-header-text {
    max-width: 640px;
}

.if-saved-count-line {
    margin: 4px 0 0;
    color: var(--if-color-text-muted);
    font-size: var(--if-font-body);
    font-weight: 600;
}

.if-saved-storage-note {
    color: var(--if-color-text-subtle);
    font-size: var(--if-font-meta);
    font-weight: 400;
}

.if-saved-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.if-saved-new-search-link {
    padding: 9px 16px;
    border: 1px solid var(--if-color-border-strong);
    border-radius: var(--if-radius-sm);
    color: var(--if-color-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.if-saved-new-search-link:hover {
    border-color: var(--if-color-primary);
    color: var(--if-color-primary);
}

.if-saved-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.if-saved-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.if-saved-sort-label {
    color: var(--if-color-text-muted);
    font-size: 0.82rem;
}

.if-saved-sort-select {
    padding: 6px 10px;
    font-size: 0.85rem;
    border: 1px solid var(--if-color-border-strong);
    border-radius: 6px;
    background: var(--if-color-surface);
    color: var(--if-color-text);
}

.if-saved-empty {
    padding: 56px 24px;
    margin-bottom: 24px;
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-lg);
    background: var(--if-color-surface);
    text-align: center;
}

.if-saved-empty-icon {
    font-size: 3rem;
    color: var(--if-color-border-strong);
    margin-bottom: 14px;
}

.if-saved-empty-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
}

.if-saved-empty-hint {
    margin: 0 auto 20px;
    max-width: 420px;
    color: var(--if-color-text-muted);
    font-size: 0.92rem;
}

.if-saved-empty-cta {
    display: inline-block;
    padding: 12px 26px;
    border-radius: var(--if-radius-sm);
    background: var(--if-color-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
}

.if-saved-empty-cta:hover {
    background: var(--if-color-primary-hover);
}

/* Final Screen Structure (Section 9.1/9.3) - one Grid system for every saved count (no separate
   1-item Featured layout, no Provider/discovery filler panel). `auto-fill` with a capped max width
   means a lone card stays card-sized instead of stretching to fill the row. */
.if-saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
    gap: 18px;
    margin-bottom: 28px;
}

.if-saved-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-md);
    background: var(--if-color-surface);
    padding: 20px;
    gap: 16px;
}

.if-saved-card-provider {
    color: var(--if-accent, var(--if-color-text-subtle));
    font-size: var(--if-font-meta);
    font-weight: 700;
    text-transform: capitalize;
}

.if-saved-card-link {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

.if-saved-card-link:hover .if-saved-card-name {
    color: var(--if-color-primary);
}

.if-saved-card-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    border: 1px solid var(--if-color-border);
    border-radius: var(--if-radius-md);
    background: var(--if-accent-soft, var(--if-color-surface-tint));
    color: var(--if-accent, var(--if-color-text));
    font-size: 52px;
}

.if-saved-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.if-saved-card-name {
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--if-color-text);
}

.if-saved-card-key {
    color: var(--if-color-text-subtle);
    font-size: var(--if-font-meta);
    font-family: "Fira Code", Consolas, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.if-saved-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--if-color-border);
}

.if-saved-primary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.if-saved-copy {
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    border-radius: var(--if-radius-sm);
    background: var(--if-color-primary);
    color: #fff;
    cursor: pointer;
}

.if-saved-copy:hover {
    background: var(--if-color-primary-hover);
}

.if-saved-card-detail-link {
    padding: 8px 14px;
    font-size: 0.82rem;
    border: 1px solid var(--if-color-border-strong);
    border-radius: var(--if-radius-sm);
    color: var(--if-color-text-muted);
    text-decoration: none;
    font-weight: 600;
}

.if-saved-card-detail-link:hover {
    border-color: var(--if-color-primary);
    color: var(--if-color-primary);
}

.if-saved-remove {
    padding: 4px 2px;
    font-size: 0.76rem;
    border: none;
    background: none;
    color: var(--if-color-text-subtle);
    text-decoration: underline;
    cursor: pointer;
}

.if-saved-remove:hover,
.if-saved-remove:focus-visible {
    color: #b91c1c;
}

@media (max-width: 1024px) {
    .if-result-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    /* Section 5.2 - Mobile Header stays on one line (IconFinder left, 검색/저장한 아이콘 right).
       The base header allows wrapping for very narrow desktop windows; Mobile overrides it to
       nowrap and trims gaps/sizes so brand + nav fit one row at 390px. */
    .if-shell-header-inner {
        padding: 10px 16px;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .if-shell-brand-mark {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .if-shell-brand-name {
        font-size: 1.15rem;
    }

    /* Section 7 Mobile requires 브랜드명 + 검색 + 저장 + Theme toggle on one line - 홈 is not a
       separate nav item here (removed per the Home Visual Foundation Request), so 2 links + the
       toggle fit alongside the full brand name without needing to hide it. */
    .if-shell-nav {
        gap: 2px;
    }

    .if-shell-nav-link {
        padding: 6px 7px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .if-theme-toggle {
        width: 30px;
        height: 30px;
        margin-left: 0;
    }

    .if-page {
        padding: 24px 16px 40px;
    }

    /* Section 8.1/17 requires Search visible in Mobile's first viewport - reduced top padding so
       the search box isn't pushed below the fold by hero padding alone. */
    .if-home-hero {
        padding: 40px 20px 48px;
    }

    /* Mobile H1 size is set directly rather than inheriting Desktop's enlarged clamp scaled down,
       per Section 10 "Desktop 보정을 그대로 축소해 과도하게 큰 H1이 되지 않게 한다" - keeps the
       nbsp-based "한 곳에서" 2-line wrap unaffected. */
    .if-home-hero-title {
        font-size: 2.05rem;
        line-height: 1.35;
    }

    .if-home-hero-desc {
        font-size: 0.95rem;
        margin-bottom: 24px;
    }

    .if-home-hero-search {
        flex-direction: column;
        border-radius: var(--if-radius-md);
    }

    /* Mobile stays at the original, more subtle glow opacity - the 0.15 version above is
       Desktop-scaled. */
    .if-home-hero-glow {
        opacity: 0.06;
    }

    .if-home-features {
        padding: 40px 20px;
    }

    .if-home-features-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .if-home-feature {
        padding: 0 0 0 0;
        border-left: none;
        border-top: 1px solid var(--if-color-border);
        padding-top: 24px;
    }

    .if-home-feature:first-child {
        border-top: none;
        padding-top: 0;
    }

    .if-home-cta {
        padding: 32px 20px 40px;
    }

    .if-home-cta-title {
        font-size: 1.4rem;
    }

    .if-home-cta-search {
        flex-direction: column;
        border-radius: var(--if-radius-md);
    }

    /* 2-column Result Grid on Mobile (Section 7.5); a further-narrow breakpoint below drops to 1. */
    .if-result-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .if-result-card-preview {
        max-height: 72px;
        font-size: 32px;
    }

    .if-result-card {
        padding: 14px;
    }

    .if-card-actions {
        flex-wrap: wrap;
    }

    .if-card-action-primary,
    .if-card-action-secondary {
        flex: 1 1 auto;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .if-detail-hero {
        flex-direction: column;
        gap: 20px;
    }

    .if-detail-preview-panel {
        width: 100%;
        flex-basis: auto;
    }

    .if-icon-preview--hero {
        font-size: 96px;
    }

    .if-detail-identity h1 {
        font-size: 1.5rem;
    }

    .if-action-row {
        flex-wrap: wrap;
    }

    .if-primary-action {
        flex: 1 1 100%;
        text-align: center;
    }

    .if-saved-header {
        flex-direction: column;
        align-items: stretch;
    }

    .if-saved-header-actions {
        justify-content: flex-start;
    }

    /* Section 9.5 - 2-column Grid preferred on Mobile; a further-narrow breakpoint below drops to 1
       for long names/cramped action buttons. */
    .if-saved-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* The Desktop card lays icon and text out horizontally with a fixed 104px preview - at 2-column
       mobile card width that overflows the card. Stack preview above text instead, matching the
       Search Result card's mobile pattern. */
    .if-saved-card {
        padding: 14px;
    }

    .if-saved-card-link {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .if-saved-card-preview {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .if-saved-card-actions {
        flex-wrap: wrap;
    }

    .if-saved-primary-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    .if-saved-copy,
    .if-saved-card-detail-link {
        flex: 1 1 auto;
        text-align: center;
    }

    .if-shell-footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* Section 9 Mobile - Brand and Description separated onto their own lines (the Desktop inline
       "Brand · Description" row reads too cramped stacked at narrow width), nav gets breathing room
       before Copyright, and both stay at a readable size instead of shrinking further. */
    .if-shell-footer {
        padding: 28px 20px 22px;
    }

    .if-shell-footer-brand-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 0.88rem;
    }

    .if-shell-footer-sep {
        display: none;
    }

    .if-shell-footer-copyright {
        margin-top: 20px;
        font-size: 0.8rem;
    }
}

/* Section 7.5/9.5 - only a very narrow screen (well below the 390px standard mobile check
   viewport) drops the Search Result / Saved Icons grid to 1 column. */
@media (max-width: 360px) {
    .if-result-grid,
    .if-saved-grid {
        grid-template-columns: 1fr;
    }
}