/* ==========================================================================
   base.css — IITMS 전역 베이스 (리셋·타이포·폼 기본값)
   --------------------------------------------------------------------------
   main.css 의 비-컴포넌트 부분(리셋/타이포/폼 강제색/포커스/컨테이너)을 계승.
   tokens.css 이후에 로드되어야 한다.
   ========================================================================== */

html {
    color-scheme: only light;
    -webkit-text-size-adjust: 100%;
    /* scrollbar-gutter 예약은 쓰지 않는다 — 앱셸(body{overflow:hidden}+본문 내부 스크롤)로 전환하면
       문서 스크롤바 자체가 없어져 헤더 흔들림이 사라지므로, 예약해두면 오른쪽에 빈 띠만 남는다. */
}

/* 폼 요소 색상 강제 — 삼성 인터넷이 UA 스타일을 반전시키는 1차 타겟.
   -webkit-text-fill-color 는 iOS Safari 가 color 를 무시하고 회색을 칠하는 회피책 */
input, textarea, select {
    background-color: var(--ui-surface);
    color: var(--ui-text);
    -webkit-text-fill-color: var(--ui-text);
    caret-color: var(--ui-accent-blue);
}
input::placeholder, textarea::placeholder {
    color: var(--ui-muted);
    -webkit-text-fill-color: var(--ui-muted);
    opacity: 1;
    font-weight: 400;
}

/* -webkit-autofill 자동완성 영역 (Chrome/삼성 인터넷/iOS Safari 공통 다크 반전 방지) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--ui-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--ui-surface) inset !important;
    -webkit-text-fill-color: var(--ui-text) !important;
    caret-color: var(--ui-text) !important;
    transition: background-color 9999s ease-out 0s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--ui-font);
}

body {
    background-color: var(--ui-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    font-size: clamp(14px, 0.35vw + 13px, 16px);
    line-height: 1.6;
    color: var(--ui-text);
}

/* 키보드 포커스 가시성 (모바일은 대부분 :focus-visible 만 적용) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

/* 메인 콘텐츠 컨테이너 */
.container {
    max-width: 1600px;
    margin: 1rem auto 2rem auto;
    padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
    flex: 1;
    width: 100%;
}
@media (min-width: 75rem) {
    .container {
        max-width: min(120rem, calc(100vw - 1.5rem));
    }
}
@media (max-width: 1220px) {
    .container {
        width: 95%;
        padding: 15px;
    }
}
@media (max-width: 768px) {
    .container {
        padding: 12px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(15px, env(safe-area-inset-bottom));
        margin: 0 auto;
        max-width: 100%;
    }
}

/* device-list: 데스크톱에서 폭 넓은 중앙 컨테이너 */
@media (min-width: 1024px) {
    body.device-list-page .container {
        max-width: 1820px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    body.device-list-page .device-list-container {
        width: 100%;
    }
}
.device-list-container {
    padding: 10px 0;
    width: 100%;
}

/* 필수 입력 표시 */
.need:before {
    content: "*";
    color: var(--ui-danger);
    margin: 0 0 0 3px;
}

/* 유틸리티: 스크린리더 전용 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (pointer: coarse) {
    .container .btn,
    .container button[type="submit"],
    .card-container .btn,
    .card-container button[type="submit"] {
        min-height: var(--ui-touch-min);
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }
}