/*==================== 2026 content css ====================*/
/*==================== data-category / 카테고리 색상 ====================*/
[data-category="jayjun"] { --color-light: var(--jj-gold-soft); --color-main: var(--jj-gold-ink); }
[data-category="lift"] { --color-light: var(--jj-panel); --color-sub: var(--jj-orange-ink); --color-main: var(--jj-orange-ink); }
[data-category="eye"] { --color-light: var(--jj-panel); --color-sub: var(--jj-red); --color-main: var(--jj-red);}
[data-category="nose"] { --color-light: var(--jj-panel); --color-sub: var(--jj-orange-ink); --color-main: var(--jj-gold-ink); }
[data-category="homme"] { --color-light: var(--jj-panel); --color-sub: var(--jj-gold-ink); --color-main: var(--jj-gold-ink); }
[data-category="face"] { --color-light: var(--jj-green-soft); --color-sub: var(--jj-gold-ink); --color-main: var(--jj-gold-ink); }
[data-category="fat"] { --color-light: var(--jj-panel); --color-sub: var(--jj-gold-ink); --color-main: var(--jj-gold-ink); }
[data-category="petit"] { --color-light: var(--jj-hover); --color-sub: var(--jj-gold-ink); --color-main: var(--jj-gold-ink); }
[data-category="skin"] { --color-light: var(--jj-panel); --color-sub: var(--jj-red); --color-main: var(--jj-red); }

/*==================== root / 변수 ====================*/
:root{
/* color-gray */
--white: var(--jj-surface);
--gray-50: var(--jj-surface);
--gray-100: var(--jj-panel);
--gray-200: var(--jj-panel);
--gray-300: var(--jj-hover);
--gray-400: var(--jj-light-gray);
--gray-500: var(--jj-silver);
--gray-600: var(--jj-silver);
--gray-700: var(--jj-dark-gray);
--gray-800: var(--jj-dark-gray);
--gray-900: var(--jj-black);
--black: var(--jj-dark-black);

/* font */
--font-sans: 'Noto Sans KR','Noto Sans',Arial,sans-serif;
--font-serif:'Noto Serif KR','Noto Serif',serif;
--font-gmarket: 'GMarketSans';

--font-heading-xl: 6.2rem;
--font-heading-la: 4.8rem;
--font-heading-md: 2.8rem;
--font-heading-sm: 2.0rem;

--font-body-xl: 2.4rem;
--font-body-la: 2.0rem;
--font-body-md: 1.6rem;
--font-body-sm: 1.4rem;
--font-body-xs: 1.3rem;

--letter-spacing-md: -.12rem;
--letter-spacing-sm: -.08rem;
--letter-spacing-xs: -.05rem;

--radius-xs:4px;
--radius-sm:8px;
--radius-md:10px;
--radius-lg:20px;
--radius-xl:30px;

--gap-1: 2px;
--gap-2: 4px;
--gap-3: 8px;
--gap-4: 10px;
--gap-5: 12px;
--gap-6: 16px;
--gap-7: 20px;
--gap-8: 24px;
--gap-9: 32px;
--gap-10: 40px;
--gap-11: 48px;
--gap-12: 64px;

--padding-1: 2px;
--padding-2: 4px;
--padding-3: 8px;
--padding-4: 10px;
--padding-5: 12px;
--padding-6: 16px;
--padding-7: 20px;
--padding-8: 24px;
--padding-9: 32px;
--padding-10: 40px;

--margin-1: 10px;
--margin-2: 20px;
--margin-3: 30px;
--margin-4: 40px;
--margin-5: 50px;
--margin-6: 60px;
--margin-7: 70px;
--margin-8: 80px;
--margin-9: 90px;
--margin-10: 100px;
--margin-11: 110px;
--margin-12: 120px;

--shadow-sm:0 2px 12px color-mix(in srgb, var(--jj-black) 6%, transparent);
--shadow-md:0 10px 28px color-mix(in srgb, var(--jj-black) 10%, transparent);

--border: var(--jj-light-gray);
}
/*==================== root ====================*/
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
	word-break: keep-all;
}
html {
    font-size: 10px;
    scroll-behavior: smooth;
}
h1, h2, h3, h4, h5 {
    text-transform: capitalize;
	line-height: 1.3;
}
body {
    font-family: var(--font-sans);
    color:var(--gray-900);
    background:var(--white);
    -webkit-font-smoothing: antialiased;
	line-height: 1.5;
}
img {
    max-width: 100%;
    display: block;
    max-height: 640px;
}
:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 2px;
}
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    background: var(--jayjun-main);
    color: var(--jj-white);
    padding: 10px 16px;
    border-radius:0 0 10px 0;
    z-index: 200;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}
.skip-link:focus { left: 0; top: 0;}

