:root {
    --ivory: #f4f0e7;
    --cream: #e9e1d2;
    --walnut: #5d4938;
    --olive: #7b8062;
    --ink: #171713
}
* {
    box-sizing: border-box
}
html {
    scroll-behavior: smooth
}
body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: Arial, "Pretendard", sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
}
a {
    color: inherit;
    text-decoration: none
}
header {
    height: 96px;
    padding: 0 4.5vw;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 5;
    width: 100%
}
.logo {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: .12em
}
nav {
    margin-left: auto;
    display: flex;
    gap: 52px;
    margin-right: 38px;
    font-size: 15px;
    font-weight: 600
}
nav a {
    padding: 12px 0;
    border-bottom: 1px solid transparent
}
nav a:hover {
    border-color: var(--olive)
}
.menu {
    width: 52px;
    height: 52px;
    border: 1px solid var(--olive);
    border-radius: 50%;
    background: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center
}
.menu i {
    width: 20px;
    height: 1.5px;
    background: var(--ink)
}
.hero {
    min-height: 900px;
    display: grid;
    grid-template-columns: 41% 59%;
    position: relative;
    overflow: hidden
}
.hero-copy {
    padding: 205px 4.7vw 100px;
    z-index: 2
}
.eyebrow, small {
    font-size: 11px;
    letter-spacing: .3em;
    color: var(--olive);
    font-weight: 700
}
.eyebrow {
    display: flex;
    gap: 20px;
    align-items: center
}
.eyebrow b {
    width: 72px;
    height: 1px;
    background: var(--olive)
}
h1, h2, h3 {
    font-family: Georgia, "Noto Serif KR", serif;
    color: var(--walnut);
    font-weight: 500
}
h1 {
    font-size: clamp(54px, 5vw, 80px);
    line-height: 1.35;
    letter-spacing: -.055em;
    margin: 52px 0 32px
}
.hero-copy > p:not(.eyebrow) {
    font-size: 18px;
    line-height: 2;
    color: #47433e
}
.link {
    display: inline-flex;
    gap: 42px;
    color: var(--olive);
    border-bottom: 1px solid #aaa38f;
    padding: 12px 0;
    margin-top: 24px
}
.link span {
    font-size: 22px
}
.hero-image {
    max-height: 900px;
    overflow: hidden;
    border-top-left-radius: 34% 36%;
}

.hero-image img {
    display: block;
    width: 100%;
    height: 90%;
    max-width: none;
    object-fit: cover;
    transform: translateX(-5%);
}
.curve {
    position: absolute;
    bottom: -45px;
    left: -4%;
    height: 95px;
    width: 55%;
    border-radius: 50% 50% 0 0;
    background: var(--ivory)
}
.section {
    padding: 125px 7vw
}
.section h2 {
    font-size: clamp(38px, 4.4vw, 58px);
    line-height: 1.35;
    letter-spacing: -.04em;
    margin: 22px 0
}
.story {
    background: var(--cream)
}
.story-grid {
    display: grid;
    grid-template-columns: 34% 58%;
    gap: 8%
}
.story-title {
    padding-top: 0
}
.story-content {
    padding-top: 42px;
    color: #5b564d;
    line-height: 2;
    font-size: 17px
}
.story-grid strong {
    font-family: Georgia, "Noto Serif KR", serif;
    color: var(--walnut);
    font-size: 26px;
    line-height: 1.7
}
.history {
    margin-top: 68px;
    border-bottom: 1px solid #bfb4a3;
    color: var(--walnut)
}
.history-head, .history-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 18px
}
.history-head {
    padding: 0 16px 24px;
    border-bottom: 1px solid #bfb4a3;
    font-size: 15px;
    font-weight: 700
}
.history-row {
    align-items: start;
    padding: 16px 16px;
    border-bottom: 1px solid #c8bdad
}
.history-row:last-child {
    border-bottom: 0
}
.history-year {
    font-family: Georgia, "Noto Serif KR", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6
}
.history-row p {
    margin: 0;
    color: var(--walnut);
    font-size: 16px;
    line-height: 1.9;
    word-break: keep-all
}
.spaces {
    background: #f8f5ef
}
.heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 65px
}
.heading > p {
    line-height: 1.9;
    color: #69645c
}
.cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid #cfc7b7
}
.cards article {
    min-height: 325px;
    padding: 34px 26px;
    border-right: 1px solid #cfc7b7;
    display: flex;
    flex-direction: column;
    transition: .3s
}
.cards article:last-child {
    border: 0
}
.cards article:hover {
    background: #eee7d9;
    transform: translateY(-5px)
}
.cards h3 {
    font-size: 28px;
    margin: 50px 0 16px
}
.cards p {
    line-height: 1.8;
    color: #6b675f;
    font-size: 15px
}
.cards b {
    margin-top: auto;
    color: var(--walnut);
    font-size: 14px
}
.card-image{
  width:100%;
  aspect-ratio:4 / 3;
  margin-top:auto;
  overflow:hidden;
}

