@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ========= CONTENTS OF style.css ========= */

/* General Layout */
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
    color: #333;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

iframe {
    width: 100%;
    max-width: 600px; /* Keep the max-width for desktop */
    height: 450px;
}

/* Top Bar */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

.topbar .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* Vertically center items */
    padding: 10px 24px; /* Slimmer header */
}

.logo {
    text-align: left;
}

.logo img {
    height: 60px; /* Smaller logo */
    width: auto;
    display: block;
}

.menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-links ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center; /* Align all items including button */
}

.nav-links li {
    margin: 0 25px; /* More space between items */
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #0056b3; /* A primary blue color for hover */
}

/* Style for the "Book" button */
.nav-links li:last-child a {
    color: #0056b3; /* Use primary theme color to stand out */
    font-weight: 600; /* Make it slightly bolder */
}

.nav-links li:last-child a:hover {
    color: #002f5f;
}

.hamburger {
    display: none; /* Hidden by default on desktop */
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
}

/* Hero Section */
.hero {
    padding-top: 80px; /* Adjusted for slimmer fixed header */
    height: 600px;
    background-image: url('/images/hero0.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

.hero .container {
    text-align: center;
    padding: 0 24px;
}

.hero-content {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: #003366;
}

.hero-content p {
    font-size: 1.3rem;
    color: #333;
}

.hero-button {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 32px;
    font-size: 1.1rem;
    background-color: #004080;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.hero-button:hover {
    background-color: #002f5f;
}

/* Sections */
.section {
    padding: 80px 20px;
    text-align: center;
}

.section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #002d60;
}

.section p {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

#skin-booster {
    padding-top: 10px; /* Existing padding-top */
    padding-bottom: 40px; /* Reduced by 50% from default 80px */
}

#products {
    padding-top: 40px; /* Reduced by 50% from default 80px */
}

#laser-removal {
    padding-top: 00px; /* Further reduced padding-top */
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    background-color: #0056b3;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.cta-button:hover {
    background-color: #003d80;
}

/* Intro container - Laser mole removal and photos */
.section.intro .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.section.intro .image-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 66.66%;
    max-width: 900px;
    margin: 30px 0;
}

