@layer t2.plugin {
/* Path: T2Editor/plugin/search/search.css */
/* Rationale: search 선택자는 플러그인 루트 아래로 제한하고 공개 본문 표현이 필요하면 css/content.css도 함께 수정한다. */

/* ═══ 검색 UI — UI 스펙 09 ═══════════════════════════════════════════════════
   모달이 아니다. 편집기 셸 안에서 툴바 바로 아래에 뜨는 세 층짜리 묶음이다.

     검색줄        높이 1U · 좌우 인셋 1/4U · 섬 단계의 각 · 실선 1px
     보조줄        왼쪽 토글 · 오른쪽 끝 원형 닫기(지름 3/4U, 검색줄 바깥)
     결과 모달     [검색] 을 누른 뒤에만 서고, 검색줄이 닫히면 함께 닫힌다

   자리: 데스크톱은 툴바 아래 1/4U · 좌우 1U, 스마트폰은 툴바 아래 3/8U · 좌우
   1/4U. "툴바 아래"의 기준선은 상수가 아니라 그 순간 실제로 보이는 상단 크롬의
   아래 경계이며, search.js 가 셸 좌표로 재서 --t2-search-chrome 으로 넘긴다.

   스마트폰의 값은 스펙의 숫자를 그대로 쓴다. 한동안은 그러지 못하고 1.77 배로
   환산해서 적었다 — 스펙의 폰 단위가 1U=34px(340px 기기의 1/10)인데 이 편집기의
   폰 단위는 100cqi/6 이었기 때문이다. 그대로 옮기면 폰에서 검색줄이 65px 로 서서
   본문을 절반 넘게 덮었으므로, 렌더된 비례를 지키려면 스펙의 분수를 버려야 했다.
   폰 단위가 100cqi/10 으로 바로잡히면서(710 A-3) 두 단위가 같은 자리에 서고,
   환산은 필요 없어졌다. 환산해 둔 값을 그대로 두면 이제는 그쪽이 어긋난다 —
   3/16U 는 7.4px 이 되어 스펙의 12.75px 을 절반 아래로 떨어뜨린다. */
.t2-search-ui {
    position: absolute;
    top: calc(var(--t2-search-chrome, 0px) + var(--t2-u4));
    left: var(--t2-u);
    right: var(--t2-u);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--t2-s2);
    /* 결과 모달 밖 우측 위의 ✕ 와 보조줄의 원형 닫기는 자기 상자 밖에 선다. */
    overflow: visible;
    animation: t2-search-in 200ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes t2-search-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 검색줄·보조줄 머리(head) — 문서 본문의 자기 안쪽 여백(0.5U)이 이 UI 의 좌우
   인셋(데스크톱 1U)보다 좁아서, 문서 첫 줄이 그 차이만큼 head 옆으로 삐져나와
   상자 모서리에 잘린 채 보인다. head 에만 문서와 같은 배경을 인셋 폭만큼
   좌우로 흘려 그 틈을 메운다 — 결과 모달은 여전히 스크림이 없다. */
.t2-search-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--t2-s2);
}
.t2-search-head::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--t2-u));
    background: var(--t2-canvas-fill);
    z-index: -1;
}

/* 검색줄 — 돋보기 · 입력 · [검색]. 세로 1U 고정이고 44px 이 그 아래 바닥이다. */
.t2-search-bar-box {
    box-sizing: border-box;
    width: 100%;
    height: max(var(--t2-u), var(--t2-hit));
    padding-inline: var(--t2-u4);
    display: flex;
    align-items: center;
    gap: var(--t2-s2);
    background: var(--t2-floating);
    border: 1px solid var(--t2-line);
    border-radius: var(--t2-radius-island);
    box-shadow: var(--t2-shadow-overlay);
    transition: border-color 150ms, box-shadow 150ms;
}
.t2-search-bar-box:focus-within {
    border-color: var(--t2-product);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--t2-product) 20%, transparent),
                var(--t2-shadow-overlay);
}
.t2-search-icon {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--t2-ink-muted);
    -webkit-user-select: none;
    user-select: none;
}
.t2-search-text-input {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--t2-ink);
    font-size: 13px;
}
.t2-search-text-input::placeholder { color: var(--t2-ink-muted); opacity: .75; }
/* 실행은 이 줄의 유일한 결정이므로 제품색을 통째로 칠한다(스펙의 .search-submit-btn).
   높이는 줄 안쪽에서 위아래 한 칸씩 물러선 만큼이다. */