.content-wrapper { margin-top: 170px; margin-bottom: 50px; }
@media(max-width:768px) { .content-wrapper { margin-top: 140px; } }

/* ---------- surgery-title / 메인타이틀, 서브탭 ---------- */
.surgery-title-container {
    text-align: center;
    margin: var(--margin-5) auto;
    position: relative;
}
@media(max-width:860px) { .surgery-title-container { margin: var(--margin-3) var(--margin-2); }}
.surgery-title-container .top-title {
    font-size: clamp(calc(var(--font-heading-xl) * 0.8), calc(0.8rem + 2.6vw), var(--font-heading-xl));
    font-weight: 300;
    letter-spacing: var(--letter-spacing-sm);
    color: var(--gray-900);
    text-transform: capitalize;
}
.surgery-title-container .jayjunps {
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 1em;
    color: var(--gray-600);
    padding-top: var(--padding-3);
    padding-left: var(--padding-3);
}

.content-tabs {
    display:flex;
    justify-content:center;
    gap: var(--gap-5);
    margin-top: var(--margin-4);
    flex-wrap:wrap;
	font-size: var(--font-body-sm);
}
.tab-link {
    min-width:160px;
    padding:var(--padding-4) var(--padding-6);
    border:1px solid var(--gray-300);
    border-radius:999px;
    text-align:center;
    text-decoration:none;
    color:var(--gray-700);
    background: var(--white);
    transition:.25s ease;
	align-content: center;
}
.tab-link:hover {
    border-color:var(--color-main);
    color:var(--color-main);
}
.tab-link.active {
    background:var(--color-main);
    border-color:var(--color-main);
    color:var(--white);
}
@media(max-width:768px) {
    .content-tabs {
        gap:var(--gap-3);
        margin-top: var(--margin-3);
    }
    .tab-link {
        flex:1;
        min-width:0;
        font-size:var(--font-body-xs);
        padding:var(--padding-4);
    }
}


/* ---------- container / 컨테이너 ---------- */
.container { max-width: 1200px; margin-inline: auto; }
.container--max1400 {max-width: 1400px; }
@media(max-width:1440px) {
	.container { max-width: 960px; padding-inline: var(--padding-10); }
	.container--max1400 { max-width: 1200px; }
}
@media(max-width:768px) { .container { padding-inline: var(--padding-8); } }
@media(max-width:430px) { .container { padding-inline: var(--padding-7); } }


/* ---------- Breadcrumb / 네비게이션 ---------- */
.site-breadcrumb { display: none; padding: 12px 0; border-bottom: 1px solid var(--border); background: var(--gray-50); }
.site-breadcrumb ol { list-style: none; display: flex; gap: 0; padding: 0; font-size: 1.1rem; color: var(--gray-600); flex-wrap: wrap; justify-content: center; }
.site-breadcrumb a { color:var(--gray-600); text-decoration:none; }
.site-breadcrumb a:hover { color: var(--color-main); }
.site-breadcrumb li:not(:last-child)::after { content:"/"; margin: 0 8px; color: var(--gray-300); }
.site-breadcrumb li[aria-current] { color: var(--gray-900); font-weight: 600; }


/* ---------- Generic section / 섹션 ---------- */
.section { padding-block: 100px; }
@media(max-width:768px) { .section { padding-block: 80px; } }
@media(max-width:430px) { .section { padding-block: 60px; } }
.section--gray { background:var(--gray-100); }
.section--color { background:var(--color-light); }
.section--grid { background: linear-gradient(to bottom, transparent 20px, var(--jj-panel) 20px) 0 0 / 200vw 21px repeat-y, linear-gradient(to right, transparent 20px, var(--jj-panel) 20px) 0 0 / 21px 200vh repeat-x var(--jj-surface); }
.section--padding-bottom { padding-bottom: 0 !important;}

/* 섹션 타이틀 */
.section-title {
    max-width: 928px;
    margin: 0 auto var(--margin-5);
    text-align: center;
    color: var(--gray-900);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
@media(max-width:768px) { .section-title { margin-bottom: 30px; } }
@media(min-width: 860px) { .section-title--margin-bottom { margin-bottom: 0 !important;}}
.section-surgery {
    color: var(--color-main);
    font-size: var(--font-heading-sm);
    font-family: var(--font-gmarket);
    letter-spacing: var(--letter-spacing-sm);
    font-weight: 400;
    line-height: 1.8;
}
.section-head {
    font-size: clamp(calc(var(--font-heading-la) * 0.8), calc(0.8rem + 3vw), var(--font-heading-la));
    font-weight: 700;
    letter-spacing: var(--letter-spacing-sm);
	font-family: var(--font-gmarket);
}
.section-lead {
    font-size: var(--font-body-md);
    font-weight: 400;
	text-align: center;
}
.box-text {
	color: var(--color-main);
	font-size: var(--font-body-md);
    font-weight: 400;
	padding: var(--padding-6);
	border: 1px solid var(--color-main);
	text-align: center;
}
.box-text .box-sub-title {
	display: block;
	font-family: var(--font-gmarket);
	font-size: var(--font-body-la);
	color: var(--color-main);
}
.box-text .box-desc {
	color: var(--gray-900);
}
.box-text--margin-top-1 {
	margin-top: var(--margin-1);
}
.box-text--margin-top-3 {
	margin-top: var(--margin-3);
}
.box-text--margin-bottom-3 { margin-bottom: var(--margin-3);}


/* SEO/AEO 숨김 내용 */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}


