/* JUNI COLOR TEST ABOUT v1.2.1 */

:root{
    --jt-bg:#F4F6F8;
    --jt-text:#202632;
    --jt-muted:#66707C;
    --jt-line:#E4E8ED;
    --jt-purple:#75669E;
    --jt-shadow:0 12px 36px rgba(38,50,65,.07);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body.jt-body{
    margin:0;
    background:
        radial-gradient(circle at 8% 2%, rgba(255,218,143,.17), transparent 26%),
        radial-gradient(circle at 94% 4%, rgba(167,211,245,.17), transparent 28%),
        var(--jt-bg);
    color:var(--jt-text);
    font-family:
        Pretendard,
        "Noto Sans KR",
        "Apple SD Gothic Neo",
        "Malgun Gothic",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a{color:inherit}

.jt-about-shell{padding:28px 0 56px}

.jt-about-hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    min-height:270px;
    overflow:hidden;
    padding:52px 58px;
    border:1px solid rgba(221,226,232,.92);
    border-radius:28px;
    background:
        radial-gradient(circle at 88% 18%,rgba(248,203,89,.22),transparent 25%),
        radial-gradient(circle at 96% 86%,rgba(99,199,195,.19),transparent 28%),
        linear-gradient(135deg,#FFFFFF 0%,#FFFDFC 52%,#F8FBFE 100%);
    box-shadow:var(--jt-shadow);
}

.jt-about-hero__copy{position:relative;z-index:2}

.jt-about-eyebrow,
.jt-about-section-heading > p{
    margin:0 0 10px;
    color:var(--jt-purple);
    font-size:11px;
    font-weight:850;
    letter-spacing:.16em;
}

.jt-about-hero h1{
    margin:0;
    color:#1C222D;
    font-size:clamp(38px,5vw,54px);
    font-weight:850;
    line-height:1.12;
    letter-spacing:-.045em;
}

.jt-about-lead{
    margin:18px 0 0;
    color:#68717D;
    font-size:15px;
    line-height:1.75;
    letter-spacing:-.02em;
}

.jt-about-symbol{
    position:relative;
    flex:0 0 180px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.76);
    box-shadow:0 18px 40px rgba(38,50,65,.07),inset 0 0 0 1px rgba(212,217,225,.72);
}

.jt-about-symbol__circle{position:absolute;display:block;border-radius:50%;opacity:.82}
.jt-about-symbol__circle--1{width:72px;height:72px;left:-18px;bottom:10px;background:#63C7C3}
.jt-about-symbol__circle--2{width:58px;height:58px;right:-8px;top:2px;background:#F8CB59}
.jt-about-symbol__circle--3{width:42px;height:42px;right:5px;bottom:12px;background:#E98780}

.jt-about-symbol strong{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#303846;
    font-family:Georgia,"Times New Roman",serif;
    font-size:58px;
    font-weight:600;
    letter-spacing:-.06em;
}

.jt-about-card,
.jt-about-section{
    margin-top:20px;
    padding:44px 48px 48px;
    border:1px solid rgba(221,226,232,.92);
    border-radius:28px;
    background:#FFFFFF;
    box-shadow:var(--jt-shadow);
}

.jt-about-section-heading{
    padding-bottom:25px;
    border-bottom:1px solid var(--jt-line);
}

.jt-about-section-heading h2{
    margin:0;
    color:#222A35;
    font-size:26px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:-.035em;
}

.jt-about-overview__body,
.jt-about-notice__body{
    max-width:900px;
    margin:0 auto;
    padding:28px 0 0;
    color:#59636F;
    font-size:15px;
    line-height:1.9;
    letter-spacing:-.018em;
    word-break:keep-all;
}

.jt-about-overview__body p,
.jt-about-notice__body p{margin:0 0 18px}
.jt-about-overview__body p:last-child,
.jt-about-notice__body p:last-child{margin-bottom:0}

.jt-about-overview__body a{
    color:#65538C;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:4px;
}

.jt-about-test-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    padding-top:28px;
}

.jt-about-test-card{
    display:flex;
    flex-direction:column;
    min-height:290px;
    padding:25px 24px 23px;
    border:1px solid #E2E6EB;
    border-radius:22px;
    background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 100%);
}

.jt-about-test-card__no{
    margin:0 0 15px;
    color:#7A6AA1;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
}

.jt-about-test-card h3{
    margin:0;
    color:#242C37;
    font-size:20px;
    font-weight:850;
    line-height:1.35;
    letter-spacing:-.035em;
}

.jt-about-test-card__description{
    margin:14px 0 18px;
    color:#68727E;
    font-size:13px;
    line-height:1.78;
    letter-spacing:-.015em;
}

.jt-about-test-card__meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:auto;
}

.jt-about-test-card__meta span{
    display:inline-flex;
    min-height:26px;
    align-items:center;
    padding:0 9px;
    border-radius:999px;
    background:#F1F3F6;
    color:#707985;
    font-size:10px;
    font-weight:700;
}

.jt-about-test-card > a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    color:#4F426E;
    font-size:13px;
    font-weight:850;
    text-decoration:none;
}

