/* =====================================================================
   타이탄 UI 공통 스타일 v1  (2026-10-01)
   사내 웹앱이 같이 불러 쓰는 기준 파일. 한 곳만 고치면 모든 앱에 반영된다.

   쓰는 법:  <link rel="stylesheet" href="https://titan-ui-cqu.pages.dev/v1/titan-ui.css">
   - v1 주소는 "깨지지 않는 수정"만 한다. 모양이 크게 바뀌는 변경은 v2 폴더를 새로 만든다.
   - 앱 고유 스타일은 이 파일 '뒤'에 둔다 (앱 쪽이 우선).
   - 기준: 메모리 feedback_web_mobile_rules · feedback_web_default_look
   ===================================================================== */

/* ---------- 1. 기준값 (색·글씨·여백) ---------- */
:root {
    /* 브랜드 */
    --t-red: #E60012;
    --t-red-dark: #B3000E;
    --t-red-light: #FF3B47;      /* 어두운 배경 위 */
    --t-red-bg: #FFF0F1;         /* 연한 레드 바탕 (선택된 칩 등) */
    --t-black: #1A1A1A;
    --t-dark: #0C0C10;           /* 어두운 구역 바탕 */

    /* 글자색 */
    --t-text: #191F28;
    --t-body: #4E5968;
    --t-muted: #8B95A1;

    /* 바탕·선 */
    --t-bg: #F4F4F6;
    --t-surface: #FFFFFF;
    --t-line: #ECECF0;
    --t-shadow: 0 2px 10px rgba(25,31,40,0.06);
    --t-shadow-lg: 0 10px 30px rgba(25,31,40,0.12);

    /* 글씨 5단계: 페이지 제목 / 블록 제목 / 카드 제목 / 본문 / 보조 */
    --t-fs-1: 44px;
    --t-fs-2: 30px;
    --t-fs-3: 22px;
    --t-fs-4: 17px;
    --t-fs-5: 15px;

    /* 여백·모양 */
    --t-card-pad: 28px;
    --t-gap: 24px;               /* 칸 사이 간격은 칸 안쪽 여백보다 넓게 */
    --t-section-y: 96px;
    --t-radius: 16px;
    --t-btn-h: 48px;
    --t-tap: 44px;               /* 누를 수 있는 최소 크기 (Apple HIG) */

    --t-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* 휴대폰: 한 칸씩 낮춘다 (데스크톱 크기를 그대로 쓰면 전부 커 보인다) */
@media (max-width: 768px) {
    :root {
        --t-fs-1: 28px;
        --t-fs-2: 22px;
        --t-fs-3: 18px;
        --t-fs-4: 15px;
        --t-fs-5: 13px;
        --t-card-pad: 20px;
        --t-gap: 16px;
        --t-section-y: 60px;
        --t-btn-h: 44px;
    }
}

/* ---------- 2. 안전 기본값 (모든 앱에 걸어도 모양을 해치지 않는 것만) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 한국어는 단어 중간에서 끊지 않는다 */
body { word-break: keep-all; overflow-wrap: break-word; }
/* 아이폰은 입력칸 글씨가 16px보다 작으면 누를 때 화면을 확대해 버린다.
   앱의 #q{font-size:15px} 같은 id·클래스 규칙이 이기지 않게 !important (허브·자리배치도에서 실제로 졌음) */
@media (max-width: 900px) {
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: max(16px, 1em) !important; }
}

/* ---------- 3. 글씨 단계 클래스 ---------- */
.t-h1 { font-size: var(--t-fs-1); font-weight: 900; line-height: 1.25; letter-spacing: -0.5px; color: var(--t-text); }
.t-h2 { font-size: var(--t-fs-2); font-weight: 800; line-height: 1.3; color: var(--t-text); }
.t-h3 { font-size: var(--t-fs-3); font-weight: 700; line-height: 1.4; color: var(--t-text); }
.t-body { font-size: var(--t-fs-4); line-height: 1.7; color: var(--t-body); }
.t-sub { font-size: var(--t-fs-5); line-height: 1.6; color: var(--t-muted); }