/* -- 위로 떠오르는 애니메이션 -- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media(prefers-reduced-motion:reduce){
    .reveal{ opacity: 1 !important; transform: none !important; transition: none !important;}
}


/* ---------- text-deco ---------- */
.f_bold {font-weight: bold;}
.f_under {text-decoration: underline; text-decoration-thickness: 10px; text-underline-offset: -8px; text-decoration-color: var(--jj-gold); text-decoration-skip-ink: none;}

.text-check {
    display: flex;
    gap: var(--gap-4);
    flex-direction: column;
}
.text-check li{
    font-size: var(--font-body-md);
    color: var(--gray-900);
    position: relative;
    padding-left: 1.8rem;
	text-align: start;
}
.text-check li::before{
    content: "";
    width: 5px;
    height: 10px;
    border-right: 3px solid var(--color-main);
    border-bottom: 3px solid var(--color-main);
    transform: rotate(40deg);
    position: absolute;
    left: 0;
    top: 6px;
}
.circle-list {
	margin-top: var(--margin-1);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--gap-3);
    flex-wrap: wrap;
}
.circle-item {
	width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--color-main);
    padding: var(--padding-7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: var(--font-serif);
    font-size: var(--font-body-md);
	text-transform: capitalize;
	font-weight: 500;
}
.circle-list li:nth-child(even) { background: var(--color-sub); }


/* ---------- main-vis ---------- */
.main-vis { background: var(--color-light);}
.main-vis .container { display:grid; gap: var(--gap-9); align-items: center; max-width: 1200px; }
@media(max-width:1200px) {.main-vis .container { align-items: end; }}
@media(min-width:860px) {.main-vis .container {grid-template-columns: 1fr 1fr; gap: var(--gap-6); }}

.main-vis .box-text { margin-top: var(--margin-1); }
.main-vis-title {
    text-align: center;
    color: var(--gray-900);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: var(--margin-6) auto 0;
}
@media(min-width:860px) {.main-vis-title { margin: var(--margin-4) auto; }}
.main-vis-title:nth-last-child {margin-bottom: 0;}
.main-vis-section-sub {
    color: var(--color-main);
    font-family: var(--font-gmarket);
    font-size: clamp(calc(var(--font-heading-md) * 0.8), calc(0.8rem + 1.5vw), var(--font-heading-md));
	letter-spacing: var(--letter-spacing-md);
}
.main-vis-head {
    font-size: clamp(calc(var(--font-heading-xl) * 0.8), calc(0.9rem + 3vw), var(--font-heading-xl));
    color:var(--color-main);
    font-weight: 700;
	letter-spacing: var(--letter-spacing-sm);
	font-family: var(--font-gmarket);
}
.main-vis-desc {
    font-size: var(--font-body-md);
}
.main-vis ul { margin-top: var(--margin-2);}
.main-vis-figure {
    overflow: hidden;
}
@media(min-width:860px) {.main-vis-figure { order:2; }}


