/* BASIC css start */
/* 커피해피 소개 · 모바일 전용 CSS 전체본 (기존 소개 CSS와 교체) */

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

.coffee-happy-page,
.coffee-happy-page *,
.coffee-happy-page *::before,
.coffee-happy-page *::after{
    box-sizing:border-box;
}

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

.coffee-happy-page img{
    display:block;
    max-width:100%;
    height:auto;
}

.coffee-happy-page figure{
    margin:0;
}

.coffee-happy-page a{
    color:inherit;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.coffee-happy-page .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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.coffee-happy-page .opening{
    padding-top:20px;
}

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

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

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

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

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

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

.coffee-happy-page .desktop-break{
    display:block;
}

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

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

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

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

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

.coffee-happy-page .history{
    padding-bottom:48px;
}

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

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

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

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

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

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

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

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

.coffee-happy-page .eyebrow{
    font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    font-size:.875rem;
    color:var(--muted);
    letter-spacing:.07em;
    margin:0 0 17px;
}

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

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

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

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

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

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

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

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

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

.coffee-happy-page .closing .eyebrow{
    color:#c7b485;
}

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

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

.coffee-happy-page .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;
}

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

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

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

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

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

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

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

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

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

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

.coffee-happy-page .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;
}

/* 모바일 레이아웃: 사이트 공통 헤더·푸터에는 적용하지 않습니다. */
.coffee-happy-page {
    width: 100%;
    min-width: 0;
    max-width: 768px;
    margin: 0 auto;
    background: var(--paper);
    font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow: visible;
}
.coffee-happy-page main { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; }
.coffee-happy-page figure { min-width: 0; }
.coffee-happy-page h1,
.coffee-happy-page h2,
.coffee-happy-page h3,
.coffee-happy-page p,
.coffee-happy-page a,
.coffee-happy-page small,
.coffee-happy-page strong,
.coffee-happy-page span,
.coffee-happy-page li,
.coffee-happy-page figcaption { font-family: inherit; }
.coffee-happy-page section[id] { scroll-margin-top: 88px; }
.coffee-happy-page .inset { padding-left: 20px; padding-right: 20px; }
.coffee-happy-page .visual-opening { padding-top: 24px; }
.coffee-happy-page .photo-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.coffee-happy-page .photo-pair figure:nth-child(2) { padding-top: 28px; }
.coffee-happy-page .photo-pair img { border-radius: 16px; }
.coffee-happy-page .company { padding-top: 30px; padding-bottom: 40px; }
.coffee-happy-page .kicker { font-size: 12px; gap: 12px; margin-bottom: 16px; }
.coffee-happy-page .kicker:after { width: 36px; flex-shrink: 0; }
.coffee-happy-page .company h1 { font-size: clamp(23px, 6vw, 30px); line-height: 1.55; margin-bottom: 20px; }
.coffee-happy-page .company h1 br { display: none; }
.coffee-happy-page .lead { font-size: 16px; line-height: 1.85; margin-bottom: 22px; }
.coffee-happy-page .copy { font-size: 16px; line-height: 1.85; margin-bottom: 20px; }
.coffee-happy-page .copy:last-child { margin-bottom: 0; }
.coffee-happy-page .dates { flex-direction: column; gap: 10px; padding: 16px 0; margin: 24px 0; font-size: 13px; }
.coffee-happy-page .dates > span { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; column-gap: 16px; min-width: 0; }
.coffee-happy-page .dates strong { width: auto; min-width: 4ch; font-size: 20px; line-height: 1.5; margin-right: 0; white-space: nowrap; word-break: normal; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.coffee-happy-page .mbti-section { padding: 40px 20px; }
.coffee-happy-page .portrait-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.coffee-happy-page .storefront img { width: 100%; height: auto; border-radius: 18px; }
.coffee-happy-page .mbti-section h2 { font-size: 28px; line-height: 1.5; margin-bottom: 0; }
.coffee-happy-page .story-text { padding-left: 16px; }
.coffee-happy-page .story-text h3 { font-size: 20px; line-height: 1.6; margin-bottom: 18px; }
.coffee-happy-page .mbti-guide { margin-top: 24px; padding: 16px 0 0; border-bottom: 0; }
.coffee-happy-page .mbti-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; font-size: 16px; line-height: 1.7; text-decoration: underline; }
.coffee-happy-page .guide-help { font-size: 13px; margin-top: 4px; }
.coffee-happy-page .philosophy { margin-top: 24px; padding-top: 24px; }
.coffee-happy-page .philosophy p { font-size: 24px; line-height: 1.6; }
.coffee-happy-page .philosophy small { font-size: 13px; }
.coffee-happy-page .section-divider { padding-top: 30px; padding-bottom: 30px; font-size: 10px; letter-spacing: .08em; }
.coffee-happy-page .section-divider span { gap: 10px; }
.coffee-happy-page .section-divider span:before,
.coffee-happy-page .section-divider span:after { width: 20px; flex-shrink: 0; }
.coffee-happy-page .opening { padding-top: 8px; }
.coffee-happy-page .page-label { font-size: 13px; margin-bottom: 12px; }
.coffee-happy-page .opening h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1.5; margin-bottom: 20px; }
.coffee-happy-page .intro-sign { font-size: 12px; margin-bottom: 32px; }
.coffee-happy-page .taste-intro h2 { font-size: 22px; line-height: 1.6; margin-bottom: 20px; }
.coffee-happy-page .taste-intro p,
.coffee-happy-page .story-block p,
.coffee-happy-page .craft-copy p { font-size: 16px; line-height: 1.9; margin-bottom: 20px; }
.coffee-happy-page .taste-intro .intro-taste { font-size: 17px; line-height: 1.9; }
.coffee-happy-page .gallery { grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 28px 0 36px; }
.coffee-happy-page .gallery img { aspect-ratio: auto; height: auto; border-radius: 16px; }
.coffee-happy-page .gallery figcaption { font-size: 13px; padding-top: 8px; }
.coffee-happy-page .history { padding-bottom: 36px; }
.coffee-happy-page .story-block { padding-left: 16px; margin-bottom: 30px; }
.coffee-happy-page .story-block h2 { font-size: 21px; line-height: 1.6; margin-bottom: 16px; }
.coffee-happy-page .craft { padding-top: 36px; padding-bottom: 40px; }
.coffee-happy-page .craft-head { margin-bottom: 24px; }
.coffee-happy-page .eyebrow { font-size: 12px; margin-bottom: 14px; }
.coffee-happy-page .craft-head h2 { font-size: 28px; }
.coffee-happy-page .craft-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.coffee-happy-page .bean-photo { width: 100%; max-width: 400px; margin: 0 auto; }
.coffee-happy-page .bean-photo img { aspect-ratio: auto; height: auto; border-radius: 18px; }
.coffee-happy-page .bean-photo figcaption { font-size: 12px; margin-top: 10px; }
.coffee-happy-page .batch { padding-left: 14px; }
.coffee-happy-page .closing { padding-top: 40px; padding-bottom: 40px; }
.coffee-happy-page .closing h2 { font-size: 25px; line-height: 1.6; margin-bottom: 18px; }
.coffee-happy-page .closing .lead { font-size: 15px; margin-bottom: 24px; }
.coffee-happy-page .checks { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 28px; text-align: left; }
.coffee-happy-page .checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 16px 0; font-size: 15px; }
.coffee-happy-page .checks span { font-size: 13px; margin-bottom: 0; }
.coffee-happy-page .checks br { display: none; }
.coffee-happy-page .definition { font-size: 15px; line-height: 1.9; margin-bottom: 24px; }
.coffee-happy-page .promise { font-size: 25px; line-height: 1.65; }
.coffee-happy-page .daily { font-size: 14px; line-height: 1.8; margin-bottom: 26px; }
.coffee-happy-page .signature { font-size: 12px; }
.coffee-happy-page .signature strong { font-size: 20px; }
.coffee-happy-page .final-closing { padding: 30px 20px; }
.coffee-happy-page .final-closing p { font-size: 17px; line-height: 1.9; }
.coffee-happy-page .final-closing small { font-size: 12px; }
@media (min-width: 600px) {
    .coffee-happy-page .inset { padding-left: 32px; padding-right: 32px; }
    .coffee-happy-page .mbti-section { padding-left: 32px; padding-right: 32px; }
    .coffee-happy-page .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .coffee-happy-page .gallery img { aspect-ratio: 3 / 4; object-fit: cover; }
}
@media (max-width: 359px) {
    .coffee-happy-page .inset { padding-left: 16px; padding-right: 16px; }
    .coffee-happy-page .mbti-section { padding-left: 16px; padding-right: 16px; }
    .coffee-happy-page .final-closing { padding-left: 16px; padding-right: 16px; }
    .coffee-happy-page .photo-pair { gap: 10px; }
}

.coffee-happy-page .checks .check-copy { font-size: inherit; color: inherit; line-height: inherit; }

/* 긴 문장이 좁은 모바일 영역 안에서 자연스럽게 줄바꿈되도록 제한 */
.coffee-happy-page main > *,
.coffee-happy-page .portrait-layout > *,
.coffee-happy-page .craft-grid > *,
.coffee-happy-page .story-text,
.coffee-happy-page .craft-copy { min-width: 0; max-width: 100%; }
.coffee-happy-page .lead,
.coffee-happy-page .copy,
.coffee-happy-page .story-block p,
.coffee-happy-page .craft-copy p { white-space: normal; word-break: keep-all; overflow-wrap: break-word; }

/* BASIC css end */