/* ============================================================
 *  새 톤(⑧ 체험단 · ⑩ 커뮤니티)을 옛 세부 페이지에 입히는 층 (2026-11-04)
 *  lib.php layout_head 에서 $hd8(미리보기 · 일반 화면)일 때만 불러오고 <body class="t8">.
 *  옛 마크업은 그대로 두고 모양만 바꾼다 — 실서비스는 영향 없음. 출시 때 COMMUNITY_V10 과 같이 켠다.
 *  색: 잉크 #16201c · 보조 #5d6a65 · 선 #e6ece9 · 민트 #e5f3ec · 베이지 #f3f1e6 · 브랜드 #0b6b54
 * ============================================================ */
body.t8{
  --bg:#fff; --card:#fff; --ink:#16201c; --mute:#5d6a65; --line:#e6ece9;
  --accent:#0b6b54; --accent-d:#084e3d; --accent-soft:#e5f3ec;
  --r:22px; --sh:0 8px 26px rgba(20,60,45,.07);
  --beige:#f3f1e6; --mint:#e5f3ec; --mist:#eef3f0;
  background:#fff; color:var(--ink); word-break:keep-all; -webkit-font-smoothing:antialiased;
}
body.t8 main.wrap{max-width:920px;padding:28px 24px 56px}
body.t8 main.wrap.xwide,body.t8 main.wrap.wide{max-width:1200px}
body.t8 main.wrap.dgx,body.t8 main.wrap.lgx{max-width:none;width:100%;margin:0;padding:0}   /* 이 화면들은 자기 칸이 가운데를 잡는다 */

/* 글자 */
body.t8 h1{font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1.28;margin:0 0 8px}
body.t8 h2{font-size:21px;font-weight:800;letter-spacing:-.035em;margin:36px 0 14px}
body.t8 .muted,body.t8 .sub{color:var(--mute)}
body.t8 a{text-underline-offset:3px}

