.guide-hub{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:4px 0 36px;
}

.guide-hub__hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:220px;
    margin:0 0 24px;
    padding:32px;
    border:1px solid #d9e8f5;
    border-radius:18px;
    background:
        radial-gradient(circle at 92% 15%,rgba(105,181,244,.20),transparent 28%),
        linear-gradient(135deg,#f7fbff 0%,#ffffff 58%,#edf7ff 100%);
    box-shadow:0 12px 34px rgba(52,100,145,.08);
}

.guide-hub__eyebrow{
    display:block;
    margin-bottom:6px;
    color:#4688bf;
    font-size:10px;
    font-weight:950;
    letter-spacing:.09em;
}

.guide-hub__hero h1{
    margin:0;
    color:#173f64;
    font-size:27px;
    line-height:1.15;
}

.guide-hub__hero p{
    margin:8px 0 0;
    color:#6f8498;
    font-size:12px;
    line-height:1.6;
}

.guide-hub__hero-icon{
    display:grid;
    place-items:center;
    width:72px;
    height:72px;
    flex:0 0 72px;
    border:1px solid #cfe4f6;
    border-radius:22px;
    background:rgba(255,255,255,.78);
    font-size:34px;
    box-shadow:0 8px 22px rgba(55,116,169,.09);
}

.guide-hub__categories{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:20px;
}

.guide-hub__category{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:9px;
    min-width:0;
    min-height:68px;
    padding:11px 12px;
    border:1px solid #dce8f2;
    border-radius:16px;
    background:#fff;
    color:inherit;
    text-decoration:none;
    box-shadow:0 5px 15px rgba(49,91,128,.04);
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.guide-hub__category:hover{
    transform:translateY(-1px);
    border-color:#b8d9f3;
    box-shadow:0 8px 20px rgba(49,91,128,.08);
}

.guide-hub__category.is-active{
    border-color:#87bfe9;
    background:#f1f8ff;
    box-shadow:0 8px 22px rgba(47,124,185,.11);
}

.guide-hub__category-icon{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:12px;
    background:#f1f6fa;
    font-size:19px;
}

.guide-hub__category.is-active .guide-hub__category-icon{
    background:#dceeff;
}

.guide-hub__category-copy{
    min-width:0;
}

.guide-hub__category-copy strong{
    display:block;
    overflow:hidden;
    color:#31536f;
    font-size:11px;
    font-weight:950;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.guide-hub__category-copy small{
    display:block;
    overflow:hidden;
    margin-top:3px;
    color:#8798a8;
    font-size:8px;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.guide-hub__category>b{
    display:grid;
    place-items:center;
    min-width:25px;
    height:25px;
    padding:0 6px;
    border-radius:999px;
    background:#e7f2fb;
    color:#467ca8;
    font-size:8px;
}

.guide-hub__section{
    margin-top:16px;
    padding:20px;
    border:1px solid #dce7f0;
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 28px rgba(51,91,127,.06);
}

.guide-hub__section.is-compact{
    padding-bottom:16px;
}

.guide-hub__section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.guide-hub__section-head>div>span{
    display:block;
    margin-bottom:3px;
    color:#6b9bc1;
    font-size:9px;
    font-weight:950;
    letter-spacing:.06em;
}

.guide-hub__section-head h2{
    margin:0;
    color:#243f59;
    font-size:18px;
}

.guide-hub__section-head p{
    margin:5px 0 0;
    color:#8796a4;
    font-size:10px;
}

.guide-hub__section-head>a{
    flex:0 0 auto;
    color:#4387bd;
    font-size:9px;
    font-weight:900;
    text-decoration:none;
}

.guide-hub__group-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.guide-hub__group-card{
    overflow:hidden;
    border:1px solid #dce7ef;
    border-radius:16px;
    background:#fbfdff;
}

.guide-hub__group-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:12px;
    border-bottom:1px solid #e5edf3;
    background:linear-gradient(180deg,#ffffff,#f7fbfe);
}

.guide-hub__target-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    overflow:hidden;
    border:1px solid #cee1f0;
    border-radius:13px;
    background:#eaf5ff;
    font-size:20px;
}

.guide-hub__target-icon.is-app{
    width:38px;
    height:38px;
    border-radius:11px;
    background:#fff;
}

.guide-hub__target-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.guide-hub__group-head>div{
    min-width:0;
}

.guide-hub__group-head small{
    display:block;
    margin-bottom:2px;
    color:#7896ad;
    font-size:8px;
    font-weight:900;
}

.guide-hub__group-head h3{
    overflow:hidden;
    margin:0;
    color:#2e526e;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.guide-hub__group-head p{
    margin:3px 0 0;
    color:#94a2ad;
    font-size:8px;
}

.guide-hub__group-head>b{
    padding:5px 7px;
    border-radius:999px;
    background:#eaf3fa;
    color:#5c83a1;
    font-size:8px;
}

.guide-hub__entries{
    display:grid;
    gap:7px;
    padding:10px;
}

.guide-hub__entry{
    overflow:hidden;
    border:1px solid #e0e9ef;
    border-radius:11px;
    background:#fff;
}

.guide-hub__entry>summary{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:8px;
    min-height:43px;
    padding:8px 9px;
    cursor:pointer;
    list-style:none;
}

.guide-hub__entry>summary::-webkit-details-marker{
    display:none;
}

.guide-hub__entry>summary>span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    min-height:22px;
    padding:3px 6px;
    border-radius:999px;
    background:#edf5fb;
    color:#5680a1;
    font-size:7px;
    font-weight:950;
    white-space:nowrap;
}

.guide-hub__entry>summary>strong{
    min-width:0;
    color:#486278;
    font-size:10px;
    line-height:1.4;
}

.guide-hub__entry>summary>b{
    color:#7d93a6;
    font-size:15px;
    transition:transform .18s ease;
}

.guide-hub__entry[open]>summary>b{
    transform:rotate(45deg);
}

.guide-hub__entry-body{
    padding:0 10px 10px;
    border-top:1px solid #edf2f6;
}

.guide-hub__content{
    padding:10px 2px 3px;
    color:#566d81;
    font-size:10px;
    line-height:1.75;
}

.guide-hub__images{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:8px;
    margin-top:8px;
}

.guide-hub__images img{
    display:block;
    width:100%;
    max-height:620px;
    object-fit:contain;
    border:1px solid #e0e7ed;
    border-radius:10px;
    background:#f8fafb;
}

.guide-hub__empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:130px;
    padding:22px;
    border:1px dashed #d6e3ed;
    border-radius:15px;
    background:#f9fbfd;
    text-align:center;
}

