@charset "utf-8";
/**
 * site.css - 알고파(algopha.com) 서브페이지 공유 CSS
 *
 * index.css와 동일한 디자인 시스템 공유.
 * default.css 다음에 로드되어 그누보드 기본 스타일을 오버라이드.
 *
 * 색상 팔레트 (블루 계열):
 *   배경:   #ffffff / #f9fafb / #eff6ff
 *   텍스트: #0f172a (주) / #475569 (보조) / #94a3b8 (약한)
 *   메인:   #2563eb (블루) / #3b82f6 (밝은 블루)
 *   보더:   #e2e8f0
 */

/* ══════════════════════════════════════════════════════════════
   1. CSS 변수
   ══════════════════════════════════════════════════════════════ */
:root {
    --bg: #ffffff;
    --bg2: #f9fafb;
    --bg-blue: #eff6ff;
    --text: #0f172a;
    --text2: #475569;
    --text3: #94a3b8;
    --teal: #2563eb;
    --teal-light: #3b82f6;
    --teal-bg: rgba(37,99,235,0.06);
    --border: #e2e8f0;
    --border2: #cbd5e1;
    --card: #ffffff;
    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════════════════
   2. 글로벌 오버라이드 (default.css 위에 적용)
   ══════════════════════════════════════════════════════════════ */
/* index.css와 동일한 border-box 리셋 — padding이 width에 포함되도록
   이 규칙 없이는 nav-inner(1140px+64px=1204px) vs content-box 불일치 발생 */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Noto Sans KR', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a:link, a:visited { color: var(--text2); text-decoration: none; }
a:hover, a:focus, a:active { color: var(--teal); text-decoration: none; }
hr { display: none; }

/* 그누보드 기본 로그인 메시지 숨김 — 네비게이션에서 처리 */
#hd_login_msg { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   3. 네비게이션 (서브페이지용: position:relative, 흰색 배경)
   ══════════════════════════════════════════════════════════════ */
.nav {
    position: relative;
    background: #fff;
    border-bottom: 1px solid var(--border);
    z-index: 100;
}
.nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: 64px;
    box-sizing: border-box;  /* padding 포함 1140px */
}
/* 로고 — Inter 폰트, 블루 강조
   a:link (0-0-1-1)보다 높은 구체성을 위해 a.nav-logo (0-0-1-1) 사용 */
a.nav-logo,
a.nav-logo:link,
a.nav-logo:visited {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--teal);
    text-decoration: none;
}
a.nav-logo:hover { text-decoration: none; color: var(--teal); }
.nav-logo span { color: var(--text); }

/* 메뉴 링크 — 가로 나열, 호버 시 블루 배경 */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-menu a {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text2);
    transition: all .2s;
    text-decoration: none;
}
.nav-menu a:hover {
    color: var(--teal);
    background: var(--teal-bg);
    text-decoration: none;
}

