/* JUNI TEST COMMON LAYOUT v1.1.0
   사이트 전체 공통 바깥 폭 + 공용 헤더 기준
   페이지별 카드/콘텐츠 디자인은 각 페이지 CSS에서 관리합니다. */

:root{
    --jt-site-max-width:980px;
    --jt-site-side-gap:16px;
}

/* 모든 공개 페이지가 공유하는 최상위 바깥 폭 */
.jt-site-shell{
    width:min(calc(100% - (var(--jt-site-side-gap) * 2)), var(--jt-site-max-width));
    margin-left:auto;
    margin-right:auto;
}

/* 공용 헤더 */
.jt-site-header{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-direction:column;
    gap:14px;
    margin:0 0 18px;
    padding:0 8px;
    font-family:
        Pretendard,
        "Noto Sans KR",
        "Apple SD Gothic Neo",
        "Malgun Gothic",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.jt-site-header__identity{
    display:flex;
    align-items:center;
    width:100%;
    min-width:0;
    gap:18px;
}

.jt-site-header__copy{
    color:#98A0AE;
    font-size:11px;
    font-weight:500;
    line-height:1.2;
    letter-spacing:-.02em;
    white-space:nowrap;
}

.jt-site-header__brand{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    gap:10px;
    color:#171D27;
    text-decoration:none;
    font-size:16px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:.12em;
}

.jt-site-header__brand img{
    display:block;
    width:34px;
    height:34px;
    object-fit:contain;
}

.jt-site-header__nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    padding-top:10px;
    border-top:1px solid #A9A2B5;
    flex-wrap:wrap;
    gap:6px 20px;
    margin-left:0;
}

.jt-site-header__menu{
    position:relative;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    color:#666E7A;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.01em;
    white-space:nowrap;
}

.jt-site-header__menu::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:2px;
    height:2px;
    border-radius:999px;
    background:#FF6268;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .16s ease;
}

.jt-site-header__menu:hover,
.jt-site-header__menu:focus-visible,
.jt-site-header__menu.is-current{
    color:#7C3AED;
}

.jt-site-header__menu:hover::after,
.jt-site-header__menu:focus-visible::after,
.jt-site-header__menu.is-current::after{
    transform:scaleX(1);
}

@media(max-width:700px){
    :root{
        --jt-site-side-gap:11px;
    }

    .jt-site-header{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
        padding:0 4px;
    }

    .jt-site-header__identity{
        width:100%;
        gap:12px;
    }

    .jt-site-header__copy{
        font-size:10px;
    }

    .jt-site-header__brand{
        gap:8px;
        font-size:14px;
        letter-spacing:.09em;
    }

    .jt-site-header__brand img{
        width:30px;
        height:30px;
    }

    .jt-site-header__nav{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        align-items:stretch;
        width:100%;
        gap:4px 6px;
        margin-left:0;
        overflow:visible;
    }

    .jt-site-header__nav::-webkit-scrollbar{
        display:none;
    }

    .jt-site-header__menu{
        justify-content:center;
        min-width:0;
        min-height:44px;
        padding:5px 2px;
        font-size:12px;
        line-height:1.5;
        text-align:center;
        white-space:normal;
        word-break:keep-all;
        overflow-wrap:anywhere;
    }
}

/* Brand row and navigation row remain separate at every width. */
.jt-site-header{flex-wrap:wrap}
.jt-site-header__brand{letter-spacing:.06em}
.jt-site-header__identity{flex-wrap:wrap;row-gap:8px}

