/* ON 치료사례 v1.0.0 */
.oncase,.oncase-pop{--oncase-c:#2447d6;--oncase-r:4/3;--oncase-line:#dcdde0;--oncase-ink:#1f2328;--oncase-sub:#5d636b;--oncase-mute:#8a9098;--oncase-shadow:0 2px 4px rgba(16,24,40,.05),0 14px 34px rgba(16,24,40,.10);color:var(--oncase-ink);font-size:16px;line-height:1.6;word-break:keep-all;box-sizing:border-box;font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
.oncase{max-width:1200px;margin:0 auto}
.oncase *,.oncase *::before,.oncase *::after,.oncase-pop *,.oncase-pop *::before,.oncase-pop *::after{box-sizing:border-box}
.oncase p,.oncase ul,.oncase li,.oncase h2,.oncase-pop p,.oncase-pop h3,.oncase-pop dl,.oncase-pop dt,.oncase-pop dd{margin:0;padding:0}
.oncase ul,.oncase li{list-style:none}
.oncase li::before,.oncase li::marker{content:none}
.oncase button,.oncase-pop button{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;text-shadow:none;min-height:0;line-height:1.2}
.oncase img,.oncase-pop img{max-width:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:0}
.oncase svg,.oncase-pop svg{display:block}
.oncase [hidden],.oncase-pop[hidden]{display:none!important}
.oncase-empty{padding:40px 0;text-align:center;color:var(--oncase-sub);font-size:14px}

/* 제목 · 탭 */
.oncase-title{margin:0 0 20px!important;font-size:28px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--oncase-ink)}
.oncase-tabs{display:flex;flex-wrap:wrap;margin:0 0 22px;padding-left:1px}
.oncase .oncase-tab{height:42px;padding:0 20px;margin:0 0 -1px -1px;border:1px solid var(--oncase-line);border-radius:0;background:#fff;color:var(--oncase-sub);font-size:14.5px;font-weight:600;line-height:1}
.oncase .oncase-tab:hover{color:var(--oncase-ink)}
.oncase .oncase-tab.is-on{position:relative;z-index:1;background:var(--oncase-c);border-color:var(--oncase-c);color:#fff}

/* 카드 */
.oncase-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;margin:0!important;padding:0!important}
.oncase-cols-4 .oncase-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
.oncase-item{margin:0!important;padding:0!important;min-width:0}
.oncase .oncase-card{display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:1px solid #d9dde2;border-radius:0;background:#fff;box-shadow:var(--oncase-shadow);text-align:left;color:var(--oncase-ink);font:inherit;transition:box-shadow .25s,transform .25s}
.oncase button.oncase-card:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(16,24,40,.06),0 20px 44px rgba(16,24,40,.14)}
.oncase button.oncase-card:hover .oncase-tt{color:var(--oncase-c)}
.oncase button.oncase-card:focus-visible{outline:2px solid var(--oncase-c);outline-offset:2px}
.oncase-thumb{position:relative;display:flex;width:100%;aspect-ratio:var(--oncase-r);overflow:hidden;background:#eef0f3}
.oncase-half{position:relative;flex:1 1 50%;min-width:0;height:100%;overflow:hidden;display:block}
.oncase-half img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block}
.oncase-thumb::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:#fff;z-index:2}
.oncase-none{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#eef0f3 0 8px,#e6e9ed 8px 16px)}
.oncase-lab{position:absolute;top:8px;z-index:3;padding:3px 7px;font-style:normal;font-size:11px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#fff;background:rgba(24,29,38,.66);pointer-events:none}
.oncase-lab.is-b{left:8px}
.oncase-lab.is-a{right:8px;background:var(--oncase-c)}
.oncase-body{display:flex;flex-direction:column;gap:3px;padding:16px 18px 18px;flex:1}
.oncase-cat{font-size:12px;font-weight:700;color:var(--oncase-c);line-height:1.4}
.oncase-tt{font-size:16.5px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--oncase-ink);transition:color .2s}
.oncase-sum{font-size:13.5px;line-height:1.55;color:var(--oncase-sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oncase-per{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--oncase-sub);line-height:1.4}
.oncase-per b{font-weight:600;color:var(--oncase-mute)}
.oncase-per b::after{content:"";display:inline-block;width:1px;height:9px;margin-left:8px;background:#d5d8dd;vertical-align:0}
.oncase-cols-4 .oncase-body{padding:14px 15px 16px}
.oncase-cols-4 .oncase-tt{font-size:15.5px}

/* 회원만 보기 */
.oncase.is-locked .oncase-half img{filter:blur(14px);transform:scale(1.15)}
.oncase-lock{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.18);text-align:center;padding:10px}
.oncase-lock-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(16,24,40,.16)}
.oncase-lock-ic svg,.oncase-gate-ic svg{width:20px;height:20px;fill:none;stroke:var(--oncase-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.oncase.is-locked .oncase-lab{display:none}
.oncase .oncase-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 22px;border:0;border-radius:0;background:var(--oncase-c);color:#fff!important;font-size:14px;font-weight:600;line-height:1;text-decoration:none!important;box-shadow:none}
.oncase .oncase-btn:hover{filter:brightness(1.08)}
.oncase .oncase-btn.is-sm{height:32px;padding:0 12px;font-size:12px}
.oncase-gate{display:flex;flex-direction:column;align-items:center;gap:6px;padding:52px 24px;background:#fff;border:1px solid #d9dde2;box-shadow:var(--oncase-shadow);text-align:center}
.oncase-gate-ic{display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin-bottom:8px;border-radius:50%;border:1px solid var(--oncase-line)}
.oncase-gate strong{font-size:17px;font-weight:700;letter-spacing:-.02em}
.oncase-gate span{font-size:13.5px;color:var(--oncase-sub)}
.oncase-gate .oncase-btn{margin-top:14px}

/* 더 보기 · 안내 */
.oncase-more{display:flex;justify-content:center;margin-top:32px}
.oncase .oncase-more-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 34px;border:1px solid var(--oncase-ink);border-radius:0;background:#fff;color:var(--oncase-ink);font-size:14px;font-weight:600}
.oncase .oncase-more-btn span{font-size:17px;font-weight:400;line-height:1;color:var(--oncase-c)}
.oncase .oncase-more-btn:hover{background:var(--oncase-ink);color:#fff}
.oncase .oncase-more-btn:hover span{color:#fff}
.oncase-notice{margin-top:26px!important;padding-top:14px!important;border-top:1px solid #eceef1;font-size:12.5px;line-height:1.65;color:var(--oncase-mute)}

/* 팝업 (body 바로 아래로 옮겨집니다) */
html.oncase-noscroll,html.oncase-noscroll body{overflow:hidden!important}
.oncase-pop{position:fixed;inset:0;z-index:999990;display:flex;align-items:center;justify-content:center;padding:24px;font-size:15px}
.oncase-pop-dim{position:absolute;inset:0;background:rgba(14,18,26,.62);opacity:0;transition:opacity .25s}
.oncase-pop-box{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);width:min(1180px,100%);max-height:calc(100vh - 48px);background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.28);opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s}
.oncase-pop.is-open .oncase-pop-dim{opacity:1}
.oncase-pop.is-open .oncase-pop-box{opacity:1;transform:none}
.oncase-pop .oncase-pop-x{position:absolute;top:0;right:0;z-index:5;display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:0;border-radius:0;background:transparent;color:var(--oncase-ink)}
.oncase-pop-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.oncase-pop .oncase-pop-x:hover{color:var(--oncase-c)}
.oncase-pop-media{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:28px;background:#f4f5f7;min-width:0}
.oncase-cmp{--p:50%;position:relative;width:100%;aspect-ratio:var(--oncase-r);max-height:calc(100vh - 150px);overflow:hidden;background:#e6e9ed;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.oncase-cmp:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--oncase-c) 45%,transparent)}
.oncase-cmp img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.oncase-cmp-b{position:absolute;inset:0;z-index:1;clip-path:inset(0 calc(100% - var(--p)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.oncase-cmp .oncase-lab{top:14px;font-size:12px;padding:4px 9px}
.oncase-cmp .oncase-lab.is-b{left:14px}
.oncase-cmp .oncase-lab.is-a{right:14px}
.oncase-cmp-bar{position:absolute;top:0;bottom:0;left:var(--p);z-index:4;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.08);pointer-events:none}
.oncase-cmp-knob{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;color:var(--oncase-c);box-shadow:0 4px 14px rgba(16,24,40,.22)}
.oncase-cmp-knob svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oncase-cmp.is-drag .oncase-cmp-knob{background:var(--oncase-c);color:#fff}
.oncase-cmp-tip{font-size:12px;color:var(--oncase-mute);text-align:center}
.oncase-pop-info{display:flex;flex-direction:column;gap:0;padding:44px 34px 26px;overflow-y:auto;min-width:0;max-height:calc(100vh - 48px);-webkit-overflow-scrolling:touch}
.oncase-pop-cat{font-size:12.5px;font-weight:700;color:var(--oncase-c);line-height:1.4}
.oncase-pop-tt{margin:4px 0 0!important;font-size:23px!important;font-weight:700!important;line-height:1.35!important;letter-spacing:-.025em;color:var(--oncase-ink)!important}
.oncase-pop-sum{margin-top:8px!important;font-size:14px;line-height:1.6;color:var(--oncase-sub)}
.oncase-pop-meta{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:20px 0 0!important;padding:16px 0!important;border-top:1px solid var(--oncase-ink);border-bottom:1px solid #eceef1;font-size:13.5px;line-height:1.5}
.oncase-pop-meta dt{font-weight:600;color:var(--oncase-mute)}
.oncase-pop-meta dd{color:var(--oncase-ink);margin:0}
.oncase-pop-desc{margin-top:18px;font-size:14px;line-height:1.75;color:#3a3f46}
.oncase-pop-desc p{margin:0 0 10px!important}
.oncase-pop-desc p:last-child{margin-bottom:0!important}
.oncase-pop-desc img{max-width:100%;height:auto}
.oncase-pop-cau{margin-top:18px;padding:13px 15px;border:1px solid #e3e5e8;border-left:3px solid var(--oncase-ink)}
.oncase-pop-cau strong{display:block;font-size:12.5px;font-weight:700;color:var(--oncase-ink);margin-bottom:3px}
.oncase-pop-cau p{font-size:13px;line-height:1.65;color:var(--oncase-sub)}
.oncase-notice.is-pop{margin-top:16px!important;padding-top:0!important;border-top:0;font-size:12px}
.oncase-pop-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:22px}
.oncase-pop .oncase-pop-nav button{height:38px;padding:0 14px;border:1px solid var(--oncase-line);border-radius:0;background:#fff;color:var(--oncase-ink);font-size:13px;font-weight:600}
.oncase-pop .oncase-pop-nav button:hover:not(:disabled){border-color:var(--oncase-c);color:var(--oncase-c)}
.oncase-pop .oncase-pop-nav button:disabled{opacity:.35;cursor:default}
.oncase-pop-count{font-size:12.5px;color:var(--oncase-mute)}

/* 태블릿 */
@media (max-width:1024px){
	.oncase-grid,.oncase-cols-4 .oncase-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px}
	.oncase-pop-box{grid-template-columns:1fr;overflow-y:auto;width:min(760px,100%)}
	.oncase-pop-info{max-height:none;overflow:visible;padding:26px 28px 24px}
	.oncase-cmp{max-height:60vh}
}

/* 휴대폰 */
@media (max-width:767px){
	.oncase{font-size:14px}
	.oncase-title{font-size:21px;margin-bottom:14px!important}
	.oncase-tabs{margin-bottom:14px}
	.oncase .oncase-tab{height:34px;padding:0 12px;font-size:12.5px}
	.oncase-grid,.oncase-cols-4 .oncase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
	.oncase-body,.oncase-cols-4 .oncase-body{padding:10px 11px 12px;gap:1px}
	.oncase-cat{font-size:11px}
	.oncase-tt,.oncase-cols-4 .oncase-tt{font-size:13.5px;line-height:1.38}
	.oncase-sum{display:none}
	.oncase-per{padding-top:6px;font-size:11.5px;gap:6px}
	.oncase-per b{display:none}
	.oncase-lab{top:5px;padding:2px 5px;font-size:10px}
	.oncase-lab.is-b{left:5px}
	.oncase-lab.is-a{right:5px}
	.oncase-lock{gap:6px}
	.oncase-lock-ic{width:34px;height:34px}
	.oncase-lock-ic svg{width:16px;height:16px}
	.oncase .oncase-btn.is-sm{height:26px;padding:0 8px;font-size:10.5px}
	.oncase-gate{padding:36px 18px}
	.oncase-gate strong{font-size:15px}
	.oncase-gate span{font-size:12.5px}
	.oncase-more{margin-top:20px}
	.oncase .oncase-more-btn{height:40px;padding:0 26px;font-size:13px}
	.oncase-notice{margin-top:18px!important;font-size:11.5px}

	/* 아래에서 올라오는 시트 */
	.oncase-pop{align-items:flex-end;padding:0}
	.oncase-pop-box{width:100%;max-height:92vh;max-height:92dvh;transform:translateY(100%);transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
	.oncase-pop .oncase-pop-x{width:44px;height:44px;background:rgba(255,255,255,.92)}
	.oncase-pop-media{padding:0;gap:6px;background:#fff}
	.oncase-cmp{max-height:56vh}
	.oncase-cmp .oncase-lab{top:10px;font-size:11px;padding:3px 7px}
	.oncase-cmp .oncase-lab.is-b{left:10px}
	.oncase-cmp .oncase-lab.is-a{right:54px}
	.oncase-cmp-knob{width:40px;height:40px;margin:-20px 0 0 -20px}
	.oncase-cmp-tip{font-size:11px}
	.oncase-pop-info{padding:14px 16px 18px}
	.oncase-pop-cat{font-size:11.5px}
	.oncase-pop-tt{font-size:18px!important}
	.oncase-pop-sum{font-size:13px;margin-top:4px!important}
	.oncase-pop-meta{margin-top:14px!important;padding:12px 0!important;gap:5px 12px;font-size:12.5px}
	.oncase-pop-desc{margin-top:14px;font-size:13px;line-height:1.7}
	.oncase-pop-cau{margin-top:14px;padding:10px 12px}
	.oncase-pop-cau p{font-size:12px}
	.oncase-notice.is-pop{font-size:11px;margin-top:12px!important}
	.oncase-pop-nav{padding-top:16px}
	.oncase-pop .oncase-pop-nav button{height:36px;padding:0 12px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
	.oncase .oncase-card,.oncase-pop-box,.oncase-pop-dim{transition:none}
}