/* 우측 액션 버튼 — 로그인/회원가입/마이페이지 */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-btn {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
a.nav-btn:hover { text-decoration: none; }
/* a:link (0-0-1-1)를 이기기 위해 a.클래스:link 패턴 사용 */
a.nav-btn-ghost,
a.nav-btn-ghost:link,
a.nav-btn-ghost:visited { background: transparent; color: var(--text2); }
a.nav-btn-ghost:hover { color: var(--teal); }
a.nav-btn-fill,
a.nav-btn-fill:link,
a.nav-btn-fill:visited { background: var(--teal); color: #fff; }
a.nav-btn-fill:hover { background: #1d4ed8; color: #fff; }

/* 모바일 햄버거 메뉴 버튼 — 768px 이하에서 표시 */
.nav-toggle {
    display: none;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
}
.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    margin: 4px 0;
    transition: all .3s;
    border-radius: 2px;
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* 모바일 전용 로그인/회원 — 데스크탑에서 숨김, 768px 이하에서 표시 */
.nav-mobile-auth { display: none; }

/* ══════════════════════════════════════════════════════════════
   4. 푸터 — 밝은 회색 배경, 2단 구성
   ══════════════════════════════════════════════════════════════ */
.footer {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 48px 0 32px;
    margin-top: 60px;
}
.footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
}
/* 상단: 브랜드명 + 링크 */
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.footer-brand {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
}
.footer-links {
    display: flex;
    gap: 24px;
}
.footer-links a {
    font-size: 13px;
    color: var(--text2);
    text-decoration: none;
    transition: color .2s;
}
.footer-links a:hover { color: var(--teal); text-decoration: none; }
/* 하단: 사업자 정보 */
.footer-info {
    font-size: 13px;
    color: var(--text3);
    line-height: 1.8;
}
.footer-info a { color: var(--text3); }
.footer-info a:hover { color: var(--teal); }

/* ══════════════════════════════════════════════════════════════
   5. 카카오톡 플로팅 버튼
   ══════════════════════════════════════════════════════════════ */
.float-kakao {
    position: fixed;
    bottom: 30px;
    right: 16px;
    background: #fae100;
    color: #3b1e1e;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px 8px 8px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    z-index: 9999;
    white-space: nowrap;
    transition: transform .2s;
}
.float-kakao:hover { transform: scale(1.05); text-decoration: none; color: #3b1e1e; }
.float-kakao img { width: 28px; height: 28px; display: block; border-radius: 50%; }

/* ══════════════════════════════════════════════════════════════
   6. #wrapper / #container 오버라이드 — 중앙 정렬, 깨끗한 레이아웃
   ══════════════════════════════════════════════════════════════ */
/* #wrapper: 전체 너비 (네비와 동일하게 배경 확장)
   index.php처럼 배경이 뷰포트 전체에 깔리도록 max-width 제거 */
#wrapper {
    max-width: none;
    margin: 0;
    min-height: 500px;
    float: none !important;
    width: auto !important;
}
/* #container: nav-inner와 동일한 box-sizing + max-width + padding */
#container {
    max-width: 1140px;
    margin: 0 auto;
    float: none !important;
    width: auto !important;
    padding: 20px 32px 48px;
    font-size: 14px;
    box-sizing: border-box;  /* padding 포함 1140px — nav-inner와 동일 */
}
#container_title {
    font-size: 24px;
    font-weight: 700;
    padding: 0 0 8px;
    color: var(--text);
}

/* 페이지 콘텐츠 래퍼 — nav-inner(1140px)와 동일한 너비 */
.page-content {
    max-width: 1140px;
    margin: 0 auto;
    padding: 24px 0;
}

/* ══════════════════════════════════════════════════════════════
   7. 카드 컴포넌트
   ══════════════════════════════════════════════════════════════ */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}