.guide-hub__empty>span{
    margin-bottom:7px;
    font-size:25px;
}

.guide-hub__empty>strong{
    color:#60788d;
    font-size:11px;
}

.guide-hub__empty>p{
    max-width:430px;
    margin:6px 0 0;
    color:#91a0ad;
    font-size:9px;
    line-height:1.6;
}

.guide-hub__empty.is-radio{
    min-height:110px;
}

@media(max-width:900px){
    .guide-hub__categories{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .guide-hub__group-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .guide-hub{
        padding-bottom:22px;
    }

    .guide-hub__hero{
        min-height:210px;
        padding:22px;
        border-radius:18px;
    }

    .guide-hub__hero h1{
        font-size:23px;
    }

    .guide-hub__hero p{
        font-size:10px;
    }

    .guide-hub__hero-icon{
        width:56px;
        height:56px;
        flex-basis:56px;
        border-radius:17px;
        font-size:27px;
    }

    .guide-hub__categories{
        gap:8px;
    }

    .guide-hub__category{
        grid-template-columns:auto 1fr;
        min-height:62px;
        padding:9px;
    }

    .guide-hub__category>b{
        display:none;
    }

    .guide-hub__category-icon{
        width:34px;
        height:34px;
        border-radius:10px;
        font-size:17px;
    }

    .guide-hub__category-copy strong{
        font-size:10px;
    }

    .guide-hub__category-copy small{
        font-size:7px;
    }

    .guide-hub__section{
        padding:14px;
        border-radius:18px;
    }

    .guide-hub__section-head{
        align-items:flex-start;
    }

    .guide-hub__section-head h2{
        font-size:16px;
    }

    .guide-hub__section-head p{
        font-size:9px;
    }

    .guide-hub__group-head{
        padding:10px;
    }

    .guide-hub__target-icon{
        width:38px;
        height:38px;
    }

    .guide-hub__target-icon.is-app{
        width:34px;
        height:34px;
    }

    .guide-hub__images{
        grid-template-columns:1fr;
    }
}


/* Radio guide */
.guide-hub__radio-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.guide-hub__radio-card{
    overflow:hidden;
    border:1px solid #dce4f0;
    border-radius:15px;
    background:#fafbff;
}

.guide-hub__radio-entry>summary{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    min-height:62px;
    padding:11px 12px;
    cursor:pointer;
    list-style:none;
}

.guide-hub__radio-entry>summary::-webkit-details-marker{
    display:none;
}

.guide-hub__radio-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border:1px solid #d8dff0;
    border-radius:12px;
    background:#f0f2ff;
    font-size:19px;
}

