/**
 * DINO FINDER — 로그인 v2 기준 전역 UI 톤 통일
 * 모든 페이지에서 tokens 다음·기능 CSS 마지막에 로드
 */

/* 입력의 글자 크기 하한 — iOS 확대 방지.
   ---------------------------------------------------------------------------
   font-size 를 아예 주지 않던 입력(#trendKeyword)에는 아래 font-size 가 걸린다.

   문제는 이미 크기를 정해 둔 입력들이다. 열 몇 개 규칙이 제각각
   font-size: var(--text-sm) 로 14px 을 주고 있고, 명세도가 이 규칙보다 높다.
   규칙마다 찾아가 고치면 다음에 새 입력이 생길 때 또 빠진다.

   그래서 값을 이기는 대신 토큰을 이 자리에서만 바꾼다. 커스텀 속성은
   상속되므로, 입력 위에서 --text-sm 을 16px 로 덮으면 그 입력에 걸린
   컴포넌트 규칙의 var(--text-sm) 이 16px 로 해석된다. !important 없이,
   규칙 하나로, 앞으로 생길 입력까지 함께 걸린다.
   (입력에는 자식 요소가 없어서 이 덮어쓰기가 밖으로 새지 않는다.) */
input,
select,
textarea {
    --text-sm: var(--input-font-min);
    --font-caption: var(--input-font-min);
    --font-small: var(--input-font-min);
    --msb-text-size: var(--input-font-min);
    font-size: var(--input-font-min);
}

/* ─────────────────────────────────────────────────────────────────────────
   화면에서만 숨긴다 — 접근성 트리에는 남는다.

   display:none 이나 visibility:hidden 은 스크린리더에서도 사라지므로
   "보이지는 않지만 읽혀야 하는" 문구에는 쓸 수 없다. 아래는 1px 크기로
   잘라내되 접근성 트리에는 남기는 표준 기법이다.
   white-space:nowrap 은 1px 폭에서 글자가 세로로 쌓여 일부 브라우저가
   높이를 늘리는 것을 막는다.
   ───────────────────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ----- 기본 ----- */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.login-v2,
body.app-v2 {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: var(--text-dark);
    letter-spacing: var(--letter-tight);
}

body.app-v2 {
    font-size: var(--font-base-app);
    line-height: var(--leading-normal);
    background: var(--bg-page);
}

/* ----- 브랜드 로고 (logo.png — DINO 흰색 / 나머지 형광) ----- */
.brand-logo-stack {
    position: relative;
    display: block;
    line-height: 0;
    isolation: isolate;
}

.brand-logo-stack .brand-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.brand-logo--dino {
    display: block;
    clip-path: inset(0 calc(100% - var(--logo-dino-split) + var(--logo-rest-overlap)) 0 0);
    filter: brightness(0) invert(1);
    opacity: 0.96;
}

.brand-logo--rest {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    clip-path: inset(0 0 0 calc(var(--logo-dino-split) - var(--logo-rest-overlap)));
    filter: var(--logo-neon-filter);
    pointer-events: none;
}

/* ----- 앱 레이아웃 표면 ----- */
body.app-v2 .sidebar {
    background: var(--brand-sidebar-gradient);
}

body.app-v2 .sidebar .header.sidebar-app-hero {
    background: transparent;
}

body.app-v2 .main-content {
    background: var(--bg-page);
}

body.app-v2 .main-content .messages-container,
body.app-v2 .main-content .container > section,
body.app-v2 .dashboard-panel,
body.app-v2 .results-pro-shell {
    border-color: var(--border-light);
}

/* ----- 입력 ----- */
body.app-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
body.app-v2 select,
body.app-v2 textarea,
body.login-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.login-v2 select,
body.login-v2 textarea {
    border-color: var(--border-strong);
    border-radius: var(--radius-md);
}

body.app-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus,
body.app-v2 select:focus,
body.app-v2 textarea:focus,
body.login-v2 input:focus,
body.login-v2 select:focus,
body.login-v2 textarea:focus {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: var(--focus-ring);
}

/* ----- primary 역할 (단색) -------------------------------------------
   --brand-cta-gradient 은 중간 지점 #9b7fc7 이 흰 글자 3.36:1 로 AA 미달이라
   앱 화면에서는 쓰지 않는다. 그라디언트는 아래 body.login-v2 .btn-primary
   (로그인 페이지 히어로 CTA) 에만 남긴다. --------------------------- */
body.app-v2 .trend-btn,
body.app-v2 #searchBtn.trend-btn,
body.app-v2 .btn-primary,
body.app-v2 button.btn-primary,
body.app-v2 .search-btn-primary,
body.app-v2 .smart-search-run-btn,
body.app-v2 .auto-search-start-btn,
body.app-v2 .dino-btn--primary,
body.app-v2 .dino-btn--coupon,
body.app-v2 .goldbox-search-btn,
body.app-v2 .competitor-wing-fetch-btn,
body.app-v2 .ad-campaign-btn--primary,
body.app-v2 .ad-campaign-btn--detail,
body.app-v2 .kw-nav-modal__btn--confirm,
body.app-v2 .main-content .category-btn.category-search-btn.control-btn,
body.login-v2 .btn-primary,
.sidebar .trend-btn,
#searchBtn.trend-btn {
    background: var(--primary-purple-action);
    border: 1px solid var(--app-ui-purple-border);
    color: var(--text-on-brand);
    border-radius: var(--radius-md);
    min-height: var(--btn-h);
    box-shadow: var(--shadow-purple);
    font-size: var(--btn-font);
    font-weight: var(--btn-weight);
    letter-spacing: var(--letter-tight);
    transition:
        filter 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

