@charset "utf-8";

/* ───────── 게시판/리스트 공용 (notice / faq / qna / delivery) ───────── */
.board_page { padding:18px 0 60px; }

/* 필터 탭 */
.board_page .filter {display:flex;gap:6px;margin-bottom:14px;}
.board_page .filter.scroll { overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
.board_page .filter.scroll::-webkit-scrollbar { display:none; }
.board_page .filter .tab {flex:1;padding:10px 4px;text-align:center;font-size: 14px;font-weight:600;color:#777;background: #fff;border: 1px solid #e7eaef;border-radius:24px;white-space:nowrap;}
.board_page .filter.scroll .tab { flex:0 0 auto; padding:9px 16px; }
.board_page .filter .tab.on {border-color: transparent;background: linear-gradient(135deg,#456DEA 0%,#2B53CF 100%);color:#fff;}

.board_page .total { padding:0 18px; margin-bottom:14px; font-size:13px; color:#666; }
.board_page .total strong { color:#4834d4; font-weight:800; }

.board_page .empty {padding:60px 18px;text-align:center;font-size: 16px;color:#999;}

/* ───── 공지 리스트 ───── */
.board_list {background: #fff;}
.board_list li {border-bottom: 1px solid #dfe5f8;}
.board_list li.pin {border-left: 3px solid var(--color-main);}
.board_list li a { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:14px 12px; }
.board_list .cate {padding:3px 9px;border-radius:6px;font-size: 12px;font-weight:700;color:#fff;}
.board_list .cate_공지   {background: var(--color-main);}
.board_list .cate_이벤트 { background:#ff3d7f; }
.board_list .cate_점검   { background:#ff9500; }
.board_list .subject {font-size: 16px;color:#222;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board_list .subject .ic_pin { margin-left:2px; }
.board_list .date { font-size:11.5px; color:#999; }

/* ───── 공지 상세 ───── */
.board_page .view {background:#fff;border: 1px solid #dfe5f8;border-radius:14px;overflow:hidden;}
.board_page .view_head { padding:18px 18px 14px; border-bottom:1px solid #f3f1ff; }
.board_page .view_head .cate {display:inline-block;padding:3px 9px;border-radius:6px;font-size: 13px;font-weight:700;color:#fff;margin-bottom:8px;}
.board_page .view_head .cate_공지   {background: var(--color-main);}
.board_page .view_head .cate_이벤트 { background:#ff3d7f; }
.board_page .view_head .cate_점검   { background:#ff9500; }
.board_page .view_head .subject {font-size: 18px;font-weight:800;color: #333;line-height:1.4;}
.board_page .view_head .meta {margin-top:8px;font-size: 14px;color:#888;}
.board_page .view_body {padding:22px 18px;font-size: 16px;color:#333;line-height:1.7;min-height:160px;}
.board_page .view_foot {padding:14px 18px;background: #eff1fa;text-align:center;}
.board_page .view_foot .btn_back_list {display:inline-block;padding: 10px 45px;background: var(--color-main);color:#fff;border-radius:8px;font-size: 14px;font-weight: 500;}

/* ───── FAQ ───── */
.faq_list { padding:0 18px; }
.faq_list li { margin-bottom:8px; background:#fff; border:1px solid #ece9ff; border-radius:12px; overflow:hidden; }
.faq_list .q { display:flex; align-items:center; gap:12px; width:100%; padding:16px 14px; text-align:left; }
.faq_list .q .mark {flex-shrink:0;align-self: flex-start;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background: var(--color-main);color:#fff;border-radius:50%;font-size:12px;font-weight:800;}
.faq_list .q .text {flex:1;font-size: 16px;font-weight:600;color:#222;}
.faq_list .q .arr {color:#aaa;font-size: 24px;font-weight:300;transition:transform 0.2s;}
.faq_list li.open .q .arr { transform:rotate(45deg); color:#4834d4; }
.faq_list .a { display:none; padding:0 14px 16px; gap:12px; align-items:flex-start; }
.faq_list li.open .a { display:flex; }
.faq_list .a .mark { flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:#ff3d7f; color:#fff; border-radius:50%; font-size:12px; font-weight:800; }
.faq_list .a .text {flex:1;font-size: 16px;color:#555;line-height:1.7;}

/* ───── QnA ───── */
.qna_page .qna_top {display:flex;align-items:center;justify-content:space-between;padding: 0 0 14px;}
.qna_page .qna_top .guide {font-size: 14px;color:#888;}
.qna_page .qna_top .btn_primary {padding:9px 18px;background: var(--color-main);color:#fff;border-radius:24px;font-size:13px;font-weight:700;box-shadow: 0px 4px 10px 0px rgba(0,30,124,0.25);}

.qna_list {}
.qna_list li { margin-bottom:10px; background:#fff; border:1px solid #ece9ff; border-radius:12px; }
.qna_list li a { display:block; padding:14px; }
.qna_list .row1 { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.qna_list .cate { padding:3px 9px; background:#f0eeff; color:#4834d4; border-radius:6px; font-size:11px; font-weight:700; }
.qna_list .status {padding:3px 9px;border-radius:6px;font-size: 12px;font-weight:700;}
.qna_list .status_answered { background:#e0f7e9; color:#1e8c47; }
.qna_list .status_waiting     { background:#fff3b0; color:#8a6d00; }
.qna_list .subject {font-size: 16px;color:#222;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qna_list .date {font-size: 13px;color:#999;}

/* QnA 작성 */
.write_form {}
.write_form .field { margin-bottom:14px; }
.write_form .field label {display:block;font-size: 14px;font-weight:700;color:#444;margin-bottom:6px;}
.write_form .field label .opt { color:#999; font-weight:500; }
.write_form .field input, .write_form .field select, .write_form .field textarea {
    width:100%;
    padding:12px 14px;
    border:1px solid #e5e2f5;
    border-radius:10px;
    font-size: 16px;
    background:#fff;
}
.write_form .field textarea { resize:vertical; min-height:160px; line-height:1.6; }
.write_form .field input:focus, .write_form .field select:focus, .write_form .field textarea:focus {
    border-color: var(--color-main);
    outline:none;
    box-shadow: 0px 4px 10px 0px rgba(0,30,124,0.12);
}
.write_form .form_foot { display:flex; gap:8px; margin-top:18px; }
.write_form .form_foot button, .write_form .form_foot a { flex:1; height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; font-size:14px; font-weight:800; }
.write_form .form_foot .btn_outline {background:#fff;color: var(--color-main);border: 1.5px solid var(--color-main);}
.write_form .form_foot .btn_primary {background: var(--color-main);color:#fff;box-shadow: 0px 4px 10px 0px rgba(0,30,124,0.25);}

/* ───── 배송현황 ───── */
.delivery_page .step_guide { margin:0 18px 18px; padding:18px 16px 16px; background:linear-gradient(135deg,#f8f7ff,#f0eeff); border:1px solid #ece9ff; border-radius:14px; position:relative; }
.delivery_page .step_guide ul { display:flex; align-items:flex-start; justify-content:space-between; position:relative; }
.delivery_page .step_guide ul::before { content:''; position:absolute; top:18px; left:14%; right:14%; height:2px; background:repeating-linear-gradient(to right,#cfc9f5 0,#cfc9f5 4px,transparent 4px,transparent 8px); z-index:0; }
.delivery_page .step_guide li { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; z-index:1; }
.delivery_page .step_guide .ic { width:38px; height:38px; border-radius:50%; background:#fff; border:1.5px solid #cfc9f5; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 3px 8px rgba(72,52,212,0.1); }
.delivery_page .step_guide .lbl { font-size:11.5px; color:#4834d4; font-weight:700; letter-spacing:-0.2px; }

.card_list {display:flex;flex-direction:column;gap:12px;}
.card_list .card {padding: 16px 20px;background:#fff;border:1px solid #ece9ff;border-radius:14px;box-shadow:0 3px 10px rgba(72,52,212,0.05);}
.card_list .card_head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.card_list .status {padding:4px 10px;border-radius:6px;font-size: 11px;font-weight:800;}
.card_list .status_request  { background:#fff3b0; color:#8a6d00; }
.card_list .status_approve  { background:#e0e5ff; color:#3a3acc; }
.card_list .status_shipping { background:#e0f0ff; color:#0a6cd9; }
.card_list .status_complete       { background:#e0f7e9; color:#1e8c47; }
.card_list .status_paid           { background:#e0f7e9; color:#1e8c47; }
.card_list .status_cancel         { background:#ffe5e5; color:#c0345c; }
.card_list .status_partial_cancel { background:#ffe5d6; color:#c84a00; }
.card_list .status_ready          { background:#fff3b0; color:#8a6d00; }
.card_list .status_fail           { background:#ffd6d6; color:#a30000; }
.card_list .date {font-size: 14px;color:#999;}
.card_list .title {font-size: 16px;font-weight:700;color:#222;margin-bottom:10px;line-height:1.4;}
.card_list .meta { padding-top:10px; border-top:1px dashed #ece9ff; }
.card_list .meta li {display:flex;gap:8px;font-size: 14px;color:#555;padding:3px 0;}
.card_list .meta li span {flex: 0 0 68px;color:#999;font-weight:600;}
.card_list .btn_track { margin-top:12px; width:100%; padding:11px; background:#1e1a4a; color:#fff; border-radius:10px; font-size:13px; font-weight:700; }

/* QnA — 어드민 HTML 답변 (SunEditor 출력) */
.qna_answer_html p { margin:0 0 8px; line-height:1.65; }
.qna_answer_html p:last-child { margin-bottom:0; }
.qna_answer_html ul, .qna_answer_html ol { padding-left:20px; margin:4px 0 8px; }
.qna_answer_html li { line-height:1.65; margin-bottom:3px; list-style:disc; }
.qna_answer_html ol li { list-style:decimal; }
.qna_answer_html strong { font-weight:700; color:#1e1a4a; }
.qna_answer_html a { color:#4834d4; text-decoration:underline; }
.qna_answer_html img { max-width:100%; height:auto; border-radius:6px; margin:6px 0; }
.qna_answer_html h3, .qna_answer_html h4 { font-size:14px; font-weight:800; color:#1e1a4a; margin:10px 0 4px; }
.qna_answer_html blockquote { padding:8px 12px; border-left:3px solid #4834d4; background:#f8f7ff; margin:6px 0; color:#444; }