.section.intro .image-row img {
    width: 50%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.section.intro .cta-button {
    margin-top: 20px;
    padding: 14px 32px;
    font-size: 1.1rem;
    background-color: #004080;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.section.intro .cta-button:hover {
    background-color: #002f5f;
}

.section.location .container {
    max-width: 1000px;  /* product-grid와 동일한 폭 */
    margin: 0 auto;
    padding: 0 20px;
}

/* Product Grid */
.product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.product-img {
    max-width: 360px;
    width: 100%;
    height: 360px;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.product-info {
    max-width: 500px;
    text-align: left;
}

.product-info h3 {
    font-size: 1.8rem;
    margin-bottom: 16px;
    color: #003366;
}

.product-info .cta-button {
    display: block;
    /* inline-block 말고 block */
    width: fit-content;
    /* 버튼 길이를 텍스트 길이에 맞춤 */
    margin: 24px auto 0 auto;
    /* 좌우 auto로 수평 가운데 정렬 */
    padding: 12px 24px;
    font-size: 1rem;
    background-color: #004080;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
    text-align: center;
}

.product-info .cta-button:hover {
    background-color: #002f5f;
}

.location-map {
    width: 66.66%;
    height: 450px;
    border: 2px solid #ccc;
    border-radius: 8px;
    display: block;
    margin: 20px auto;
}

/* Footer */
footer {
    background: #2b2b2b;
    color: #cccccc;
    padding: 60px 24px; /* More vertical padding */
    font-size: 1rem;
    line-height: 1.7;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto 20px auto;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center everything horizontally */
    gap: 25px; /* Space between stacked items */
}

.footer-left {
    text-align: center; /* Center the text content */
}

.footer-left p {
    margin: 0;
}

.footer-left a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-left a:hover {
    color: #bbbbbb;
    text-decoration: underline;
}

.footer-right {
    display: flex;
    flex-direction: row; /* Keep icons in a row */
    align-items: center;
    gap: 30px; /* More space between icons */
}

.footer-right a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-right a:hover {
    color: #ffffff;
}

.footer-right i {
    font-size: 1.6rem; /* Slightly larger icons */
}

.footer-copy {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9rem;
    color: #888888; /* Softer color for copyright */
}

footer small {
    display: block;
    margin-top: 15px;
    text-align: center;
    font-size: 0.8rem;
    color: #666666;
}

@media (max-width: 767px) {
    .topbar {
        position: static; /* Changed to static for simpler mobile layout */
        padding: 16px 20px;
    }

    .topbar .container {
        display: flex;
        flex-direction: row;
        justify-content: center; /* Center the logo */
        align-items: center;
        position: relative; /* For hamburger positioning */
        height: 60px; /* Give the topbar a fixed height */
    }

    .logo {
        width: auto; /* Let the logo take its natural width */
        text-align: center;
        margin-bottom: 0;
    }

    .logo img {
        height: 30px;
    }

    .menu {
        position: static; /* No special positioning needed */
        width: auto;
    }

    .hamburger {
        display: block;
        position: absolute;
        right: 20px; /* Position to the right of the container */
        top: 50%;
        transform: translateY(-50%);
        z-index: 101;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 60px; /* Position below the adjusted topbar */
        left: 0;
        right: 0;
        background-color: white;
        width: 100%;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        z-index: 100;
        padding-bottom: 10px; /* Add some padding to the bottom of the menu */
    }

    .nav-links.active {
        display: block;
    }

    .nav-links ul {
        flex-direction: column;
    }

    .nav-links li {
        margin: 15px 0;
    }

    /* Reset the "Book" button to a normal link on mobile */
    .nav-links li:last-child a {
        background-color: transparent;
        color: #333;
        padding: 0;
    }

    .nav-links li:last-child a:hover {
        background-color: transparent;
        color: #0056b3;
    }

    .hero {
        padding-top: 20px; /* Reduced padding-top */
        height: auto;
    }

    .hero-content {
        position: static;
        transform: none;
        padding: 40px 20px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .hero-button {
        font-size: 1rem;
        padding: 12px 24px;
    }

    .section {
        padding: 60px 16px;
    }

    .section h2 {
        font-size: 1.5rem;
    }

    .section p {
        font-size: 1rem;
    }

    .product-grid {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .product-img {
        max-width: 90%;
    }

    .product-info {
        text-align: center;
        padding: 0 10px;
    }

    .location-map {
        width: 100%;
    }

    footer {
        font-size: 0.8rem;
        padding: 24px 16px;
    }

    .footer-container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        gap: 25px; /* Use same gap as desktop */
    }

    .footer-left {
        width: 100%; /* Take full width */
        text-align: center; /* Center the block */
        margin-bottom: 0;
    }

    .footer-left p {
        text-align: center;
        max-width: 300px; /* Limit width for better readability */
        margin: 0 auto; /* Center the paragraph block */
    }

    .footer-right {
        width: 100%; /* Take full width */
        display: flex;
        justify-content: center; /* Center social icons */
    }
}



.before-after-carousel {
    width: 40%; /* Take 50% of parent width */
    max-width: 1200px; /* But don't exceed 1200px */
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%; /* Each slide takes full width of the container */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Space between images in a slide */
}

.carousel-slide img {
    max-width: 49%; /* Each image takes roughly half the slide width */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.carousel-arrow.left {
    left: 10px;
}

.carousel-arrow.right {
    right: 10px;
}

.carousel-arrow.left::before {
    content: '<';
}

.carousel-arrow.right::before {
    content: '>';
}

.carousel-arrow::before {
    font-size: 24px;
    font-weight: bold;
}

.product-page-details {
    max-width: 1200px; /* Align with other main content */
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.product-page-details img {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.rejuve-plus-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px auto;
    max-width: 1200px;
}

.rejuve-plus-image,
.rejuve-plus-text {
    flex: 1;
    min-width: 300px;
    max-width: 50%;
}

.rejuve-plus-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.rejuve-plus-text {
    text-align: left; /* Keep text left-aligned within its column */
}

@media (max-width: 768px) {
    .rejuve-plus-image,
    .rejuve-plus-text {
        max-width: 90%;
    }
    .rejuve-plus-text {
        text-align: center; /* Center text on small screens */
    }
}

/* Styling for product pages to account for fixed header and specific layout needs */
.product-page-container {
    padding-top: 80px; /* Adjusted for new header */
    padding-bottom: 40px;
}

.product-page-main {
    display: flex; /* Enable flexbox for column layout */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center; /* Center items horizontally */
    align-items: flex-start; /* Align items to the start of the cross axis */
    max-width: 1200px; /* Constrain width */
    margin: 0 auto; /* Center the block */
    padding: 20px; /* Add some internal padding */
    gap: 40px; /* Space between columns */
}

.product-image-column,
.product-details-column {
    flex: 1; /* Allow columns to grow and shrink */
    min-width: 300px; /* Minimum width before wrapping */
    max-width: 500px; /* Max width for each column */
}

.product-image-column img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image */
}

.product-details-column {
    text-align: center; /* Center align the text */
}

@media (max-width: 767px) {
    .product-detail-container {
        padding-top: 20px; /* Reduced padding-top for mobile */
    }

    .product-page-container {
        padding-top: 20px; /* Less padding on mobile */
    }
    .product-image-column,
    .product-details-column {
        max-width: 100%; /* Full width on mobile */
    }

    .before-after-carousel {
        width: 100%; /* Full width on mobile */
        padding: 20px 10px; /* Adjust padding for mobile */
    }

    .carousel-slide img {
        max-width: 49%; /* Each image takes roughly half the slide width */
    }

    .product-detail-images .detail-img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
    }
}


/* ========= CONTENTS OF jaylee-style.css ========= */

.profile-image {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-title {
    color: #343a40;
    text-align: center;
}

.list-group-item {
    border: none; /* Remove border to eliminate lines between items */
    text-align: center; /* Re-add center alignment for list item text */
}

body.lang-en .list-group-item {
    text-align: left !important; /* Override for English page */
}

body.lang-en .list-group {
    text-align: left !important;
}

.btn-custom-lang {
    background-color: #2b2b2b;
    border-color: #2b2b2b;
    color: #ffffff;
}

.btn-custom-lang:hover {
    background-color: #4a4a4a; /* Slightly lighter on hover */
    border-color: #4a4a4a;
    color: #ffffff;
}

/* ========= CONTENTS OF product-styles.css ========= */

/* Product Page Specific Styles */
.product-detail-main {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping on wide screens */
    justify-content: space-between;
    align-items: center; /* Vertically center items */
    gap: 20px; /* Space between columns */
    padding: 40px 20px;
    max-width: 1200px; /* Similar to .container */
    margin: 0 auto;
}

.product-page-container {
    padding-top: 90px; /* Add padding to prevent content from being hidden by fixed header */
}

.product-detail-container {
    padding-top: 90px; /* Add padding to prevent content from being hidden by fixed header */
}

.product-image-column {
    flex: 0 0 calc(50% - 10px); /* 50% width minus half gap */
    min-width: 0; /* Allow shrinking below 200px if needed */
    text-align: center;
}

.product-image-column img {
    max-width: 100%; /* Ensure image doesn't overflow its container */
    height: 800px; /* Set fixed height as requested */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure image maintains aspect ratio and fits */
    display: block; /* Remove extra space below image */
    margin: 0 auto; /* Center the image */
}

.product-details-column {
    flex: 0 0 calc(50% - 10px); /* 50% width minus half gap */
    min-width: 0; /* Allow shrinking below 300px if needed */
    text-align: center; /* Horizontally center inline text content */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Vertically center children */
    align-items: center; /* Horizontally center flex children */
}

.product-details-column h3,
.product-details-column p,
.product-details-column h4,
.product-details-column ul,
.product-details-column .price-shop-container {
    text-align: center;
}

.product-details-column p,
.product-details-column h4,
.product-details-column ul,
.product-details-column .price-shop-container {
    margin-top: 20px; /* Add top margin for spacing */
    text-align: center; /* Horizontally center content */
}

/* Responsive adjustments for product page */
@media (max-width: 768px) {
    .product-detail-main { /* Corrected from .product-page-main */
        flex-direction: column; /* Stack columns vertically on small screens */
        align-items: center;
        flex-wrap: wrap; /* Re-enable wrapping for smaller screens */
    }

    .product-image-column,
    .product-details-column {
        max-width: 90%; /* Adjust width for single column layout */
        min-width: unset; /* Remove min-width constraint */
    }
}

/* ========= CONTENTS OF products.html <style> tag ========= */
.product-section {
  padding: 80px 20px 80px;
  text-align: center;
}

.product-section h2 {
  font-size: 2.5rem;
  margin-bottom: 50px;
  color: #002d60;
}

.product-grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* A single gap value for both row and column */
  max-width: 1200px;
  margin: 0 auto;
}

.product-item {
  text-align: center;
  width: 350px;
}

.product-item a {
    text-decoration: none;
}

.product-image-box {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  width: 350px; /* Make the box square */
  height: 350px; /* Explicitly set height to match width for square aspect */
}

.product-image-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.product-card-img {
  width: 100%;
  height: 360px;
  object-fit: contain;
  background-color: #ffffff;
}

.product-details {
  padding: 0 5px;
}

.product-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #333;
  line-height: 1.4;
  height: 45px; /* Set a fixed height to align titles */
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #0056b3;
  margin: 0;
}

/* Language Switcher Styles */
.language-switcher {
  text-align: center;
  margin: 40px 0;
}

.language-switcher a {
  text-decoration: none;
  color: #ffffff;
  background-color: #2b2b2b;
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 5px;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.language-switcher a:hover {
  background-color: #4a4a4a;
}

/* Distance Fee Calculator Styles */
.distance-calculator-page {
    padding-top: 80px; /* Header clearance */
    padding-bottom: 40px;
    background-color: #f4f8fc;
}

.distance-calculator-page .container {
    max-width: 500px;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: auto;
}

.distance-calculator-page h2 {
    text-align: center;
    color: #004080;
}

.distance-calculator-page label {
    display: block;
    margin-top: 20px;
    font-weight: bold;
}

.distance-calculator-page input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.distance-calculator-page .result {
    margin-top: 30px;
    padding: 15px;
    background: #e6f0ff;
    border-left: 5px solid #004080;
    font-size: 1.2em;
    white-space: pre-wrap; /* To respect newline characters */
}

.distance-calculator-page #map {
    height: 400px;
    width: 100%;
    margin-top: 30px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

/* Doctor Profile Specific Styles (replacing Bootstrap) */
.dr-profile-section {
    padding: 60px 20px; /* Adjusted padding for content */
    background-color: #f8f9fa; /* Light background */
    text-align: center;
}

.dr-profile-section .dr-profile-content-wrapper {
    max-width: 800px; /* Limit content width */
    margin: 0 auto; /* Center the content block */
}

.dr-profile-image {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 50%; /* Make it round */
    margin: 0 auto 25px auto; /* Center and add margin below */
    display: block; /* Ensures margin auto works */
}

.dr-profile-section h1 {
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
}

.dr-profile-section .lead-text {
    font-size: 1.25rem;
    color: #555;
    margin-bottom: 25px;
}

.dr-profile-section .description-text {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 700px; /* Constrain text width */
    margin-left: auto;
    margin-right: auto;
}

/* Cards for Career/Services */
.dr-cards-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 30px;
    max-width: 1000px;
    margin: 40px auto 0 auto; /* Margin below profile section */
    padding: 0 20px;
}

@media (min-width: 768px) {
    .dr-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on larger screens */
    }
}

.dr-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 30px;
    height: 100%; /* Ensure cards are same height */
    display: flex;
    flex-direction: column;
    text-align: left; /* Default text align for card content */
}