/* ---------- Operation Information / 수술정보 ---------- */
.info-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap:var(--gap-6);
}
.info-card {
    background: var(--gray-200);
    border-radius:var(--radius-xl);
    padding: var(--padding-8);
    text-align: center;
    transition: transform .25s ease,backgound .25s ease;
}
@media (max-width: 1200px) { .info-grid { grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 768px) {
    .info-grid { grid-template-columns: 1fr; }
    .info-card { display: grid;
        grid-template-columns: 3rem 1fr;
        grid-template-areas:
        "icon title"
        "icon desc"
        "icon small";
        align-items: center;
        text-align: left;
        padding: var(--padding-7);
        border-radius: var(--radius-lg);
        column-gap: var(--gap-5);
    }
    .info-card svg {
        grid-area: icon;
        width: 2rem;
        height: 2rem;
        margin: 0;
        justify-self: center;
        align-self: center;
    }
    .info-card dt {
        grid-area: title;
        margin: 0;
    }
    .info-card dd {
        grid-area: desc;
        margin: 0 !important;
    }
    .info-card-desc {
        grid-area: small;
    }
}
.info-card:hover { transform: translateY(-4px); background: var(--color-light); }
.info-card--logo:hover { background: var(--black); }
.info-card--logo { background:var(--gray-700); color: var(--gray-100); }
.info-icon { width: 32px; height: 32px; color: var(--color-main); margin: 0 auto var(--margin-1); display:block; }
.info-card--logo .info-icon { color: var(--white); }
.info-card dt { font-weight: 700; font-size:var(--font-body-md); color: var(--gray-900); margin:0 0 var(--margin-1);}
.info-card--logo dt {color: var(--white);}
.info-card dd { margin: 0; font-size: var(--font-body-md); color: var(--gray-900); }
.info-card-desc { color: var(--gray-600); font-size: var(--font-body-xs); margin-top: var(--margin-1); }
.info-card--logo dd { font-size: var(--font-body-sm); color: var(--gray-100); margin-top: var(--margin-1);}
.info-card svg { width: 3.4rem; height: 3.4rem; }
.info-card--logo svg { width: 3rem; height: 3rem; }


/* ---------- Whatis / ~란? ---------- */
.Whatis-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-6);
    align-items: end;
    justify-items: end;
}
.Whatis-wrap--align-center {align-items: center;}
.Whatis-inner {
	width: 620px;
    display: flex;
    gap: var(--gap-6);
    flex-direction: column;
    margin: var(--margin-4) 60px var(--margin-4) 0;
	text-transform: none;
}
.Whatis-inner--margin-bottom {
	margin-bottom: 0px;
}
.Whatis-sans { font-family: var(--font-sans); font-size: var(--font-body-md); color: var(--gray-900); }
.Whatis-serif { font-family: var(--font-gmarket); font-size: var(--font-body-la); color: var(--color-main);}
.Whatis-figure { overflow: hidden; }

@media(max-width:1200px) {
	.Whatis-wrap {align-items: end; }
	.Whatis-inner { width: 100%; }
}
@media(max-width:860px) {
	.Whatis-figure { order:2; }
	.Whatis-wrap { grid-template-columns: 1fr; gap: var(--gap-9); align-items: center;}
	.Whatis-inner { width: 100%; margin: 0; text-align: center; }
}


/* ---------- Recommended / 수술대상 ---------- */
.recommended-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-6);
    align-items: center;
    justify-items: end;
}
.recommended-wrap--text {
    display: grid;
    grid-template-columns: .5fr;
    justify-content: center;
}
.recommended-figure { overflow: hidden; }
.recommended-list {
    list-style: none;
    counter-reset: rec;
	width: 100%;
    margin: var(--margin-4) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-6);
}
.recommended-wrap--text ol { margin: 0 !important; }
@media(max-width:1200px) { .recommended-wrap {align-items: end; }}
@media(max-width:860px) {
.recommended-figure { order:2; }
.recommended-wrap { grid-template-columns: 1fr; gap: var(--gap-9); align-items: center; justify-items: center; }
.recommended-list { margin: 0;}
}
.rec-item {
    counter-increment: rec;
    display: flex;
    gap:var(--gap-7);
    align-items: center;
    background: color-mix(in srgb, var(--jj-white) 60%, transparent);
    border-radius: var(--radius-xl);
    padding: var(--padding-3) var(--padding-7) var(--padding-3) var(--padding-3);
}
.rec-item::before {
    font-size: var(--font-body-la);
    font-family: var(--font-gmarket);
    content: counter(rec, decimal-leading-zero);
    font-weight: 400;
    background: var(--color-main);
    border-radius: 50%;
    color: var(--white);
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rec-text {
    font-size: var(--font-body-md);
    color:var(--gray-900);
}


/* ---------- progress / 수술방법 ---------- */
.progress-grid {
    display: flex;
    justify-content: center;
    gap: var(--gap-6);
    flex-wrap: wrap;
    align-items: flex-start;
    list-style: none;
}
.progress-grid--margin-top {
	margin-top: var(--margin-2);
}
.progress-step {
    padding-top: 60px;
    width: 190px;
    text-align:center;
    position: relative;
    counter-increment: step;
}
.progress-step::before {
    font-size: var(--font-body-la);
    font-family: var(--font-gmarket);
    content: counter(step, decimal-leading-zero);
    font-weight: 400;
    background: var(--color-main);
    border-radius: 50%;
    color: var(--white);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.progress-figure {
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--margin-1);
}
.progress-text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}
.progress-step p {
    font-size: var(--font-body-md);
    color: var(--gray-900);
}
.progress-step .subtit {
    font-size: var(--font-body-la);
    color: var(--color-main);
	font-family: var(--font-gmarket);
}
@media (max-width: 768px) {
    .progress-grid {
        gap: var(--gap-9);
    }
    .progress-step {
        padding-top: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "num num"
        "image text";
        align-items: center;
        text-align: left;
        gap: var(--gap-6);
    }
    .progress-step::before {
        grid-area: num;
        position: static;
        transform: none;
        justify-self: center;
    }
    .progress-figure {
        grid-area: image;
        margin: 0;
    }
    .progress-step p {
        grid-area: text;
        margin: 0;
    }
}


