/* 제휴지 v7 가입 헤더 + 가입 창 (2026-10-20 미리보기). 원본: sites/jehyuji-src/v7auth/static/v7/auth.css
 * 기존 토큰(--brand, --ink, --line, --surface, --gl ...)만 쓴다. 다크 모드는 토큰이 알아서 바뀐다. */

/* ── 헤더 오른쪽 묶음 ── */
html body nav.top .row .jh7-theme{display:inline-grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:0;border-radius:var(--v3-r-sm,8px);border:1px solid var(--v3-line,var(--line));background:transparent;color:var(--v3-ink,var(--ink));cursor:pointer}
html body nav.top .row .jh7-theme:hover{background:var(--v3-band,var(--surface2))}
.jh7-theme .i-sun{display:none}
:root[data-theme="dark"] .jh7-theme .i-sun{display:block}
:root[data-theme="dark"] .jh7-theme .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .jh7-theme .i-sun{display:block}
  :root:not([data-theme="light"]) .jh7-theme .i-moon{display:none}
}
html body nav.top .row a.btn.jh7-ghost{background:transparent;color:var(--v3-ink,var(--ink));border:1px solid var(--v3-line,var(--line))}
html body nav.top .row a.btn.jh7-ghost:hover{background:var(--v3-band,var(--surface2))}
html body nav.top .row .jh7-login{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;flex-shrink:0;border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--v3-ink,var(--ink));cursor:pointer;white-space:nowrap;border-radius:var(--v3-r-sm,8px)}
html body nav.top .row .jh7-login:hover{background:var(--v3-band,var(--surface2))}
html body nav.top .row .jh7-cta{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 18px;flex-shrink:0;border:0;border-radius:10px;background:var(--brand);color:#fff;font:inherit;font-size:14.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent),0 6px 16px -6px color-mix(in srgb,var(--brand) 70%,transparent);transition:transform .15s,box-shadow .15s}
html body nav.top .row .jh7-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 28%,transparent),0 10px 20px -8px color-mix(in srgb,var(--brand) 80%,transparent)}
:root[data-theme="dark"] nav.top .row .jh7-cta{color:#1c1613}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav.top .row .jh7-cta{color:#1c1613}}
.jh7-cta .s{display:none}
html body nav.top .row a.jh7-login,html body nav.top .row a.jh7-cta{text-decoration:none}

/* 1180px 아래: 메뉴가 붙지 않게 '제휴 모음'만 숨긴다(같은 링크가 제휴마케팅 메뉴 안에 있다) */
@media (max-width:1180px){html body nav.top .row a.btn.jh7-ghost{display:none}}
@media (max-width:1000px) and (min-width:721px){
  html body nav.top .row{gap:10px}
  html body nav.top .row .jh7-cta{padding:0 14px}
  html body nav.top .row .jh7-cta .l{display:none}
  html body nav.top .row .jh7-cta .s{display:inline}
  html body nav.top .row .jh7-theme{display:none}
}

/* 모바일: 테마 · 로그인 · 시작하기 · 메뉴(하입덕 순서). 검색은 메뉴 안으로 옮긴다 */
@media (max-width:720px){
  html body nav.top .row{gap:6px}
  html body nav.top .row .navsearch{display:none}
  html body nav.top .row .jh7-theme{margin-left:auto;width:40px;height:40px;border:0}
  html body nav.top .row .jh7-login{min-height:40px;padding:0 8px;font-size:14px}
  html body nav.top .row .jh7-cta{min-height:36px;padding:0 13px;font-size:14px;border-radius:9px;box-shadow:none}
  html body nav.top .row .jh7-cta .l{display:none}
  html body nav.top .row .jh7-cta .s{display:inline}
  html body .hamb{width:40px;height:40px;padding:0 10px}
}
.mobmenu .mm-search{display:flex;align-items:center;gap:8px;padding:13px 4px;font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;width:100%}
@media (min-width:721px){.mobmenu .mm-search{display:none}}

/* ── 가입 창 ── */
.jh7-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.jh7-modal[hidden]{display:none}
.jh7-dim{position:absolute;inset:0;background:rgba(20,14,12,.55);backdrop-filter:blur(2px)}
.jh7-card{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:30px 26px 22px;box-shadow:0 24px 60px -20px rgba(0,0,0,.45);animation:jh7in .18s ease-out}
@keyframes jh7in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jh7-card{animation:none}}
.jh7-x{position:absolute;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;border:0;background:none;color:var(--muted);border-radius:10px;cursor:pointer}
.jh7-x:hover{background:var(--surface2);color:var(--ink)}
.jh7-logo{display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:-.03em}
.jh7-logo img{width:28px;height:28px;border-radius:7px}
.jh7-card h2{margin-top:18px;text-align:center;font-size:23px;font-weight:800;letter-spacing:-.03em}
.jh7-sub{margin-top:6px;text-align:center;font-size:14px;color:var(--muted)}
.jh7-offer{margin-top:20px;padding:13px 16px;border-radius:16px;background:var(--gl-soft);border:1px solid color-mix(in srgb,var(--gl) 22%,transparent);color:var(--gl);font-size:13px;line-height:1.6}
.jh7-offer .h{font-weight:800;font-size:13.5px}
.jh7-offer ul{margin:6px 0 0;padding:0;list-style:none}
.jh7-offer li{position:relative;padding-left:12px;margin-top:3px}
.jh7-offer li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.jh7-modal.is-login .jh7-offer{display:none}
.jh7-sns{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.jh7-b{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:0 48px;border-radius:12px;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent}
.jh7-b svg,.jh7-b .ic{position:absolute;left:18px;top:50%;transform:translateY(-50%)}
.jh7-b.kakao{background:#FEE500;color:rgba(0,0,0,.85)}
.jh7-b.kakao:hover{filter:brightness(.97)}
.jh7-b.naver{background:#03C75A;color:#fff}
.jh7-b.google{background:#fff;color:#1f1f1f;border-color:#dadce0}
.jh7-b.email{background:transparent;color:var(--ink);border-color:var(--line)}
.jh7-b.email:hover{background:var(--surface2)}
.jh7-b .soon{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;padding:3px 7px;border-radius:999px;background:rgba(0,0,0,.12)}
.jh7-b.email .soon{background:var(--surface2);color:var(--muted)}
.jh7-b.google .soon{background:#f1f3f4;color:#5f6368}
.jh7-alt{margin-top:16px;text-align:center;font-size:13.5px;color:var(--muted)}
.jh7-alt button{border:0;background:none;font:inherit;font-weight:800;color:var(--brand-ink);cursor:pointer;padding:4px 2px;text-decoration:underline;text-underline-offset:3px}
.jh7-legal{margin-top:10px;text-align:center;font-size:12px;color:var(--faint)}
.jh7-legal a{color:inherit;text-decoration:underline}
@media (max-width:420px){.jh7-card{padding:26px 18px 18px}.jh7-card h2{font-size:21px}}
html.jh7-lock,html.jh7-lock body{overflow:hidden}

/* 안내 토스트 */
.jh7-toast{position:fixed;left:50%;bottom:90px;z-index:1100;transform:translate(-50%,20px);max-width:calc(100vw - 32px);width:max-content;padding:12px 18px;border-radius:12px;background:#1c1613;color:#fff;font-size:14px;font-weight:600;line-height:1.5;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
:root[data-theme="dark"] .jh7-toast{background:#f2ebe7;color:#1c1613}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .jh7-toast{background:#f2ebe7;color:#1c1613}}
.jh7-toast.on{opacity:1;transform:translate(-50%,0)}

/* ── /welcome/ ── */
.jh7-wel{padding:44px 0 56px}
.jh7-wel .box{max-width:620px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 26px}
.jh7-wel h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.jh7-wel .lead{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.7}
.jh7-wel .note{margin-top:16px;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.6;background:var(--brand-soft);color:var(--brand-ink)}
.jh7-wel .note[hidden]{display:none}
.jh7-wel h2{margin-top:26px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.jh7-wel ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:s}
.jh7-wel ol li{counter-increment:s;position:relative;padding:12px 0 12px 44px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.65}
.jh7-wel ol li:last-child{border-bottom:0}
.jh7-wel ol li::before{content:counter(s);position:absolute;left:0;top:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);color:var(--ink);font-weight:800;font-size:14px}
.jh7-wel ol li.done::before{content:"✓";background:var(--brand);color:#fff}
.jh7-wel ol li b{display:block}
.jh7-wel .acts{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.jh7-wel .acts a{flex:1 1 200px;display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:12px;font-weight:800;font-size:15px;text-decoration:none}
.jh7-wel .acts .p{background:var(--brand);color:#fff}
.jh7-wel .acts .g{border:1px solid var(--line);color:var(--ink)}
.jh7-wel .small{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.6}
.jh7-wel .offer-wrap .jh7-offer{margin-top:18px}
@media (max-width:420px){.jh7-wel{padding:24px 0 40px}.jh7-wel .box{padding:24px 18px}.jh7-wel h1{font-size:22px}}
/* 아주 좁은 폰(360px 미만): 버튼 간격만 줄여 가로 넘침을 막는다 */
@media (max-width:359px){
  html body nav.top .row{gap:2px}
  html body nav.top .row .jh7-theme{width:36px}
  html body nav.top .row .jh7-login{padding:0 5px}
  html body nav.top .row .jh7-cta{padding:0 10px}
  html body .hamb{width:38px;padding:0 9px}
}
/* 태블릿(721~1000px): 메뉴 글자가 두 줄로 꺾이지 않게. 900px 아래에선 '처음이신가요?'만 숨긴다(같은 /start/ 가 제휴마케팅 메뉴 안에 있다) */
@media (max-width:1000px) and (min-width:721px){
  html body nav.top .links{white-space:nowrap;gap:2px}
  html body nav.top .links>a,html body nav.top .dd>a{padding:0 7px;font-size:14px}
}
@media (max-width:900px) and (min-width:721px){html body nav.top .links a.nav-onb{display:none}}
/* ── 10/20 로그인 뒤: 헤더 '내 발자국' + /my/ 내 정보 카드 + 로그아웃 상태 안내 띠 ── */
html.jh7-in nav.top .links .nav-my{display:none}
html body nav.top .row a.jh7-me{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 6px;flex-shrink:0;border-radius:999px;background:var(--sea-soft,#e3f4f1);color:var(--sea-ink,#0f5f55)!important;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
html body nav.top .row a.jh7-me:hover{filter:brightness(.97)}
html body nav.top .row a.jh7-me .nm{font-weight:600;opacity:.85}
html body nav.top .row a.jh7-me .nm::after{content:"·";margin-left:8px;opacity:.6}
.jh7-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--v4-box,#f6f4f2)}
.jh7-av.is-txt{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-size:13px;font-weight:800}
@media (max-width:1000px){html body nav.top .row a.jh7-me .nm{display:none}}
@media (max-width:720px){html body nav.top .row a.jh7-me{min-height:36px;padding:0 11px 0 4px;gap:6px;font-size:13.5px}html body nav.top .row a.jh7-me .jh7-av{width:26px;height:26px}}
@media (max-width:359px){html body nav.top .row a.jh7-me .lb{display:none}html body nav.top .row a.jh7-me{padding:0 4px}}
.jh7-mecard .top{display:flex;align-items:center;gap:14px}
.jh7-mecard .top .jh7-av{width:64px;height:64px;font-size:26px}
.jh7-mecard .who{flex:1;min-width:0}
.jh7-mecard h2{margin:0 0 2px;font-size:13px;font-weight:700;color:var(--v3-sub,var(--muted))}
.jh7-mecard .nm{margin:0;font-size:20px;color:var(--v3-ink,var(--ink));overflow-wrap:anywhere}
.jh7-mecard .via{margin:2px 0 0;font-size:13px;color:var(--v3-sub,var(--muted))}
.jh7-out{flex-shrink:0;min-height:40px;padding:0 14px;border:1px solid var(--v4-line);background:var(--v4-card);border-radius:10px;font:inherit;font-size:14px;cursor:pointer;color:var(--v3-ink,var(--ink))}
.jh7-out:hover{background:var(--v4-box)}
.jh7-mecard .info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0}
.jh7-mecard .info>div{background:var(--v4-box);border-radius:12px;padding:12px 14px}
.jh7-mecard dt{font-size:12.5px;color:var(--v3-sub,var(--muted));margin:0 0 4px}
.jh7-mecard dd{margin:0;font-size:15px;font-weight:700;color:var(--v3-ink,var(--ink))}
.jh7-mecard dd.tr.on{color:var(--sea-ink,#0f5f55)}
.jh7-mecard .claim{margin-top:14px;border:1px solid color-mix(in srgb,#8b5cf6 35%,transparent);background:color-mix(in srgb,#8b5cf6 9%,transparent);border-radius:14px;padding:14px 16px}
.jh7-mecard .claim .h{margin:0 0 6px;font-weight:800;color:#6d3fd6}
:root[data-theme="dark"] .jh7-mecard .claim .h{color:#c4b0ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .jh7-mecard .claim .h{color:#c4b0ff}}
.jh7-mecard .claim ol{margin:0 0 12px;padding-left:20px;font-size:14px;line-height:1.65;color:var(--v3-ink,var(--ink))}
.jh7-mecard .acts{display:flex;flex-wrap:wrap;gap:8px}
.jh7-mecard .acts a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:10px;font-weight:700;font-size:14.5px;text-decoration:none}
.jh7-mecard .acts .p{background:var(--brand);color:#fff}
.jh7-mecard .acts .g{border:1px solid var(--v4-line);background:var(--v4-card);color:var(--v3-ink,var(--ink))}
.jh7-mybar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border-radius:14px;background:var(--sea-soft,#e3f4f1);color:var(--sea-ink,#0f5f55)}
.jh7-mybar p{flex:1;min-width:220px;margin:0;font-size:14px;line-height:1.55}
.jh7-barbtn{min-height:40px;padding:0 14px;border:0;border-radius:10px;background:#FEE500;color:#191600;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
@media (max-width:640px){.jh7-mecard .info{grid-template-columns:1fr}.jh7-mecard .top{flex-wrap:wrap}.jh7-mecard .top .jh7-out{margin-left:auto}.jh7-mecard .acts a{flex:1;justify-content:center}}