/* ---------- 4. 버튼 ---------- */
.t-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--t-btn-h); padding: 0 22px; border-radius: 100px;
    font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    border: 1px solid transparent; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.t-btn--primary { background: var(--t-red); color: #fff; }
.t-btn--primary:hover { background: var(--t-red-dark); }
.t-btn--dark { background: var(--t-black); color: #fff; }
.t-btn--line { background: var(--t-surface); color: var(--t-text); border-color: var(--t-line); }
.t-btn--line:hover { border-color: var(--t-red); color: var(--t-red); }
/* 반복되는 보조 동작(상세보기 등)은 상자 대신 글자 링크로 */
.t-btn--text {
    height: auto; min-height: var(--t-tap); padding: 0; border-radius: 0;
    background: none; color: var(--t-muted); font-weight: 600; font-size: 14px;
}
.t-btn--text:hover { color: var(--t-red); }
.t-btn--block { display: flex; width: 100%; }

/* ---------- 5. 카드 (테두리 없이 옅은 그림자, 상자 안에 상자 금지) ---------- */
.t-card {
    background: var(--t-surface); border-radius: var(--t-radius);
    padding: var(--t-card-pad); box-shadow: var(--t-shadow);
}
.t-grid { display: grid; gap: var(--t-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 768px) { .t-grid--2m { grid-template-columns: 1fr 1fr; } }

/* ---------- 6. 탭 ---------- */
/* 6-1. 밑줄 탭: 메뉴 5개 이상. 휴대폰에선 가로로 밀어서 본다 (titan-ui.js가 지금 탭을 보이게 밀어줌) */
.t-tabs {
    display: flex; gap: 22px; list-style: none; margin: 0; padding: 0 20px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--t-line);
}
.t-tabs::-webkit-scrollbar { display: none; }
.t-tabs > * { flex-shrink: 0; }
.t-tabs a, .t-tabs button {
    display: block; position: relative; padding: 12px 0 13px;
    background: none; border: 0; font-family: inherit; font-size: 15px; font-weight: 500;
    color: var(--t-muted); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.t-tabs .is-active, .t-tabs [aria-selected="true"] { color: var(--t-text); font-weight: 700; }
.t-tabs .is-active::after, .t-tabs [aria-selected="true"]::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--t-red); border-radius: 2px;
}
/* 넘칠 때 오른쪽 끝을 흐리게 해서 옆으로 더 있다는 걸 보여줌 (JS가 is-overflow를 붙임) */
.t-tabs.is-overflow {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.t-tabs.is-overflow > *:last-child { padding-right: 36px; }
.t-tabs--dark { border-bottom-color: rgba(255,255,255,0.08); }
.t-tabs--dark a, .t-tabs--dark button { color: rgba(255,255,255,0.5); }
.t-tabs--dark .is-active, .t-tabs--dark [aria-selected="true"] { color: #fff; }

/* 6-2. 알약 칩: 2~4개짜리 전환·필터에만 */
.t-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.t-chips::-webkit-scrollbar { display: none; }
.t-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
    border-radius: 100px; border: 1px solid var(--t-line); background: var(--t-surface);
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--t-body); white-space: nowrap; cursor: pointer;
}
.t-chip.is-active { background: var(--t-red-bg); border-color: transparent; color: var(--t-red); }

/* ---------- 7. 화면 아래 고정 바 (다음 단계 안내 등) ---------- */
/* <div class="t-bottombar" data-show-after="0.5"> … </div>  · titan-ui.js가 스크롤에 맞춰 is-show */
.t-bottombar {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 9990;
    width: min(480px, calc(100% - 24px)); transform: translate(-50%, 140%); opacity: 0;
    display: flex; align-items: center; gap: 12px;
    background: rgba(20,20,24,0.96); color: #fff;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
    padding: 10px 10px 10px 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    transition: transform 0.35s ease, opacity 0.35s ease; pointer-events: none;
}
.t-bottombar.is-show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
/* 바가 있는 페이지는 맨 아래 내용이 가리지 않게 body에 t-has-bottombar */
body.t-has-bottombar { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- 7-2. 완료 알림 (토스트) ----------
   left:50% + translateX(-50%) 방식은 폭이 화면 절반에 갇혀 글이 세로로 길어진다 (도서관·장비대여에서 실제 발생)
   → 양옆을 고정하고 가운데 정렬. <div class="t-toast is-show">반납했어요</div> */
.t-toast {
    position: fixed; left: 20px; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 9995;
    width: fit-content; max-width: 480px; margin: 0 auto;
    background: var(--t-black); color: #fff; border-radius: 14px; padding: 14px 18px;
    font-size: 15px; font-weight: 600; line-height: 1.5; box-shadow: var(--t-shadow-lg);
    opacity: 0; transform: translateY(16px); transition: opacity 0.25s, transform 0.25s; pointer-events: none;
}
.t-toast.is-show { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- 7-3. 아래에서 올라오는 창 (시트) ----------
   끝까지 스크롤해도 뒤 화면이 같이 밀리지 않게, 닫기 버튼은 44px로 늘 보이게 */
.t-sheet { overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.t-sheet-close {
    position: sticky; top: 0; float: right; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; font-size: 20px; color: var(--t-muted); cursor: pointer;
}

/* ---------- 8. 줄바꿈·보이기 도구 ---------- */
.nowrap, .t-nowrap { white-space: nowrap; }          /* 붙어 있어야 하는 말 묶기 */
.m-br, .t-m-br { display: none; }                    /* 휴대폰에서만 줄 바꿀 자리 */
.t-pc-only { }
.t-m-only { display: none !important; }
@media (max-width: 768px) {
    .m-br, .t-m-br { display: inline; }
    .t-pc-only { display: none !important; }
    .t-m-only { display: revert !important; }
}

/* ---------- 9. 아이폰 안전장치 ---------- */
/* 흐림(backdrop-filter)·큰 blur 발광은 스크롤할 때 흰 빈칸을 만든다 → 휴대폰에선 끈다 */
@media (max-width: 768px) {
    .t-blur { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    .t-glow { filter: none !important; box-shadow: none !important; }
    .t-pc-anim { animation: none !important; }
}
/* 아이폰은 손을 떼도 hover 상태가 남는다 → 떠오르는 효과는 마우스 있는 기기에만.
   앱에서 hover 효과를 줄 땐 @media (hover: hover) { … } 안에 쓰기. .t-card 등 공통 부품은 이미 그렇게 함 */
@media (hover: hover) {
    .t-card.t-lift { transition: transform 0.2s, box-shadow 0.2s; }
    .t-card.t-lift:hover { transform: translateY(-3px); box-shadow: var(--t-shadow-lg); }
}
/* 움직임 줄이기를 켠 사용자에겐 애니메이션 최소화 */
@media (prefers-reduced-motion: reduce) {
    .t-anim, .t-pc-anim { animation: none !important; transition: none !important; }
}