/* ---------- box inner / 박스내용 ---------- */
.box-card {
    border: 1px solid var(--color-main);
    overflow: hidden;
    margin-bottom: var(--margin-3);
    background:var(--white);
}
.box-card--banner {
    background: var(--color-main);
    color: var(--white);
    font-weight: 600;
    text-align: center;
    padding: var(--padding-5);
    font-size: var(--font-body-la);
    font-family: var(--font-serif);
}
.box-card--body {
    padding: var(--padding-10);
}
.box-columns {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    gap: var(--gap-6);
}
@media(max-width:860px) {
.box-card--banner { font-size: calc(var(--font-body-la) * .9); }
.box-card--body { padding: var(--padding-9) var(--padding-7); }
.box-columns { flex-direction: column; align-items: center; gap: var(--gap-8); }
}
.box-col{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-4);
}
.box-col-figure {
    border-radius: var(--radius-xl);
    overflow:hidden;
}
.box-col h4{
    color: var(--color-main);
    font-size: var(--font-body-la);
    font-family: var(--font-gmarket);
    font-weight: 400;
    letter-spacing: -.03em;
}
.box-col ul{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.box-col li{
    font-size: var(--font-body-md);
    color: var(--gray-900);
    position: relative;
    padding-left: 1.8rem;
}
.box-col li::before{
    content: "";
    width: 5px;
    height: 10px;
    border-right: 3px solid var(--color-main);
    border-bottom: 3px solid var(--color-main);
    transform: rotate(40deg);
    position: absolute;
    left: 0;
    top: 6px;
}
.box-caption {
    text-align: center;
    color: var(--color-main);
    font-size: var(--font-body-la);
    font-family: var(--font-gmarket);
    margin: var(--margin-2) auto 0;
    max-width: 740px;
}


/* ---------- Method Case / 케이스 ---------- */
.case-inner {
	display: flex;
    flex-direction: column;
    gap: var(--gap-8);
}
.case-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-6);
}
.case-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}
.case-figure {
    border-radius: var(--radius-lg);
    overflow: hidden;
    object-fit: cover;
}
.case-title-box {
    border: 1px solid var(--color-main);
    padding: var(--padding-5) var(--padding-6);
    text-align: center;
    color: var(--color-main);
    font-family: var(--font-gmarket);
    font-weight: 400;
    font-size: var(--font-body-la);
    margin: 0;
}
.case-title-box .box-desc {
    font-size: var(--font-body-md);
    font-family: var(--font-sans);
    display: block;
    font-weight: 400;
}
.case-desc {
    text-align: center;
    font-size: var(--font-body-md);
    color: var(--gray-900);
    margin: 0;
}

@media(max-width:860px) {
	.case-inner { gap: var(--gap-9); }
    .case-grid { grid-template-columns: 1fr; gap: var(--gap-9); }
    .case-banner { font-size: calc(var(--font-body-md) * .9); }
}


/* ---------- VS / VS 비교 ---------- */
.Vs-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-9);
  max-width: 860px;
  margin: 0 auto;
}
.Vs-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-5);
  text-align: center;
}
.Vs-label {
  color: var(--color-main);
  font-family: var(--font-gmarket);
  font-size: var(--font-body-la);
  font-weight: 400;
  margin: 0;
}
.Vs-label--black { color: var(--black);}
.Vs-figure {
  border-radius: var(--radius-lg);
  object-fit: cover;
}
.Vs-desc {
  font-size: var(--font-body-md);
  color: var(--gray-900);
  margin: 0;
}
.Vs-desc--bold {
	font-weight: 600;
}

/* VS 뱃지 */
.Vs-badge {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-main);
  color: var(--jj-white);
  font-family: var(--font-gmarket);
  font-size: var(--font-body-la);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 모바일: 세로 배치 */
@media (max-width: 768px) {
  .Vs-wrap {
    flex-direction: column;
    gap: var(--gap-7);
  }
  .Vs-card {
    width: 100%;
  }
  .Vs-badge {
    width: 44px;
    height: 44px;
  }
}


