
/* 메인에서는 서브페이지용 breadcrumb / 전체메뉴 보조행을 사용하지 않습니다. */
body:has(.home-main) .breadcrumb,
body:has(.home-main) .breadcrumbs,
body:has(.home-main) .breadcrumb-wrap,
body:has(.home-main) .breadcrumb_wrap,
body:has(.home-main) .page-breadcrumb,
body:has(.home-main) .sub-breadcrumb,
body:has(.home-main) .tool-breadcrumb,
body:has(.home-main) .sub-nav-top,
body:has(.home-main) .sub_nav_top,
body:has(.home-main) .page-util,
body:has(.home-main) .page_util,
body:has(.home-main) .tool-util,
body:has(.home-main) .tool_util,
body:has(.home-main) .all-menu-row,
body:has(.home-main) .all_menu_row {
    display:none !important;
}

/* 위 요소를 감싸는 공통 서브 헤더가 비게 되는 경우 높이 제거 */
body:has(.home-main) .sub-header:has(.breadcrumb),
body:has(.home-main) .sub_header:has(.breadcrumb),
body:has(.home-main) .page-top:has(.breadcrumb),
body:has(.home-main) .page_top:has(.breadcrumb) {
    display:none !important;
}

/* =========================================================
   USEMO HOME
   메인 전용 스타일
   ========================================================= */

.home-main{
    --home-purple:#7258e8;
    --home-blue:#4f8cf7;
    --home-mint:#44bfa4;
    --home-coral:#ef725f;
    --home-orange:#ee9e43;
    --home-yellow:#e7b73a;
    --home-cyan:#3eabc4;
    --home-green:#59a46c;

    width:100%;
    display:grid;
    gap:0;
}

.home-section{
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;
    padding:48px 0 0;
}

.home-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:27px;
}

.home-section-head.is-center{
    display:block;
    text-align:center;
}

.home-section-head.compact{
    margin-bottom:18px;
}

.home-section-kicker{
    display:inline-block;
    margin-bottom:9px;
    color:var(--home-purple);
    font-size:11px;
    line-height:1;
    font-weight:900;
    letter-spacing:.13em;
}

.home-section-head h2,
.home-about-content h2{
    margin:0;
    color:var(--text);
    font-size:28px;
    line-height:1.25;
    letter-spacing:-.045em;
}

.home-section-head p{
    margin:8px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
}

/* HERO */
.home-hero{
    position:relative;
    overflow:hidden;
    padding:64px 20px 58px;
    background:
        linear-gradient(145deg,#f8f7ff 0%,#f4f9ff 43%,#f5fcf9 100%);
}

.home-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(rgba(114,88,232,.095) 1px,transparent 1px);
    background-size:24px 24px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 85%);
}

.home-hero-inner{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:0 auto;
    text-align:center;
}

.home-hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(1px);
    opacity:.6;
}

.home-hero-glow-a{
    width:330px;
    height:330px;
    top:-180px;
    left:5%;
    background:rgba(126,100,235,.12);
}

.home-hero-glow-b{
    width:300px;
    height:300px;
    right:3%;
    bottom:-190px;
    background:rgba(63,185,160,.13);
}

.home-eyebrow{
    margin-bottom:19px;
    color:var(--home-purple);
    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
}

.home-hero h1{
    margin:0;
    color:#24212f;
    font-size:55px;
    line-height:1.1;
    letter-spacing:-.06em;
}

.home-hero h1 span{
    background:linear-gradient(100deg,#654dde,#4f8cf7 54%,#38ad96);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.home-hero-desc{
    margin:21px 0 0;
    color:#6e7180;
    font-size:16px;
    line-height:1.8;
}

/* CATEGORY */
.home-category-grid{
    display:grid;
    grid-template-columns:repeat(9,minmax(0,1fr));
    gap:12px;
    margin-top:30px;
}

.home-category-card{
    min-width:0;
    padding:18px 8px 15px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    text-align:center;
    text-decoration:none;
    transition:.2s ease;
}

.home-category-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(48,54,78,.09);
}

.home-category-icon,
.home-tool-icon,
.home-discover-icon,
.home-category-tools-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-weight:900;
}

.home-category-icon{
    width:45px;
    height:45px;
    margin-bottom:12px;
    font-size:16px;
}

.home-category-card strong{
    display:block;
    color:var(--text);
    font-size:13px;
}

.home-category-card small{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
}

