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

.t2-editor .t2-inline-link { color: var(--t2-plugin-product, var(--t2-product)); text-decoration: underline transparent; text-underline-offset: 2px; transition: color .15s, text-decoration-color .15s; }
.t2-editor .t2-inline-link:hover { color: var(--t2-plugin-product-strong, var(--t2-product-ink)); text-decoration-color: currentColor; }

/* 표면의 폭과 인셋은 공식 모달 격자가 소유한다(t2-visual-system.css §모달).
   여기서 다시 적으면 카드만 바뀌고 헤드·푸터 밴드는 계속 격자의 1/2u 로 번져
   나가, 실측에서 실행 행이 카드 밖으로 좌우 24px 씩 삐져나가 잘렸고(scrollWidth
   502 / clientWidth 478) 타이틀만 본문보다 24px 더 들여쓰였다. 격자의 5u 는
   1440 뷰포트에서 480px — 여기 적혀 있던 리터럴과 같은 값이다. */
.t2-link-editor-modal { max-width: 100%; box-sizing: border-box; position: relative; }
/* margin 은 적지 않는다. 타이틀 행은 공식 격자가 밴드로 그리고, 그 밴드는
   표면의 인셋을 음수 마진으로 되돌려 좌우 끝까지 닿는다 — 여기서 margin 을
   다시 적으면 t2.plugin 이 t2.product 를 이겨 번짐이 죽는다. 실측에서 헤어라인만
   본문 폭으로 줄고, 밴드가 안쪽 패딩 위에 자기 패딩을 한 번 더 얹어 제목만
   본문보다 48px 더 들여쓰였다(푸터는 margin 을 적지 않아 제대로 번지고 있었고,
   그 비대칭이 눈에 먼저 걸린다). */
.t2-link-editor-modal h3 { font-size: 20px; line-height: 1.4; }
.t2-link-input-container { margin-bottom: var(--t2-s5); }
.t2-link-url-label { display: grid; gap: var(--t2-s2); font-size: 14px; }
.t2-link-url-input { width: 100%; padding: var(--t2-s2) var(--t2-s3); font-size: 16px; transition: border-color .15s, box-shadow .15s; margin-bottom: var(--t2-s2); box-sizing: border-box; }
.t2-link-url-input:focus { outline: none; }
.t2-link-options { margin-top: var(--t2-s3); }
.t2-link-options label { display: flex; align-items: center; gap: var(--t2-s2); font-size: 14px; color: var(--t2-ink-muted); cursor: pointer; }
/* T2Toggle.upgradeInput 이 성공하면 이 input 은 .t2-toggle-input 로 클립되어
   화면에서 빠진다(js/utils/toggle.css). 그 클립 규칙(width/height:1px)이 t2.module
   층이라 t2.plugin 층인 이 규칙보다 계층상 낮아, :not() 없이 두면 업그레이드 후에도
   이 16px 이 이겨 클립되지 않은 16×16 상자가 남는다 — coarse 포인터에서 실측(390px
   폰, "Open in new tab" 토글)됐다. 토글 모듈이 아직 못 올라온 폴백 상태(스크립트
   실패)에서만 이 크기가 필요하다. */
.t2-link-options input[type="checkbox"]:not(.t2-toggle-input) { width: 16px; height: 16px; margin: 0; }
.t2-link-editor-modal .t2-btn-group { display: flex; justify-content: flex-end; gap: var(--t2-s2); flex-wrap: wrap; }
.t2-link-editor-modal .t2-btn { width: auto; min-width: 80px; height: 44px; padding: 0 var(--t2-s4); font-size: 14px; }
.t2-link-editor-modal .t2-btn[data-action="remove"] { background-color: transparent; color: var(--t2-danger); border-bottom:2px solid var(--t2-danger); margin-right: auto; }
.t2-link-editor-modal .t2-btn[data-action="remove"]:hover { background-color: var(--t2-danger-soft); color: var(--t2-danger); }
.t2-link-editor-modal .t2-btn[data-action="cancel"] { background-color: var(--t2-product-wash); }
.t2-link-editor-modal .t2-btn[data-action="cancel"]:hover { background-color: var(--t2-inset); }
.t2-link-editor-modal .t2-btn[data-action="insert"] { border-bottom:2px solid var(--t2-plugin-product, var(--t2-product)); }
.t2-link-editor-modal .t2-btn[data-action="insert"]:hover { background-color: var(--t2-plugin-product-soft, var(--t2-product-wash)); color: var(--t2-plugin-on-action); }

