/* BASIC css start */
/* Ä¿ÇÇÇØÇÇ ÅëÇÕ ÆäÀÌÁö CSS */

:root{
    --green:#234939;
    --green-deep:#163f33;
    --ink:#394b40;
    --paper:#f8f5ef;
    --muted:#707b6e;
    --line:#dcded2;
    --gold:#907650;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    background:#fff;
}

body{
    margin:0;
    width:100%;
    max-width:none;
    background:#fff;
    color:var(--ink);
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    word-break:keep-all;
    overflow-wrap:break-word;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

figure{
    margin:0;
}

a{
    color:inherit;
}

a:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:5px;
}

/* =========================================
   Ä¿ÇÇÇØÇÇ ÆäÀÌÁö Àüü ³Êºñ
   ========================================= */

.page{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    background:var(--paper);
    overflow:hidden;
}

.inset{
    padding-left:56px;
    padding-right:56px;
}


/* =========================================
   Header
   ========================================= */

.masthead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-top:25px;
    padding-bottom:25px;
    border-bottom:1px solid var(--line);
}

.brand{
    flex:0 0 auto;
    color:var(--green);
    text-decoration:none;
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:-.06em;
}

.masthead>span{
    flex:0 0 auto;
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-size:.875rem;
    color:var(--muted);
}

.page-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    margin-left:auto;
    margin-right:auto;
}

.page-nav a{
    color:var(--muted);
    text-decoration:none;
    font-size:.78rem;
}

.page-nav a:hover{
    color:var(--green);
}


/* =========================================
   Brand Story
   ========================================= */

.visual-opening{
    padding-top:48px;
}

.photo-pair{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:38px;
}

.photo-pair figure:nth-child(2){
    padding-top:67px;
}

.photo-pair img{
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    border-radius:28px;
}

.photo-pair .roaster{
    filter:grayscale(1);
}

.company{
    padding-top:40px;
    padding-bottom:66px;
}

.kicker{
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-size:.875rem;
    color:var(--muted);
    letter-spacing:.07em;
    margin:0 0 19px;
    display:flex;
    align-items:center;
    gap:16px;
}

.kicker:after{
    content:"";
    height:1px;
    width:55px;
    background:var(--line);
}

h1,
h2,
h3{
    color:var(--green);
    letter-spacing:-.04em;
}

.company h1{
    font-size:clamp(1.9rem,4.2vw,2.6rem);
    line-height:1.6;
    font-weight:650;
    margin:0 0 27px;
}

.lead{
    font-size:1.1875rem;
    line-height:1.95;
    color:var(--green);
    margin:0 0 26px;
}

.copy{
    font-size:1.125rem;
    line-height:1.95;
    margin:0 0 23px;
}

.copy:last-child{
    margin-bottom:0;
}

.dates{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:17px 0;
    margin:29px 0;
    font-size:.875rem;
    line-height:1.8;
    color:var(--muted);
}

.dates strong{
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-weight:400;
    color:var(--green);
    font-size:1.25rem;
    margin-right:9px;
}

.company strong,
.mbti-section strong,
.taste-intro strong{
    font-weight:600;
    color:var(--green);
}


/* =========================================
   Coffee MBTI
   ========================================= */

.mbti-section{
    background:#fff;
    padding-top:65px;
    padding-bottom:65px;
}

.portrait-layout{
    display:grid;
    grid-template-columns:255px minmax(0,1fr);
    gap:43px;
    align-items:center;
    margin-bottom:38px;
}

.portrait img{
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    border-radius:160px;
}

.mbti-section h2{
    font-size:clamp(1.7rem,3.6vw,2.2rem);
    line-height:1.6;
    margin:0 0 23px;
    font-weight:600;
}

.story-text{
    border-left:2px solid var(--line);
    padding-left:24px;
}

.story-text h3{
    font-size:1.25rem;
    font-weight:600;
    margin:0 0 20px;
}

.mbti-guide{
    margin-top:30px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:20px 0;
}

.mbti-link{
    font-size:1.125rem;
    font-weight:600;
    color:var(--green);
    line-height:1.8;
    text-underline-offset:5px;
}

.guide-help{
    font-size:1rem;
    line-height:1.8;
    color:var(--muted);
    margin:6px 0 0;
}

.philosophy{
    margin:30px 0 0;
    padding:25px 0 0;
    border-top:1px solid var(--line);
}

.philosophy p{
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-size:1.75rem;
    line-height:1.75;
    letter-spacing:-.03em;
    color:var(--green);
    margin:0 0 10px;
}

.philosophy small{
    font-size:1rem;
    line-height:1.8;
    color:var(--muted);
}


/* =========================================
   Divider
   ========================================= */

.section-divider{
    padding-top:38px;
    padding-bottom:38px;
    text-align:center;
    color:var(--muted);
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-size:.78rem;
    letter-spacing:.12em;
}

.section-divider span{
    display:inline-flex;
    align-items:center;
    gap:18px;
}

.section-divider span:before,
.section-divider span:after{
    content:"";
    width:36px;
    height:1px;
    background:var(--line);
}


/* =========================================
   Roasting opening
   ========================================= */

.opening{
    padding-top:20px;
}