/* ---------- Table / 표 ---------- */
.inner-wrap {display: block;}
.table-type-title {
  font-family: var(--font-gmarket);
  font-size: var(--font-body-la);
  font-weight: 400;
  color: var(--color-main);
  text-align: center;
  line-height: 1.4;
  margin: 0;
}
.table-figure {
  border-radius: var(--radius-lg);
}
.table-cell--label,
.table-card-label {
  background: var(--gray-500);
  color: var(--white);
  font-size: var(--font-body-sm);
  font-weight: 600;
  padding: var(--padding-2) var(--padding-5);
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── PC (769px+) ── */
@media (min-width: 769px) {
	.table-wrap {
	    max-width: 860px;
		margin: 30px auto 0;
		display: flex;
        flex-direction: column;
	}
	.table-wrap--width {max-width: 960px;}
	.table-row {
		display: grid;
        gap: var(--gap-6);
        border-top: 1px solid var(--gray-300);
        padding: var(--padding-5);
        grid-auto-flow: column;
        align-items: center;
        grid-template-columns: 1fr .3fr 1fr;
	}
	.table-row--3 {grid-template-columns: .4fr 1fr 1fr 1fr;}
	.table-cell--desc {
		font-size: var(--font-body-md);
		color: var(--gray-900);
		line-height: 1.5;
		text-align: center;
	}
	.table-cell--label {
		text-align: center;
	}
	.table-cell--img img {margin: 0 auto; }
	.table-cell--img p {
		color: var(--color-main);
		font-size: var(--font-body-la);
		font-family: var(--font-gmarket);
		padding-top: var(--gap-4);
		text-align: center;
	}
	/* MO 요소 숨김 */
	.table-cards,
	.table-pagination { display: none; }
	}

/* ── MO (768px-) ── */
@media (max-width: 768px) {
  .inner-wrap { display: none; }

  .table-cards {
    display: block;
    overflow: hidden;
  }
  .table-cards .swiper-wrapper { height: auto; }
  .table-cards .swiper-slide   { width: 100%; height: auto; }

  .table-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--padding-8);
    display: flex !important;
    flex-direction: column;
	align-items: center;
    gap: var(--gap-6);
  }
  .table-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .table-card-list li {
	display: grid;
	align-items: center;
	gap: var(--gap-5);
	padding: var(--padding-4) 0;
	border-top: 1px solid var(--gray-200);
	grid-auto-flow: column;
	grid-template-columns: .5fr 1fr;
	text-align: center;
  }
  .table-card-desc {
	color: var(--gray-900);
	line-height: 1.5;
	font-size: var(--font-body-md);
  }

  .table-pagination {
    margin-top: var(--margin-2);
    text-align: center;
  }
  .table-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    margin: 0 4px;
    background: var(--gray-400);
    opacity: 1;
  }
  .table-pagination .swiper-pagination-bullet-active {
    background: var(--color-main);
  }
}


/* ---------- Check List / 체크리스트 ---------- */
.Ceck-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-9);
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.Ceck-wrap--margin-top {margin-top: var(--gap-10); border-top: 1px solid var(--gray-300); padding-top: var(--gap-10);}
.Ceck-figure {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
}
.Ceck-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-7);
}
.Ceck-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-5);
}
.Ceck-item::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 12px;
  border-right: 3px solid var(--color-main);
  border-bottom: 3px solid var(--color-main);
  transform: rotate(40deg);
  margin-top: 4px;
}
.Ceck-check-text,
.Ceck-text {
  font-size: var(--font-body-md);
  color: var(--gray-900);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .Ceck-wrap {
    grid-template-columns: 1fr;
    gap: var(--gap-8);
  }
}


/* ---------- point / 핵심포인트 ---------- */
.point-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-6);
    align-items: center;
    justify-items: start;
}
.point-wrap--items-end {
	align-items: end;
}
.point-figure { overflow: hidden; }
.point-list {
	width: 100%;
    list-style: none;
    counter-reset: step;
    margin: var(--margin-4) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-6);
}
@media(max-width:1440px) { .point-wrap {align-items: end; }}
@media(max-width:860px) {
.point-figure { order:2; }
.point-wrap { grid-template-columns: 1fr; gap: var(--gap-9); align-items: center; justify-items: center; }
.point-list { margin: 0;}
}
.point-item {
    width: 100%;
    padding: var(--padding-6) var(--padding-7);
    background: color-mix(in srgb, var(--jj-white) 60%, transparent);
    border-radius: var(--radius-lg);
    counter-increment: step;
}
.point-item::before {
    content: "point" counter(step, decimal-leading-zero);
    font-size: var(--font-body-xs);
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--gray-600);
    font-family: var(--font-serif);
}
.point-subtitle {
    color: var(--color-main);
    font-size: var(--font-body-la);
    letter-spacing: -.03em;
    font-weight: 400;
    font-family: var(--font-gmarket);
    display: inline;
    margin-left: var(--margin-1);
}
.point-desc{
    font-size: var(--font-body-md);
    color: var(--gray-900);
    margin-top: 8px;
}