.t2-search-submit-btn {
    flex: 0 0 auto;
    height: calc(100% - var(--t2-u4));
    min-height: 0;
    padding: 0 var(--t2-s4);
    border: 0;
    border-radius: var(--t2-radius-control);
    background: var(--t2-product);
    color: var(--t2-on-product);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms, transform 100ms;
}
.t2-search-submit-btn:hover:not(:disabled) { background: var(--t2-product-strong); }
.t2-search-submit-btn:active:not(:disabled) { transform: scale(.97); }
.t2-search-submit-btn:disabled { opacity: .55; cursor: progress; }

/* 보조줄 — 검색줄 바깥의 자기 줄. 왼쪽 토글, 오른쪽 끝 원형 닫기. */
.t2-search-sub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--t2-s2);
    padding-inline: var(--t2-s1);
}
.t2-search-toggle-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--t2-s1) var(--t2-s3);
    min-width: 0;
}
/* 지름은 검색줄 높이(1U)의 3/4 이고 44px 이 그 아래 바닥이다. */
.t2-search-bar-close-btn {
    flex: 0 0 auto;
    margin-inline-start: auto;
    width: max(var(--t2-u34), var(--t2-hit));
    height: max(var(--t2-u34), var(--t2-hit));
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--t2-radius-pill);
    background: var(--t2-line);
    border: 1px solid var(--t2-line-strong);
    color: var(--t2-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16,20,26,.2);
    transition: transform 150ms var(--t2-ease-spring), background-color 150ms, border-color 150ms;
}
.t2-search-bar-close-btn:hover {
    background: var(--t2-line-strong);
    border-color: var(--t2-product);
    transform: scale(1.08);
}
.t2-search-bar-close-btn:active { transform: scale(.92); }

/* 결과 모달 — 데스크톱 13:4(폭최대·높이축소). 검색줄이 13U 폭이므로 4U 높이가
   그대로 13:4 다. 검색줄과 한 묶음이라 자기 스크림을 깔지 않는다: 검색은 문서를
   보면서 하는 일이고, 덮으면 무엇을 찾는지 보이지 않는다. */
.t2-search-result-modal {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: calc(var(--t2-u) * 4);
    max-height: calc(100dvh - var(--t2-search-chrome, 0px) - var(--t2-u) * 2);
    display: flex;
    flex-direction: column;
    background: var(--t2-paper-soft);
    border: 1px solid var(--t2-line);
    border-radius: var(--t2-radius-island);
    box-shadow: var(--t2-shadow-modal);
    overflow: visible;
    animation: t2-search-in 200ms cubic-bezier(.16, 1, .3, 1);
}
.t2-search-result-modal[hidden] { display: none; }

/* 결과를 닫는 ✕ — 면도 테두리도 없는 글자 하나다(스펙의 .t2-outside-modal-close).

   자리는 머리 밴드의 오른쪽 끝이다. 표면 위로 들어 올리면 검색줄 아래 줄의
   오른쪽 끝을 차지한 원형 닫기와 같은 칸에 겹친다 — 재 보니 21.8×19px 이
   포개져 두 개의 닫기가 하나의 덩어리로 읽혔고, 원의 오른쪽 위를 누르면
   검색 전체가 아니라 결과만 닫혔다. 머리 밴드는 space-between 이라 오른쪽
   칸이 비어 있고, 결과를 닫는 조작이 설 자리가 원래 거기다.

   반드시 검색 UI 안으로 한정한다. 이름만 보고 전역으로 적으면 공용 모달의
   같은 이름 버튼까지 이 규칙이 가져간다 — 플러그인 층은 제품·모듈 층을 이기므로
   공용 배치가 잡아 둔 자리를 덮어, 버튼이 표면의 모서리가 아니라 화면 오른쪽
   끝으로 날아간다. 재 보니 7:6 모달에서 341px 밖이었다. */
