@charset "utf-8";
/* ==========================================================================
   NBMMALL 리뉴얼 — 디자인 시스템 (크몽 스타일 벤치마킹)
   /home/nbm2013/renew/assets/css/app.css

   Bootstrap / jQuery 없이 동작. CSS Grid + Flexbox + Custom Properties.
   PC / 모바일 한 벌 반응형.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
    /* 브랜드 — 민트/틸 계열 (크몽 톤) */
    --brand:        #00c7ae;
    --brand-dark:   #00a893;
    --brand-darker: #008d7b;
    --brand-light:  #e6f9f6;
    --brand-tint:   #f2fcfa;

    --point:        #ff5b5b;   /* 할인 / 마감임박 */
    --point-soft:   #fff0f0;
    --star:         #ffb400;
    --live:         #ff3b30;

    /* 중립 */
    --gray-900: #16181d;
    --gray-800: #24272e;
    --gray-700: #3d424d;
    --gray-600: #5c6270;
    --gray-500: #868c98;
    --gray-400: #adb3bd;
    --gray-300: #d3d7de;
    --gray-200: #e6e9ee;
    --gray-150: #eef0f4;
    --gray-100: #f4f6f8;
    --gray-050: #fafbfc;
    --white:    #fff;

    --text:     var(--gray-900);
    --text-sub: var(--gray-600);
    --text-dim: var(--gray-500);
    --line:     var(--gray-200);
    --bg:       var(--white);
    --bg-soft:  var(--gray-050);

    --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
            "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

    --sp-1:4px; --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
    --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 3px rgba(22,24,29,.06);
    --shadow:    0 4px 14px rgba(22,24,29,.09);
    --shadow-lg: 0 14px 38px rgba(22,24,29,.14);

    --header-h: 68px;
    --catbar-h: 52px;
    --container: 1256px;

    --ease: cubic-bezier(.2,.8,.3,1);
}

/* --------------------------------------------------------------------------
   2. 리셋
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1,h2,h3,h4,p,figure,ul,ol,dl,dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* hidden 속성은 어떤 display 지정보다 우선한다. (모달 사고 재발 방지) */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

.sr-only {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 가로 스크롤 영역 스크롤바 감추기 */
.noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.noscrollbar::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   3. 레이아웃
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--sp-4);
}
@media (min-width:1024px){ .container { padding-inline: var(--sp-6); } }

.section { padding-block: var(--sp-10); }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-block: var(--sp-6); }

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.section__title {
    font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1.35;
}
.section__title em { font-style: normal; color: var(--brand-dark); }
.section__desc { margin-top: var(--sp-1); font-size: 14px; color: var(--text-sub); }
.section__more {
    font-size: 14px; font-weight: 500; color: var(--text-sub); white-space: nowrap;
}
.section__more:hover { color: var(--brand-dark); }

@media (min-width:768px){
    .section { padding-block: var(--sp-12); }
    .section__title { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   4. 헤더
   -------------------------------------------------------------------------- */
.header {
    position: sticky; top: 0; z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

.header__bar {
    display: flex; align-items: center; gap: var(--sp-3);
    height: var(--header-h);
}

.header__logo {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: 21px; font-weight: 800; letter-spacing: -.04em;
    color: var(--brand-dark); flex-shrink: 0;
}
.header__logo span { color: var(--gray-900); }

/* 검색 — 크몽식 중앙 큰 검색창 */
.search {
    display: none;
    flex: 1; max-width: 520px;
    margin-inline: var(--sp-4);
}
@media (min-width:1024px){ .search { display: block; } }

.search__form {
    display: flex; align-items: center;
    height: 44px; padding-inline: var(--sp-4);
    background: var(--gray-100);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.search__form:focus-within { background: var(--white); border-color: var(--brand); }
.search__form input {
    flex: 1; border: 0; background: none; outline: none; font-size: 14px;
}
.search__form input::placeholder { color: var(--text-dim); }
.search__form button { display: grid; place-items: center; color: var(--gray-600); }
.search__form button:hover { color: var(--brand-dark); }
.search__form svg { width: 20px; height: 20px; }

.header__actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }

.icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--radius-full);
    color: var(--gray-700);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--gray-100); color: var(--brand-dark); }
.icon-btn svg { width: 22px; height: 22px; }

.badge {
    position: absolute; top: 5px; right: 5px;
    min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--point); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}

.header__links { display: none; }
@media (min-width:1024px){
    .header__links {
        display: flex; align-items: center; gap: var(--sp-4);
        margin-left: var(--sp-2); font-size: 13px; color: var(--text-sub);
        white-space: nowrap;
    }
    .header__links a:hover { color: var(--brand-dark); }
    .header__links strong { color: var(--text); }
}

.hamburger { display: inline-flex; }
@media (min-width:1024px){ .hamburger { display: none; } }

/* 카테고리 바 */
.catbar { border-bottom: 1px solid var(--line); background: var(--white); }
.catbar__scroll {
    display: flex; align-items: center; gap: var(--sp-5);
    height: var(--catbar-h);
    overflow-x: auto; white-space: nowrap;
}
.catbar a {
    position: relative;
    font-size: 14px; font-weight: 600; color: var(--gray-700);
    padding-block: var(--sp-3); flex-shrink: 0;
    transition: color .15s var(--ease);
}
.catbar a::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background: var(--brand); transform: scaleX(0);
    transition: transform .2s var(--ease);
}
.catbar a:hover { color: var(--brand-dark); }
.catbar a:hover::after,
.catbar a[aria-current="page"]::after { transform: scaleX(1); }
.catbar a[aria-current="page"] { color: var(--brand-dark); }

/* 모바일 검색 (헤더 아래) */
.msearch { display: block; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
@media (min-width:1024px){ .msearch { display: none; } }
.msearch .search__form { height: 42px; }

/* --------------------------------------------------------------------------
   5. 드로어
   -------------------------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.drawer[data-open="true"] { visibility: visible; }

.drawer__dim {
    position: absolute; inset: 0; background: rgba(22,24,29,.45);
    opacity: 0; transition: opacity .25s var(--ease);
}
.drawer[data-open="true"] .drawer__dim { opacity: 1; }

.drawer__panel {
    position: absolute; top:0; left:0; bottom:0;
    width: min(84vw, 330px); background: var(--white);
    transform: translateX(-100%);
    transition: transform .28s var(--ease);
    display: flex; flex-direction: column; overflow-y: auto;
    overscroll-behavior: contain;
}
.drawer[data-open="true"] .drawer__panel { transform: translateX(0); }

.drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h); padding-inline: var(--sp-4);
    border-bottom: 1px solid var(--line);
}
.drawer__user { padding: var(--sp-5) var(--sp-4); background: var(--brand-light); font-size: 14px; }
.drawer__user strong { font-weight: 700; }

.drawer__nav { padding: var(--sp-2) 0; }
.drawer__nav a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); font-size: 16px; font-weight: 600;
}
.drawer__nav a:hover { background: var(--gray-100); }

.drawer__sub {
    padding: var(--sp-4); border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
    font-size: 13px; color: var(--text-sub);
}

/* --------------------------------------------------------------------------
   6. 버튼
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2); height: 48px; padding-inline: var(--sp-6);
    border-radius: var(--radius); font-size: 15px; font-weight: 700;
    border: 1px solid transparent; text-align: center;
    transition: background .15s var(--ease), border-color .15s var(--ease),
                color .15s var(--ease), transform .08s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }

.btn--dark { background: var(--gray-900); color: #fff; }
.btn--dark:hover { background: var(--gray-800); }

.btn--point { background: var(--point); color: #fff; }
.btn--point:hover { filter: brightness(.94); }

.btn--line { background: var(--white); border-color: var(--gray-300); color: var(--gray-800); }
.btn--line:hover { border-color: var(--brand); color: var(--brand-dark); }

.btn--ghost { color: var(--text-sub); }
.btn--ghost:hover { background: var(--gray-100); }

.btn--sm { height: 38px; padding-inline: var(--sp-4); font-size: 13px; }
.btn--lg { height: 54px; font-size: 16px; }
.btn--block { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
    background: var(--gray-200); border-color: transparent;
    color: var(--gray-500); cursor: not-allowed; pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. 히어로 배너
   -------------------------------------------------------------------------- */
.hero {
    background: linear-gradient(120deg, #00c7ae 0%, #0bb9c4 50%, #24a8d8 100%);
    color: #fff;
}
.hero__inner {
    display: grid; gap: var(--sp-5);
    padding-block: var(--sp-10);
    align-items: center;
}
.hero h1 {
    font-size: clamp(25px, 6vw, 42px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.28;
}
.hero p {
    margin-top: var(--sp-3);
    font-size: clamp(14px, 3.2vw, 17px); color: rgba(255,255,255,.9);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.hero__cta .btn--primary { background: #fff; color: var(--brand-darker); }
.hero__cta .btn--primary:hover { background: rgba(255,255,255,.9); }
.hero__cta .btn--line {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff;
}
.hero__cta .btn--line:hover { background: rgba(255,255,255,.24); color: #fff; }

.hero__stats {
    display: flex; flex-wrap: wrap; gap: var(--sp-6);
    margin-top: var(--sp-8); padding-top: var(--sp-6);
    border-top: 1px solid rgba(255,255,255,.25);
}
.hero__stats div { font-size: 13px; color: rgba(255,255,255,.85); }
.hero__stats b { display: block; font-size: 22px; font-weight: 800; color: #fff; }

@media (min-width:900px){
    .hero__inner { grid-template-columns: 1fr; padding-block: var(--sp-16); }
    .hero__inner > div { max-width: 640px; }
}

/* --------------------------------------------------------------------------
   8. 카테고리 아이콘 그리드
   -------------------------------------------------------------------------- */
.catgrid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
@media (min-width:600px){ .catgrid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width:1024px){ .catgrid { grid-template-columns: repeat(8, 1fr); gap: var(--sp-3); } }

.catgrid a {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-1); border-radius: var(--radius);
    font-size: 13px; font-weight: 600; color: var(--gray-700); text-align: center;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.catgrid a:hover { background: var(--brand-tint); color: var(--brand-dark); }
.catgrid__icon {
    display: grid; place-items: center; width: 52px; height: 52px;
    border-radius: var(--radius-full); background: var(--gray-100); font-size: 22px;
    transition: background .15s var(--ease);
}
.catgrid a:hover .catgrid__icon { background: var(--white); box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------------------
   9. 카드 (상품 / 강의 공통) — 크몽 서비스카드 스타일
   -------------------------------------------------------------------------- */
.card { position: relative; display: block; }

/* 상품 원본이 475x500(거의 정사각)이라 1:1 로 맞춘다. 4:3 이면 상하가 잘린다. */
.card__thumb {
    position: relative; aspect-ratio: 1 / 1;
    border-radius: var(--radius); overflow: hidden; background: var(--gray-100);
}
.card__thumb img {
    width:100%; height:100%; object-fit: cover;
    transition: transform .45s var(--ease);
}
/* 강의 원본은 500x347(가로형)이라 상단 정렬로 제목 영역이 안 잘리게 한다. */
.card--lec .card__thumb { aspect-ratio: 16 / 11; }
.card--lec .card__thumb img { object-position: top; }
.card:hover .card__thumb img { transform: scale(1.06); }

/* 이미지 미등록 플레이스홀더 */
.card__noimg {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    padding: var(--sp-4);
    background: linear-gradient(135deg, var(--brand-light), var(--gray-100));
    color: var(--brand-darker);
    font-size: 14px; font-weight: 700; text-align: center; line-height: 1.4;
    word-break: keep-all;
}

.card__tags { position:absolute; top: var(--sp-2); left: var(--sp-2); display:flex; gap:4px; z-index:1; }

.card__soldout {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(22,24,29,.58); color:#fff; font-weight:700; font-size:15px;
}

.card__body { padding-top: var(--sp-3); }

.card__seller {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: 12px; color: var(--text-sub); margin-bottom: var(--sp-2);
}
.card__avatar {
    width: 22px; height: 22px; border-radius: var(--radius-full);
    background: var(--brand-light); color: var(--brand-dark);
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}

.card__title {
    font-size: 14px; font-weight: 500; color: var(--gray-800); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.9em;
}

.card__rate {
    display: flex; align-items: center; gap: 3px;
    margin-top: var(--sp-2); font-size: 12px; color: var(--text-dim);
}
.card__rate b { color: var(--gray-800); font-weight: 700; }
.card__rate svg { width: 13px; height: 13px; color: var(--star); }

.card__price {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.card__off { font-size: 15px; font-weight: 800; color: var(--point); }
.card__now { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.card__was { font-size: 12px; color: var(--gray-400); text-decoration: line-through; }

.tag {
    display:inline-block; padding: 2px 7px; border-radius: var(--radius-sm);
    font-size: 11px; font-weight: 700; line-height: 1.5;
}
.tag--new   { background: var(--brand-light); color: var(--brand-darker); }
.tag--best  { background: var(--point-soft);  color: var(--point); }
.tag--prime { background: var(--gray-900);    color: #fff; }
.tag--live  { background: var(--live);        color: #fff; }

/* 그리드 */
.grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-3);
}
@media (min-width:600px){  .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1024px){ .grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-8) var(--sp-5); } }

/* --------------------------------------------------------------------------
   10. 가로 스크롤 캐러셀
   -------------------------------------------------------------------------- */
.carousel { position: relative; }

.carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 42vw);
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sp-4);
    padding-bottom: var(--sp-2);
}
.carousel__track > * { scroll-snap-align: start; }

@media (min-width:600px){ .carousel__track { grid-auto-columns: minmax(200px, 30vw); } }
@media (min-width:1024px){
    .carousel__track { grid-auto-columns: calc((100% - var(--sp-5) * 3) / 4); gap: var(--sp-5); }
}

.carousel__nav {
    display: none;
    position: absolute; top: 32%; z-index: 2;
    width: 40px; height: 40px; border-radius: var(--radius-full);
    background: var(--white); box-shadow: var(--shadow);
    color: var(--gray-800);
    place-items: center;
    transition: background .15s var(--ease);
}
.carousel__nav:hover { background: var(--gray-050); }
.carousel__nav svg { width: 20px; height: 20px; }
.carousel__nav[data-dir="prev"] { left: -18px; }
.carousel__nav[data-dir="next"] { right: -18px; }
.carousel__nav:disabled { opacity: 0; pointer-events: none; }

@media (min-width:1024px){ .carousel__nav { display: grid; } }

/* --------------------------------------------------------------------------
   11. 목록 페이지 (필터 / 정렬)
   -------------------------------------------------------------------------- */
.pagehead { padding-block: var(--sp-8) var(--sp-5); }
.pagehead h1 { font-size: 26px; font-weight: 800; letter-spacing: -.035em; }
.pagehead p { margin-top: var(--sp-2); color: var(--text-sub); font-size: 14px; }

.filterbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
    padding-block: var(--sp-4);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--sp-6);
}
.filterbar__count { font-size: 14px; color: var(--text-sub); }
.filterbar__count b { color: var(--text); font-weight: 700; }

.chips { display: flex; gap: var(--sp-2); overflow-x: auto; }
.chip {
    flex-shrink: 0;
    padding: 7px 14px; border-radius: var(--radius-full);
    border: 1px solid var(--gray-300); background: var(--white);
    font-size: 13px; font-weight: 600; color: var(--gray-700);
    transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip[aria-pressed="true"], .chip[aria-current="page"] {
    background: var(--gray-900); border-color: var(--gray-900); color: #fff;
}

/* --------------------------------------------------------------------------
   12. 상세 페이지
   -------------------------------------------------------------------------- */
.detail { display: grid; gap: var(--sp-8); padding-block: var(--sp-6); align-items: start; }
@media (min-width:1024px){
    .detail { grid-template-columns: minmax(0,1fr) 372px; gap: var(--sp-10); padding-block: var(--sp-10); }
}

/* 원본 이미지 최대 크기가 475x500 이라 그 이상으로 늘리면 흐려진다.
   컨테이너를 채우되 이미지는 실제 크기까지만 키우고 중앙에 둔다. */
.detail__gallery {
    display: grid; place-items: center;
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--gray-100); aspect-ratio: 1/1;
}
.detail__gallery img {
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
@media (min-width:1024px){ .detail__gallery { aspect-ratio: 4/3; } }
/* 강의 상세 : 강의 썸네일 비율(500×347) 그대로 칸을 꽉 채운다 (2026-10-08 사용자 요청) */
.detail__gallery--fill, .detail__gallery--soft { aspect-ratio: 500 / 347; }
.detail__gallery--fill { place-items: stretch; }
.detail__gallery--fill img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
/* 예전 이미지(최대 500px) : 늘리면 흐려지므로 원래 크기 그대로, 양옆은 같은 이미지를 흐리게 깔아 채운다 */
.detail__gallery--soft { position: relative; isolation: isolate; }
.detail__gallery--soft::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--g-bg) center / cover no-repeat; filter: blur(28px) saturate(1.1); opacity: .55; }
.detail__gallery--soft img { position: relative; width: auto; height: auto; max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }

.detail__title { margin-top: var(--sp-5); font-size: 22px; font-weight: 700; letter-spacing:-.03em; line-height:1.4; }
@media (min-width:768px){ .detail__title { font-size: 26px; } }

.detail__meta { display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap; margin-top: var(--sp-3); font-size:13px; color: var(--text-sub); }

.detail__desc {
    margin-top: var(--sp-8); padding-top: var(--sp-8);
    border-top: 1px solid var(--line);
    font-size: 15px; line-height: 1.8; color: var(--gray-700);
}
.detail__desc img { margin-inline: auto; border-radius: var(--radius); }

/* 구매 패널 */
.buybox {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: var(--sp-6); background: var(--white); box-shadow: var(--shadow-sm);
}
@media (min-width:1024px){
    .buybox { position: sticky; top: calc(var(--header-h) + var(--catbar-h) + var(--sp-4)); max-height: calc(100vh - var(--header-h) - var(--catbar-h) - var(--sp-8)); overflow-y: auto; }
}
.buybox__price { display:flex; align-items:baseline; gap: var(--sp-2); flex-wrap:wrap; }
.buybox__now { font-size: 28px; font-weight: 800; letter-spacing:-.03em; }
.buybox__was { font-size: 14px; color: var(--gray-400); text-decoration: line-through; }
.buybox__off { font-size: 20px; font-weight: 800; color: var(--point); }

.buybox__row {
    display:flex; justify-content: space-between; gap: var(--sp-4);
    padding-block: var(--sp-2); font-size: 14px; color: var(--text-sub);
}
.buybox__row strong { color: var(--text); font-weight: 600; }

.buybox__total {
    display:flex; justify-content:space-between; align-items:baseline;
    margin-top: var(--sp-4); padding-top: var(--sp-4);
    border-top: 1px solid var(--line); font-size: 14px; font-weight: 700;
}
.buybox__total b { font-size: 22px; letter-spacing: -.02em; }

.buybox__actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }

/* 모바일 하단 고정 구매바 */
.buybar {
    position: fixed; left:0; right:0; bottom:0; z-index: 95;
    display: flex; gap: var(--sp-2); align-items: center;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(22,24,29,.07);
}
@media (min-width:1024px){ .buybar { display: none; } }
.buybar__price { flex-shrink:0; font-size: 17px; font-weight: 800; }
.buybar .btn { flex: 1; }

/* --------------------------------------------------------------------------
   13. 라이브
   -------------------------------------------------------------------------- */
.live-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding: 3px 9px; border-radius: var(--radius-full);
    background: var(--live); color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em;
}
.live-badge::before {
    content:""; width:6px; height:6px; border-radius:50%; background:#fff;
    animation: blink 1.4s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.live-hero {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--gray-900); color: #fff;
    display: grid; grid-template-columns: 100%; place-items: center;
}
/* 16:9 는 최소 높이 — 글자가 크거나(카카오톡 브라우저 글꼴 확대) 화면이 좁아 내용이 더 높으면 카드가 늘어난다 (버튼 잘림 방지, 2026-09-22) */
.live-hero::before { content: ""; grid-area: 1 / 1; display: block; padding-bottom: 56.25%; }
.live-hero__body { grid-area: 1 / 1; align-self: center; position: relative; z-index: 1; text-align: center; padding: var(--sp-6); }
.live-hero h2 { font-size: clamp(19px,4.5vw,28px); font-weight:800; letter-spacing:-.03em; margin-top: var(--sp-3); }
.live-hero p { margin-top: var(--sp-2); color: rgba(255,255,255,.75); font-size:14px; }

.sched { display: grid; gap: var(--sp-3); }
.sched__item {
    display: grid; grid-template-columns: 64px 1fr auto; gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.sched__item:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.sched__time { text-align:center; }
.sched__time b { display:block; font-size:17px; font-weight:800; letter-spacing:-.02em; }
.sched__time span { font-size:11px; color: var(--text-dim); }
.sched__name { font-size:15px; font-weight:600; }
.sched__desc { margin-top:2px; font-size:13px; color: var(--text-sub); }

/* --------------------------------------------------------------------------
   14. 장바구니
   -------------------------------------------------------------------------- */
.cart { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width:1024px){ .cart { grid-template-columns: minmax(0,1fr) 352px; gap: var(--sp-10); } }

.cart-item {
    display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-4);
    padding-block: var(--sp-5); border-bottom: 1px solid var(--line);
}
@media (min-width:768px){
    .cart-item { grid-template-columns: 110px 1fr auto; align-items: center; }
}
.cart-item__thumb { aspect-ratio:1/1; border-radius: var(--radius-sm); overflow:hidden; background: var(--gray-100); }
.cart-item__thumb img { width:100%; height:100%; object-fit: cover; }
.cart-item__name { font-size:15px; font-weight:600; }
.cart-item__opt { margin-top:var(--sp-1); font-size:13px; color: var(--text-sub); }
.cart-item__price { margin-top: var(--sp-2); font-size:16px; font-weight:800; }
.cart-item__side { display:flex; align-items:center; gap: var(--sp-3); margin-top: var(--sp-3); }
@media (min-width:768px){ .cart-item__side { margin-top:0; flex-direction: column; align-items: flex-end; } }