/* ---------- COPY / 카피 ---------- */
.container.Copy-wrap--end {align-items: end;}
.Copy-title {
    text-align: center;
    color: var(--gray-900);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: var(--margin-6) auto 0;
}
@media(min-width:860px) {.Copy-title { margin: var(--margin-4) auto; }}
.Copy-title:nth-last-child {margin-bottom: 0;}
.Copy-sub {
    color: var(--gray-900);
    font-family: var(--font-serif);
    font-size: clamp(calc(var(--font-body-la) * 0.8), calc(0.8rem + 1.5vw), var(--font-body-la));
	letter-spacing: var(--letter-spacing-sm);
	margin-bottom: 20px;
}
.Copy-head {
    font-size: clamp(calc(var(--font-heading-xl) * 0.8), calc(0.9rem + 3vw), var(--font-heading-xl));
    color:var(--color-main);
    font-weight: 600;
	letter-spacing: var(--letter-spacing-sm);
	font-family: var(--font-gmarket);
}
.Copy-figure {
    overflow: hidden;
}
@media(min-width:860px) {.Copy-figure { order:2; }}


/* ---------- con-img ---------- */
.img-inner {
    display: flex;
    gap: var(--gap-6);
    text-align: center;
    justify-content: center;
    align-items: center;
}

@media(max-width:768px) {
    .img-inner {
        flex-direction: column;
    }
}


/* ---------- 반응형 배너 이미지 ---------- */
.banner-img-wrap { width: 100%; }
.banner-img      { display: block; margin: 0 auto;}

/* PC: 가로 이미지만 표시 */
.banner-img--mo  { display: none; }

/* MO: 세로 이미지만 표시 */
@media (max-width: 768px) {
  .banner-img--pc { display: none; }
  .banner-img--mo { display: block; }
}


/* ---------- System / 시스템 ---------- */
.system-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-8);
    align-items: center;
    justify-items: center;
}
.system-inner {
    text-align: center;
    padding-right: var(--gap-12);
    display: flex;
    gap: var(--gap-4);
    flex-direction: column;
}
.system-inner .desc {
    font-size: var(--font-body-md);
    color: var(--gray-900);
    margin-top: var(--gap-4);
}
.system-inner .point-desc {
    font-family: var(--font-gmarket);
    font-size: var(--font-body-la);
    color: var(--color-main);
    font-weight: 500;
    margin: 0;
}
@media (max-width: 768px) {
  .system-wrap { grid-auto-flow: row; grid-template-columns: none;}
  .system-inner { padding-right: 0; }
}


/* ---------- Before & After / 전후사진 ---------- */
.ba-stage {
    position: relative;
    max-width: 820px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    gap:var(--gap-5);
}
.ba-slider {
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--jj-panel);
    border: 1px var(--gray-300) solid;
}
.ba-img { display: block; width: 100%; height: auto; object-fit: contain; }
.ba-caption {
    text-align: center;
    font-size: var(--font-body-md);
    color: var(--gray-900);
    padding: var(--padding-4);
    background: var(--gray-100);
    max-width: 720px;
    margin: var(--margin-2) auto;
    border-radius: var(--radius-lg);
}
.ba-thumbs {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-4);
}
.ba-thumbs li {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s ease, opacity .2s ease;
    border: 1px var(--gray-300) solid;
}
.ba-thumbs li img { width: 100%; height:100%; object-fit: cover; display: block; }
.ba-thumbs li:hover { opacity: .85; }
.ba-thumbs li.is-active { border: 2px var(--color-main) solid; }
/* 블러영역 */
.ba-slider,
.ba-thumbs li {
    position: relative;
}
.ba-slider::after,
.ba-thumbs li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: color-mix(in srgb, var(--jj-black) 85%, transparent);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    pointer-events: none;
}
.ba-label{
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: var(--jj-white);
    font-size: var(--font-body-sm);
    text-align: center;
}
.ba-slider--vertical::after,
.ba-thumbs--vertical li::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 50%;
	height: 100%;
	background: color-mix(in srgb, var(--jj-black) 85%, transparent);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
	pointer-events: none;
}
.ba-slider--vertical .ba-label {
	width: 40%;
	left: 75%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.ba-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--jj-black) 70%, transparent);
    color: var(--white);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}
.ba-arrow:hover { background: var(--color-main); }
.ba-loading { text-align:center; padding: 40px; color:var(--gray-600); font-size: var(--font-body-sm); }
@media (max-width:560px) {
    .ba-stage {
        flex-wrap:wrap;
        justify-content: center;
    }
    .ba-stage .ba-slider {
        order:1; flex-basis:100%; width:100%;
    }
    .ba-arrow--prev {order:2; margin-top:10px;}
    .ba-arrow--next {order:3; margin-top:10px;}
}
.ba-pagination {
  display: flex;
  justify-content: center;
  gap: var(--gap-3);
  margin-top: var(--margin-2);
}
.ba-page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  background: var(--white);
  color: var(--gray-700);
  font-size: var(--font-body-sm);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.ba-page-btn:hover {
  border-color: var(--color-main);
  color: var(--color-main);
}
.ba-page-btn.is-active {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--white);
  font-weight: 700;
}