/* 카드 · 목록 */
body.t8 .card{border:1px solid #edf1ef;border-radius:var(--r);box-shadow:var(--sh)}
body.t8 .card.pad{padding:22px 24px}
body.t8 .item{border:1px solid #edf1ef;border-radius:20px;box-shadow:var(--sh);padding:18px 20px}
body.t8 .list{gap:12px}
body.t8 .ft .wrap{max-width:1200px}
body.t8 .empty{border-radius:var(--r);background:var(--mist);border:0;box-shadow:none}

/* 옛 진한 초록 상자(.hero) → ⑩ 소개 칸처럼 베이지 */
body.t8 .hero{background:var(--beige);color:var(--ink);border-radius:24px;padding:28px 30px;box-shadow:none}
body.t8 .hero h1{color:var(--ink);font-size:27px}
body.t8 .hero p{color:var(--mute);font-size:15px}
body.t8 .hero .stats{color:var(--mute)}
body.t8 .hero .stats b{color:var(--ink)}

/* 안내 상자 */
body.t8 .notice{background:var(--mist);border:0;color:#2b3a34;border-radius:18px;padding:16px 20px}
body.t8 .alert{border-radius:14px}

/* 버튼 — 알약 모양 */
body.t8 .btn{border-radius:99px;padding:15px 22px;font-weight:800;letter-spacing:-.02em;box-shadow:0 6px 16px rgba(11,107,84,.22)}
body.t8 .btn.ghost{border:1.5px solid #d9e2de;box-shadow:none}
body.t8 .btn.inline{border-radius:99px;padding:10px 18px}
body.t8 .btn-sm{border-radius:99px;padding:8px 14px;font-weight:700;border:1.5px solid #d9e2de;background:#fff;color:var(--ink)}
body.t8 .btn-sm:hover{border-color:var(--accent);color:var(--accent)}

/* 입력칸 */
body.t8 input[type=text],body.t8 input[type=search],body.t8 input[type=url],body.t8 input[type=tel],body.t8 input[type=email],
body.t8 input[type=password],body.t8 input[type=number],body.t8 input[type=date],body.t8 select,body.t8 textarea{
  border:1.5px solid #e1e8e4;border-radius:14px;background:#fff;font-family:inherit}
body.t8 input:focus-visible,body.t8 select:focus-visible,body.t8 textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
body.t8 label{font-weight:700}

/* 페이지 제목 줄 */
body.t8 .page-head{padding:6px 0 18px}
body.t8 .page-head h1{font-size:32px}
body.t8 .page-head p{color:var(--mute);font-size:15.5px;line-height:1.65}

/* ── 옛 초록 물결 첫 화면(.dgx-top · 진단·순위확인·서이추·옛 커뮤니티) → 흰 바탕 + 베이지 칸 ── */
body.t8 .dgx-top{background:#fff!important;color:var(--ink)!important;padding:8px 24px 36px!important;min-height:0!important;overflow:visible}
body.t8 .dgx-top::before,body.t8 .dgx-top::after,body.t8 .dgx-wave,body.t8 .dgx-top .dgx-nav,body.t8 .dgx-mp{display:none!important}
body.t8 .dgx-top > :not(.dgx-nav):not(.dgx-mp){max-width:880px;margin-left:auto;margin-right:auto}
body.t8 .dgx-top h1{color:var(--ink)!important;font-size:40px!important;letter-spacing:-.05em}
body.t8 .dgx-top h1 em{color:var(--accent)!important}
body.t8 .dgx-top p,body.t8 .dgx-top small,body.t8 .dgx-top li,body.t8 .dgx-top span:not([class*="btn"]){color:var(--mute)}
body.t8 .dgx-top b,body.t8 .dgx-top strong{color:var(--ink)!important}
body.t8 .dgx-top em,body.t8 .dgx-top i:not([class]){color:var(--accent)!important}
body.t8 .dgx-top b[style*="#ffe08a"]{color:var(--accent)!important}
body.t8 .dgx-top [class*="eb"],body.t8 .dgx-top .dgx-eb{color:var(--accent)!important;background:var(--mint)!important}

/* 첫 화면 글·입력칸은 가운데로 — 좁은 칸에 왼쪽 정렬이라 오른쪽이 비어 보이던 것(2026-11-04) */
body.t8 .dgx-top .dgx-hc{max-width:760px!important;margin:0 auto!important;text-align:center;display:flex;flex-direction:column;align-items:center}
body.t8 .dgx-top .dgx-hc > *{margin-left:auto;margin-right:auto}
body.t8 .dgx-top .dgx-hc form,body.t8 .dgx-top .dgx-hc .dgx-form,body.t8 .dgx-top .dgx-hc [class*="box"]{width:100%;max-width:620px}
body.t8 .dgx-top .dgx-steps{width:100%;max-width:760px;text-align:center}
body.t8 .dgx-top .dgx-acts{justify-content:center}
body.t8 .dgx-top .dgx-hc > [class*="memb"],body.t8 .dgx-top .dgx-hc > [class*="tip"]{text-align:left}
body.t8 .dgx-top h1{margin-top:12px!important}

/* 첫 화면 안의 반투명 흰 칸(유리 느낌) → 연한 회녹 칸 */
body.t8 .dgx-top .rkx-seg{background:var(--mist)!important;border:0!important;-webkit-backdrop-filter:none;backdrop-filter:none;width:100%;max-width:620px}
body.t8 .dgx-top .rkx-seg a{color:var(--mute)!important}
body.t8 .dgx-top .rkx-seg a.on{background:#fff!important;color:var(--ink)!important;box-shadow:0 4px 12px rgba(20,60,45,.10)}
body.t8 .dgx-top .rkx-hint,body.t8 .dgx-top .rkx-hint *{color:var(--mute)!important}
body.t8 .dgx-top .rkx-hint a{color:var(--accent)!important}
body.t8 .dgx-top .dgx-steps div{background:var(--mist)!important;border:0!important;-webkit-backdrop-filter:none;backdrop-filter:none;display:flex;flex-direction:column;align-items:center}
body.t8 .dgx-top .dgx-steps i{background:var(--accent)!important;color:#fff!important}
body.t8 .dgx-top .dgx-steps small{color:var(--mute)!important}
body.t8 .dgx-top .dgx-sub{color:var(--mute)!important}
body.t8 .dgx-top [style*="color:#fff"],body.t8 .dgx-top [style*="color: #fff"]{color:var(--ink)!important}

body.t8 .dgx-top + *{margin-top:20px!important}   /* 옛 물결 위로 겹치던 칸 */

/* ── 로그인 화면(.lgx) — 2026-11-04 다듬음: 왼쪽 인사·혜택이 위로 모이고, 관리자 입구는 오른쪽 맨 아래 한 줄 ── */
body.t8 main.wrap.lgx{background:radial-gradient(900px 420px at 12% 0%,#e3f3ea 0%,rgba(227,243,234,0) 70%),#f6f8f7;padding:44px 20px 72px}
body.t8 .lgx-top,body.t8 .lgx-wave{display:none!important}
body.t8 .lgx-shell{max-width:1000px;margin:0 auto!important;grid-template-columns:.9fr 1fr;border:1px solid #e3ebe7;border-radius:30px;box-shadow:0 40px 80px -40px rgba(16,60,44,.28),0 2px 6px rgba(16,60,44,.04)}
body.t8 .lgx-side{position:relative;overflow:hidden;min-height:0;padding:44px 40px 34px;gap:0;background:linear-gradient(165deg,#eaf6f0 0%,#f3f1e6 78%)!important;color:var(--ink)!important}
body.t8 .lgx-side::before,body.t8 .lgx-side::after{display:none!important}
body.t8 .lgx-side .lgx-eb{align-self:flex-start;gap:7px;padding:6px 12px 6px 10px;border-radius:99px;background:#fff;box-shadow:0 1px 0 rgba(16,60,44,.06);font-size:12.5px;letter-spacing:0;color:var(--accent)}
body.t8 .lgx-side .lgx-eb i{width:6px;height:6px;background:#1fb37f;box-shadow:0 0 0 3px rgba(31,179,127,.18)}
body.t8 .lgx-side h2{margin:18px 0 0;font-size:34px;line-height:1.24;font-weight:800;letter-spacing:-.05em;color:var(--ink)}
body.t8 .lgx-side h2 em{color:var(--accent)}
body.t8 .lgx-side .lgx-ben{margin:30px 0 0;gap:10px}
body.t8 .lgx-side .lgx-ben li{gap:14px;align-items:center;padding:14px 16px;border:0;border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 6px 18px -10px rgba(16,60,44,.22);backdrop-filter:none;-webkit-backdrop-filter:none}
body.t8 .lgx-side .lgx-ben .ic{width:40px;height:40px;border-radius:13px;background:var(--mint);color:var(--accent)}
body.t8 .lgx-side .lgx-ben b{font-size:15px;font-weight:800;color:var(--ink)}
body.t8 .lgx-side .lgx-ben small{margin-top:3px;font-size:13px;line-height:1.5;color:var(--mute)}
body.t8 .lgx-sfoot{margin-top:auto;padding-top:34px;display:flex;align-items:center;gap:10px;font-family:'Quicksand',var(--f,sans-serif);font-size:15px;font-weight:700;color:var(--accent);letter-spacing:-.01em}
body.t8 .lgx-sfoot svg{width:26px;height:26px;flex:none}
body.t8 .lgx-deco{position:absolute;right:-60px;bottom:-30px;width:300px;height:160px;color:#0b6b54;opacity:.07;pointer-events:none}
body.t8 .lgx-main{padding:40px 44px 30px}
body.t8 .lgx-seg{padding:5px;border-radius:16px;background:#f1f5f3}
body.t8 .lgx-seg a{height:46px;border-radius:12px;font-size:15px}
body.t8 .lgx-seg a.on{color:var(--ink);box-shadow:0 4px 14px -4px rgba(16,60,44,.2)}
body.t8 .lgx-seg a.on .lg-i{color:var(--accent)}
body.t8 .lgx-main h1{margin:30px 0 0;font-size:28px;font-weight:800;letter-spacing:-.045em}
body.t8 .lgx-main .lgx-sub{margin:6px 0 22px;font-size:15px;color:var(--mute)}
body.t8 .lgx-main .nv-btn{height:54px;border-radius:15px;font-size:16px}
body.t8 .lgx-main .nv-note{margin-top:10px}
body.t8 .lgx-main .nv-or{margin:20px 0 2px;color:#8a9893}
body.t8 .lgx-f{gap:16px;margin-top:16px}
body.t8 .lgx-fl label{font-size:13.5px;font-weight:700;color:var(--ink)}
body.t8 .lgx-in input{height:54px;border:1.5px solid transparent;border-radius:15px;background:#f3f6f4}
body.t8 .lgx-in input:hover{background:#eef3f0}
body.t8 .lgx-in input:focus{background:#fff;border-color:var(--accent)}
body.t8 .lgx-go{height:56px;margin-top:4px;border-radius:16px;box-shadow:0 14px 28px -14px rgba(11,107,84,.6)}
body.t8 .lgx-or{margin-top:26px}
body.t8 .lgx-join{padding:16px 18px;border-radius:18px;background:var(--mint)}
body.t8 .lgx-join .bt{border-radius:13px}
body.t8 .lgx-help{border-radius:16px;border-color:#e6ece9}
body.t8 .lgx-note{margin-top:14px}
body.t8 .lgx-adm{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:18px;border-top:1px solid #edf1ef;font-size:13px;color:#8a9893}
body.t8 .lgx-adm a{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--mute);text-decoration:none}
body.t8 .lgx-adm a:hover{color:var(--accent)}
@media(min-width:761px) and (max-width:900px){body.t8 .lgx-side{padding:36px 28px 30px}body.t8 .lgx-main{padding:36px 30px 28px}body.t8 .lgx-side h2{font-size:29px}}
@media(max-width:760px){
  body.t8 main.wrap.lgx{padding:16px 14px 48px}
  body.t8 .lgx-shell{grid-template-columns:1fr;margin:0!important;border-radius:26px}
  body.t8 .lgx-side{display:flex;padding:26px 22px 22px}
  body.t8 .lgx-side h2{margin-top:14px;font-size:27px}
  body.t8 .lgx-side .lgx-ben,body.t8 .lgx-sfoot{display:none}
  body.t8 .lgx-deco{width:220px;height:120px;right:-50px;bottom:-34px}
  body.t8 .lgx-main{padding:20px 20px 22px}
  body.t8 .lgx-main .lgx-sub{margin:16px 0 18px}
}

@media(max-width:760px){
  body.t8 main.wrap{padding:20px 16px 44px}
  body.t8 h1{font-size:25px}
  body.t8 .page-head h1{font-size:26px}
  body.t8 .dgx-top{padding:4px 16px 28px!important}
  body.t8 .dgx-top h1{font-size:30px!important}
  body.t8 .hero{padding:22px 20px}
}

/* 2026-11-05 전체 점검 — 검은 버튼·▼ 기본 접기 모양을 새 톤으로 */
body.t8 .btn.dark{background:var(--accent);color:#fff}
body.t8 main details:not([class])>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
body.t8 main details:not([class])>summary::-webkit-details-marker{display:none}
body.t8 main details:not([class])>summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.45;transition:transform .15s}
body.t8 main details:not([class])[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
/* 2026-11-05 점검 — 흰 바탕이 된 첫 화면 띠: 「회원가입」 흰 글자 버튼이 안 보여 「로그인」이 한쪽으로 치우쳐 보이던 것 · 표식(● 무료 블로그 진단)이 네모로 깔리던 것 · 카드 첫 제목 위 빈칸 */
body.t8 .dgx-top .dgx-btn.ghost{background:#fff!important;color:var(--accent)!important;border:1.5px solid #dfe7e3!important;box-shadow:none!important}
body.t8 .dgx-top .dgx-btn:not(.ghost){background:var(--accent)!important;color:#fff!important}
body.t8 .dgx-top .dgx-eb{padding:6px 14px;border-radius:99px;line-height:1.3}
body.t8 .card>h2:first-child,body.t8 .card>h3:first-child,body.t8 .card.pad>h2:first-child{margin-top:0}
/* 2026-11-05 점검 — 로그인 왼쪽 판: 기능 카드와 아래 문구 사이가 350px 비던 것 → 묶어서 가운데 */
body.t8 .lgx-side{justify-content:center}
body.t8 .lgx-sfoot{margin-top:0}
body.t8 .dgx-top input::placeholder{color:#9aa6a1;font-weight:500}   /* 안내 글이 진해 이미 입력된 값처럼 보이던 것 (2026-11-05 점검) */