.jt-about-principle-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    padding-top:28px;
}

.jt-about-principle-grid article{
    position:relative;
    min-height:190px;
    padding:25px 25px 23px;
    overflow:hidden;
    border:1px solid #E3E7EC;
    border-radius:20px;
    background:#FBFCFD;
}

.jt-about-principle-grid article > span{
    display:inline-flex;
    margin-bottom:16px;
    color:#9287AE;
    font-family:Georgia,"Times New Roman",serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
}

.jt-about-principle-grid h3{
    margin:0 0 10px;
    color:#303844;
    font-size:16px;
    font-weight:850;
    line-height:1.5;
    letter-spacing:-.025em;
}

.jt-about-principle-grid p{
    margin:0;
    color:#6A7480;
    font-size:13px;
    line-height:1.78;
    letter-spacing:-.012em;
}

.jt-about-content{
    max-width:880px;
    margin:0 auto;
    padding:28px 0 0;
    color:#59636F;
    font-size:15px;
    line-height:1.9;
    letter-spacing:-.018em;
    word-break:keep-all;
}

.jt-about-content h2,
.jt-about-content h3,
.jt-about-content h4{
    color:#252D38;
    font-weight:800;
    line-height:1.45;
    letter-spacing:-.035em;
}

.jt-about-content h2{margin:38px 0 14px;font-size:21px}
.jt-about-content h3{margin:30px 0 12px;font-size:18px}
.jt-about-content h4{margin:26px 0 10px;font-size:16px}
.jt-about-content p{margin:0 0 18px}
.jt-about-content ul,.jt-about-content ol{margin:10px 0 22px;padding-left:24px}
.jt-about-content li{margin:6px 0}
.jt-about-content strong,.jt-about-content b{color:#343D49;font-weight:800}
.jt-about-content a{color:#65538C;text-decoration:underline;text-underline-offset:3px}
.jt-about-content hr{height:1px;margin:34px 0;border:0;background:#E7EBEF}
.jt-about-content img{max-width:100%;height:auto}

.jt-about-creator__layout{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);
    gap:34px;
    padding-top:28px;
}

.jt-about-creator__intro{
    color:#59636F;
    font-size:15px;
    line-height:1.9;
    letter-spacing:-.018em;
    word-break:keep-all;
}

.jt-about-creator__intro p{margin:0 0 17px}
.jt-about-creator__intro p:last-child{margin-bottom:0}
.jt-about-creator__intro strong{color:#343D49;font-weight:850}

.jt-about-creator__facts{
    padding:24px;
    border-radius:20px;
    background:#F7F6FA;
    border:1px solid #E4DFEC;
}

.jt-about-creator__facts dl{margin:0}

.jt-about-creator__facts dl > div{
    padding:13px 0;
    border-bottom:1px solid #E4E0E9;
}

.jt-about-creator__facts dl > div:first-child{padding-top:0}
.jt-about-creator__facts dt{
    margin:0 0 5px;
    color:#8A7CA7;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.jt-about-creator__facts dd{
    margin:0;
    color:#4C5561;
    font-size:12px;
    font-weight:700;
    line-height:1.6;
}

.jt-about-creator__facts > a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    margin-top:18px;
    padding:11px 14px;
    border:1px solid #C7B9DF;
    border-radius:12px;
    background:#EBE4F5;
    box-shadow:0 3px 8px rgba(101,83,140,.08);
    color:#594478;
    font-size:12px;
    font-weight:850;
    line-height:1.5;
    text-align:center;
    text-decoration:none;
    transition:background-color .15s,border-color .15s;
}
.jt-about-creator__facts > a:focus-visible{
    outline:2px solid #75669E;
    outline-offset:3px;
}

.jt-about-policy-links{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    max-width:900px;
    margin:24px auto 0;
    padding-top:22px;
    border-top:1px solid #E7EBEF;
}

.jt-about-policy-links a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:0 13px;
    border:1px solid #DEE3E9;
    border-radius:999px;
    background:#FFFFFF;
    color:#626C78;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
}

.jt-about-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    margin-top:20px;
    padding:38px 46px;
    border:1px solid rgba(221,226,232,.92);
    border-radius:28px;
    background:
        radial-gradient(circle at 90% 10%,rgba(99,199,195,.14),transparent 30%),
        linear-gradient(135deg,#F8F6FC 0%,#FBFCFE 100%);
    box-shadow:var(--jt-shadow);
}

.jt-about-bottom p{
    margin:0 0 8px;
    color:#7A6AA1;
    font-size:11px;
    font-weight:850;
    letter-spacing:.16em;
}

.jt-about-bottom h2{
    margin:0;
    color:#262E39;
    font-size:24px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:-.035em;
}

.jt-about-bottom__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}

.jt-about-bottom__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:50px;
    padding:0 20px;
    border:1px solid #272D36;
    border-radius:999px;
    background:#272D36;
    color:#FFFFFF;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
}

.jt-about-bottom__link--secondary{
    border-color:#D8D1E6;
    background:#FFFFFF;
    color:#65538C;
}

