/* 가입안내(/introduce) — 외부 파일 페이지. 원본: 이미지 12장(layouts/pharmmaker/images/join/*.png, 문서 43066768) */
/* ── 가입안내 (.jn) ── */
.jn { --navy:#1e2b45; --teal:#2f9bb0; --teal-l:#38a8bd; --sky:#eaf6f8; --ink:#3a4658; --muted:#6b7a90; --red:#e5484d; --yel:#f2c14e;
	position: relative; overflow: hidden; padding: 0 0 40px; border-radius: 22px; background: #fff; box-shadow: 0 2px 14px rgba(30,43,69,.07);
	color: var(--ink); font-family: 'Spoqa Han Sans Neo','Nanum Gothic',sans-serif; font-size: 15.5px; line-height: 1.75; letter-spacing: -.2px; word-break: keep-all; }
.jn * { box-sizing: border-box; }
.jn a { text-decoration: none; }

/* 히어로 */
.jn-hero { position: relative; display: grid; grid-template-columns: 1fr 210px; align-items: end; gap: 10px; padding: 34px 40px 0; background: linear-gradient(135deg,#dff3f7 0%,#eaf6f8 55%,#f4fbfc 100%); }
.jn-hero::after { content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(56,168,189,.12); }
.jn-hero .kick { display:inline-block; padding:4px 12px; border-radius:14px; background:#fff; color:var(--teal); font-size:13px; font-weight:800; box-shadow:0 2px 6px rgba(30,43,69,.06); }
.jn-hero h1 { margin: 12px 0 8px; color: var(--navy); font-size: 40px; font-weight: 800; line-height: 1.2; letter-spacing: -1.5px; }
.jn-hero p { margin: 0 0 34px; color: var(--ink); font-size: 17px; font-weight: 700; }
.jn-hero p b { color: var(--teal); }
.jn-hero .woori { position: relative; z-index: 1; width: 210px; margin-bottom: -6px; animation: jn-bob 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes jn-bob { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-3deg) translateY(-4px)} }

.jn-sec { padding: 34px 40px 0; }
.jn-h { display:flex; align-items:center; gap:10px; margin:0 0 18px; color:var(--navy); font-size:22px; font-weight:800; letter-spacing:-.6px; }
.jn-h .no { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; font-size:14px; }
.jn-h small { margin-left:auto; color:var(--muted); font-size:13px; font-weight:700; }

/* 바로가기 3개 */
.jn-quick { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:-22px; padding:0 40px; position:relative; z-index:2; }
.jn-q { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; background:#fff; box-shadow:0 8px 22px rgba(30,43,69,.10); color:var(--navy); transition:transform .18s ease, box-shadow .18s ease; }
.jn-q:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(30,43,69,.14); }
.jn-q img { width:46px; height:46px; flex:none; border-radius:50%; }
.jn-q b { display:block; font-size:15px; font-weight:800; line-height:1.3; }
.jn-q span { color:var(--muted); font-size:12.5px; font-weight:700; }
.jn-q.mopf { background:linear-gradient(135deg,#fff7df,#fff); box-shadow:0 8px 22px rgba(242,193,78,.25); }
.jn-q.soon { cursor:default; opacity:.85; }

/* 등업 흐름 */
.jn-track { position:relative; margin:0 0 16px; padding:18px 16px 18px 20px; border-radius:18px; background:#f6f9fb; }
.jn-track .who { display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; padding:3px 12px; border-radius:12px; background:var(--navy); color:#fff; font-size:13px; font-weight:800; }
.jn-track.stu .who { background:#6b7a90; }
.jn-steps { display:flex; align-items:flex-start; gap:4px; }
.jn-step { flex:1 1 0; min-width:0; text-align:center; }
.jn-step img { width:92px; height:92px; border-radius:50%; transition:transform .25s ease; }
.jn-step:hover img { transform:scale(1.06); }
.jn-step .nm { display:block; margin-top:6px; color:var(--navy); font-size:14.5px; font-weight:800; }
.jn-step .tip { margin-top:6px; color:var(--muted); font-size:12px; font-weight:700; line-height:1.4; }
.jn-step .badge { display:inline-block; margin-top:4px; padding:2px 9px; border-radius:10px; background:#dff3f7; color:var(--teal); font-size:11.5px; font-weight:800; }
.jn-arrow { flex:0 0 74px; padding-top:28px; text-align:center; color:var(--red); font-size:12.5px; font-weight:800; line-height:1.35; }
.jn-arrow i { display:block; height:3px; margin:0 8px 6px; border-radius:2px; background:linear-gradient(90deg,rgba(229,72,77,.15),var(--red)); position:relative; }
.jn-arrow i::after { content:""; position:absolute; right:-2px; top:-4px; border:5px solid transparent; border-left:7px solid var(--red); border-right:0; }
.jn-arrow a { display:inline-block; margin-top:5px; padding:2px 8px; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1px #f3c9cb; color:var(--red); font-size:11.5px; }
.jn-start { display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:10px 14px; border-radius:14px; background:var(--sky); color:var(--navy); font-weight:800; }
.jn-start small { color:var(--muted); font-weight:700; }

/* 단계 안내 카드 */
.jn-guide { display:grid; gap:12px; margin-top:6px; }
.jn-g { display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; border:1px solid #e3e9ef; }
.jn-g dt { margin:0; color:var(--navy); font-weight:800; font-size:15.5px; }
.jn-g dd { margin:0; }
.jn-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:12px; background:var(--teal-l); color:#fff !important; font-weight:800; font-size:14px; white-space:nowrap; transition:background .2s; }
.jn-btn:hover { background:#2f8fa3; }
.jn-btn.y { background:#f0b429; }
.jn-btn.y:hover { background:#d99a0f; }
.jn-btn.off { background:#c9d1da; cursor:default; }
.jn-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* 등급체계 */
.jn-grades { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.jn-gr { position:relative; display:flex; gap:12px; padding:16px; border-radius:16px; background:#f6f9fb; }
.jn-gr .ic { flex:none; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:#fff; box-shadow:0 2px 6px rgba(30,43,69,.06); color:var(--teal); }
.jn-gr .ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.jn-gr .ic.av { width:48px; height:48px; padding:0; border-radius:50%; background:none; box-shadow:none; }
.jn-gr .ic.av img { width:48px; height:48px; }
.jn-gr h3 { margin:0 0 2px; color:var(--navy); font-size:16px; font-weight:800; }
.jn-gr p { margin:0; font-size:14px; line-height:1.65; }
.jn-gr .note { display:block; margin-top:4px; color:var(--muted); font-size:12.5px; }
.jn-gr.mopf { grid-column:1 / -1; background:linear-gradient(135deg,#fff7df 0%,#fffdf6 100%); box-shadow:inset 0 0 0 1px #f6dd9c; }
.jn-gr.mopf .ic { color:#d99a0f; }
.jn-gr.mopf .full { display:inline-block; margin:2px 0 4px; padding:2px 10px; border-radius:10px; background:#fff; color:#b7791f; font-size:12.5px; font-weight:800; }

/* 등장 효과는 스크립트가 .jn-anim 을 붙였을 때만 — 스크립트가 늦거나 막혀도 내용은 항상 보임 */
.jn.jn-anim .rv { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.jn.jn-anim .rv.on { opacity:1; transform:none; }

@media (max-width: 768px) {
	.jn { font-size:14.5px; border-radius:18px; }
	.jn-hero { grid-template-columns:1fr 120px; padding:24px 20px 0; }
	.jn-hero h1 { font-size:27px; }
	.jn-hero p { font-size:14px; margin-bottom:28px; }
	.jn-hero .woori { width:120px; }
	.jn-quick { grid-template-columns:1fr; padding:0 16px; gap:8px; }
	.jn-sec { padding:28px 16px 0; }
	.jn-h { font-size:19px; }
	.jn-steps { flex-direction:column; align-items:stretch; gap:0; }
	.jn-step { display:flex; align-items:center; gap:12px; text-align:left; }
	.jn-step img { width:58px; height:58px; }
	.jn-step .nm { margin:0; }
	.jn-step .badge { margin:0 0 0 auto; }
	.jn-arrow { flex:none; display:flex; align-items:center; gap:8px; padding:4px 0 4px 26px; text-align:left; }
	.jn-arrow i { width:3px; height:18px; margin:0; background:linear-gradient(180deg,rgba(229,72,77,.15),var(--red)); }
	.jn-arrow i::after { right:-4px; top:auto; bottom:-6px; border:5px solid transparent; border-top:7px solid var(--red); border-bottom:0; }
	.jn-arrow a { margin:0; }
	.jn-g { grid-template-columns:1fr; gap:8px; }
	.jn-grades { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.jn-hero .woori { animation:none; }
	.jn.jn-anim .rv { opacity:1; transform:none; transition:none; }
}