header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  /*padding:8px 20px;*/
	  height:60px;
	  background:#fff;
	  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
	}
    @media (max-width: 900px) {
		header { margin-right: 0;}
    }

	/* 로고 */
	.logo {
		display: flex;
		align-items: center;
		font-size: 18px;
		font-weight: 600;
	}

	.logo img {
		height: 45px;
		margin: auto 5px;
	}
	.logo span {
		margin-left:10px;
		font-size:16px;
		font-weight:300;
	}

	@media (max-width: 768px) {
		/*header .logo {display:none;}*/
		.logo img {
			height: 35px;
		}
		.logo {
			font-size: 14px;
			margin: auto 2px;
		}
		.logo span {
			display:none;
			font-size:13px;
		}
	}
	/* 네비게이션 */
	header nav {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	header nav ul {
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 36px;
		padding: 0;
		margin: 0;
	}

	header nav ul li {
	  margin-right: 20px;
	  font-size: 16px;
	}
    header.pushed { 
		width: calc(100% - 240px);
	}

	/* 로그인/가입 묶음 */
	header .auth-links {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		max-width:220px;
		margin-right:10px;
	}

	header .auth-links .login-link {
		margin-right: 10px;
		font-size: 14px;
		color: #333;
		text-decoration: none;
	}

	header .auth-links .login-link:hover {
		text-decoration: underline;
	}
	@media (max-width: 768px) {
		header nav {display:none;}
		/* 로그인/가입 묶음 */
		header .auth-links {
			width:160px;
		}
	}

	.subscribe-btn {
		background-color: #ff0000;
		color: white;
		padding: 6px 20px;
		border: none;
		border-radius: 20px;
		cursor: pointer;
		font-size: 14px;
	}

	.subscribe-btn:hover {
		background-color: #cc0000;
	}


	.container {
		/*max-width: 1200px;*/
		margin: 10px auto;
		padding: 0 20px;
		text-align: center;
	}

	h3 {
		font-size: 28px;
		margin-bottom: 30px;
	}


	.gnb {display:none;}

    .hamburger {
      background: #fff; border: none; border-radius: 8px;
      width: 36px; height: 36px; display: flex; flex-direction: column;
      justify-content: center; align-items: center; margin-right: 4px;
      cursor: pointer;
      z-index: 1300;
    }
    .hamburger span { width: 22px; height: 4px; background: #3A8FFD; border-radius: 2px; margin: 2px 0; }
    
	
	/* ---- Side Navigation (오른쪽) ---- */
    .side-nav {
		width: 240px;
		background: #253358;
		color: #fff;
		height: 100vh;
		position: fixed;
		top: 0; right: 0;
		z-index: 1300;
		transition: transform 0.24s cubic-bezier(.68,-0.55,.27,1.55);
		box-shadow: -3px 0 24px rgba(50,60,120,0.08);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		border-left: 1px solid #31417c;
		transform: translateX(240px);
		box-sizing: border-box;
    }
    .side-nav.open { 
		transform: translateX(0);
	}
    .side-nav .logo {
		width: 238px;
		font-size: 1.28rem;
		font-weight: bold;
		color: #3A8FFD;
		text-align: left;
		padding: 16px 0 16px 25px;
		letter-spacing: -1.1px;
		border-bottom: 1px solid #35416a;
		margin-bottom: 12px;
		background: none;
		box-sizing: border-box;
    }
	@media (max-width: 768px) {
		
		.container {
			width: 100%;
			margin: 40px auto;
			padding: 0 20px;
			text-align: center;
			box-sizing: border-box;
		}
		h3 {
			font-size: 20px;
			margin-bottom: 20px;
		}
		/*header .auth-links {display:none;}*/
		.gnb {display:block;}
		 .side-nav {display:none;}
		.side-nav.open { 
			display:block;
		}
		
	}
    .nav-list { flex: 1; display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; }
    .nav-item {
      cursor: pointer; font-size: 1.09rem; color: #b6c8f7;
      padding: 13px 28px 13px 28px; font-weight: 500; border-right: 4px solid transparent;
      background: none; outline: none; border: none; width: 100%;
      display: flex; align-items: center;
      transition: background 0.15s, color 0.14s, border-right 0.15s;
      position: relative;
      text-align: left;
    }
    .nav-item:hover, .nav-item.active {
      background: #2c436c;
      color: #fff;
      border-right: 4px solid #3A8FFD;
    }
    .nav-item.has-sub:after {
      content: '';
      display: inline-block;
      margin-left: auto;
      border: solid #7eaaff;
      border-width: 0 3px 3px 0;
      padding: 3.5px;
      transform: rotate(-45deg);
      transition: transform 0.2s;
    }
    .nav-item.has-sub.open:after {
      transform: rotate(135deg);
      margin-top: 5px;
    }
    .sub-menu {
      display: none; flex-direction: column; background: #203057;
      padding-right: 10px;
      animation: fadeIn .17s;
    }
    .sub-menu.open { display: flex; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .sub-item {
      font-size: 0.99rem; color: #bad3fe;
      padding: 10px 32px 10px 0; border-right: 3px solid transparent;
      border-radius: 0 3px 3px 0; font-weight: 500; background: none;
      outline: none; border: none; text-align: right; cursor: pointer;
      transition: background 0.13s, color 0.13s, border-right 0.13s;
    }
    .sub-item:hover, .sub-item.active {
      background: #283e69;
      color: #fff;
      border-right: 3px solid #3A8FFD;
    }
    .logout {
      margin: 0 24px 24px 24px;
      padding: 12px 0px;
      background: #344678;
      color: #ffb800;
      border-radius: 7px;
      text-align: center;
      cursor: pointer;
      font-weight: 600;
      font-size: 1.03rem;
      border: none;
      outline: none;
      transition: background 0.13s;
    }
    .logout:hover { background: #394d86; }
    /* ---- Content ---- */
    .main-content {
		padding: 4px 36px 32px 36px;
		width: 100%;
		transition: width 0.25s, transform 0.25s;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
    }
    .main-content.pushed { 
		/*
		transform: translateX(-240px);
		*/
		width: calc(100% - 240px);
	}
    @media (max-width: 600px) {
      .side-nav { width: 90vw; min-width: 0; }
      .main-content.pushed { transform: translateX(-90vw);}
    }



    /* --- 슬라이드 레이아웃 --- */
    .slide-panel {
		position: fixed; 
		top: 0; right: 0; 
		width: 460px; 
		height: 100vh;
		background: #fff; 
		box-shadow: -6px 0 24px rgba(50,60,120,0.12);
		border-left: 1px solid #3A8FFD33;
		z-index: 3000;
		transition: transform 0.28s cubic-bezier(.68,-0.55,.27,1.55);
		transform: translateX(110%);
		display: flex; 
		flex-direction: column;
    }
    .slide-panel.open { transform: translateX(0);}
    .slide-panel .panel-header {
		display: flex;               /* ★ flex 컨테이너로 만듦 */
		align-items: center;
		font-size: 1.17rem; 
		font-weight: bold; 
		color: #3A8FFD;
		padding: 10px 10px 10px 20px; 
		border-bottom:1px solid #e7eaf3; 
		position:relative;
		background: #fff;
	}
	.slide-panel #panel-title {
		font-size: 1.13rem;
		font-weight: bold;
		color: #3A8FFD;
		flex: 1 1 auto;
	}
	.slide-panel .auth-links {
		margin-left: auto;    /* ★ 오른쪽으로 밀림 */
		display: flex;
		align-items: center;
		gap: 6px;
		position: relative;
	}
    .slide-panel .close-btn {
		background: none;
		border: none;
		font-size: 1.7rem;
		color: #a3adc7;
		cursor: pointer;
		line-height: 1;
		transition: color 0.13s;
		padding: 6px 10px;
		border-radius: 50%;
    }
    .slide-panel .close-btn:hover {
		color:#fa5959;
		background: #eee;
	}

	.side-panel-menu-button {
		background: none;
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		color: #333;
		padding:6px 16px;
		border-radius: 50%;
	}
	.side-panel-menu-button:hover {
		background: #eee;
	}


    .slide-panel .panel-body {
		padding:22px 28px; 
		flex:1;
		overflow-y: auto;
	}
    @media (max-width: 500px) {
		.slide-panel {width:97vw; min-width:0;}
		.panel-header, .panel-body {
			padding-left: 13px; 
			padding-right: 13px;
		}
    }
    /* 암막 배경(필요시) */
    .panel-backdrop {
		display: none; position:fixed; left:0; top:0; width:100vw; height:100vh;
		background:rgba(10,25,40,0.07); z-index:2000;
    }
    .panel-backdrop.open { display:block;}

	.side-panel-menu {
		display: none;
		position: fixed;
		top: 50px;
		right: 20px;
		min-width: 140px;
		background: white;
		color: black;
		padding: 10px;
		border-radius: 5px;
		z-index: 9999;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		visibility: visible;
		opacity: 1;
	}
	.side-panel-menu-info {padding:5px 5px;}
	.side-panel-menu-info ul {margin:0;padding:0;}
	.side-panel-menu-info ul li {padding:0px 0px;}
	.side-panel-menu-info ul li b {font-size:16px;font-weight:600;}
	.side-panel-menu-info ul li a {
		display: block;
		padding: 8px 10px;
		color: #333;
		text-decoration: none;
		font-size: 14px;
	}
	.side-panel-menu-info ul li a:hover {
		background: #f3f4f6;
	}



	/* 목록 */
    .list-page-container {
		/*max-width: 980px;*/
		margin: 34px auto 0 auto;
		background: #fff;
		border-radius: 18px;
		box-shadow: 0 6px 24px rgba(80,120,200,0.07);
		padding: 26px 32px 32px 32px;
		min-height: 630px;
    }
    .page-title-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 23px;
		gap: 10px;
    }
    .page-title {
		font-size: 1.5rem;
		font-weight: bold;
		color: #1b2847;
		letter-spacing: -1px;
    }


	/* 버튼 묶음 그룹 */
	.btn-group {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.btn-group .register-btn {
		background: #3A8FFD;
		color: #fff;
		font-weight: 400;
		font-size: 0.8rem;
		border: none;
		border-radius: 20px;
		padding: 8px 16px;
		cursor: pointer;
		transition: background 0.16s;
		box-shadow: 0 2px 8px rgba(58,143,253,0.07);
	}
	.btn-group .batch-btn {
		background: #3399cc;
		color: #fff;
		font-weight: 400;
		font-size: 0.8rem;
		border: none;
		border-radius: 20px;
		padding: 8px 16px;
		cursor: pointer;
		transition: background 0.16s;
		box-shadow: 0 2px 8px rgba(58,143,253,0.07);
	}
	.btn-group .register-btn:hover {
		background: #226ad3;
	}
	.btn-group .batch-btn:hover {
		background: #2f8cb9;
	}
	@media (max-width: 700px) {
		.page-title-row {
			flex-direction: column;
			align-items: stretch;
			gap: 7px;
		}
		.btn-group {
			justify-content: flex-end;
			gap: 8px;
			margin-top: 6px;
		}
		.btn-group .register-btn, .btn-group .batch-btn {
			width: 100%;
			min-width: 0;
			margin: 0;
		}
	}
	.tab-search-row {
		display: flex;
		align-items: flex-end;
		gap: 0;
		margin-bottom: 10px;
		flex-wrap: wrap;
	}
	.tab-menu {
		display: flex;
		gap: 8px;
		margin: 0 0 24px 0;
		padding-left: 2px;
		flex: 1 1 auto;         /* 탭은 최대한 왼쪽 확장 */
	}
	.tab-item {
		background: #f4f8fd;
		color: #486cba;
		border: none;
		border-radius: 8px 8px 0 0;
		padding: 10px 20px;
		font-size: 1.0rem;
		font-weight: 400;
		cursor: pointer;
		transition: background 0.14s, color 0.14s;
		outline: none;
		position: relative;
		top: 3px;
		z-index: 2;
	}
	.tab-item:hover,
	.tab-item.active {
		background: #fbfbfb;
		color: #2559d5;
		border-bottom: 2px solid #3A8FFD;
		box-shadow: 0 -4px 18px rgba(50,90,160,0.05);
	}
	@media (max-width: 600px) {
		.tab-menu {
			gap: 3px;
			flex-wrap: wrap;
		}
		.tab-item {
			padding: 9px 15px;
			font-size: 0.99rem;
		}
	}


    .search-row {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-left: auto;           /* ★ 오른쪽 정렬 핵심 */
		min-width: 0;
    }
    .search-input {
		padding: 8px 12px;
		border: 1.5px solid #dbe4ef;
		border-radius: 16px;
		background: #f9fbff;
		font-size: 0.8rem;
		min-width: 170px;
		width: 210px;
		transition: border 0.16s;
		outline: none;
    }
    .search-input:focus { border: 1.7px solid #3A8FFD; }
    .search-btn {
		padding: 8px 16px;
		background: #5f6b90;
		color: #fff;
		border: none;
		border-radius: 20px;
		font-size: 0.8rem;
		font-weight: 400;
		cursor: pointer;
		transition: background 0.16s;
    }
    .search-btn:hover { background: #283254; }

    /* 목록 헤더/로우 */
    .list-header, .list-row {
		display: flex;
		align-items: center;
		padding: 13px 10px;
		border-bottom: 1px solid #ecedf0;
    }
    .list-header {
		font-size: 16px;
		font-weight: 600;
		background: #f4f6fa;
		color: #4d5e8d;
    }
    .list-row:last-child { border-bottom: none; }
    .list-col {
		flex: 1 1 0;
		min-width: 90px;
		padding: 0 7px;
		text-align: left;
		font-size: 14px;
		word-break: keep-all;
    }
    .list-col a {
		margin: 5px 0;
		font-size: 15px;
    }
    .list-col.small { min-width: 56px; flex: 0.6 1 0;}
    .list-col.middle { min-width: 100px; flex: 1.2 1 0;}
    .list-col.wide { min-width: 170px; flex: 2 1 0;}
    .action-btn {
		padding: 4px 10px;
		border: none;
		border-radius: 16px;
		background: #3A8FFD;
		color: #fff;
		font-weight: 400;
		font-size: 0.70rem;
		cursor: pointer;
		transition: background 0.17s;
		margin-right: 5px;
    }
    .action-btn:last-child {margin-right: 0;}
    .action-btn.delete {background: #fa5959;}
    .action-btn.edit {background: #ffc700; color: #1b2847;}
    .action-btn.modify {background: #c8c8c8; color: #1b2847;}


	.list-col .level {
		padding:4px 8px;
		font-size:12px;
		border-radius: 8px;
	}
	.list-col .level.beginner {
		background:#ff33ff; 
		color:#fff;
	}
	.list-col .level.Intermediate1 {
		background:#ff6600; 
		color:#fff;
	}
	.list-col .level.Intermediate2 {
		background:#ff0066; 
		color:#fff;
	}
	.list-col .level.Advanced {
		background:#cc0033; 
		color:#fff;
	}


    /* 페이징 */
	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 3px;
		margin-top: 38px;
		flex-wrap: wrap;
		user-select: none;
	}
	.page-btn {
		min-width: 36px;
		height: 38px;
		margin: 0 1px;
		padding: 0 10px;
		border: none;
		border-radius: 50%;
		background: #f5f7fa;
		color: #3A8FFD;
		font-size: 1.13rem;
		font-weight: 600;
		cursor: pointer;
		outline: none;
		position: relative;
		z-index: 1;
	}
	.page-btn:hover,
	.page-btn:focus {
		background: #e2efff;
		color: #226ad3;
	}
	.page-btn.active,
	.page-btn.active:hover,
	.page-btn.active:focus {
		background: #3A8FFD;
		color: #fff;
		box-shadow: 0 3px 10px rgba(58,143,253,0.10);
		cursor: default;
	}
	.page-btn.first, .page-btn.last, .page-btn.prev, .page-btn.next {
		background: #f2f2f7;
		color: #bbb;
		font-size: 1.05rem;
		border-radius: 16px;
		width: 38px;
		min-width: 38px;
		height: 38px;
		padding: 0;
	}
	.page-btn.first:hover, .page-btn.last:hover, .page-btn.prev:hover, .page-btn.next:hover {
		background: #e5eafd;
		color: #3A8FFD;
	}
	.page-btn:disabled,
	.page-btn:disabled:hover {
		background: #f2f2f7;
		color: #dadada;
		cursor: not-allowed;
		box-shadow: none;
	}
	.page-ellipsis {
		padding: 0 7px;
		color: #b5bdd5;
		font-size: 1.1rem;
		pointer-events: none;
	}
	@media (max-width: 700px) {
		.pagination { margin-top: 19px; gap: 1.5px; }
		.page-btn { min-width: 30px; height: 32px; font-size: 1rem; }
		.page-btn.first, .page-btn.last, .page-btn.prev, .page-btn.next { width: 32px; min-width: 32px; height: 32px; font-size: 0.99rem;}
	}
    @media (max-width: 1000px) {
		.list-page-container {padding: 18px 4vw 12px 4vw;}
    }
    @media (max-width: 700px) {
		.list-page-container { min-width: 0; padding: 9px 2vw 4vw 2vw;}
		.page-title { font-size: 1.23rem; }
		.list-header, .list-row { font-size: 0.97rem; padding: 7px 0;}
		.list-col { padding: 0 3px; min-width: 66px;}
		.list-col.wide {min-width: 110px;}
		.register-btn { padding: 7px 16px; font-size: 0.98rem;}
		.search-row {gap: 7px;}
		.search-input {width: 90vw; min-width: 0;}
    }


    a.download-btn {
		padding: 8px 16px;
		background: #5f6b90;
		color: #fff;
		border: none;
		border-radius: 20px;
		font-size: 0.8rem;
		font-weight: 400;
		cursor: pointer;
		transition: background 0.16s;
    }
    a.download-btn:hover { background: #283254; }


	/* 폼 */
	.form {
		max-width: 600px;
		margin: 0 auto;
		background-color: #ffffff;
		padding: 30px;
		border-radius: 8px;
		/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
	}

	.form-group {
		margin-bottom: 20px;
	}

	.form-group label {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
		font-weight: 500;
		text-align: left;
	}
	.form-group label span {
		color:#ff3300;
	}

	.form-group input[type="text"],
	.form-group input[type="email"],
	.form-group input[type="tel"],
	.form-group input[type="password"],
	.form-group input[type="file"],
	.form-group textarea,
	.form-group select {
		/*width: calc(100% - 24px);*/
		width:100%;
		padding: 12px;
		border: 1px solid #ced4da;
		border-radius: 4px;
		box-sizing: border-box;
		transition: border-color 0.3s ease;
	}

	.form-group input[type="file"] {
		/*display: block;*/
		padding-left: 14px;
	}

	.form-group input[type="text"]:focus,
	.form-group input[type="email"]:focus,
	.form-group input[type="tel"]:focus,
	.form-group input[type="password"]:focus,
	.form-group input[type="file"]:focus,
	.form-group textarea:focus,
	.form-group select:focus {
		border-color: #007bff;
		outline: none;
	}

	.checkbox-group {
		display: flex;
		justify-content: space-between; /* 양쪽 정렬 */
		align-items: center; /* 세로 중앙 정렬 */
		margin-bottom: 20px;
		padding-left: 14px;
	}

	.checkbox-left {
		display: flex;
		align-items: center; /* ★ 세로 중앙 정렬 핵심 */
		gap: 1px; /* 체크박스랑 라벨 사이 여백 */
	}
	.checkbox-left input[type="checkbox"] {
		transform: translateY(-5px);
	}
	.checkbox-right a {
		font-size: 14px;
		color: #007bff;
		text-decoration: none;
	}

	.checkbox-right a:hover {
		text-decoration: underline;
	}

	.button {
		padding: 12px 20px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		width: 100%;
		transition: background-color 0.3s ease;
	}

	.button:hover {
		background-color: #0056b3;
	}
	/*
	a {
		color: #007bff;
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}
	*/


	textarea:focus {
		border-color: #5c6bc0;
		outline: none;
	}

	textarea {
		height: 150px;
	}

	.submit-btn {
		width: 100%;
		padding: 12px;
		background-color: #5c6bc0;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.submit-btn:hover {
		background-color: #3f4a9d;
	}

	.error {
		color: red;
		font-size: 14px;
	}


	@media (max-width: 600px) {
		.form {
			padding: 20px 10px;
		}
		.checkbox-group {
			flex-direction: column; /* 세로 정렬로 변경 */
			align-items: flex-start; /* 왼쪽 정렬 */
			padding-left: 0; /* 패딩 제거 */
		}

		.checkbox-left {
			margin-bottom: 10px; /* 체크박스 아래에 여백 */
		}

		.checkbox-right {
			align-self: flex-end; /* 링크는 오른쪽 끝에 */
		}
		
		textarea {
			font-size: 14px;
		}
	}


    .form-container {
		margin: 0 auto;
		background: #fff;
		border-radius: 18px;
		box-shadow: 0 6px 24px rgba(80,120,200,0.07);
		padding: 32px 28px 28px 28px;
    }
    .form-title {
		font-size: 1.6rem;
		font-weight: bold;
		color: #1b2847;
		margin-bottom: 22px;
		letter-spacing: -1px;
		text-align: left;
    }
    form, .form-group {
		margin-bottom: 16px;
		box-sizing: border-box;
    }
    .form-label {
		display: block;
		font-size: 1rem;
		font-weight: 600;
		color: #4d5e8d;
		margin-bottom: 7px;
    }
    .form-download {
		display: block;
		padding-top: 3px;
		padding-bottom: 7px;
    }
    .form-input, .form-select {
		display: block;
		width: 100%;
		min-width: 0;
		font-size: 1rem;
		border-radius: 7px;
		border: 1px solid #d8e0ec;
		padding: 10px 12px;
		background: #fafcff;
		transition: border 0.18s;
		outline: none;
		margin-bottom: 2px;
		box-sizing: border-box;
		appearance: none; -webkit-appearance: none; -moz-appearance: none;
    }
    .form-input:focus, .form-select:focus {
		border: 1.5px solid #3A8FFD;
		background: #f6faff;
    }

    .form-actions {
		margin-top: 26px;
		text-align: center;
    }
    .form-btn {
		padding: 10px 12px;
		background: #3A8FFD;
		color: #fff;
		border: none;
		border-radius: 7px;
		font-size: 1.06rem;
		font-weight: bold;
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(58,143,253,0.05);
		transition: background 0.18s;
		width:100%;
		box-sizing: border-box;
    }
    .form-btn:hover { background: #226ad3; }
	.form-radio-group {
		display: flex;
		gap: 18px;
		align-items: center;
	}
	.form-radio-group label {
		font-weight: 400;
		color: #434b5d;
		font-size: 0.8em;
	}
	.form-radio-group input[type="radio"] {
		margin-right: 6px;
		accent-color: #3A8FFD;
	}
    @media (max-width: 600px) {
		.form-container { padding: 18px 7px 16px 7px; }
		.form-title { font-size: 1.17rem; }
    }

	/* 상세 */
    .detail-container {
		/*max-width: 520px;*/
		margin: 0 auto;
		background: #fff;

		border-radius: 18px;
		padding: 36px 10px 24px 10px;
    }
    .detail-title {
		font-size: 1.6rem;
		font-weight: bold;
		color: #1b2847;
		margin-bottom: 26px;
		letter-spacing: -1px;
		text-align: left;
    }
    .detail-fields {
		margin-bottom: 28px;
    }
    .detail-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 17px;
		padding-bottom: 11px;
		border-bottom: 1px solid #f2f4f8;
    }
    .detail-label {
		font-size: 0.9rem;
		font-weight: 600;
		color: #446bba;
		width: 120px;
		min-width: 75px;
		margin-right: 15px;
		flex-shrink: 0;
    }
    .detail-value-left {
		font-size: 0.88rem;
		color: #21243b;
		flex-grow: 1;
		word-break: break-all;
		text-align: left;
    }
    .detail-value {
		font-size: 0.88rem;
		color: #21243b;
		flex-grow: 1;
		word-break: break-all;
		text-align: right;
    }
    .detail-actions {
		text-align: right;
		margin-top: 24px;
    }
    .detail-btn {
		padding: 7px 22px;
		border: none;
		border-radius: 7px;
		font-size: 1rem;
		font-weight: 600;
		margin-left: 8px;
		cursor: pointer;
		transition: background 0.15s;
		box-shadow: 0 1px 6px rgba(58,143,253,0.07);
    }
    .detail-btn.edit {
		background: #3A8FFD;
		color: #fff;
    }
    .detail-btn.delete {
		background: #fa5959;
		color: #fff;
    }
    .detail-btn.back {
		background: #e2eaf7;
		color: #25568f;
    }
    @media (max-width: 600px) {
		.detail-container { padding: 13px 6px 12px 6px; }
		.detail-title { font-size: 1.15rem; }
		.detail-label { font-size: 0.93rem; }
		.detail-value { font-size: 0.97rem; }
		.detail-row { margin-bottom: 10px; padding-bottom: 6px; }
    }
	
	

	/* 1) ZIP 코드와 버튼을 같은 줄에 */
	.address-group .zip-wrap {
	  display: flex;
	  align-items: center;
	  gap: 8px;
	  margin-bottom: 12px; /* 아래 주소칸과의 간격 */
	}
	.address-group .zip-wrap #zipcode {
	  flex: 1;              /* 가능한 공간 최대한 차지 */
	  width: auto;          /* 기존 width 제거 */
	}
	.address-group .zip-wrap .zip-btn {
	  flex-shrink: 0;       /* 버튼 크기 고정 */
	  padding: 8px 12px;
	  background-color: #4a90e2;
	  color: #fff;
	  border-radius: 4px;
	  text-decoration: none;
	  font-size: 14px;
	}

	/* 2) 주소 입력칸들 간 세로 여백 */
	.address-group .addr-wrap input {
	  display: block;
	  width: 100%;
	  margin-top: 10px;     /* 위쪽 여백 추가 */
	}
	@media (max-width: 480px) {
	  /* ZIP+버튼을 세로로 쌓기 */
	  .address-group .zip-wrap {
		flex-direction: column;
		gap: 6px;          /* 세로 간격 */
		margin-bottom: 10px;
	  }
	  .address-group .zip-wrap #zipcode,
	  .address-group .zip-wrap .zip-btn {
		width: 100%;       /* 풀-폭 */
	  }
	  .address-group .zip-wrap .zip-btn {
		text-align: center;
	  }

	  /* addr-wrap도 위아래 간격 조금 더 여유롭게 */
	  .address-group .addr-wrap input {
		margin-top: 12px;
	  }
	}	
	
	
	

    /* FOOTER */
    .footer {
		background: #333;
		text-align: center;
		color: #ebebeb;
		font-size: 14px;
		font-weight:300;
		padding: 18px 8px 10px 8px;
		letter-spacing: -0.2px;
    }
    .footer a {
		color: #ebebeb;
    }
    .footer a:hover {
		color: #559cde;
    }
	@media (max-width: 768px) {
		.footer {
			font-size: 0.9rem;
		}
	}	
	
	.footer-menu {
		max-width: 800px;
		margin: 0 auto;
		padding: 0;
		background: #333;
		display: flex;
		justify-content: space-between; /* 좌우 정렬 */
		align-items: center;
		flex-wrap: wrap; /* 모바일에서 줄바꿈 */
	}

	.footer-menu ul {
		display: flex;
		gap: 12px; /* 항목 간격 */
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.footer-menu ul li a {
		color: #fff;
		text-decoration: none;
	}

	.footer-menu ul li a:hover {
		color: #559cde;
	}

	/* 모바일 */
	@media (max-width: 768px) {
		.footer-menu {
			flex-direction: column;
			gap: 10px;
			text-align: center;
		}

		.footer-menu ul {
			justify-content: center;
			flex-wrap: wrap;
		}
	}