.dr-card h2 {
    font-size: 1.5rem;
    color: #004080;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-align: left; /* Card title should be left-aligned */
}

.dr-list-group {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dr-list-group-item {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #444;
    font-size: 1rem;
    line-height: 1.5;
    text-align: left; /* List items should be left-aligned */
}

.dr-list-group-item:last-child {
    border-bottom: none;
}

.product-price .original-price {
  text-decoration: line-through;
  color: #999; /* Lighter color for original price */
  margin-right: 5px;
}

.product-price .arrow {
  margin: 0 5px;
  color: #333;
}

.product-price .sale-price {
  color: #e44d26; /* A distinct color for sale price, e.g., red-orange */
  font-weight: bold;
  font-size: 1.2em; /* Slightly larger than original price */
}

/* Container for price and shop button on product detail pages */
.price-shop-container {
  display: flex;
  flex-direction: row; /* Display items side-by-side */
  justify-content: center; /* Center the items horizontally */
  align-items: center; /* Vertically align items */
  gap: 30px; /* Ensures a clear 30px space between the price and the button */
}

/* Fix for bullet point and text alignment on product detail pages */
.product-details-column ul {
  text-align: left; /* Ensure bullet points and text are left-aligned */
  max-width: 450px; /* Constrain width of the list block */
  margin: 0 auto; /* Center the list block within its parent */
  padding-left: 20px; /* Add some padding for the bullets */
}

.product-details-column ul li {
  text-align: left; /* Ensure list item text is left-aligned */
  margin-bottom: 10px; /* Add space between list items */
}

/* =============================================================== */
/* [최종 수정] 상단 여백 완전 제거(0px) + 텍스트 좌우 꽉 채우기 */
/* =============================================================== */
@media (max-width: 768px) {

    /* 1. [상단 여백 삭제] 페이지 전체 틀의 위쪽 여백을 0으로 강제 설정 */
    .product-page-container,
    .product-detail-container,
    .container {
        padding-top: 0 !important;   /* 위쪽 여백 제거 */
        margin-top: 0 !important;
    }

    /* 2. [상단 여백 삭제] 제품 상세 메인 영역의 위쪽 여백도 제거 */
    .product-detail-main {
        padding-top: 0 !important;     /* 내부 위쪽 여백 제거 */
        margin-top: 0 !important;
        padding-bottom: 20px !important;
        
        /* [텍스트 확장] 레이아웃 설정 */
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;   
        padding-right: 0 !important;  
    }

    /* 3. [이미지] 상단 마진 제거 및 높이/비율 최적화 */
    .product-image-column {
        margin-top: 0 !important;      /* 이미지 박스 위 여백 제거 */
        padding-top: 0 !important;
        width: 100% !important;
    }

    .product-image-column img {
        height: auto !important;
        max-height: 400px;
        width: 100% !important;
        object-fit: contain;
        margin-top: 0 !important;      /* 이미지 자체 위 여백 제거 */
        margin-bottom: 10px !important;
        display: block;
    }

    /* 4. [텍스트 확장] 텍스트가 화면 끝까지 닿도록 설정 (좌우 여백 6px만 남김) */
    .product-details-column {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 6px !important;  /* 화면 끝에 너무 붙지 않게 최소한의 여백 */
        padding-right: 6px !important; /* 화면 끝에 너무 붙지 않게 최소한의 여백 */
        margin: 0 !important;
    }

    /* 5. [내부 요소 확장] 제목, 본문, 리스트 등 모든 요소 100% 확장 */
    .product-details-column h3, 
    .product-details-column h4, 
    .product-details-column p, 
    .product-details-column div,
    .product-details-column li {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* 6. 리스트(ul) 들여쓰기 조정 */
    .product-details-column ul {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important; /* 글머리 기호(•) 공간 확보 */
        margin: 0 !important;
        text-align: left !important;
    }

    /* 7. 가격 및 구매 버튼 가운데 정렬 */
    .price-shop-container {
        width: 100% !important;
        justify-content: center;
        gap: 15px !important;
        padding: 10px 0 !important;
    }
}