.qty {
    display:inline-flex; align-items:center; height:38px;
    border:1px solid var(--gray-300); border-radius: var(--radius-sm); overflow:hidden;
}
.qty button { width:36px; height:100%; font-size:17px; color: var(--gray-700); }
.qty button:hover:not(:disabled){ background: var(--gray-100); }
.qty button:disabled { color: var(--gray-300); cursor:not-allowed; }
.qty input {
    width:46px; height:100%; border:0; border-inline:1px solid var(--gray-300);
    text-align:center; font-size:14px; font-weight:600; -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.notice {
    display:flex; align-items:flex-start; gap: var(--sp-2);
    margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm); font-size:13px; line-height:1.5;
}
.notice--warn { background:#fff8e6; color:#96620a; }
.notice--err  { background: var(--point-soft); color: var(--point); }
.notice--info { background: var(--brand-light); color: var(--brand-darker); }

.summary {
    border:1px solid var(--line); border-radius: var(--radius-lg);
    padding: var(--sp-6); background: var(--white);
}
@media (min-width:1024px){ .summary { position: sticky; top: calc(var(--header-h) + var(--catbar-h) + var(--sp-4)); } }
.summary__row { display:flex; justify-content:space-between; gap: var(--sp-4); padding-block: var(--sp-2); font-size:14px; color: var(--text-sub); }
.summary__row strong { color: var(--text); font-weight:600; }
.summary__total {
    display:flex; justify-content:space-between; align-items:baseline;
    margin-top: var(--sp-4); padding-top: var(--sp-4);
    border-top:1px solid var(--line); font-size:15px; font-weight:700;
}
.summary__total b { font-size:24px; letter-spacing:-.02em; }

/* --------------------------------------------------------------------------
   15. 빈 상태 / 푸터 / 탭바
   -------------------------------------------------------------------------- */
.empty { padding-block: var(--sp-20); text-align:center; color: var(--text-sub); }
.empty__icon { font-size:44px; margin-bottom: var(--sp-4); }
.empty__title { font-size:17px; font-weight:700; color: var(--text); margin-bottom: var(--sp-2); }

.footer {
    margin-top: var(--sp-16);
    padding-block: var(--sp-10);
    background: var(--gray-100); border-top: 1px solid var(--line);
    color: var(--text-sub); font-size:13px; line-height:1.8;
}
.footer__links {
    display:flex; flex-wrap:wrap; gap: var(--sp-3) var(--sp-5);
    padding-bottom: var(--sp-5); margin-bottom: var(--sp-5);
    border-bottom:1px solid var(--gray-200);
}
.footer__links a { font-weight:600; color: var(--gray-700); }
.footer__links a:hover { color: var(--brand-dark); }
.footer address { font-style: normal; }
.footer strong { color: var(--gray-800); }
.footer__copy { margin-top: var(--sp-5); color: var(--gray-500); }

@media (max-width:767px){ .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }
body.has-buybar .footer { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }

.tabbar {
    position: fixed; left:0; right:0; bottom:0; z-index:90;
    display: grid; grid-template-columns: repeat(5,1fr);
    background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
    border-top:1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width:768px){ .tabbar { display:none; } }
body.has-buybar .tabbar { display: none; }

.tabbar a {
    position: relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; height:58px; font-size:11px; font-weight:600; color: var(--gray-500);
}
.tabbar a[aria-current="page"] { color: var(--brand-dark); }
.tabbar svg { width:21px; height:21px; }
.tabbar .badge { top:5px; right:50%; margin-right:-22px; }

/* --------------------------------------------------------------------------
   15b. 선물하기
   -------------------------------------------------------------------------- */
.btn--kakao { background: #fee500; color: #191919; }
.btn--kakao:hover { background: #f5dc00; }

/* 입력 필드 */
.field { margin-bottom: var(--sp-5); }
.field label { display:block; margin-bottom: var(--sp-2); font-size:14px; font-weight:700; }
.field__opt { font-weight:400; color: var(--text-dim); }
.field input[type="text"], .field textarea {
    width:100%; padding: 12px 14px;
    border:1px solid var(--gray-300); border-radius: var(--radius);
    font-size:15px; background: var(--white);
    transition: border-color .15s var(--ease);
}
.field input:focus, .field textarea:focus { outline:none; border-color: var(--brand); }
.field textarea { resize: vertical; min-height: 96px; line-height:1.6; }
.field__hint { margin-top: var(--sp-1); font-size:12px; color: var(--text-dim); }

/* 선물 폼 */
.gift-form__lec {
    display:flex; gap: var(--sp-4); align-items:center;
    padding: var(--sp-4); margin-bottom: var(--sp-6);
    background: var(--bg-soft); border-radius: var(--radius);
}
.gift-form__thumb { width:96px; flex-shrink:0; aspect-ratio:16/11; border-radius: var(--radius-sm); overflow:hidden; background: var(--gray-100); }
.gift-form__thumb img { width:100%; height:100%; object-fit:cover; }
.gift-form__lecname { font-size:15px; font-weight:700; line-height:1.4; }
.gift-form__lecturer { margin-top:2px; font-size:13px; color: var(--text-sub); }

/* 선물 완료 / 받기 카드 */
.gift-done { max-width: 520px; margin: var(--sp-8) auto var(--sp-16); }
.gift-done__card {
    padding: var(--sp-8) var(--sp-6);
    border:1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--white); box-shadow: var(--shadow);
    text-align:center;
}
.gift-done__icon { font-size:56px; line-height:1; margin-bottom: var(--sp-4); }
.gift-done__title { font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1.35; }
.gift-done__sub { margin-top: var(--sp-2); font-size:14px; color: var(--text-sub); }
.gift-done__lec {
    display:flex; gap: var(--sp-3); align-items:center; text-align:left;
    margin-top: var(--sp-6); padding: var(--sp-3);
    background: var(--bg-soft); border-radius: var(--radius);
}
.gift-done__lec img { width:80px; aspect-ratio:16/11; object-fit:cover; border-radius: var(--radius-sm); flex-shrink:0; }
.gift-done__lecname { font-size:14px; font-weight:700; line-height:1.4; }
.gift-done__meta { margin-top:2px; font-size:12px; color: var(--text-sub); }
.gift-done__msg {
    margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--brand); background: var(--brand-tint);
    font-size:14px; color: var(--gray-700); text-align:left; line-height:1.6;
}
.gift-done__actions { display:grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.gift-done__note { margin-top: var(--sp-4); font-size:12px; color: var(--text-dim); line-height:1.6; }

/* 보낸 선물 목록 */
.gift-list { display:grid; gap: var(--sp-3); }
.gift-list__item {
    display:flex; gap: var(--sp-4); align-items:center; justify-content:space-between;
    padding: var(--sp-4); border:1px solid var(--line); border-radius: var(--radius);
}
.gift-list__lec { font-size:15px; font-weight:600; }
.gift-list__meta { margin-top:2px; font-size:13px; color: var(--text-sub); }
.gift-list__side { display:flex; flex-direction:column; align-items:flex-end; gap: var(--sp-2); flex-shrink:0; }
.tag--ok   { background: var(--brand-light); color: var(--brand-darker); }
.tag--info { background: #e8f1fe; color: #1b64da; }
.tag--warn { background: #fff8e6; color: #96620a; }
.tag--err  { background: var(--point-soft); color: var(--point); }

/* --------------------------------------------------------------------------
   15c. 고객센터 · 게시판
   -------------------------------------------------------------------------- */
.crumb { display:flex; align-items:center; gap: var(--sp-2); padding-top: var(--sp-6); font-size:13px; color: var(--text-dim); }
.crumb a:hover { color: var(--brand-dark); }
.crumb b { color: var(--text); font-weight:600; }

.cs-quick { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); margin-bottom: var(--sp-8); }
@media (min-width:768px){ .cs-quick { grid-template-columns: repeat(4,1fr); } }
.cs-quick__item {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding: var(--sp-5) var(--sp-3);
    border:1px solid var(--line); border-radius: var(--radius-lg);
    text-align:center; transition: all .15s var(--ease);
}
.cs-quick__item:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.cs-quick__icon { font-size:30px; margin-bottom:4px; }
.cs-quick__item strong { font-size:15px; }
.cs-quick__item span:last-child { font-size:12px; color: var(--text-dim); }

.cs-grid { display:grid; gap: var(--sp-8); }
@media (min-width:1024px){ .cs-grid { grid-template-columns: 1fr 1fr; } }
.cs-panel { min-width:0; }
.cs-empty { padding: var(--sp-8) 0; text-align:center; color: var(--text-dim); font-size:14px; }

.cs-list li a {
    display:flex; align-items:center; gap: var(--sp-2);
    padding: var(--sp-3) 0; border-bottom:1px solid var(--line); font-size:14px;
}
.cs-list li:last-child a { border-bottom:0; }
.cs-list__title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-list__date { flex-shrink:0; font-size:12px; color: var(--text-dim); }
.cs-list li a:hover .cs-list__title { color: var(--brand-dark); }

.cs-info {
    display:grid; gap: var(--sp-5); margin-top: var(--sp-10);
    padding: var(--sp-6); background: var(--bg-soft); border-radius: var(--radius-lg);
    font-size:14px;
}
@media (min-width:768px){ .cs-info { grid-template-columns: repeat(3,1fr); } }
.cs-info strong { display:block; margin-bottom:4px; }
.cs-info p { color: var(--text-sub); line-height:1.7; }
.cs-info a:hover { color: var(--brand-dark); }

/* FAQ 아코디언 */
.faq__item { border-bottom:1px solid var(--line); }
.faq__item summary {
    display:flex; align-items:flex-start; gap: var(--sp-3);
    padding: var(--sp-4) 0; font-size:15px; font-weight:600; cursor:pointer; list-style:none;
}
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:"+"; margin-left:auto; font-size:20px; color: var(--text-dim); flex-shrink:0; transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__q { flex-shrink:0; width:24px; height:24px; border-radius:50%; background: var(--brand); color:#fff; font-size:13px; font-weight:800; display:grid; place-items:center; }
.faq__a { padding: 0 0 var(--sp-5) 36px; font-size:14px; line-height:1.8; color: var(--gray-700); }
.faq__a img { max-width:100%; border-radius: var(--radius-sm); }

/* 게시글 목록 */
.post-list { border-top: 2px solid var(--gray-900); }
.post-list__item a {
    display:flex; align-items:center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-1); border-bottom:1px solid var(--line);
    transition: background .1s;
}
.post-list__item a:hover { background: var(--bg-soft); }
.post-list__item.is-notice a { background: var(--brand-tint); }
.post-list__main { flex:1; min-width:0; }
.post-list__title { font-size:15px; font-weight:500; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.post-list__cmt { color: var(--brand-dark); font-size:13px; font-weight:700; }
.post-list__meta { margin-top:3px; font-size:12px; color: var(--text-dim); }
.post-list__arrow { color: var(--gray-400); font-size:20px; flex-shrink:0; }

/* 페이징 */
.paging { display:flex; justify-content:center; align-items:center; gap:4px; margin-top: var(--sp-8); }
.paging__btn { min-width:36px; height:36px; padding-inline:8px; display:grid; place-items:center; border-radius: var(--radius-sm); font-size:14px; font-weight:600; color: var(--text-sub); }
.paging__btn:hover { background: var(--gray-100); color: var(--text); }
.paging__btn[aria-current="page"] { background: var(--gray-900); color:#fff; }
.paging__dots { padding-inline:4px; color: var(--text-dim); }

/* 게시글 보기 */
.post { padding-top: var(--sp-6); }
.post__head { padding-bottom: var(--sp-5); border-bottom:1px solid var(--line); }
.post__title { margin-top: var(--sp-2); font-size:22px; font-weight:700; letter-spacing:-.03em; line-height:1.4; }
@media (min-width:768px){ .post__title { font-size:26px; } }
.post__meta { display:flex; align-items:center; gap:6px; margin-top: var(--sp-3); font-size:13px; color: var(--text-sub); }
.post__body { padding: var(--sp-6) 0; font-size:15px; line-height:1.85; color: var(--gray-800); overflow-wrap:anywhere; }
.post__body img { max-width:100%; height:auto; border-radius: var(--radius-sm); }
.post__body table { max-width:100%; }
.post__files { display:flex; flex-wrap:wrap; gap: var(--sp-2); padding: var(--sp-4) 0; border-top:1px solid var(--line); }
.post__files a { padding:6px 12px; border:1px solid var(--line); border-radius: var(--radius-sm); font-size:13px; }
.post__files a:hover { border-color: var(--brand); color: var(--brand-dark); }

.post__reply { margin-top: var(--sp-4); padding: var(--sp-5); background: var(--brand-tint); border-radius: var(--radius); border-left: 3px solid var(--brand); }
.post__reply-head { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-sub); }
.post__reply .post__body { padding: var(--sp-3) 0 0; }

/* 댓글 */
.comments { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 2px solid var(--gray-900); }
.comments__title { font-size:16px; font-weight:700; margin-bottom: var(--sp-4); }
.comments__title span { color: var(--brand-dark); }
.comment { display:flex; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom:1px solid var(--line); }
.comment__meta { font-size:13px; color: var(--text-sub); }
.comment__body { margin-top:4px; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.comment-form { margin-top: var(--sp-4); }
.comment-form textarea { width:100%; padding:12px; border:1px solid var(--gray-300); border-radius: var(--radius); font-size:14px; resize:vertical; }
.comment-form textarea:focus { outline:none; border-color: var(--brand); }
.comment-form .btn { margin-top: var(--sp-2); }

/* 글쓰기 */
.write-form { max-width:760px; padding-top: var(--sp-4); }
.write-form__actions { display:flex; justify-content:flex-end; gap: var(--sp-2); margin-top: var(--sp-6); }
.check { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.check input { width:18px; height:18px; accent-color: var(--brand); }

/* 게시글 이미지 첨부 (본문 인라인) */
.post__img { margin: var(--sp-4) 0; }
.post__img img { max-width:100%; height:auto; border-radius: var(--radius-sm); display:block; margin-inline:auto; }
.post__img + .post__img { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   15e. 캘린더 (연합강의장)
   -------------------------------------------------------------------------- */
.cal-nav { display:flex; align-items:center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.cal-nav__title { font-size:20px; font-weight:800; letter-spacing:-.02em; min-width:140px; text-align:center; }

.is-sun { color: var(--point) !important; }
.is-sat { color: #1b64da !important; }

/* PC 월간 그리드 */
.cal { display:none; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
@media (min-width:900px){ .cal { display:block; } .cal-list { display:none; } }

.cal__head { display:grid; grid-template-columns: repeat(7,1fr); background: var(--bg-soft); border-bottom:1px solid var(--line); }
.cal__wk { padding: var(--sp-3); text-align:center; font-size:13px; font-weight:700; color: var(--text-sub); }

.cal__grid { display:grid; grid-template-columns: repeat(7,1fr); }
.cal__cell {
    min-height:120px; padding: var(--sp-2);
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; gap:4px;
}
.cal__cell:nth-child(7n) { border-right:0; }
.cal__cell.is-pad { background: var(--gray-050); }
.cal__cell.is-today { background: var(--brand-tint); }
.cal__day { font-size:13px; font-weight:700; margin-bottom:2px; }
.cal__cell.is-today .cal__day { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background: var(--brand); color:#fff !important; }

/* 일정 항목 — 제목을 자르지 않고 전부 보여준다 (기존 캘린더와 동일) */
.cal__ev {
    display:block; padding: 5px 7px; border-radius:5px;
    border-left: 3px solid var(--brand);
    background: var(--brand-tint); color: var(--text);
    font-size:11.5px; line-height:1.4;
    transition: background .12s, transform .12s;
}
.cal__ev:hover { background: var(--brand-light); transform: translateX(1px); }
.cal__ev-head  { display:block; font-size:10.5px; color: var(--text-dim); }
.cal__ev-head b { color: var(--brand-darker); font-weight:800; }
.cal__ev-title { display:block; font-weight:600; margin-top:1px; word-break: keep-all; overflow-wrap: anywhere; }
.cal__ev-tutor { display:block; font-size:10.5px; color: var(--text-sub); margin-top:1px; }

/* 유형별 색 : 모닝스쿨(주황) / 일반(민트) / 리더스쿨(보라) */
.cal__ev--morning { border-left-color:#f59e0b; background:#fffbeb; }
.cal__ev--morning:hover { background:#fef3c7; }
.cal__ev--morning .cal__ev-head b { color:#b45309; }
.cal__ev--leader  { border-left-color:#8b5cf6; background:#f5f3ff; }
.cal__ev--leader:hover  { background:#ede9fe; }
.cal__ev--leader .cal__ev-head b { color:#6d28d9; }
.cal__ev.is-soldout { opacity:.55; }
.cal__ev.is-soldout .cal__ev-title { text-decoration: line-through; }

.sched__item--morning .sched__time b { color:#b45309; }
.sched__item--leader  .sched__time b { color:#6d28d9; }

/* 모바일 리스트 */
.cal-list__day { margin-bottom: var(--sp-6); }
.cal-list__date { display:flex; align-items:baseline; gap:6px; margin-bottom: var(--sp-3); font-size:14px; color: var(--text-sub); }
.cal-list__date b { font-size:22px; font-weight:800; color: var(--text); }
.cal-list__day.is-today .cal-list__date b { color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   15f. 로그인 · 회원가입
   -------------------------------------------------------------------------- */
.auth { max-width: 400px; margin: var(--sp-10) auto var(--sp-16); }
.auth--wide { max-width: 480px; }
.auth__title { font-size:26px; font-weight:800; letter-spacing:-.03em; text-align:center; }
.auth__sub { margin-top: var(--sp-2); text-align:center; font-size:14px; color: var(--text-sub); }
.auth__form { margin-top: var(--sp-8); }
.auth__links { margin-top: var(--sp-5); text-align:center; font-size:14px; color: var(--text-sub); }
.auth__links a:hover { color: var(--brand-dark); }
.auth__links span { margin-inline: 6px; }
.auth__divider { display:flex; align-items:center; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-4); font-size:13px; color: var(--text-dim); }
.auth__divider::before, .auth__divider::after { content:""; flex:1; height:1px; background: var(--line); }

.field.is-error input { border-color: var(--point); }
.field__row { display:flex; align-items:center; gap: var(--sp-2); }
.field__row input { flex:1; }
.field__status { flex-shrink:0; font-size:13px; font-weight:600; min-width:70px; text-align:right; }
.field__status.is-ok  { color: var(--brand-darker); }
.field__status.is-bad { color: var(--point); }

.pw-wrap { position:relative; }
.pw-wrap input { padding-right:44px; }
.pw-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; font-size:16px; opacity:.5; }
.pw-toggle:hover { opacity:1; }

.field input[type="password"], .field input[type="email"], .field input[type="tel"] {
    width:100%; padding: 12px 14px;
    border:1px solid var(--gray-300); border-radius: var(--radius);
    font-size:15px; background: var(--white);
    transition: border-color .15s var(--ease);
}
.field input[type="password"]:focus, .field input[type="email"]:focus, .field input[type="tel"]:focus { outline:none; border-color: var(--brand); }

.auth__agree { display:grid; gap: var(--sp-3); padding: var(--sp-4); margin: var(--sp-2) 0 var(--sp-6); background: var(--bg-soft); border-radius: var(--radius); }
.auth__agree.is-error { outline: 1px solid var(--point); }
.check--all { padding-bottom: var(--sp-3); border-bottom:1px solid var(--line); }
.auth__agree .check a { text-decoration:underline; }

/* --------------------------------------------------------------------------
   15d. 마이페이지
   -------------------------------------------------------------------------- */
.my-profile {
    display:flex; align-items:center; gap: var(--sp-4);
    padding: var(--sp-6); margin-top: var(--sp-6);
    background: linear-gradient(135deg, var(--brand-light), var(--brand-tint));
    border-radius: var(--radius-lg);
}
.my-profile__avatar { width:56px; height:56px; border-radius:50%; background: var(--brand); color:#fff; font-size:22px; font-weight:800; display:grid; place-items:center; flex-shrink:0; }
.my-profile__body { flex:1; min-width:0; }
.my-profile__name { font-size:18px; font-weight:800; letter-spacing:-.02em; }
.my-profile__sub { margin-top:4px; font-size:13px; color: var(--text-sub); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.my-stats { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-8); }
@media (min-width:768px){ .my-stats { grid-template-columns: repeat(4,1fr); } }
.my-stat {
    padding: var(--sp-4); border:1px solid var(--line); border-radius: var(--radius);
    transition: all .15s var(--ease);
}
.my-stat:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.my-stat__label { display:block; font-size:12px; color: var(--text-sub); }
.my-stat__val { display:block; margin-top:4px; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.my-stat__val small { font-size:13px; font-weight:600; color: var(--text-sub); margin-left:2px; }

.my-list li a { display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom:1px solid var(--line); }
.my-list li:last-child a { border-bottom:0; }
.my-list__thumb { width:56px; height:56px; object-fit:cover; border-radius: var(--radius-sm); background: var(--gray-100); flex-shrink:0; }
.my-list__thumb--wide { width:80px; height:56px; }
.my-list__body { flex:1; min-width:0; }
.my-list__title { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.my-list__meta { margin-top:2px; font-size:12px; color: var(--text-dim); }

.my-menu { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-2); }
@media (min-width:600px){ .my-menu { grid-template-columns: repeat(3,1fr); } }
@media (min-width:1024px){ .my-menu { grid-template-columns: repeat(4,1fr); } }
.my-menu a { padding: var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius: var(--radius); font-size:14px; font-weight:600; transition: all .15s; }
.my-menu a:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }

/* 주문 */
.order-list { display:grid; gap: var(--sp-3); }
.order-card { display:block; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; transition: all .15s var(--ease); }
.order-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.order-card__head { display:flex; justify-content:space-between; align-items:center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--bg-soft); font-size:12px; color: var(--text-sub); }
.order-card__body { display:flex; gap: var(--sp-4); align-items:center; padding: var(--sp-4); }
.order-card__thumb { width:64px; height:64px; object-fit:cover; border-radius: var(--radius-sm); background: var(--gray-100); flex-shrink:0; }
.order-card__name { font-size:15px; font-weight:600; }
.order-card__meta { margin-top:3px; font-size:13px; color: var(--text-sub); }

.order-sec { margin-bottom: var(--sp-8); }
.order-sec__title { font-size:16px; font-weight:700; padding-bottom: var(--sp-3); border-bottom: 2px solid var(--gray-900); margin-bottom: var(--sp-2); }
.dl { display:grid; grid-template-columns: 90px 1fr; gap: var(--sp-2) var(--sp-4); font-size:14px; }
.dl dt { color: var(--text-sub); }
.dl dd { color: var(--text); }

/* 진행 단계 */
.steps { display:flex; justify-content:space-between; position:relative; margin: var(--sp-4) 0 var(--sp-8); padding: 0 var(--sp-2); }
.steps::before { content:""; position:absolute; left:12%; right:12%; top:9px; height:2px; background: var(--gray-200); }
.steps__item { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; font-size:12px; color: var(--text-dim); }
.steps__dot { width:20px; height:20px; border-radius:50%; background: var(--white); border:2px solid var(--gray-300); z-index:1; }
.steps__item.is-done .steps__dot { background: var(--brand); border-color: var(--brand); }
.steps__item.is-done { color: var(--text-sub); }
.steps__item.is-current .steps__dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-light); }
.steps__item.is-current { color: var(--brand-darker); font-weight:700; }
@media (max-width:480px){ .steps__label { font-size:11px; } }

/* --------------------------------------------------------------------------
   15h. 모바일 고정 서브내비 (크몽 스타일)
   -------------------------------------------------------------------------- */
/* 모바일 : 스크롤하면 사이트 헤더는 위로 사라지고, 이 바가 화면 상단에 고정된다.
   PC     : 헤더가 sticky 이므로 헤더 바로 아래에 붙는다. */
.subnav { position: sticky; top: 0; z-index: 95; background: var(--white); }
.subnav__tabs { border-bottom: 1px solid var(--line); }
.subnav__row { display:flex; align-items:stretch; }
.subnav__row .subnav__scroll { flex:1; min-width:0; }

/* 펼침 버튼 — 탭 줄 오른쪽 끝, 왼쪽에 흐림 효과로 탭이 더 있음을 암시 */
.subnav__more {
    flex-shrink:0; width:44px; display:grid; place-items:center;
    color: var(--gray-600); position:relative;
    transition: color .15s;
}
.subnav__more::before { content:""; position:absolute; left:-20px; top:0; bottom:0; width:20px; background: linear-gradient(90deg, transparent, var(--white)); pointer-events:none; }
.subnav__more svg { width:20px; height:20px; transition: transform .2s var(--ease); }
.subnav__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.subnav__more[aria-expanded="true"] { color: var(--brand-dark); }

/* 펼침 패널 — 전체 카테고리 그리드 */
.subnav__panel { border-bottom:1px solid var(--line); background: var(--white); box-shadow: 0 8px 20px rgba(22,24,29,.08); }
.subnav__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; padding: var(--sp-4) 0; }
@media (min-width:600px){ .subnav__grid { grid-template-columns: repeat(5,1fr); } }
.subnav__grid-item {
    padding: 10px 8px; border-radius: var(--radius-sm);
    background: var(--gray-100); font-size:13px; font-weight:600; text-align:center;
    color: var(--gray-700); transition: all .12s;
}
.subnav__grid-item:hover { background: var(--brand-light); color: var(--brand-darker); }
.subnav__grid-item[aria-current="page"] { background: var(--gray-900); color:#fff; }
.subnav__tabs--sub { background: var(--bg-soft); }
.subnav__scroll { display:flex; gap: var(--sp-5); overflow-x:auto; white-space:nowrap; scroll-snap-type:x proximity; }
.subnav__tab {
    position:relative; flex-shrink:0; padding: 13px 2px;
    font-size:15px; font-weight:600; color: var(--gray-600);
    scroll-snap-align:start; transition: color .15s;
}
.subnav__tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--gray-900); transform:scaleX(0); transition: transform .2s var(--ease); }
.subnav__tab[aria-current="page"] { color: var(--gray-900); }
.subnav__tab[aria-current="page"]::after { transform:scaleX(1); }
.subnav__tab--sm { padding: 9px 2px; font-size:13px; }

/* 모바일 : 사이트 헤더가 스크롤에 따라 숨는다 (JS 가 is-hidden 토글) */
@media (max-width:1023px){
    .header { transition: transform .25s var(--ease); }
    body.has-subnav .header.is-hidden { transform: translateY(-100%); }
    /* 헤더가 보일 땐 헤더 아래, 숨으면 화면 맨 위. (JS 가 body.header-hidden 토글) */
    body.has-subnav .subnav { top: var(--header-h); transition: top .25s var(--ease); }
    body.has-subnav.header-hidden .subnav { top: 0; }
}
/* PC : 헤더(2단) 아래에 붙는다. 제목은 pagehead 가 담당하므로 바는 숨기고 탭만. */
@media (min-width:1024px){
    .subnav { top: calc(var(--header-h) + var(--catbar-h)); }
}

/* --------------------------------------------------------------------------
   15g. 모달
   -------------------------------------------------------------------------- */
.card__sub { font-size:13px; font-weight:700; color: var(--brand-darker); }

.modal { position:fixed; inset:0; z-index:250; display:grid; place-items:center; padding: var(--sp-4); }
/* display:grid 가 브라우저 기본 [hidden]{display:none} 을 덮어써서 투명한 모달이 화면 전체 클릭을 막았다. 반드시 hidden 우선. */
.modal[hidden] { display:none !important; }
.modal__dim { position:absolute; inset:0; background: rgba(22,24,29,.5); opacity:0; transition: opacity .2s var(--ease); }
.modal__panel {
    position:relative; width:100%; max-width:400px;
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
    background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    text-align:center;
    opacity:0; transform: translateY(16px) scale(.98);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.modal.is-open .modal__dim { opacity:1; }
.modal.is-open .modal__panel { opacity:1; transform: none; }
.modal__close { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; color: var(--gray-500); display:grid; place-items:center; }
.modal__close:hover { background: var(--gray-100); color: var(--text); }
.modal__close svg { width:20px; height:20px; }
.modal__icon { font-size:48px; line-height:1; margin-bottom: var(--sp-4); }
.modal__title { font-size:20px; font-weight:800; letter-spacing:-.03em; line-height:1.35; }
.modal__desc { margin-top: var(--sp-3); font-size:14px; line-height:1.7; color: var(--text-sub); }
.modal__actions { display:grid; gap: var(--sp-2); margin-top: var(--sp-6); }

@media (max-width:480px){
    .modal { align-items:end; padding:0; }
    .modal__panel { max-width:none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); transform: translateY(40px); }
}

/* --------------------------------------------------------------------------
   16. 페이지 전환 (SPA)
   -------------------------------------------------------------------------- */
/* 본문 교체 시 페이드 — 헤더/푸터는 그대로라 깜빡임이 없다 */
#main {
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}
#main.is-leaving  { opacity: 0; transform: translateY(4px); }
#main.is-entering { opacity: 0; transform: translateY(6px); transition: none; }

/* 상단 로딩 바 */
html::before {
    content: "";
    position: fixed; top: 0; left: 0; z-index: 999;
    height: 3px; width: 0;
    background: linear-gradient(90deg, var(--brand), #24a8d8);
    opacity: 0;
    transition: width .3s var(--ease), opacity .2s var(--ease);
}
html.is-loading::before {
    width: 80%; opacity: 1;
    transition: width 4s cubic-bezier(.1,.6,.2,1), opacity .1s;
}

/* --------------------------------------------------------------------------
   17. 토스트
   -------------------------------------------------------------------------- */
.toast-wrap {
    position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 300;
    display: flex; flex-direction: column; gap: var(--sp-2);
    width: min(92vw, 420px);
    pointer-events: none;
}
@media (min-width:768px){ .toast-wrap { bottom: var(--sp-8); } }

.toast {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius);
    background: var(--gray-900); color: #fff;
    font-size: 14px; font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(12px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    pointer-events: auto;
}
.toast.is-show { opacity: 1; transform: translateY(0); }
.toast--ok  { background: var(--brand-darker); }
.toast--err { background: var(--point); }

.toast__action {
    flex-shrink: 0; padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.18); color: #fff;
    font-size: 13px; white-space: nowrap;
}
.toast__action:hover { background: rgba(255,255,255,.28); }

/* 장바구니 뱃지 튀는 효과 */
.badge.is-bump { animation: bump .35s var(--ease); }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }

/* 장바구니 항목 삭제 중 */
.cart-item.is-removing { opacity: .35; pointer-events: none; transition: opacity .2s; }

/* --------------------------------------------------------------------------
   18. 모션 최소화
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* 정액권 안내 배너 (강의 목록) */
.sub-banner {
    display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); flex-wrap:wrap;
    padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-4);
    background: linear-gradient(120deg, var(--brand-light), var(--brand-tint));
    border-radius: var(--radius-lg);
}
.sub-banner__title { font-size:17px; font-weight:800; letter-spacing:-.02em; }
.sub-banner__desc { margin-top:2px; font-size:13px; color: var(--text-sub); }
.card__date { margin-left:auto; font-size:12px; color: var(--text-dim); }
.chip--sm { padding: 5px 11px; font-size: 12px; }
.chips--sub { padding-left: 4px; border-left: 2px solid var(--brand-light); }

/* 캘린더 — 예매중(일반강의)만 클릭, 나머지는 안내 전용 */
.cal__ev:not(.is-ticket) { cursor: default; }
.cal__ev:not(.is-ticket):hover { transform: none; }
.cal__ev--twojob   { border-left-color:#0ea5e9; background:#f0f9ff; }
.cal__ev--external { border-left-color:#64748b; background:#f8fafc; }
.sched__item:not([href]) { cursor: default; }
.sched__item:not([href]):hover { border-color: var(--line); box-shadow: none; }

/* 캘린더 상태 뱃지 · 지난 강의 */
.cal__ev-badge { display:inline-block; margin-left:4px; padding:0 5px; border-radius:3px; font-style:normal; font-size:9.5px; font-weight:800; vertical-align:1px; }
.cal__ev-badge--open    { background: var(--brand); color:#fff; }
.cal__ev-badge--soldout { background: var(--point); color:#fff; }
.cal__ev-badge--soon    { background:#fff3cd; color:#8a5a00; }
.cal__ev-badge--end     { background: var(--gray-200); color: var(--text-dim); }
.cal__ev.is-past { opacity:.7; border-left-color: var(--gray-300); background: var(--gray-050); }
.sched__item.is-past { opacity:.7; }

/* 캘린더 공휴일 — 날짜는 빨강(is-sun 재사용), 이름을 작게 표기 */
.cal__cell.is-holiday .cal__day { color: var(--point); }
.cal__holiday { display:block; font-size:10px; font-weight:700; color: var(--point); margin:-2px 0 2px; line-height:1.3; }


/* 장바구니 옵션 표기 */
.cart-item__opts { margin-top:4px; font-size:12.5px; color: var(--text-sub); line-height:1.6; }
.cart-item__opts li::before { content:"· "; color: var(--gray-400); }

/* ==========================================================================
   상품 옵션 (상세)
   ========================================================================== */
/* select 옵션 묶음 — 라벨 | 컨트롤 2열, 연한 배경 박스 */
.optbox {
    margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-4);
    background: var(--bg-soft); border-radius: var(--radius);
}
.opt { display:flex; align-items:center; gap: var(--sp-3); padding: 10px 0; }
.optbox .opt + .opt { border-top:1px solid var(--line); }
.opt__label { flex:0 0 88px; font-size:13px; font-weight:700; color: var(--gray-700); line-height:1.35; }
.opt__label em { font-style:normal; color: var(--point); margin-left:2px; }
.opt__ctrl { flex:1; min-width:0; }

/* 폼 컨트롤 공통 디자인 */
.opt__select, .opt__input {
    width:100%; height:42px; padding: 0 12px;
    border:1.5px solid var(--gray-300); border-radius: var(--radius-sm);
    font-size:14px; color: var(--text); background: var(--white);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.opt__select:hover, .opt__input:hover { border-color: var(--gray-400); }
.opt__select:focus, .opt__input:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.opt__select {
    appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position: right 12px center; background-size:18px;
}
.opt__select:invalid { color: var(--text-dim); }        /* "선택" 상태는 흐리게 */
.opt__select option { color: var(--text); }
.opt__input::placeholder { color: var(--text-dim); }

/* 기입형 접이식 패널 */
.optfold { margin-top: var(--sp-3); border:1.5px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.optfold__head {
    display:flex; align-items:center; gap: var(--sp-2);
    padding: 12px var(--sp-4); background: var(--white);
    font-size:14px; font-weight:700; cursor:pointer; list-style:none; user-select:none;
}
.optfold__head::-webkit-details-marker { display:none; }
.optfold__head small { font-weight:500; color: var(--text-dim); margin-left:4px; }
.optfold__state { margin-left:auto; font-size:12px; font-weight:600; color: var(--brand-darker); }
.optfold__head svg { width:18px; height:18px; color: var(--gray-500); transition: transform .2s var(--ease); flex-shrink:0; }
.optfold[open] .optfold__head { border-bottom:1.5px solid var(--line); background: var(--bg-soft); }
.optfold[open] .optfold__head svg { transform: rotate(180deg); }
.optfold__body { padding: 4px var(--sp-4) 8px; }
.opt--inline { padding: 7px 0; }
.opt--inline .opt__label { flex-basis:88px; font-weight:600; }
.opt--inline .opt__input { height:38px; font-size:13.5px; }

/* 모바일 : 라벨 위, 컨트롤 아래 */
@media (max-width:480px){
    .opt { flex-direction:column; align-items:stretch; gap:6px; }
    .opt__label { flex-basis:auto; }
}

/* ==========================================================================
   스크롤바 — 얇고 둥근 회색, 호버 시 진해짐. 트랙은 투명.
   (Chrome/Edge/Safari : ::-webkit-scrollbar / Firefox : scrollbar-width·color)
   ========================================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--gray-300); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;   /* 트랙과 살짝 띄운 얇은 막대 */
}
*::-webkit-scrollbar-thumb:hover { background: var(--gray-500); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* 구매박스처럼 내부 스크롤이 생기는 패널은 더 얇게, 스크롤할 때만 보이게 */
.buybox::-webkit-scrollbar, .summary::-webkit-scrollbar, .drawer__panel::-webkit-scrollbar { width: 5px; }
.buybox, .summary, .drawer__panel { scrollbar-color: transparent transparent; }
.buybox:hover, .summary:hover, .drawer__panel:hover { scrollbar-color: var(--gray-300) transparent; }
.buybox::-webkit-scrollbar-thumb, .summary::-webkit-scrollbar-thumb, .drawer__panel::-webkit-scrollbar-thumb { background: transparent; }
.buybox:hover::-webkit-scrollbar-thumb, .summary:hover::-webkit-scrollbar-thumb, .drawer__panel:hover::-webkit-scrollbar-thumb { background: var(--gray-300); background-clip: padding-box; }

/* ==========================================================================
   상세 본문·게시글 본문 넘침 방지
   관리자 편집기로 넣은 긴 URL·고정폭 표·이미지가 모바일 화면을 밀어내지 않도록.
   ========================================================================== */
.detail__desc, .post__body, .faq__a {
    overflow-wrap: anywhere;            /* 공백 없는 긴 URL 도 끊는다 */
    word-break: break-word;
    max-width: 100%;
    overflow-x: hidden;
}
.detail__desc img, .post__body img, .faq__a img,
.detail__desc iframe, .post__body iframe, .faq__a iframe,
.detail__desc video, .post__body video {
    max-width: 100% !important; height: auto !important;
}
/* 편집기가 박아둔 고정폭 표·div 는 폭을 풀고 가로 스크롤로 처리 */
.detail__desc table, .post__body table { max-width: 100%; display: block; overflow-x: auto; width: auto !important; }
.detail__desc div, .post__body div, .detail__desc p, .post__body p { max-width: 100%; width: auto !important; }
/* 링크 텍스트는 확실히 끊기게 */
.detail__desc a, .post__body a { overflow-wrap: anywhere; }

/* 상세·구매박스 그리드 셀이 내용에 밀려 넓어지지 않도록 */
.detail > * { min-width: 0; }

/* ==========================================================================
   이용권 (pass/)
   ========================================================================== */
.plans { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.plan {
    position:relative; display:flex; flex-direction:column; gap:4px;
    padding: var(--sp-6) var(--sp-5) var(--sp-5); cursor:pointer;
    background: var(--white); border:2px solid var(--line); border-radius: var(--radius-lg);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.plan:hover { border-color: var(--gray-400); transform: translateY(-2px); }
.plan__radio { position:absolute; opacity:0; width:0; height:0; }
.plan:has(.plan__radio:checked) { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-light); }
.plan:has(.plan__radio:focus-visible) { outline:2px solid var(--brand); outline-offset:2px; }
.plan__badge {
    position:absolute; top:-12px; left: var(--sp-5);
    padding: 3px 10px; border-radius:999px; background: var(--gray-900); color:#fff; font-size:12px; font-weight:800;
}
.plan__months { font-size:15px; font-weight:700; color: var(--text-sub); }
.plan__price { font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.2; }
.plan__price small { font-size:15px; font-weight:600; margin-left:1px; }
.plan__per { font-size:13px; color: var(--text-sub); }
.plan__per b { color: var(--point); }
.plan__name { margin-top: var(--sp-2); font-size:12px; color: var(--text-dim); }
.plan__check {
    position:absolute; top: var(--sp-4); right: var(--sp-4);
    width:24px; height:24px; border-radius:50%; border:2px solid var(--gray-300); background: var(--white);
    display:grid; place-items:center; color:#fff; transition: all .15s var(--ease);
}
.plan__check svg { width:14px; height:14px; opacity:0; }
.plan:has(.plan__radio:checked) .plan__check { background: var(--brand); border-color: var(--brand); }
.plan:has(.plan__radio:checked) .plan__check svg { opacity:1; }

.pass__grid { display:grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width:900px){ .pass__grid { grid-template-columns: 1.3fr 1fr; align-items:start; } .pass__pay { position:sticky; top: 90px; } }
.pass__box { padding: var(--sp-6); background: var(--bg-soft); border-radius: var(--radius-lg); }
.pass__h { font-size:17px; font-weight:800; letter-spacing:-.02em; margin-bottom: var(--sp-4); }
.pass__list { display:flex; flex-direction:column; gap: var(--sp-4); }
.pass__list li { display:flex; gap: var(--sp-3); align-items:flex-start; }
.pass__list li > span { flex-shrink:0; width:40px; height:40px; border-radius: var(--radius); background: var(--white); display:grid; place-items:center; font-size:20px; }
.pass__list b { display:block; font-size:15px; }
.pass__list small { display:block; margin-top:2px; font-size:13px; color: var(--text-sub); line-height:1.5; }
.pass__pay { background: var(--white); border:1.5px solid var(--line); }
.pass__methods { display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-2); }
.pass__method { position:relative; cursor:pointer; }
.pass__method input { position:absolute; opacity:0; width:0; height:0; }
.pass__method span {
    display:flex; justify-content:center; align-items:center; height:46px;
    border:1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size:14px; font-weight:600; transition: all .15s var(--ease);
}
.pass__method:has(input:checked) span { border-color: var(--brand); background: var(--brand-light); color: var(--brand-darker); }
.pass__sum { display:flex; justify-content:space-between; align-items:baseline; margin: var(--sp-5) 0 var(--sp-3); padding-top: var(--sp-4); border-top:1px solid var(--line); font-size:14px; }
.pass__sum b { font-size:24px; font-weight:800; letter-spacing:-.02em; color: var(--brand-darker); }
.pass__note { margin: var(--sp-3) 0 var(--sp-4); font-size:12.5px; line-height:1.8; color: var(--text-sub); }
.pass__faq { margin-top: var(--sp-10); border-top:2px solid var(--gray-900); padding-top: var(--sp-4); }

/* ==========================================================================
   주문 · 결제 (order/)
   ========================================================================== */
.order-info { display:grid; gap: var(--sp-2); font-size:14px; }
.order-info > div { display:flex; gap: var(--sp-4); }
.order-info dt { flex:0 0 72px; color: var(--text-dim); }
.order-info dd { font-weight:600; }
.addr-quick { margin-bottom: var(--sp-4); }
.summary__name { font-size:15px; font-weight:700; padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); border-bottom:1px solid var(--line); }

/* 완료 · 실패 화면 */
.done { max-width:560px; margin: 0 auto; padding-block: var(--sp-8) var(--sp-12); text-align:center; }
.done__state { padding-bottom: var(--sp-6); }
.done__icon { width:72px; height:72px; margin: 0 auto var(--sp-5); border-radius:50%; display:grid; place-items:center; font-size:34px; font-weight:800; }
.done__icon--ok   { background: var(--brand); color:#fff; }
.done__icon--wait { background: #fff4d6; }
.done__icon--err  { background: var(--point-soft); color: var(--point); }
.done__spinner { width:44px; height:44px; margin: 0 auto var(--sp-5); border-radius:50%; border:4px solid var(--gray-200); border-top-color: var(--brand); animation: done-spin .8s linear infinite; }
@keyframes done-spin { to { transform: rotate(360deg); } }
.done__title { font-size:24px; font-weight:800; letter-spacing:-.03em; }
.done__desc { margin-top: var(--sp-2); font-size:14px; color: var(--text-sub); line-height:1.7; }
.done__warn { margin-top: var(--sp-3); font-size:13px; color: var(--point); line-height:1.6; }
.done__box { text-align:left; padding: var(--sp-5) var(--sp-6); background: var(--bg-soft); border-radius: var(--radius-lg); }
.done__box .summary__row strong { text-align:right; }
.done__actions { display:flex; flex-direction:column; gap: var(--sp-2); margin-top: var(--sp-6); }
@media (min-width:560px){ .done__actions { flex-direction:row; justify-content:center; } .done__actions .btn { min-width:200px; } }
.vbank { margin: var(--sp-5) auto 0; max-width:420px; text-align:left; border:1.5px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
.vbank > div { display:flex; justify-content:space-between; gap: var(--sp-4); padding: 12px var(--sp-5); font-size:14px; }
.vbank > div + div { border-top:1px solid var(--line); }
.vbank dt { color: var(--text-dim); flex-shrink:0; }
.vbank dd { font-weight:700; text-align:right; word-break:break-all; }

.pass__list li { align-items:center; }
.pass__list li > div { flex:1; min-width:0; }
.pass__go { flex-shrink:0; }

/* ==========================================================================
   회사소개 · 이용안내 · 문서 (home/)
   ========================================================================== */
.co-intro { max-width:820px; font-size:15px; line-height:1.8; color: var(--text-sub); }
.co-intro__lead { font-size:18px; line-height:1.7; color: var(--text); margin-bottom: var(--sp-3); }
.co-stats { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
@media (min-width:768px){ .co-stats { grid-template-columns: repeat(4,1fr); } }
.co-stats > div { padding: var(--sp-4); background: var(--brand-light); border-radius: var(--radius); text-align:center; }
.co-stats b { display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; color: var(--brand-darker); }
.co-stats span { font-size:12.5px; color: var(--text-sub); }
.co-grid { display:grid; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (min-width:900px){ .co-grid { grid-template-columns: 1.2fr 1fr; } }
.co-box { padding: var(--sp-6); background: var(--bg-soft); border-radius: var(--radius-lg); }
.co-h { font-size:18px; font-weight:800; letter-spacing:-.02em; margin-bottom: var(--sp-4); }
.co-dl { display:grid; gap: var(--sp-3); font-size:14px; }
.co-dl > div { display:flex; gap: var(--sp-4); }
.co-dl dt { flex:0 0 110px; color: var(--text-dim); }
.co-dl dd { flex:1; line-height:1.6; }
@media (max-width:480px){ .co-dl > div { flex-direction:column; gap:2px; } }
.co-list { display:grid; gap: var(--sp-2); font-size:14px; }
.co-list li { padding-left:18px; position:relative; line-height:1.5; }
.co-list li::before { content:"✓"; position:absolute; left:0; color: var(--brand-dark); font-weight:800; }
.co-list small { color: var(--text-dim); margin-left:4px; }
.co-sec { margin-top: var(--sp-10); }
.co-cards { display:grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.co-card { padding: var(--sp-5); border:1.5px solid var(--line); border-radius: var(--radius-lg); }
.co-card > span { display:block; font-size:28px; margin-bottom: var(--sp-2); }
.co-card b { display:block; font-size:15px; margin-bottom:4px; }
.co-card p { font-size:13.5px; line-height:1.6; color: var(--text-sub); }
.co-history { border-left:2px solid var(--line); padding-left: var(--sp-6); display:grid; gap: var(--sp-5); }
.co-history > li { position:relative; }
.co-history > li::before { content:""; position:absolute; left: calc(-1 * var(--sp-6) - 7px); top:6px; width:12px; height:12px; border-radius:50%; background: var(--brand); }
.co-history b { display:block; font-size:16px; font-weight:800; margin-bottom:4px; }
.co-history ul { display:grid; gap:4px; font-size:14px; color: var(--text-sub); }
.co-map p { font-size:14px; line-height:1.8; color: var(--text-sub); margin-bottom: var(--sp-2); }

/* 이용안내 */
.guide-tabs { display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.guide-tabs a { padding: 8px 14px; border:1.5px solid var(--line); border-radius:999px; font-size:13.5px; font-weight:600; }
.guide-tabs a:hover { border-color: var(--brand); color: var(--brand-darker); }
.guide { margin-bottom: var(--sp-10); scroll-margin-top: 120px; }
.guide__h { display:flex; align-items:center; gap: var(--sp-3); font-size:18px; font-weight:800; letter-spacing:-.02em; padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom:2px solid var(--gray-900); }
.guide__h span { font-size:14px; color: var(--brand-dark); font-weight:800; }
.guide__list { display:grid; gap: var(--sp-2); font-size:14.5px; line-height:1.7; color: var(--text-sub); }
.guide__list li { padding-left:14px; position:relative; }
.guide__list li::before { content:"·"; position:absolute; left:0; font-weight:800; }
.guide__list a, .guide__note a { color: var(--brand-darker); text-decoration:underline; }
.guide__steps { display:grid; gap: var(--sp-3); counter-reset: step; }
.guide__steps li { position:relative; padding: var(--sp-3) var(--sp-4) var(--sp-3) 52px; background: var(--bg-soft); border-radius: var(--radius); font-size:14px; line-height:1.6; color: var(--text-sub); }
.guide__steps li::before { counter-increment: step; content: counter(step); position:absolute; left: var(--sp-4); top: var(--sp-3); width:26px; height:26px; border-radius:50%; background: var(--brand); color:#fff; font-weight:800; font-size:13px; display:grid; place-items:center; }
.guide__steps b { display:block; color: var(--text); margin-bottom:2px; }
.guide__note { margin-top: var(--sp-4); font-size:13.5px; line-height:1.7; color: var(--text-sub); padding: var(--sp-3) var(--sp-4); background: var(--brand-light); border-radius: var(--radius); }
.pay-grid { display:grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pay-card { padding: var(--sp-4) var(--sp-5); border:1.5px solid var(--line); border-radius: var(--radius); }
.pay-card b { display:block; margin-bottom:4px; }
.pay-card p { font-size:13.5px; line-height:1.6; color: var(--text-sub); }

/* 약관 · 개인정보 (관리자 HTML) */
.doc { max-width:860px; font-size:14px; line-height:1.85; color: var(--gray-700); word-break:keep-all; }
.doc strong, .doc b { color: var(--text); }
.doc table { width:100%; border-collapse:collapse; margin: var(--sp-3) 0; font-size:13px; }
.doc td, .doc th { border:1px solid var(--line); padding:8px 10px; vertical-align:top; }
.doc img { max-width:100%; height:auto; }
.doc p, .doc div { margin-bottom: 6px; }
.doc font { font-size:inherit; }

/* ==========================================================================
   생방송 플레이어 (live/watch.php)
   ========================================================================== */
.watch { display:grid; gap: var(--sp-6); padding-block: var(--sp-4) var(--sp-10); }
@media (min-width:1024px){ .watch { grid-template-columns: minmax(0,1fr) 300px; align-items:start; } }
.watch__main { min-width:0; }
.player { position:relative; background:#000; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:16/9; max-width:100%; }
.player__video { width:100%; height:100%; display:block; background:#000; }
.player__overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-3); background: rgba(10,12,16,.82); color:#fff; text-align:center; padding: var(--sp-4); }
.player__spinner { width:38px; height:38px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:#fff; animation: done-spin .9s linear infinite; }
.player__msg { font-size:16px; font-weight:700; }
.player__sub { font-size:13px; color: rgba(255,255,255,.7); }
.player:fullscreen { border-radius:0; aspect-ratio:auto; }
.player__bar { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); flex-wrap:wrap; margin-top: var(--sp-3); }
.player__quality { display:flex; gap:6px; flex-wrap:wrap; }
.player__quality button { height:32px; padding: 0 12px; border:1.5px solid var(--gray-300); border-radius:999px; background: var(--white); font-size:12.5px; font-weight:600; cursor:pointer; }
.player__quality button.is-on { border-color: var(--gray-900); background: var(--gray-900); color:#fff; }
.watch__gate { width:100%; aspect-ratio:16/9; min-height:280px;   /* width 를 명시해야 min-height 가 aspect-ratio 로 폭(498px)에 전이돼 좁은 화면에서 오른쪽으로 넘치지 않는다 (카카오톡 브라우저 잘림, 2026-09-22) */ display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-2); text-align:center; padding: var(--sp-6); background: var(--bg-soft); border-radius: var(--radius-lg); }
.watch__gate-icon { font-size:44px; margin-bottom: var(--sp-2); }
.watch__gate h1 { font-size:22px; font-weight:800; letter-spacing:-.03em; }
.watch__gate p { font-size:14px; color: var(--text-sub); line-height:1.6; }
.watch__gate .btn { margin-top: var(--sp-3); }
.watch__pw { display:flex; align-items:stretch; gap: var(--sp-2); margin-top: var(--sp-3); width:100%; max-width:360px; }
.watch__pw input { flex:1; min-width:0; box-sizing:border-box; height:46px; margin:0; padding: 0 14px; border:1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size:15px; }
.watch__pw input:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
/* 비밀번호 칸과 [시청하기] 버튼 높이 · 줄 맞춤 (2026-10-01) */
.watch__pw .btn { flex:0 0 auto; box-sizing:border-box; height:46px; margin:0; padding:0 20px; align-self:stretch; }
.watch__pw-err { color: var(--point); font-size:13px; }
.watch__info { margin-top: var(--sp-6); }
.watch__info h2 { font-size:20px; font-weight:800; letter-spacing:-.02em; margin-top: var(--sp-2); }
.watch__info p { margin-top: var(--sp-2); font-size:14px; color: var(--text-sub); }
.watch__info a { text-decoration:underline; }
.watch__side { display:grid; gap: var(--sp-3); }
.watch__tip { padding: var(--sp-5); background: var(--bg-soft); border-radius: var(--radius-lg); font-size:13.5px; }
.watch__tip b { display:block; margin-bottom: var(--sp-2); font-size:14px; }
.watch__tip ul { display:grid; gap:6px; color: var(--text-sub); line-height:1.6; }
.watch__tip li { padding-left:12px; position:relative; }
.watch__tip li::before { content:"·"; position:absolute; left:0; font-weight:800; }
.watch__more { display:block; padding: var(--sp-5); border:1.5px solid var(--line); border-radius: var(--radius-lg); }
.watch__more b { display:block; font-size:15px; }
.watch__more span { display:block; margin-top:4px; font-size:13px; color: var(--brand-darker); }
/* 플레이어 대기 배경 : 예전 poster 이미지(vod_logo.png) 대신 브랜드 그라데이션 */
.player { background: radial-gradient(120% 90% at 20% 0%, #1f5f57 0%, #0f2b2a 45%, #0a0f14 100%); }
.player__overlay { background: transparent; }
.player__overlay::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%); pointer-events:none; }
.player__overlay > * { position:relative; }
.player__brand { font-size: clamp(28px, 6vw, 56px); font-weight: 900; letter-spacing: -.04em; color:#fff; line-height:1; margin-bottom: var(--sp-2); }
.player__brand span { color: var(--brand); }
.player__brand { width: clamp(120px, 22%, 220px); height:auto; opacity:.9; margin-bottom: var(--sp-3); }

/* 회사소개 브랜드 히어로 — 로고 색(그레이 #4d4d4d · 레드 #e21f26 · 블루 #2f9ad6 · 실버) */
.co-hero { text-align:center; padding: var(--sp-10) var(--sp-4) var(--sp-8); margin-top: var(--sp-4); background: linear-gradient(180deg, var(--gray-100), var(--white)); border-radius: var(--radius-lg); }
.co-hero__logo { width: clamp(160px, 32vw, 260px); height:auto; }
.co-hero__tag { margin-top: var(--sp-5); font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color: var(--gray-500); }
.co-hero__title { margin-top: var(--sp-2); font-size: clamp(26px, 5vw, 38px); font-weight:900; letter-spacing:-.04em; color:#4d4d4d; }
.co-hero__desc { margin-top: var(--sp-2); font-size:15px; color: var(--text-sub); }
.co-hero__colors { display:flex; justify-content:center; gap:6px; margin-top: var(--sp-6); }
.co-hero__colors span { width:34px; height:6px; border-radius:3px; background:#4d4d4d; }
.co-hero__colors span:nth-child(2) { background:#e21f26; }
.co-hero__colors span:nth-child(3) { background:#2f9ad6; }
.co-hero__colors span:nth-child(4) { background:#b3b3b3; }
.co-stats b { color:#4d4d4d; }
.co-history > li::before { background:#e21f26; }
.co-list li::before { color:#2f9ad6; }

/* 푸터 로고 */
.footer__brand { display:flex; align-items:center; gap: var(--sp-5); flex-wrap:wrap; margin-bottom: var(--sp-5); }
.footer__logo img { height:36px; width:auto; display:block; opacity:.9; }
.footer__slogan { font-size:13px; line-height:1.6; color: var(--gray-600); }
@media (min-width:768px){ .footer__brand { gap: var(--sp-6); } .footer__slogan { border-left:1px solid var(--gray-300); padding-left: var(--sp-6); } }
/* 회사소개 상단 센터 정렬 (로고 · 소개문 · 수치) */
.co-hero__logo { display:block; margin: 0 auto; }
.co-intro { margin: var(--sp-6) auto 0; text-align:center; }
/* 강의 상세 우측 정보 (강사 · 강의일 · 분류 …) */
.lec-facts { display:grid; gap:8px; padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom:1px solid var(--line); font-size:14px; }
.lec-facts > div { display:flex; gap: var(--sp-3); }
.lec-facts dt { flex:0 0 72px; color: var(--text-dim); }
.lec-facts dd { flex:1; min-width:0; font-weight:600; word-break:keep-all; }
.lec-facts dd a { text-decoration:underline; text-decoration-color: var(--gray-300); text-underline-offset:3px; }
.lec-facts dd a:hover { color: var(--brand-darker); }
/* 찜 버튼 (상품 상세 제목 옆) */
.detail__titlerow { display:flex; align-items:flex-start; gap: var(--sp-3); margin-top: var(--sp-5); }
.detail__titlerow .detail__title { margin-top:0; }
.detail__titlerow .detail__title { flex:1; min-width:0; }
.wish-btn { flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--gray-300); background: var(--white); color: var(--gray-500); display:grid; place-items:center; cursor:pointer; transition: all .15s var(--ease); }
.wish-btn svg { width:22px; height:22px; }
.wish-btn:hover { border-color: var(--point); color: var(--point); }
.wish-btn.is-on { border-color: var(--point); background: var(--point-soft); color: var(--point); }
.wish-btn.is-on svg { fill: currentColor; }

/* ==========================================================================
   마이페이지 하위 (찜 · 쿠폰 · 이용권 내역 · 상품평 · 회원정보)
   ========================================================================== */
.wish-list { display:grid; gap: var(--sp-3); }
.coupon-list { display:grid; gap: var(--sp-3); }
@media (min-width:768px){ .coupon-list { grid-template-columns: repeat(2,1fr); } }
.coupon { display:flex; align-items:center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border:1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.coupon.is-off { opacity:.55; }
.coupon__val { flex:0 0 auto; min-width:72px; text-align:center; color: var(--point); }
.coupon__val b { font-size:22px; font-weight:800; letter-spacing:-.02em; }
.coupon__val small { font-size:13px; font-weight:700; margin-left:1px; }
.coupon__body { flex:1; min-width:0; }
.coupon__name { font-size:15px; font-weight:700; }
.coupon__meta { margin-top:2px; font-size:12.5px; color: var(--text-dim); }
.pass-now { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); flex-wrap:wrap; padding: var(--sp-6); background: var(--brand-light); border-radius: var(--radius-lg); }
.pass-now--off { background: var(--bg-soft); }
.pass-now__title { margin-top: var(--sp-2); font-size:18px; font-weight:800; letter-spacing:-.02em; }
.pass-now__date { margin-top:4px; font-size:13.5px; color: var(--text-sub); }
.pass-now__actions { display:flex; gap: var(--sp-2); flex-wrap:wrap; }
.table-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.tbl th { text-align:left; padding: 10px 12px; font-size:12.5px; color: var(--text-dim); border-bottom:1px solid var(--line); font-weight:600; }
.tbl td { padding: 14px 12px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; }
.tbl tr.is-active td { background: var(--brand-light); }
.review-list { display:grid; gap: var(--sp-4); }
.review { padding: var(--sp-5); border:1.5px solid var(--line); border-radius: var(--radius-lg); }
.review__prd { display:inline-flex; align-items:center; gap:8px; margin-bottom: var(--sp-3); padding:4px 10px 4px 4px; background: var(--bg-soft); border-radius:999px; font-size:12.5px; color: var(--text-sub); }
.review__prd img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.review__title { font-size:16px; font-weight:700; }
.review__body { margin-top: var(--sp-2); font-size:14px; line-height:1.7; color: var(--gray-700); }
.review__body img { max-width:100%; border-radius: var(--radius-sm); }
.review__meta { margin-top: var(--sp-3); font-size:12.5px; color: var(--text-dim); }
.field input[type="password"], .field input[type="text"]:disabled { width:100%; padding: 12px 14px; border:1px solid var(--gray-300); border-radius: var(--radius); font-size:15px; background: var(--white); }
.field input:disabled { background: var(--gray-100); color: var(--text-dim); }
/* 푸터 2열 배치 : 브랜드 | 회사정보 */
.footer__grid { display:grid; gap: var(--sp-6); }
@media (min-width:900px){ .footer__grid { grid-template-columns: 300px minmax(0,1fr); gap: var(--sp-10); align-items:start; } }
.footer__brand { display:block; margin-bottom:0; }
.footer__slogan { margin-top: var(--sp-3); border:0 !important; padding:0 !important; }
.footer__cs { margin-top: var(--sp-4); }
.footer__cs a { display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; color: var(--gray-900); }
.footer__cs span { display:block; margin-top:2px; font-size:12.5px; color: var(--gray-500); }
.footer__info { display:grid; grid-template-columns: 1fr; gap: 6px var(--sp-6); font-size:13px; }
@media (min-width:600px){ .footer__info { grid-template-columns: repeat(2, minmax(0,1fr)); } .footer__info-wide { grid-column: 1 / -1; } }
@media (min-width:1100px){ .footer__info { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.footer__info > div { display:flex; gap: var(--sp-2); }
.footer__info dt { flex:0 0 96px; color: var(--gray-500); }
.footer__info dd { flex:1; min-width:0; }
.footer__copy { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top:1px solid var(--line); }
/* 상품 상세 : 가격 라벨 + 카드 찜 하트 + 마이페이지 메뉴 강조 */
.buybox__label { font-size:13px; font-weight:600; color: var(--text-dim); margin-bottom:4px; }
.wish-btn--card { position:absolute; right:10px; top:10px; width:34px; height:34px; z-index:2; background: rgba(255,255,255,.92); border-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.wish-btn--card svg { width:18px; height:18px; }
.card__thumb { position:relative; }
.my-menu a.is-hot { border-color: var(--brand); background: var(--brand-light); font-weight:700; }
.pass__coupon { display:flex; align-items:center; gap: var(--sp-4); margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6); border:1.5px dashed var(--brand); border-radius: var(--radius-lg); background: var(--brand-light); }
.pass__coupon > span:first-child { font-size:28px; }
.pass__coupon > div { flex:1; min-width:0; }
.pass__coupon b { display:block; font-size:15px; }
.pass__coupon small { display:block; margin-top:2px; font-size:13px; color: var(--text-sub); }
.coupon-reg { max-width:520px; }
.coupon-reg__form { padding: var(--sp-6); background: var(--bg-soft); border-radius: var(--radius-lg); }
.coupon-reg__label { display:block; font-size:14px; font-weight:700; margin-bottom: var(--sp-2); }
.coupon-reg__inputs { display:flex; align-items:center; gap: var(--sp-2); }
.coupon-reg__inputs input { flex:1; min-width:0; height:54px; text-align:center; font-size:22px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; border:1.5px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white); }
.coupon-reg__inputs input:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.coupon-reg__inputs span { font-size:20px; font-weight:800; color: var(--text-dim); }
/* 이용권 쿠폰 등록 : 페이지 중앙 정렬 */
.coupon-reg { margin: 0 auto; }
.coupon-reg .notice { justify-content:center; }
.coupon-reg__label { text-align:center; }
.coupon-reg + .pagehead, .coupon-reg__hint { text-align:center; }
.coupon-reg .field__hint { text-align:center; }
.coupon-reg .guide__list { max-width:460px; margin-inline:auto; }
/* 장바구니 모바일 : 수량·삭제 줄을 카드 전체 폭으로 (84px 썸네일 칸에 끼던 문제) */
@media (max-width:767px){
    .cart-item__side { grid-column: 1 / -1; justify-content: space-between; }
    .qty { flex-shrink:0; }
}
/* 이용권 쿠폰 등록 진입 : 헤더 링크 + 메인 배너 */
.header__coupon { color: var(--brand-darker) !important; font-weight:700; }
.coupon-banner { display:flex; align-items:center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border:1.5px dashed var(--brand); border-radius: var(--radius-lg); background: var(--brand-light); }
.coupon-banner__icon { font-size:28px; flex-shrink:0; }
.coupon-banner__text { flex:1; min-width:0; }
.coupon-banner__text b { display:block; font-size:15px; }
.coupon-banner__text small { display:block; margin-top:2px; font-size:12.5px; color: var(--text-sub); }
.coupon-banner__btn { flex-shrink:0; }
@media (max-width:480px){ .coupon-banner { flex-wrap:wrap; } .coupon-banner__btn { width:100%; margin-top:4px; } }

/* NBM아카데미 원격평생교육원(inbm.kr) 홍보 배너 */
.academy { display:grid; gap: var(--sp-6); padding: var(--sp-8) var(--sp-6); border-radius: var(--radius-lg); color:#fff;
  background: radial-gradient(120% 100% at 100% 0%, #1e5a8f 0%, #0b2f4f 55%, #071a2c 100%); position:relative; overflow:hidden; }
@media (min-width:900px){ .academy { grid-template-columns: minmax(0,1fr) 300px; align-items:center; padding: var(--sp-10) var(--sp-10); } }
.academy__eyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.02em; color: #8fd3ff; }
.academy__title { margin-top: var(--sp-3); font-size: clamp(20px, 3.4vw, 30px); font-weight:800; letter-spacing:-.03em; line-height:1.3; }
.academy__title em { font-style:normal; color:#5fc6ff; }
.academy__desc { margin-top: var(--sp-3); font-size:14px; line-height:1.7; color: rgba(255,255,255,.78); max-width:620px; }
.academy__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top: var(--sp-4); }
.academy__tags li { padding: 5px 11px; border-radius:999px; background: rgba(255,255,255,.12); font-size:12.5px; font-weight:600; }
.academy__btn { margin-top: var(--sp-5); background:#fff !important; color:#0b2f4f !important; }
.academy__art { display:none; position:relative; height:200px; }
@media (min-width:900px){ .academy__art { display:block; } }
.academy__badge { position:absolute; width:110px; height:110px; border-radius:50%; display:grid; place-items:center; text-align:center;
  font-size:14px; font-weight:800; line-height:1.25; background: rgba(95,198,255,.18); border:2px solid rgba(95,198,255,.6); color:#dff3ff; }
.academy__badge { left:0; top:0; }
.academy__badge--2 { left:120px; top:40px; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.academy__badge--3 { left:60px; top:110px; background: rgba(226,31,38,.18); border-color: rgba(226,31,38,.55); }
.footer__family { color: var(--brand-darker) !important; }
/* 모바일 상단 메뉴 : 가로 스크롤 대신 한 화면에 고정.
   홈·장바구니는 하단 탭바에 있으므로 모바일 상단에서는 숨기고, 나머지 6개를 화면 폭에 맞춰 배치한다. */
@media (max-width:767px){
    .catbar__scroll { justify-content: space-between; gap: 0 10px; height: var(--catbar-h); padding-block: 0; scroll-padding-inline: 16px; }
    .catbar a { font-size: 13.5px; padding-block: 10px; letter-spacing: -.02em; }
    .catbar a[data-nav="home"], .catbar a[data-nav="cart"] { display: none; }
    /* 카카오톡 인앱 브라우저처럼 글꼴이 확대돼 한 줄에 안 들어가면 두 줄로 흐트러지지 않고 가로 스크롤 (2026-09-22) */
    .catbar { position: relative; }
    .catbar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 44px; pointer-events: none; opacity: 0; transition: opacity .15s;
        background: linear-gradient(90deg, rgba(255,255,255,0), var(--white) 70%); }
    .catbar.is-more::after { opacity: 1; }
}
@media (max-width:359px){ .catbar a { font-size: 12.5px; } }
/* 배송·결제 안내 : 안내문과 결제수단 카드 사이 여백 */
.guide__note + .pay-grid { margin-top: var(--sp-5); }

/* 메인 히어로 슬라이더 (관리자 배너 600x600) */
@media (min-width:900px){ .hero__inner { grid-template-columns: minmax(0,1fr) 400px; gap: var(--sp-10); } }
@media (min-width:1200px){ .hero__inner { grid-template-columns: minmax(0,1fr) 440px; } }
.hero-slider { position:relative; width:100%; max-width:440px; margin: var(--sp-2) auto 0; }
@media (min-width:900px){ .hero-slider { margin:0 0 0 auto; } }
.hero-slider__track { position:relative; aspect-ratio:1/1; border-radius: var(--radius-lg); overflow:hidden; background: rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.hero-slider__item { position:absolute; inset:0; display:block; opacity:0; transition: opacity .6s var(--ease); }
.hero-slider__item.is-on { opacity:1; }
.hero-slider__item img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-slider__dots { display:flex; justify-content:center; gap:6px; margin-top: var(--sp-3); }
.hero-slider__dots button { width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.45); transition: all .2s; }
.hero-slider__dots button.is-on { width:22px; border-radius:4px; background:#fff; }

/* ==========================================================================
   메인 : 대표 상품(뉴로마이스터) · 연합강의장 티켓팅
   ========================================================================== */
.feature { display:grid; gap: var(--sp-6); padding: var(--sp-8) var(--sp-6); border-radius: var(--radius-lg); color:#fff; overflow:hidden; position:relative;
  background: radial-gradient(110% 120% at 100% 100%, #3b2a8f 0%, #1a1650 45%, #0c0a2b 100%); }
@media (min-width:900px){ .feature { grid-template-columns: minmax(0,1fr) 380px; align-items:center; padding: var(--sp-10); } }
@media (min-width:1200px){ .feature { grid-template-columns: minmax(0,1fr) 440px; } }
.feature__eyebrow { display:inline-block; padding:5px 10px; border-radius:999px; background: rgba(255,255,255,.12); font-size:12px; font-weight:700; letter-spacing:.02em; color:#cfc4ff; }
.feature__title { margin-top: var(--sp-4); font-size: clamp(24px, 4vw, 36px); font-weight:800; letter-spacing:-.03em; line-height:1.25; }
.feature__title em { font-style:normal; color:#9d8bff; }
.feature__desc { margin-top: var(--sp-3); font-size:14.5px; line-height:1.75; color: rgba(255,255,255,.8); max-width:560px; }
.feature__desc strong { color:#fff; }
.feature__points { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-2); margin-top: var(--sp-5); max-width:560px; }
.feature__points li { padding: 12px 10px; border-radius: var(--radius); background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }
.feature__points b { display:block; font-size:14px; }
.feature__points span { display:block; margin-top:2px; font-size:11.5px; color: rgba(255,255,255,.65); line-height:1.4; }
@media (max-width:480px){ .feature__points { grid-template-columns: 1fr; } .feature__points li { display:flex; gap:10px; align-items:center; } .feature__points span { margin-top:0; } }
.feature__price { display:flex; align-items:baseline; gap: var(--sp-2); margin-top: var(--sp-6); flex-wrap:wrap; }
.feature__off { font-size:18px; font-weight:800; color:#ff6b7a; }
.feature__price s { font-size:14px; color: rgba(255,255,255,.5); }
.feature__price b { font-size:28px; font-weight:800; letter-spacing:-.02em; }
.feature__cta { display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.feature__cta .btn--primary { background:#fff; color:#1a1650; }
.feature__cta .btn--primary:hover { background:#f1eefc; }
.feature__ext { border-color: rgba(255,255,255,.5) !important; color:#fff !important; }
.feature__ext:hover { background: rgba(255,255,255,.1) !important; }
.feature__art { display:block; border-radius: var(--radius-lg); overflow:hidden; box-shadow: 0 24px 50px rgba(0,0,0,.35); aspect-ratio:1/1; background:#0c0a2b; }
.feature__art img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s var(--ease); }
.feature__art:hover img { transform: scale(1.03); }

.ticket { display:grid; gap: var(--sp-6); padding: var(--sp-8) var(--sp-6); background: var(--white); border:1.5px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width:900px){ .ticket { grid-template-columns: minmax(0,1.3fr) minmax(300px,1fr); padding: var(--sp-10); align-items:start; } }
.ticket__eyebrow { font-size:12.5px; font-weight:700; letter-spacing:.02em; color: var(--brand-darker); }
.ticket__title { margin-top: var(--sp-2); font-size: clamp(22px, 3.4vw, 30px); font-weight:800; letter-spacing:-.03em; line-height:1.3; }
.ticket__title em { font-style:normal; color: var(--brand-dark); }
.ticket__desc { margin-top: var(--sp-3); font-size:14.5px; line-height:1.7; color: var(--text-sub); }
.ticket__rules { display:grid; gap:8px; margin-top: var(--sp-5); font-size:14px; }
.ticket__rules li { padding-left:14px; position:relative; color: var(--text-sub); }
.ticket__rules li::before { content:"·"; position:absolute; left:0; font-weight:800; color: var(--brand); }
.ticket__rules b { color: var(--text); margin-right:4px; }
.ticket__rules small { color: var(--text-dim); }
.ticket__rules a { text-decoration:underline; }
.ticket__cta { display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.ticket__side { padding: var(--sp-5); background: var(--bg-soft); border-radius: var(--radius-lg); }
.ticket__side-h { font-size:13px; font-weight:700; color: var(--text-dim); margin-bottom: var(--sp-3); }
.ticket__list { display:grid; gap: var(--sp-3); }
.ticket__list li { display:flex; gap: var(--sp-3); align-items:center; }
.ticket__date { flex:0 0 52px; text-align:center; padding:6px 0; border-radius: var(--radius); background: var(--white); border:1px solid var(--line); }
.ticket__date b { display:block; font-size:20px; font-weight:800; line-height:1.1; color: var(--brand-darker); }
.ticket__date small { display:block; font-size:11px; color: var(--text-dim); }
.ticket__info { min-width:0; }
.ticket__info b { display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticket__info small { display:block; font-size:12px; color: var(--text-dim); margin-top:2px; }
.ticket__empty { font-size:13.5px; color: var(--text-dim); }
/* 수정 : 대표상품 보조 버튼(흰 바탕에 흰 글씨) · 티켓 섹션 모바일 가로 넘침 */
.feature__ext { background: transparent !important; }
.feature > *, .ticket > * { min-width:0; }
.ticket__list li { min-width:0; }
.ticket__info { flex:1; min-width:0; }
.ticket__title, .ticket__desc { word-break: keep-all; overflow-wrap: anywhere; }
/* 모바일 : 대표상품 · 티켓 섹션 버튼 전체 폭 */
@media (max-width:767px){
    .feature__cta, .ticket__cta { flex-direction:column; }
    .feature__cta .btn, .ticket__cta .btn { width:100%; }
}
/* 대표상품 영상 (1280x720) */
.feature__art--video { aspect-ratio:16/9; }
.feature__art video { width:100%; height:100%; object-fit:cover; display:block; background:#0c0a2b; }
@media (min-width:900px){ .feature { grid-template-columns: minmax(0,1fr) 420px; } }
@media (min-width:1200px){ .feature { grid-template-columns: minmax(0,1fr) 520px; } }
/* 히어로 슬라이더 : 겹쳐진 슬라이드 중 보이는 것만 클릭되게 (숨은 마지막 슬라이드가 클릭을 가로채던 문제) */
.hero-slider__item { pointer-events:none; z-index:0; }
.hero-slider__item.is-on { pointer-events:auto; z-index:1; }

/* 장바구니·찜 : 변경된 상품 안내 + 정리 버튼 */
.cart-clean { margin-bottom:16px; flex-wrap:wrap; }
.cart-clean .btn { margin-left:auto; flex-shrink:0; }
@media (max-width:480px){ .cart-clean .btn { width:100%; margin-left:0; } }
/* 아이디·비밀번호 찾기 */
.tabs { display:flex; gap:8px; }
.find-result { margin-top: var(--sp-6); padding: var(--sp-6); background: var(--bg-soft); border-radius: var(--radius-lg); }
.find-result__h { font-size:16px; font-weight:800; margin-bottom: var(--sp-3); }
.find-result ul { display:grid; gap:8px; margin-bottom: var(--sp-3); }
.find-result li { display:flex; justify-content:space-between; align-items:baseline; padding: 10px 14px; background: var(--white); border-radius: var(--radius-sm); }
.find-result li b { font-size:18px; letter-spacing:.06em; }
.find-result li small { color: var(--text-dim); }
.find-result p { font-size:14px; line-height:1.7; }
/* 시청 페이지 : 다른 강의 목록 */
.watch__list { display:grid; gap:8px; }
.watch__list li { padding:0 !important; }
.watch__list li::before { content:none !important; }
.watch__list a { display:flex; gap:10px; align-items:center; }
.watch__list img { width:56px; height:40px; object-fit:cover; border-radius:6px; flex-shrink:0; background: var(--gray-100); }
.watch__list span { font-size:13px; line-height:1.4; color: var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 강의 목록 연도 선택 */
.chip--select { appearance:none; -webkit-appearance:none; padding-right:28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 8px center; background-size:14px; cursor:pointer; }

/* 플레이어 : 자동재생 차단 시 ▶ 버튼 오버레이 */
.player__overlay.is-play { cursor:pointer; background: rgba(10,12,16,.35); }
.player__overlay.is-play .player__spinner { display:none; }
.player__overlay.is-play .player__msg { width:76px; height:76px; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; font-size:30px; padding-left:5px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.player__overlay.is-play .player__sub { color:#fff; font-weight:600; }

/* 미니 플레이어 (PC) — 강의 재생 중 페이지 이동 시 우하단 유지 */
#miniplayer { position:fixed; right:20px; bottom:20px; width:360px; z-index:900; background:#0c0f14; border-radius:14px; overflow:hidden; box-shadow:0 18px 48px rgba(0,0,0,.35); display:none; }
#miniplayer.is-on { display:block; }
.mini__head { display:flex; align-items:center; gap:6px; padding:8px 8px 8px 12px; color:#fff; }
.mini__title { flex:1; min-width:0; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini__btn { width:28px; height:28px; border-radius:6px; color:#fff; background:rgba(255,255,255,.12); font-size:13px; }
.mini__btn:hover { background:rgba(255,255,255,.25); }
#miniplayer .playerbox .player { border-radius:0; }
#miniplayer .player__bar { display:none; }
@media (max-width:899px){
    #miniplayer { width:220px; max-width: calc(100vw - 24px); right:12px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); border-radius:10px; }
    .mini__head { padding:6px 6px 6px 10px; }
    .mini__title { font-size:11.5px; }
    .mini__btn { width:26px; height:26px; }
}
#miniplayer .mini__body video { width:100%; aspect-ratio:16/9; display:block; background:#000; }
#miniplayer.is-pip .mini__body { height:0; overflow:hidden; }
#miniplayer.is-pip { width:320px; }
/* 브라우저 PiP 창으로 나가 있는 동안 검은 미니 창은 완전히 숨김 (PiP 닫으면 다시 표시) */
#miniplayer.is-pip { display:none !important; }

/* 이어보기 */
.player__resume { position:absolute; left:12px; right:12px; bottom:64px; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(12,15,20,.85); color:#fff; border-radius:10px; font-size:13px; transition: opacity .4s, transform .4s; }
.player__resume b { color:#5fe3d0; }
.player__resume button { margin-left:auto; flex-shrink:0; padding:6px 10px; border:1px solid rgba(255,255,255,.4); border-radius:6px; color:#fff; font-size:12px; font-weight:600; }
.player__resume button:hover { background:rgba(255,255,255,.15); }
.player__resume.is-hide { opacity:0; transform:translateY(8px); pointer-events:none; }
.progress { height:4px; margin-top:6px; background: var(--gray-200); border-radius:2px; overflow:hidden; max-width:260px; }
.progress span { display:block; height:100%; background: var(--brand); }
@media (max-width:480px){ .player__resume { flex-wrap:wrap; bottom:56px; font-size:12px; } }
.player__overlay.is-retry { cursor:pointer; }
.player__overlay.is-retry .player__spinner { display:none; }

/* ==========================================================================
   연합강의장 티켓 예매 (ticket/) — tk-
   ========================================================================== */
.tk { padding-bottom: var(--sp-12); }
.tk-pagehead { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--sp-4); }
.tk-req { color: var(--point); }
.tk-count { display:inline-block; min-width:22px; padding:0 7px; margin-left:4px; border-radius:11px; background: var(--brand-light); color: var(--brand-darker); font-size:12px; font-weight:800; text-align:center; vertical-align:middle; }
.tk-foot-note { margin-top: var(--sp-6); font-size:13px; color: var(--text-dim); }

/* 시작 화면 */
.tk-hero { display:grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); align-items:center; margin-top: var(--sp-6); padding: var(--sp-10) var(--sp-8); border-radius:24px; background: linear-gradient(135deg, #0f1b2d 0%, #1a3a5c 60%, #1f6f8b 100%); color:#fff; overflow:hidden; position:relative; }
.tk-hero__eyebrow { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em; color:#8fe3d5; text-transform:uppercase; }
.tk-hero__title { margin-top: var(--sp-2); font-size: clamp(30px, 4.6vw, 44px); font-weight:900; letter-spacing:-.04em; line-height:1.15; }
.tk-hero__title em { font-style:normal; color:#8fe3d5; }
.tk-hero__desc { margin-top: var(--sp-4); font-size:15px; line-height:1.7; color: rgba(255,255,255,.82); max-width: 520px; }
.tk-hero__cta { display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.tk-hero__cta .btn--line { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color:#fff; }
.tk-hero__cta .btn--line:hover { background: rgba(255,255,255,.2); }
.tk-hero__art { display:grid; place-items:center; }
.tk-stub { width: 200px; padding: 18px; border-radius:18px; background:#fff; color: var(--gray-900); box-shadow: 0 30px 60px rgba(0,0,0,.35); transform: rotate(-6deg); position:relative; }
.tk-stub::before, .tk-stub::after { content:""; position:absolute; left:-12px; top: 118px; width:24px; height:24px; border-radius:50%; background:#163457; }
.tk-stub::after { left:auto; right:-12px; }
.tk-stub__top { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:12px; border-bottom:2px dashed var(--gray-200); font-size:11px; font-weight:800; letter-spacing:.12em; color: var(--text-dim); }
.tk-stub__top b { font-size:34px; color: var(--brand-dark); letter-spacing:0; }
.tk-stub__qr { margin:14px auto 0; width:104px; height:104px; display:grid; place-items:center; }
.tk-stub__qr img, .tk-stub__qr canvas { width:104px !important; height:104px !important; display:block; image-rendering: pixelated; }
.tk-stub__foot { margin-top:12px; text-align:center; font-size:11px; font-weight:800; letter-spacing:.1em; color: var(--text-dim); }

.tk-steps { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); }
.tk-step { padding: var(--sp-5); border:1px solid var(--line); border-radius:16px; background: var(--white); }
.tk-step__n { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background: var(--brand); color:#fff; font-size:13px; font-weight:800; margin-bottom: var(--sp-3); }
.tk-step b { display:block; font-size:15px; }
.tk-step p { margin-top: var(--sp-2); font-size:13px; line-height:1.6; color: var(--text-sub); }

.tk-notes { margin-top: var(--sp-10); padding: var(--sp-6); border-radius:16px; background: var(--gray-050); }
.tk-notes__h { font-size:16px; font-weight:800; margin-bottom: var(--sp-3); }
.tk-notes ul, .tk-notes__list { padding-left: 18px; font-size:13.5px; line-height:1.8; color: var(--text-sub); }
.tk-notes__list { margin-top: var(--sp-6); max-width:560px; margin-inline:auto; }

/* 목록 카드 */
.tk-list { display:grid; gap: var(--sp-3); }
.tk-card { display:grid; grid-template-columns: 76px 1fr auto; gap: var(--sp-5); align-items:center; padding: var(--sp-5); border:1px solid var(--line); border-radius:16px; background: var(--white); transition: border-color .2s, box-shadow .2s; }
.tk-card.is-open { border-color: var(--brand); box-shadow: 0 6px 24px rgba(0,120,110,.08); }
.tk-card__date { text-align:center; padding: var(--sp-2) 0; border-radius:12px; background: var(--gray-050); }
.tk-card__date b { display:block; font-size:26px; font-weight:900; letter-spacing:-.03em; line-height:1.1; }
.tk-card__date small { display:block; font-size:12px; color: var(--text-dim); font-weight:600; }
.tk-card--leader .tk-card__date { background: #eef0ff; color:#3949ab; }
.tk-card--external .tk-card__date { background: #fff4e5; color:#b45309; }
.tk-card__meta { display:flex; flex-wrap:wrap; gap: 6px 10px; align-items:center; font-size:13px; color: var(--text-sub); }
.tk-card__title { margin-top:6px; font-size:17px; font-weight:800; letter-spacing:-.02em; line-height:1.35; }
.tk-card__tutor { margin-top:2px; font-size:13.5px; color: var(--text-sub); }
.tk-card__win { margin-top:6px; font-size:12.5px; color: var(--text-dim); }
.tk-coupon-left { margin: 20px 0; padding: 22px; border-radius: var(--radius-lg); background: var(--gray-50,#f9fafb); border: 1px solid var(--gray-200,#e5e7eb); display: grid; gap: 6px; justify-items: start; }
.tk-coupon-left__code { font-size: 13px; color: var(--text-sub); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tk-coupon-left__n { font-size: 20px; font-weight: 700; }
.tk-coupon-left__n b { font-size: 34px; color: var(--brand-dark); font-variant-numeric: tabular-nums; margin: 0 2px; }
.tk-coupon-left__note { font-size: 13px; color: #dc2626; }
.tk-coupon-left .btn { margin-top: 6px; }
.tk-card__win span { color: var(--brand-dark); font-weight:700; }
.tk-card__side .btn { min-width: 120px; white-space:nowrap; }
.tk-card__side .btn.is-off { pointer-events:none; opacity:.55; }
.tk-card__side .btn.is-wait { pointer-events:none; border-style:dashed; color: var(--text-sub); }

/* 예매 폼 */
.tk-book { display:grid; grid-template-columns: 340px 1fr; gap: var(--sp-8); margin-top: var(--sp-6); align-items:start; }
.tk-book__lec { position:sticky; top: calc(var(--header-h) + 50px + var(--sp-4));   /* 헤더 + 서브탭 아래 (2026-09-21 : 스크롤 시 탭에 가려지던 문제) */ padding: var(--sp-6); border-radius:18px; background: var(--gray-900); color:#fff; }
.tk-book__kind { display:flex; gap:8px; align-items:center; font-size:13px; color: rgba(255,255,255,.75); }
.tk-book__kind b { color:#8fe3d5; }
.tk-book__title { margin-top: var(--sp-3); font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1.3; }
.tk-book__dl { margin-top: var(--sp-5); display:grid; gap:8px; font-size:13.5px; }
.tk-book__dl div { display:flex; gap:12px; }
.tk-book__dl dt { flex:0 0 64px; color: rgba(255,255,255,.55); }
.tk-book__dl dd { color:#fff; }
.tk-book__content { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top:1px solid rgba(255,255,255,.15); font-size:13px; line-height:1.7; color: rgba(255,255,255,.8); }
.tk-book__content img { max-width:100%; border-radius:8px; }
.tk-book__form { padding: var(--sp-6); border:1px solid var(--line); border-radius:18px; background: var(--white); }
.tk-state { display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap; margin-bottom: var(--sp-5); padding: 12px 16px; border-radius:12px; font-size:13.5px; background: var(--gray-050); color: var(--text-sub); }
.tk-state b { font-size:14px; }
.tk-state em { font-style:normal; font-weight:700; color: var(--brand-dark); }
.tk-state--open { background: var(--brand-light); color: var(--brand-darker); }
.tk-state--soon { background:#fff8e6; color:#96620a; }
.tk-state--soldout, .tk-state--closed, .tk-state--ended { background: var(--point-soft); color: var(--point); }
.field__row2 { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.tk-radios { display:flex; gap: var(--sp-5); height:48px; align-items:center; }
.tk-fixed { height:48px; display:flex; align-items:center; padding:0 14px; border:1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--gray-050); font-size:14px; }
/* 셀리더 소속(방) 타일 — 잔여 인원 실시간 표시, 만석은 흐리게 · 선택 불가 */
.tk-rooms { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
@media (min-width:600px){ .tk-rooms { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tk-rooms__grp { grid-column: 1 / -1; font-size:12.5px; font-weight:700; color: var(--text-dim); margin-top:6px; }
.tk-rooms__grp:first-child { margin-top:0; }
.tk-rooms .tk-room { position:relative; display:flex; flex-direction:column; gap:3px; padding:10px 8px; border:1px solid var(--gray-300); border-radius:10px; background: var(--white); cursor:pointer; text-align:center; transition: border-color .15s, box-shadow .15s, background .15s; }
.tk-room input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.tk-room b { font-size:14px; letter-spacing:-.02em; }
.tk-room small { font-size:12px; color: var(--text-sub); transition: color .2s; }
.tk-room:has(input:checked) { border-color: var(--brand); background: #e8f7f3; box-shadow: 0 0 0 2px var(--brand) inset; }
.tk-room:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.tk-room.is-full { cursor:not-allowed; background: var(--gray-100); color: var(--text-dim); border-style:dashed; }
.tk-room.is-full b { text-decoration: line-through; opacity:.6; }
.tk-room.is-full small { color:#dc2626; }
.tk-room.is-low small { color:#d97706; font-weight:700; }
.tk-room.is-changed small { color: var(--brand-dark); font-weight:700; }
.ai-type__left { display:block; margin-top:4px; font-size:11.5px; font-style:normal; font-weight:700; color: var(--brand-dark); }
.ai-type.is-out { opacity:.75; }
/* 사업 관심도 (2026-10-08) */
.biz-list { display: grid; gap: 8px; }
.biz-row { display: grid; grid-template-columns: 32px 1fr 160px auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--white); }
.biz-rank { font-weight: 900; color: var(--brand-dark); text-align: center; font-size: 18px; }
.biz-main a { color: inherit; text-decoration: none; }
.biz-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.biz-why span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--gray-100); color: var(--text-sub); }
.biz-score { display: flex; align-items: center; gap: 8px; }
.biz-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.biz-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
@media (max-width: 640px) { .biz-row { grid-template-columns: 28px 1fr; } .biz-score, .biz-row > .cal-btn { grid-column: 2; } }
/* 중복 고객 정리 (2026-10-08) */
.dupe__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dupe__it { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: 12px; cursor: pointer; line-height: 1.6; }
.dupe__it:has(input:checked) { border-color: var(--brand); background: #f2fbf9; }
.dupe__it input { margin-top: 5px; }
.dupe__open { font-size: 12.5px; }
.dupe__log { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--gray-100); }
/* 반론 응답 도우미 (2026-10-08) */
.ob-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ob-chip { padding: 6px 12px; border: 1px solid var(--gray-300); border-radius: 999px; background: var(--white); font-size: 13px; cursor: pointer; }
.ob-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.ob-result { margin-top: 24px; display: grid; gap: 12px; }
.ob-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ob-kind { font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: var(--gray-900,#111827); color: #fff; }
.ob-check { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.ob-check.is-ok { background: #e7f8f3; color: #0a7a63; }
.ob-check.is-warn { background: #fff1ec; color: #c2410c; }
.ob-heart { font-size: 15px; color: var(--text-sub); }
.ob-card { position: relative; padding: 16px 18px; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--white); }
.ob-card b { display: block; font-size: 13px; color: var(--brand-dark); margin-bottom: 6px; }
.ob-card p { font-size: 15.5px; line-height: 1.65; padding-right: 56px; }
.ob-copy { position: absolute; right: 12px; top: 12px; padding: 4px 10px; font-size: 12px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--white); cursor: pointer; }
.ob-avoid { padding: 14px 18px; border-radius: 14px; background: #fff7f5; font-size: 14px; }
.ob-avoid ul { margin: 6px 0 0 18px; display: grid; gap: 4px; }
/* 한 번에 여러 채널 결과 (2026-10-08) */
.rp-result { margin-top: 28px; }
.rp-result__h { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.rp-result__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; }
.rp-item { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--white); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.rp-item:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.rp-item__h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--text-sub); }
.rp-item__b { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rp-item__b.is-ok { background: #e7f8f3; color: #0a7a63; }
.rp-item__b.is-warn { background: #fff1ec; color: #c2410c; }
.rp-item small { color: var(--text-dim); line-height: 1.5; }
.ai-type.is-out .ai-type__left { color:#dc2626; }
.tk-select { width:100%; height:48px; padding:0 14px; border:1px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white); font-size:14px; }
.tk-coupon { display:grid; grid-template-columns: 24px 142px 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
.tk-coupon__n { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background: var(--gray-100); font-size:12px; font-weight:800; color: var(--text-sub); }
.tk-coupon .tk-coupon__code { height:44px; padding:0 12px; border:1px solid var(--gray-300); border-radius: var(--radius-sm); font-size:16px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-family: ui-monospace, Consolas, monospace; }
.tk-coupon .tk-coupon__code:focus { outline:none; border-color: var(--brand); }
.tk-coupon__res { grid-column: 2 / -1; font-size:12.5px; color: var(--text-dim); min-height:16px; }
.tk-coupon__res.is-ok { color: var(--brand-dark); font-weight:700; }
.tk-coupon__res.is-bad { color: var(--point); font-weight:700; }
.tk-coupons__sum { margin-top:6px; padding:10px 14px; border-radius:10px; background: var(--gray-050); font-size:13.5px; }
.tk-coupons__sum b { color: var(--brand-dark); }
.tk-coupons.is-short .tk-coupons__sum b:first-child { color: var(--point); }
.tk-terms { margin: var(--sp-6) 0; padding: var(--sp-5); border-radius:12px; background: var(--gray-050); }
.tk-terms__h { font-size:14px; font-weight:800; margin-bottom: var(--sp-2); }
.tk-terms ol { padding-left:18px; font-size:12.5px; line-height:1.7; color: var(--text-sub); margin-bottom: var(--sp-4); max-height:150px; overflow:auto; }
.tk-terms .check { font-weight:700; }

/* 디지털 티켓 */
.tk-tickets { display:grid; gap: var(--sp-4); }
.tk-tickets--solo { max-width:560px; margin: 0 auto; }
.tk-tickets--past { margin-top: var(--sp-4); }
.tk-ticket { display:grid; grid-template-columns: 1fr 200px; grid-template-areas: "main qr" "actions qr"; border:1px solid var(--line); border-radius:18px; background: var(--white); overflow:hidden; box-shadow: 0 8px 28px rgba(15,27,45,.06); }
.tk-ticket__main { grid-area: main; display:flex; gap: var(--sp-5); padding: var(--sp-6); }
.tk-ticket__seat { flex:0 0 96px; text-align:center; padding: var(--sp-3) 0; border-radius:14px; background: var(--gray-900); color:#fff; }
.tk-ticket__seat small { display:block; font-size:11px; letter-spacing:.1em; color: rgba(255,255,255,.6); }
.tk-ticket__seat b { display:block; font-size:40px; font-weight:900; line-height:1.1; letter-spacing:-.03em; color:#8fe3d5; }
.tk-ticket__info { min-width:0; }
.tk-ticket__title { margin-top:8px; font-size:17px; font-weight:800; letter-spacing:-.02em; line-height:1.3; }
.tk-ticket__meta { margin-top:4px; font-size:13px; color: var(--text-sub); }
.tk-ticket__qr { grid-area: qr; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding: var(--sp-5); border-left: 2px dashed var(--gray-200); background: var(--gray-050); }
.tk-ticket__qr small { font-size:11.5px; color: var(--text-dim); letter-spacing:.06em; }
.tk-qr { width:176px; height:176px; padding:8px; background:#fff; border-radius:10px; box-sizing:content-box; }
.tk-qr img, .tk-qr canvas { width:176px !important; height:176px !important; display:block; }
.tk-ticket__qr-off { width:176px; height:176px; display:grid; place-items:center; border-radius:10px; background: var(--gray-100); color: var(--text-dim); font-weight:700; font-size:14px; }
.tk-ticket__actions { grid-area: actions; display:flex; flex-wrap:wrap; gap:8px; padding: 0 var(--sp-6) var(--sp-5); }
.tk-ticket.is-cancelled { opacity:.6; }
.tk-ticket.is-cancelled .tk-ticket__seat { background: var(--gray-300); }
.tk-ticket.is-cancelled .tk-ticket__seat b { color:#fff; text-decoration: line-through; }
.tk-done { max-width: 760px; }
.tk-done .tk-tickets { text-align:left; margin: var(--sp-6) 0; }
.tk-sms { display:flex; flex-direction:column; gap:4px; padding: 14px 18px; border-radius:12px; font-size:13.5px; text-align:left; margin-bottom: var(--sp-6); }
.tk-sms.is-ok { background: var(--brand-light); color: var(--brand-darker); }
.tk-sms.is-fail { background:#fff8e6; color:#96620a; }
.tk-sms b { font-size:14.5px; }

/* 조회 */
.tk-search { display:flex; gap: var(--sp-2); max-width:480px; margin-bottom: var(--sp-6); }
.tk-search input { flex:1; min-width:0; height:50px; padding:0 16px; border:1px solid var(--gray-300); border-radius: var(--radius-sm); font-size:17px; font-weight:700; letter-spacing:.04em; }
.tk-search input:focus { outline:none; border-color: var(--brand); }
.tk-search .btn { height:50px; padding-inline: var(--sp-6); }
.tk-search__hint { padding: var(--sp-8); text-align:center; color: var(--text-dim); font-size:14px; border:1px dashed var(--gray-300); border-radius:16px; }
.tk-past summary { cursor:pointer; font-size:16px; font-weight:800; padding: var(--sp-2) 0; }

@media (max-width: 899px) {
  .tk-hero { grid-template-columns: 1fr; padding: var(--sp-8) var(--sp-5); }
  .tk-hero__art { display:none; }
  .tk-steps { grid-template-columns: 1fr 1fr; }
  .tk-book { grid-template-columns: 1fr; gap: var(--sp-4); }
  .tk-book__lec { position:static; }
}
@media (max-width: 640px) {
  .tk-pagehead { flex-direction:column; align-items:flex-start; }
  .tk-steps { grid-template-columns: 1fr; }
  .tk-hero__cta .btn { flex:1 1 100%; }
  .tk-card { grid-template-columns: 64px 1fr; gap: var(--sp-3) var(--sp-4); padding: var(--sp-4); }
  .tk-card__side { grid-column: 1 / -1; }
  .tk-card__side .btn { width:100%; }
  .tk-card__date b { font-size:22px; }
  .tk-book__form { padding: var(--sp-4); }
  .field__row2 { grid-template-columns: 1fr; gap:0; }
  .tk-coupon { grid-template-columns: 22px 118px 1fr auto; gap:6px; }
  .tk-ticket { grid-template-columns: 1fr; grid-template-areas: "main" "qr" "actions"; }
  .tk-ticket__qr { border-left:0; border-top: 2px dashed var(--gray-200); }
  .tk-ticket__main { padding: var(--sp-4); gap: var(--sp-4); }
  .tk-ticket__seat { flex-basis:80px; }
  .tk-ticket__seat b { font-size:34px; }
  .tk-ticket__actions { padding: 0 var(--sp-4) var(--sp-4); }
  .tk-search input { font-size:16px; }
}

/* 티켓 조회 (기존 search.php 형식) */
.tk-search--2 { display:block; max-width:560px; }
.tk-search__row { display:flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tk-search__row input { flex:1; min-width:0; height:50px; padding:0 16px; border:1px solid var(--gray-300); border-radius: var(--radius-sm); font-size:16px; font-weight:700; letter-spacing:.03em; }
.tk-search__row input:focus { outline:none; border-color: var(--brand); }
.tk-search__row .btn { height:50px; padding-inline: var(--sp-5); }
/* 쿠폰 월 선택 — 입력칸과 같은 높이 · 테두리, 기본 화살표 대신 둥근 V (2026-10-08) */
.tk-search__row select, .tk-coupon__ym {
    -webkit-appearance: none; appearance: none;
    height:50px; padding:0 40px 0 16px; flex:0 0 auto;
    border:1px solid var(--gray-300); border-radius: var(--radius-sm);
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    font-size:16px; font-weight:700; color: var(--text); cursor:pointer;
    transition: border-color .15s, box-shadow .15s;
}
.tk-search__row select:hover, .tk-coupon__ym:hover { border-color: var(--gray-400,#9ca3af); }
.tk-search__row select:focus, .tk-coupon__ym:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,199,174,.15); }
.tk-coupon__ym { width:100%; min-width:0; height:44px; font-size:14px; padding-left:12px; padding-right:32px; background-position: right 12px center; }   /* 예매 화면 쿠폰 줄은 44px */
@media (max-width: 640px) {
  /* 휴대폰 : 월 선택 · 4자리 · 조회 버튼이 한 줄에 들어가게 */
  .tk-search__row select { font-size:15px; padding:0 30px 0 12px; background-position: right 10px center; }
  .tk-search__row .btn { padding-inline: var(--sp-4); }
  .tk-search__row input::placeholder { font-size:14px; letter-spacing:0; }
  .tk-coupon__ym { font-size:13px; padding-left:10px; padding-right:26px; background-position: right 9px center; }
}
.tk-search__notes { margin: var(--sp-2) 0 0; padding-left:18px; font-size:12.5px; line-height:1.7; color: var(--point); }
.tk-result-h { margin: var(--sp-2) 0 var(--sp-3); font-size:16px; font-weight:800; }
.tk-result-h small { font-weight:500; color: var(--text-dim); font-size:12px; margin-left:6px; }
.tk-rows { display:grid; gap: var(--sp-3); }
.tk-row { display:grid; grid-template-columns: 1fr 200px; gap: var(--sp-5); padding: var(--sp-5); border:1px solid var(--line); border-radius:16px; background: var(--white); }
.tk-row.is-cancelled { opacity:.6; background: var(--gray-050); }
.tk-row__when { display:flex; align-items:baseline; gap:8px; font-size:20px; font-weight:900; letter-spacing:-.02em; }
.tk-row__when span { font-size:13px; font-weight:600; color: var(--text-sub); }
.tk-row__when em { font-style:normal; font-size:18px; }
.tk-row__when em.is-am { color:#319cd9; } .tk-row__when em.is-pm { color:#0055da; }
.tk-row__title { margin-top:4px; font-size:16px; font-weight:800; }
.tk-row__dl { margin-top: var(--sp-3); display:grid; gap:4px; font-size:13.5px; }
.tk-row__dl div { display:flex; gap:10px; align-items:center; }
.tk-row__dl dt { flex:0 0 64px; color: var(--text-dim); }
.tk-row__dl dd { color: var(--text); word-break:break-all; }
.tk-row__seat { font-size:22px; font-weight:900; color: var(--brand-dark); }
.tk-row__side { display:flex; flex-direction:column; gap:8px; justify-content:center; }
.tk-row__entry { height:auto; padding:10px 12px; line-height:1.2; }
.tk-row__entry b { display:block; font-size:26px; font-weight:900; margin-top:2px; }
.tk-row__link { text-align:center; font-size:12.5px; color: var(--text-dim); text-decoration:underline; }
.tk-pop { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding: var(--sp-4); }
.tk-pop__dim { position:absolute; inset:0; background: rgba(22,24,29,.6); opacity:0; transition: opacity .2s; }
.tk-pop__panel { position:relative; width:100%; max-width:360px; padding: var(--sp-6); border-radius:20px; background:#fff; text-align:center; opacity:0; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.tk-pop.is-open .tk-pop__dim { opacity:1; } .tk-pop.is-open .tk-pop__panel { opacity:1; transform:none; }
.tk-pop__h { font-size:15px; font-weight:800; color: var(--text-sub); }
.tk-pop__label { margin-top: var(--sp-4); font-size:14px; font-weight:800; }
.tk-pop__seat { font-size:84px; font-weight:900; line-height:1; letter-spacing:-.04em; color: var(--brand-dark); }
.tk-pop__qr { display:inline-block; margin-top: var(--sp-3); padding:8px; background:#fff; }
.tk-pop__qr img, .tk-pop__qr canvas { width:220px !important; height:220px !important; display:block; }
.tk-pop__title { margin-top: var(--sp-3); font-size:13px; font-weight:800; }
.tk-pop__when { font-size:12px; color: var(--text-dim); margin-bottom: var(--sp-4); }
@media (max-width: 640px) {
  .tk-row { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4); }
  .tk-pop__seat { font-size:72px; }
}
.tk-row__note { text-align:center; font-size:11.5px; color: var(--text-dim); }

.btn.is-pulse { animation: tk-pulse 1.2s ease-in-out 4; }
@keyframes tk-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(0,120,110,.5); } 50% { box-shadow:0 0 0 10px rgba(0,120,110,0); } }

.tk-row__links { display:flex; justify-content:center; gap:14px; }
button.tk-row__link { background:none; padding:0; cursor:pointer; }

/* 친구에게 보내기 */
.tk-friends__h { font-size:15px; font-weight:800; margin-bottom: var(--sp-3); }
.tk-friends__h small { font-weight:500; color: var(--text-dim); font-size:12px; }
.tk-friends__grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:8px; margin-bottom: var(--sp-5); }
.tk-friend { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; font-size:14px; background: var(--white); }
.tk-friend:has(input:checked) { border-color: var(--brand); background: var(--brand-light); }
.tk-friend input { width:18px; height:18px; accent-color: var(--brand); }
.tk-friend img, .tk-friend__avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background: var(--gray-100); }
.tk-friend span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tk-pop__panel--alert { max-width:380px; text-align:center; }
.tk-alert__icon { font-size:36px; line-height:1; }
.tk-alert__title { margin-top: var(--sp-3); font-size:17px; font-weight:800; letter-spacing:-.02em; }
.tk-alert__msg { margin: var(--sp-2) 0 var(--sp-5); font-size:13.5px; line-height:1.6; color: var(--text-sub); word-break:keep-all; }

.header__ticket { color: #1b64da !important; font-weight:700; white-space:nowrap; }

/* ==========================================================================
   NBM AI 비서 (assistant/, p/) — ai- · lp-
   ========================================================================== */
.ai { padding-bottom: var(--sp-12); }
.ai-hero { display:grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-8); align-items:center; margin-top: var(--sp-6); padding: var(--sp-10) var(--sp-8); border-radius:24px; background: linear-gradient(135deg, #14202e 0%, #1f3f5a 55%, #106b62 100%); color:#fff; }
.ai-hero__eyebrow { font-size:12px; font-weight:800; letter-spacing:.14em; color:#8fe3d5; text-transform:uppercase; }
.ai-hero__title { margin-top: var(--sp-2); font-size: clamp(28px, 4.2vw, 40px); font-weight:900; letter-spacing:-.04em; line-height:1.18; }
.ai-hero__title em { font-style:normal; color:#8fe3d5; }
.ai-hero__desc { margin-top: var(--sp-4); font-size:15px; line-height:1.7; color: rgba(255,255,255,.82); max-width:520px; }
.ai-hero .btn--primary { margin-top: var(--sp-6); }
.ai-hero__steps { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ai-hero__steps li { display:grid; grid-template-columns: 30px 1fr; gap:10px 12px; align-items:center; padding:12px 14px; border-radius:12px; background: rgba(255,255,255,.08); font-size:14px; font-weight:700; }
.ai-hero__steps li b { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#8fe3d5; color:#0f1b2d; font-size:13px; }
.ai-hero__steps li small { grid-column:2; font-weight:400; font-size:12.5px; color: rgba(255,255,255,.7); }

.ai-stats { display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-6); }
.ai-stat { display:flex; flex-direction:column; gap:2px; padding: var(--sp-5); border:1px solid var(--line); border-radius:16px; background: var(--white); color: var(--text); transition: border-color .2s; }
a.ai-stat:hover { border-color: var(--brand); }
.ai-stat.is-hot { border-color: var(--point); background: var(--point-soft); }
.ai-stat__label { font-size:12.5px; color: var(--text-dim); font-weight:600; }
.ai-stat__val { font-size:30px; font-weight:900; letter-spacing:-.03em; line-height:1.1; }
.ai-stat__val--sm { font-size:17px; word-break:break-all; }
.ai-stat small { font-size:12px; color: var(--text-sub); }
.ai-stat--qr { align-items:flex-start; }
.ai-stat__qr img, .ai-stat__qr canvas { width:88px !important; height:88px !important; display:block; }

.ai-ideas { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.ai-idea { display:flex; flex-direction:column; gap:6px; padding: var(--sp-4) var(--sp-5); border:1px solid var(--line); border-radius:14px; background: var(--white); color: var(--text); }
.ai-idea:hover { border-color: var(--brand); }
.ai-idea__type { font-size:12px; color: var(--text-dim); font-weight:600; }
.ai-idea b { font-size:15px; line-height:1.4; letter-spacing:-.01em; }
.ai-idea__go { margin-top:auto; font-size:12.5px; color: var(--brand-dark); font-weight:700; }

.ai-list { display:grid; gap:8px; }
.ai-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background: var(--white); color: var(--text); }
.ai-item:hover { border-color: var(--brand); }
.ai-item__type { font-size:22px; flex-shrink:0; }
.ai-item__body { flex:1; min-width:0; }
.ai-item__body b { display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-item__body small { display:block; font-size:12px; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ai-form__grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.ai-card { padding: var(--sp-6); border:1px solid var(--line); border-radius:16px; background: var(--white); }
.ai-card__h { font-size:15px; font-weight:800; margin-bottom: var(--sp-4); }
.ai-card + .ai-card { margin-top: var(--sp-3); }
.ai-form__grid > .ai-card + .ai-card { margin-top: 0; }
.ai-tones, .lp__interests { display:flex; flex-wrap:wrap; gap:8px; }
.ai-tone { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--gray-300); border-radius:999px; font-size:13px; cursor:pointer; background: var(--white); }
.ai-tone.is-on { border-color: var(--brand); background: var(--brand-light); color: var(--brand-darker); font-weight:700; }
.ai-tone input { width:14px; height:14px; accent-color: var(--brand); }
.ai-slug { display:flex; align-items:center; border:1px solid var(--gray-300); border-radius: var(--radius-sm); overflow:hidden; }
.ai-slug span { padding:0 10px; height:48px; display:flex; align-items:center; background: var(--gray-050); color: var(--text-dim); font-size:12.5px; white-space:nowrap; }
.field .ai-slug input { border:0; border-radius:0; height:48px; min-width:0; }
.ai-note { margin-top: var(--sp-5); padding: var(--sp-4); border-radius:12px; background: var(--gray-050); font-size:12.5px; color: var(--text-sub); }
.ai-note b { display:block; margin-bottom:4px; color: var(--text); }
.ai-note ul { margin:0; padding-left:16px; line-height:1.7; }

.ai-gen { padding: var(--sp-6); border:1px solid var(--line); border-radius:18px; background: var(--white); }
.ai-gen__types { display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; margin-bottom: var(--sp-5); }
.ai-type { display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:12px 8px; border:1px solid var(--gray-300); border-radius:12px; cursor:pointer; background: var(--white); }
.ai-type input { position:absolute; opacity:0; width:0; height:0; }
.ai-type.is-on { border-color: var(--brand); background: var(--brand-light); }
.ai-type__icon { font-size:22px; }
.ai-type b { font-size:13px; }
.ai-type small { font-size:11px; color: var(--text-dim); line-height:1.3; }
.ai-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; color: var(--text-dim); }
.ai-gen__wait { margin-top: var(--sp-3); font-size:13px; color: var(--brand-dark); font-weight:700; }
.ai-gen__wait::before { content:""; display:inline-block; width:12px; height:12px; margin-right:6px; border:2px solid var(--brand); border-right-color:transparent; border-radius:50%; animation: ai-spin .8s linear infinite; vertical-align:-1px; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

.ai-view { display:grid; grid-template-columns: 1fr 300px; gap: var(--sp-5); align-items:start; }
.ai-view__kind { font-size:13px; color: var(--text-dim); margin-bottom:4px; }
.ai-view__main { padding: var(--sp-6); border:1px solid var(--line); border-radius:18px; background: var(--white); }
.ai-view__main textarea { line-height:1.7; font-size:15px; }
.ai-view__actions { display:flex; flex-wrap:wrap; gap:8px; }
.ai-check { margin-bottom: var(--sp-5); padding: 14px 16px; border-radius:12px; border:1px solid var(--line); background: var(--gray-050); }
.ai-check.is-ok { background: var(--brand-light); border-color: transparent; }
.ai-check.is-bad { background:#fff4f2; border-color: #f6c8c0; }
.ai-check__h { font-size:14.5px; font-weight:800; }
.ai-check__h small { font-weight:400; color: var(--text-dim); font-size:11.5px; margin-left:6px; }
.ai-check__desc { margin-top:4px; font-size:13px; color: var(--text-sub); }
.ai-check__list { margin: 8px 0 10px; padding-left:0; list-style:none; display:grid; gap:6px; }
.ai-check__list li { padding:8px 10px; border-radius:8px; background: rgba(255,255,255,.7); font-size:13px; line-height:1.5; }
.ai-check__list li.is-ban { border-left:3px solid var(--point); }
.ai-check__list li.is-warn { border-left:3px solid #e0a100; }
.ai-check__list li span { color: var(--text-sub); }
.ai-check__list li em { display:block; font-style:normal; color: var(--brand-dark); font-weight:700; }
.ai-status { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ai-status small { color: var(--text-dim); font-size:12px; }
.ai-status__btns { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.ai-links { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; }
.ai-links a { color: var(--brand-dark); font-weight:700; }

.ai-leads { display:grid; gap:8px; }
.ai-lead { border:1px solid var(--line); border-radius:12px; background: var(--white); }
.ai-lead.is-new { border-color: var(--point); }
.ai-lead summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 16px; cursor:pointer; list-style:none; }
.ai-lead summary::-webkit-details-marker { display:none; }
.ai-lead__name { font-size:15px; font-weight:800; }
.ai-lead__hp a { color: var(--text-sub); font-variant-numeric: tabular-nums; }
.ai-lead summary small { margin-left:auto; color: var(--text-dim); font-size:12px; }
.ai-lead__body { padding: 0 16px 16px; }
.ai-lead__msg { margin:0 0 10px; padding:10px 14px; border-left:3px solid var(--gray-300); background: var(--gray-050); font-size:13.5px; color: var(--text-sub); border-radius:0 8px 8px 0; }
.ai-lead__quick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.ai-lead__form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ai-lead__form input[type=text] { flex:1; min-width:180px; height:40px; padding:0 12px; border:1px solid var(--gray-300); border-radius: var(--radius-sm); font-size:13.5px; }

/* 모객 페이지 */
.is-landing .catbar, .is-landing .header__links, .is-landing .header__coupon { display:none !important; }
.lp { max-width:640px; margin: var(--sp-6) auto 0; }
.lp__head { text-align:center; padding: var(--sp-8) var(--sp-5); border-radius:24px; background: linear-gradient(160deg, #eef8f6 0%, #ffffff 60%); border:1px solid var(--line); }
.lp__avatar { width:72px; height:72px; margin:0 auto; display:grid; place-items:center; border-radius:50%; background: var(--brand); color:#fff; font-size:28px; font-weight:900; }
.lp__name { margin-top: var(--sp-3); font-size:15px; font-weight:800; }
.lp__name small { font-weight:600; color: var(--text-dim); margin-left:4px; }
.lp__headline { margin-top:6px; font-size: clamp(20px, 4.5vw, 26px); font-weight:900; letter-spacing:-.03em; line-height:1.3; text-wrap:balance; }
.lp__meta { margin-top:6px; font-size:13px; color: var(--text-sub); }
.lp__links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top: var(--sp-5); }
.lp__h { font-size:17px; font-weight:800; margin-bottom: var(--sp-3); letter-spacing:-.02em; }
.lp__story { margin-top: var(--sp-6); padding: 0 var(--sp-2); font-size:15px; line-height:1.85; color: var(--text); }
.lp__story p + p { margin-top: 1em; }
.lp__form { margin-top: var(--sp-8); padding: var(--sp-6); border:1px solid var(--line); border-radius:18px; background: var(--white); }
.lp__done { text-align:center; padding: var(--sp-5) 0; font-size:15px; }
.lp__foot { margin-top: var(--sp-8); text-align:center; font-size:12px; color: var(--text-dim); }

@media (max-width: 899px) {
  .ai-hero { grid-template-columns: 1fr; padding: 28px var(--sp-5); }
  .ai-stats { grid-template-columns: 1fr 1fr; }
  .ai-ideas { grid-template-columns: 1fr 1fr; }
  .ai-form__grid, .ai-view { grid-template-columns: 1fr; }
  .ai-gen__types { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .ai-ideas { grid-template-columns: 1fr; }
  .ai-gen__types { grid-template-columns: 1fr 1fr; }
  .ai-gen { padding: var(--sp-4); }
  .ai-view__main, .ai-card { padding: var(--sp-4); }
  .ai-slug span { font-size:11px; padding:0 6px; }
  .ai-lead summary small { margin-left:0; width:100%; }
}

.is-landing .msearch, .is-landing .subnav { display:none !important; }

.ai-sched { display:grid; gap:6px; }
.ai-ok { font-size:13.5px; color: var(--brand-darker); font-weight:700; }
.ai-skill { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; }
.ai-skill code { padding:6px 10px; border-radius:8px; background: var(--gray-050); border:1px solid var(--line); font-size:12px; word-break:break-all; cursor:pointer; }
.ai-howto summary { cursor:pointer; font-weight:700; font-size:14px; margin-top:10px; }
.ai-howto ol { margin:8px 0 0; padding-left:20px; font-size:13.5px; line-height:1.8; }
.tag--warn { background:#fff8e6; color:#96620a; }
.ai-replies { display:grid; gap:10px; }
.ai-reply { padding:12px 14px; border:1px solid var(--line); border-radius:12px; background: var(--white); }
.ai-reply__src { font-size:13px; color: var(--text-dim); margin-bottom:6px; }
.ai-reply__txt { font-size:14.5px; line-height:1.6; }
.ai-reply__btns { margin-top:8px; }

.ai-voice { margin: var(--sp-4) 0; padding: var(--sp-4); border:1px dashed var(--gray-300); border-radius:12px; background: var(--gray-050); }
.ai-voice__h { font-size:14.5px; font-weight:800; margin-bottom:4px; }
.ai-voice__row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.ai-voice__time { font-variant-numeric: tabular-nums; font-weight:800; color: var(--point); min-width:44px; }
.ai-prompter { margin:12px 0 0; padding: 12px 16px 12px 36px; border-radius:10px; background: var(--white); border:1px solid var(--line); font-size:18px; line-height:1.9; font-weight:700; }
.ai-voice__done { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; font-size:13px; }
.ai-voice__done audio { height:36px; max-width:260px; }

.ai-tts { margin-top:12px; padding-top:12px; border-top:1px dashed var(--gray-300); }
.ai-tts__or { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; color: var(--text-dim); margin-bottom:4px; }
.ai-tts__lbl { display:block; font-size:14px; font-weight:800; margin-bottom:6px; }

/* AI 비서 — 화면 가운데 로딩 */
.ai-loading { position:fixed; inset:0; z-index:400; display:none; place-items:center; padding:16px; background: rgba(22,24,29,.55); backdrop-filter: blur(2px); }
.ai-loading.is-on { display:grid; }
.ai-loading__panel { width:100%; max-width:360px; padding:32px 28px 24px; border-radius:20px; background:#fff; text-align:center; box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: ai-pop .2s ease-out; }
@keyframes ai-pop { from { transform: translateY(10px); opacity:0; } to { transform:none; opacity:1; } }
.ai-loading__spin { width:52px; height:52px; margin:0 auto 14px; border-radius:50%; border:5px solid var(--brand-light); border-top-color: var(--brand); animation: ai-spin .9s linear infinite; }
.ai-loading__title { font-size:17px; font-weight:800; letter-spacing:-.02em; }
.ai-loading__sub { margin-top:6px; font-size:13px; line-height:1.6; color: var(--text-sub); word-break:keep-all; min-height:20px; }
.ai-loading__bar { position:relative; height:6px; margin:16px 0 8px; border-radius:3px; background: var(--gray-100); overflow:hidden; }
.ai-loading__bar span { position:absolute; left:-40%; top:0; bottom:0; width:40%; border-radius:3px; background: linear-gradient(90deg, var(--brand-light), var(--brand)); animation: ai-slide 1.4s ease-in-out infinite; }
@keyframes ai-slide { 0% { left:-40%; } 100% { left:100%; } }
.ai-loading__time { font-size:12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ai-loading__spin, .ai-loading__bar span { animation-duration: 3s; } }
/* AI 비서 — 이달 제작 현황 */
.ai-stats { grid-template-columns: repeat(4, 1fr); }
.ai-usage { display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-5); padding: var(--sp-5); border:1px solid var(--line); border-radius:16px; background: var(--white); }
.ai-usage__bars { display:grid; gap:14px; align-content:start; }
.ai-usage__lbl { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13.5px; margin-bottom:6px; }
.ai-usage__lbl b { font-size:14px; }
.ai-usage__lbl span { color: var(--text-sub); font-variant-numeric: tabular-nums; }
.ai-usage__track { position:relative; height:14px; border-radius:7px; background: var(--gray-100); overflow:hidden; }
.ai-usage__track span { display:block; height:100%; border-radius:7px; background: linear-gradient(90deg, var(--brand-light), var(--brand)); transition: width .6s ease; }
.ai-usage__track em { position:absolute; right:8px; top:0; line-height:14px; font-size:10.5px; font-style:normal; font-weight:800; color: var(--text-sub); }
.ai-usage__track.is-warn span { background: linear-gradient(90deg, #ffe08a, #e0a100); }
.ai-usage__track.is-full span { background: linear-gradient(90deg, #f6a8a0, var(--point)); }
.ai-usage__track.is-free span { background: linear-gradient(90deg, #dbe4ff, #6f8cff); }
.ai-usage__chart-h { font-size:13px; font-weight:800; margin-bottom:8px; }
.ai-usage__chart-h small { font-weight:500; color: var(--text-dim); margin-left:6px; }
.ai-chart { display:grid; grid-template-columns: repeat(var(--n), 1fr); gap:3px; height:120px; align-items:end; padding-bottom:18px; position:relative; border-bottom:1px solid var(--line); }
.ai-chart__col { position:relative; height:100%; display:flex; align-items:flex-end; }
.ai-chart__bar { width:100%; border-radius:3px 3px 0 0; background: var(--brand); position:relative; overflow:hidden; min-height:0; }
.ai-chart__m { position:absolute; left:0; right:0; bottom:0; background:#6f8cff; display:block; }
.ai-chart__col.is-future .ai-chart__bar { opacity:.25; }
.ai-chart__col.is-today::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background: var(--point); border-radius:2px; }
.ai-chart__d { position:absolute; left:50%; bottom:-17px; transform:translateX(-50%); font-size:10px; color: var(--text-dim); }
@media (max-width: 899px) { .ai-usage { grid-template-columns: 1fr; } .ai-chart { height:90px; } }
.ai-lg { display:inline-block; width:10px; height:10px; border-radius:2px; margin:0 4px 0 8px; vertical-align:-1px; }

/* AI 비서 — 채널 그룹 · 설명서 */
.ai-links-group { margin-bottom: var(--sp-5); padding: var(--sp-4); border:1px solid var(--line); border-radius:12px; background: var(--gray-050); }
.ai-links-group .field { margin-bottom: var(--sp-4); }
.ai-links-group .field:last-child { margin-bottom:0; }
.ai-links-group__h { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom: var(--sp-3); font-size:13px; color: var(--text-sub); }
.ai-links-group__h a { color: var(--brand-dark); font-weight:700; margin-left:auto; }
.ai-help { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background: var(--gray-200); color: var(--text-sub); font-size:11px; font-weight:800; margin-left:4px; vertical-align:middle; }
.ai-help:hover { background: var(--brand); color:#fff; }
.ai-st { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.ai-st--on { background: var(--brand-light); color: var(--brand-darker); }
.ai-st--now { background: var(--brand-light); color: var(--brand-darker); }
.ai-st--wait { background: var(--gray-100); color: var(--text-sub); }
.ai-st--manual { background:#fff8e6; color:#96620a; }
.ai-chan-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.ai-chan { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; border:1px solid var(--line); border-radius:12px; background: var(--white); text-align:center; }
.ai-chan.is-on { border-color: var(--brand); }
.ai-chan__icon { font-size:24px; line-height:0; }
.ai-logo { display:inline-block; vertical-align:-0.22em; border-radius:22%; }
.ai-card__h .ai-logo { vertical-align:-0.3em; margin-right:2px; }
.btn .ai-logo { vertical-align:-0.25em; margin-right:4px; }
.ai-logo-row { display:inline-flex; align-items:center; gap:6px; }
.ai-chan b { font-size:13.5px; }
.ai-chan__link { font-size:12px; color: var(--brand-dark); font-weight:700; text-decoration:underline; }
.ai-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
.ai-table th { text-align:left; padding:8px 10px; background: var(--gray-050); border-bottom:1px solid var(--line); font-size:12.5px; color: var(--text-sub); }
.ai-table td { padding:10px; border-bottom:1px solid var(--rule, var(--line)); vertical-align:middle; }
.ai-table__ready { color: var(--text-sub); font-size:13px; }
.ai-guide { margin-top: var(--sp-4); scroll-margin-top: 120px; }
.ai-guide__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.ai-guide__what { font-size:14px; line-height:1.7; color: var(--text); margin-bottom: var(--sp-4); }
.ai-guide__grid { display:grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-5); }
.ai-guide__h { font-size:13px; font-weight:800; color: var(--brand-darker); margin-bottom:6px; letter-spacing:.02em; }
.ai-guide__grid ul, .ai-guide__grid ol { margin:0; padding-left:18px; font-size:13.5px; line-height:1.8; color: var(--text-sub); }
.ai-guide__grid code { font-size:11.5px; background: var(--gray-050); padding:2px 6px; border-radius:4px; word-break:break-all; }
.ai-guide__notes { margin-top: var(--sp-4); padding:12px 14px; border-radius:10px; background:#fff8e6; font-size:13px; color:#6b4a00; }
.ai-guide__notes b { display:block; margin-bottom:4px; }
.ai-guide__notes ul { margin:0; padding-left:18px; line-height:1.7; }
@media (max-width: 700px) { .ai-guide__grid { grid-template-columns: 1fr; } }
/* ===== 랜딩 페이지 꾸미기 (2026-09-17) — 테마색 --lp-accent / --lp-soft 는 p/index.php 가 inline 으로 정한다 ===== */
.is-landing .lp .btn--primary, .is-landing .lp .btn--primary:hover { background: var(--lp-accent); border-color: var(--lp-accent); color:#fff; }
.is-landing .lp__avatar { background: var(--lp-accent); }
.is-landing .lp__head { background: linear-gradient(160deg, var(--lp-soft) 0%, #ffffff 60%); }
.is-landing .lp__h { position:relative; padding-left:12px; }
.is-landing .lp__h::before { content:""; position:absolute; left:0; top:.2em; width:4px; height:1em; border-radius:2px; background: var(--lp-accent); }
.is-landing .lp input[type=radio], .is-landing .lp input[type=checkbox] { accent-color: var(--lp-accent); }
.is-landing .lp .ai-tone.is-on { border-color: var(--lp-accent); color: var(--lp-accent); background: var(--lp-soft); }
.is-landing .lp__sns .ai-logo { vertical-align:-0.25em; margin-right:2px; }
.lp__head--cover { position:relative; overflow:hidden; background-size:cover !important; background-position:center; border:0; }
.lp__head--cover::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); }
.lp__head--cover .lp__head-in { position:relative; color:#fff; }
.lp__head--cover .lp__name, .lp__head--cover .lp__headline, .lp__head--cover .lp__meta, .lp__head--cover .lp__name small { color:#fff; }
.lp__head--cover .btn--line { background:rgba(255,255,255,.92); border-color:transparent; color:#111; }
.lp__photo { width:96px; height:96px; border-radius:50%; object-fit:cover; margin:0 auto; display:block; border:4px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,.15); }
.lp__sec { margin-top: 28px; }
.lp__gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.lp__gallery--1 { grid-template-columns: 1fr; } .lp__gallery--2 { grid-template-columns: 1fr 1fr; }
.lp__gallery a { display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; background: var(--gray-100); }
.lp__gallery--1 a { aspect-ratio: 4/5; }
.lp__gallery img { width:100%; height:100%; object-fit:cover; display:block; }
.lp__video { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; }
.lp__video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.lp__offers { display:grid; gap:10px; }
.lp__offer { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:14px; background: var(--white); }
.lp__offer img { width:84px; height:84px; border-radius:10px; object-fit:cover; flex:0 0 84px; }
.lp__offer-body b { display:block; font-size:15px; margin-bottom:4px; }
.lp__offer-body p { font-size:14px; color: var(--text-sub); line-height:1.6; }
.lp__reviews { display:grid; gap:10px; }
.lp__review { margin:0; padding:14px 16px; border-radius:14px; background: var(--lp-soft); font-size:14.5px; line-height:1.7; }
.lp__review footer { margin-top:6px; font-size:12.5px; color: var(--text-dim); }
.lp__note { margin-top:8px; font-size:12px; color: var(--text-dim); }
.lp__faq { border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin-bottom:8px; background: var(--white); }
.lp__faq summary { cursor:pointer; font-weight:700; font-size:14.5px; list-style:none; }
.lp__faq summary::before { content:"Q"; display:inline-block; margin-right:8px; color: var(--lp-accent); font-weight:900; }
.lp__faq p { margin-top:8px; font-size:14px; color: var(--text-sub); line-height:1.7; }
.lp__addr { font-size:15px; font-weight:700; margin-bottom:6px; }
.lp__closing { margin-top: 28px; text-align:center; font-size:15px; line-height:1.8; color: var(--text); padding:0 var(--sp-3); }
.lp-dark { background:#111318 !important; color:#e8e8ea; }
.lp-dark .lp__head { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,0)); border-color:#2a2d35; }
.lp-dark .lp__name, .lp-dark .lp__headline, .lp-dark .lp__story, .lp-dark .lp__addr, .lp-dark .lp__closing, .lp-dark .lp__offer-body b, .lp-dark .lp__faq summary { color:#f2f2f4; }
.lp-dark .lp__meta, .lp-dark .lp__offer-body p, .lp-dark .lp__faq p, .lp-dark .lp__note, .lp-dark .lp__foot, .lp-dark .field__hint { color:#a9adb8; }
.lp-dark .lp__form, .lp-dark .lp__offer, .lp-dark .lp__faq { background:#1a1d24; border-color:#2a2d35; }
.lp-dark .lp__review { background:#1f2230; color:#e8e8ea; }
.lp-dark .btn--line { background:#1a1d24; color:#e8e8ea; border-color:#3a3d47; }
.lp-dark input, .lp-dark textarea { background:#0f1116; color:#e8e8ea; border-color:#3a3d47; }
.lp-dark .lp .ai-tone { background:#1a1d24; color:#cfd2da; border-color:#3a3d47; }

/* 꾸미기 편집기 */
.lpe__themes { display:flex; flex-wrap:wrap; gap:8px; }
.lpe__theme { display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 6px; border:1.5px solid var(--line); border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; }
.lpe__theme input { display:none; }
.lpe__theme.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.lpe__swatch { width:20px; height:20px; border-radius:50%; background: var(--c); }
.lpe__preview { display:block; border-radius:10px; margin:6px 0 8px; object-fit:cover; }
.lpe__preview--cover { width:100%; max-height:140px; }
.lpe__preview--avatar { width:80px; height:80px; border-radius:50%; }
.lpe__order { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.lpe__sec { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background: var(--white); }
.lpe__sec .check { margin:0; }
.lpe__move { display:flex; gap:4px; flex:0 0 auto; }
.lpe__pick { display:grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.lpe__pick-item { position:relative; display:block; border:2px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; background: var(--gray-100); }
.lpe__pick-item input { position:absolute; top:6px; left:6px; z-index:1; }
.lpe__pick-item img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.lpe__pick-item span { display:block; font-size:11px; padding:4px 6px; color: var(--text-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background: var(--white); }
.lpe__pick-item.is-on { border-color: var(--brand); }
.lpe__rows { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.lpe__row { padding:12px; border:1px dashed var(--line); border-radius:12px; }
.lpe__row .field { margin-bottom:8px; } .lpe__row .field:last-child { margin-bottom:0; }
.lpe__row--tight { padding:10px 12px; margin-bottom:8px; }
@media (max-width: 720px) { .lpe__rows { grid-template-columns: 1fr; } }

/* 방문 통계 */
.st-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom: var(--sp-4); }
.st-range { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background: var(--white); }
.st-range__btn { padding:7px 14px; font-size:13px; font-weight:700; color: var(--text-sub); }
.st-range__btn.is-on { background: var(--brand); color:#fff; }
.st-tiles { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.st-tile { padding:16px 18px; border:1px solid var(--line); border-radius:16px; background: var(--white); display:grid; gap:4px; }
.st-tile__l { font-size:12.5px; color: var(--text-sub); font-weight:700; }
.st-tile__v { font-size:28px; font-weight:900; letter-spacing:-.02em; font-variant-numeric: tabular-nums; line-height:1.1; }
.st-tile small { font-size:12px; color: var(--text-dim); }
.st-up { color:#1a9a6c; font-weight:800; } .st-down { color:#d9534f; font-weight:800; }
.st-chart { display:grid; grid-template-columns: repeat(var(--n), 1fr); gap:3px; align-items:end; height:180px; padding-top:18px; }
.st-bar { position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.st-bar__v { display:block; width:100%; min-height:2px; border-radius:4px 4px 0 0; background: var(--brand-light, #bff3ea); position:relative; overflow:hidden; }
.st-bar__u { position:absolute; left:0; right:0; bottom:0; background: var(--brand); border-radius:4px 4px 0 0; }
.st-bar em { position:absolute; bottom:-18px; left:0; right:0; text-align:center; font-size:10.5px; color: var(--text-dim); font-style:normal; white-space:nowrap; }
.st-bar__lead { position:absolute; top:-16px; left:0; right:0; text-align:center; font-size:10px; font-style:normal; font-weight:800; color:#d9488a; }
.st-bar__lead::before { content:"● "; }
.st-chart + * { margin-top:22px; }
.st-list { display:grid; gap:8px; }
.st-row { display:grid; grid-template-columns: 150px 1fr 90px; align-items:center; gap:10px; font-size:13.5px; }
.st-row__l { display:flex; align-items:center; gap:6px; font-weight:700; }
.st-row__bar { height:10px; border-radius:5px; background: var(--gray-100); overflow:hidden; }
.st-row__bar span { display:block; height:100%; background: linear-gradient(90deg, var(--brand-light, #bff3ea), var(--brand)); border-radius:5px; }
.st-row__n { text-align:right; font-variant-numeric: tabular-nums; font-weight:700; }
.st-row__n small { color: var(--text-dim); font-weight:500; }
.st-dot { width:14px; height:14px; border-radius:50%; background: var(--gray-300, #ccc); display:inline-block; }
.st-hours { display:grid; grid-template-columns: repeat(24, 1fr); gap:2px; height:56px; align-items:end; }
.st-hours span { display:block; background: var(--brand-light, #bff3ea); border-radius:2px 2px 0 0; }
.st-hours span.is-peak { background: var(--brand); }
.st-hours__lbl { display:flex; justify-content:space-between; font-size:10.5px; color: var(--text-dim); margin-top:3px; }
.st-links { display:grid; gap:8px; }
.st-link { display:grid; grid-template-columns: 190px 1fr auto; align-items:center; gap:10px; }
.st-link__l { display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; }
.st-link__url { font-size:12px; padding:6px 10px; border-radius:8px; background: var(--gray-100); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.st-qr { display:flex; gap:16px; align-items:center; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); }
#st-qr-box { flex:0 0 132px; }
@media (max-width: 720px) { .st-tiles { grid-template-columns: 1fr 1fr; } .st-row { grid-template-columns: 120px 1fr 70px; } .st-link { grid-template-columns: 1fr; gap:4px; } .st-tile__v { font-size:22px; } }

/* ===== 사진 · 영상 만들기 (media.php) — 사진 그리드 · 만들기 탭 · 색 테마 (2026-09-17) ===== */
.ai-photos { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap:8px; margin-top:10px; }
.ai-photo { position:relative; display:block; aspect-ratio:1; border:2px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; background: var(--gray-100); }
.ai-photo input { position:absolute; opacity:0; width:0; height:0; }
.ai-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.ai-photo.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.ai-photo__n { position:absolute; left:6px; top:6px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background: var(--brand); color:#fff; font-size:12px; font-weight:800; display:none; align-items:center; justify-content:center; }
.ai-photo.is-on .ai-photo__n { display:inline-flex; }
.ai-photo__del { position:absolute; right:6px; top:6px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:12px; cursor:pointer; opacity:0; transition:opacity .15s; }
.ai-photo:hover .ai-photo__del { opacity:1; }
@media (hover:none) { .ai-photo__del { opacity:1; } }
.ai-make-tabs { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: var(--sp-4); }
.ai-make-tabs .ai-type { padding:16px 10px; }
.ai-make-tabs .ai-type__icon { font-size:26px; }
.ai-themes { display:flex; flex-wrap:wrap; gap:8px; }
.ai-theme { display:flex; flex-direction:column; align-items:center; gap:4px; width:76px; padding:6px; border:2px solid var(--line); border-radius:12px; cursor:pointer; background: var(--white); }
.ai-theme input { position:absolute; opacity:0; width:0; height:0; }
.ai-theme span { width:100%; height:44px; border-radius:8px; background: linear-gradient(160deg, var(--t1), var(--t2)); color: var(--tf); font-weight:900; font-size:18px; display:grid; place-items:center; }
.ai-theme small { font-size:11px; color: var(--text-sub); white-space:nowrap; }
.ai-theme.is-on { border-color: var(--brand); background: var(--brand-light); }
/* 만든 카드뉴스 · 영상 갤러리 */
.ai-sets { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-top:10px; }
.ai-set { border:1px solid var(--line); border-radius:14px; overflow:hidden; background: var(--white); display:flex; flex-direction:column; }
.ai-set__thumb { display:block; aspect-ratio: 4/5; background: var(--gray-100); overflow:hidden; }
.ai-set__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ai-set__thumb--v { aspect-ratio: 9/16; max-height:320px; display:grid; place-items:center; background:#111; color:#aaa; font-size:13px; }
.ai-set__thumb--v video { width:100%; height:100%; object-fit:contain; background:#000; }
.ai-set__body { padding:10px 12px 12px; display:grid; gap:4px; }
.ai-set__body b { font-size:13.5px; line-height:1.35; }
.ai-set__body small { font-size:11.5px; color: var(--text-dim); }
.ai-set__btns { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.ai-set__wait { font-size:13px; }
@media (max-width: 600px) { .ai-sets { grid-template-columns: 1fr 1fr; } }

/* 사진 · 영상 — 소리 옵션 카드 (배경음악 · 내 목소리 · AI 성우) */
.ai-snd { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background: var(--white); margin-top: var(--sp-3); }
.ai-snd__ico { flex:0 0 44px; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px; background: var(--brand-light); }
.ai-snd--voice .ai-snd__ico { background:#fff0f3; } .ai-snd--tts .ai-snd__ico { background:#f3f0ff; }
.ai-snd__body { flex:1; min-width:0; }
.ai-snd__t { display:block; font-size:14.5px; font-weight:800; margin-bottom:8px; }
.ai-snd__row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ai-snd__row .tk-select { flex:1; min-width:180px; }
.ai-snd__row--tts .tk-select { flex:0 1 auto; min-width:150px; }
.ai-snd__lbl { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color: var(--text-sub); }
.ai-snd .field__hint { margin-top:8px; }
.ai-voice { margin: var(--sp-4) 0; padding:0; border:0; background:transparent; }
.ai-voice .ai-snd { margin-top:0; }
.ai-voice__row { margin-top:12px; }
.ai-voice__time { font-size:15px; }
.ai-steps { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 6px; padding:0; list-style:none; font-size:13px; font-weight:700; color: var(--text-sub); }
.ai-steps i { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:6px; border-radius:50%; background: var(--brand); color:#fff; font-style:normal; font-size:11.5px; font-weight:900; }
.ai-tts { margin:10px 0; padding:0; border:0; text-align:center; position:relative; }
.ai-tts::before { content:""; position:absolute; left:0; right:0; top:50%; border-top:1px dashed var(--gray-300); }
.ai-tts__or { position:relative; background: var(--gray-050, #fafafa); padding:0 10px; margin:0; }
.ai-prompter { margin-top:12px; }.ai-snd__row .tk-select { height:46px; }
.ai-snd__up { height:46px; padding:0 18px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; }
.ai-voice__row .btn { height:42px; display:inline-flex; align-items:center; }
.ai-stat small a { text-decoration:underline; color: var(--brand); }
.field .ai-snd__up, .field .ai-snd label.btn, .ai-voice label.btn { display:inline-flex; align-items:center; justify-content:center; margin:0; font-size:14px; font-weight:700; }

.lpe__skins { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.lpe__skin { display:block; border:2px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; background: var(--white); }
.lpe__skin input { display:none; }
.lpe__skin img { display:block; width:100%; aspect-ratio: 4/3; object-fit:cover; object-position:top; background: var(--gray-100); }
.lpe__skin b { display:block; padding:10px 12px 0; font-size:14px; }
.lpe__skin small { display:block; padding:2px 12px 12px; font-size:11.5px; color: var(--text-sub); line-height:1.4; }
.lpe__skin.is-on { border-color: var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
/* 프로필 사진 업로드 (profile.php) */
.ai-avatar { display:flex; gap:16px; align-items:center; padding:14px 16px; border:1px dashed var(--gray-300); border-radius:14px; margin-bottom:16px; background: var(--gray-050, #fafafa); }
.ai-avatar__pic { flex:0 0 84px; width:84px; height:84px; border-radius:50%; overflow:hidden; background: var(--brand); color:#fff; display:grid; place-items:center; font-size:32px; font-weight:900; border:3px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.ai-avatar__pic img { width:100%; height:100%; object-fit:cover; display:block; }
.ai-avatar__body { flex:1; min-width:0; }
.ai-avatar__body > b { font-size:14px; }
.ai-avatar__btns { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.field .ai-avatar__up, .ai-avatar__up { display:inline-flex; align-items:center; margin:0; cursor:pointer; font-size:13px; font-weight:700; }
/* 섹션 드래그 정렬 */
.lpe__sec { cursor:default; }
.lpe__grip { flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color: var(--text-dim); font-size:18px; cursor:grab; user-select:none; touch-action:none; margin-right:4px; }
.lpe__grip:hover { background: var(--gray-100); color: var(--text); }
.lpe__sec.is-drag { opacity:.5; border-style:dashed; border-color: var(--brand); }
.lpe__sec .check { flex:1; }
/* 랜딩 꾸미기 — 사진 업로드 미리보기 · 저장 로딩바 */
.lpe__up { display:flex; gap:14px; align-items:center; }
.lpe__up-pic { flex:0 0 auto; display:grid; place-items:center; overflow:hidden; background: var(--gray-100); color: var(--text-dim); font-size:12px; border:1px dashed var(--gray-300); }
.lpe__up-pic--cover { width:180px; height:100px; border-radius:12px; }
.lpe__up-pic--avatar { width:88px; height:88px; border-radius:50%; }
.lpe__up-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.lpe__up-pic.is-new { border:2px solid var(--brand); }
.lpe__up-btns { display:flex; flex-direction:column; gap:8px; align-items:flex-start; min-width:0; }
.field .lpe__up-btn { display:inline-flex; align-items:center; margin:0; cursor:pointer; font-size:13px; font-weight:700; }
.lpe__up-name { font-size:12px; color: var(--text-sub); word-break:break-all; }
.lpe__loading { position:fixed; inset:0; z-index:1000; background:rgba(255,255,255,.7); backdrop-filter: blur(2px); display:grid; place-items:center; }
.lpe__loading-box { width:min(360px, 86vw); padding:22px 24px; background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.15); text-align:center; }
.lpe__loading-box b { display:block; font-size:15px; margin-bottom:12px; }
.lpe__loading-bar { height:10px; border-radius:5px; background: var(--gray-100); overflow:hidden; }
.lpe__loading-bar span { display:block; height:100%; width:0; border-radius:5px; background: linear-gradient(90deg, var(--brand-light), var(--brand)); transition: width .25s; }
.lpe__loading-box small { display:block; margin-top:8px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.lpe__up-pic--logo { width:180px; height:56px; border-radius:8px; background:#fff; }
.lpe__up-pic--logo img { object-fit:contain; }

/* 네임카드 만들기 */
.nc-layouts { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
.field .nc-layout, .nc-layout { display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; padding:10px 8px; font-weight:400; border:2px solid var(--line); border-radius:12px; cursor:pointer; text-align:center; background: var(--white); }
.nc-layout input { display:none; }
.nc-layout.is-on { border-color: var(--brand); background: var(--brand-light); }
.nc-layout b { font-size:13px; } .nc-layout small { font-size:11px; color: var(--text-sub); line-height:1.3; }
.nc-layout__pv { display:block; flex:none; width:72px; height:72px; border-radius:8px; border:1px solid var(--line); position:relative; overflow:hidden; background:#fff; }
.nc-layout__pv::after { content:""; position:absolute; width:22px; height:22px; border-radius:50%; background:#cfd3da; left:50%; top:30%; transform:translate(-50%,-50%); }
.nc-layout__pv--classic::before { content:""; position:absolute; left:0; right:0; top:0; height:16px; background: var(--brand); }
.nc-layout__pv--dark { background:#111; } .nc-layout__pv--dark::after { background:#555; }
.nc-layout__pv--photo { background: linear-gradient(180deg, #8a9bb0 0%, #111 100%); } .nc-layout__pv--photo::after { display:none; }
.nc-layout__pv--minimal::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--brand); }
.nc-layout__pv--minimal::after { left:22px; top:26px; width:16px; height:16px; }
.nc-sizes { display:flex; flex-wrap:wrap; gap:8px; }
.nc-swatch { width:28px; height:28px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); background: var(--c); cursor:pointer; }
.nc-swatch.is-on { box-shadow:0 0 0 3px var(--brand); }
.nc-result { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.nc-result img { max-width:min(100%, 420px); border-radius:12px; border:1px solid var(--line); box-shadow:0 8px 30px rgba(0,0,0,.1); }
.nc-result__btns { display:flex; flex-direction:column; gap:8px; align-items:flex-start; flex:1; min-width:220px; }
.ai-set__thumb--nc { aspect-ratio:1; background:#f2f2f2; }
.ai-set__thumb--nc img { object-fit:contain; }
/* 랜딩 자동 세팅 마법사 */
.lpa__n { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background: var(--brand); color:#fff; font-size:13px; margin-right:6px; vertical-align:-3px; }
.lpa__chips { display:flex; flex-wrap:wrap; gap:8px; }
.lpa__styles { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.lpa__styles .lpe__skin img { aspect-ratio: 4/3; }
.lpa__banner { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; margin-bottom: var(--sp-4); border-radius:14px; background: linear-gradient(90deg, var(--brand-light), #fff); border:1px solid var(--line); font-size:14px; }
.lpe__todo { margin:0; padding-left:0; list-style:none; display:grid; gap:10px; font-size:14.5px; }
.lpe__todo li small { display:block; margin-left:26px; color: var(--text-dim); font-size:12.5px; }
.lpe__auto-pv iframe { width:100%; height:520px; border:1px solid var(--line); border-radius:14px; background:#fff; }
/* 예약 발행 : 채널 로고 선택 */
.ai-chsel { display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; }
.ai-chsel__it { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1.5px solid var(--gray-300); border-radius:10px; background: var(--white); cursor:pointer; font-size:13px; font-weight:600; color: var(--text); transition: border-color .15s, background .15s; }
.ai-chsel__it input { position:absolute; opacity:0; width:0; height:0; }
.ai-chsel__it .ai-logo { flex:none; border-radius:5px; }
.ai-chsel__it span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-chsel__it small { font-weight:400; color: var(--text-dim); font-size:11px; }
.ai-chsel__it:hover { border-color: var(--gray-400, #b8bcc4); }
.ai-chsel__it.is-on { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 1px var(--brand) inset; }
.ai-chsel__it:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
/* 콘텐츠 만들기 : AI 주제 추천 */
.ai-topics { margin-top:8px; }
.ai-topics__bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:12.5px; }
.ai-topics__list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding:12px; border:1px dashed var(--brand); border-radius:12px; background: var(--brand-light); }
.ai-topics__list .ai-gen__wait { margin:0; }
.ai-topic { display:inline-flex; align-items:center; padding:8px 12px; border:1px solid var(--gray-300); border-radius:999px; background: var(--white); font-size:13px; line-height:1.4; color: var(--text); cursor:pointer; text-align:left; transition: border-color .15s, background .15s; }
.ai-topic:hover { border-color: var(--brand); color: var(--brand-dark); }
.ai-topic.is-on { border-color: var(--brand); background: var(--brand); color:#fff; font-weight:600; }
.ai-topic--more { border-style:dashed; color: var(--text-dim); background:transparent; }
.ai-topic--more:hover { color: var(--brand-dark); background: var(--white); }
/* 비서 홈 : 제안 로딩 스켈레톤 */
.ai-idea--skel { pointer-events:none; }
.ai-idea--skel > * { display:block; border-radius:6px; background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%); background-size:200% 100%; animation: ai-skel 1.2s linear infinite; color:transparent; }
.ai-idea--skel .ai-idea__type { width:40%; height:12px; }
.ai-idea--skel b { width:90%; height:36px; }
.ai-idea--skel .ai-idea__go { width:30%; height:12px; }
@keyframes ai-skel { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .ai-idea--skel > * { animation:none; } }
/* 사진 올리기 진행 막대 */
.ai-up__bar { display:block; height:6px; margin-top:6px; border-radius:3px; background: var(--gray-200, #e5e7eb); overflow:hidden; max-width:360px; }
.ai-up__bar i { display:block; height:100%; width:0; background: var(--brand); transition: width .2s; }.ai-topics__seen { flex-basis:100%; margin:0 0 2px; font-size:12.5px; color: var(--text-dim); }
/* 로딩 패널 : 진행률 모드 */
.ai-loading__pct { display:block; margin-top:14px; font-size:22px; font-weight:800; color: var(--brand-dark); font-variant-numeric: tabular-nums; letter-spacing:-.02em; }
.ai-loading__pct + .ai-loading__bar { margin-top:6px; height:10px; border-radius:5px; }
.ai-loading__bar.is-det span { left:0; width:0; animation:none; transition: width .25s ease-out; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); }
/* 사진 · 영상 : 만들기 결과 */
.ai-result { margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:16px; background: var(--white); }
.ai-result__row { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-top:12px; }
.ai-result__vcol { flex:0 0 auto; width:min(100%, 270px); }
.ai-result__info { flex:1 1 280px; min-width:0; }
.ai-result__h { margin:0 0 6px; font-size:13px; font-weight:800; color: var(--text-sub); }
.ai-result__info .ai-result__h + .ai-result__h, .ai-result__info .ai-scenes + .ai-result__h { margin-top:14px; }
.ai-result__video { display:block; width:100%; aspect-ratio:9/16; border-radius:14px; background:#000; object-fit:cover; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.ai-result__video--wait { display:grid; place-items:center; background: linear-gradient(160deg, #23262f, #0f1115); }
.ai-result__video--wait .ai-gen__wait { color:#cfd3da; }
.ai-result__btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ai-scenes { margin:0; padding-left:22px; font-size:13.5px; line-height:1.6; }
.ai-scenes li { padding:2px 0; }
.ai-scenes small { color: var(--text-dim); font-size:11.5px; margin-left:4px; }
.ai-result__caption { width:100%; max-width:640px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:13px; line-height:1.6; color: var(--text); background: var(--gray-50, #f8f9fb); resize:vertical; }
.ai-cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:10px; margin-top:12px; }
.ai-cards__it { position:relative; display:block; aspect-ratio:4/5; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#f2f2f2; }
.ai-cards__it img { width:100%; height:100%; object-fit:cover; display:block; }
.ai-cards__it span { position:absolute; left:6px; top:6px; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background: rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
/* 영상 대본 미리보기 · 편집 */
.ai-script { display:grid; gap:12px; margin-top:12px; }
.ai-script__f { display:grid; gap:4px; font-size:13px; }
.ai-script__f > span { font-weight:700; color: var(--text-sub); font-size:12.5px; }
.ai-script__f input, .ai-script__f textarea, .ai-script__list textarea, .ai-script__dur input { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:13.5px; line-height:1.5; color: var(--text); background: var(--white); }
.ai-script__f input:focus, .ai-script__f textarea:focus, .ai-script__list textarea:focus, .ai-script__dur input:focus { outline:none; border-color: var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
.ai-script__list { margin:0; padding-left:0; list-style:none; counter-reset: sc; display:grid; gap:8px; }
.ai-script__list li { display:grid; grid-template-columns: 28px 1fr 84px 28px; gap:8px; align-items:center; }
.ai-script__list li::before { counter-increment: sc; content: counter(sc); width:26px; height:26px; border-radius:50%; background: var(--brand); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; }
.ai-script__list textarea { resize:none; }
.ai-script__dur { display:flex; align-items:center; gap:4px; font-size:12.5px; color: var(--text-dim); }
.ai-script__dur input { width:58px; padding:6px 6px; text-align:center; }
.ai-script__del { width:26px; height:26px; border:none; border-radius:50%; background:transparent; color: var(--text-dim); cursor:pointer; font-size:13px; }
.ai-script__del:hover { background: var(--gray-100); color: var(--danger, #e5484d); }
.ai-script .ai-result__btns { align-items:center; }
@media (max-width:520px) { .ai-script__list li { grid-template-columns: 24px 1fr 70px 24px; } }
/* 영상 품질 선택 */
.ai-quality { display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; margin-bottom:14px; }
.field .ai-quality__it, .ai-quality__it { display:flex; flex-direction:column; gap:3px; margin:0; padding:10px 12px; border:1.5px solid var(--gray-300); border-radius:12px; background: var(--white); cursor:pointer; font-weight:400; }
.ai-quality__it input { display:none; }
.ai-quality__it b { font-size:14px; display:flex; align-items:center; gap:6px; }
.ai-quality__it small { font-size:12px; color: var(--text-sub); line-height:1.4; }
.ai-quality__it.is-on { border-color: var(--brand); background: var(--brand-light); }
@media (max-width:520px) { .ai-quality { grid-template-columns: 1fr; } }
/* 안내용 강조 깜빡임 (사진 영역으로 올려 보낼 때) */
.ai-card.is-flash { animation: ai-flash 1.6s ease-out; }
@keyframes ai-flash { 0%, 40% { box-shadow: 0 0 0 4px var(--brand); border-color: var(--brand); } 100% { box-shadow: none; } }

/* 영상 길이 선택 */
.ai-len { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.field .ai-len .ai-tone { margin:0; font-weight:600; }
.ai-len .ai-tone small { font-weight:400; color: var(--text-dim); font-size:11.5px; }
/* 그리드 : 내 영상 클립 */
.ai-photo--v img { filter: brightness(.92); }
.ai-photo__v { position:absolute; right:6px; bottom:6px; padding:2px 7px; border-radius:8px; background: rgba(0,0,0,.65); color:#fff; font-size:11px; font-weight:700; }
/* 대본 보관함 */
.ai-scripts { margin-top:14px; border:1px solid var(--line); border-radius:12px; background: var(--white); }
.ai-scripts > summary { padding:10px 14px; cursor:pointer; font-weight:700; font-size:14px; list-style:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ai-scripts > summary::-webkit-details-marker { display:none; }
.ai-scripts > summary::before { content:"▸"; color: var(--text-dim); }
.ai-scripts[open] > summary::before { content:"▾"; }
.ai-scripts__list { display:grid; gap:6px; padding:0 14px 12px; }
.ai-scripts__it { display:grid; grid-template-columns: 1fr auto auto; gap:6px 12px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font-size:13px; }
.ai-scripts__it b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-scripts__it small { color: var(--text-dim); font-size:12px; white-space:nowrap; }
@media (max-width:520px) { .ai-scripts__it { grid-template-columns: 1fr auto; } .ai-scripts__it small { grid-column: 1 / -1; } }.tk-ticket__qr-off--ok { background: var(--brand-light); color: var(--brand-darker); }

/* 강의형태 5 셀리더역량교육 */
.cal__ev--cell { border-left-color:#8b5cf6; background:#f5f3ff; }
.tk-card--cell .tk-card__date { background:#f5f3ff; color:#6d28d9; }

/* 카톡에서 연 입장권 (t.php?v=qr) : 헤더 없이 QR 이 첫 화면에 */
.tk--qrfirst { padding-top: 12px; }
.tk--qrfirst .tk-pagehead { margin-bottom: 10px; }
.tk--qrfirst .tk-pagehead h1 { font-size: 20px; }
.tk--qrfirst .tk-ticket { grid-template-columns: 1fr; grid-template-areas: "qr" "main" "actions"; }
.tk--qrfirst .tk-ticket__qr { border-left: 0; border-bottom: 2px dashed var(--gray-200); padding: 18px; }
.tk--qrfirst .tk-ticket__qr small { font-size: 13px; font-weight: 700; color: var(--text); }
.tk--qrfirst .tk-ticket__qr-off { width: 240px; height: 240px; }
.tk--qrfirst .tk-notes__list { font-size: 13px; }
.tk--qrfirst .tk-tickets--solo, .tk--qrfirst .tk-ticket { max-width:100%; min-width:0; }
.tk--qrfirst .tk-ticket__info { min-width:0; overflow-wrap:anywhere; }
.tk--qrfirst .tk-ticket__main { flex-wrap:wrap; }

/* QR 화면 : 좌석 · 정보 가운데 정렬, 여러 장은 좌우 스와이프 */
.tk--qrfirst .tk-ticket__main { flex-direction:column; align-items:center; text-align:center; gap:10px; }
.tk--qrfirst .tk-ticket__seat { flex:0 0 auto; width:120px; }
.tk--qrfirst .tk-ticket__info { align-items:center; }
.tk--qrfirst .tk-ticket__actions { justify-content:center; }
.tk-swipe__hint { max-width:560px; margin:0 auto 8px; text-align:center; font-size:13px; color: var(--text-dim); }
.tk-swipe__hint b { color: var(--brand-darker); }
.tk-swipe { margin:0 calc(-1 * var(--sp-4)); }
.tk-swipe__track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 var(--sp-4); gap: var(--sp-3); }
.tk-swipe__track::-webkit-scrollbar { display:none; }
.tk-swipe__item { flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; }
.tk-swipe__dots { display:flex; justify-content:center; gap:6px; margin-top:10px; }
.tk-swipe__dots i { width:8px; height:8px; border-radius:50%; background: var(--gray-300); }
.tk-swipe__dots i.is-on { background: var(--brand); width:20px; border-radius:4px; }.tk-ticket__qr-off--ok { flex-direction:column; gap:6px; line-height:1.4; }
.tk-ticket__qr-off--ok b { font-size:20px; }
.tk-ticket__qr-off--ok small { font-size:12px; font-weight:500; color: var(--text-sub); text-align:center; }
.tk--qrfirst .tk-ticket__qr-off--ok { width:240px; height:240px; }
.tk-swipe__btn { width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:#fff; color: var(--text); font-size:12px; cursor:pointer; vertical-align:middle; margin:0 6px; }
.tk-swipe__btn:hover { border-color: var(--brand); color: var(--brand-darker); }
.tk-swipe__dots i { cursor:pointer; }
.tk-swipe__track { cursor:grab; user-select:none; }
@media (min-width: 700px) { .tk--qrfirst { max-width: 640px; } .tk--qrfirst .tk-swipe { margin: 0; } .tk--qrfirst .tk-swipe__track { padding: 0; } }
@media (min-width:1024px){ .tk-book__lec { top: calc(var(--header-h) + var(--catbar-h) + 50px + var(--sp-4)); } }

/* 메인 : 다가오는 일정 → 예매/일정 링크 */
.ticket__item { display:flex; gap: var(--sp-3); align-items:center; width:100%; color:inherit; border-radius:10px; padding:4px; margin:-4px; }
.ticket__item:hover { background: var(--gray-050); }
.ticket__item small em { font-style:normal; color: var(--brand-darker); font-weight:700; }
.buybox__row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.doc--extra { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-sub); }
.doc--extra strong { color: var(--text); }

/* 배송 현황 (주문 상세 · 실시간 갱신) 2026-09-23 */
.track { margin: var(--sp-4) 0 var(--sp-8); padding: var(--sp-5) var(--sp-4) var(--sp-4); border:1px solid var(--line); border-radius:16px; background: var(--white); }
.track .steps { margin: 0 0 var(--sp-4); }
.track__label { margin:0; text-align:center; font-size:14px; font-weight:700; color: var(--brand-darker); }
.track__ship { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:var(--sp-4);
  padding:12px 14px; border-radius:12px; background: var(--gray-50,#f9fafb); font-size:14px; }
.track__ship b { font-weight:800; }
.track__no { font-variant-numeric: tabular-nums; letter-spacing:.3px; font-weight:700; }
.track__ship a { color: var(--brand-darker); font-weight:700; text-decoration:none; }
.track__ship a:hover { text-decoration:underline; }
.track__ship small { color: var(--text-dim); }
.track__detail { list-style:none; margin:var(--sp-4) 0 0; padding:0; border-top:1px dashed var(--line); }
.track__detail li { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding:9px 2px; border-bottom:1px solid var(--gray-100,#f3f4f6); font-size:13px; }
.track__detail li:last-child { border-bottom:0; }
.track__detail span { min-width:112px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.track__detail b { font-weight:700; }
.track__detail small { color: var(--text-dim); }
@media (max-width:480px){ .track__detail span { min-width:96px; font-size:12px; } }

/* ── 화면 언어 단추 (한국어 / English) ──────────────────────────────
   Meta 앱 검수자가 영어 화면으로 바꿔 볼 수 있도록 AI 비서 · 로그인 화면에 둔다. */
.langsw { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--white); }
.langsw__b { padding:5px 12px; font-size:12px; font-weight:700; color:var(--text-sub); text-decoration:none; line-height:1.4; }
.langsw__b + .langsw__b { border-left:1px solid var(--line); }
.langsw__b.is-on { background:var(--brand); color:#fff; }
.langsw__b:hover { text-decoration:none; }
.pagehead--lang { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pagehead--lang > div { flex:1 1 320px; min-width:0; }

/* ── 해시태그 레이더 ────────────────────────────────────────── */
.tagchips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.tagchip { display:inline-flex; align-items:center; gap:4px; padding:6px 6px 6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--brand-tint); font-size:13px; font-weight:700; color:var(--brand-darker); }
.tagchip__x { width:20px; height:20px; border:0; border-radius:50%; background:transparent; color:var(--text-dim); font-size:15px; line-height:1; cursor:pointer; }
.tagchip__x:hover { background:var(--gray-200); color:var(--gray-900); }
.tagadd { display:flex; gap:8px; }
.tagadd input { flex:1 1 auto; min-width:0; }

.radar-it { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:10px; }
.radar-it__tag { display:inline-block; font-size:12px; font-weight:800; color:var(--brand-darker); background:var(--brand-light); padding:3px 9px; border-radius:999px; }
.radar-it__angle { margin-top:8px; font-size:15px; font-weight:700; line-height:1.5; }
.radar-it__hook { margin-top:6px; font-size:13.5px; color:var(--text-sub); line-height:1.6; }
.radar-it__tags { margin-top:6px; font-size:12.5px; color:var(--text-dim); word-break:break-all; }
.radar-it__go { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }

/* ── 댓글 자동 DM ──────────────────────────────────────────── */
.dm-rules { display:flex; flex-direction:column; gap:10px; }
.dm-rule { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; opacity:.6; }
.dm-rule.is-on { opacity:1; border-color:var(--brand); }
.dm-rule__head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.dm-rule__head small { color:var(--text-dim); font-size:12px; }
.dm-rule__head .right { margin-left:auto; display:flex; gap:6px; }
.dm-rule__msg { margin-top:10px; padding:10px 12px; background:var(--gray-100); border-radius:8px; font-size:13.5px; line-height:1.65; white-space:pre-wrap; }
.dm-rule__sub { margin-top:6px; font-size:12.5px; color:var(--text-dim); word-break:break-all; }
.dm-form { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.dm-form textarea { min-height:120px; line-height:1.6; }
.dm-form__btn { display:flex; gap:8px; margin-top:12px; }

/* ── 말 걸 사람 ────────────────────────────────────────────── */
.reach-list { display:flex; flex-direction:column; gap:12px; }
.reach { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.reach__top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.reach__who { font-size:15px; font-weight:800; color:var(--brand-darker); text-decoration:none; }
.reach__who:hover { text-decoration:underline; }
.reach__name { font-size:13px; color:var(--text-sub); }
.reach__src { font-size:11.5px; color:var(--text-dim); padding:2px 8px; border:1px solid var(--line); border-radius:999px; }
.reach__x { margin-left:auto; width:26px; height:26px; border:0; border-radius:50%; background:transparent; color:var(--text-dim); font-size:17px; line-height:1; cursor:pointer; }
.reach__x:hover { background:var(--gray-200); color:var(--gray-900); }
.reach__note { margin-top:8px; padding:8px 12px; background:var(--gray-100); border-radius:8px; font-size:13px; line-height:1.6; color:var(--text-sub); }
.reach__draft { margin-top:10px; width:100%; line-height:1.65; font-size:14px; }
.reach__btn { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }

/* ── 내 콘텐츠 목록 ─────────────────────────────────────────── */
.cont { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:10px; }
.cont__main { display:flex; gap:12px; flex:1 1 auto; min-width:0; text-decoration:none; color:inherit; }
.cont__main:hover b { color:var(--brand-darker); }
.cont__icon { font-size:22px; line-height:1.2; flex:0 0 auto; }
.cont__body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.cont__body b { font-size:15px; font-weight:700; line-height:1.45; }
.cont__body small { font-size:12px; color:var(--text-dim); }
.cont__prev { font-size:12.5px; color:var(--text-sub); font-style:normal; line-height:1.5; }
.cont__side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; }
.cont__sched { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.cont__chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--gray-100); color:var(--text-sub); white-space:nowrap; }
.cont__chip--published { background:var(--brand-light); color:var(--brand-darker); }
.cont__chip--pending { background:#eef2ff; color:#4553b8; }
.cont__chip--failed { background:#fdecec; color:#b83a3a; }
.cont__chip .ai-logo { width:14px; height:14px; }
@media (max-width:560px) {
  .cont { flex-direction:column; }
  .cont__side { flex-direction:row; align-items:center; flex-wrap:wrap; }
  .cont__sched { flex-direction:row; flex-wrap:wrap; }
}

/* ── 영상 캡션 만들기 : 어떤 영상인지 알려 주는 띠 ───────────── */
.capfor { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--brand); border-radius:12px; background:var(--brand-tint); margin-bottom:14px; }
.capfor__icon { font-size:22px; flex:0 0 auto; }
.capfor__body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.capfor__body b { font-size:14px; }
.capfor__body small { font-size:12.5px; color:var(--text-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 주제 추천 키워드 칸 */
.ai-topics__bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ai-topics__kw { flex:1 1 260px; min-width:0; max-width:420px; }

/* 자료 보관 기간 표시 */
.keep { display:block; margin-top:3px; font-size:12px; color:var(--text-dim); }
.keep--soon { color:#b8791f; font-weight:700; }

/* ── AI 비서 대분류 (마케팅 · CRM · 조직관리) ───────────────── */
.aicat { background:var(--gray-900); }
.aicat__row { display:flex; align-items:center; gap:4px; height:42px; overflow-x:auto; }
.aicat__it { display:inline-flex; align-items:center; height:30px; padding:0 16px; border-radius:999px; font-size:13.5px; font-weight:700; color:rgba(255,255,255,.72); text-decoration:none; white-space:nowrap; }
.aicat__it:hover { color:#fff; background:rgba(255,255,255,.12); text-decoration:none; }
.aicat__it.is-on { background:var(--brand); color:#fff; }
.aicat__soon { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 14px; border-radius:999px; font-size:13px; color:rgba(255,255,255,.38); white-space:nowrap; cursor:default; }
.aicat__soon small { font-size:11px; padding:1px 6px; border-radius:999px; background:rgba(255,255,255,.12); }

/* ── CRM 고객 목록 ─────────────────────────────────────────── */
.crm-list { display:flex; flex-direction:column; gap:8px; }
.crm { display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; text-decoration:none; color:inherit; }
.crm:hover { border-color:var(--brand); }
.crm:hover b { color:var(--brand-darker); }
.crm__face { flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--brand-light); color:var(--brand-darker); display:grid; place-items:center; font-size:17px; font-weight:800; }
.crm__body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.crm__body b { display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; flex-wrap:wrap; }
.crm__body small { font-size:12.5px; color:var(--text-dim); }
.crm__tags { font-size:12px; color:var(--brand-darker); font-style:normal; }
.crm__next { flex:0 0 auto; text-align:center; font-size:13px; font-weight:700; color:var(--text-sub); }
.crm__next small { display:block; font-size:10.5px; font-weight:500; color:var(--text-dim); }
.crm__next.is-due { color:#b8791f; }

/* 고객 카드 */
.crm-top { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.crm-cols { display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
.crm-main { min-width:0; }
.crm-side { display:flex; flex-direction:column; gap:14px; }
.crm-meta { display:grid; grid-template-columns:78px 1fr; gap:6px 10px; font-size:13.5px; }
.crm-meta dt { color:var(--text-dim); }
.crm-meta dd { word-break:break-word; }
.crm-meta dd.is-due { color:#b8791f; font-weight:700; }
.crm-memo { margin-top:10px; padding:10px 12px; background:var(--gray-100); border-radius:8px; font-size:13px; line-height:1.65; white-space:pre-wrap; }
.crm-bars { display:flex; flex-direction:column; gap:7px; }
.crm-bar { display:flex; align-items:center; gap:8px; font-size:12.5px; }
.crm-bar span { flex:0 0 46px; color:var(--text-sub); }
.crm-bar i { flex:1 1 auto; height:7px; border-radius:99px; background:var(--gray-200); overflow:hidden; }
.crm-bar i b { display:block; height:100%; background:var(--brand); }
.crm-bar em { flex:0 0 14px; text-align:right; font-style:normal; color:var(--text-dim); }

/* 상담 기록 */
.crm-note-add { display:flex; flex-direction:column; gap:8px; }
.crm-note-add__row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.crm-note-add__row input[type=text] { flex:1 1 200px; min-width:0; }
.crm-note-add__next { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-sub); white-space:nowrap; }
.crm-note-add textarea { line-height:1.65; }
.crm-notes { display:flex; flex-direction:column; gap:10px; }
.crm-note { position:relative; padding:12px 34px 12px 14px; border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:10px; background:#fff; }
.crm-note__head { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); flex-wrap:wrap; }
.crm-note__head b { color:var(--brand-darker); font-size:12.5px; }
.crm-note__head em { font-style:normal; padding:1px 7px; border-radius:999px; background:#eef2ff; color:#4553b8; }
.crm-note__x { position:absolute; top:8px; right:8px; width:22px; height:22px; border:0; border-radius:50%; background:transparent; color:var(--text-dim); font-size:15px; line-height:1; cursor:pointer; }
.crm-note__x:hover { background:var(--gray-200); color:var(--gray-900); }
.crm-note__body { margin-top:6px; font-size:13.5px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.crm-note__res { margin-top:6px; font-size:12.5px; color:var(--brand-darker); font-weight:600; }

/* AI 요약 */
.crm-brief { margin-bottom:12px; padding:14px 16px; border:1px solid var(--brand); border-radius:12px; background:var(--brand-tint); }
.crm-brief__sum { font-size:14px; line-height:1.75; }
.crm-brief__h { margin-top:10px; font-size:12px; font-weight:700; color:var(--brand-darker); }
.crm-brief__next { margin-top:4px; padding-left:18px; font-size:13.5px; line-height:1.8; }

/* 고객 폼 */
.crm-form { margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.crm-form__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.crm-form__btn { display:flex; gap:8px; margin-top:14px; }
.crm-more summary { cursor:pointer; font-size:13px; color:var(--text-sub); padding:8px 0; }
.crm-traits { display:flex; gap:10px; flex-wrap:wrap; }
.crm-trait { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-sub); }
.crm-trait select { width:62px; }

@media (max-width:820px) {
  .crm-cols { grid-template-columns:1fr; }
}

/* ── 통합 관리 인덱스 (AI 비서 홈) ──────────────────────────── */
.hub { margin:20px 0 4px; }
.hub__find { display:flex; gap:8px; margin-bottom:14px; }
.hub__find input { flex:1 1 auto; min-width:0; height:44px; padding:0 16px; border:1px solid var(--gray-300); border-radius:999px; font-size:14.5px; }
.hub__find input:focus { border-color:var(--brand); outline:none; }
.hub__cols { display:grid; grid-template-columns:1fr 300px; gap:14px; align-items:start; }
.hub__box { padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.hub__h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
.hub__h b { font-size:15px; font-weight:800; }
.hub__h a { font-size:12.5px; color:var(--text-sub); }
.hub__none { font-size:13px; color:var(--text-dim); line-height:1.7; }
.hub__it { display:flex; gap:10px; align-items:center; padding:9px 10px; border-radius:10px; text-decoration:none; color:inherit; }
.hub__it:hover { background:var(--gray-100); }
.hub__it--hot { background:#fff8e6; }
.hub__it--hot:hover { background:#fdf0cd; }
.hub__ic { flex:0 0 auto; font-size:17px; }
.hub__t { display:flex; flex-direction:column; gap:1px; min-width:0; }
.hub__t b { font-size:14px; font-weight:700; }
.hub__t small { font-size:12px; color:var(--text-dim); }
.hub__nums { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hub__nums a { padding:10px; border:1px solid var(--line); border-radius:10px; text-align:center; text-decoration:none; color:inherit; }
.hub__nums a:hover { border-color:var(--brand); }
.hub__nums b { display:block; font-size:19px; font-weight:800; color:var(--brand-darker); }
.hub__nums span { font-size:11.5px; color:var(--text-dim); }
.hub__go { display:flex; flex-direction:column; gap:6px; }
.hub__go a { padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:13.5px; text-decoration:none; color:inherit; }
.hub__go a:hover { border-color:var(--brand); color:var(--brand-darker); }
@media (max-width:820px) { .hub__cols { grid-template-columns:1fr; } }

/* ── CRM 4단계 : 제품 · 사용주기 · 구매 기록 (2026-09-30) ── */
.crm-find { align-items:center; }
.crm-find input[type=search] { flex:1 1 220px; min-width:0; }
.prd-list { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.prd-row { display:grid; grid-template-columns:minmax(0,1fr) 110px 104px 64px; gap:10px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); }
.prd-row:last-child { border-bottom:0; }
.prd-row__name b { display:block; font-size:14px; word-break:keep-all; }
.prd-row__name small { font-size:12px; color:var(--text-dim); }
.prd-row__num { text-align:right; font-size:13px; font-variant-numeric:tabular-nums; }
.prd-row__num small { display:block; font-size:11.5px; color:var(--text-dim); }
.prd-row__cyc { display:flex; align-items:center; gap:4px; font-size:12.5px; color:var(--text-sub); }
.prd-row__cyc input { width:70px; text-align:right; padding-inline:8px; }
.prd-row.is-custom .prd-row__cyc input { border-color:var(--brand); background:var(--brand-tint); font-weight:700; }
.prd-row__note { font-size:11.5px; color:var(--text-dim); text-align:right; }
.buy-add { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.buy-add__row { display:flex; gap:6px; align-items:center; }
.buy-add__row input[type=date] { flex:1 1 auto; min-width:0; }
.buy-add__qty { display:flex; align-items:center; gap:3px; font-size:12.5px; color:var(--text-sub); }
.buy-add__qty input { width:52px; text-align:right; padding-inline:6px; }
.buy-list { display:flex; flex-direction:column; gap:8px; }
.buy { padding:9px 11px; border:1px solid var(--line); border-radius:10px; }
.buy.is-closed { opacity:.55; }
.buy__t { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.buy__t b { font-size:13.5px; }
.buy__t em { flex:0 0 auto; font-style:normal; font-size:12px; font-weight:700; color:var(--text-sub); }
.buy__t em.is-due { color:#b8791f; }
.buy > small { display:block; margin-top:2px; font-size:11.5px; color:var(--text-dim); }
.buy__act { display:flex; gap:10px; margin-top:6px; }
.buy__act button { border:0; background:none; padding:0; font-size:12px; color:var(--brand-darker); cursor:pointer; }
.buy__act button:last-child { margin-left:auto; color:var(--text-dim); }
.buy__act button:disabled { opacity:.5; }
.buy-due { align-items:flex-start; }
.buy-due .crm__body a { color:inherit; text-decoration:none; }
.buy-due__act { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
@media (max-width: 640px) {
  .prd-row { grid-template-columns:minmax(0,1fr) auto; }
  .prd-row__num { grid-column:1; text-align:left; }
  .prd-row__cyc { grid-column:2; grid-row:1 / span 2; }
  .prd-row__note { grid-column:1 / -1; text-align:left; }
}
/* ── CRM 5단계 : AI 보낼 문구 · 48트레이닝 (2026-09-30) ── */
.crm-msg { margin-top:10px; padding:10px; border:1px solid var(--brand); border-radius:10px; background:var(--brand-tint); display:flex; flex-direction:column; gap:8px; width:100%; }
.crm-msg textarea { line-height:1.65; font-size:13.5px; background:#fff; }
.crm-msg__btn { display:flex; gap:6px; flex-wrap:wrap; }
.crm-msg__warn { font-size:12px; color:#b45309; }
.buy-due .crm__body { flex:1 1 auto; }
.task-list { display:flex; flex-direction:column; gap:8px; }
.task { padding:9px 11px; border:1px solid var(--line); border-left:3px solid var(--line); border-radius:10px; }
.task.is-due { border-left-color:#e07b00; background:#fffaf2; }
.task--done, .task--skip { opacity:.55; }
.task__t { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.task__t b { font-size:13.5px; }
.task__t em { flex:0 0 auto; font-style:normal; font-size:12px; font-weight:700; color:var(--text-sub); }
.task.is-due .task__t em { color:#b8791f; }
.task > small { display:block; margin-top:2px; font-size:11.5px; color:var(--text-dim); }
/* ── CRM 6단계 : 말로 시키기 (2026-09-30) ── */
.ask { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:5px 6px 5px 14px; border:1.5px solid var(--brand); border-radius:999px; background:#fff; }
.ask:focus-within { box-shadow:0 0 0 3px var(--brand-tint); }
.ask__ic { flex:0 0 auto; font-size:16px; }
.ask__in { flex:1 1 auto; min-width:0; height:38px; border:0; outline:none; font-size:14.5px; background:transparent; }
.ask .btn { border-radius:999px; }
.ask__help { flex:0 0 auto; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--text-sub); font-weight:700; cursor:pointer; }
.ask-out { margin-bottom:16px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--bg-soft, #f7f8fa); }
.ask-out__reply { font-size:14px; font-weight:600; }
.ask-out__list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.ask-it { display:flex; gap:10px; align-items:center; width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; text-align:left; cursor:pointer; }
.ask-it:hover { border-color:var(--brand); }
.ask-it__ic { flex:0 0 auto; font-size:16px; }
.ask-it__t { display:flex; flex-direction:column; min-width:0; }
.ask-it__t b { font-size:13.5px; }
.ask-it__t small { font-size:12px; color:var(--text-dim); }
.ask-out__more { margin-top:8px; font-size:13px; text-align:right; }
.crm-note-add.is-prefilled textarea { border-color:var(--brand); background:var(--brand-tint); }
@media (max-width: 640px) { .ask__in::placeholder { font-size:12.5px; } }
.ask__mic { flex:0 0 auto; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:#fff; font-size:17px; cursor:pointer; }
.ask__mic:hover { border-color:var(--brand); }
.ask__mic.is-on { background:#fee2e2; border-color:#ef4444; animation:askPulse 1.2s ease-in-out infinite; }
@keyframes askPulse { 0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.45); } 50% { box-shadow:0 0 0 7px rgba(239,68,68,0); } }
@media (prefers-reduced-motion: reduce) { .ask__mic.is-on { animation:none; } }
/* ── 음성 대화 모드 (2026-09-30) ── */
.ask.is-talk { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.ask-draft { margin-bottom:10px; padding:12px 14px; border:1.5px dashed var(--brand); border-radius:14px; background:var(--brand-tint); }
.ask-draft__h { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ask-draft__h b { font-size:13px; color:var(--brand-darker); }
.ask-draft__h small { font-size:12px; color:var(--text-sub); }
.ask-draft__t { margin-top:6px; font-size:14.5px; font-weight:700; }
.ask-draft ul { margin:4px 0 0; padding-left:18px; font-size:13.5px; line-height:1.7; }
.ask-draft__warn { margin-top:6px; font-size:12.5px; color:#b45309; }
.ask-draft__btn { display:flex; gap:6px; margin-top:8px; }
.ask-out__saved { display:flex; gap:6px; margin-top:8px; }
[data-note-mic].is-on { background:#fee2e2; border-color:#ef4444; }
/* ── 도나 (2026-09-30) ── */
.ask__ic { display:flex; align-items:center; gap:3px; }
.ask__ic b { font-size:13px; font-weight:800; color:var(--brand-darker); letter-spacing:-.02em; }
.ask.is-wake { border-color:#6366f1; }
[data-ask-wake].is-on { background:#eef2ff; border-color:#6366f1; }
@media (max-width: 640px) { .ask { flex-wrap:wrap; border-radius:18px; padding:6px 8px; } .ask__in { flex-basis:calc(100% - 70px); } .ask__ic b { display:none; } }
/* ── CRM : 목록 표시 · 관심사 칩 (2026-10-01) ── */
.crm__badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.crm__badges i { font-style:normal; font-size:11.5px; padding:1px 8px; border-radius:999px; background:var(--gray-100); color:var(--text-sub); }
.crm__badges i.is-hot { background:#fff4e5; color:#b45309; font-weight:700; }
.crm-tags { flex-wrap:wrap; align-items:center; }
.crm-tags__h { font-size:12px; color:var(--text-dim); margin-right:2px; }
.crm-tags .chip small { color:var(--text-dim); margin-left:2px; }
/* ── 여러 명 한꺼번에 · 고객 현황 (2026-10-01) ── */
.crm-row { display:flex; gap:8px; align-items:center; }
.crm-row > .crm { flex:1 1 auto; min-width:0; }
.crm-chk { flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; cursor:pointer; }
.crm-chk input { width:18px; height:18px; accent-color:var(--brand); }
.crm-row.is-picked > .crm { border-color:var(--brand); background:var(--brand-tint); }
.bulk { position:sticky; bottom:12px; z-index:20; display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; padding:10px 14px; border:1px solid var(--brand); border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.bulk .tk-select { width:auto; min-width:120px; }
.bulk__all { display:flex; align-items:center; gap:6px; font-size:13px; }
.cst-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.cst-wide { grid-column:1 / -1; }
.cst-bar { display:grid; grid-template-columns:92px 1fr auto; gap:8px; align-items:center; padding:5px 0; font-size:13px; color:inherit; text-decoration:none; }
.cst-bar span { color:var(--text-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cst-bar i { height:10px; border-radius:99px; background:var(--gray-100); overflow:hidden; }
.cst-bar i b { display:block; height:100%; background:var(--brand); border-radius:99px; }
.cst-bar em { font-style:normal; font-size:12.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cst-bar em strong { color:var(--brand-darker); }
a.cst-bar:hover span { color:var(--brand-darker); }
.cst-cols { display:flex; gap:10px; align-items:flex-end; height:140px; padding-top:6px; }
.cst-col { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; }
.cst-col i { flex:1 1 auto; width:100%; max-width:34px; display:flex; align-items:flex-end; background:var(--gray-100); border-radius:6px; overflow:hidden; }
.cst-col i b { display:block; width:100%; background:var(--brand); border-radius:6px 6px 0 0; }
.cst-col em { font-style:normal; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.cst-col span { font-size:11.5px; color:var(--text-dim); }
.cst-three { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; text-align:center; }
.cst-three b { display:block; font-size:22px; font-variant-numeric:tabular-nums; }
.cst-three span { font-size:12px; color:var(--text-dim); }
.cst-h3 { margin-top:12px; font-size:13px; }
.cst-cold { display:flex; flex-wrap:wrap; gap:8px; }
.cst-cold a { display:flex; flex-direction:column; padding:8px 12px; border:1px solid var(--line); border-radius:10px; color:inherit; text-decoration:none; }
.cst-cold a:hover { border-color:var(--brand); }
.cst-cold small { font-size:11.5px; color:var(--text-dim); }
.ai-card__h small { font-size:11.5px; font-weight:500; color:var(--text-dim); margin-left:4px; }
/* ── 라이브 자막 (CC) 2026-10-01 ── HLS ID3 시각 데이터 자막을 live_cc.js 가 이 오버레이에 그린다
   흰 글씨 · 반투명 검은 배경 · 화면 아래 가운데 · 모바일에서도 읽히는 크기 */
.nbm-cc-overlay { position:absolute; left:50%; bottom:12%; transform:translateX(-50%); z-index:5; max-width:90%; width:max-content; padding:.35em .8em; border-radius:6px; background:rgba(0,0,0,.65); color:#fff; font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif; font-size:clamp(15px,2.4vw,28px); font-weight:600; line-height:1.45; text-align:center; white-space:pre-line; word-break:keep-all; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.nbm-cc-overlay[hidden] { display:none; }
:fullscreen .nbm-cc-overlay { font-size:clamp(20px,2.6vw,40px); }
.player__cc { font-weight:800; min-width:84px; }
.player__cc.is-on { background:#e8341c; color:#fff; border-color:#e8341c; }
/* ── 통합 1단계 : 관계 점수 · 고객 기억 · 오늘 브리핑 (2026-10-02) ── */
.health { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; background:var(--gray-100); color:var(--text-sub); vertical-align:middle; }
.health i { width:8px; height:8px; border-radius:50%; background:currentColor; }
.health--good { background:#e7f7ef; color:#12804f; }
.health--watch { background:#fff6e0; color:#a86a00; }
.health--cold { background:#fdecea; color:#c2361f; }
.facts { display:flex; flex-wrap:wrap; gap:6px; }
.fact { display:inline-flex; align-items:center; gap:4px; padding:4px 6px 4px 10px; border-radius:999px; background:var(--gray-100); font-size:13px; }
.fact--ai { background:var(--brand-tint); }
.fact button { border:0; background:none; color:var(--text-dim); font-size:14px; line-height:1; cursor:pointer; padding:0 4px; }
.fact button:hover { color:#c2361f; }
.fact-add { display:flex; gap:6px; margin-top:10px; }
.fact-add input { flex:1 1 auto; min-width:0; }
.brief__facts { display:block; margin-top:3px; font-size:12px; color:var(--text-sub); }
/* ── 통합 2단계 : 파이프라인 칸반 · 소개 관계 · 타임라인 (2026-10-02) ── */
.pipe-tools { display:flex; gap:8px; margin-bottom:12px; }
.pipe-tools input { flex:1 1 auto; min-width:0; max-width:320px; }
.pipe { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); gap:12px; overflow-x:auto; padding-bottom:10px; align-items:start; }
.pipe__col { background:var(--bg-soft, #f7f8fa); border:1px solid var(--line); border-radius:14px; padding:10px; min-height:200px; }
.pipe__col.is-hold { opacity:.75; }
.pipe__h { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-bottom:8px; }
.pipe__h b { font-size:14px; }
.pipe__h span { font-size:12px; font-weight:700; padding:0 7px; border-radius:999px; background:#fff; border:1px solid var(--line); }
.pipe__h small { flex-basis:100%; font-size:11.5px; color:var(--text-dim); }
.pipe__list { display:flex; flex-direction:column; gap:8px; min-height:120px; border-radius:10px; transition:background .15s; }
.pipe__list.is-over { background:var(--brand-tint); outline:2px dashed var(--brand); }
.pipe__empty { margin:auto; font-size:12px; color:var(--text-dim); }
.pcard { background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 10px; cursor:grab; display:flex; flex-direction:column; gap:3px; }
.pcard.is-drag { opacity:.5; }
.pcard__t { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.pcard__t a { font-weight:700; font-size:14px; color:inherit; text-decoration:none; }
.pcard small { font-size:11.5px; color:var(--text-dim); }
.pcard em { font-style:normal; font-size:11.5px; color:var(--brand-darker); }
.pcard__move { margin-top:4px; font-size:12px; padding:2px 4px; border:1px solid var(--line); border-radius:6px; background:#fff; }
@media (hover:hover) and (pointer:fine) { .pcard__move { display:none; } .pcard:hover .pcard__move { display:block; } }
.refer { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0; font-size:13px; }
.refer span { color:var(--text-dim); margin-right:4px; }
.refer a { padding:3px 10px; border-radius:999px; background:var(--gray-100); color:inherit; text-decoration:none; }
.refer a small { color:var(--text-dim); margin-left:3px; }
.timeline summary { cursor:pointer; list-style:none; }
.timeline summary::-webkit-details-marker { display:none; }
.tl { list-style:none; margin:10px 0 0; padding:0 0 0 14px; border-left:2px solid var(--line); }
.tl__day { margin:10px 0 4px -14px; padding-left:14px; font-size:12px; font-weight:700; color:var(--text-dim); }
.tl__it { display:flex; gap:8px; padding:4px 0; font-size:13px; line-height:1.55; }
.tl__ic { flex:0 0 auto; }
.tl--stage .tl__tx, .tl--refer .tl__tx { color:var(--brand-darker); font-weight:600; }

/* ── AI 비서 통합 3단계 : 발행 시간표 · 해시태그 묶음 · 글 반응 (2026-10-02) ── */
.tagset { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center; }
.tagset__chip { border:1px solid var(--line, #e3e6ea); background:var(--gray-50, #f7f8f9); border-radius:999px; padding:4px 10px; font-size:12.5px; cursor:pointer; color:var(--text-sub); }
.tagset__chip:hover { border-color:var(--brand); color:var(--brand-darker); }
.tagset__edit { font-size:12px; color:var(--text-dim); }
.perf { font-size:12px; text-align:right; }
.perf summary { cursor:pointer; color:var(--text-sub); list-style:none; }
.perf summary::-webkit-details-marker { display:none; }
.perf__f { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:flex-end; margin-top:6px; }
.perf__f label { display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--text-dim); }
.perf__f input { width:64px; padding:4px 6px; border:1px solid var(--line, #e3e6ea); border-radius:6px; font-size:13px; font-variant-numeric:tabular-nums; }
.plan__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; margin-bottom:16px; }
.plan__days { display:flex; gap:4px; flex-wrap:wrap; }
.plan__days label { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line, #e3e6ea); border-radius:8px; cursor:pointer; font-size:13px; }
.plan__days input { position:absolute; opacity:0; pointer-events:none; }
.plan__days label:has(input:checked) { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700; }
.plan__days label:focus-within { outline:2px solid var(--brand); outline-offset:1px; }
.plan__row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.plan__slots { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:6px; }
.plan__slots li { display:flex; align-items:center; gap:8px; font-size:13.5px; }
.plan__slots .ai-logo { width:18px; height:18px; }
.plan__x { margin-left:auto; border:0; background:none; color:var(--text-dim); cursor:pointer; font-size:13px; }
.plan__x:hover { color:#b83a3a; }
.week { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; }
.week__d { border:1px solid var(--line, #e3e6ea); border-radius:10px; padding:8px; min-height:96px; display:flex; flex-direction:column; gap:6px; background:var(--bg, #fff); }
.week__d--today { border-color:var(--brand); }
.week__h { font-size:12px; font-weight:700; color:var(--text-sub); }
.week__h--sun { color:#c0392b; } .week__h--sat { color:#2c5aa0; }
.week__s { font-size:11.5px; border-radius:6px; padding:4px 6px; line-height:1.35; display:flex; flex-direction:column; gap:1px; }
.week__s b { font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:4px; }
.week__s .ai-logo { width:13px; height:13px; }
.week__s--empty { border:1px dashed var(--line, #d5d9de); color:var(--text-dim); }
.week__s--full { background:#eef2ff; color:#36429a; }
.week__s--done { background:var(--brand-light); color:var(--brand-darker); }
.week__s--past { opacity:.5; }
.week__s a { color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tsets { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.tsets__it { border:1px solid var(--line, #e3e6ea); border-radius:10px; padding:10px 12px; }
.tsets__it b { font-size:14px; }
.tsets__it p { margin:4px 0 0; font-size:12.5px; color:var(--text-sub); word-break:keep-all; overflow-wrap:anywhere; }
.tsets__btns { display:flex; gap:6px; margin-top:6px; }
.perfl { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px; }
.perfl li { display:flex; gap:8px; align-items:baseline; font-size:13.5px; }
.perfl a { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; }
.perfl small { color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width: 760px) {
  .week { grid-template-columns:1fr; }
  .week__d { min-height:0; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .week__h { width:100%; }
}

/* ── AI 비서 통합 5단계 : 조직관리 (2026-10-02) ── */
.team-form__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0 12px; }
.team-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.team-bar input[type=search] { flex:1 1 200px; max-width:320px; }
.ttree { list-style:none; margin:0 0 8px; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--white, #fff); }
.ttree > li { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line); }
.ttree > li:first-child { border-top:0; }
.ttree__me { background:var(--brand-light); font-size:14px; }
.ttree__me small { color:var(--text-dim); }
.ttree__it { padding-left:calc(14px + (var(--d) - 1) * 22px) !important; position:relative; }
.ttree__it::before { content:''; width:10px; height:10px; border-left:2px solid var(--gray-300, #c9ced4); border-bottom:2px solid var(--gray-300, #c9ced4); border-bottom-left-radius:4px; flex:0 0 auto; margin-top:-8px; }
.ttree__main { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; color:inherit; text-decoration:none; }
.ttree__main:hover .ttree__name { color:var(--brand-darker); }
.ttree__name { font-weight:700; font-size:15px; }
.ttree__name small { font-weight:500; font-size:12px; color:var(--text-dim); }
.ttree__meta { font-size:12px; color:var(--text-dim); }
.obar { --p:0%; position:relative; display:inline-flex; align-items:center; width:92px; height:18px; border-radius:999px; background:var(--gray-100, #eef0f2); overflow:hidden; flex:0 0 auto; }
.obar i { position:absolute; inset:0 auto 0 0; width:var(--p); background:var(--brand); border-radius:999px; transition:width .25s; }
.obar em { position:relative; width:100%; text-align:center; font-style:normal; font-size:11px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.obar--late i { background:#e0874a; }
.obar--wide { width:100%; height:22px; margin-bottom:10px; }
.tm-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
.obl { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.obl li { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:6px 8px; border-radius:8px; font-size:14px; }
.obl li label { display:flex; gap:8px; align-items:center; cursor:pointer; }
.obl li small { color:var(--text-dim); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.obl li.is-done label { color:var(--text-dim); text-decoration:line-through; }
.obl li.is-late { background:#fdf0e8; }
.obl li.is-late small { color:#b85a1c; font-weight:600; }
.tm-perf { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:12px; }
.tm-perf label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-dim); }
.tm-perf input[type=number] { width:86px; }
.tm-perf input, .tm-perf select { padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-variant-numeric:tabular-nums; }
.tm-perf__memo { flex:1 1 140px; }
.tt { width:100%; border-collapse:collapse; font-size:13.5px; }
.tt th { text-align:left; font-size:12px; color:var(--text-dim); font-weight:600; padding:8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tt td { padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tt .num { text-align:right; font-variant-numeric:tabular-nums; }
.tt .dim, .dim { color:var(--text-dim); }
.tt tr.is-none td:first-child a { color:#b85a1c; }
.tt--ob th, .tt--ob td.tt__c { text-align:center; }
.tt__c.is-done { background:var(--brand-light); }
.tt__c.is-late { background:#fdf0e8; }
.tt__c input { width:18px; height:18px; cursor:pointer; }
.tt__step { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--gray-100, #eef0f2); font-size:12px; font-weight:700; color:var(--text-sub); flex:0 0 auto; }
.tt__legend { margin:10px 0 0; padding-left:20px; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:2px 16px; font-size:12.5px; color:var(--text-sub); }
.tt__legend small { color:var(--text-dim); }
.steps-ed { list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:6px; }
.plan__x:disabled { opacity:.3; cursor:default; }
.edu-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.edu-chip { display:inline-flex; gap:4px; align-items:baseline; padding:4px 10px; border-radius:999px; background:var(--gray-100, #eef0f2); font-size:12.5px; color:var(--text-sub); }
.edu-chip b { font-variant-numeric:tabular-nums; }
.edu-chip.is-on { background:var(--brand-light); color:var(--brand-darker); }
.edul { list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:4px; }
.edul li { display:flex; gap:8px; align-items:baseline; font-size:13.5px; }
.edul__d { color:var(--text-dim); font-size:12px; font-variant-numeric:tabular-nums; flex:0 0 52px; }
.edul__t { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edul__s { font-size:11.5px; white-space:nowrap; }
.edul__s--ok { color:var(--brand-darker); font-weight:700; }
.edul__s--no { color:var(--text-dim); text-decoration:line-through; }
.edul__s--wait { color:#b85a1c; }
.pvbars { display:flex; align-items:flex-end; gap:8px; height:160px; padding-top:18px; }
.pvbars__c { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px; min-width:0; }
.pvbars__b { width:100%; max-width:44px; background:var(--gray-300, #c9ced4); border-radius:6px 6px 2px 2px; }
.pvbars__c.is-now .pvbars__b { background:var(--brand); }
.pvbars__v { font-size:11px; color:var(--text-sub); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pvbars__m { font-size:12px; color:var(--text-dim); }
.prow { display:grid; grid-template-columns:minmax(110px, 1.6fr) repeat(3, minmax(60px, 1fr)) 80px auto; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); }
.prow--h { font-size:12px; color:var(--text-dim); font-weight:600; }
.prow input[type=number] { width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-variant-numeric:tabular-nums; }
.prow__n { font-weight:600; font-size:14px; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prow__n small { font-weight:400; color:var(--text-dim); }
.spark { display:flex; align-items:flex-end; gap:2px; height:26px; }
.spark i { flex:1 1 0; background:var(--brand); border-radius:2px; min-height:2px; }
.spark i.is-zero { background:var(--gray-200, #e3e6ea); }
.tagset__chip.is-on { background:var(--brand); border-color:var(--brand); color:#fff; }
a.tagset__chip { text-decoration:none; }
.tnote__body { font-size:14.5px; line-height:1.75; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; padding:12px 14px; background:var(--gray-50, #f7f8f9); border-radius:10px; }
.tnote__h { font-size:14px; margin:16px 0 6px; }
.tnote__unread { font-size:13.5px; color:#b85a1c; margin:0; }
.tnp { max-width:620px; padding-block:24px 48px; display:flex; flex-direction:column; gap:14px; }
.tnp__from { font-size:13px; color:var(--text-dim); margin:0 0 6px; }
.tnp__t { font-size:22px; line-height:1.35; margin:0 0 12px; text-wrap:balance; }
.tnp__msg { margin:10px 0 0; font-size:14px; min-height:1.4em; }
.tnp__msg.is-ok { color:var(--brand-darker); font-weight:700; }
.tnp__msg.is-err { color:#b83a3a; }
@media (max-width: 760px) {
  .prow { grid-template-columns:1fr 1fr 1fr 1fr; }
  .prow__n { grid-column:1 / -1; }
  .prow .spark { display:none; }
  .prow--h span:first-child, .prow--h span:nth-child(5), .prow--h span:last-child { display:none; }
  .prow--h { grid-template-columns:1fr 1fr 1fr 1fr; }
  .ttree__it { padding-left:calc(10px + (var(--d) - 1) * 14px) !important; }
  .obar { width:64px; }
}

/* 오늘 브리핑 : 마케팅 · 팀 한 줄 카드 (2026-10-02) */
.brief-more { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; margin-bottom:16px; }
.brief-more__it { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--white, #fff); color:inherit; text-decoration:none; }
.brief-more__it span { grid-row:span 2; font-size:22px; }
.brief-more__it b { font-size:14.5px; }
.brief-more__it small { font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brief-more__it:hover { border-color:var(--brand); }
.brief-more__it.is-hot { border-color:#f0b37e; background:#fff8f1; }

/* 사용 설명서 : 새로 생긴 기능 (2026-10-02) */
.guide-new { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; }
.guide-new__it { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; }
.guide-new__i { font-size:24px; line-height:1; flex:0 0 auto; }
.guide-new__it b { font-size:15px; }
.guide-new__it b a { color:inherit; }
.guide-new__it p { margin:4px 0 0; font-size:13.5px; line-height:1.6; color:var(--text-sub); word-break:keep-all; }

/* 음성 검색 🎤 (2026-10-06) — 검색칸마다 assets/js/voice_search.js 가 붙인다 */
.vs-mic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; margin-right: 2px; border-radius: 50%; color: var(--gray-600); background: none; border: 0; cursor: pointer; }
.vs-mic svg { width: 19px; height: 19px; }
.vs-mic:hover { color: var(--brand-dark); background: var(--brand-light); }
.vs-mic.is-on { color: #fff; background: #e5484d; animation: vs-pulse 1.2s ease-in-out infinite; }
@keyframes vs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,.45); } 50% { box-shadow: 0 0 0 7px rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .vs-mic.is-on { animation: none; } }
/* 연합강의장 일정 검색 */
.sched-search { max-width: 520px; margin: 0 0 16px; }
.sched-found { margin-bottom: 24px; }
.sched-found__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 12px; }
.sched-found__h small { font-size: 12.5px; font-weight: 400; color: var(--text-dim); }
.sched-found__h .btn { margin-left: auto; }
.sched-found .sched__item { grid-template-columns: 116px 1fr auto; }
.sched-found .sched__time { min-width: 0; }
.sched-found .sched__time b { white-space: nowrap; }
.sched-found .sched__time span { white-space: nowrap; }

.sched-found__fz { margin: -4px 0 12px; font-size: 13.5px; color: var(--text-sub); }
/* 검색칸 : 🎤 를 붙이면서 좁은 칸(강의 목록 240px)에서 버튼이 칸 밖으로 밀려났다 → 입력칸이 줄어들게 (2026-10-06) */
.search__form input { min-width: 0; }
.search__form .vs-mic { width: 30px; height: 30px; flex-basis: 30px; }
/* 📷 사진 검색 · 📦 입고 요청 (2026-10-06) */
.photo-note { margin: -6px 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--brand-light); font-size: 14px; color: var(--text-sub); }
.photo-note b { color: var(--brand-darker); }
.sreq { margin: 20px 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--white, #fff); }
.sreq__sum { cursor: pointer; padding: 14px 16px; font-size: 15px; list-style: none; }
.sreq__sum::-webkit-details-marker { display: none; }
.sreq__sum b { color: var(--brand-darker); text-decoration: underline; text-underline-offset: 3px; }
.sreq[open] .sreq__sum { border-bottom: 1px solid var(--line); }
.sreq__form { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.sreq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sreq .field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; font-weight: 600; color: var(--text-sub); }
.sreq .field em { color: #e5484d; font-style: normal; }
.sreq .field input { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; font-weight: 400; color: var(--text); }
.sreq__hint { margin: 0; font-size: 13px; color: var(--text-dim); }
.sreq__agree { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--text-sub); }
.sreq__agree small { color: var(--text-dim); }
.sreq__form .btn { align-self: flex-start; }
.sreq__msg { margin: 0; font-size: 14px; min-height: 1.2em; }
.sreq__msg.is-ok { color: var(--brand-darker); font-weight: 700; }
.sreq__msg.is-err { color: #b83a3a; }

/* 함께 보면 좋은 것 (유사 콘텐츠, 2026-10-06) */
.related { margin: 28px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.related__h { font-size: 18px; margin: 0 0 12px; }
.related__h small { font-size: 13px; font-weight: 400; color: var(--text-dim); }
.related__sub { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 8px; }
.related__sub h3 { font-size: 15px; margin: 0; }
.related__more { font-size: 13px; color: var(--brand-darker); }