/* =====================================================================
   theme.css  —  카카오 스타일 테마 (맨 마지막에 로드되어 기존 CSS 위에 덮어씀)
   ---------------------------------------------------------------------
   * 이 파일 하나로 앱 전체의 색/모서리/그림자/글꼴이 결정됩니다.
   * 마음에 안 들면 index.html 에서 <link ... theme.css> 한 줄만 지우면 예전 모양으로 돌아갑니다.
   * 색을 바꾸고 싶으면 아래 :root 의 변수만 고치세요.
   ===================================================================== */

:root {
    --y:        #FEE500;   /* 카카오 옐로우 */
    --y-press:  #F5DC00;
    --y-soft:   #FFF8C2;
    --ink:      #191919;   /* 기본 글자 */
    --ink-2:    #666B73;   /* 보조 글자 */
    --ink-3:    #A3A7AE;   /* 비활성/힌트 */
    --bg:       #FFFFFF;   /* 화면 바탕 */
    --card:     #FFFFFF;
    --line:     #ECEDF0;
    --fill:     #F1F2F4;   /* 칩/입력창/표 머리글 */
    --blue:     #E8F1FC;   /* 토요일 */
    --red:      #FCE9E7;   /* 공휴일 */
    --orange:   #FFF1E2;   /* 일요일 */
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;
    --shadow-1: 0 1px 2px rgba(25,25,25,.04), 0 4px 14px rgba(25,25,25,.05);
    --shadow-2: 0 2px 4px rgba(25,25,25,.05), 0 10px 28px rgba(25,25,25,.08);
}