/* tones */
.tone-violet .home-category-icon,
.home-tool-card.tone-violet .home-tool-icon,
.home-discover-icon.tone-violet,
.home-category-tools-icon.tone-violet{background:#efecff;color:#7157e7}

.tone-coral .home-category-icon,
.home-tool-card.tone-coral .home-tool-icon,
.home-discover-icon.tone-coral,
.home-category-tools-icon.tone-coral{background:#fff0ed;color:#e86c5b}

.tone-blue .home-category-icon,
.home-tool-card.tone-blue .home-tool-icon,
.home-discover-icon.tone-blue,
.home-category-tools-icon.tone-blue{background:#eaf3ff;color:#4e87e8}

.tone-mint .home-category-icon,
.home-tool-card.tone-mint .home-tool-icon,
.home-discover-icon.tone-mint,
.home-category-tools-icon.tone-mint{background:#e9f9f4;color:#3cab91}

.tone-purple .home-category-icon,
.home-tool-card.tone-purple .home-tool-icon,
.home-discover-icon.tone-purple,
.home-category-tools-icon.tone-purple{background:#f3ecff;color:#8d57d9}

.tone-cyan .home-category-icon,
.home-tool-card.tone-cyan .home-tool-icon,
.home-discover-icon.tone-cyan,
.home-category-tools-icon.tone-cyan{background:#eaf8fb;color:#3598b0}

.tone-green .home-category-icon,
.home-tool-card.tone-green .home-tool-icon,
.home-discover-icon.tone-green,
.home-category-tools-icon.tone-green{background:#eef9ee;color:#519662}

.tone-orange .home-category-icon,
.home-tool-card.tone-orange .home-tool-icon,
.home-discover-icon.tone-orange,
.home-category-tools-icon.tone-orange{background:#fff3e6;color:#dc8b35}

.tone-yellow .home-category-icon,
.home-tool-card.tone-yellow .home-tool-icon,
.home-discover-icon.tone-yellow,
.home-category-tools-icon.tone-yellow{background:#fff8dc;color:#c79621}

/* RECOMMENDED */
.home-tool-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
}

.home-tool-card{
    min-height:190px;
    padding:19px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    color:var(--text);
    text-decoration:none;
    transition:.2s ease;
}

.home-tool-card:hover{
    transform:translateY(-3px);
    border-color:rgba(112,88,230,.24);
    box-shadow:0 15px 34px rgba(53,59,83,.08);
}

.home-tool-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:19px;
}

.home-tool-icon{
    width:42px;
    height:42px;
}

.home-tool-badge{
    padding:5px 8px;
    border-radius:999px;
    background:#f2efff;
    color:#7157e7;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.home-tool-card > strong{
    display:block;
    font-size:16px;
    letter-spacing:-.025em;
}

.home-tool-card > p{
    min-height:40px;
    margin:8px 0 17px;
    overflow:hidden;
    color:var(--muted);
    font-size:12px;
    line-height:1.65;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.home-tool-go{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#9297a2;
    font-size:10px;
}

.home-tool-go i{
    color:#7f8490;
    font-style:normal;
    transition:.2s ease;
}

.home-tool-card:hover .home-tool-go i{
    transform:translateX(3px);
}

/* RECENT */
.home-recent{
    width:min(1180px,calc(100% - 40px));
    margin:42px auto 0;
    padding:22px 24px;
    border:1px solid #e9e7f6;
    border-radius:18px;
    background:linear-gradient(135deg,#fbfaff,#f7fbff);
}

.home-recent-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.home-recent-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--text);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

/* AD */
.home-ad-wrap{
    width:min(1180px,calc(100% - 40px));
    margin:44px auto 0;
}

.home-ad-bottom{
    margin-top:46px;
}

/* DISCOVER */
.home-discover-section{
    padding-top:48px;
}

.home-discover-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
}

.home-discover-card{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 24px;
    gap:14px;
    align-items:center;
    padding:16px 17px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
    color:var(--text);
    text-decoration:none;
    transition:.18s ease;
}

.home-discover-card:hover{
    background:#fcfcff;
    transform:translateX(2px);
}

.home-discover-icon{
    width:45px;
    height:45px;
}

.home-discover-card strong{
    display:block;
    font-size:14px;
}

.home-discover-card p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:11px;
    line-height:1.5;
}

.home-discover-arrow{
    color:#a4a7b1;
    font-style:normal;
}

/* ALL TOOLS */
.home-all-section{
    padding-top:50px;
}

.home-category-tools-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.home-category-tools{
    padding:20px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
}

.home-category-tools-head{
    display:flex;
    gap:12px;
    align-items:center;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
}

.home-category-tools-icon{
    width:43px;
    height:43px;
}

.home-category-tools-head h3{
    margin:0;
    font-size:16px;
}

.home-category-tools-head small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
}

.home-category-tools-list{
    display:grid;
    padding:8px 0;
}

.home-category-tools-list a{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 3px;
    color:#545864;
    font-size:12px;
    text-decoration:none;
}

.home-category-tools-list a:hover{
    color:var(--home-purple);
}

.home-category-tools-list i{
    color:#b0b3bc;
    font-style:normal;
}

.home-category-more{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:5px;
    padding-top:13px;
    border-top:1px solid var(--line);
    color:#747884;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
}

/* ABOUT */
.home-about{
    position:relative;
    width:min(1180px,calc(100% - 40px));
    margin:52px auto 12px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    min-height:310px;
    border:1px solid #e6e8f2;
    border-radius:24px;
    background:linear-gradient(135deg,#f4f2ff,#eef7ff 52%,#effaf7);
}

.home-about-visual{
    position:relative;
    min-height:310px;
}

.home-about-mark{
    position:absolute;
    z-index:2;
    top:50%;
    left:50%;
    display:flex;
    width:112px;
    height:112px;
    align-items:center;
    justify-content:center;
    border-radius:31px;
    background:#fff;
    color:#6b56d8;
    font-size:54px;
    font-weight:950;
    box-shadow:0 24px 55px rgba(70,72,114,.15);
    transform:translate(-50%,-50%) rotate(-5deg);
}

.home-about-orb{
    position:absolute;
    border-radius:50%;
}

.orb-a{
    width:190px;
    height:190px;
    top:34px;
    left:25%;
    background:rgba(116,90,232,.13);
}

.orb-b{
    width:170px;
    height:170px;
    right:15%;
    bottom:23px;
    background:rgba(69,180,153,.14);
}

.home-about-content{
    align-self:center;
    padding:45px 65px 45px 20px;
}

.home-about-content h2{
    font-size:35px;
}

.home-about-content p{
    max-width:520px;
    margin:17px 0 22px;
    color:#6e7280;
    font-size:14px;
    line-height:1.85;
}

.home-about-content a{
    display:inline-flex;
    gap:12px;
    align-items:center;
    color:#5f55c8;
    font-size:13px;
    font-weight:850;
    text-decoration:none;
}

/* RESPONSIVE */
@media(max-width:1050px){
    .home-category-grid{
        grid-template-columns:repeat(5,minmax(0,1fr));
    }

    .home-tool-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .home-category-tools-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:760px){
    .home-section{
        width:min(100% - 30px,1180px);
        padding-top:40px;
    }

    .home-hero{
        padding:50px 16px 44px;
    }

    .home-hero h1{
        font-size:43px;
    }

    .home-hero-desc{
        font-size:14px;
    }

    .home-search{
        grid-template-columns:21px 1fr auto;
        padding-left:15px;
    }

    .home-search button{
        padding:0 14px;
    }

    .home-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .home-tool-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .home-discover-grid{
        grid-template-columns:1fr;
    }

    .home-recent,
    .home-ad-wrap,
    .home-about{
        width:min(100% - 30px,1180px);
    }

    .home-about{
        grid-template-columns:1fr;
    }

    .home-about-visual{
        min-height:210px;
    }

    .home-about-content{
        padding:10px 26px 36px;
        text-align:center;
    }

    .home-about-content p{
        margin-left:auto;
        margin-right:auto;
    }
}

@media(max-width:520px){
    .home-hero{
        padding-top:44px;
    }

    .home-eyebrow{
        font-size:9px;
    }

    .home-hero h1{
        font-size:36px;
    }

    .home-mobile-break{
        display:none;
    }

    .home-search{
        grid-template-columns:20px 1fr;
        gap:8px;
        padding:7px 14px;
    }

    .home-search button{
        display:none;
    }

    .home-keywords{
        gap:6px 10px;
    }

    .home-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:9px;
    }

    .home-category-card{
        padding:15px 5px 13px;
    }

    .home-category-icon{
        width:41px;
        height:41px;
    }

    .home-tool-grid{
        grid-template-columns:1fr;
    }

    .home-tool-card{
        min-height:0;
    }

    .home-category-tools-grid{
        grid-template-columns:1fr;
    }

    .home-section-head h2,
    .home-about-content h2{
        font-size:25px;
    }

    .home-about-content h2{
        font-size:30px;
    }
}


/* Recommendation refinement */
.home-recommend-section{padding-top:44px}
.home-recommend-grid .home-tool-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fcfcff 100%)}
.home-recommend-grid .home-tool-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,rgba(113,87,231,.75),rgba(78,135,232,.55),rgba(60,174,148,.5));opacity:.75}
.home-recommend-grid .home-tool-badge{background:#f5f2ff;color:#6e57d7}
.home-recommend-grid .home-tool-card>p{min-height:42px}

/* 공통 최근 이용 기록을 그대로 보여주는 간결한 형태 */
.home-recent{margin-top:38px;padding:20px 22px;background:linear-gradient(135deg,#fbfaff,#f8fbff)}
.home-recent .home-section-head{margin-bottom:14px}
.home-recent-list{gap:9px}
.home-recent-item{padding:10px 13px}
.home-recent-item i{color:#9a9fac;font-style:normal}


/* v5: registry 기반 추천 도구 */
.home-recommend-grid:empty{
    display:none;
}

/* DYNAMIC HERO v6 */
.home-hero{min-height:500px;display:flex;align-items:center;isolation:isolate}
.home-hero-inner{width:100%;will-change:transform;transition:transform .6s ease}
.home-hero-grid{position:absolute;inset:-25%;z-index:0;pointer-events:none;opacity:.48;background-image:linear-gradient(rgba(114,88,232,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(79,140,247,.035) 1px,transparent 1px);background-size:58px 58px;transform:perspective(900px) rotateX(58deg) translateY(18%);animation:heroGrid 18s linear infinite}
.home-hero-glow{z-index:0;will-change:transform}
.home-hero-glow-a{animation:glowA 12s ease-in-out infinite alternate}
.home-hero-glow-b{animation:glowB 14s ease-in-out infinite alternate}
.home-hero-glow-c{width:220px;height:220px;left:56%;top:3%;background:rgba(79,140,247,.08);animation:glowC 10s ease-in-out infinite alternate}
.home-hero-float{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.58);box-shadow:0 18px 55px rgba(63,72,112,.09);backdrop-filter:blur(10px);border-radius:20px;color:rgba(76,78,103,.55);font-size:11px;font-weight:900;pointer-events:none}
.float-a{width:74px;height:74px;left:10%;top:24%;animation:floatA 8s ease-in-out infinite}
.float-b{width:56px;height:56px;left:21%;bottom:16%;border-radius:50%;font-size:20px;color:rgba(113,87,231,.55);animation:floatB 9.5s ease-in-out infinite}
.float-c{width:70px;height:70px;right:13%;top:21%;border-radius:50%;color:rgba(55,158,140,.58);animation:floatC 10s ease-in-out infinite}
.float-d{width:78px;height:52px;right:21%;bottom:15%;color:rgba(62,142,211,.58);animation:floatD 8.7s ease-in-out infinite}
.home-hero-orbit{position:absolute;z-index:0;border:1px solid rgba(112,88,230,.1);border-radius:50%;pointer-events:none}
.home-hero-orbit:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(112,88,230,.38);box-shadow:0 0 0 7px rgba(112,88,230,.05)}
.orbit-a{width:380px;height:150px;left:4%;top:12%;animation:orbitA 16s linear infinite}.orbit-a:after{right:18%;top:7%}
.orbit-b{width:330px;height:130px;right:4%;bottom:7%;border-color:rgba(68,191,164,.11);animation:orbitB 19s linear infinite reverse}.orbit-b:after{left:17%;bottom:5%;background:rgba(68,191,164,.4)}
.home-hero h1 span{background-size:180% 180%;animation:heroGradient 7s ease-in-out infinite}
@keyframes heroGrid{to{background-position:0 58px,58px 0}}
@keyframes glowA{from{transform:translate(-20px,-8px) scale(.94)}to{transform:translate(55px,28px) scale(1.12)}}
@keyframes glowB{from{transform:translate(20px,12px)}to{transform:translate(-60px,-34px) scale(1.14)}}
@keyframes glowC{from{transform:translate(-30px,12px)}to{transform:translate(42px,42px) scale(1.15)}}
@keyframes floatA{50%{transform:translate(15px,-18px) rotate(7deg)}}@keyframes floatB{50%{transform:translate(-12px,-22px) rotate(10deg)}}@keyframes floatC{50%{transform:translate(-18px,17px) rotate(-7deg)}}@keyframes floatD{50%{transform:translate(14px,19px) rotate(6deg)}}
@keyframes orbitA{to{transform:rotate(360deg)}}@keyframes orbitB{to{transform:rotate(360deg)}}
@keyframes heroGradient{50%{background-position:100% 50%}}
@media(max-width:760px){.home-hero{min-height:430px}.home-hero-float{opacity:.55;transform:scale(.8)}.home-hero-orbit{opacity:.5}}
@media(max-width:520px){.home-hero{min-height:390px}.float-a,.float-d{display:none}.home-hero-orbit{opacity:.3}}
@media(prefers-reduced-motion:reduce){.home-hero *{animation:none!important;transition:none!important}.home-hero-inner{transform:none!important}}