.t2-link-preview { position: fixed; padding: var(--t2-s3); box-shadow: 0 8px 24px rgba(15,23,42,.18); z-index: 1000; box-sizing: border-box; }
.t2-link-preview img { max-width: 100px; height: auto; }
.t2-link-preview-url { font-size: 12px; color: var(--t2-ink-muted); word-break: break-all; padding: var(--t2-s1) 0; border-bottom: 1px solid var(--t2-product-wash); }
.t2-link-preview-actions { display: flex; gap: var(--t2-s1); justify-content: flex-end; }
.t2-link-preview-actions .t2-btn { width: auto; min-width: 64px; height: 36px; padding: 0 var(--t2-s2); font-size: 12px; border-radius: var(--t2-radius-control); border: none; cursor: pointer; background: var(--t2-product-wash); color: var(--t2-ink-muted); transition: background .15s; }
.t2-link-preview-actions .t2-btn:hover { background: var(--t2-inset); }
.t2-link-preview-actions .t2-btn[data-action="edit"] { background: transparent; color: var(--t2-plugin-product, var(--t2-product)); border-bottom:2px solid var(--t2-plugin-product, var(--t2-product)); }
.t2-link-preview-actions .t2-btn[data-action="edit"]:hover { background: var(--t2-product-wash); color: var(--t2-plugin-product, var(--t2-product)); }
.t2-link-preview-actions .t2-btn[data-action="remove"] { background: transparent; color: var(--t2-danger); border-bottom:2px solid var(--t2-danger); }
.t2-link-preview-actions .t2-btn[data-action="remove"]:hover { background: var(--t2-danger-soft); color: var(--t2-danger); }
.t2-link-preview-actions .t2-btn[data-action="visit"] { background: transparent; color: var(--t2-success); border-bottom:2px solid var(--t2-success); }
.t2-link-preview-actions .t2-btn[data-action="visit"]:hover { background: color-mix(in srgb,var(--t2-success) 10%,transparent); color: var(--t2-success); }