.card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
}
.card-desc {
    font-size: 14px;
    color: var(--text2);
    line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════
   8. 버튼 — 모던 라운드 스타일
   ══════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    transition: all .2s;
    cursor: pointer;
    border: none;
    text-decoration: none;
    font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #1d4ed8; color: #fff; }
.btn-outline {
    background: transparent;
    color: var(--teal);
    border: 1.5px solid var(--teal);
}
.btn-outline:hover { background: var(--teal-bg); }
.btn-gray { background: #f1f5f9; color: var(--text2); }
.btn-gray:hover { background: #e2e8f0; }

/* 그누보드 기본 버튼 오버라이드 */
.btn_submit {
    padding: 12px 32px;
    border: 0;
    border-radius: 10px;
    background: var(--teal);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    font-family: inherit;
    letter-spacing: 0;
}
.btn_submit:hover { background: #1d4ed8; }
.btn_cancel {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid var(--border) !important;
    border-radius: 10px;
    background: #fff !important;
    color: var(--text2) !important;
    text-decoration: none;
    font-size: 14px;
    transition: all .2s;
}
.btn_cancel:hover { background: var(--bg2) !important; text-decoration: none; }
a.btn_frmline, button.btn_frmline {
    padding: 6px 14px;
    border: 1px solid var(--border) !important;
    border-radius: 8px;
    background: #fff !important;
    color: var(--text2) !important;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
    height: auto;
    line-height: 1.5;
}
a.btn_frmline:hover, button.btn_frmline:hover {
    background: var(--bg2) !important;
    border-color: var(--border2) !important;
}
.btn_confirm { text-align: center; padding: 24px 0; }

/* ══════════════════════════════════════════════════════════════
   9. 폼 요소 — 깨끗한 보더, 포커스 링
   ══════════════════════════════════════════════════════════════ */
.frm_input,
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    border: 1px solid var(--border) !important;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fff !important;
    color: var(--text);
    transition: border-color .2s;
    line-height: 1.5;
    height: auto;
}
.frm_input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* 폼 테이블 오버라이드 (.tbl_frm01) */
.tbl_frm01 { margin: 0 0 32px; }
.tbl_frm01 th {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    width: 120px;
}
.tbl_frm01 td {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.tbl_frm01 .frm_info {
    display: block;
    padding: 0 0 8px;
    font-size: 12px;
    color: var(--text3);
    line-height: 1.5;
}

/* 폼 테이블 오버라이드 (.tbl_frm02) — API 등록 등 */
.tbl_frm02 { margin: 0 0 32px; }
.tbl_frm02 th {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
}
.tbl_frm02 td {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

/* ══════════════════════════════════════════════════════════════
   10. 기본 테이블 오버라이드 (.tbl_head01)
   ══════════════════════════════════════════════════════════════ */
.tbl_head01 { margin: 0 0 16px; }
.tbl_head01 thead th {
    padding: 12px 8px;
    border: none;
    border-bottom: 2px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}
.tbl_head01 tbody td {
    padding: 10px 8px;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.tbl_head01 tbody tr:hover { background: var(--teal-bg); }

/* ══════════════════════════════════════════════════════════════
   11. 게시판 오버라이드 (#bo_cate, #bo_sch, #bo_v 등)
   ══════════════════════════════════════════════════════════════ */

/* ── 게시판 카테고리 (nav#bo_cate) ───────────────────────────── */
#bo_cate { margin-bottom: 16px; }
/* 카테고리 제목 숨김 */
#bo_cate h2 {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
/* 카테고리 목록: 가로 필 버튼 */
#bo_cate_ul {
    display: flex !important;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#bo_cate_ul li {
    list-style: none;
    float: none !important;
    margin-bottom: 0;       /* basic2 style.css의 margin-bottom:-1px 오버라이드 */
}
#bo_cate_ul li a {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text2);
    background: var(--bg2);
    border: 1px solid var(--border);
    transition: all .2s;
    text-decoration: none;
    /* basic2 style.css의 #bo_cate a 탭 스타일 오버라이드 */
    width: auto;
    position: static;
    margin-left: 0;
    letter-spacing: normal;
    line-height: inherit;
}
#bo_cate_ul li a:hover {
    background: var(--teal-bg);
    color: var(--teal);
    border-color: var(--teal);
    text-decoration: none;
}
/* 현재 선택된 카테고리 — id="bo_cate_on" */
#bo_cate_on {
    background: var(--teal) !important;
    color: #fff !important;
    border-color: var(--teal) !important;
}

/* ── 게시판 검색 (fieldset#bo_sch) ───────────────────────────── */
#bo_sch {
    margin: 12px 0 0;
    padding: 12px 16px;
    background: var(--bg2);
    border-radius: 10px;
    border: 1px solid var(--border);
}
#bo_sch legend {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
/* 검색 폼: 가로 정렬 */
#bo_sch form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#bo_sch select {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 8px;
    min-width: 100px;
}
#bo_sch .frm_input {
    padding: 6px 10px !important;
    font-size: 13px;
    flex: 1;
    min-width: 120px;
}
/* 검색 버튼: 컴팩트 사이즈 */
#bo_sch .btn_submit {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 8px;
    width: auto;
    display: inline-block;
}

/* ── 게시판 버튼 영역 (.bo_fx) ───────────────────────────────── */
.bo_fx {
    margin: 8px 0;
}

/* ── 게시판 글쓰기/RSS 버튼 ──────────────────────────────────── */
a.btn_b01,
a.btn_b02 {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: all .2s;
    text-decoration: none;
}
a.btn_b01 {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text2);
}
a.btn_b01:hover {
    background: var(--teal-bg);
    color: var(--teal);
    border-color: var(--teal);
}
a.btn_b02 {
    background: var(--teal);
    border: 1px solid var(--teal);
    color: #fff;
}
a.btn_b02:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

/* ── 게시판 목록 내 카테고리 링크 ─────────────────────────────── */
.bo_cate_link {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--teal) !important;  /* basic2의 color:#999 !important 오버라이드 */
    background: var(--teal-bg);
    margin-right: 4px;
    text-decoration: none;
    vertical-align: middle;
    border-right: none;             /* basic2의 border-right 구분선 제거 */
}
.bo_cate_link:hover {
    background: var(--teal);
    color: #fff;
    text-decoration: none;
}

