a, a:link, a:active, a:visited, a:hover {
		color: #333;
		text-decoration: none;
		margin: 0;
		padding: 0;
	}

	html, body{	padding: 0;margin: 0;}
	body {
		margin: 0;
		font-family: "나눔스퀘어", "NanumSquare", "verdana" , sans-serif;

		/* font-family:'NotoSansKR Regular', sans-serif; */
		font-weight: 400;
		color: #121212;
		background:#faf9f5 !important;
		height:100%;
	}

	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		/*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
		background:#faf9f5;
		color:#333;
	}

	.logo {
		display: flex;
		align-items: center;
		font-size:18px;
		font-weight:600;
	}
	/*
	.logo {
	  position: relative;
	  display: inline-block;
	}
	*/
	.logo img {
		height: 40px;
		margin-right: 10px;
	}

	.logo span {
		margin-left:10px;
		font-size:16px;
		font-weight:400;
		color:#333;
	}


	.logo .back-btn {
	  display: none;
	  position: absolute;
	  top: 50%;
	  left: -60px;
	  transform: translateY(-50%);
	  font-size: 14px;
	  color: #333;
	  text-decoration: none;
	}

	.logo:hover .back-btn {
	  display: inline-block;
	}


	nav ul {
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
	}

	nav ul li {
	  margin-left: 20px;
	  font-size: 16px;
	}

	/* 로그인/가입 묶음 */
	.auth-links {
		display: flex;
		align-items: center;
		justify-content: center;
	}

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

	.auth-links .login-link:hover {
	  text-decoration: underline;
	}


	.subscribe-btn {
	  background-color: #ebebeb;
	  color: #333;
	  padding: 8px 16px;
	  border: none;
	  border-radius: 16px;
	  cursor: pointer;
	  font-size: 14px;
	}

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

	.page-title {
		color:#333;
		font-size:24px;
	}
	.page-title h3 {
		color:#333;
		font-size:24px;
		font-weight:500;
		margin:0;
		padding:0;
	}
	.page-title span {
		color:#333;
		font-size:14px;
	}

	.hero {
		/*background-image: url('hero-bg.jpg');*/
		background:#eee;
		background-size: cover;
		background-position: center;
		color: black;
		text-align: center;
		padding: 100px 0;
	}

	.hero-content {
		max-width: 800px;
		margin: 0 auto;
	}


	.hero-content h3 {
		font-size:40px;
		font-weight:800;
		line-height:50px;
	}
	.hero-content p {
		font-size:18px;
		font-weight:400;
		margin-bottom:150px;
	}
	.trial-btn {
		background-color: white;
		color: black;
		padding: 15px 30px;
		border: none;
		cursor: pointer;
		font-size: 16px;
	}

	.features {

	  margin-top:50px;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  gap: 20px;

	}

	.feature {
	/*
		text-align: center;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border:solid 1px #ff0000;
		*/
	  flex: 1 1 calc(33.333% - 20px); /* 3개씩 가로 정렬 */
	  text-align: center;
	  padding: 20px;
	  box-sizing: border-box;
	  border-radius: 12px;
	  background: #fff;
	}
	.feature img {
	  border-radius: 12px;
	  max-width: 100%;
	  height: auto;
	  margin-bottom: 16px;
	}

	.feature h3 {
		margin:0;
		padding:0;
		font-size:24px;
	}
	.feature p {
		margin-top:10px;
		padding:0;
		font-size:16px;
	}
	.footer {
		text-align: center;
		padding: 20px;
		color:#333;
		font-size:12px;
	}


	@media (max-width: 1064px) {

		.features {
			flex-direction: column;
		}

		.feature {
			flex: 1 1 100%;
		}
		.feature img {
			margin-bottom: 16px;
		}
		.feature h3 {
			font-size:18px;
		}

	}





	/* subscription.php */
	.container {
		max-width: 1200px;
		margin: 100px auto;
		padding: 0 20px;
		text-align: center;
	}
	h3 {
		font-size: 34px;
		margin-bottom: 30px;
	}

	.tabs {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin: 40px 0px;
	}
	.tab-btn {
		padding: 10px 40px;
		background: #fff;
		border: 2px solid #3399cc;
		color: #3399cc;
		border-radius: 12px;
		cursor: pointer;
		transition: all 0.2s;
		font-weight: bold;
		font-size:18px;
	}
	.tab-btn.active {
		background: #3399cc;
		color: #fff;
	}

	.tab-content {
		display: none;
	}
	.tab-content.active {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.card {
		background: white;
		border-radius: 16px;
		padding: 30px 20px;
		width: 380px;
		box-shadow: 0 8px 20px rgba(0,0,0,0.08);
		text-align: left;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%; /* 카드 높이 자동 맞춤 */
		box-sizing: border-box;
	}
	.card.plus {
		background: #f2f5f9;
		border:solid 1px #3399cc;
	}
	.plan-name {
		font-size: 28px;
		color: #3399cc;
		margin-bottom: 30px;
		font-weight: 700;
	}
	.price {
		font-size: 32px;
		font-weight: 600;
		margin-bottom: 20px;
		color: #222;
	}
	.price span {
		color: #222;
		font-weight:400;
	}
	.price span.krw {
		font-size: 18px;
		font-weight:200;
	}
	.price span.per {
		font-size: 18px;
		font-weight:200;
	}
	.price span.user {
		font-size: 14px;
	}
	/* feature-list의 높이를 같게 유지 (3~5줄 기준) */
	.feature-list {
		list-style: none;
		padding: 0;
		margin-top: 20px;
		margin-bottom: 20px;
		min-height: 300px;
	}
	.feature-list li {
		padding-left: 20px;
		position: relative;
		margin-bottom: 10px;
		font-size:16px;
		line-height:24px;
	}
	/*
	.feature-list li::before {
		content: "✓";
		position: absolute;
		left: 0;
		color: #3399cc;
		font-weight: bold;
	}
	*/
	a.button {
		display: inline-block;
		background-color: #3399cc;
		color: white;
		padding: 10px;
		border-radius: 6px;
		text-align: center;
		text-decoration: none;
	}

	@media (max-width: 768px) {
		nav ul {
			display:none;
		}
		.tab-content.active {
			flex-direction: column;
			align-items: center;
		}

		.card {
			width: 100%;
		}
		
		.container {
			width: 100%;
			margin: 100px auto;
			padding: 0 20px;
			text-align: center;
			box-sizing: border-box;
		}
		h3 {
			font-size: 20px;
			margin-bottom: 20px;
		}
		
		.tabs {
			gap: 5px;
			margin: 30px 0px;
		}
		.tab-btn {
			padding: 10px 30px;
			font-size:14px;
		}

	}


	@media (max-width: 480px) {
		.hero-content h3 {
			font-size:20px;
			font-weight:600;
			line-height:36px;
			padding:0px 20px;
		}
		.hero-content p {
			font-size:16px;
			font-weight:400;
			padding:0px 20px;
			margin-bottom:100px;
		}
	}

  .faq-header {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .faq-header h2 {
    font-size: 24px;
    color: #222;
    margin: 0px;
  }

  .faq-search {
    flex-shrink: 0;
  }

  .faq-search input {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 250px;
  }

  .board-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .board-tab {
    padding: 6px 16px;
    border: 1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    background: #faf9f5;
    font-size: 14px;
  }

  .board-tab.active {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
  }


    .faq-section {

		/*max-width: 1050px;*/
		margin: 0 auto;
		background: #f2f2f2;
		padding: 50px 0px;
		/*border-radius: 12px;*/
		border:solid 1px #eee;
		box-sizing: border-box;
    }
	.accordion {
		max-width: 1100px;
		margin: 0 auto;
		background: #f2f2f2;
		padding: 20px;
		/*border-radius: 12px;*/
		box-sizing: border-box;
	}

  .accordion-item {
    border-bottom: 1px solid #e0e0e0;
  }

  .accordion-question {
    padding: 15px 0px;
    font-size: 16px;
	font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
  }

  .accordion-question:hover {
    background: #f0f0f0;
  }

  .accordion-answer {
    display: none;
    padding: 15px 10px;
    font-size: 15px;
    color: #444;
    background: #f2f2f2;
    animation: fadeSlide 0.3s ease;
  }

  .accordion-item.active .accordion-answer {
    display: block;
  }



  .accordion-answer .feedback {
    margin-top: 25px;
	border-top:solid 1px #eee;
    padding-top: 15px;
    font-size: 14px;
    margin-bottom: 25px;
  }

  .feedback-buttons {
    margin-top: 8px;
  }

  .feedback-buttons button {
    margin-right: 8px;
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #faf9f5;
    cursor: pointer;
  }



  @keyframes fadeSlide {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }


  @media (max-width: 768px) {
    .faq-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .faq-search input {
      width: 100%;
    }
  }