/* Decorative ribbon inspired by the test palette, fading to white. */
.jt-about-color-ribbon{
    height:clamp(42.67px,6.6667vw,74.67px);
    margin:30px 0;
    border-radius:22px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.25),transparent 60%,rgba(255,255,255,.08)),
        linear-gradient(100deg,#D94A4A 0%,#F47C5C 9.09%,#D9A621 18.18%,#768A3A 27.27%,#2E8B67 36.36%,#38AFC3 45.45%,#315A7D 54.55%,#7A5AA6 63.64%,#D96C8A 72.73%,#E8DFC9 81.82%,#F3F0E9 90.91%,#FFFFFF 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 8px 24px rgba(38,50,65,.08);
}

@media(hover:hover){
    .jt-about-test-card > a:hover,
    .jt-about-creator__facts > a:hover{color:#3F315E}
    .jt-about-creator__facts > a:hover{background:#DFD4EF;border-color:#AC96CA}
    .jt-about-policy-links a:hover{border-color:#CFC6DD;background:#FAF8FD;color:#5D4C80}
    .jt-about-bottom__link:hover{transform:translateY(-1px)}
}

@media(max-width:860px){
    .jt-about-test-grid{grid-template-columns:1fr}
    .jt-about-test-card{min-height:0}
    .jt-about-creator__layout{grid-template-columns:1fr}
    .jt-about-creator__facts{max-width:100%}
}

@media(max-width:720px){
    .jt-about-shell{padding:18px 0 34px}
    .jt-about-hero{min-height:auto;padding:34px 28px}
    .jt-about-symbol{flex-basis:112px;width:112px;height:112px}
    .jt-about-symbol strong{font-size:38px}
    .jt-about-symbol__circle--1{width:48px;height:48px}
    .jt-about-symbol__circle--2{width:39px;height:39px}
    .jt-about-symbol__circle--3{width:29px;height:29px}
    .jt-about-lead br{display:none}

    .jt-about-card,
    .jt-about-section{padding:32px 25px 38px}

    .jt-about-overview__body,
    .jt-about-notice__body,
    .jt-about-content,
    .jt-about-creator__intro{
        font-size:14px;
        line-height:1.88;
        word-break:normal;
    }

    .jt-about-content{padding-top:24px}
    .jt-about-content h2{margin-top:34px;font-size:19px}

    .jt-about-principle-grid{grid-template-columns:1fr}
    .jt-about-principle-grid article{min-height:0}

    .jt-about-bottom{align-items:flex-start;flex-direction:column;padding:31px 28px}
    .jt-about-bottom__actions{justify-content:flex-start;width:100%}
}

@media(max-width:520px){
    .jt-about-symbol{display:none}
    .jt-about-hero{padding:30px 24px}
    .jt-about-hero h1{font-size:35px}

    .jt-about-card,
    .jt-about-section{padding:28px 21px 34px}

    .jt-about-section-heading h2{font-size:22px}
    .jt-about-bottom h2{font-size:21px}
    .jt-about-bottom__actions{flex-direction:column}
    .jt-about-bottom__link{width:100%}
}

@media(max-width:600px){
    .jt-about-color-ribbon{margin:22px 0;border-radius:16px}
}

/* Four ways to explore color and art. */
.jt-about-explore__intro{margin:24px 0 0;color:#59636F;font-size:15px;line-height:1.8;word-break:keep-all}
.jt-about-explore-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.jt-about-explore-card{--explore-accent:#507F86;display:flex;flex-direction:column;min-width:0;padding:26px 25px;border:1px solid #E2E6EB;border-top:4px solid var(--explore-accent);border-radius:20px;background:linear-gradient(180deg,#FFF,#FBFCFD)}
.jt-about-explore-card--dictionary{--explore-accent:#7866A0}
.jt-about-explore-card--palette{--explore-accent:#B75571}
.jt-about-explore-card--art{--explore-accent:#9D7143}
.jt-about-explore-card__label{margin:0 0 14px;color:var(--explore-accent);font-size:11px;font-weight:800;letter-spacing:.06em}
.jt-about-explore-card h3{margin:0;color:#242C37;font-size:21px;line-height:1.45;letter-spacing:-.025em}
.jt-about-explore-card h3 span{display:inline-block;margin-left:5px;color:#66707C;font-size:13px;font-weight:600}
.jt-about-explore-card__description{margin:14px 0 22px;color:#59636F;font-size:14px;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
.jt-about-explore-card > a{align-self:flex-start;margin-top:auto;padding:7px 0;color:var(--explore-accent);font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:5px}
.jt-about-explore-card > a:focus-visible{outline:2px solid var(--explore-accent);outline-offset:5px;border-radius:2px}
@media(max-width:600px){
    .jt-about-explore-grid{grid-template-columns:1fr}
    .jt-about-explore-card{padding:23px 21px}
    .jt-about-explore__intro{font-size:14px}
}
/* Featured daily outfit service, followed by the four colour/art tools. */
.jt-about-explore-card--weather{--explore-accent:#648a9b;grid-column:1/-1;background:linear-gradient(115deg,#f5fafb,#fffaf3)}