/* AI 법률리서치 / 검색 tab card styling — see docs/INTEGRATION.md §12 in
   the mirae repo for the pattern this implements (adapted from that
   repo's own dev-only prototype, public/mock-lawnb-s1.html). */
.mirae-tab-panel__tabs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mirae-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
}
.mirae-tab--active {
    background: #f97316;
    color: #fff;
    /* Explicit "bookmark" overlap instead of relying on the panel's own
       rounded-corner gap to accidentally reveal this tab's color
       underneath. Extending this tab's own box down over the panel by
       4px, above #mirae-root's normal z-index:5 via z-index:10,
       guarantees it shows in the resting state regardless of what's
       rendered inside the panel. See the #mirae-root:has(...) rule below
       for why hovering/focusing the AI tab's card specifically covers
       this again instead of the reverse. */
    position: relative;
    z-index: 10;
    margin-bottom: -4px;
}
/* While the AI tab's card (mirae's own search-input-box, rendered inside
   #mirae-root) is actively being typed into or hovered, its own
   hover/focus ring (mirae repo's search-top.css) should wrap the WHOLE
   box cleanly instead of the active tab's bookmark overlap (z-index:10
   above) cutting a notch out of the top of it — the tab hiding behind
   the ring at that moment is fine; a broken-looking ring is not. Only
   #mirae-root itself needs the temporary z-index boost (above the tab's
   10) for its own content to paint over the tab; nothing about the
   ring/tab overlap logic itself needs to change. */
#mirae-root:has(.search-input-box:hover),
#mirae-root:has(.search-input-box:focus-within) {
    z-index: 20;
}
.mirae-tab__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f97316;
    font-size: 10px;
    font-weight: 700;
}
.mirae-tab__icon {
    font-size: 14px;
    opacity: 0.85;
}
.mirae-tab-panel__surface {
    border-radius: 6px;
    /* overflow:hidden here clips the legacy search box's own dropdown
       (#keyword-wrap, Css_Plus/layout.css) — that dropdown is
       position:absolute and doesn't add to this surface's own in-flow
       height, so once it opens (well past this box's own short height)
       it got clipped away entirely, with no visible sign anything was
       wrong (.on/visibility/opacity all still correctly applied — just
       invisible). Only the AI tab's rounded-corner card-overlay actually
       needs this clip; mirae-tab.js's showSearchTab()/showAiTab() toggle
       it off/on via this class instead of it being permanently on. */
    overflow: visible;
    /* Negative margin overlaps the surface 4px into the tabs row above.
       (See .mirae-tab-panel__surface--clip below for where the clip
       actually gets applied, only while the AI tab needs it.)
       Since neither has a z-index, the surface (later in DOM) paints
       over the tab in that 4px band EXCEPT where its own border-radius
       carves a corner away — there the active tab's color shows through
       that gap, which is the "tab pokes up onto the white" look. Was
       0 6px 6px 6px (square top-left) so only the right tab ("검색",
       sitting under the rounded top-right corner) ever showed it —
       uniform radius makes the left tab ("AI 법률리서치") show the same
       effect when active. */
    margin-top: -4px;
}
/* Applied only while the AI tab is showing (mirae-tab.js's showAiTab()/
   showSearchTab() toggle it) — clips #mirae-root's card overlay into
   this surface's rounded corners. Never applied while "검색" is active,
   since that clips the legacy search box's own #keyword-wrap dropdown
   away instead (see the overflow comment above). */
.mirae-tab-panel__surface--clip {
    overflow: hidden;
}
/* .search-btn (Css_Plus/layout.css) has no border-radius of its own —
   it's a flush position:absolute square relying entirely on its parent
   .input-box's overflow:hidden + border-radius:10px to clip it into a
   rounded corner. That clip-path can leave a hairline anti-aliasing seam
   at the curve where the parent's rounded background peeks past the
   button's own flat corner — visible here as a faint white sliver along
   the button's right edge (not visible on the original, un-relocated
   search box, so likely a sub-pixel width rounding difference from now
   sitting inside a flex layout). Rounding the button's own corner to
   match removes the seam regardless of the parent clip. Scoped to this
   relocated instance only — the original search box elsewhere isn't
   touched. */