body.app-v2 .trend-btn:hover:not(:disabled),
body.app-v2 #searchBtn.trend-btn:hover:not(:disabled),
body.app-v2 .btn-primary:hover:not(:disabled),
body.app-v2 button.btn-primary:hover:not(:disabled),
body.app-v2 .search-btn-primary:hover:not(:disabled),
body.app-v2 .smart-search-run-btn:hover:not(:disabled),
body.app-v2 .auto-search-start-btn:hover:not(:disabled),
body.app-v2 .dino-btn--primary:hover:not(:disabled),
body.app-v2 .dino-btn--coupon:hover:not(:disabled),
body.app-v2 .goldbox-search-btn:hover:not(:disabled),
body.app-v2 .competitor-wing-fetch-btn:hover:not(:disabled),
body.app-v2 .ad-campaign-btn--primary:hover:not(:disabled),
body.app-v2 .ad-campaign-btn--detail:hover:not(:disabled),
body.app-v2 .kw-nav-modal__btn--confirm:hover:not(:disabled),
body.app-v2 .main-content .category-btn.category-search-btn.control-btn:hover:not(:disabled),
body.login-v2 .btn-primary:hover:not(:disabled),
.sidebar .trend-btn:hover:not(:disabled),
#searchBtn.trend-btn:hover:not(:disabled) {
    background: var(--primary-purple-action-hover);
    filter: none;
    transform: translateY(-1px);
    box-shadow: var(--brand-cta-shadow-hover);
}

/* 로그인 페이지 히어로 CTA — 브랜드 그라디언트 유지 */
body.login-v2 .btn-primary {
    background: var(--brand-cta-gradient);
    border: none;
    color: var(--text-on-brand);
    border-radius: var(--radius-md);
    box-shadow: var(--brand-cta-shadow);
    font-weight: var(--btn-weight);
    letter-spacing: var(--letter-tight);
}

body.login-v2 .btn-primary:hover:not(:disabled) {
    background: var(--brand-cta-gradient);
    filter: brightness(1.06);
    box-shadow: var(--brand-cta-shadow-hover);
}

/* 보조 버튼 */
body.app-v2 .btn-secondary,
body.app-v2 button.btn-secondary,
body.login-v2 .btn-secondary {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    min-height: var(--btn-h);
    font-size: var(--btn-font);
    font-weight: var(--btn-weight);
}

body.app-v2 .btn-secondary:hover:not(:disabled),
body.login-v2 .btn-secondary:hover:not(:disabled) {
    background: var(--bg-page);
    border-color: var(--border-strong);
}

/* ----- 카드·패널 ----- */
body.app-v2 .main-content .messages-container,
body.login-v2 .login-v2-card,
body.app-v2 .modal-content,
body.app-v2 .notice-modal--pro .notice-modal__panel {
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
}

/* ----- 알림 ----- */
body.app-v2 .alert-success,
body.login-v2 .alert-success {
    background: var(--success-pale);
    border-color: var(--success-border);
    color: var(--success-text);
    border-radius: var(--radius-md);
}

body.app-v2 .alert-error,
body.login-v2 .alert-error {
    background: var(--danger-pale);
    border-color: var(--danger-border);
    color: var(--danger-text);
    border-radius: var(--radius-md);
}

body.app-v2 .alert-warning,
body.login-v2 .alert-warning {
    background: var(--warning-pale);
    border-color: var(--warning-border);
    color: var(--warning-text);
    border-radius: var(--radius-md);
}

/* ----- 로그인 좌측 패널 ----- */
body.login-v2 .login-v2-aside {
    background: var(--brand-aside-gradient);
}

/* ----- 인증 보조 페이지 타이포 ----- */
body.login-v2 .login-v2-card-kicker {
    font-size: var(--font-small);
    /* muted 는 흰 배경 2.56:1 로 AA 미달. 이 규칙이 dino-auth-standalone.css 의
       .login-v2-card-kicker 보다 명세도가 높아 여기도 함께 고쳐야 실제로 바뀐다. */
    color: var(--text-secondary);
}

body.login-v2 .login-v2-card-title {
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    color: var(--text-heading);
}

body.login-v2 .login-v2-card-desc {
    font-size: var(--font-body);
    color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    body.app-v2 .trend-btn:hover:not(:disabled),
    body.app-v2 .btn-primary:hover:not(:disabled),
    body.login-v2 .btn-primary:hover:not(:disabled) {
        transform: none;
    }
}

/* =========================================================================
   포커스 표시 (WCAG 2.4.7)
   -------------------------------------------------------------------------
   버튼·탭·링크에는 설계된 포커스 링이 없어 브라우저 기본 링(1px 주황)에
   의존하고 있었다. 짙은 퍼플 사이드바 위에서는 사실상 보이지 않는다.
   dino-unified.css 는 외부 시트 중 마지막에 로드되므로 여기서 한 번에 정의한다.

   :focus-visible 만 사용 — 마우스 클릭 시에는 링이 뜨지 않는다.
   입력 필드는 기존 box-shadow 링이 이미 동작하므로 건드리지 않는다.
   ========================================================================= */

button:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--primary-purple-action);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 짙은 사이드바 위에서는 퍼플 링이 배경에 묻힌다 — 브랜드 라임으로 반전 */
.sidebar button:focus-visible,
.sidebar a:focus-visible,
.sidebar [role="tab"]:focus-visible,
.sidebar [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--brand-neon);
    outline-offset: 2px;
}

/* 어두운 오버레이·모달 헤더 위의 닫기 버튼 */
.loading-overlay button:focus-visible,
.notice-modal-header button:focus-visible,
.auto-search-detective-overlay button:focus-visible {
    outline: 2px solid var(--bg-card);
    outline-offset: 2px;
}

/* 이미 box-shadow 링을 가진 입력은 outline 을 이중으로 그리지 않는다 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
}