@charset "utf-8";

/* cafe24.com 스타일 UI 레이어
   default.css / default_shop.css / shop-brand.css 뒤에 head.sub.php 에서 항상 마지막에 로드된다.
   구조(마크업)는 그대로 두고 토큰, 헤더, 버튼, 폼, 표, 상품 카드, 푸터만 덮어쓴다.
   수정 시 head.sub.php 의 ?ver= 는 파일 mtime 으로 자동 갱신된다.
   원칙: 액센트 1개(블루), 알약형 버튼, 카드 반경 20px, 순백/순흑 미사용 */

:root {
    --ink:#1c1c1c;
    --muted:#616161;
    --line:#e5e5e5;
    --surface:#f0f1f3;
    --bg:#fdfdfd;
    --accent:#0a55ff;
    --accent-dark:#0040c9;
    --accent-2:#0a55ff;
    --radius-card:20px;
    --radius-field:12px;
    --ease:cubic-bezier(0.16, 1, 0.3, 1);
}

body {background:var(--bg);color:var(--ink);letter-spacing:-0.01em;word-break:keep-all;line-height:1.6}
#wrapper {background:var(--bg)}
a {color:var(--ink)}

/* ===== 헤더: 높이 80px 한 줄, 로고 왼쪽 / 메뉴 가운데 / 유틸 오른쪽 ===== */
body #hd {background:var(--bg)}
/* ===== 본문 타이틀 ===== */
#container_title {font-size:2rem;font-weight:800;letter-spacing:-0.03em;line-height:1.3}
#container_title span {margin-bottom:24px}

/* ===== 버튼: 알약형 ===== */
.btn_submit, a.btn_submit, button.btn_submit, input.btn_submit,
a.btn_b02, .btn_b02,
a.btn_frmline, button.btn_frmline {border-radius:100px;background:var(--ink);color:var(--bg);font-weight:700;transition:background-color 0.25s var(--ease),transform 0.25s var(--ease)}
.btn_submit:hover, a.btn_b02:hover, .btn_b02:hover, a.btn_frmline:hover, button.btn_frmline:hover {background:var(--accent);transform:translateY(-1px)}
.btn_close, a.btn_close, a.btn_cancel, .btn_cancel,
a.btn_b03, .btn_b03, a.btn_b04, .btn_b04 {border-radius:100px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-weight:600;transition:border-color 0.25s var(--ease)}
.btn_close:hover, a.btn_cancel:hover, .btn_cancel:hover, a.btn_b03:hover, .btn_b03:hover, a.btn_b04:hover, .btn_b04:hover {background:var(--bg);border-color:var(--ink);color:var(--ink)}
.btn_b01, a.btn_b01 {color:var(--muted)}
.btn_b01:hover, a.btn_b01:hover {color:var(--ink)}

/* ===== 폼 필드 ===== */
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=search], textarea, select,
.frm_input {border:1px solid var(--line);border-radius:var(--radius-field);background:var(--bg);color:var(--ink)}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus,
textarea:focus, select:focus {border:1px solid var(--ink) !important;box-shadow:0 0 0 3px rgba(10,85,255,0.15)}
::placeholder {color:#9a9a9a}

/* ===== 표 ===== */
.tbl_wrap {border-radius:var(--radius-field)}
.tbl_head01 thead th, .tbl_head02 thead th {background:var(--surface);color:var(--ink);font-weight:700;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.tbl_head01 tbody td, .tbl_head02 tbody td {border-bottom:1px solid var(--line)}
.tbl_head01 tbody tr:hover td {background:#f7f7f8}

/* ===== 상품 카드 (쇼핑몰) ===== */
.sct_li {border-radius:var(--radius-card)}
.sct_img img {border-radius:var(--radius-card);transition:transform 0.5s var(--ease)}
.sct_li:hover .sct_img img {transform:scale(1.03)}
.sct_img {overflow:hidden;border-radius:var(--radius-card)}
.sct_txt a {font-weight:600;color:var(--ink)}
.sct_cost {font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}@media (max-width:768px) {
    #container_title {font-size:1.5rem}}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {transition-duration:0.01ms !important;animation-duration:0.01ms !important}
}

/* 상단 검색폼(#site-sch): 위의 전역 input[type=text] 테두리/배경이 Tailwind(.border-0 .bg-transparent)를 이겨서
   회색 알약 안에 테두리 있는 흰 입력 박스가 한 번 더 들어간 이중 테두리처럼 두껍게 보였다.
   입력창은 투명/무테로, 알약에 1px 가는 테두리만 두고 포커스 링도 1px 로 줄인다. */
#site-sch {border:1px solid rgba(120,120,128,.28)}
#site-sch #sch_stx {border:0;background:transparent;border-radius:0;box-shadow:none;height:auto;padding:0}
#site-sch:focus-within {border-color:var(--color-accent,#0a55ff);box-shadow:none}