.card-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .5s ease;
}
.principles {
    background: var(--walnut);
    color: #f3eee5;
    display: grid;
    grid-template-columns: 42% 52%;
    gap: 6%
}
.principles h2, .principles h3 {
    color: #f3eee5
}
.principles small {
    color: #c8caa9
}
.p-list article {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 22px;
    padding: 29px 0;
    border-top: 1px solid #ffffff40
}
.p-list article:last-child {
    border-bottom: 1px solid #ffffff40
}
.p-list h3 {
    font-size: 25px;
    margin: 0 0 10px
}
.p-list p {
    color: #d7d0c5;
    line-height: 1.8;
    margin: 0
}
.faq {
    max-width: 1180px;
    margin: auto
}
.faq h2 {
    margin-bottom: 55px
}
.faq > div {
    border-top: 1px solid #bdb5a7
}
.faq details {
    border-bottom: 1px solid #bdb5a7
}
.faq summary {
    list-style: none;
    padding: 27px 3px;
    font-size: 19px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    cursor: pointer
}
.faq summary::-webkit-details-marker {
    display: none
}
.faq details p {
    max-width: 800px;
    color: #686359;
    line-height: 1.85;
    padding: 0 3px 28px;
    margin: 0
}
.official-store {
    padding: 92px 7vw;
    background: #d7d0c5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 8vw;
    align-items: center
}
.official-store h2 {
    max-width: 760px;
    margin: 22px 0 24px;
    color: var(--walnut);
    font-size: clamp(38px, 4.2vw, 62px);
    line-height: 1.32;
    letter-spacing: -.045em
}
.official-store__copy > p {
    margin: 0;
    color: #686359;
    font-size: 15px;
    line-height: 1.8
}
.official-store__links {
    display: grid;
    gap: 12px
}
.official-store__links a {
    min-height: 64px;
    padding: 0 22px;
    border: 1px solid rgba(93, 73, 56, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    color: var(--walnut);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 15px;
    font-weight: 700;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease
}
.official-store__links a:hover,
.official-store__links a:focus-visible {
    background: #fff;
    box-shadow: 0 10px 28px rgba(93, 73, 56, .1);
    transform: translateY(-2px)
}
.official-store__links a:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 3px
}
.official-store__links a span:last-child {
    font-size: 18px
}
footer {
    background: #ddd5c6;
    padding: 65px 7vw 40px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 45px;
    align-items: end
}
footer p {
    font-size: 12px;
    line-height: 1.8;
    color: #666158
}
@keyframes reveal {
    from {
        opacity: 0;
        transform: scale(1.025)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}
@media(max-width:900px) {
    header {
        height: 78px
    }
    .logo {
        font-size: 21px
    }
    nav {
        position: absolute;
        top: 70px;
        right: 5vw;
        margin: 0;
        padding: 22px;
        background: #f7f3eb;
        box-shadow: 0 12px 30px #40372922;
        flex-direction: column;
        gap: 8px;
        opacity: 0;
        pointer-events: none
    }
    nav.open {
        opacity: 1;
        pointer-events: auto
    }
    .menu {
        width: 44px;
        height: 44px;
        margin-left: auto
    }
    .hero {
        display: flex;
        flex-direction: column;
        padding-top: 78px;
        min-height: auto
    }
    .hero-copy {
        padding: 75px 7vw 55px
    }
    .hero-image {
        min-height: auto;
        padding: 0 5vw 50px
    }
    .hero-image img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain
    }
    .curve {
        display: none
    }
    .section {
        padding: 90px 7vw
    }
    .story-grid, .principles {
        grid-template-columns: 1fr
    }
    .story-content {
        padding-top: 10px
    }
    .history {
        margin-top: 48px;
		margin-bottom: 100px;
			
    }
    .history-head, .history-row {
        grid-template-columns: 110px 1fr
    }
    .heading {
        align-items: start;
        flex-direction: column
    }
    .cards {
        grid-template-columns: 1fr 1fr
    }
    .cards article:nth-child(2) {
        border-right: 0
    }
    .principles .p-list {
        margin-top: 30px
    }
    .official-store {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 78px 7vw
    }
    footer {
        grid-template-columns: 1fr 1fr
    }
}
@media(max-width:560px) {
    h1 {
        font-size: 47px
    }
    .hero-copy {
        padding-top: 58px
    }
    .hero-image {
        min-height: auto;
        padding: 0 4vw 40px
    }
    .hero-image img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain
    }
    .section {
        padding: 72px 6vw
    }
    .section h2 {
        font-size: 40px
    }
    .story-grid strong {
        font-size: 22px
    }
    .history-head, .history-row {
        grid-template-columns: 78px 1fr;
        padding-left: 0;
        padding-right: 0
    }
    .history-head {
        font-size: 14px
    }
    .history-year {
        font-size: 18px
    }
    .history-row p {
        font-size: 15px
    }
    .cards {
        grid-template-columns: 1fr
    }
  .card-image{
    margin-top:30px;
    aspect-ratio:4 / 3;
  }	
    .cards article {
        border-right: 0;
        border-bottom: 1px solid #cfc7b7;
        min-height: 260px
    }
    .principles {
        display: block
    }
    .faq summary {
        font-size: 16px;
        gap: 15px
    }
    .official-store {
        gap: 36px;
        padding: 64px 6vw
    }
    .official-store h2 {
        font-size: 38px
    }
    .official-store__links a {
        min-height: 60px;
        padding: 0 18px
    }
    footer {
        grid-template-columns: 1fr
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}