/* ============================
   기본 구조
============================ */
.jp-header {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    z-index: 1000;
}

.jp-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* ============================
   LOGO
============================ */
.jp-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.jp-logo img { height: 32px; }

.jp-logo span {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

/* ============================
   NAV (PC)
============================ */
.jp-nav a {
    margin: 0 12px;
    font-size: 15px;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
}
.jp-nav a:hover { color: #111827; }

/* ============================
   USER ACCOUNT
============================ */
.jp-account {
    display: flex;
    align-items: center;
}
.jp-account p.telno{
	margin-left:20px;
	font-size:18px;
	font-weight:700;
	MARGIN-TOP: 0;
    MARGIN-BOTTOM: 0;
}
/* =========================
   HEADER AUTH BUTTON
========================= */

.jp-account a.login,
.jp-account a.member-reg,
.jp-account a.logout{
  padding:4px 10px;
  font-size:12px;
  font-weight:500;
  text-decoration:none;
  transition:all .15s ease;
}

/* 로그인 */
.jp-account a.login{
  background:#224b9c;
  color:#fff;
  border-radius:5px 0 0 5px;
}

.jp-account a.login:hover{
  background:#012c81;
}

/* 회원가입 */
.jp-account a.member-reg{
  background:#111827;
  color:#fff;
  border-radius:0 5px 5px 0;
}

.jp-account a.member-reg:hover{
  background:#333;
}

/* 로그아웃 */
.jp-account button.logout{
  padding:4px 10px;
  font-size:12px;
  font-weight:500;
  border-radius:6px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#374151;
  cursor:pointer;
  transition:all .15s ease;
}

.jp-account button.logout:hover{
  background:#f9fafb;
}
.jp-avatar {
    width: 27px;
    height: 27px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
	margin-right:10px;
}
.jp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================
   BUTTONS
============================ */
.jp-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #111827;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.jp-btn:hover { background: #1f2937; }

.jp-btn--outline {
    background: transparent;
    color: #111827;
    border-color: #111827;
}
.jp-btn--outline:hover { background: #f3f4f6; }

/* ============================
   HAMBURGER BUTTON
============================ */
.jp-hamburger {
  width: 28px;
  height: 22px;
  border: none;
  background: none;
  position: relative;
  padding: 0;
  cursor: pointer;
}

.jp-hamburger .line {
  position: absolute;
  height: 2px;
  background: #111827;
  left: 0;
  border-radius: 2px;
  transition: .25s ease;
}

.jp-hamburger .line.top {
  width: 100%;
  top: 0;
}

.jp-hamburger .line.middle {
  width: 80%;
  top: 50%;
  transform: translateY(-50%);
}

.jp-hamburger .line.bottom {
  width: 100%;
  bottom: 0;
}

.jp-hamburger.is-open .line.top {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.jp-hamburger.is-open .line.middle {
  opacity: 0;
}

.jp-hamburger.is-open .line.bottom {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* ============================
   MOBILE MENU CONTAINER
============================ */
.jp-mobile {
  position: fixed;
  top: 60px; /* header height */
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  z-index: 999999;
  pointer-events: none;
}

.jp-mobile.is-open {
  pointer-events: auto;
}

/* ============================
   BACKDROP
============================ */
.jp-mobile__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .3s ease;
}

.jp-mobile.is-open .jp-mobile__backdrop {
  opacity: 1;
}

/* ============================
   SLIDE PANEL
============================ */
.jp-mobile__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(300px, 70%);
  height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow: hidden; /* 🔑 패널은 스크롤 금지 */
}

.jp-mobile.is-open .jp-mobile__panel {
  transform: translateX(0);
}

/* ============================
   MENU (SCROLL HERE)
============================ */
.jp-mobile__menu {
  height: 100%;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;                /* ✅ 스크롤은 여기 하나 */
  -webkit-overflow-scrolling: touch;
}

/* =========================
   MOBILE PROFILE
========================= */
.m-profile {
  display: flex;
  align-items: normal;
  margin:5.5px 0;
  justify-content:flex-start;
  padding: 5px 0px;
  gap:10px;
}
/* 아바타 */
.m-profile-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  overflow:hidden;
}

.m-profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 정보 */
.m-profile-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.m-profile-info strong{
  font-size:15px;
  font-weight:600;
}

/* 버튼 */
.m-profile-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.m-profile-actions a{
	padding: 10px 4px;
    font-size: 15px;
    font-weight: 500;
	color:#111827;
}

/* 로그아웃 */
.m-logout{
  padding:4px 10px;
  font-size:12px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
}

/* ============================
   DIVIDER
============================ */
.m-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 18px 0;
}

/* ============================
   MENU LIST
============================ */
.m-menu-list a {
  display: block;
  padding: 7px 7px 0 7px;
  font-size: 16px;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  border-radius: 8px;
}

.m-menu-list a:active {
  background: #f3f4f6;
}

/* SUB MENU */
.m-menu-list.sub a {
  font-size: 15px;
  color: #4b5563;
}

/* ============================
   RESPONSIVE
============================ */
.pc-only { display: flex !important; }
.mobile-only { display: none !important; }

@media (max-width: 1024px) {
  .pc-only { display: none !important; }
  .mobile-only { display: block !important; cursor: pointer; }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  .jp-nav a {
    font-size: 12px;
  }
}

/* ============================
   MOBILE AUTH BUTTONS
============================ */

/* 회원가입 */
.m-auth:last-of-type {
  background: #f3f4f6;
  color: #111827;
}

/* ============================
   LOGOUT BUTTON
============================ */
.m-logout {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  transition: background .15s ease, color .15s ease;
}

.m-logout:hover,
.m-logout:active {
  background: #f3f4f6;
  color: #111827;
}

/* ============================
   PROFILE WRAP CLEAN
============================ */

.m-profile-info strong {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}
.m-menu-list a {
  padding: 10px 4px;
  font-size: 15px;
  font-weight: 500;
}

.m-menu-list.sub a {
  font-size: 14px;
  color: #6b7280;
}
.jp-mobile__panel {
  width: 85%;
  max-width: 360px;
  box-shadow: -12px 0 30px rgba(0,0,0,.12);
}
/* ============================
   MOBILE AUTH RESET
============================ */

.m-auth{
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  border-radius:8px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor: pointer;
  color: #111827;
}

.m-auth:active {
  transform: scale(.98);
}

.m-auth.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #4338ca;
  border-radius: 2px;
}
/* =========================
   MOBILE CALL BUTTON
========================= */

.m-call{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:20px;
  padding:14px;
  font-size:16px;
  font-weight:600;
  border-radius:10px;
  background:#224b9c;
  color:#fff;
  text-decoration:none;
}

.m-call i{
  font-size:15px;
}

.m-call:active{
  transform:scale(.97);
}