.page-label{
    font-size:.9375rem;
    color:var(--gold);
    margin:0 0 15px;
}

.opening h1{
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-weight:400;
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.55;
    margin:0 0 28px;
}

.intro-sign{
    font-size:.875rem;
    color:var(--muted);
    margin:0 0 49px;
}

.taste-intro h2{
    font-size:1.65rem;
    line-height:1.6;
    margin:0 0 29px;
}

.taste-intro p{
    font-size:1.125rem;
    line-height:1.95;
    margin:0 0 23px;
}

.taste-intro .intro-taste{
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-size:1.3rem;
    line-height:1.95;
}

.desktop-break{
    display:block;
}


/* =========================================
   Gallery
   ========================================= */

.gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
    margin:36px 0 44px;
}

.gallery img{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    border-radius:17px;
}

.gallery .workshop{
    object-position:69% center;
}

.gallery .aroma{
    object-position:72% center;
}

.gallery figcaption{
    font-size:.75rem;
    line-height:1.6;
    color:var(--muted);
    padding-top:10px;
}


/* =========================================
   History
   ========================================= */

.history{
    padding-bottom:48px;
}

.story-block{
    border-left:2px solid var(--line);
    padding-left:28px;
    margin:0 0 40px;
}

.story-block:last-child{
    margin-bottom:0;
}

.story-block h2{
    color:var(--gold);
    font-size:1.45rem;
    line-height:1.6;
    margin:0 0 20px;
}

.story-block p{
    font-size:1.125rem;
    line-height:1.95;
    margin:0 0 24px;
}

.story-block p:last-child{
    margin-bottom:0;
}

.question{
    color:var(--green);
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-size:1.18rem;
}


/* =========================================
   Craft
   ========================================= */

.craft{
    border-top:1px solid var(--line);
    background:#fff;
    padding-top:56px;
    padding-bottom:63px;
}

.craft-head{
    margin-bottom:32px;
}

.eyebrow{
    font-family:Georgia,serif;
    font-size:.875rem;
    color:var(--muted);
    letter-spacing:.07em;
    margin:0 0 17px;
}

.eyebrow span{
    display:inline-block;
    width:36px;
    height:1px;
    background:var(--line);
    vertical-align:middle;
    margin:0 11px;
}

.craft-head h2{
    font-size:1.9rem;
    line-height:1.55;
    margin:0;
}

.craft-grid{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:35px;
    align-items:start;
}

.bean-photo img{
    width:100%;
    border-radius:150px;
    aspect-ratio:9/16;
    object-fit:cover;
}

.bean-photo figcaption{
    font-size:.75rem;
    text-align:center;
    color:var(--muted);
    margin-top:15px;
    line-height:1.7;
}

.craft-copy p{
    font-size:1.125rem;
    line-height:1.95;
    margin:0 0 24px;
}

.craft-copy p:last-child{
    margin-bottom:0;
}

.batch{
    border-left:2px solid var(--gold);
    padding-left:20px;
    color:var(--green);
}


/* =========================================
   Roasting closing
   ========================================= */

.closing{
    background:#123b2e;
    color:#f5f0e5;
    padding-top:59px;
    padding-bottom:56px;
    text-align:center;
}

.closing .eyebrow{
    color:#c7b485;
}

.closing h2{
    color:#f5f0e5;
    font-size:1.85rem;
    line-height:1.55;
    margin:0 0 24px;
}

.closing .lead{
    font-size:1rem;
    color:#dce5da;
    line-height:1.95;
    max-width:600px;
    margin:0 auto 26px;
}

.checks{
    max-width:590px;
    margin:0 auto 32px;
    padding:0;
    list-style:none;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.checks li{
    font-size:.9375rem;
    line-height:1.8;
    padding:18px 0;
    border-top:1px solid #64816c;
}

.checks span{
    display:block;
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-size:.875rem;
    color:#dbc893;
    margin-bottom:12px;
}

.definition{
    max-width:620px;
    margin:0 auto 29px;
    font-size:1rem;
    line-height:2;
    color:#e4e9df;
}

.promise{
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    font-size:1.7rem;
    line-height:1.8;
    margin:0 0 12px;
}

.daily{
    font-size:1rem;
    color:#e4e9df;
    margin:0 0 33px;
}

.signature{
    font-size:.875rem;
    color:#d4decf;
    margin:0;
}

.signature strong{
    display:block;
    color:#f5f0e5;
    font-size:1.25rem;
    letter-spacing:.1em;
    margin-top:7px;
    font-weight:500;
}


/* =========================================
   Final
   ========================================= */

.final-closing{
    background:var(--green);
    color:#f6f2e9;
    text-align:center;
    padding-top:38px;
    padding-bottom:38px;
}

.final-closing p{
    font-size:1.1875rem;
    line-height:1.9;
    margin:0 0 14px;
}

.final-closing small{
    font-size:.875rem;
    color:#d5dfcf;
    line-height:1.8;
}


/* =========================================
   Footer
   ========================================= */

.footer{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding-top:19px;
    padding-bottom:21px;
    color:var(--muted);
    font-size:.75rem;
    line-height:1.8;
}

/* BASIC css end */