.guide-hub__radio-title{
    min-width:0;
}

.guide-hub__radio-title small{
    display:block;
    margin-bottom:2px;
    color:#7c84b0;
    font-size:8px;
    font-weight:900;
}

.guide-hub__radio-title strong{
    display:block;
    overflow:hidden;
    color:#495476;
    font-size:11px;
    line-height:1.4;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.guide-hub__radio-entry>summary>b{
    color:#8790ad;
    font-size:15px;
    transition:transform .18s ease;
}

.guide-hub__radio-entry[open]>summary>b{
    transform:rotate(45deg);
}

.guide-hub__radio-body{
    padding:0 11px 11px;
    border-top:1px solid #e6e9f2;
    background:#fff;
}

@media(max-width:700px){
    .guide-hub__radio-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   Mobile guide bottom sheet
   ======================================================= */
.guide-sheet-backdrop,
.guide-sheet{
    display:none;
}

@media(max-width:700px){
    body.guide-sheet-open{
        overflow:hidden;
    }

    .guide-hub__entry>summary,
    .guide-hub__radio-entry>summary{
        -webkit-tap-highlight-color:transparent;
    }

    .guide-hub__entry>summary>b,
    .guide-hub__radio-entry>summary>b{
        transform:rotate(-90deg);
    }

    .guide-hub__entry[open]>summary>b,
    .guide-hub__radio-entry[open]>summary>b{
        transform:rotate(-90deg);
    }

    .guide-hub__entry-body,
    .guide-hub__radio-body{
        display:none;
    }

    .guide-sheet-backdrop{
        position:fixed;
        inset:0;
        z-index:1198;
        display:block;
        background:rgba(18,34,49,.42);
        opacity:0;
        pointer-events:none;
        transition:opacity .22s ease;
        backdrop-filter:blur(2px);
    }

    .guide-sheet-backdrop.is-show{
        opacity:1;
        pointer-events:auto;
    }

    .guide-sheet{
        position:fixed;
        right:0;
        bottom:0;
        left:0;
        z-index:1199;
        display:block;
        max-height:min(86vh,760px);
        padding:8px 14px calc(16px + env(safe-area-inset-bottom));
        border-radius:24px 24px 0 0;
        background:#fff;
        box-shadow:0 -18px 45px rgba(21,48,70,.20);
        transform:translateY(104%);
        transition:transform .25s ease;
        overflow:hidden;
    }

    .guide-sheet.is-show{
        transform:translateY(0);
    }

    .guide-sheet__handle{
        width:42px;
        height:5px;
        margin:2px auto 10px;
        border-radius:999px;
        background:#d8e0e7;
    }

    .guide-sheet__head{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        padding:6px 2px 12px;
        border-bottom:1px solid #e8eef3;
    }

    .guide-sheet__identity{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
    }

    .guide-sheet__icon{
        display:grid;
        place-items:center;
        width:42px;
        height:42px;
        flex:0 0 42px;
        border:1px solid #d5e4f0;
        border-radius:13px;
        background:#f2f8fd;
        font-size:20px;
    }

    .guide-sheet__identity>div{
        min-width:0;
    }

    .guide-sheet__identity small{
        display:block;
        margin-bottom:2px;
        color:#6d8da6;
        font-size:8px;
        font-weight:950;
    }

    .guide-sheet__identity h3{
        margin:0;
        overflow:hidden;
        color:#294d68;
        font-size:15px;
        line-height:1.35;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .guide-sheet__close{
        display:grid;
        place-items:center;
        width:36px;
        height:36px;
        flex:0 0 36px;
        padding:0;
        border:0;
        border-radius:50%;
        background:#f0f4f7;
        color:#6f8291;
        font-size:24px;
        line-height:1;
        cursor:pointer;
    }

    .guide-sheet__body{
        max-height:calc(86vh - 92px);
        padding:14px 2px 4px;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .guide-sheet__body .guide-hub__content{
        padding:0 2px 8px;
        color:#536a7e;
        font-size:11px;
        line-height:1.8;
    }

    .guide-sheet__body .guide-hub__images{
        grid-template-columns:1fr;
        gap:10px;
        margin-top:8px;
    }

    .guide-sheet__body .guide-hub__images img{
        width:100%;
        max-height:none;
        border-radius:12px;
        background:#f7f9fb;
    }
}


/* Existing frontend_heroes: guides Hero */
.guide-hub__hero{
    position:relative;
    overflow:hidden;
}

.guide-hub__hero.has-custom-hero{
    isolation:isolate;
}

.guide-hub__hero-image{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.guide-hub__hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            90deg,
            rgba(248,252,255,.96) 0%,
            rgba(248,252,255,.84) 50%,
            rgba(248,252,255,.36) 100%
        );
    pointer-events:none;
}

.guide-hub__hero.has-custom-hero > div:not(.guide-hub__hero-image),
.guide-hub__hero.has-custom-hero > .guide-hub__hero-icon{
    position:relative;
    z-index:2;
}

@media(max-width:600px){
    .guide-hub__hero-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(248,252,255,.97) 0%,
                rgba(248,252,255,.86) 64%,
                rgba(248,252,255,.48) 100%
            );
    }
}


/* =========================================================
   FINAL · Guide Hero
   발자취 / 공식 채널 공통 Hero 규격과 통일
   ======================================================= */
.guide-hub > .guide-hub__hero.info2-common-hero{
  box-sizing:border-box;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  width:100%;
  max-width:none;
  min-height:220px;
  margin:0 0 24px;
  padding:32px;
  border:1px solid #dfeaf7;
  border-radius:18px;
  overflow:hidden;
  background-color:#dceafa;
  box-shadow:0 10px 26px rgba(30,78,140,.05);
}

.guide-hub > .guide-hub__hero.info2-common-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(12,42,76,.82),
    rgba(24,69,111,.48) 58%,
    rgba(24,69,111,.12)
  );
  pointer-events:none;
}