.t2-search-res-header > .t2-outside-modal-close {
    /* 공용 규칙(js/utils/modal.css)은 이 이름을 오버레이 격자의 한 칸에 겹쳐 두고
       translate 로 표면 위로 들어 올린다. 결과 모달은 오버레이가 아니라 검색 묶음
       안에 이어 붙는 판이므로 그 들어 올림을 취소한다 — 취소하지 않으면 머리
       밴드에 넣어도 밴드 위로 53px 떠올라 원형 닫기와 다시 겹친다. */
    position: static;
    translate: none;
    grid-area: auto;
    justify-self: auto;
    flex: 0 0 auto;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    padding-inline: var(--t2-s2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--t2-ink-muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    transition: color 150ms, transform 150ms var(--t2-ease-spring);
}
.t2-search-res-header > .t2-outside-modal-close:hover { color: var(--t2-ink); transform: scale(1.15); }
.t2-search-res-header > .t2-outside-modal-close:active { transform: scale(.9); }

/* 머리 밴드는 표면의 각 안쪽에 맞물리므로 테두리 1px 만큼 작은 각을 갖는다. */
.t2-search-res-header {
    flex: 0 0 auto;
    height: var(--t2-u2);
    min-height: 34px;
    padding-inline: var(--t2-s3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--t2-chrome-fill);
    border-bottom: 1px solid var(--t2-line);
    border-radius: calc(var(--t2-radius-island) - 1px) calc(var(--t2-radius-island) - 1px) 0 0;
}
.t2-search-res-title {
    display: flex;
    align-items: center;
    gap: var(--t2-s2);
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--t2-ink);
}
.t2-search-res-heading { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.t2-search-res-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--t2-s2);
    background: var(--t2-base);
    overflow: hidden;
}
.t2-search-results {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--t2-s1);
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* 결과 한 줄: 왼쪽에 읽을 것, 오른쪽에 어디서 왔는지. */
.t2-search-result-item,
.t2-search-editor-item {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--t2-hit);
    padding: var(--t2-s2) var(--t2-s3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--t2-s2);
    text-align: left;
    font: inherit;
    background: var(--t2-floating);
    border: 1px solid var(--t2-line);
    border-radius: var(--t2-radius-control);
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms, transform 150ms;
}
.t2-search-result-item:hover,
.t2-search-editor-item:hover,
.t2-search-editor-item.active {
    background: var(--t2-product-wash);
    border-color: var(--t2-product);
    transform: translateX(2px);
}
.t2-search-res-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.t2-search-res-item-meta {
    flex: 0 0 auto;
    margin-inline-start: var(--t2-s2);
    padding: 2px 6px;
    border-radius: var(--t2-radius-edge);
    background: var(--t2-product-wash);
    color: var(--t2-product-ink);
    font-family: var(--t2-font-mono);
    font-size: 10px;
    white-space: nowrap;
}
.t2-search-result-title,
.t2-search-editor-text {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--t2-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.t2-search-result-snippet,
.t2-search-result-url {
    display: block;
    color: var(--t2-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.t2-search-result-snippet { font-size: 11px; }
.t2-search-result-url { font-family: var(--t2-font-mono); font-size: 10px; }

.t2-search-empty,
.t2-search-error {
    padding: var(--t2-s4);
    text-align: center;
    font-size: 12px;
}
.t2-search-empty { color: var(--t2-ink-muted); }
.t2-search-error { color: var(--t2-danger); }

/* 발치 밴드 — 무엇이 일어날지 한 줄로 알리고, 제품 표식이 오른쪽에 남는다. */
.t2-search-res-footer {
    flex: 0 0 auto;
    height: var(--t2-u4);
    min-height: 24px;
    padding-inline: var(--t2-s3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--t2-s2);
    background: var(--t2-chrome-fill);
    border-top: 1px solid var(--t2-line);
    border-radius: 0 0 calc(var(--t2-radius-island) - 1px) calc(var(--t2-radius-island) - 1px);
}
.t2-search-res-hint {
    font-size: 10px;
    color: var(--t2-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.t2-search-powered {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--t2-ink-muted);
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 760px) {
    /* 스마트폰: 툴바 아래 3/8U, 좌우 1/4U — 스펙 09 가 적은 값 그대로다. */
    .t2-search-ui {
        top: calc(var(--t2-search-chrome, 0px) + var(--t2-u38));
        left: var(--t2-u4);
        right: var(--t2-u4);
    }
    /* 인셋이 1U 에서 1/4U 로 좁아지므로 head 뒤 배경도 같은 폭으로 흘러야 한다. */
    .t2-search-head::before {
        inset: 0 calc(-1 * var(--t2-u4));
    }
    /* 검색줄은 좁은 폭에서도 한 줄이다(세로 1U 고정). 줄바꿈을 허용하면 실행
       버튼이 내려앉아 줄 높이가 1.5U 가 되고 그만큼 결과가 자리를 잃는다. */
    .t2-search-bar-box {
        height: max(var(--t2-u), var(--t2-hit));
        padding-inline: var(--t2-u4);
        gap: var(--t2-s1);
        flex-wrap: nowrap;
    }
    .t2-search-submit-btn { padding: 0 var(--t2-s3); font-size: 11px; }
    /* 닫기는 검색줄 높이의 3/4 — 데스크톱과 같은 규칙이므로 여기서 다시 적지
       않는다. 앞 판본이 27/64U 로 적었던 것은 검색줄이 9/16U 였기 때문이다. */
    /* 결과 모달 4.5U — 스펙 09 의 폰 결과가 7:7.5(LEVEL-1 중간 폼 뷰)다. */
    .t2-search-result-modal {
        height: calc(var(--t2-u) * 4.5);
        max-height: calc(100dvh - var(--t2-search-chrome, 0px) - var(--t2-u));
    }
    .t2-search-res-hint { display: none; }
}

/* 손가락으로 쓸 때 — 스펙의 모바일 검색줄은 32px 이고 그 안의 [검색] 은 22px 이다.
   터치로는 못 누른다. 검색줄이 44px 조작부 하나를 위아래 인셋과 함께 담을 만큼만
   자란다: 44 + 8 + 8 = 60px. 재 보니 그러기 전에는 [검색] 이 25.8px 이었다. */
@media (pointer: coarse) {
    .t2-search-bar-box {
        height: max(var(--t2-u), calc(var(--t2-hit) + var(--t2-s2) * 2));
    }
    .t2-search-submit-btn {
        height: auto;
        min-height: var(--t2-hit);
        align-self: center;
    }
    .t2-search-text-input { height: var(--t2-hit); font-size: 16px; } /* [iOS⚠️] */
    /* 표면 밖 ✕ 는 글자 하나라 상자를 키우면 자리가 밀린다. 보이는 것은 그대로 두고
       투명한 ::after 로 44px 을 덮는다. */
    .t2-search-res-header > .t2-outside-modal-close { position: relative; }
    .t2-search-res-header > .t2-outside-modal-close::after {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        width: var(--t2-hit); height: var(--t2-hit);
        transform: translate(-50%, -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .t2-search-ui, .t2-search-result-modal { animation: none; }
    .t2-search-bar-close-btn, .t2-search-res-header > .t2-outside-modal-close,
    .t2-search-result-item, .t2-search-editor-item { transition-duration: .01ms; }
    .t2-search-bar-close-btn:hover, .t2-search-res-header > .t2-outside-modal-close:hover,
    .t2-search-result-item:hover, .t2-search-editor-item:hover { transform: none; }
}

.t2-editor-search-toggle {
    display: flex;
    align-items: center;
    gap: var(--t2-s1);
}

/* 라벨이 지금 이 토글이 무엇을 맡고 있는지 말한다. 외부 검색 공급자의 이름은
   식별자이므로 고정폭이고, 자동저장은 기능 이름이라 본문 서체로 선다. */
.t2-editor-search-label {
    font-family: var(--t2-font-mono);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.t2-editor-search-label.is-autosave-mode {
    font-family: var(--t2-font-ui);
    font-weight: 600;
    color: var(--t2-ink);
}

/* 제공자 on/off 조작부는 공통 토글 모듈이 그린다(js/utils/toggle.css).
   여기서는 이 문맥의 트랙 치수만 정한다 — 그림을 두 벌로 두면 한쪽만 고쳐진다. */
.t2-editor-search-toggle .t2-toggle {
    --t2-toggle-w: 32px;
    --t2-toggle-h: 18px;
}

/* 결과 묶음(본문/제공자)은 스크롤 안에서 서로 붙지 않게만 떨어진다. 모달 몸통이
   자기 인셋을 이미 갖고 있으므로 여기서 또 여백을 더하면 두 겹이 된다. */
.t2-search-editor-section,
.t2-search-provider-section {
    display: flex;
    flex-direction: column;
    gap: var(--t2-s1);
}

.t2-search-section-title {
    font-size: 11px;

    margin-bottom: var(--t2-s2);
    display: flex;
    align-items: center;
    gap: var(--t2-s1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.t2-search-section-title .material-icons {
    font-size: 14px;
}

.t2-search-editor-text mark {
    background: rgba(251, 191, 36, 0.3);
    color: inherit;
    padding: var(--t2-s1) var(--t2-s1);
    border-radius: 2px;
    font-weight: 500;
}

.t2-search-replace-container {
    padding: var(--t2-s2) var(--t2-s3);
    border-top: 1px solid var(--t2-border, var(--t2-inset));
    margin-top: var(--t2-s1);
}

.t2-search-replace-wrapper {
    display: flex;
    gap: var(--t2-s1);
    align-items: center;
}

.t2-search-replace-input {
    flex: 1;
    min-width: 0;
    padding: var(--t2-s2) var(--t2-s2);
    border: 1px solid var(--t2-border, var(--t2-inset));
    border-radius: var(--t2-radius-control);
    background: transparent;

    outline: none;
}

.t2-search-replace-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--t2-hit);
    height: var(--t2-hit);
    flex: 0 0 auto;
    border: 1px solid var(--t2-border, var(--t2-inset));

    cursor: pointer;
}

/* .t2-search-text-input 은 여기 없다. 그 입력은 자기 테두리가 없는 채로 검색줄
   안을 채우고, 검색줄이 :focus-within 에서 이미 테두리를 제품색으로 바꾸고 2px
   후광을 두른다 — 입력에까지 링을 그리면 2px 떨어진 두 개의 사각형이 겹쳐 보인다.
   포커스 신호는 그 줄이 단독으로 소유한다. */
.t2-search-submit-btn:focus-visible,
.t2-search-bar-close-btn:focus-visible,
.t2-search-res-header > .t2-outside-modal-close:focus-visible,
.t2-search-result-item:focus-visible,
.t2-search-editor-item:focus-visible,
.t2-search-replace-input:focus-visible,
.t2-search-replace-btn:focus-visible {
    outline: 1px solid var(--t2-plugin-product, var(--t2-product));
    outline-offset: 2px;
}

.t2-search-result-block {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--t2-border, var(--t2-inset));
    border-radius: var(--t2-radius-island);
    background: var(--t2-bg, #fff);
}

.t2-search-result-block-title {
    margin: 0 0 var(--t2-s2);
    color: var(--t2-text, var(--t2-product-ink));
    line-height: 1.45;
}

.t2-search-result-block-snippet {
    margin: 0;
    padding: var(--t2-s3);
    overflow-x: auto;
    border-radius: var(--t2-radius-control);
    background: var(--t2-bg-secondary, var(--t2-product-wash));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.t2-search-result-block-snippet code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
}

.t2-search-result-block-source {
    margin: var(--t2-s2) 0 0;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.t2-search-result-block-source a {
    color: var(--t2-plugin-product, var(--t2-product));
}

.t2-search-highlight {
    background-color: rgba(251, 191, 36, 0.25);
    border-radius: 2px;
}

.t2-search-highlight-active {
    outline: 1px solid rgba(245, 158, 11, 0.6);
}

@keyframes t2-spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

/* Dark Mode Overrides */
[data-t2editor-theme="dark"] .t2-search-powered {
    color: var(--t2-ink-muted);
}

[data-t2editor-theme="dark"] .t2-search-editor-item:hover {
    background: var(--t2-product-wash);
    border-color: rgba(99, 102, 241, 0.2);
}

[data-t2editor-theme="dark"] .t2-search-editor-item.active {
    background: rgba(251, 191, 36, 0.1);
}

[data-t2editor-theme="dark"] .t2-search-editor-section {
    border-bottom-color: var(--t2-line);
}

@media (max-width: 640px) {
    .t2-search-replace-input,
    .t2-search-replace-btn {
        min-height: var(--t2-hit);
    }

    .t2-search-result-block {
        padding: var(--t2-s2);
    }
}

/* T2Editor Coding-Agent Rule: Write only concise, high-value comments. Preserve "Path: T2Editor/..." comments; update them when files move—never delete them. */

/* T2Editor /law official plugin design alignment */
/* Shared --t2-plugin-* tokens are owned by css/t2-foundation.css. */
.t2-product-brand { white-space: nowrap; }

/* 검색줄·결과 모달의 기하와 면은 위의 스펙 09 블록이 한 곳에서 소유한다.
   여기는 아직 그 블록이 다루지 않는 조각의 잉크만 남긴다. */
.t2-search-replace-input { min-height: var(--t2-hit); color: var(--t2-plugin-text); font-size: 16px; } /* [iOS⚠️] */
.t2-search-replace-btn { min-height: var(--t2-hit); color: var(--t2-plugin-on-action); background: var(--t2-plugin-action); border-radius: var(--t2-plugin-radius-control); font-weight: 750; }
.t2-search-replace-btn:hover { background: var(--t2-plugin-action-hover); }
.t2-search-section-title { color: var(--t2-plugin-text); font-weight: 800; }
.t2-editor-search-label { color: var(--t2-plugin-text); font-weight: 700; }
.t2-search-api-header .material-icons { color: var(--t2-plugin-dsc-ink); }
.t2-search-highlight, .t2-search-results mark { background: rgba(255, 183, 77, .36); color: inherit; }

/* =========================================================================
   T2Editor /law 706 — plugin scroll and native-control hardening
   ========================================================================= */
:is([class^="t2-search-"], [class*=" t2-search-"]):not([data-t2-modal-surface]) {
  max-width: 100%;
}
:is(:is([class^="t2-search-"], [class*=" t2-search-"]) :is(button, input, textarea, select), button[class^="t2-search-"], button[class*=" t2-search-"], input[class^="t2-search-"], input[class*=" t2-search-"], textarea[class^="t2-search-"], textarea[class*=" t2-search-"], select[class^="t2-search-"], select[class*=" t2-search-"]) {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
:is(:is([class^="t2-search-"], [class*=" t2-search-"]) button, button[class^="t2-search-"], button[class*=" t2-search-"]) {
  -webkit-appearance: none;
  appearance: none;
}
:is(:is([class^="t2-search-"], [class*=" t2-search-"]) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], textarea, select), input:not([type])[class^="t2-search-"], input:not([type])[class*=" t2-search-"], input[type="text"][class^="t2-search-"], input[type="text"][class*=" t2-search-"], input[type="search"][class^="t2-search-"], input[type="search"][class*=" t2-search-"], input[type="email"][class^="t2-search-"], input[type="email"][class*=" t2-search-"], input[type="url"][class^="t2-search-"], input[type="url"][class*=" t2-search-"], input[type="tel"][class^="t2-search-"], input[type="tel"][class*=" t2-search-"], input[type="number"][class^="t2-search-"], input[type="number"][class*=" t2-search-"], input[type="password"][class^="t2-search-"], input[type="password"][class*=" t2-search-"], textarea[class^="t2-search-"], textarea[class*=" t2-search-"], select[class^="t2-search-"], select[class*=" t2-search-"]) {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
:is(:is([class^="t2-search-"], [class*=" t2-search-"]) :is(button, input, textarea, select), button[class^="t2-search-"], button[class*=" t2-search-"], input[class^="t2-search-"], input[class*=" t2-search-"], textarea[class^="t2-search-"], textarea[class*=" t2-search-"], select[class^="t2-search-"], select[class*=" t2-search-"]):focus {
  outline: none;
}
:is(:is([class^="t2-search-"], [class*=" t2-search-"]) :is(button, input, textarea, select), button[class^="t2-search-"], button[class*=" t2-search-"], input[class^="t2-search-"], input[class*=" t2-search-"], textarea[class^="t2-search-"], textarea[class*=" t2-search-"], select[class^="t2-search-"], select[class*=" t2-search-"]):focus-visible {
  outline: 1px solid var(--t2-plugin-product, var(--t2-product));
  outline-offset: 2px;

}
/* 검색줄의 입력만은 예외다. 자기 테두리 없이 줄 안을 채우고, 줄 자신이
   :focus-within 에서 테두리를 제품색으로 바꾸고 2px 후광을 두른다 — 입력에까지
   링을 그리면 2px 떨어진 사각형이 하나 더 겹쳐 보인다. 포커스 신호는 줄이
   단독으로 소유한다. */
.t2-search-bar-box .t2-search-text-input:focus-visible { outline: none; }

.t2-search-results {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.t2-search-results::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.t2-search-result-block-snippet {
  max-width: 100%;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  touch-action: pan-x pinch-zoom;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.t2-search-result-block-snippet::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* T2Editor /law 706 — plugin select indicator after native appearance reset */
:is(:is([class^="t2-search-"], [class*=" t2-search-"]) select, select[class^="t2-search-"], select[class*=" t2-search-"]):not([multiple]):not([size]) {
  padding-inline-end: max(32px, 2.25em);
  background: var(--t2-surface);
  background-position:
    calc(100% - 14px) calc(50% - 1px),
    calc(100% - 9px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Custom drag surfaces own pointer movement and must not trigger native text/image selection. */
:where([data-t2-drag-surface], [draggable="true"], input[type="range"], [role="slider"],
  [class*="drag-handle"], [class*="resize-handle"], [class*="resizer"],
  [class*="crop-handle"], [class*="trim-handle"], [class*="seek-bar"],
  [class*="slider-thumb"], [class*="range-thumb"]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
:where([data-t2-drag-surface], [draggable="true"], input[type="range"], [role="slider"],
  [class*="drag-handle"], [class*="resize-handle"], [class*="resizer"],
  [class*="crop-handle"], [class*="trim-handle"], [class*="seek-bar"],
  [class*="slider-thumb"], [class*="range-thumb"]) img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
html.t2-drag-selection-active, html.t2-drag-selection-active body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Search provider module */
.t2-search-provider-results{display:flex;flex-direction:column;gap:var(--t2-s1)}
.t2-search-provider-status{margin-left:auto;color:var(--t2-plugin-text-muted,var(--t2-ink-muted));font-size:11px;font-weight:600}
.t2-search-provider-more{display:flex;align-items:center;justify-content:center;min-height:var(--t2-hit);width:100%;margin-top:var(--t2-s1);border:1px solid var(--t2-plugin-border,var(--t2-border,var(--t2-line)));border-radius: var(--t2-radius-control);background:var(--t2-plugin-surface-raised,#fff);color:var(--t2-plugin-text,var(--t2-ink));font:inherit;font-weight:700;cursor:pointer}
.t2-search-provider-more:hover{background:var(--t2-plugin-product-soft,var(--t2-product-wash))}
.t2-editor-search-toggle:has(.t2-toggle-control:disabled){cursor:not-allowed}

.t2-search-provider-icon {
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 20px;
    border-radius: var(--t2-radius-control);
    object-fit: contain;
}

/* Keep the expanded search chrome on the dark surface palette. */
[data-t2editor-theme="dark"] .t2-search-result-block { background: var(--t2-floating); border-color: var(--t2-line); }
[data-t2editor-theme="dark"] .t2-search-text-input,
[data-t2editor-theme="dark"] .t2-search-result-title,
[data-t2editor-theme="dark"] .t2-search-editor-text,
[data-t2editor-theme="dark"] .t2-search-result-block-title { color: var(--t2-ink); }
[data-t2editor-theme="dark"] .t2-search-editor-item,
[data-t2editor-theme="dark"] .t2-search-result-block-snippet { background: var(--t2-inset); color: var(--t2-ink); }
[data-t2editor-theme="dark"] .t2-search-result-snippet { color: var(--t2-ink-muted); }

}