@charset "utf-8";
/* =========================================================
   지음치과 진료칼럼 스킨 (skin/board/column)
   지음 홈페이지 톤: 노랑 #ffe100(바·버튼 면) · 주황 #ffa200(라벨·강조 글자)
   · 호버 #ffc100 · 본문 #333/#282828 · 회색 면 #f2f2f2/#ececec · 푸터 #4c4c4c
   글꼴: Noto Sans KR(본문) · Spoqa Han Sans(제목, 사이트 aft02 계열)
   ========================================================= */
.jc_wrap {
    --jc-yellow: #ffe100;
    --jc-accent: #ffa200;
    --jc-hover: #ffc100;
    --jc-ink: #222;
    --jc-text: #333;
    --jc-sub: #707070;
    --jc-mute: #9a9a9a;
    --jc-line: #e3e3e3;
    --jc-bg: #f5f5f5;
    --jc-dark: #4c4c4c;
    --jc-head: 'Spoqa Han Sans Neo', 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Noto Sans KR', sans-serif;
    font-family: 'Noto Sans KR', sans-serif;
    color: var(--jc-text);
    letter-spacing: -0.02em;
    font-size: 16px;
    line-height: 1.6;
    word-break: keep-all;
    overflow-x: hidden;
    background: #fff;
}
.jc_wrap *, .jc_wrap *::before, .jc_wrap *::after { box-sizing: border-box; }
.jc_wrap a { color: #333; }
.jc_wrap a.jc_btn_dark { color: #fff; }
.jc_wrap a.jc_btn_dark:hover { color: var(--jc-yellow); }
.jc_wrap img { max-width: 100%; }
.jc_wrap h1, .jc_wrap h2, .jc_wrap h3, .jc_wrap h4 { margin: 0; font-family: var(--jc-head); }
.jc_wrap .sound_only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 상단 비주얼 (사진 없는 글자형 서브 상단) ---------- */
.jc_visual {
    position: relative; overflow: hidden; display: flex; align-items: center;
    min-height: 300px; padding: 64px 0 60px; background: #f6f6f6; border-bottom: 1px solid #ececec;
}
.jc_visual_s { min-height: 210px; padding: 44px 0 42px; }
.jc_visual::before { /* 지음 로고 워터마크 느낌의 옅은 원 (오른쪽) */
    content: ''; position: absolute; right: 8%; top: 50%; width: 440px; height: 440px; margin-top: -170px;
    border: 44px solid #fff; border-radius: 50%; z-index: 0; pointer-events: none;
}
.jc_visual_s::before { width: 320px; height: 320px; margin-top: -120px; border-width: 32px; }
.jc_visual_inner { position: relative; z-index: 1; width: 100%; max-width: 1344px; margin: 0 auto; padding: 0 40px; }
.jc_visual_label {
    display: inline-block; margin: 0 0 18px; padding-bottom: 2px; border-bottom: 1px solid var(--jc-accent);
    color: var(--jc-accent); font-family: var(--jc-head); font-weight: 700; font-size: 19px; line-height: 1.3;
}
.jc_visual_title { margin: 0; font-family: var(--jc-head); font-weight: 700; font-size: 56px; line-height: 1.15; color: #111; letter-spacing: -0.04em; }
.jc_visual_s .jc_visual_label { margin-bottom: 14px; font-size: 17px; }
.jc_visual_s .jc_visual_title { font-size: 42px; }
.jc_visual_desc { margin: 24px 0 0; font-size: 18px; line-height: 1.65; color: #444; font-weight: 400; }
.jc_visual_s .jc_visual_desc { margin-top: 16px; font-size: 16px; }

/* ---------- 공통 컨테이너 / 서브타이틀 ---------- */
.jc_container { width: 100%; max-width: 1344px; margin: 0 auto; padding: 0 40px 120px; }
.jc_subtit {
    padding: 70px 0 40px; font-family: var(--jc-head); font-weight: 700; font-size: 30px; color: #222; line-height: 1.3;
}
.jc_subtit em { font-style: normal; color: var(--jc-accent); font-size: 25px; }

/* 버튼 — 사이트의 각진 노랑 버튼 톤 */
.jc_btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 46px; padding: 0 24px; border: 1px solid #cfcfcf; background: #fff; color: #333;
    font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .15s ease; font-family: inherit;
}
.jc_btn:hover { border-color: var(--jc-yellow); background: var(--jc-yellow); color: #222; }
.jc_btn_yellow { background: var(--jc-yellow); border-color: var(--jc-yellow); color: #222; font-weight: 700; }
.jc_btn_yellow:hover { background: var(--jc-hover); border-color: var(--jc-hover); }
.jc_btn_dark { background: var(--jc-dark); border-color: var(--jc-dark); color: #fff; }
.jc_btn_dark:hover { background: #333; border-color: #333; color: var(--jc-yellow); }
.jc_btn_line { min-height: 40px; padding: 0 16px; font-size: 14px; border-style: dashed; }

/* =========================================================
   목록
   ========================================================= */
.jc_layout { display: flex; gap: 48px; align-items: flex-start; }
.jc_side { flex: 0 0 240px; }
.jc_side_sticky { position: sticky; top: 130px; }
.jc_side_title { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid #222; font-family: var(--jc-head); font-weight: 700; font-size: 17px; color: #222; }
.jc_cat { margin: 0; padding: 0; list-style: none; }
.jc_cat li { margin: 0; }
.jc_cat_item {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid #efefef; color: #444; font-size: 15px; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.jc_cat_item:hover { background: #fffbe0; color: #222; }
.jc_cat_item.active { background: var(--jc-yellow); color: #222; font-weight: 700; border-bottom-color: var(--jc-yellow); }
.jc_cat_cnt { font-size: 13px; color: var(--jc-mute); font-weight: 400; }
.jc_cat_item.active .jc_cat_cnt { color: #6b5a00; }

.jc_content { flex: 1; min-width: 0; }
.jc_head { position: relative; padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--jc-line); }
.jc_head_title { font-size: 32px; font-weight: 700; color: #111; line-height: 1.35; letter-spacing: -0.03em; }
.jc_head_cnt { display: inline-block; margin-left: 6px; font-size: 18px; color: var(--jc-accent); font-weight: 700; vertical-align: middle; }
.jc_head_intro { margin: 14px 0 0; font-size: 16px; line-height: 1.75; color: #555; max-width: 920px; }
.jc_head_meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 14px; color: var(--jc-sub); }
.jc_head_meta a { text-decoration: none; }
.jc_head_meta a:hover { color: var(--jc-accent); }
.jc_head_meta strong { color: #222; font-weight: 700; }
.jc_head_tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.jc_search { position: relative; flex: 0 1 340px; display: flex; }
.jc_search input[type=text] {
    width: 100%; height: 46px; padding: 0 46px 0 16px; border: 1px solid #cfcfcf; background: #fff;
    font-size: 15px; color: #333; outline: none; border-radius: 0; font-family: inherit;
}
.jc_search input[type=text]:focus { border-color: var(--jc-accent); }
.jc_search button { position: absolute; right: 0; top: 0; width: 46px; height: 46px; border: 0; background: none; color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.jc_search button:hover { color: var(--jc-accent); }

.jc_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.jc_card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border-bottom: 4px solid transparent; transition: border-color .2s ease; }
.jc_card:hover { border-bottom-color: var(--jc-yellow); }
.jc_card_img { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--jc-bg); }
.jc_card_img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.jc_card:hover .jc_card_img img { transform: scale(1.04); }
.jc_card_body { display: flex; flex-direction: column; gap: 8px; padding: 18px 2px 20px; }
.jc_card_cat { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--jc-accent); }
.jc_card_title { font-size: 19px; font-weight: 700; line-height: 1.45; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jc_card:hover .jc_card_title { color: #000; }
.jc_card_desc { font-size: 14.5px; line-height: 1.65; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jc_card_date { font-size: 13px; color: var(--jc-mute); }
.jc_empty { grid-column: 1 / -1; padding: 100px 0; text-align: center; color: var(--jc-mute); font-size: 17px; background: #fafafa; }

/* 페이지네이션 (그누보드 기본 마크업 덮어쓰기) */
.jc_pagination { margin: 56px 0 0; text-align: center; }
.jc_pagination .pg_wrap { float: none; display: inline-block; }
.jc_pagination .pg { display: inline-flex; gap: 6px; align-items: center; }
.jc_pagination .pg_page, .jc_pagination .pg_current {
    min-width: 38px; height: 38px; line-height: 36px; padding: 0 8px; border: 1px solid #ddd; background: #fff; color: #555; border-radius: 0; font-size: 14px;
}
.jc_pagination .pg_page:hover { border-color: var(--jc-yellow); background: #fffbe0; }
.jc_pagination .pg_current { background: var(--jc-yellow); border-color: var(--jc-yellow); color: #222; font-weight: 700; }
.jc_pagination .pg_start, .jc_pagination .pg_prev, .jc_pagination .pg_end, .jc_pagination .pg_next { background-color: #fff; border-color: #ddd; }

/* 목록 하단 Q&A */
.jc_qa { margin-top: 100px; padding: 50px 56px; background: var(--jc-bg); }
.jc_qa_head { margin: 0 0 26px; font-size: 22px; font-weight: 700; color: #222; }
.jc_qa_item { padding: 20px 0; border-top: 1px solid #dedede; }
.jc_qa_q { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #222; }
.jc_qa_q::before { content: 'Q. '; color: var(--jc-accent); }
.jc_qa_a { margin: 0; font-size: 15px; line-height: 1.75; color: #555; }
.jc_qa_src { margin: 8px 0 0; font-size: 14px; color: var(--jc-sub); }
.jc_qa_src a { color: #444; text-decoration: underline; text-underline-offset: 3px; }
.jc_qa_src a:hover { color: var(--jc-accent); }

/* =========================================================
   본문(글보기)
   ========================================================= */
.jc_crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 40px 0 0; font-size: 14px; color: var(--jc-mute); }
.jc_crumb a { text-decoration: none; color: #777; }
.jc_crumb a:hover { color: var(--jc-accent); }
.jc_vlayout { display: flex; gap: 60px; align-items: flex-start; padding-top: 40px; }
.jc_toc_side { flex: 0 0 240px; display: none; }
.jc_main { flex: 1; min-width: 0; } /* 디어스처럼 남는 폭 전부(1344 기준 약 964px) */
@media (min-width: 1101px) {
    .jc_toc_side { display: block; align-self: stretch; }
    .jc_toc_inline { display: none; }
}
.jc_toc_sticky { position: sticky; top: 130px; max-height: calc(100vh - 160px); overflow-y: auto; padding-right: 4px; }
.jc_toc_title { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px solid #222; font-family: var(--jc-head); font-weight: 700; font-size: 16px; color: #222; }
.jc_toc_list { margin: 0; padding: 0; list-style: none; }
.jc_toc_list li { margin: 0; line-height: 1.5; }
.jc_toc_list a { display: block; padding: 8px 0 8px 12px; border-left: 3px solid transparent; font-size: 14px; color: #777; text-decoration: none; transition: color .15s, border-color .15s; }
.jc_toc_list li.toc_lv3 a { padding-left: 24px; font-size: 13.5px; }
.jc_toc_list a:hover { color: #222; }
.jc_toc_list a.toc-active { color: #222; font-weight: 700; border-left-color: var(--jc-yellow); }

.jc_vhead { padding-bottom: 28px; border-bottom: 1px solid var(--jc-line); }
.jc_vcat { display: inline-block; margin-bottom: 14px; padding: 4px 12px; background: var(--jc-yellow); color: #222; font-size: 13px; font-weight: 700; text-decoration: none; }
.jc_view_title { font-size: 38px; font-weight: 700; line-height: 1.35; color: #111; letter-spacing: -0.035em; }
.jc_byline { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.jc_byline_av { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--jc-dark); color: var(--jc-yellow); display: flex; align-items: center; justify-content: center; font-family: var(--jc-head); font-weight: 700; font-size: 19px; }
.jc_byline_info { display: flex; flex-direction: column; gap: 2px; }
.jc_byline_name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #222; }
.jc_byline_name a { text-decoration: none; }
.jc_byline_name a:hover { color: var(--jc-accent); }
.jc_byline_badge { padding: 2px 8px; border: 1px solid var(--jc-accent); color: var(--jc-accent); font-size: 12px; font-weight: 700; line-height: 1.4; }
.jc_byline_sub { font-size: 14px; color: var(--jc-sub); }

.jc_summary { margin: 32px 0 0; padding: 24px 28px; background: #fffbe0; border-left: 5px solid var(--jc-yellow); }
.jc_summary_label { display: inline-block; margin-bottom: 8px; font-family: var(--jc-head); font-weight: 700; font-size: 14px; color: var(--jc-accent); }
.jc_summary_text { margin: 0; font-size: 17px; line-height: 1.8; color: #333; }

.jc_toc_inline { margin: 28px 0 0; padding: 22px 24px; border: 1px solid var(--jc-line); background: #fafafa; }
.jc_toc_inline ol { margin: 0; padding: 0; list-style: none; counter-reset: jctoc; }
.jc_toc_inline li { line-height: 1.55; padding: 5px 0; }
.jc_toc_inline li.toc_lv2 { counter-increment: jctoc; }
.jc_toc_inline li.toc_lv2 a::before { content: counter(jctoc) '. '; color: var(--jc-accent); font-weight: 700; }
.jc_toc_inline li.toc_lv3 { padding-left: 18px; font-size: 14px; }
.jc_toc_inline a { color: #444; text-decoration: none; font-size: 15px; }
.jc_toc_inline a:hover { color: var(--jc-accent); }

/* ---------- 본문 타이포 ---------- */
.jc_content_body { margin-top: 44px; font-size: 17.5px; line-height: 1.9; color: #333; letter-spacing: -0.01em; overflow-wrap: break-word; }
.jc_content_body p { margin: 0 0 20px; }
.jc_content_body h2 {
    margin: 64px 0 22px; padding-top: 30px; border-top: 1px solid var(--jc-line);
    font-size: 27px; font-weight: 700; line-height: 1.4; color: #111; letter-spacing: -0.03em; scroll-margin-top: 140px; position: relative;
}
.jc_content_body h2::before { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--jc-yellow); }
.jc_content_body > h2:first-child { margin-top: 0; }
.jc_content_body h3 {
    margin: 42px 0 14px; padding-left: 14px; border-left: 4px solid var(--jc-accent);
    font-size: 21px; font-weight: 700; line-height: 1.45; color: #222; scroll-margin-top: 140px;
}
.jc_content_body h4 { margin: 30px 0 10px; font-size: 18px; font-weight: 700; color: #333; }
.jc_content_body strong, .jc_content_body b { font-weight: 700; color: #111; }
.jc_content_body mark { background: linear-gradient(transparent 55%, rgba(255, 225, 0, .55) 55%); color: inherit; padding: 0 2px; }
.jc_content_body a { color: #b87400; text-decoration: underline; text-underline-offset: 3px; }
.jc_content_body a:hover { color: var(--jc-accent); }
.jc_content_body ul, .jc_content_body ol { margin: 0 0 24px; padding: 0 0 0 2px; list-style: none; }
.jc_content_body li { position: relative; padding-left: 24px; margin-bottom: 10px; line-height: 1.75; }
.jc_content_body ul > li::before { content: ''; position: absolute; left: 6px; top: 13px; width: 7px; height: 7px; background: var(--jc-yellow); border: 1px solid #e5c800; }
.jc_content_body ol { counter-reset: jcol; }
.jc_content_body ol > li { counter-increment: jcol; padding-left: 34px; }
.jc_content_body ol > li::before {
    content: counter(jcol); position: absolute; left: 0; top: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--jc-dark); color: var(--jc-yellow); font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
}
.jc_content_body blockquote { margin: 28px 0; padding: 20px 26px; background: var(--jc-bg); border-left: 4px solid var(--jc-dark); color: #444; font-size: 17px; line-height: 1.8; }
.jc_content_body blockquote p:last-child { margin-bottom: 0; }
.jc_content_body .point, .jc_content_body .callout { margin: 28px 0; padding: 22px 26px; background: #fffbe0; border: 1px solid #f3dd4c; }
.jc_content_body .point > *:last-child, .jc_content_body .callout > *:last-child { margin-bottom: 0; }
.jc_content_body hr { margin: 44px 0; border: 0; border-top: 1px solid var(--jc-line); }
.jc_content_body table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15.5px; display: block; overflow-x: auto; }
.jc_content_body th, .jc_content_body td { border: 1px solid #dcdcdc; padding: 12px 16px; text-align: left; line-height: 1.6; vertical-align: top; }
.jc_content_body th { background: #f4f4f4; font-weight: 700; color: #222; border-top: 2px solid #555; }
.jc_content_body img { display: block; max-width: 100%; height: auto; margin: 28px auto; }
.jc_content_body p > img { margin: 8px auto; }
.jc_content_body figure { margin: 28px 0; }
.jc_content_body figcaption, .jc_content_body img + em {
    display: block; margin: -16px 0 28px; text-align: center; font-size: 14px; font-style: normal; color: var(--jc-sub);
}
.jc_content_body iframe { max-width: 100%; }

/* 갤러리 (Swiper 5 — 사이트 공용 /js/swiper.js · /css/swiper.min.css) */
.jc_content_body .col_gallery { position: relative; margin: 28px 0 0; overflow: hidden; background: #111; }
.jc_content_body .col_gallery:not(.swiper-container) { background: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jc_content_body .col_gallery:not(.swiper-container) img { margin: 0; width: 100%; }
.jc_content_body .col_gallery .swiper-wrapper { align-items: flex-start; }
.jc_content_body .col_gallery .swiper-slide { display: flex; flex-direction: column; }
.jc_content_body .col_gallery .swiper-slide img { display: block; width: 100%; height: auto; margin: 0; }
.jc_content_body .col_gallery .gal_caption { background: #222; color: #eee; font-size: 14px; line-height: 1.55; text-align: center; padding: 13px 56px; }
.jc_content_body .col_gallery .gal_caption:empty { display: none; }
.jc_content_body .col_gallery .swiper-button-prev, .jc_content_body .col_gallery .swiper-button-next {
    width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.3);
}
.jc_content_body .col_gallery .swiper-button-prev:hover, .jc_content_body .col_gallery .swiper-button-next:hover { background: var(--jc-yellow); color: #222; border-color: var(--jc-yellow); }
.jc_content_body .col_gallery .swiper-button-prev::after, .jc_content_body .col_gallery .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.jc_content_body .col_gallery .swiper-button-prev { left: 14px; }
.jc_content_body .col_gallery .swiper-button-next { right: 14px; }
.jc_content_body .col_gallery .gallery_count { position: absolute; right: 14px; top: 14px; z-index: 5; padding: 4px 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12.5px; font-weight: 700; border-radius: 999px; }
.jc_content_body .gal_hint { margin: 10px 0 26px; text-align: center; font-size: 13.5px; color: var(--jc-sub); }
.jc_content_body .gal_hint b { color: #b87400; }

/* ---------- 본문 아래 블록 ---------- */
.jc_sec_title { margin: 0 0 10px; font-size: 24px; font-weight: 700; color: #111; }
.jc_sec_sub { margin: 0 0 22px; font-size: 15px; color: var(--jc-sub); }
.jc_ba, .jc_faq, .jc_refs, .jc_treat { margin-top: 64px; }
.jc_ba_wrap { display: flex; gap: 16px; margin-top: 18px; }
.jc_ba_item { flex: 1; margin: 0; position: relative; }
.jc_ba_item img { display: block; width: 100%; height: auto; }
.jc_ba_label { position: absolute; left: 0; top: 0; padding: 4px 12px; background: var(--jc-yellow); color: #222; font-size: 13px; font-weight: 700; }
.jc_files { margin-top: 40px; padding: 18px 22px; background: #fafafa; border: 1px solid var(--jc-line); }
.jc_files_title { margin: 0 0 8px; font-weight: 700; }
.jc_files ul { margin: 0; padding: 0; list-style: none; }
.jc_files a { text-decoration: none; font-size: 14px; }
.jc_files a:hover { color: var(--jc-accent); }

.jc_faq_list { margin-top: 18px; border-top: 2px solid #222; }
.jc_faq_item { border-bottom: 1px solid var(--jc-line); }
.jc_faq_item summary { display: flex; gap: 10px; align-items: flex-start; padding: 20px 44px 20px 4px; cursor: pointer; list-style: none; position: relative; font-size: 17px; font-weight: 700; color: #222; line-height: 1.5; }
.jc_faq_item summary::-webkit-details-marker { display: none; }
.jc_faq_item summary::after { content: ''; position: absolute; right: 12px; top: 26px; width: 9px; height: 9px; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(45deg); transition: transform .2s; }
.jc_faq_item[open] summary::after { transform: rotate(-135deg); top: 30px; }
.jc_faq_item summary:hover { color: #000; }
.jc_faq_q { flex: none; color: var(--jc-accent); font-family: var(--jc-head); }
.jc_faq_a { margin: 0; padding: 0 20px 22px 32px; font-size: 16px; line-height: 1.8; color: #555; }
.jc_faq_item[open] { background: #fffdf0; }

.jc_refs_list { margin: 16px 0 0; padding: 0; list-style: none; }
.jc_refs_list li { display: flex; gap: 8px; padding: 6px 0; font-size: 15px; line-height: 1.65; color: #444; }
.jc_refs_no { flex: none; color: var(--jc-mute); }
.jc_refs_list a { color: #333; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.jc_refs_list a:hover { color: var(--jc-accent); }
.jc_refs_note { color: var(--jc-sub); }

.jc_disclaimer { margin-top: 48px; padding: 18px 22px; background: var(--jc-bg); font-size: 14px; line-height: 1.75; color: #666; }

.jc_area { margin-top: 28px; }
.jc_area_chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid #ddd; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: #444; text-decoration: none; background: #fff; transition: all .15s; }
.jc_area_chip:hover { border-color: var(--jc-yellow); background: var(--jc-yellow); color: #222; }
.jc_area_pin { width: 8px; height: 8px; border-radius: 50%; background: var(--jc-accent); flex: none; }
.jc_tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.jc_tag { padding: 6px 12px; background: #f2f2f2; font-size: 13.5px; color: #555; }

.jc_treat_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jc_treat_link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 20px; border: 1px solid #ddd; background: #fff; text-decoration: none; font-size: 16px; font-weight: 700; color: #222; transition: all .15s; }
.jc_treat_link svg { flex: none; color: var(--jc-accent); }
.jc_treat_link:hover { background: var(--jc-yellow); border-color: var(--jc-yellow); }
.jc_treat_link:hover svg { color: #222; }

/* 이전/다음 · 버튼 */
.jc_pn { display: flex; margin-top: 80px; border-top: 1px solid #222; border-bottom: 1px solid var(--jc-line); }
.jc_pn_item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; text-decoration: none; color: inherit; transition: background .15s; }
.jc_pn_item + .jc_pn_item { border-left: 1px solid var(--jc-line); }
.jc_pn_next { text-align: right; }
a.jc_pn_item:hover { background: #fffbe0; }
.jc_pn_label { font-size: 13px; color: var(--jc-accent); font-weight: 700; }
.jc_pn_subj { font-size: 16px; font-weight: 500; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc_vbtns { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }

.jc_related { margin-top: 90px; }
.jc_related_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.jc_related .jc_card_title { font-size: 16.5px; }

/* =========================================================
   글쓰기
   ========================================================= */
.jc_wcontainer { max-width: 1344px; }
.jc_form { border-top: 2px solid #222; }
.jc_row { padding: 20px 0; border-bottom: 1px solid #eee; }
.jc_row > label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: #222; }
.jc_row_inline > label { margin: 0; font-weight: 500; }
.jc_req { margin-left: 4px; color: var(--jc-accent); font-size: 12px; }
.jc_opt { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--jc-mute); }
.jc_input { display: block; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #cfcfcf; background: #fff; font-size: 15px; font-family: inherit; color: #333; border-radius: 0; }
textarea.jc_input { resize: vertical; line-height: 1.6; }
.jc_input:focus { outline: none; border-color: var(--jc-accent); }
.jc_count { margin: 6px 0 0; text-align: right; font-size: 12.5px; color: var(--jc-mute); }
.jc_fhead { margin-top: 30px; padding: 18px 20px; background: #fffbe0; border-left: 5px solid var(--jc-yellow); }
.jc_fhead_title { margin: 0; font-weight: 700; font-size: 16px; color: #222; }
.jc_fhead_desc { margin: 4px 0 0; font-size: 13.5px; color: #666; }
.jc_repeat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.jc_rrow { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: #fafafa; border: 1px solid #eee; }
.jc_rrow .jc_input { flex: 1 1 260px; }
.jc_rrow .rf-a, .jc_rrow .rf-note { flex-basis: 100%; }
.jc_rdel { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid #ccc; background: #fff; color: #888; cursor: pointer; font-size: 13px; }
.jc_rdel:hover { border-color: #c33; color: #c33; }
.jc_file { display: block; margin-bottom: 8px; font-size: 14px; }
.jc_file_exist { display: block; margin-bottom: 8px; font-size: 13.5px; color: #666; }
.jc_alt { margin-top: 4px; }
.jc_row_content .wr_content textarea { width: 100%; }
.jc_wbtns { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }
.jc_wbtns .jc_btn { min-width: 140px; }

/* =========================================================
   반응형
   ========================================================= */
@media (max-width: 1460px) {
    .jc_visual::before { right: 4%; }
}
@media (max-width: 1280px) {
    .jc_layout { gap: 40px; }
    .jc_side { flex-basis: 220px; }
    .jc_vlayout { gap: 48px; }
    .jc_toc_side { flex-basis: 220px; }
    .jc_visual { min-height: 260px; padding: 56px 0 52px; }
    .jc_visual_s { min-height: 190px; padding: 40px 0 38px; }
    .jc_visual_title { font-size: 50px; }
    .jc_visual_s .jc_visual_title { font-size: 38px; }
}
@media (max-width: 1100px) {
    .jc_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jc_related_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .jc_layout { flex-direction: column; gap: 28px; }
    .jc_side { flex: none; width: 100%; }
    .jc_side_sticky { position: static; }
    .jc_side_title { display: none; }
    .jc_cat { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .jc_cat li { flex: none; }
    .jc_cat_item { padding: 9px 14px; border: 1px solid #ddd; white-space: nowrap; }
    .jc_cat_item.active { border-color: var(--jc-yellow); }
    .jc_visual_desc { font-size: 17px; }
}
@media (max-width: 768px) {
    .jc_wrap { font-size: 15px; }
    .jc_visual { min-height: 0; padding: 40px 0 36px; }
    .jc_visual_s { min-height: 0; padding: 30px 0 28px; }
    .jc_visual::before { right: -90px; width: 260px; height: 260px; margin-top: -130px; border-width: 28px; }
    .jc_visual_s::before { right: -70px; width: 200px; height: 200px; margin-top: -100px; border-width: 22px; }
    .jc_visual_inner { padding: 0 16px; }
    .jc_visual_label, .jc_visual_s .jc_visual_label { font-size: 14px; margin-bottom: 10px; }
    .jc_visual_title { font-size: 34px; }
    .jc_visual_s .jc_visual_title { font-size: 28px; }
    .jc_visual_desc, .jc_visual_s .jc_visual_desc { margin-top: 14px; font-size: 15px; }
    .jc_container { padding: 0 16px 80px; }
    .jc_subtit { padding: 34px 0 22px; font-size: 22px; }
    .jc_subtit em { font-size: 18px; }
    .jc_head_title { font-size: 24px; }
    .jc_head_intro { font-size: 15px; }
    .jc_search { flex: 1 1 100%; }
    .jc_head_tools .jc_btn { flex: 1 1 100%; }
    .jc_grid { gap: 26px 16px; }
    .jc_card_title { font-size: 18px; }
    .jc_qa { margin-top: 64px; padding: 30px 20px; }
    .jc_qa_head { font-size: 19px; }

    .jc_crumb { padding-top: 26px; font-size: 13px; }
    .jc_vlayout { padding-top: 22px; }
    .jc_view_title { font-size: 27px; }
    .jc_summary { padding: 18px 18px; }
    .jc_summary_text { font-size: 15.5px; }
    .jc_content_body { margin-top: 32px; font-size: 16px; line-height: 1.85; }
    .jc_content_body h2 { margin-top: 48px; padding-top: 24px; font-size: 22px; }
    .jc_content_body h3 { font-size: 18.5px; margin-top: 32px; }
    .jc_content_body .col_gallery .gal_caption { padding: 11px 16px; font-size: 13px; }
    .jc_content_body .col_gallery .swiper-button-prev, .jc_content_body .col_gallery .swiper-button-next { width: 36px; height: 36px; margin-top: -18px; }
    .jc_sec_title { font-size: 20px; }
    .jc_faq_item summary { font-size: 15.5px; padding: 16px 36px 16px 2px; }
    .jc_faq_item summary::after { top: 22px; right: 8px; }
    .jc_faq_item[open] summary::after { top: 26px; }
    .jc_faq_a { padding: 0 12px 18px 26px; font-size: 15px; }
    .jc_ba_wrap { flex-direction: column; }
    .jc_treat_list { grid-template-columns: minmax(0, 1fr); }
    .jc_area_chip { border-radius: 18px; }
    .jc_pn { flex-direction: column; margin-top: 56px; }
    .jc_pn_item + .jc_pn_item { border-left: 0; border-top: 1px solid var(--jc-line); }
    .jc_pn_next { text-align: left; }
    .jc_pn_empty { display: none; }
    .jc_related { margin-top: 64px; }
    .jc_related_grid { gap: 18px 12px; }
    .jc_related .jc_card_title { font-size: 15px; }
}
@media (max-width: 560px) {
    .jc_grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 420px) {
    .jc_related_grid { grid-template-columns: minmax(0, 1fr); }
}