.guide-hub > .guide-hub__hero.info2-common-hero .guide-hub__hero-image{
  z-index:0;
  object-position:center;
}

.guide-hub > .guide-hub__hero.info2-common-hero .guide-hub__hero-overlay{
  display:none;
}

.guide-hub > .guide-hub__hero.info2-common-hero .info2-common-hero__copy{
  position:relative;
  z-index:2;
  max-width:620px;
  margin:0;
}

.guide-hub > .guide-hub__hero.info2-common-hero .guide-hub__eyebrow{
  display:block;
  margin:0 0 10px;
  color:#dff1ff;
  font-size:11px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.1em;
}

.guide-hub > .guide-hub__hero.info2-common-hero h1{
  margin:0 0 10px;
  color:#fff;
  font-size:32px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
}

.guide-hub > .guide-hub__hero.info2-common-hero p{
  margin:0;
  color:rgba(255,255,255,.9);
  font-size:14px;
  line-height:1.6;
}

.guide-hub > .guide-hub__hero.info2-common-hero .guide-hub__hero-icon{
  display:none;
}

@media (max-width:640px){
  .guide-hub > .guide-hub__hero.info2-common-hero{
    min-height:210px;
    padding:22px;
    border-radius:18px;
  }

  .guide-hub > .guide-hub__hero.info2-common-hero h1{
    font-size:26px;
  }

  .guide-hub > .guide-hub__hero.info2-common-hero p{
    font-size:13px;
  }
}