/* =========================================================
   layout.css
   역할: wrapper/container/header/footer 프레임
   ========================================================= */

/* ===== Page Wrapper ===== */
.wrapper {
   height: 100svh;
}

/* ===== Container System ===== */
.container {
   max-width: var(--container);
   margin-inline: auto;
   padding-inline: var(--gutter);
}

.container--narrow {
   max-width: 960px;
}

.container--wide {
   max-width: 1440px;
}

.container--inner {
   max-width: var(--container);
   margin-inline: auto;
   padding-inline: var(--gutter);
}

/* ===== Site Header ===== */
.site__header {
   background-color: rgba(255, 255, 255, 0.6);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 9999;
   padding: 0 2rem;
}

.header-container {
   margin: 0 auto;
   padding: 0 20px;
   display: flex;
   align-items: center;
   height: 70px;
}

/* ===== Logo ===== */
.logo {
   width: 80px;
   height: auto;
}

.logo img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}

/* ===== Navigation ===== */
.site__nav {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1.5rem;
}

.menu {
   display: flex;
   gap: 30px;
}

.menu a {
   text-decoration: none;
   color: #374151;
   font-weight: 500;
   transition: color 0.3s;
}

.menu a:hover {
   color: #2563eb;
}

/* ===== Header Icons ===== */
.icons {
   display: flex;
   gap: 20px;
   align-items: center;
}

.icon-btn {
   width: 40px;
   height: 40px;
   border: none;
   background: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   transition: background 0.3s;
}

.icon-btn:hover {
   background: #f3f4f6;
}

.icon-btn svg {
   width: 20px;
   height: 20px;
   stroke: #374151;
}

/* ===== Hamburger Menu ===== */
.menu-toggle {
   display: none;
}

.hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   padding: 10px;
   position: relative;
   z-index: 1001;
}

.hamburger span {
   display: block;
   width: 25px;
   height: 3px;
   background: #374151;
   transition: all 0.3s;
   border-radius: 2px;
}

/* ===== Mobile Navigation ===== */
.mobile-nav {
   position: fixed;
   top: 0;
   right: -100%;
   width: 280px;
   height: 100vh;
   background: #ffffff;
   box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
   transition: right 0.3s ease-in-out;
   padding-top: 80px;
   z-index: 999;
}

.mobile-menu {
   list-style: none;
   padding: 0 20px;
}

.mobile-menu li {
   border-bottom: 1px solid #f3f4f6;
}

.mobile-menu a {
   display: block;
   padding: 18px 0;
   text-decoration: none;
   color: #374151;
   font-weight: 500;
   transition: color 0.3s;
}

.mobile-menu a:hover {
   color: #2563eb;
}

.mobile-icons {
   display: flex;
   gap: 15px;
   padding: 30px 20px;
   border-top: 1px solid #f3f4f6;
   margin-top: 20px;
}

/* ===== Overlay ===== */
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s;
   z-index: 998;
}

/* ===== Mobile Menu Active States ===== */
.menu-toggle:checked ~ .mobile-nav {
   right: 0;
}

.menu-toggle:checked ~ .overlay {
   opacity: 1;
   visibility: visible;
}

.menu-toggle:checked ~ .header-container .hamburger span:nth-child(1) {
   transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle:checked ~ .header-container .hamburger span:nth-child(2) {
   opacity: 0;
}

.menu-toggle:checked ~ .header-container .hamburger span:nth-child(3) {
   transform: rotate(-45deg) translate(6px, -6px);
}

/* ================================
   Footer — Starbucks Winter Edition
================================ */

/* Base */
.site-footer {
   color: #1e3932;
   background: linear-gradient(to bottom, #f7f8f6 0%, #eef1ee 100%);
}
.footer-container {
   max-width: var(--container);
   margin-inline: auto;
   max-width: 1200px;
}

/* ==================================================
    MOBILE (≤ 640px) — ACCORDION (DEFAULT)
 ================================================== */

.footer-accordion {
   border-bottom: 1px solid #ededed;
}

.footer-toggle {
   display: none;
}

/* Header */
.footer-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 22px 20px;
   cursor: pointer;
   color: #000;
   /* border: 1px solid red; */
}

.footer-title {
   font-size: 14px;
   font-weight: 600;
   letter-spacing: -0.2px;
   color: #000;
}

/* Icon */
.footer-icon {
   width: 18px;
   height: 18px;
   position: relative;
   color: #000;
}

.footer-icon::before,
.footer-icon::after {
   content: '';
   position: absolute;
   background: #00a862;
   transition: 0.3s ease;
}

.footer-icon::before {
   width: 18px;
   height: 2px;
   top: 8px;
}

.footer-icon::after {
   width: 2px;
   height: 18px;
   left: 8px;
}

.footer-toggle:checked + .footer-header .footer-icon::after {
   opacity: 0;
}

/* Content */
.footer-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease;
   color: #000;
   /* border: 1px solid red; */
   padding: 10px 20px;
}

.footer-toggle:checked ~ .footer-content {
   max-height: 500px;
}

.footer-inner {
   padding: 16px 20px 28px;
   color: #000;
}

.footer-links {
   list-style: none;
   display: grid;
   gap: 12px;
   color: #000;
}

.footer-links a {
   font-size: 13px;
   color: #000;
   text-decoration: none;
}

.footer-links a:hover {
   color: #00a862;
}

/* ----------------
    Portfolio Notice
 ---------------- */
.footer-portfolio {
   padding: 24px 20px;
   text-align: center;
   font-size: 11px;
   color: #000;
   border-top: 1px solid #ededed;
}

/* ==================================================
    PC (≥ 641px) — FLEX COLUMN FOOTER
 ================================================== */

@media (min-width: 641px) {
   /* Accordion 해제 */
   .footer-content {
      max-height: none;
      overflow: visible;
   }

   .footer-toggle,
   .footer-icon {
      display: none;
   }

   .footer-header {
      cursor: default;
      padding-bottom: 12px;
   }

   /* 컬럼 레이아웃 */
   .footer-container {
      display: flex;
      flex-wrap: wrap;
      padding: 56px 24px;
      gap: 48px 32px;
   }

   .footer-accordion {
      flex: 1 1 160px;
      border-bottom: none;
   }

   .footer-inner {
      padding: 0;
   }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 640px) {
   .site__header {
      padding: 0;
   }

   .menu__list {
      display: none;
   }

   .icons {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
   }

   .mobile-icons {
      align-items: center;
      justify-content: center;
   }

   .mobile-menu {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   .hamburger {
      display: flex;
      z-index: 9999;
   }

   .header-container {
      height: 60px;
   }
}