/* ---------- 글꼴/바탕 ---------- */
html, body, input, select, textarea, button {
    font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
body { color: var(--ink); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; background: var(--bg); text-shadow: none; }
.page { background: var(--bg) !important; color: var(--ink); text-shadow: none !important; }
.page a { color: inherit; }
.page a:hover, .page a:active { color: inherit; }

/* =====================================================================
   1. 메인 화면
   ===================================================================== */
.header {
    color: var(--ink);
    padding: 16px 12px 20px;
    border-radius: 0 0 26px 26px;
    box-shadow: none;
}
.profile-info h2 { font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.profile-info h2 font { font-weight: 800 !important; }
.profile-info p { color: rgba(25,25,25,.62); font-size: 12px; font-weight: 500; }

/* 대기자/도로/공지/소통 카드 */
.card {
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin: 14px 12px 6px;
    padding: 4px 4px 8px;
    height: auto;
}
#container { background: transparent; border-radius: 0; height: auto; padding: 0; }
.swiper-container-2 .swiper-slide { background: transparent; }

/* 탭 글자 뒤의 흰 네모가 카드의 둥근 모서리 밖으로 삐져나오던 문제 */
.card { overflow: hidden; }
.tabs > li > a { background: transparent !important; }
.tabs > li > a { color: var(--ink-3); font-weight: 600; font-size: 15px; padding: 18px 0 11px; border-bottom: 3px solid transparent; }
.tabs > li.active > a { color: var(--ink) !important; font-weight: 800; border-bottom: 3px solid var(--ink); }

/* Auto 토글 */
.toggle-label { background: #D9DBE0; }
#autoCallBtn:checked + .toggle-label { background: var(--y); }
#autoCallBtn:checked + .toggle-label::before { background: var(--ink); }

/* 메뉴 아이콘 그리드 */
.grid { gap: 10px; padding: 12px; }
.grid-item {
    background: var(--card);
    border-radius: var(--r-md);
    padding: 8px 4px 6px;
    box-shadow: var(--shadow-1);
    transition: transform .12s ease, background .12s ease;
}
.grid-item:active { transform: scale(.95); background: var(--y-soft); }

/* 날씨 카드 */
.fe_card {
    background: var(--card) !important;
    backdrop-filter: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin: 4px 12px 10px;
    padding: 10px 6px 8px;
    color: var(--ink);
}
.fe_section_provider { color: var(--ink-3); font-size: 11px; }
.fe_section_provider font { color: var(--ink) !important; font-weight: 700; }

/* 푸터 */
.footer { color: var(--ink-3); }

/* 공지/상조회 카드 */
.notice-box {
    background: var(--card);
    border: none;
    border-radius: var(--r-md);
    box-shadow: none;
    border: 1px solid var(--line);
}
.notice-item { border-bottom: 1px solid var(--line); }
.notice-item a:hover { color: var(--ink); transform: none; }

/* 필수앱 카드 (메뉴 4) */
.app-card { border-radius: var(--r-lg) !important; box-shadow: var(--shadow-1) !important; border: none !important; background: var(--card) !important; }
.app-card:active { transform: scale(.97); }
.app-title { color: var(--ink) !important; font-weight: 700; }
.app-desc { color: var(--ink-3) !important; }

/* CCTV */
.cctv-card-header { border: none !important; border-radius: var(--r-md) var(--r-md) 0 0; padding: 0 14px; }
.cctv-nav-btn { box-shadow: none !important; background: var(--fill) !important; border: none !important; color: var(--ink) !important; }
.cctv-nav-btn:active { background: var(--y) !important; }
.video-wrap { border-radius: 0 0 var(--r-md) var(--r-md); }

/* 도로(TOPIS) 표 */
.topis1 td[bgcolor], .topis2 td[bgcolor], .topis1 tr[bgcolor], .topis2 tr[bgcolor] { background: var(--fill) !important; color: var(--ink) !important; }
.topis1 font[color], .topis2 font[color] { color: var(--ink) !important; font-weight: 800; }
.topis1 td, .topis2 td { border-color: var(--line) !important; }

/* =====================================================================
   2. 상단 바(툴바) / 버튼
   ===================================================================== */
.toolbar { background: var(--card) !important; border: none !important; border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; text-shadow: none; padding: 0; min-height: 52px; }
.toolbar .tb-left, .toolbar .tb-right { top: 50% !important; transform: translateY(-50%); margin: 0 !important; }
.toolbar .tb-left { left: 10px !important; }
.toolbar .tb-right { right: 10px !important; }
.toolbar-title { padding: 15px 0 !important; }
.toolbar-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.toolbar .btn { text-shadow: none !important; }
/* 양 옆 작은 버튼은 알약(칩) 모양 */
.toolbar .btn.btn-corner {
    background: var(--fill) !important; color: var(--ink) !important;
    border: none !important; box-shadow: none !important;
    border-radius: 999px; padding: 8px 14px; font-weight: 700;
}
.toolbar .btn.btn-corner:active { background: var(--y) !important; }
/* 뒤로가기(텍스트 버튼) */
#jo .toolbar .btn, .toolbar .i-back { color: var(--ink-2) !important; }

/* 입력창 */
.input-text, .search-box input { background: var(--fill) !important; border: none !important; box-shadow: none !important; border-radius: var(--r-md) !important; }
.search-box { background: transparent; padding: 12px 14px 4px; }
.search-box .input-text { margin: 0; }
.input-text input, .search-box input { font-size: 16px; padding: 12px 14px; color: var(--ink); }
.input-text input::placeholder { color: var(--ink-3); }
.input-text input:focus { outline: 0; }
.select select { background: var(--fill); border: none; box-shadow: none; border-radius: var(--r-md); color: var(--ink); }

/* =====================================================================
   3. 연락처(메뉴1)
   ===================================================================== */
.section { margin-top: 8px; }
#contactList .section-title { background: transparent !important; color: var(--ink-2); font-size: 13px; font-weight: 700; padding: 14px 18px 6px; letter-spacing: 0; }
.contact { background: var(--card); border-bottom: 1px solid var(--line); padding: 13px 18px; transition: background .12s; }
.contact:hover { background: var(--card); }
.contact:active { background: var(--y-soft); }
.avatar { background: var(--fill); color: var(--ink-2); border-radius: 18px; width: 46px; height: 46px; font-size: 14px; }
.name { font-size: 16px; font-weight: 700; }
.desc { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.phone { filter: grayscale(1); opacity: .55; }

/* =====================================================================
   4. 내 시간표(menu6) / 달력
   ===================================================================== */
#sca .time-row.title { background: var(--fill); color: var(--ink-2); font-size: 13px; font-weight: 700; }
#sca [style*="b8cce4"] { background: var(--blue) !important; }
#sca [style*="e6b8b7"] { background: var(--red) !important; }
#sca [style*="fcd5b4"] { background: var(--orange) !important; }
#sca .time-row.total, #sca [style*="ffff00"] { background: var(--y) !important; color: var(--ink); font-weight: 800; }
#sca .today { outline-color: var(--ink) !important; }

/* 동료 시간표 달력 */
/*
#work { background: var(--bg) !important; }
#work .Calendar { border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
#work .Calendar thead tr:first-child { background: var(--y); color: var(--ink); }
#work .Calendar thead tr:last-child td { background: var(--card); color: var(--ink-3); font-weight: 700; }
#work .today { background: var(--y); color: var(--ink); font-weight: 800; }
#work .choiceDay { background: var(--ink) !important; color: #fff !important; }
#work #personal { border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
#work .radio-item label { border-color: transparent; border-radius: var(--r-sm); }
*/

/* =====================================================================
   5. 내 정보(menu7) / 근무조 / 차고지 / 하단 탭
   ===================================================================== */
.stat-card { border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.stat-value { color: var(--ink); font-weight: 800; }
.stat-title { color: var(--ink-2); }
.chang_month { background: var(--fill); }
.chang_month:active { background: var(--y); }

.toolbar-bottom { background: rgba(255,255,255,.96) !important; border-top: 1px solid var(--line) !important; box-shadow: none !important; backdrop-filter: blur(12px); }

/* 근무조 선택 칩 */
#jo { background: var(--bg) !important; }
.section-card { border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.team-chip label { background: var(--fill) !important; border-radius: var(--r-sm) !important; }
.team-chip input:checked + label { background: var(--y) !important; color: var(--ink) !important; }

/* 차고지 */
.car_column { background: var(--card) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-1) !important; border: none !important; }
.car_radio-group label, .car_count { border-radius: var(--r-sm) !important; }

::selection { background: var(--y); color: var(--ink); }

/* =====================================================================
   6. 아이콘 (카카오풍 단색 SVG) — 하단 탭 외에 빠져 있던 것들
   ===================================================================== */
/* 하단/추가·삭제 줄(navbar) : 글자 위에 24px 아이콘 */
.i-plus::after   { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") !important; }
.i-minus::after  { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E") !important; }

/* 상단 바 작은 버튼 : 글자 옆 14px 아이콘 */
.toolbar .btn.i-back::before,
.toolbar .btn.i-clock::after,
.toolbar .btn.i-edit::after {
    content: ""; display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.toolbar .btn.i-back::before  { margin-right: 4px; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666B73' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4l-8 8 8 8'/%3E%3C/svg%3E"); }
.toolbar .btn.i-clock::after  { margin-left: 5px;  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.toolbar .btn.i-edit::after   { margin-left: 5px;  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4-1 11-11-3-3L5 16l-1 4z'/%3E%3C/svg%3E"); }

/* 차고지 선택 */
.car_column h3 { background: var(--y); color: var(--ink); font-weight: 800; border-radius: var(--r-sm); }
.car_radio-group label { background: var(--fill); color: var(--ink); border: none; border-radius: var(--r-sm); font-weight: 600; }
.car_radio-group label:hover { background: #E8E9EC; }
.car_radio-group input[type="radio"]:checked + label { background: var(--y); color: var(--ink); border: none; font-weight: 800; transform: none; }
.car_back-btn { background: var(--ink) !important; color: var(--y) !important; border-radius: var(--r-md); font-weight: 800; }