/* INSIGHT 칼럼 게시판 전용 (목록·글보기·글쓰기) - sub_page.css 위에 추가 */

/* 관리자 버튼 */
.in-admin { display: flex; justify-content: flex-end; gap: 10rem; margin-bottom: 30rem; }
.in-admin a { display: inline-flex; align-items: center; gap: 6rem; padding: 12rem 24rem; border-radius: 100px; border: 1px solid #ccc; background-color: #fff; font-size: 15rem; font-weight: 600; }
.in-admin a.on { background-color: #111; border-color: #111; color: #fff; }

/* 분류 */
.in-cate ul { display: flex; flex-wrap: wrap; gap: 10rem; margin-bottom: 40rem; }
.in-cate li a { display: inline-block; padding: 12rem 24rem; border-radius: 100px; background-color: #fff; border: 1px solid #e3e3e3; font-size: 16rem; font-weight: 600; }
.in-cate li a#bo_cate_on { background-color: var(--main-color); border-color: var(--main-color); color: #fff; }

/* 목록 카드 */
.in-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem; }
.in-card a { display: flex; flex-direction: column; height: 100%; border-radius: 22rem; overflow: hidden; background-color: #fff; border: 1px solid #e7e7e4; transition: transform .35s, box-shadow .35s; }
.in-card a:hover { transform: translateY(-8rem); box-shadow: 0 30rem 60rem rgba(0, 0, 0, .1); }
.in-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 80% 80%, rgba(223, 101, 53, .5), rgba(223, 101, 53, 0) 60%), #111; }
.in-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.in-card a:hover .in-thumb img { transform: scale(1.06); }
/* 대표 이미지가 없을 때: 제목으로 자동 표지 */
.in-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12rem; padding: 30rem; }
.in-cover span { color: var(--main-color); font-family: 'Montserrat'; font-size: 14rem; font-weight: 700; letter-spacing: 2rem; }
.in-cover strong { color: #fff; font-size: 24rem; font-weight: 800; line-height: 1.4; letter-spacing: -0.8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 768px) { .in-cover span { font-size: 20rem; } .in-cover strong { font-size: 36rem; } }
.in-noimg { position: absolute; left: 26rem; bottom: 18rem; font-family: 'Montserrat'; font-size: 44rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .35); }
.in-thumb .tag { position: absolute; left: 16rem; top: 16rem; padding: 8rem 16rem; border-radius: 100px; background-color: var(--main-color); color: #fff; font-size: 14rem; font-weight: 600; }
.in-body { flex: 1; display: flex; flex-direction: column; padding: 30rem 30rem 32rem; }
.in-body h2 { font-size: 22rem !important; font-weight: 700; line-height: 1.45; letter-spacing: -0.8rem !important; margin-bottom: 12rem; }
.in-body p { flex: 1; color: #777; font-size: 16rem !important; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.in-body time { margin-top: 20rem; color: #aaa; font-family: 'Montserrat'; font-size: 14rem; }

.in-empty { padding: 100rem 20rem; text-align: center; border-radius: 24rem; background-color: #fff; border: 1px dashed #d6d6d6; }
.in-empty > i { color: var(--main-color); font-size: 56rem; }
.in-empty p { margin-top: 16rem; color: #666; font-size: 19rem; }

/* 페이지 번호 (그누보드 기본 마크업) */
.in-pages { margin-top: 60rem; text-align: center; }
.in-pages .pg_wrap { float: none; display: inline-block; }
.in-pages .pg { display: flex; justify-content: center; gap: 8rem; }
.in-pages .pg_page, .in-pages .pg_current { display: inline-flex; justify-content: center; align-items: center; min-width: 44rem; height: 44rem; padding: 0 12rem; border-radius: 12rem; background-color: #fff; border: 1px solid #e3e3e3; color: #555; font-size: 15rem; }
.in-pages .pg_current { background-color: #111; border-color: #111; color: #fff; }

/* 글 보기 */
.in-v-hero { min-height: 520rem; }
.in-v-hero h1 { font-size: 54rem; }
.in-v-meta { display: flex; gap: 16rem; margin-top: 30rem; color: #999; font-size: 16rem; }
.in-v-meta span::before { content: '·'; margin-right: 16rem; }
.in-v-wrap { max-width: 880rem; }
.in-v-body #bo_v_img { margin-bottom: 30rem; }
.in-v-body #bo_v_img img { display: block; max-width: 100%; height: auto; margin: 0 auto 20rem; border-radius: 16rem; }
#bo_v_con { color: #333; font-size: 19rem; line-height: 1.9; word-break: keep-all; }
#bo_v_con p { margin-bottom: 20rem; }
#bo_v_con p:has(> img) { margin: 40rem 0; }
#bo_v_con p:has(> img) img { display: block; }
.in-author + .in-admin, article + .in-admin { margin-top: 18rem; }
#bo_v_con h2 { margin: 60rem 0 20rem; padding-left: 18rem; border-left: 5rem solid var(--main-color); font-size: 32rem; font-weight: 800; line-height: 1.4; }
#bo_v_con h3 { margin: 40rem 0 14rem; font-size: 25rem; font-weight: 700; }
#bo_v_con ul, #bo_v_con ol { margin: 0 0 20rem 24rem; }
#bo_v_con ul li { list-style: disc; }
#bo_v_con ol li { list-style: decimal; }
#bo_v_con strong, #bo_v_con b { color: #111; }
#bo_v_con a { color: var(--main-color); text-decoration: underline; }
#bo_v_con img { max-width: 100%; height: auto; border-radius: 12rem; }
#bo_v_con blockquote { margin: 30rem 0; padding: 26rem 30rem; border-radius: 16rem; background-color: #f5f5f3; border-left: 5rem solid var(--main-color); }
#bo_v_con table { width: 100%; margin: 20rem 0; border-collapse: collapse; }
#bo_v_con th, #bo_v_con td { padding: 14rem; border: 1px solid #e3e3e3; font-size: 17rem; }
#bo_v_con th { background-color: #f5f5f3; }

.in-v-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16rem; margin-top: 70rem; }
.in-v-nav a { display: block; padding: 24rem 28rem; border-radius: 16rem; background-color: #f5f5f3; font-size: 17rem; font-weight: 600; line-height: 1.5; transition: background-color .3s; }
.in-v-nav a span { display: block; color: var(--main-color); font-size: 14rem; margin-bottom: 6rem; }
.in-v-nav a.next { text-align: right; grid-column: 2; }
.in-v-nav a:hover { background-color: #ececea; }
.in-v-list { margin-top: 30rem; text-align: center; }
.in-v-list a { display: inline-flex; align-items: center; gap: 8rem; padding: 16rem 34rem; border-radius: 100px; border: 1px solid #ccc; font-size: 16rem; font-weight: 600; }

/* 글쓰기 화면 (관리자) */
.in-write .header { background-color: #111; position: fixed; }
.in-write #bo_w { max-width: 1000px; margin: 140px auto 80px; padding: 0 20px; }

@media (max-width: 1024px) {
    .in-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .in-list { grid-template-columns: 1fr; gap: 24rem; }
    .in-body h2 { font-size: 32rem !important; }
    .in-body p { font-size: 24rem !important; }
    .in-body time { font-size: 21rem; }
    .in-thumb .tag { font-size: 20rem; }
    .in-admin a, .in-cate li a { font-size: 22rem; }
    .in-empty p { font-size: 26rem; }
    .in-pages .pg_page, .in-pages .pg_current { min-width: 60rem; height: 60rem; font-size: 22rem; }
    .in-v-hero h1 { font-size: 50rem; }
    .in-v-meta { font-size: 22rem; }
    #bo_v_con { font-size: 28rem; }
    #bo_v_con h2 { font-size: 40rem; }
    #bo_v_con h3 { font-size: 33rem; }
    #bo_v_con th, #bo_v_con td { font-size: 24rem; }
    .in-v-nav { grid-template-columns: 1fr; }
    .in-v-nav a.next { grid-column: auto; }
    .in-v-nav a { font-size: 25rem; }
    .in-v-nav a span { font-size: 20rem; }
    .in-v-list a { font-size: 24rem; }
}


/* ===== 글쓰기 화면 안내 ===== */
.in-w-guide { margin: 20px 0 10px; padding: 16px 20px; border-radius: 10px; background: #fff6f1; border: 1px solid #f3c9b4; color: #6b4a3a; font-size: 14px; line-height: 1.7; }
.in-w-guide strong { display: block; color: #df6535; font-size: 15px; margin-bottom: 4px; }
.in-w-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #555; }
.in-w-thumb { padding: 14px; border-radius: 10px; border: 2px dashed #df6535; background: #fffaf7; }

/* ===== 본문 꾸미기 서식 (에디터 HTML 모드에서 class 로 사용) ===== */
#bo_v_con .in-lead { font-size: 23rem; line-height: 1.75; color: #222; font-weight: 500; }
#bo_v_con .in-summary { margin: 0 0 50rem; padding: 34rem 38rem; border-radius: 20rem; background: #111; color: #ddd; }
#bo_v_con .in-summary b { display: block; margin-bottom: 14rem; color: var(--main-color); font-family: 'Montserrat'; font-size: 15rem; letter-spacing: 2rem; }
#bo_v_con .in-summary ul { margin: 0; padding: 0; }
#bo_v_con .in-summary li { list-style: none; position: relative; padding-left: 26rem; margin-bottom: 8rem; color: #eee; }
#bo_v_con .in-summary li::before { content: '✓'; position: absolute; left: 0; color: var(--main-color); font-weight: 800; }
#bo_v_con .in-point { margin: 30rem 0; padding: 28rem 32rem 28rem 76rem; border-radius: 18rem; background: #fff4ee; position: relative; }
#bo_v_con .in-point::before { content: '!'; position: absolute; left: 26rem; top: 28rem; display: flex; justify-content: center; align-items: center; width: 34rem; height: 34rem; border-radius: 50%; background: var(--main-color); color: #fff; font-weight: 800; font-size: 18rem; }
#bo_v_con .in-point p:last-child { margin-bottom: 0; }
#bo_v_con .in-talk { margin: 30rem 0; display: flex; flex-direction: column; gap: 12rem; }
#bo_v_con .in-talk p { max-width: 80%; margin: 0; padding: 18rem 24rem; border-radius: 18rem; font-size: 18rem; line-height: 1.6; }
#bo_v_con .in-talk .c { align-self: flex-start; background: #f1f1ef; border-bottom-left-radius: 4rem; }
#bo_v_con .in-talk .w { align-self: flex-end; background: var(--main-color); color: #fff; border-bottom-right-radius: 4rem; }
#bo_v_con .in-talk .w strong { color: #fff; }
#bo_v_con ol.in-steps { margin: 30rem 0; counter-reset: s; }
#bo_v_con ol.in-steps > li { list-style: none; counter-increment: s; position: relative; margin-bottom: 18rem; padding: 26rem 28rem 26rem 92rem; border-radius: 18rem; background: #fff; border: 1px solid #ececec; box-shadow: 0 10rem 30rem rgba(0, 0, 0, .04); }
#bo_v_con ol.in-steps > li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 26rem; top: 24rem; color: var(--main-color); font-family: 'Montserrat'; font-size: 30rem; font-weight: 800; }
#bo_v_con ol.in-steps > li b { display: block; font-size: 21rem; color: #111; margin-bottom: 6rem; }
#bo_v_con ul.in-check { margin: 24rem 0; }
#bo_v_con ul.in-check li { list-style: none; position: relative; padding-left: 36rem; margin-bottom: 12rem; }
#bo_v_con ul.in-check li::before { content: ''; position: absolute; left: 0; top: 7rem; width: 22rem; height: 22rem; border-radius: 6rem; background: var(--main-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 15.17l9.19-9.19 1.42 1.42L10 18 3.39 11.39l1.42-1.42z'/%3E%3C/svg%3E") center / 16rem no-repeat; }
#bo_v_con .in-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14rem; margin: 30rem 0; }
#bo_v_con .in-num div { padding: 26rem 20rem; border-radius: 18rem; background: #111; color: #aaa; text-align: center; font-size: 15rem; line-height: 1.5; }
#bo_v_con .in-num strong { display: block; color: #fff; font-family: 'Montserrat'; font-size: 34rem; margin-bottom: 6rem; }
#bo_v_con .in-num strong em { color: var(--main-color); font-style: normal; }
#bo_v_con .in-cta-box { margin: 60rem 0 36rem; padding: 46rem 40rem; border-radius: 24rem; background: radial-gradient(circle at 85% 20%, rgba(223, 101, 53, .5), rgba(223, 101, 53, 0) 55%), #0a0a0a; color: #fff; text-align: center; }
#bo_v_con .in-cta-box p { margin-bottom: 8rem; color: #ccc; }
#bo_v_con .in-cta-box strong { display: block; color: #fff; font-size: 28rem; line-height: 1.4; margin-bottom: 10rem; }
#bo_v_con .in-cta-box a { display: inline-block; margin-top: 18rem; padding: 18rem 42rem; border-radius: 100px; background: linear-gradient(135deg, #ef7a45, #d2541f); color: #fff; text-decoration: none; font-weight: 700; }
#bo_v_con table thead th { background: #111; color: #fff; border-color: #111; }
#bo_v_con table td:first-child { font-weight: 700; color: #111; }
#bo_v_con table tr.hl td { background: #fff4ee; }

@media (max-width: 768px) {
    #bo_v_con .in-lead { font-size: 31rem; }
    #bo_v_con .in-summary b { font-size: 21rem; }
    #bo_v_con .in-point { padding: 32rem 30rem 32rem 84rem; }
    #bo_v_con .in-point::before { width: 44rem; height: 44rem; font-size: 24rem; }
    #bo_v_con .in-talk p { max-width: 90%; font-size: 26rem; }
    #bo_v_con ol.in-steps > li { padding: 30rem 28rem 30rem 100rem; }
    #bo_v_con ol.in-steps > li b { font-size: 30rem; }
    #bo_v_con ul.in-check li { padding-left: 46rem; }
    #bo_v_con ul.in-check li::before { width: 30rem; height: 30rem; background-size: 22rem; }
    #bo_v_con .in-num { grid-template-columns: 1fr; }
    #bo_v_con .in-num div { font-size: 23rem; }
    #bo_v_con .in-num strong { font-size: 46rem; }
    #bo_v_con .in-cta-box strong { font-size: 36rem; }
}


/* ===================== 2026-11 블로그형 리뉴얼 ===================== */
/* 목록 상단 */
.in-l-hero { min-height: 0; padding: 200rem 0 90rem; }
.in-tabs { position: relative; z-index: 2; background: #fff; border-bottom: 1px solid #e7e7e4; }
.in-tabs ul { display: flex; gap: 6rem; overflow-x: auto; scrollbar-width: none; }
.in-tabs ul::-webkit-scrollbar { display: none; }
.in-tabs li { flex-shrink: 0; }
.in-tabs a { display: inline-flex; align-items: center; gap: 6rem; padding: 24rem 16rem 22rem; border-bottom: 3rem solid transparent; color: #666; font-size: 17rem; font-weight: 600; white-space: nowrap; transition: color .2s, border-color .2s; }
.in-tabs a em { color: #aaa; font-style: normal; font-family: 'Montserrat'; font-size: 15rem; }
.in-tabs a:hover { color: #111; }
.in-tabs a.on { color: #111; border-bottom-color: var(--main-color); }
.in-tabs a.on em { color: var(--main-color); }
.in-l-sec { padding-top: 80rem; }
.in-l-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20rem; margin-bottom: 40rem; }
.in-l-head h2 { font-size: 32rem !important; font-weight: 800; letter-spacing: -1rem !important; }
.in-l-head h2 em { color: var(--main-color); font-style: normal; font-family: 'Montserrat'; }
.in-l-head p { margin-top: 8rem; color: #888; font-size: 16rem !important; }
.in-l-head .in-admin { margin: 0; }

/* 카드 목록: 대표 글 1개 크게 + 2열 */
.in-list2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50rem 36rem; }
.in-c > a, a.in-c { display: flex; flex-direction: column; height: 100%; color: inherit; }
.in-c-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 22rem; overflow: hidden; background: radial-gradient(circle at 80% 80%, rgba(223, 101, 53, .5), rgba(223, 101, 53, 0) 60%), #111; box-shadow: 0 16rem 40rem rgba(0, 0, 0, .08); }
.in-c-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.in-c:hover .in-c-thumb img { transform: scale(1.05); }
.in-c-body { padding: 24rem 4rem 0; }
.in-c-cat { display: inline-block; margin-bottom: 10rem; color: var(--main-color); font-size: 15rem; font-weight: 700; }
.in-c-body h3 { font-size: 24rem !important; font-weight: 800; line-height: 1.4; letter-spacing: -0.8rem !important; margin-bottom: 10rem; transition: color .2s; }
.in-c:hover h3 { color: var(--main-color); }
.in-c-body p { color: #777; font-size: 16rem !important; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.in-c-meta { display: block; margin-top: 14rem; color: #aaa; font-size: 14rem; }
.in-c.feat { grid-column: 1 / -1; }
.in-c.feat > a { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50rem; align-items: center; }
.in-c.feat .in-c-thumb { aspect-ratio: 16 / 9.5; }
.in-c.feat .in-c-body { padding: 0; }
.in-c.feat h3 { font-size: 36rem !important; letter-spacing: -1.4rem !important; }
.in-c.feat p { -webkit-line-clamp: 3; font-size: 18rem !important; }

/* 글 보기 */
.in-toc { margin: 10rem 0 50rem; padding: 30rem 34rem; border-radius: 20rem; background: #f5f5f3; border: 1px solid #ececea; }
.in-toc b { display: block; margin-bottom: 14rem; font-size: 17rem; font-weight: 800; color: #111; }
.in-toc ol { counter-reset: toc; margin: 0; padding: 0; }
.in-toc li { counter-increment: toc; list-style: none; margin: 0 0 8rem; }
.in-toc li a { display: flex; gap: 12rem; color: #555; font-size: 17rem; line-height: 1.5; }
.in-toc li a::before { content: counter(toc, decimal-leading-zero); color: var(--main-color); font-family: 'Montserrat'; font-weight: 700; }
.in-toc li a:hover { color: var(--main-color); }
#bo_v_con h2 { scroll-margin-top: 110rem; }
.in-mid-cta { display: flex; justify-content: space-between; align-items: center; gap: 20rem; margin: 50rem 0; padding: 30rem 34rem; border-radius: 20rem; background: radial-gradient(circle at 90% 20%, rgba(223, 101, 53, .45), rgba(223, 101, 53, 0) 55%), #0c0c0c; color: #fff; }
.in-mid-cta b { display: block; font-size: 21rem; margin-bottom: 6rem; }
.in-mid-cta span { color: #bbb; font-size: 16rem; }
.in-mid-cta a { flex-shrink: 0; padding: 16rem 30rem; border-radius: 100px; background: linear-gradient(135deg, #ef7a45, #d2541f); color: #fff !important; font-size: 16rem; font-weight: 700; text-decoration: none !important; }
#bo_v_con .in-note { margin: 26rem 0; padding: 24rem 28rem 24rem 64rem; border-radius: 16rem; position: relative; font-size: 18rem; line-height: 1.75; }
#bo_v_con .in-note::before { position: absolute; left: 24rem; top: 22rem; font-size: 22rem; }
#bo_v_con .in-note.tip { background: #eef7f1; }
#bo_v_con .in-note.tip::before { content: '💡'; }
#bo_v_con .in-note.warn { background: #fff4ee; }
#bo_v_con .in-note.warn::before { content: '⚠️'; }
#bo_v_con .in-note p:last-child { margin-bottom: 0; }
#bo_v_con .in-faq dl { margin: 20rem 0; }
#bo_v_con .in-faq dt { margin-top: 14rem; padding: 22rem 26rem 10rem 64rem; border-radius: 16rem 16rem 0 0; background: #fff; border: 1px solid #e7e7e4; border-bottom: 0; font-size: 19rem; font-weight: 800; color: #111; position: relative; }
#bo_v_con .in-faq dt::before { content: 'Q'; position: absolute; left: 24rem; top: 20rem; color: var(--main-color); font-family: 'Montserrat'; font-weight: 800; }
#bo_v_con .in-faq dd { margin: 0; padding: 4rem 26rem 22rem 64rem; border-radius: 0 0 16rem 16rem; background: #fff; border: 1px solid #e7e7e4; border-top: 0; color: #555; font-size: 17rem; line-height: 1.75; }
.in-rel-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem; }
.in-rel-list .in-c-body h3 { font-size: 20rem !important; }
.in-svc { padding: 100rem 0; }

@media (max-width: 1024px) {
    .in-c.feat > a { grid-template-columns: 1fr; gap: 26rem; }
    .in-rel-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .in-l-hero { padding: 180rem 0 80rem; }
    .in-tabs a { font-size: 25rem; padding: 30rem 18rem 26rem; }
    .in-tabs a em { font-size: 22rem; }
    .in-l-head h2 { font-size: 42rem !important; }
    .in-l-head p { font-size: 24rem !important; }
    .in-list2 { grid-template-columns: 1fr; gap: 60rem; }
    .in-c-cat { font-size: 22rem; }
    .in-c-body h3, .in-c.feat h3 { font-size: 34rem !important; }
    .in-c-body p, .in-c.feat p { font-size: 25rem !important; }
    .in-c-meta { font-size: 21rem; }
    .in-toc { padding: 34rem 32rem; }
    .in-toc b { font-size: 26rem; }
    .in-toc li a { font-size: 25rem; }
    .in-mid-cta { flex-direction: column; align-items: flex-start; padding: 36rem 32rem; }
    .in-mid-cta b { font-size: 30rem; }
    .in-mid-cta span { font-size: 23rem; }
    .in-mid-cta a { font-size: 25rem; padding: 22rem 40rem; }
    #bo_v_con .in-note { font-size: 26rem; padding: 30rem 28rem 30rem 76rem; }
    #bo_v_con .in-note::before { font-size: 30rem; }
    #bo_v_con .in-faq dt { font-size: 28rem; padding: 26rem 26rem 12rem 76rem; }
    #bo_v_con .in-faq dd { font-size: 25rem; padding: 6rem 26rem 26rem 76rem; }
    .in-rel-list { grid-template-columns: 1fr; gap: 50rem; }
    .in-rel-list .in-c-body h3 { font-size: 30rem !important; }
}

/* 칼럼 대표 이미지 (본문 class="in-hero-img") */
.in-hero-fig { margin: 0 0 40rem; }
.in-hero-fig img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 22rem; box-shadow: 0 20rem 50rem rgba(0, 0, 0, .12); }
#bo_v_con ol.in-steps[start="2"] { counter-reset: s 1; }
#bo_v_con ol.in-steps[start="3"] { counter-reset: s 2; }
#bo_v_con ol.in-steps[start="4"] { counter-reset: s 3; }
#bo_v_con ol.in-steps[start="5"] { counter-reset: s 4; }
#bo_v_con ol.in-steps[start="6"] { counter-reset: s 5; }
#bo_v_con ol.in-steps[start="7"] { counter-reset: s 6; }
#bo_v_con ol.in-steps[start="8"] { counter-reset: s 7; }

/* 자가 진단 박스 (본문 class="in-self") - 해당 항목이 많으면 상담으로 유도 */
#bo_v_con .in-self { margin: 40rem 0; padding: 36rem 38rem; border-radius: 22rem; background: #fff; border: 2px solid var(--main-color); box-shadow: 0 20rem 50rem rgba(223, 101, 53, .12); }
#bo_v_con .in-self > b { display: block; margin-bottom: 6rem; color: #111; font-size: 22rem; font-weight: 800; }
#bo_v_con .in-self > p { margin-bottom: 18rem; color: #777; font-size: 16rem; }
#bo_v_con .in-self ul { margin: 0 0 22rem; }
#bo_v_con .in-self li { list-style: none; position: relative; padding: 12rem 0 12rem 40rem; border-bottom: 1px dashed #eee; font-size: 18rem; }
#bo_v_con .in-self li::before { content: ''; position: absolute; left: 0; top: 13rem; width: 24rem; height: 24rem; border-radius: 6rem; border: 2px solid #ccc; }
#bo_v_con .in-self .in-self-go { display: flex; justify-content: space-between; align-items: center; gap: 16rem; flex-wrap: wrap; padding: 20rem 24rem; border-radius: 14rem; background: #fff4ee; font-size: 17rem; color: #333; margin-bottom: 0; }
#bo_v_con .in-self .in-self-go a { flex-shrink: 0; padding: 14rem 28rem; border-radius: 100px; background: linear-gradient(135deg, #ef7a45, #d2541f); color: #fff; font-weight: 700; text-decoration: none; }
@media (max-width: 768px) {
    #bo_v_con .in-self > b { font-size: 31rem; }
    #bo_v_con .in-self > p { font-size: 23rem; }
    #bo_v_con .in-self li { font-size: 26rem; padding-left: 50rem; }
    #bo_v_con .in-self li::before { width: 32rem; height: 32rem; }
    #bo_v_con .in-self .in-self-go { font-size: 24rem; }
    #bo_v_con .in-self .in-self-go a { font-size: 25rem; padding: 20rem 34rem; }
}


/* ===================== 2026-11 위드어스 매거진형 리뉴얼 ===================== */
/* 목록 히어로 + 커버 기사 */
.ig-hero { position: relative; padding: 190rem 0 90rem; color: #fff; overflow: hidden;
    background: radial-gradient(circle at 90% 0%, rgba(223, 101, 53, .35), rgba(223, 101, 53, 0) 45%), #060606; }
.ig-hero .sp-crumb { margin-bottom: 30rem; }
.ig-hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40rem; margin-bottom: 50rem; }
.ig-hero h1 { font-size: 64rem; font-weight: 800; letter-spacing: -2.5rem; line-height: 1.2; }
.ig-hero-desc { color: #9a9a9a; font-size: 18rem; line-height: 1.7; text-align: right; }

/* 사진 위에 제목을 얹는 카드 */
.ig-card { position: relative; display: block; aspect-ratio: 5 / 4; border-radius: 24rem; overflow: hidden; background: #1a1a1a; color: #fff !important; text-decoration: none !important; isolation: isolate; }
.ig-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; z-index: -2; }
.ig-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .92) 100%); transition: background .4s; }
.ig-cat { position: absolute; left: 22rem; top: 22rem; padding: 8rem 16rem; border-radius: 100px; background: var(--main-color); color: #fff; font-size: 13rem; font-weight: 700; }
.ig-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 30rem 28rem 28rem; display: flex; flex-direction: column; }
.ig-body strong { display: block; color: #fff; font-size: 23rem; font-weight: 800; line-height: 1.38; letter-spacing: -0.8rem; }
.ig-ex { display: block; max-height: 0; opacity: 0; overflow: hidden; color: #d6d6d6; font-size: 15rem; line-height: 1.6; transition: max-height .45s, opacity .35s, margin .35s; }
.ig-meta { display: block; margin-top: 12rem; color: #aaa; font-size: 13rem; }
.ig-card:hover img { transform: scale(1.06); }
.ig-card:hover .ig-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .15) 10%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, .95) 100%); }
.ig-card:hover .ig-ex { max-height: 120rem; opacity: 1; margin-top: 10rem; }
.ig-card.cover { aspect-ratio: 21 / 9; border-radius: 30rem; }
.ig-card.cover .ig-body { padding: 50rem 54rem; max-width: 820rem; }
.ig-card.cover strong { font-size: 44rem; letter-spacing: -1.6rem; }
.ig-card.cover .ig-ex { max-height: none; opacity: 1; margin-top: 14rem; font-size: 18rem; }
.ig-card.cover .ig-cat { left: 40rem; top: 36rem; }
.ig-kicker { display: block; margin-bottom: 14rem; color: var(--main-color); font-family: 'Montserrat'; font-size: 15rem; font-style: normal; font-weight: 700; letter-spacing: 2rem; text-transform: uppercase; }

/* 주제 칩 */
.ig-chips { background: #fff; border-bottom: 1px solid #ececea; }
.ig-chips .sp-inner { display: flex; gap: 10rem; padding-top: 26rem; padding-bottom: 26rem; overflow-x: auto; scrollbar-width: none; }
.ig-chips .sp-inner::-webkit-scrollbar { display: none; }
.ig-chips a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8rem; padding: 12rem 18rem; border-radius: 14rem; background: #f5f5f3; border: 1px solid #ececea; color: #444; font-size: 16rem; font-weight: 600; white-space: nowrap; transition: all .2s; }
.ig-chips a i { color: var(--main-color); font-size: 18rem; }
.ig-chips a b { min-width: 24rem; padding: 2rem 7rem; border-radius: 100px; background: #fff; color: var(--main-color); font-family: 'Montserrat'; font-size: 13rem; text-align: center; }
.ig-chips a:hover { border-color: var(--main-color); }
.ig-chips a.on { background: #111; border-color: #111; color: #fff; }
.ig-chips a.on b { background: var(--main-color); color: #fff; }

/* 주제별 묶음 줄 / 3열 */
.ig-sec { padding-top: 70rem; }
.ig-row { margin-bottom: 70rem; }
.ig-row:last-child { margin-bottom: 0; }
.ig-row-head { display: flex; justify-content: space-between; align-items: center; gap: 20rem; margin-bottom: 24rem; padding-bottom: 16rem; border-bottom: 2px solid #111; }
.ig-row-head h2 { display: flex; align-items: center; gap: 10rem; font-size: 26rem !important; font-weight: 800; letter-spacing: -0.8rem !important; }
.ig-row-head h2 i { color: var(--main-color); }
.ig-row-head a { color: #777; font-size: 15rem; font-weight: 600; }
.ig-row-head a:hover { color: var(--main-color); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26rem; }
/* 글 하단 '이어서 보면 좋은 인사이트': 작게, 3열 유지 */
.in-rel .ig-grid { gap: 20rem; }
.in-rel .ig-card { aspect-ratio: 16 / 11; border-radius: 20rem; }
.in-rel .ig-body { padding: 24rem 22rem 22rem; }
.in-rel .ig-body strong { font-size: 19rem; }
.in-rel .ig-cat { left: 18rem; top: 18rem; font-size: 12rem; padding: 6rem 13rem; }
.ig-count { margin-bottom: 30rem; color: #777; font-size: 17rem; }
.ig-count b { color: #111; font-size: 26rem; margin-right: 6rem; }

/* 글 화면: 본문 + 따라다니는 목차·문의 */
.in-progress { position: fixed; left: 0; top: 0; width: 100%; height: 4px; z-index: 9999; background: transparent; pointer-events: none; }
.in-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ef7a45, #d2541f); }
.in-v-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300rem; gap: 70rem; align-items: start; }
.in-v-grid .in-v-wrap { max-width: none; }
.in-side { position: sticky; top: 120rem; }
.in-side-box { padding: 30rem 28rem; border-radius: 22rem; background: #f5f5f3; border: 1px solid #ececea; }
.in-side-box > b { display: block; margin-bottom: 14rem; font-size: 15rem; color: #888; }
.in-side-box ol { counter-reset: st; margin: 0 0 24rem; padding: 0; }
.in-side-box li { counter-increment: st; list-style: none; margin-bottom: 10rem; }
.in-side-box li a { display: flex; gap: 10rem; color: #333; font-size: 15rem; line-height: 1.5; }
.in-side-box li a::before { content: counter(st); color: var(--main-color); font-family: 'Montserrat'; font-weight: 800; }
.in-side-box li a:hover { color: var(--main-color); }
.in-side-cta { padding: 22rem; border-radius: 16rem; background: #0c0c0c; color: #fff; }
.in-side-cta p { color: #bbb; font-size: 14rem !important; margin-bottom: 12rem; line-height: 1.5; }
.in-side-cta a { display: flex; justify-content: center; align-items: center; gap: 6rem; padding: 14rem; border-radius: 12rem; background: linear-gradient(135deg, #ef7a45, #d2541f); color: #fff; font-size: 15rem; font-weight: 700; }
.in-toc-inline { display: none; }

/* 중간 배너 글자색 (본문 굵은 글씨 규칙에 덮이지 않게) */
#bo_v_con .in-mid-cta b { color: #fff; }

/* 자가 진단 박스: 정렬 + 누르면 체크 */
#bo_v_con .in-self ul { margin: 0 0 22rem; padding: 0; }
#bo_v_con .in-self li { cursor: pointer; user-select: none; transition: color .2s; }
#bo_v_con .in-self li:hover::before { border-color: var(--main-color); }
#bo_v_con .in-self li.on { color: #111; font-weight: 600; }
#bo_v_con .in-self li.on::before { border-color: var(--main-color); background: var(--main-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 15.17l9.19-9.19 1.42 1.42L10 18 3.39 11.39l1.42-1.42z'/%3E%3C/svg%3E") center / 16rem no-repeat; }
#bo_v_con .in-self.hit .in-self-go { background: #111; color: #fff; }
#bo_v_con .in-self.hit .in-self-go span::before { content: '2개 이상 해당돼요 · '; color: var(--main-color); font-weight: 700; }

@media (max-width: 1100px) {
    .in-v-grid { grid-template-columns: 1fr; }
    .in-side { display: none; }
    .in-toc-inline { display: block; }
}
@media (max-width: 1024px) {
    .ig-grid { grid-template-columns: repeat(2, 1fr); }
    .in-rel .ig-grid { grid-template-columns: repeat(3, 1fr); }
    .ig-card.cover { aspect-ratio: 16 / 10; }
}
@media (max-width: 768px) {
    .ig-hero { padding: 170rem 0 70rem; }
    .ig-hero-top { flex-direction: column; align-items: flex-start; gap: 16rem; margin-bottom: 36rem; }
    .ig-hero h1 { font-size: 58rem; }
    .ig-hero-desc { text-align: left; font-size: 25rem; }
    .ig-card.cover { aspect-ratio: 4 / 5; border-radius: 24rem; }
    .ig-card.cover .ig-body { padding: 40rem 34rem; }
    .ig-card.cover strong { font-size: 44rem; }
    .ig-card.cover .ig-ex { font-size: 24rem; }
    .ig-card.cover .ig-cat { left: 30rem; top: 30rem; }
    .ig-kicker { font-size: 20rem; }
    .ig-chips a { font-size: 24rem; padding: 16rem 22rem; }
    .ig-chips a i { font-size: 26rem; }
    .ig-chips a b { font-size: 20rem; }
    .ig-row-head h2 { font-size: 36rem !important; }
    .ig-row-head a { font-size: 22rem; }
    .ig-grid { grid-template-columns: 1fr; gap: 30rem; }
    .ig-card { aspect-ratio: 16 / 11; }
    .ig-cat { font-size: 20rem; }
    .ig-body strong { font-size: 34rem; }
    .ig-ex { max-height: none; opacity: 1; margin-top: 8rem; font-size: 22rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .ig-meta { font-size: 20rem; }
    .in-rel .ig-grid { grid-template-columns: 1fr; gap: 24rem; }
    .in-rel .ig-body { padding: 30rem 28rem 28rem; }
    .in-rel .ig-body strong { font-size: 32rem; }
    .in-rel .ig-cat { left: 24rem; top: 24rem; font-size: 19rem; padding: 8rem 16rem; }
    .ig-count { font-size: 24rem; }
    .ig-count b { font-size: 34rem; }
}

/* 따라다니는 목차가 동작하도록 (sp-sec 의 overflow:hidden 해제) */
.sp-sec.in-v-sec { overflow: visible; }

/* 작성팀 소개 박스 */
.in-author { display: grid; grid-template-columns: 76rem 1fr auto; gap: 24rem; align-items: center; margin-top: 60rem; padding: 30rem 32rem; border-radius: 22rem; background: #0c0c0c; color: #fff; }
.in-author-logo { width: 76rem; height: 76rem; border-radius: 20rem; background: #1c1c1c; display: flex; justify-content: center; align-items: center; }
.in-author-logo img { width: 44rem; }
.in-author-txt b { display: block; font-size: 19rem; margin-bottom: 6rem; }
.in-author-txt p { color: #bbb; font-size: 15rem !important; line-height: 1.65; }
.in-author-txt span { display: block; margin-top: 8rem; color: #777; font-size: 13rem; }
.in-author-cta { flex-shrink: 0; padding: 14rem 24rem; border-radius: 100px; background: linear-gradient(135deg, #ef7a45, #d2541f); color: #fff !important; font-size: 15rem; font-weight: 700; white-space: nowrap; }

/* '이 글이 필요한 분' 박스 (본문 class="in-who") */
#bo_v_con .in-who { margin: 0 0 40rem; padding: 26rem 30rem; border-radius: 18rem; background: #fff; border: 1px solid #ececea; }
#bo_v_con .in-who > b { display: block; margin-bottom: 12rem; color: var(--main-color); font-size: 16rem; font-weight: 800; }
#bo_v_con .in-who ul { margin: 0; padding: 0; }
#bo_v_con .in-who li { list-style: none; position: relative; padding-left: 26rem; margin-bottom: 8rem; font-size: 17rem; color: #333; }
#bo_v_con .in-who li::before { content: '→'; position: absolute; left: 0; color: var(--main-color); font-weight: 800; }
/* '이럴 땐 맡기는 게 빠릅니다' 비교 (본문 class="in-diy") */
#bo_v_con .in-diy { display: grid; grid-template-columns: 1fr 1fr; gap: 16rem; margin: 30rem 0; }
#bo_v_con .in-diy > div { padding: 26rem 28rem; border-radius: 18rem; background: #f5f5f3; }
#bo_v_con .in-diy > div.go { background: #111; color: #ddd; }
#bo_v_con .in-diy > div > b { display: block; margin-bottom: 10rem; font-size: 18rem; color: #111; }
#bo_v_con .in-diy > div.go > b { color: var(--main-color); }
#bo_v_con .in-diy ul { margin: 0; padding: 0; }
#bo_v_con .in-diy li { list-style: none; margin-bottom: 8rem; font-size: 16rem; line-height: 1.6; }
#bo_v_con .in-diy > div.go strong { color: #fff; }
@media (max-width: 768px) {
    .in-author { grid-template-columns: 1fr; text-align: left; padding: 36rem 32rem; }
    .in-author-logo { width: 90rem; height: 90rem; }
    .in-author-txt b { font-size: 30rem; }
    .in-author-txt p { font-size: 24rem !important; }
    .in-author-txt span { font-size: 20rem; }
    .in-author-cta { font-size: 25rem; padding: 20rem 30rem; text-align: center; }
    #bo_v_con .in-who > b { font-size: 25rem; }
    #bo_v_con .in-who li { font-size: 26rem; padding-left: 36rem; }
    #bo_v_con .in-diy { grid-template-columns: 1fr; }
    #bo_v_con .in-diy > div > b { font-size: 28rem; }
    #bo_v_con .in-diy li { font-size: 25rem; }
}