/* ---------- channelJayjun ---------- */
#channelJayjunWrap {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
/* ---- 메인 재생 영역 ---- */
.cj-stage {
	position: relative;
    max-width: 820px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    gap:var(--gap-5);
}
.cj-main {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--jj-dark-black);
}
.cj-main iframe { display: block; width: 100%; height: 100%; border: 0; }
.cj-play {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
}
.cj-main-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cj-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  line-height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--jj-black) 55.00000000000001%, transparent);
  color: var(--jj-white);
  font-size: 28px;
  transition: transform .15s ease, background .15s ease;
}
.cj-play:hover .cj-play-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background: color-mix(in srgb, var(--jj-black) 70%, transparent);
}
.cj-caption {
	text-align: center;
	font-size: var(--font-body-md);
	color: var(--gray-900);
	padding: var(--padding-4);
	background: var(--white);
	max-width: 720px;
	margin: var(--margin-2) auto;
	border-radius: var(--radius-lg);
}
/* ---- 하단 썸네일 리스트 ---- */
.cj-thumbs {
	max-width: 720px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 20px auto 0px;
	padding: 0;
	list-style: none;
}
.cj-thumb-item {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--jj-hover);
}
.cj-thumb-item.is-active {border: 2px solid var(--color-main);}
.cj-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.cj-thumb-item:hover img { transform: scale(1.05); }
.cj-thumb-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--jj-white);
  text-align: left;
  background: linear-gradient(to top, color-mix(in srgb, var(--jj-black) 75%, transparent), color-mix(in srgb, var(--jj-black) 0%, transparent));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cj-thumb-error {
  grid-column: 1 / -1;
  color: var(--gray-500, var(--jj-muted));
  font-size: 14px;
  padding: 20px 0;
}
.cj-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--jj-black) 70%, transparent);
    color: var(--white);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}
.cj-arrow:hover { background: var(--color-main); }
.cj-pagination {
  display: flex;
  justify-content: center;
  gap: var(--gap-3);
  margin-top: var(--margin-2);
}
.cj-page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  background: var(--white);
  color: var(--gray-700);
  font-size: var(--font-body-sm);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.cj-page-btn:hover {
  border-color: var(--color-main);
  color: var(--color-main);
}
.cj-page-btn.is-active {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--white);
  font-weight: 700;
}
/* ---- 모바일 (768px 이하) ---- */
@media (max-width: 768px) {
	.cj-stage {
        flex-wrap:wrap;
        justify-content: center;
    }
  .cj-thumbs { grid-template-columns: repeat(2, 1fr); }
  .cj-arrow--prev {order:2; margin-top:10px;}
  .cj-arrow--next {order:3; margin-top:10px;}
}


/* ---------- FAQ ---------- */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}
.faq-item {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: var(--padding-6) var(--padding-10) var(--padding-6) var(--padding-8);
    font-weight: 500;
    color: var(--gray-900);
    position: relative;
    font-size: var(--font-body-md);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-main);
    font-size: var(--font-body-la);
}
.faq-item[open] summary::after {content:"–"; }
.faq-answer {
    margin: 0;
    padding: 0 var(--padding-7) var(--padding-6);
    color: var(--gray-700);
    font-size: var(--font-body-md);
    font-weight: 400;
}
a.faq-link {
	display: block;
    margin-top: var(--margin-1);
    font-size: var(--font-body-sm);
    color: var(--color-main);
    font-weight: 500;
    cursor: pointer;
}
a.faq-link::before {
	content: '→';
    margin-right: 6px;
}
a.faq-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ---------- Standard of beauty ---------- */
#standard { margin-bottom: 50px; }
.standard-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--gap-6);}
@media(min-width:768px) {.standard-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px) {.standard-grid{grid-template-columns:repeat(3,1fr);}}
.standard-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 1;
    color: var(--white);
    text-align: center;
}
.standard-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.2);
}
.standard-card--content {
    position: relative;
    padding: var(--padding-10);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.standard-card h3 {
    font-size: var(--font-body-la);
    margin-bottom: 8px;
    font-family: var(--font-serif);
    font-weight: 600;
}
.standard-card p {
    font-size: var(--font-body-md);
    opacity: .9;
}
@media (max-width:768px){
    .standard-grid.swiper{
        display:block;
        overflow:hidden;
    }

    .standard-grid .swiper-wrapper {
        height: auto;
    }
    .standard-grid .swiper-slide{
        width:100%;
    }
    .standard-pagination{
        margin-top:24px;
        text-align:center;
    }
    .standard-pagination .swiper-pagination-bullet{
        width:8px;
        height:8px;
        margin:0 4px;
        background:var(--gray-400);
        opacity:1;
    }
    .standard-pagination .swiper-pagination-bullet-active{
        background:var(--color-main);
    }
}