/* Compact mobile navigation */
.jt-site-header__toggle{display:none}
@media(max-width:700px){
 .jt-site-header{gap:0;padding:4px 5px 14px;border-bottom:1px solid #e5e2e9;margin-bottom:20px}
 .jt-site-header__identity{flex-wrap:nowrap;justify-content:space-between;gap:8px;min-height:48px}
 .jt-site-header__copy{display:none}
 .jt-site-header__brand{font-size:13px;letter-spacing:.035em;gap:8px}
 .jt-site-header__brand img{width:30px;height:30px}
 .has-menu-toggle .jt-site-header__toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;min-height:44px;padding:0 13px;border:1px solid #e4e0ea;border-radius:15px;background:#fff;color:#38445a;font-family:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer}
 .jt-site-header__toggle:focus-visible{outline:2px solid #8565b3;outline-offset:3px}
 .jt-menu-icon{position:relative;width:16px;height:12px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-sizing:border-box}
 .jt-menu-icon:after{content:"";position:absolute;left:0;top:4px;width:16px;border-top:1.5px solid currentColor}
 .is-menu-open .jt-menu-icon{border:0}
 .is-menu-open .jt-menu-icon:before,.is-menu-open .jt-menu-icon:after{content:"";position:absolute;left:0;top:5px;width:16px;border-top:1.5px solid currentColor;transform:rotate(45deg)}
 .is-menu-open .jt-menu-icon:after{transform:rotate(-45deg)}
 .jt-site-header__nav{box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:12px;margin-top:12px;border:1px solid #e8e3ed;border-radius:20px;background:#fff;box-shadow:0 8px 24px #40345208}
 .has-menu-toggle .jt-site-header__nav{display:none}
 .has-menu-toggle.is-menu-open .jt-site-header__nav{display:grid}
 .jt-site-header__menu{box-sizing:border-box;justify-content:flex-start;text-align:left;min-height:48px;padding:12px;font-size:12px;font-weight:600;border-radius:11px;color:#485164}
 .jt-site-header__menu{background:#f7f5fa}


 .jt-site-header__menu:after{display:none}
 .jt-site-header__menu:hover,.jt-site-header__menu:focus-visible,.jt-site-header__menu.is-current{background:#eee7f7;color:#76519a}
}

/* Soft color navigation: shared desktop and mobile treatment. */
.jt-site-header{padding:0;margin-bottom:24px;gap:16px;border-bottom:0}
.jt-site-header__identity{box-sizing:border-box;padding:4px 8px}
.jt-site-header__nav{box-sizing:border-box;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;align-items:stretch;justify-content:initial;padding:8px;margin:0;border:1px solid #e6e5ed;border-radius:22px;background:#fff;box-shadow:0 6px 22px rgba(47,39,68,.035)}
.jt-site-header__menu{box-sizing:border-box;justify-content:center;gap:7px;min-width:0;min-height:46px;padding:10px 4px;border-radius:14px;color:#606777;font-size:11px;font-weight:600;letter-spacing:-.035em;text-align:center;white-space:nowrap;background:transparent;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.jt-site-header__menu::before{content:"";display:block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#f198b0;box-shadow:0 0 0 3px #f198b018}
.jt-site-header__menu:nth-child(4n+2)::before{background:#e8bb50;box-shadow:0 0 0 3px #e8bb5018}
.jt-site-header__menu:nth-child(4n+3)::before{background:#77c6a0;box-shadow:0 0 0 3px #77c6a018}
.jt-site-header__menu:nth-child(4n+4)::before{background:#7ab8e1;box-shadow:0 0 0 3px #7ab8e118}
.jt-site-header__menu::after{display:none}
.jt-site-header__menu:hover{background:#f6f3fa;color:#70538c}
.jt-site-header__menu.is-current{background:#eee7f7;color:#6d4b91;box-shadow:inset 0 0 0 1px #e4d8ef;font-weight:800}
.jt-site-header__menu:focus-visible{outline:2px solid #9574b5;outline-offset:1px;background:#f3edf8;color:#674885}
@media(min-width:701px) and (max-width:950px){
 .jt-site-header__nav{grid-template-columns:repeat(5,minmax(0,1fr))}
 .jt-site-header__menu{font-size:12px}
}
@media(max-width:700px){
 .jt-site-header{gap:0;margin-bottom:20px}
 .jt-site-header__identity{padding:4px 5px}
 .jt-site-header__nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px;margin-top:12px;border-radius:22px}
 .jt-site-header__menu{justify-content:flex-start;text-align:left;min-height:50px;padding:12px;gap:10px;font-size:12px;letter-spacing:-.025em;white-space:normal;word-break:keep-all;background:#f8f6fb;border-radius:13px}
 .jt-site-header__menu::before{width:8px;height:8px;flex-basis:8px}
 .has-menu-toggle .jt-site-header__toggle{border-radius:15px;border-color:#e6e1ed;color:#6d5585;box-shadow:0 3px 10px #40345204}
 .is-menu-open .jt-site-header__toggle{background:#eee7f7;border-color:#e4d8ef}
}
@media(prefers-reduced-motion:reduce){.jt-site-header__menu{transition:none}}

/* ==========================================================
   Main navigation v2 (2026-10-18)
   데스크톱: 드롭다운 묶음 + 오른쪽 정렬 / 휴대폰: 메뉴 버튼 안에서 묶음별 펼침
   ========================================================== */
.jt-site-header__nav.jt-nav-v2{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:4px;grid-template-columns:none;position:relative}
.jt-nav-v2 .jt-nav-group{position:relative}
.jt-nav-v2 .jt-nav-group__btn{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:10px 16px;border:0;border-radius:14px;background:transparent;color:#4b5263;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:-.02em;cursor:pointer;transition:background-color .18s ease,color .18s ease}
.jt-nav-v2 .jt-nav-group__btn::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .18s ease}
.jt-nav-v2 .jt-nav-group__btn:hover,.jt-nav-v2 .jt-nav-group:focus-within .jt-nav-group__btn,.jt-nav-v2 .jt-nav-group.is-open .jt-nav-group__btn{background:#f6f3fa;color:#70538c}
.jt-nav-v2 .jt-nav-group__btn.is-current{background:#eee7f7;color:#6d4b91;box-shadow:inset 0 0 0 1px #e4d8ef;font-weight:800}
.jt-nav-v2 .jt-nav-group__btn:focus-visible{outline:2px solid #9574b5;outline-offset:1px}
.jt-nav-v2 .jt-nav-group__panel{position:absolute;top:calc(100% + 8px);right:0;z-index:50;display:none;min-width:210px;padding:8px;border:1px solid #e6e5ed;border-radius:18px;background:#fff;box-shadow:0 16px 40px rgba(47,39,68,.12)}
.jt-nav-v2 .jt-nav-group__panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.jt-nav-v2 .jt-nav-group.is-open .jt-nav-group__panel{display:grid;gap:2px}
@media(hover:hover) and (min-width:701px){
 .jt-nav-v2 .jt-nav-group:hover .jt-nav-group__panel,.jt-nav-v2 .jt-nav-group:focus-within .jt-nav-group__panel{display:grid;gap:2px}
 .jt-nav-v2 .jt-nav-group:hover .jt-nav-group__btn::after{transform:translateY(1px) rotate(225deg)}
}
.jt-nav-v2 .jt-nav-group__panel .jt-site-header__menu{justify-content:flex-start;min-height:42px;padding:10px 12px;font-size:13px;text-align:left;white-space:nowrap}
.jt-nav-v2 .jt-nav-single{flex:0 0 auto;min-height:46px;padding:10px 16px;font-size:13px;font-weight:700}
.jt-nav-v2 .jt-nav-single::before{display:none}
.jt-nav-v2 .jt-nav-about{margin-left:22px;padding:10px 6px;background:none;color:#8a90a0;font-size:12px;font-weight:700}
.jt-nav-v2 .jt-nav-about::after{content:"→";display:inline;position:static;width:auto;height:auto;margin-left:5px;background:none;transform:none}
.jt-nav-v2 .jt-nav-about:hover,.jt-nav-v2 .jt-nav-about.is-current{background:none;box-shadow:none;color:#e8370d}
.jt-nav-v2 .jt-nav-feature{background:#fdebe5;color:#c2410c}
.jt-nav-v2 .jt-nav-feature:hover{background:#fbd9cd;color:#e8370d}
.jt-nav-v2 .jt-nav-group__btn.jt-nav-feature,.jt-nav-v2 .jt-nav-group:hover .jt-nav-group__btn.jt-nav-feature,.jt-nav-v2 .jt-nav-group.is-open .jt-nav-group__btn.jt-nav-feature{background:#fdebe5;color:#c2410c}
.jt-nav-v2 .jt-nav-group__btn.jt-nav-feature.is-current{box-shadow:inset 0 0 0 1px #f6c5b4;font-weight:800}
.jt-nav-v2 .jt-nav-single.is-current{font-weight:800}

@media(max-width:700px){
 .has-menu-toggle .jt-site-header__nav.jt-nav-v2{display:none}
 .has-menu-toggle.is-menu-open .jt-site-header__nav.jt-nav-v2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .jt-site-header__nav.jt-nav-v2{padding:12px}
 .jt-nav-v2 .jt-nav-group{grid-column:1/-1;margin-bottom:6px}
 .jt-nav-v2 .jt-nav-group__btn{display:block;min-height:0;padding:4px 4px 8px;background:none !important;box-shadow:none !important;color:#98A0AE;font-size:11px;font-weight:800;letter-spacing:.08em;pointer-events:none}
 .jt-nav-v2 .jt-nav-group__btn::after{display:none}
 .jt-nav-v2 .jt-nav-group__panel,.jt-nav-v2 .jt-nav-group.is-open .jt-nav-group__panel{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-width:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
 .jt-nav-v2 .jt-nav-group__panel::before{display:none}
 .jt-nav-v2 .jt-nav-group__panel .jt-site-header__menu{min-height:50px;padding:12px;font-size:12px;white-space:normal}
 .jt-nav-v2 .jt-nav-group__btn.jt-nav-feature{background:none;color:#c2410c}
 .jt-nav-v2 .jt-nav-about{order:11;margin-left:0;background:#f8f6fb}
 .jt-nav-v2 .jt-nav-single{display:flex;margin:0;justify-content:flex-start;min-height:50px;padding:12px;font-size:12px;background:#f8f6fb;border-radius:13px}
}
@media(prefers-reduced-motion:reduce){.jt-nav-v2 .jt-nav-group__btn,.jt-nav-v2 .jt-nav-group__btn::after{transition:none}}


/* ==========================================================
   SITE LAYOUT v2.0 (2026-10-19)
   일반 웹사이트형 공통 레이아웃: 전체 폭 상단 바(로고 왼쪽·메뉴 오른쪽, 상단 고정),
   콘텐츠 폭 1200px, 전체 폭 푸터 띠. 모든 공개 페이지에 같은 규칙으로 적용.
   ========================================================== */
:root{
    --jt-site-max-width:1200px;
    --jt-site-side-gap:24px;
    --jt-site-bg:#F6F5F8;
    --jt-bar-gutter:max(var(--jt-site-side-gap), calc((100vw - var(--jt-site-max-width)) / 2));
}
html,body{overflow-x:clip}
body:has(.jt-site-header){margin:0 !important;padding-top:0 !important;background-color:var(--jt-site-bg) !important}
body:has(.jt-common-footer){padding-bottom:0 !important}
html body:has(.jt-site-shell){background-color:var(--jt-site-bg) !important}

/* ---------- 상단 바 ---------- */
.jt-site-header{
    position:sticky;top:0;z-index:100;
    box-sizing:border-box;
    width:auto;
    margin:0 calc(50% - 50vw) 40px;
    padding:0 var(--jt-bar-gutter);
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:28px;
    min-height:72px;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid #E9E6EF;
    box-shadow:0 1px 0 rgba(255,255,255,.6),0 6px 24px rgba(47,39,68,.04);
}
.jt-site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#D94A4A,#F47C5C,#D9A621,#2E8B67,#38AFC3,#315A7D,#7A5AA6,#D96C8A)}
.jt-site-header__identity{flex:0 0 auto;width:auto;padding:0;gap:16px;flex-wrap:nowrap;min-height:0}
.jt-site-header__brand{font-size:17px;letter-spacing:.08em}
.jt-site-header__brand img{width:36px;height:36px}
.jt-site-header__copy{font-size:12px}
.jt-site-header__nav.jt-nav-v2{
    flex:0 1 auto;width:auto;margin:0;padding:0;
    border:0;border-radius:0;background:none;box-shadow:none;
}
.jt-nav-v2 .jt-nav-group__btn,.jt-nav-v2 .jt-nav-single{min-height:44px;padding:10px 16px;font-size:15px}
.jt-nav-v2 .jt-nav-about{font-size:13px;margin-left:14px}
.jt-nav-v2 .jt-nav-group__panel{top:calc(100% + 14px)}
.jt-nav-v2 .jt-nav-group__panel::before{top:-16px;height:16px}
.jt-nav-v2 .jt-nav-group__panel .jt-site-header__menu{font-size:14px;min-height:44px}
@media(max-width:1100px){.jt-site-header__copy{display:none}}
@media(min-width:701px) and (max-width:900px){
    .jt-nav-v2 .jt-nav-group__btn,.jt-nav-v2 .jt-nav-single{padding:10px 10px;font-size:14px}
    .jt-nav-v2 .jt-nav-about{margin-left:4px}
}

/* ---------- 콘텐츠 폭 ----------
   상단 바가 있는 모든 페이지 = 1200px.
   문제 푸는 진행 화면(상단 바 없는 test.php)은 집중을 위해 기존 980px 유지 (세 테스트 모두 동일) */
.jt-site-shell:has(> .jt-site-header){
    width:min(calc(100% - (var(--jt-site-side-gap) * 2)), var(--jt-site-max-width));
    padding-top:0 !important;margin-top:0 !important;
}

/* 명화 이야기 글 아래 원문 안내 박스: 이전·다음 글 카드와 같은 폭 */
.jt-art-article > .jt-art-reference{max-width:none;margin:20px 0 0}

/* ---------- 페이지 제목 통일 (모든 메인·소개·글 페이지의 첫 제목) ---------- */
:is(.jhome-hero,.jct-hero-card,.jct03-hero-copy,.jwo-hero,.jt-guide-hero__copy,.jt-guide-article__header,
    .jtd-hero,.jt-art-hero__copy,.jt-art-article__header,.jt-about-hero__copy,.jt-faq-hero,.jt-provision-hero,
    .jt-privacy-hero,.jiq-hero) h1{
    font-size:clamp(32px,4.2vw,48px) !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    letter-spacing:-.04em !important;
}

/* ---------- 푸터 띠 ---------- */
.jt-common-footer{
    box-sizing:border-box;
    width:auto !important;
    margin:64px calc(50% - 50vw) 0 !important;
    padding:44px var(--jt-bar-gutter) 40px !important;
    border:0 !important;border-top:1px solid #E6E3EC !important;border-radius:0 !important;
    box-shadow:none !important;
    background:#FFFFFF !important;
    grid-template-columns:120px minmax(0,1fr) auto;
}
.jt-common-footer::before{height:3px;background:linear-gradient(90deg,#D94A4A,#F47C5C,#D9A621,#2E8B67,#38AFC3,#315A7D,#7A5AA6,#D96C8A)}
.jt-site-shell:has(> .jt-common-footer:last-child),
.jt-site-shell:has(> footer.jt-common-footer){margin-bottom:0 !important;padding-bottom:0 !important}

/* ---------- 휴대폰 ---------- */
@media(max-width:700px){
    :root{--jt-site-side-gap:14px}
    .jt-site-header{
        flex-direction:column;align-items:stretch;gap:0;
        min-height:0;padding:8px var(--jt-site-side-gap);margin-bottom:22px;
    }
    .jt-site-header__identity{width:100%;justify-content:space-between;min-height:52px}
    .jt-site-header__brand{font-size:14px}
    .jt-site-header__brand img{width:30px;height:30px}
    .has-menu-toggle.is-menu-open .jt-site-header__nav.jt-nav-v2{
        margin:6px 0 10px;padding:12px;border:1px solid #e8e3ed;border-radius:20px;background:#fff;
        box-shadow:0 8px 24px #40345210;max-height:calc(100vh - 90px);overflow:auto;
    }
    .jt-nav-v2 .jt-nav-group__btn{font-size:11px;padding:4px 4px 8px}
    .jt-nav-v2 .jt-nav-group__panel .jt-site-header__menu,.jt-nav-v2 .jt-nav-single{font-size:13px}
    .jt-nav-v2 .jt-nav-about{margin-left:0}
    .jt-common-footer{margin-top:44px !important;padding:30px var(--jt-site-side-gap) 30px !important;grid-template-columns:90px minmax(0,1fr)}
}