/* ── 게시판 상세 ─────────────────────────────────────────────── */
#bo_v { margin-bottom: 24px; }
#bo_v_title {
    padding: 20px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 2px solid var(--text);
}
#bo_v_info {
    padding: 12px 0;
    font-size: 13px;
    color: var(--text3);
    border-bottom: 1px solid var(--border);
}
#bo_v_con {
    padding: 24px 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
    min-height: 200px;
}
#bo_v_bot {
    padding: 16px 0;
    border-top: 1px solid var(--border);
}
#bo_v_com { margin-top: 24px; }

/* ── 페이징 ──────────────────────────────────────────────────── */
.pg_wrap { clear: both; padding: 16px 0 8px; margin: 0; text-align: center; }
.pg_page, .pg_current {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin: 0 2px;
    height: auto;
    line-height: 1.5;
}
.pg_page {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text2);
    transition: all .2s;
}
.pg_page:hover {
    background: var(--teal-bg);
    color: var(--teal);
    border-color: var(--teal);
    text-decoration: none;
}
.pg_current {
    background: var(--teal);
    color: #fff;
    border: 1px solid var(--teal);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   12. 서브페이지 콘텐츠 스타일
   ══════════════════════════════════════════════════════════════ */

/* ── 페이지 헤더 ─────────────────────────────────────────────── */
.page-header {
    text-align: center;
    padding: 40px 0 32px;
}
.page-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.page-header p {
    font-size: 15px;
    color: var(--text2);
}

/* ── 요금 카드 그리드 ────────────────────────────────────────── */
.price-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 32px 0;
}
.price-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    transition: all .2s;
}
.price-card:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow-md);
}
/* 인기 요금제 강조 */
.price-card.featured {
    border-color: var(--teal);
    box-shadow: 0 0 0 1px var(--teal), var(--shadow-md);
    position: relative;
}
.price-card.featured::before {
    content: '\C778\AE30'; /* 인기 */
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--teal);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 10px;
}
.price-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}
.price-card-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--teal);
    margin-bottom: 4px;
}
.price-card-price span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text3);
}
.price-card-period {
    font-size: 13px;
    color: var(--text3);
    margin-bottom: 20px;
}
.price-card-features {
    text-align: left;
    font-size: 13px;
    color: var(--text2);
    line-height: 2;
    list-style: none;
    margin: 0;
    padding: 0;
}
.price-card-features li::before {
    content: '\2713  ';
    color: var(--teal);
    font-weight: 700;
}

/* ── 다운로드 히어로 카드 ─────────────────────────────────────── */
.download-hero {
    text-align: center;
    padding: 48px 32px 40px;
    margin-bottom: 36px;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(37,99,235,0.18);
}
/* 상단 아이콘 — 둥근 원 + 바운스 애니메이션 */
.download-hero-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dlBounce 2s ease-in-out infinite;
}
@keyframes dlBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.download-hero h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}
.download-hero > p {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin: 0 0 28px;
    padding: 0;
}
/* CTA 다운로드 버튼 — 큰 흰색 버튼 + 펄스 글로우 */
a.download-btn,
a.download-btn:link,
a.download-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 44px;
    background: #fff;
    color: #1e40af;
    font-size: 17px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: transform .2s, box-shadow .2s;
    animation: dlPulse 2.5s ease-in-out infinite;
}
a.download-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    text-decoration: none;
    color: #1e40af;
}
.download-btn-icon {
    display: inline-flex;
    align-items: center;
}
/* 펄스 글로우: 버튼 주변에 빛나는 효과 */
@keyframes dlPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 0 24px rgba(255,255,255,0.25); }
}
/* 하단 부가 텍스트 */
.download-sub {
    display: block;
    margin-top: 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

/* ── 특징 리스트 그리드 ──────────────────────────────────────── */
.feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 32px 0;
}
.feature-item {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}
.feature-item h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.feature-item p {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* ── API 폼 스타일 ───────────────────────────────────────────── */
.api-form {
    max-width: 800px;
    margin: 0 auto;
}
.api-form .form-group {
    margin-bottom: 20px;
}
.api-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.api-form input[type="text"].frm_input {
    width: 100% !important;
    padding: 10px 14px;
    box-sizing: border-box;
}

/* ── 안내 텍스트 블록 ────────────────────────────────────────── */
.info-block {
    background: var(--bg-blue);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: 20px 24px;
    margin: 20px 0;
    font-size: 14px;
    color: var(--text2);
    line-height: 1.8;
}
.info-block strong { color: var(--text); }

/* ── 스텝 안내 (1-2-3 진행 카드) ──────────────────────────────── */
.steps {
    display: flex;
    gap: 16px;
    margin: 24px 0;
    flex-wrap: wrap;
}
.step {
    flex: 1;
    min-width: 200px;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
}
.step h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.step p {
    font-size: 13px;
    color: var(--text3);
    margin: 0;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   13. 회원 스킨 — 약관 동의, 폼 스타일
   ══════════════════════════════════════════════════════════════ */
.mbskin {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 16px !important;
}
.mbskin p { font-size: 14px; color: var(--text2); margin-bottom: 16px; }
.mbskin section { margin-bottom: 32px; }
.mbskin section h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--text);
    margin-bottom: 16px;
}
.mbskin textarea {
    width: 100% !important;
    height: 180px;
    padding: 16px;
    border: 1px solid var(--border) !important;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    background: #fff !important;
}
.fregister_agree {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg2);
    border-radius: 8px;
}
.fregister_agree label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}
.mbskin .tbl_frm01 th { width: 130px; }