#mirae-tab-search .search-btn {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* 아래 .input-box/#qu 보정은 탭 안(#mirae-tab-search)뿐 아니라, AI 권한이
   없을 때 탭 없이 단독으로 렌더되는 검색창에도 똑같이 필요함 — 이 페이지에
   함께 로드되는 mirae 번들 CSS의 리셋(input/button { background-color:
   transparent; border-radius:0 })이 둘 다에 적용되기 때문. 그래서 두 경우를
   모두 포함하는 #main-container .search-wrap .search-box 기준으로 지정. */
/* .search-btn (position:absolute, right:0/top:0/height:100%) is a DIRECT
   child of .input-box (confirmed via DevTools — .input-box > label+input,
   button.search-btn), but .input-box itself has no `position` set
   anywhere in Css_Plus, so .search-btn skips straight past it and
   resolves against whichever ANCESTOR further up happens to be
   position:relative instead (.search-box, Css_Plus/layout.css:174) —
   a bigger box (margin-top, the dropdown wrapper, etc. all add to it),
   so the button was being sized/positioned against THAT instead, a few
   px taller/offset from .input-box's own visible edges. (An earlier
   attempt targeted .input-div, .input-box's own parent — still one level
   too far removed; still resolved against a slightly different box.)
   .input-box is the actual, tight, correct one — position:relative
   directly on it is the only fix that can't still be off by whatever
   .input-div itself pads/wraps with. */
#main-container .search-wrap .search-box .input-box {
    position: relative;
}
#main-container .search-wrap .search-box .input-box #qu {
    background: white;
}
/* #qu has no custom focus style anywhere in Css_Plus — it never needed
   one, since .mirae-tab-panel__surface's old overflow:hidden clipped the
   browser's own default focus outline away along with everything else
   that escaped this box's short height. Now that that's overflow:visible
   (needed for #keyword-wrap's dropdown), the plain black default outline
   shows too. Suppressing it here instead of restyling it — the box's own
   white background against the page is already the visual focus cue the
   original (un-relocated) search box relies on. */
#main-container .search-wrap .search-box #qu:focus {
    outline: none;
}
/* "검색연산자 안내"(.str-rb)의 인라인 margin-bottom:-24px는 탭 줄 높이에
   맞춘 값 — 탭 없이 검색창이 .tit 바로 뒤에 오면(margin-top:20px) 버튼이
   검색창 위에 걸침. 그 경우에만 덜 내려 검색창과 간격을 둠 (인라인 스타일을
   이기려면 !important 필요). */
#main-container .search-wrap .tit:has(+ .search-box) .str-rb {
    margin-bottom: -12px !important;
}
/* #mirae-root is never moved into this pane (see mirae-tab.js below) —
   it's a plain placeholder reserving the card's visible height, and
   mirae-tab.js overlays #mirae-root (position:absolute — see
   mirae-root--compact in mirae's own globals.css) exactly over this
   element's own box on every resize while the AI tab is active.
   #mirae-tab-ai 전용 — .mirae-tab-panel__surface 자체는 배경이 투명해서
   (흰 카드는 AI 탭에서 mirae 번들이 그리는 카드뿐), 검색 탭에도 같은
   min-height를 주면 검색창 주변 빈 공간이 파란 배경 그대로 드러남. */
#mirae-tab-ai {
    min-height: 160px;
}
/* #mirae-root's absolute-position offsets (mirae-tab.js) are computed
   relative to this element. */
#main-container {
    position: relative;
}
/* .search-wrap .search-box normally carries margin-top:20px (layout.css,
   selector #main-container .search-wrap .search-box — specificity
   1 id + 2 classes) for its original standalone placement directly
   under the page's own title row. Now nested one level deeper under the
   tab panel, that same descendant selector still matches and pushed the
   whole search box down, leaving a blank white gap above it inside
   .mirae-tab-panel__surface. A plain "#mirae-tab-search .search-box"
   override (1 id + 1 class) loses to that on specificity regardless of
   source order — repeating the ancestor chain to match its specificity
   exactly (2 ids + 2 classes) so this override actually wins. */
#main-container .search-wrap #mirae-tab-search .search-box {
    margin-top: 0;
}

/* 480px 이하: 탭 버튼("AI 법률리서치"/"검색") 패딩/폰트만 축소 — 이
   파일엔 지금까지 @media가 전혀 없었고, 고정 너비도 없어 실제 붕괴
   원인은 아니었지만 매우 좁은 화면에서 패딩이 다소 크게 느껴짐. */
@media screen and (max-width: 480px) {
    .mirae-tab-panel__tabs {
        gap: 4px;
    }

    .mirae-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
}