/* Dark Mode */
html[data-t2editor-theme="dark"] .t2-editor .t2-inline-link { color: var(--t2-plugin-product, var(--t2-product)); }
html[data-t2editor-theme="dark"] .t2-editor .t2-inline-link:hover { color: var(--t2-product); }
html[data-t2editor-theme="dark"] .t2-link-editor-modal { background-color: var(--t2-surface); color: var(--t2-ink); box-shadow: 0 4px 24px rgba(0,0,0,.3); border: 1px solid var(--t2-ink-muted); }
html[data-t2editor-theme="dark"] .t2-link-editor-modal h3 { color: var(--t2-ink); }
html[data-t2editor-theme="dark"] .t2-link-url-input { background-color: var(--t2-surface); border-color: var(--t2-line); color: var(--t2-ink); }
html[data-t2editor-theme="dark"] .t2-link-url-input:focus { border-color: var(--t2-plugin-product, var(--t2-product)); box-shadow: none; }
html[data-t2editor-theme="dark"] .t2-link-options label { color: var(--t2-ink); }
html[data-t2editor-theme="dark"] .t2-link-editor-modal .t2-btn[data-action="cancel"] { background-color: var(--t2-surface); color: var(--t2-ink); border-color: var(--t2-line); }
html[data-t2editor-theme="dark"] .t2-link-editor-modal .t2-btn[data-action="cancel"]:hover { background-color: var(--t2-surface); }
html[data-t2editor-theme="dark"] .t2-link-editor-modal .t2-btn[data-action="insert"] { background-color: transparent; color: var(--t2-plugin-product, var(--t2-product)); border-bottom:2px solid var(--t2-plugin-product, var(--t2-product)); }
html[data-t2editor-theme="dark"] .t2-link-editor-modal .t2-btn[data-action="insert"]:hover { background-color: var(--t2-product-wash); }
html[data-t2editor-theme="dark"] .t2-link-editor-modal .t2-btn[data-action="remove"] { background-color: transparent; color: var(--t2-danger); border-bottom:2px solid var(--t2-danger); }
html[data-t2editor-theme="dark"] .t2-link-editor-modal .t2-btn[data-action="remove"]:hover { background-color: var(--t2-danger-soft); }
html[data-t2editor-theme="dark"] .t2-link-preview { background-color: var(--t2-surface); border-color: var(--t2-line); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
html[data-t2editor-theme="dark"] .t2-link-preview-url { color: var(--t2-ink-muted); border-bottom-color: var(--t2-line); }
html[data-t2editor-theme="dark"] .t2-link-preview-actions .t2-btn { background: var(--t2-surface); color: var(--t2-ink); }
html[data-t2editor-theme="dark"] .t2-link-preview-actions .t2-btn:hover { background: var(--t2-line); }
html[data-t2editor-theme="dark"] .t2-link-preview-actions .t2-btn[data-action="edit"] { background: transparent; color: var(--t2-plugin-product, var(--t2-product)); border-bottom:2px solid var(--t2-plugin-product, var(--t2-product)); }
html[data-t2editor-theme="dark"] .t2-link-preview-actions .t2-btn[data-action="edit"]:hover { background: var(--t2-product-wash); }
html[data-t2editor-theme="dark"] .t2-link-preview-actions .t2-btn[data-action="remove"] { background: transparent; color: var(--t2-danger); border-bottom:2px solid var(--t2-danger); }
html[data-t2editor-theme="dark"] .t2-link-preview-actions .t2-btn[data-action="remove"]:hover { background: var(--t2-danger-soft); }
html[data-t2editor-theme="dark"] .t2-link-preview-actions .t2-btn[data-action="visit"] { background: transparent; color: var(--t2-success); border-bottom:2px solid var(--t2-success); }
html[data-t2editor-theme="dark"] .t2-link-preview-actions .t2-btn[data-action="visit"]:hover { background: color-mix(in srgb,var(--t2-success) 12%,transparent); color: var(--t2-success); }

@media (max-width: 480px) {
    .t2-link-editor-modal .t2-btn-group { display: grid; grid-template-columns: 1fr 1fr; }
    .t2-link-editor-modal .t2-btn { width: 100%; }
    .t2-link-editor-modal .t2-btn[data-action="remove"] { grid-column: 1 / -1; margin-right: 0; }
    .t2-link-preview-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
    .t2-link-preview-actions .t2-btn { min-width: 0; width: 100%; }
}

/* 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-dsc-service-brand {
  letter-spacing: -0.01em;
}
.t2-product-brand { white-space: nowrap; }

.t2-link-editor-modal { color: var(--t2-plugin-text); background: var(--t2-plugin-surface); border: 1px solid var(--t2-plugin-border); border-radius: var(--t2-plugin-radius-surface); box-shadow: var(--t2-plugin-shadow); }
.t2-link-editor-modal h3 { color: var(--t2-plugin-text); font-weight: 800; }
.t2-link-url-label { color: var(--t2-plugin-text); font-weight: 700; }
.t2-link-url-input { min-height: 44px; color: var(--t2-plugin-text); background: var(--t2-plugin-surface-raised); border: 1px solid var(--t2-plugin-border); border-radius: var(--t2-plugin-radius-control); }
.t2-link-url-input:focus { border-color: var(--t2-plugin-product); box-shadow: none; }
/* .t2-link-preview 는 문서 위에 뜨는 팝오버라 면·테두리·각이 필요하다.
   .t2-link-options 는 다이얼로그 안의 토글 한 줄일 뿐인데 같은 묶음에 들어가
   높이 24px 짜리 채워진 알약이 됐다 — 입력 필드처럼 읽혔고, 패딩이 0 이라 토글의
   파란 트랙이 상자 왼쪽 모서리에 그대로 붙었다. 줄에는 면을 주지 않는다. */
.t2-link-preview { background: var(--t2-plugin-surface-muted); border: 1px solid var(--t2-plugin-border); border-radius: var(--t2-plugin-radius-island); }
.t2-link-editor-modal .t2-btn { min-height: 44px; border-radius: var(--t2-plugin-radius-control); }
.t2-link-editor-modal .t2-btn[data-action="insert"] { color: var(--t2-plugin-on-action); background: var(--t2-plugin-action); font-weight: 750; }
.t2-link-editor-modal .t2-btn[data-action="cancel"] { color: var(--t2-plugin-text); background: var(--t2-plugin-surface-muted); border: 1px solid var(--t2-plugin-border); }
.t2-inline-link { color: var(--t2-plugin-product); text-decoration-thickness: 1px; text-underline-offset: .16em; }
@media (max-width: 640px) { .t2-link-editor-modal input { font-size: 16px; } /* [iOS⚠️] */ }

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

}

/* T2Editor /law 706 — plugin select indicator after native appearance reset */
:is(:is([class^="t2-link-"], [class*=" t2-link-"]) select, select[class^="t2-link-"], select[class*=" t2-link-"]):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;
}

}