/* ── 로그인 페이지(#mb_login) — login.css가 주도, site.css .mbskin 간섭 방지 ── */
/* login.php는 head.sub.php만 사용(nav 미포함)하여 독립 레이아웃.
   site.css의 .mbskin 규칙이 login.css보다 높은 specificity로 적용되므로,
   #mb_login ID 셀렉터로 원래 login.css 스타일을 복원 */
#mb_login.mbskin {
    max-width: 420px;
    padding: 0 20px !important;
}
#mb_login.mbskin p {
    color: #94a3b8;
    margin: 0;
}
#mb_login .login-subtitle {
    margin: 0 0 40px;
}

/* ══════════════════════════════════════════════════════════════
   14. 반응형 — 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 네비: 햄버거 메뉴로 전환 */
    /* API 폼 모바일: 좌우 꽉 채움 */
    .page-content { padding: 8px 4px; }
    .card { padding: 12px 6px; }
    .api-form .form-group { margin-bottom: 14px; }
    .info-block { padding: 12px 8px; margin: 10px 4px; }
    .api-form { max-width: 100%; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        flex-direction: column;
        padding: 8px 0;
    }
    .nav-menu.open { display: flex; }
    .nav-menu a {
        padding: 12px 32px;
        border-radius: 0;
        font-size: 15px;
    }
    .nav-menu a:hover { background: var(--bg2); }
    .nav-actions { display: none; }
    .nav-toggle { display: block; }
    /* 모바일 로그인/회원 메뉴 표시 */
    .nav-mobile-auth {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--border);
        margin-top: 4px;
        padding-top: 4px;
    }
    .nav-mobile-auth a {
        padding: 12px 32px;
        font-size: 15px;
        color: var(--teal);
        font-weight: 600;
    }
    .nav-mobile-auth a:hover { background: var(--bg2); }

    /* 레이아웃 */
    .nav-inner { padding: 0 16px; }
    #container { padding: 20px 16px 32px; }

    /* 푸터 */
    .footer { padding: 32px 0 24px; }
    .footer-inner { padding: 0 16px; }
    .footer-top {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    /* 콘텐츠 그리드 → 1열 */
    .price-cards { grid-template-columns: 1fr 1fr; }
    .download-hero { padding: 36px 20px 32px; }
    .download-hero h3 { font-size: 19px; }
    a.download-btn, a.download-btn:link, a.download-btn:visited { padding: 14px 32px; font-size: 15px; }
    .feature-list { grid-template-columns: 1fr; }
    .steps { flex-direction: column; }

    /* 게시판 */
    .tbl_head01 td { padding: 8px 4px; font-size: 12px; }
    .tbl_head01 thead th { padding: 10px 4px; font-size: 12px; }

    /* 폼 테이블 → 세로 배치 */
    .tbl_frm01 th, .tbl_frm02 th {
        display: block;
        width: auto !important;
    }
    .tbl_frm01 td, .tbl_frm02 td { display: block; }
}

/* ══════════════════════════════════════════════════════════════
   15. 반응형 — 480px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .page-header h2 { font-size: 22px; }
    .card { padding: 20px; }
    .price-cards { grid-template-columns: 1fr; }
    .price-card { padding: 20px 16px; }
    .step { min-width: 0; }
}