/*! gpchild-bundle dcc9966f585f3436358948d0c499b2e3 */
/* ── common.css ── */
/* autopost internal links */
.gb-element-autopost-internal-links {
  margin: 56px 0 24px;
  padding: 28px;
  border: 1px solid #d8e2ee;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(241, 246, 252, 0.96) 100%);
  box-shadow: 0 18px 40px rgba(31, 56, 88, 0.08);
}

.gb-element-autopost-internal-links .gb-text-autopost-internal-links-h2 {
  margin: 0 0 18px;
  color: #16365d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.gb-element-autopost-internal-links .autopost-internal-links-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gb-element-autopost-internal-links .autopost-internal-links-list li {
  margin: 0 0 12px;
}

.gb-element-autopost-internal-links .autopost-internal-links-list li:last-child {
  margin-bottom: 0;
}

.gb-element-autopost-internal-links a.gb-text,
.gb-element-autopost-internal-links .gb-text[href] {
  display: block;
  padding: 16px 18px;
  border: 1px solid #d5e1ef;
  border-radius: 14px;
  background: #ffffff;
  color: #1a3a63;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(21, 49, 79, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.gb-element-autopost-internal-links a.gb-text:hover,
.gb-element-autopost-internal-links a.gb-text:focus,
.gb-element-autopost-internal-links .gb-text[href]:hover,
.gb-element-autopost-internal-links .gb-text[href]:focus {
  transform: translateY(-2px);
  border-color: #a9bfd9;
  color: #0f2c4e;
  box-shadow: 0 14px 28px rgba(21, 49, 79, 0.1);
  text-decoration: none;
}

.gb-element-autopost-internal-links a.gb-text::after,
.gb-element-autopost-internal-links .gb-text[href]::after {
  content: "See more";
  display: block;
  margin-top: 8px;
  color: #5b7697;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .gb-element-autopost-internal-links {
    margin: 40px 0 20px;
    padding: 20px 16px;
    border-radius: 14px;
  }

  .gb-element-autopost-internal-links .gb-text-autopost-internal-links-h2 {
    font-size: 15px;
    margin-bottom: 14px;
  }

  .gb-element-autopost-internal-links a.gb-text,
  .gb-element-autopost-internal-links .gb-text[href] {
    padding: 14px 15px;
    font-size: 15px;
    border-radius: 12px;
  }
}

/* ── CSS_blog.css ── */
/* ============================================================
   CSS_blog.css — GB03 Blog Post Template Styles
   thebeautyroad.com
   ============================================================ */

:root {
  --gb03-primary:      #201a15;
  --gb03-secondary:    #55493d;
  --gb03-accent:       #b3703a;
  --gb03-accent-light: #f6ece0;
  --gb03-accent-dark:  #8a5228;
  --gb03-muted:        #8c8177;
  --gb03-border:       #e5dccf;
  --gb03-bg:           #ffffff;
  --gb03-bg-alt:       #faf6f0;
  --gb03-bg-dark:      #26201a;
  --gb03-text-on-dark: #f5efe6;
  --gb03-font-sans:    'Inter', -apple-system, 'Noto Sans KR', sans-serif;
  --gb03-font-serif:   'Playfair Display', Georgia, serif;
  --gb03-max-width:    780px;
  --gb03-radius:       10px;
}

/* Shared wrapper width for every top-level gb03 block */
.gb-element-gb03-hero-wrap,
.gb-element-gb03-toc-wrap,
.gb-element-gb03-body-wrap,
.gb-element-b31ef48f,
.gb-element-f190b49e,
.gb-element-gb03-internal-links,
.gb-element-feb420ed {
  max-width: var(--gb03-max-width);
  margin: 0 auto;
  font-family: var(--gb03-font-sans);
  color: var(--gb03-primary);
  line-height: 1.7;
  font-size: 1rem;
}

/* ============================================================
   HERO
   ============================================================ */
.gb-element-gb03-hero-wrap {
  padding: 3rem 1.25rem 2rem;
  border-bottom: 1px solid var(--gb03-border);
  margin-bottom: 3rem;
}
.gb-text-gb03-hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gb03-accent);
  margin: 0 0 0.75rem;
}
.gb-text-gb03-hero-h1 {
  font-family: var(--gb03-font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--gb03-primary);
}
.gb-text-gb03-hero-intro {
  font-size: 1.1rem;
  color: var(--gb03-secondary);
  max-width: 620px;
  margin: 0;
  font-weight: 300;
}
.gb-element-gb03-hero-bar {
  width: 44px;
  height: 3px;
  background: var(--gb03-accent);
  margin-top: 1.5rem;
}

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
.gb-element-gb03-toc-wrap {
  background: var(--gb03-bg-alt);
  border: 1px solid var(--gb03-border);
  border-radius: var(--gb03-radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
}
.gb-element-gb03-toc-item-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.gb-element-gb03-toc-item-0, .gb-element-gb03-toc-item-1, .gb-element-gb03-toc-item-2,
.gb-element-gb03-toc-item-3, .gb-element-gb03-toc-item-4, .gb-element-gb03-toc-item-5 {
  padding: 0.25rem 0;
}
.gb-text-gb03-toc-text {
  font-size: 0.95rem;
  color: var(--gb03-secondary);
  margin: 0;
  position: relative;
  padding-left: 1.1rem;
}
.gb-text-gb03-toc-text::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gb03-accent);
}

/* ============================================================
   QUICK ANSWER (the plain <div> containing gb03-p1-title + e54f0610)
   ============================================================ */
.gb-text-gb03-p1-title {
  font-family: var(--gb03-font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gb03-primary);
  margin: 0 auto 0.75rem;
  max-width: var(--gb03-max-width);
}
.gb-text-e54f0610 {
  background: var(--gb03-accent-light);
  border-left: 4px solid var(--gb03-accent);
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.4rem;
  font-size: 1rem;
  color: var(--gb03-primary);
  display: block;
  box-sizing: border-box;
  margin: 0 auto 3rem;
  max-width: var(--gb03-max-width);
}

/* ============================================================
   BODY SECTIONS (shell + 4 content patterns)
   ============================================================ */
.gb-element-gb03-body-repeat {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.gb-element-f105d0f5-0, .gb-element-f105d0f5-2, .gb-element-f105d0f5-4,
.gb-element-6afb6e87-1, .gb-element-6afb6e87-3, .gb-element-6afb6e87-5 {
  padding-bottom: 0.5rem;
}
.gb-text-ed90f406, .gb-text-2f3f1a03 {
  font-family: var(--gb03-font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gb03-primary);
  line-height: 1.3;
  margin: 0 0 1.1rem;
}
.gb-text-section-body-p-0, .gb-text-section-body-p-1, .gb-text-section-body-p-2,
.gb-text-section-body-p-3, .gb-text-section-body-p-4, .gb-text-section-body-p-5,
.gb-text-section-body-p-6, .gb-text-section-body-p-7 {
  font-size: 1rem;
  color: var(--gb03-secondary);
  margin: 0 0 1rem;
  font-weight: 300;
}
.gb-text-section-body-p-0:last-child,
.gb-text-section-body-p-1:last-child { margin-bottom: 0; }
.gb-element-gb03-body-repeat a {
  color: var(--gb03-accent-dark);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gb03-accent);
  text-underline-offset: 2px;
}
.gb-element-gb03-body-repeat a:hover { color: var(--gb03-accent); }

/* Pattern B: h3 subsections */
.gb-text-section-body-h3-0, .gb-text-section-body-h3-2,
.gb-text-section-body-h3-4, .gb-text-section-body-h3-6 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gb03-accent-dark);
  margin: 1.4rem 0 0.5rem;
}
.gb-text-section-body-h3-0 { margin-top: 0; }

/* Pattern C: labeled group (criteria cards) */
.gb-element-section-body-label-group-0-0,
.gb-element-section-body-label-group-0-1,
.gb-element-section-body-label-group-0-2,
.gb-element-section-body-label-group-0-3 {
  background: var(--gb03-bg-alt);
  border: 1px solid var(--gb03-border);
  border-top: 3px solid var(--gb03-accent);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.8rem;
}
.gb-text-section-body-label-h4-0-0, .gb-text-section-body-label-h4-0-1,
.gb-text-section-body-label-h4-0-2, .gb-text-section-body-label-h4-0-3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gb03-primary);
  margin: 0 0 0.35rem;
}
.gb-text-section-body-label-p-0-0, .gb-text-section-body-label-p-0-1,
.gb-text-section-body-label-p-0-2, .gb-text-section-body-label-p-0-3 {
  font-size: 0.9rem;
  color: var(--gb03-secondary);
  margin: 0;
  font-weight: 300;
}

/* Pattern D: numbered list */
.gb-element-section-body-ol-0 {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.gb-text-section-body-ol-item-0-0, .gb-text-section-body-ol-item-0-1,
.gb-text-section-body-ol-item-0-2, .gb-text-section-body-ol-item-0-3,
.gb-text-section-body-ol-item-0-4 {
  font-size: 1rem;
  color: var(--gb03-secondary);
  font-weight: 300;
  padding-left: 0.3rem;
}
.gb-text-section-body-ol-item-0-0 strong,
.gb-text-section-body-ol-item-0-1 strong,
.gb-text-section-body-ol-item-0-2 strong,
.gb-text-section-body-ol-item-0-3 strong,
.gb-text-section-body-ol-item-0-4 strong { color: var(--gb03-primary); }

/* ============================================================
   COMPARISON TABLE (vs-style posts)
   ============================================================ */
.gb-element-feb420ed { margin: 3rem auto; }
.autopost-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.autopost-comparison-table thead tr {
  background: var(--gb03-bg-dark);
  color: var(--gb03-text-on-dark);
}
.autopost-comparison-table th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.autopost-comparison-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gb03-border);
  color: var(--gb03-secondary);
  vertical-align: top;
}
.autopost-comparison-table td:first-child {
  font-weight: 600;
  color: var(--gb03-primary);
}
.autopost-comparison-table tbody tr:nth-child(even) { background: var(--gb03-bg-alt); }
.autopost-comparison-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   FAQ
   ============================================================ */
.gb-element-b31ef48f {
  background: var(--gb03-bg-alt);
  border-radius: var(--gb03-radius);
  padding: 2rem 1.75rem;
  margin: 3rem auto;
}
.gb-text-e83493c2 {
  font-family: var(--gb03-font-serif);
  font-size: 1.4rem;
  color: var(--gb03-primary);
  margin: 0 0 1.25rem;
}
.gb-element-60ef1f8c-0, .gb-element-60ef1f8c-1, .gb-element-60ef1f8c-2,
.gb-element-60ef1f8c-3, .gb-element-60ef1f8c-4 {
  border-bottom: 1px solid var(--gb03-border);
  padding: 1rem 0;
}
.gb-element-60ef1f8c-4 { border-bottom: none; padding-bottom: 0; }
.gb-text-a436ab9e {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gb03-primary);
  margin: 0 0 0.4rem;
}
.gb-text-4e3a4511 {
  font-size: 0.92rem;
  color: var(--gb03-secondary);
  margin: 0;
  font-weight: 300;
}

/* ============================================================
   INFORMATIONS (AEO summary block)
   ============================================================ */
.gb-element-f190b49e {
  border: 1px solid var(--gb03-border);
  border-radius: var(--gb03-radius);
  padding: 2rem 1.75rem;
  margin: 3rem auto;
}
.gb-text-17acd1af {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gb03-accent);
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.gb-element-f190b49e h2.gb-text {
  font-family: var(--gb03-font-serif);
  font-size: 1.3rem;
  color: var(--gb03-primary);
  margin: 0 0 0.75rem;
}
.gb-element-f190b49e > p.gb-text {
  font-size: 0.98rem;
  color: var(--gb03-secondary);
  margin: 0 0 1.25rem;
  font-weight: 300;
}
.gb-element-f190b49e > div p {
  font-size: 0.92rem;
  color: var(--gb03-secondary);
  margin: 0 0 0.6rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gb03-accent-light);
  font-weight: 300;
}
.gb-element-f190b49e > div p:last-child { margin-bottom: 0; }

/* ============================================================
   INTERNAL LINKS FOOTER
   ============================================================ */
.gb-element-gb03-internal-links {
  margin: 3rem auto 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gb03-border);
}
.autopost-internal-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.autopost-internal-links-list li a {
  font-size: 0.95rem;
  color: var(--gb03-accent-dark);
  text-decoration: none;
  font-weight: 500;
}
.autopost-internal-links-list li a::before { content: "→ "; color: var(--gb03-accent); }
.autopost-internal-links-list li a:hover { text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .gb-text-gb03-hero-h1 { font-size: 1.8rem; }
  .gb-text-ed90f406, .gb-text-2f3f1a03 { font-size: 1.35rem; }
  .gb-element-gb03-hero-wrap { padding: 2rem 1rem 1.5rem; }
  .gb-element-gb03-toc-wrap,
  .gb-element-b31ef48f,
  .gb-element-f190b49e { padding: 1.25rem 1.1rem; }
}

/* ── CSS_common.css ── */
/* =========================================
   Section Number Overlay
   ========================================= */

.gb-overlap {
    display: grid;
    place-items: center;
    justify-items: center;
    position: relative;
    margin-bottom: 1rem;
}

.gb-overlap > * {
    grid-area: 1 / 1;
}

/* Background Number */

.gb-overlap-number {
    font-size: clamp(90px, 14vw, 220px);
    font-weight: 700;
    line-height: 1;
    color: #d9d9d9;
    opacity: 0.7;
    z-index: 1;
    user-select: none;
}

/* Front Text */

.gb-overlap-text {
    font-size: clamp(28px, 8vw, 100px);
    font-weight: 700;
    line-height: 1;
    color: #9c6234;
    z-index: 2;

    /* 숫자 위쪽으로 조금 이동 */
    transform: translateY(20%);
}
:root{
    --container-width:1440px;
    --container-padding:30px;
}
.gb-container-wide{

    width:100%;
    max-width:var(--container-width);
    padding-inline:var(--container-padding);
    margin-inline:auto;
    box-sizing:border-box;
	margin-bottom:200px;
}
.highlight-strong strong {
    font-weight: 700;
    background-image: linear-gradient(#eae3dc, #eae3dc);
    background-repeat: no-repeat;
    background-size: 100% 15px;
    background-position: left bottom;
}
/* 2026-09-26: unscoped .entry-header display:none removed (hid post titles sitewide) */

/* ===========================
   YAAN Signature Auto Slider
=========================== */

/* 바깥 영역 */

/* 카드 트랙 */

/* 카드 */

/* 마우스를 올리면 일시정지 */

/* 무한 롤링 */
@keyframes signatureScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* 태블릿 */

/* 모바일 */

/* 사진 두개 살짝 기울여서 겹치기 */
.photo-overlap{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:-60px;
    position:relative;
    overflow:visible;
    padding:40px 0;
}

/* 공통 */
.photo-overlap img{
    width:320px;
    max-width:48%;
    border-radius:24px;
    box-shadow:0 20px 40px rgba(0,0,0,.18);
    transition:all .35s ease;
}

@keyframes float-left {
    0%,100%{
        transform: rotate(-7deg) translateY(0);
    }
    50%{
        transform: rotate(-7deg) translateY(-20px);
    }
}

@keyframes float-right {
    0%,100%{
        transform: rotate(7deg) translateY(0);
    }
    50%{
        transform: rotate(7deg) translateY(20px);
    }
}

/* 왼쪽 */
.photo-left{
    transform:rotate(-7deg);
    z-index:1;
    animation:float-left 4s ease-in-out infinite;
}

/* 오른쪽 */
.photo-right{
    transform:rotate(7deg);
    margin-left:-70px;
    z-index:2;
    animation:float-right 4s ease-in-out infinite;
}

/* Hover */
.photo-overlap img:hover{
    animation-play-state: paused;
}

/* ===========================
   FAQ Style
=========================== */

.wp-block-details{

    border-bottom:1px solid #e8e8e8;
    margin:0;
    padding:0;
}

/* ===========================
   Premium FAQ Style
=========================== */

.wp-block-details{

    border-bottom:1px solid #e8e8e8;
    margin:0;
    padding:0;
}

/* 질문 */

.wp-block-details summary{

    list-style:none;
    cursor:pointer;

    display:flex;
    align-items:center;

    padding:22px 0;

    font-size:22px;
    font-weight:600;
    line-height:1.5;

    color:#222;

    transition:color .25s ease;

}

/* 기본 삼각형 제거 */

.wp-block-details summary::-webkit-details-marker{

    display:none;

}

.wp-block-details summary::marker{

    display:none;

}

/* 왼쪽 Search SVG */

.wp-block-details summary::before{

    content:"";

    width:28px;
    height:28px;

    flex:0 0 28px;

    margin-right:14px;

    background-repeat:no-repeat;
    background-position:center;
    background-size:28px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E73BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16L21 21'/%3E%3C/svg%3E");

}

/* 오른쪽 + */

.wp-block-details summary::after{

    content:"+";

    margin-left:auto;

    font-size:28px;
    font-weight:300;
    line-height:1;

    color:#999;

    transition:.25s ease;

}

/* 열린 상태 */

.wp-block-details[open] summary::after{

    content:"−";

    color:#1E73BE;

}

/* Hover */

.wp-block-details summary:hover{

    color:#1E73BE;

}

/* 답변 */

.wp-block-details > div{

    padding:0 0 28px 34px;

    color:#666;

    font-size:17px;
    line-height:1.9;

}

/* 슬라이더 css + JS 약간 30kb 들어감*/
.slider-track{

    display:flex;
    gap:24px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    scrollbar-width:none;

}

.slider-track::-webkit-scrollbar{
    display:none;
}

.card{

    flex:0 0 320px;

    scroll-snap-align:start;

}
/* =========================================
   3단 배너 사선 넣고 멀티플레스. Banner Stack
   ========================================= */

.banner-stack {
    position: relative;
    width: 100%;
    overflow: visible;
}

/* =========================================
   Individual Banner
   ========================================= */

.banner-stack > .banner {
    position: relative;
    min-height: 400px;
    margin-bottom: -70px;

    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*
     * 사선 형태
     */
    clip-path: polygon(
        0 8%,
        100% 0,
        100% 92%,
        0 100%
    );
}

/* =========================================
   Banner Layer / Stacking Order
   ========================================= */

.banner-stack > .banner-1 {
    z-index: 1;
}

.banner-stack > .banner-2 {
    z-index: 2;
}

.banner-stack > .banner-3 {
    z-index: 3;
}

/* =========================================
   Middle Banner - Opposite Angle
   ========================================= */
/* =========================================
   Clip Path
   1st: Top Horizontal / Bottom Diagonal
   ========================================= */

.banner-stack > .banner-1 {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 92%,
        0 100%
    );
}

/* =========================================
   2nd: Top Diagonal / Bottom Diagonal
   ========================================= */

.banner-stack > .banner-2 {
    clip-path: polygon(
        0 0,
        100% 8%,
        100% 100%,
        0 92%
    );
}

/* =========================================
   3rd: Top Diagonal / Bottom Horizontal
   ========================================= */

.banner-stack > .banner-3 {
    clip-path: polygon(
        0 8%,
        100% 0,
        100% 100%,
        0 100%
    );
}

/* =========================================
   Color Overlay
   ========================================= */

.banner-stack > .banner::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 1;

    background: rgba(0, 0, 0, 0.35);

    pointer-events: none;
}

/* =========================================
   Banner 1 Overlay
   ========================================= */

.banner-stack > .banner-1::before {
    background: rgba(30, 50, 60, 0.38);

}

/* =========================================
   Banner 2 Overlay
   ========================================= */

.banner-stack > .banner-2::before {
    background: rgba(110, 65, 55, 0.42);
}

/* =========================================
   Banner 3 Overlay
   ========================================= */

.banner-stack > .banner-3::before {
    background: rgba(0, 0, 0, 0.45);
}

/* =========================================
   Content Layer
   ========================================= */

.banner-stack > .banner > * {
    position: relative;
    z-index: 2;
}

/* =========================================
   Text / Content Position
   ========================================= */
@media (max-width: 767px) {
    .design-wrap.gb-element-45008d9f {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* =========================================
   Mobile
   ========================================= */

@media (max-width: 768px) {

    .banner-stack > .banner {
        min-height: 260px;
        margin-bottom: -34px;

        clip-path: polygon(
            0 5%,
            100% 0,
            100% 95%,
            0 100%
        );
    }

    .banner-stack > .banner-2 {
        clip-path: polygon(
            0 0,
            100% 5%,
            100% 100%,
            0 95%
        );
    }
}

/* =========================================
   Small Mobile
   ========================================= */

@media (max-width: 480px) {

    .banner-stack > .banner {
        min-height: 220px;
        margin-bottom: -24px;
    }

}

/* =========================================
   전체 영역 사각형 배너 디자인
   ========================================= */

.design-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;

    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    padding: 30px 0;
}

/* =========================================
   왼쪽 2 × 2 카드
   ========================================= */

.design-cards {
    position: relative;
    z-index: 3;
    width: 100%;

    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}

/* =========================================
   각각의 카드
   ========================================= */

.design-card {
    position: relative;

    min-height: 200px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 35px 25px;

    box-sizing: border-box;

    background: #fff;

    overflow: hidden;
}

/* =========================================
   카드 내부 테두리
   ========================================= */

.design-cards::after {           /* ← .design-card::after 에서 이동 */
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border: 1px solid #e59a52;
    pointer-events: none;
    z-index: 1;
}

/* =========================================
   카드 숫자
   ========================================= */

.design-card::before {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    z-index: 1;
    pointer-events: none;
}

/* =========================================
   주황색 카드
   ========================================= */

.card-01,
.card-04 {
    background: #f57c00;
}

/* =========================================
   카드 콘텐츠
   ========================================= */

.design-card > * {
    position: relative;

    z-index: 2;
}

/* =========================================
   제목 밑의 작은 선
   ========================================= */

.design-card h3::after {
    content: "";

    display: block;

    width: 45px;
    height: 1px;

    margin: 15px auto 0;

    background: #df7620;
}

/* 주황색 카드의 선 */

.card-01 h3::after,
.card-04 h3::after {
    background: rgba(255, 255, 255, 0.8);
}

/* 주황색 카드 설명 */

.card-01 p,
.card-04 p {
    color: rgba(255, 255, 255, 0.9);
}

/* =========================================
   오른쪽 설명 박스
   ========================================= */

.design-info {
    position: relative;
    z-index: 1;

    min-height: 310px;

    margin-left: -1px;

    padding: 60px 70px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid #e59a52;

    background: #fff;

    overflow: hidden;
}

/* =========================================
   오른쪽 박스 제목
   ========================================= */

.design-info h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 20px;

    font-size: 27px;
    line-height: 1.4;

    color: #df7620;

    font-weight: 500;
}

/* =========================================
   오른쪽 설명
   ========================================= */

.design-info p {
    position: relative;

    z-index: 2;

    max-width: 500px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #777;
}

/* =========================================
   오른쪽 워터마크
   ========================================= */

.design-info::after {
    content: "Yaan Clinic Gang-Nam";

    position: absolute;

    left: 20px;
    bottom: 5px;

    white-space: nowrap;

    font-size: 62px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 1px;

    color: rgba(245, 130, 20, 0.045);

    z-index: 1;

    pointer-events: none;
}

/* =========================================
   모바일
   ========================================= */

@media (max-width: 768px) {

    .design-wrap {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 20px;
    }

    .design-cards {
        width: 100%;
    }

    .design-card {
        min-height: 180px;

        padding: 30px 15px;
    }

    .design-card h3 {
        font-size: 19px;
    }

    .design-card p {
        font-size: 13px;
    }

    .design-info {
        min-height: 280px;

        margin-left: 0;

        padding: 50px 30px;
    }

    .design-info h2 {
        font-size: 24px;
    }

    .design-info::after {
        font-size: 42px;
        left: 10px;
    }
}

/* =========================================
   작은 모바일
   ========================================= */

@media (max-width: 480px) {

    .design-card {
        min-height: 160px;

        padding: 25px 10px;
    }

    .design-card::before {
        font-size: 55px;
    }

    .design-card h3 {
        font-size: 17px;

        margin-bottom: 20px;
    }

    .design-card p {
        font-size: 12px;
        line-height: 1.5;
    }

    .design-info {
        padding: 40px 20px;
    }

}

/* ===== 카드 폭 (잘림 방지 핵심) ===== */
.gb-element-39ba0ee7 {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px) {
    .gb-element-39ba0ee7 {
        width: 100% !important;
        margin-top: -40px !important;
    }
}

/* ===== 타임라인 01 ===== */
.care-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1em;
    padding: 50px 60px 30px;
    text-align: center;
}
.care-timeline-item { display: flex; flex-direction: column; align-items: center; }
.care-timeline-title { font-size: 18px; font-weight: 700; color: #333; margin: 0; }

.care-timeline-stem {
    position: relative;
    width: 0;
    height: 26px;
    margin-top: 10px;
    border-left: 1px dotted #aaa;
}
.care-timeline-stem::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7a6bb5;
    z-index: 2;
}

.care-timeline-track {
    grid-column: 1 / -1;
    position: relative;
    height: 3px;
    margin: 0 0 25px;
    background: linear-gradient(90deg, #cfe8f0 0%, #b9a8e0 100%);
}
.care-timeline-track::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid #b9a8e0;
    transform: translateY(-50%);
}

.care-timeline-desc { font-size: 14px; line-height: 1.7; color: #666; margin: 0; }

/* ===== 모바일 ===== */
@media (max-width: 767px) {
    .care-timeline {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    .care-timeline-track,
    .care-timeline-stem {
        display: none;
    }

    .care-timeline-item:nth-child(1) { order: 1; }
    .care-timeline-item:nth-child(6) { order: 2; margin-bottom: 22px; }
    .care-timeline-item:nth-child(2) { order: 3; }
    .care-timeline-item:nth-child(7) { order: 4; margin-bottom: 22px; }
    .care-timeline-item:nth-child(3) { order: 5; }
    .care-timeline-item:nth-child(8) { order: 6; margin-bottom: 22px; }
    .care-timeline-item:nth-child(4) { order: 7; }
    .care-timeline-item:nth-child(9) { order: 8; }

    .care-timeline-title::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #7a6bb5;
        margin-right: 6px;
        vertical-align: middle;
    }
}

/* ===== recommand for 조정 ===== */

/* ── CSS_Hero.css ── */
.hero {
    background-position: right bottom;
	background-size: 50%;
	background-repeat: no-repeat;
}

/* ── CSS_Landing.css ── */
/* ============================================================
   YBP (Yaan Blog Post) — Global Design Tokens + Component CSS
   Usage: enqueue globally via functions.php or wp_head
   ============================================================ */

:root {
  /* Brand Colors */
  --ybp-color-primary:        #1a1a1a;
  --ybp-color-secondary:      #4a4a4a;
  --ybp-color-accent:         #b89a72;
  --ybp-color-accent-light:   #f5efe6;
  --ybp-color-accent-dark:    #8a7055;
  --ybp-color-muted:          #888888;
  --ybp-color-border:         #e0d8cc;
  --ybp-color-bg:             #ffffff;
  --ybp-color-bg-alt:         #faf8f5;
  --ybp-color-bg-dark:        #1a1a1a;
  --ybp-color-text-on-dark:   #ffffff;

  /* Typography */
  --ybp-font-sans:            'Inter', 'Noto Sans KR', sans-serif;
  --ybp-font-serif:           'Playfair Display', Georgia, serif;
  --ybp-font-size-xs:         0.75rem;
  --ybp-font-size-sm:         0.875rem;
  --ybp-font-size-base:       1rem;
  --ybp-font-size-md:         1.125rem;
  --ybp-font-size-lg:         1.5rem;
  --ybp-font-size-xl:         2rem;
  --ybp-font-size-2xl:        2.75rem;
  --ybp-font-weight-normal:   400;
  --ybp-font-weight-medium:   500;
  --ybp-font-weight-bold:     700;
  --ybp-line-height-tight:    1.2;
  --ybp-line-height-base:     1.7;

  /* Spacing */
  --ybp-space-xs:             0.25rem;
  --ybp-space-sm:             0.5rem;
  --ybp-space-md:             1rem;
  --ybp-space-lg:             1.5rem;
  --ybp-space-xl:             2.5rem;
  --ybp-space-2xl:            4rem;
  --ybp-space-3xl:            6rem;

  /* Layout */
  --ybp-max-width:            780px;
  --ybp-radius-sm:            4px;
  --ybp-radius-md:            8px;
  --ybp-radius-lg:            16px;

  /* Shadows */
  --ybp-shadow-sm:            0 1px 4px rgba(0,0,0,0.06);
  --ybp-shadow-md:            0 4px 16px rgba(0,0,0,0.09);

  /* Transitions */
  --ybp-transition:           0.2s ease;
}

/* ============================================================
   WRAPPER
   ============================================================ */
.ybp {
  font-family:    var(--ybp-font-sans);
  color:          var(--ybp-color-primary);
  max-width:      var(--ybp-max-width);
  margin:         0 auto;
  line-height:    var(--ybp-line-height-base);
  font-size:      var(--ybp-font-size-base);
}

/* ============================================================
   HERO
   ============================================================ */
.ybp-hero {
  padding:        var(--ybp-space-2xl) 0 var(--ybp-space-xl);
  border-bottom:  1px solid var(--ybp-color-border);
  margin-bottom:  var(--ybp-space-2xl);
}

.ybp-hero-line {
  width:          40px;
  height:         3px;
  background:     var(--ybp-color-accent);
  margin-bottom:  var(--ybp-space-lg);
}

.ybp-hero-tag {
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--ybp-color-accent);
  margin:         0 0 var(--ybp-space-sm);
}

.ybp-hero-category {
  display:        inline-block;
  font-size:      var(--ybp-font-size-xs);
  color:          var(--ybp-color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom:  var(--ybp-space-md);
}

.ybp-hero h1 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-2xl);
  font-weight:    var(--ybp-font-weight-bold);
  line-height:    var(--ybp-line-height-tight);
  margin:         0 0 var(--ybp-space-md);
  color:          var(--ybp-color-primary);
}

.ybp-hero h1 em {
  font-style:     italic;
  color:          var(--ybp-color-accent-dark);
}

.ybp-hero-meta {
  display:        flex;
  gap:            var(--ybp-space-sm);
  align-items:    center;
  font-size:      var(--ybp-font-size-xs);
  color:          var(--ybp-color-muted);
  margin:         0 0 var(--ybp-space-md);
}

.ybp-hero-desc {
  font-size:      var(--ybp-font-size-md);
  color:          var(--ybp-color-secondary);
  max-width:      600px;
  margin:         0;
}

/* ============================================================
   QUICK ANSWER
   ============================================================ */
.ybp-quick-answer {
  background:     var(--ybp-color-accent-light);
  border-left:    4px solid var(--ybp-color-accent);
  border-radius:  0 var(--ybp-radius-md) var(--ybp-radius-md) 0;
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
  margin-bottom:  var(--ybp-space-2xl);
  font-size:      var(--ybp-font-size-md);
  color:          var(--ybp-color-primary);
}

.ybp-quick-answer p {
  margin: 0;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.ybp-trust-bar {
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            var(--ybp-space-md);
  background:     var(--ybp-color-bg-dark);
  border-radius:  var(--ybp-radius-lg);
  padding:        var(--ybp-space-xl);
  margin-bottom:  var(--ybp-space-2xl);
  text-align:     center;
}

.ybp-trust-item {
  display:        flex;
  flex-direction: column;
  gap:            var(--ybp-space-xs);
}

.ybp-trust-num {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-xl);
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-accent);
  line-height:    1;
}

.ybp-trust-label {
  font-size:      var(--ybp-font-size-xs);
  color:          rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.ybp section {
  margin-bottom:  var(--ybp-space-3xl);
}

.ybp-sec-hd {
  display:        flex;
  align-items:    center;
  gap:            var(--ybp-space-md);
  margin-bottom:  var(--ybp-space-lg);
}

.ybp-sec-nb {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-accent);
  letter-spacing: 0.1em;
  white-space:    nowrap;
}

.ybp-sec-ln {
  flex:           1;
  height:         1px;
  background:     var(--ybp-color-border);
}

.ybp section h2 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-xl);
  font-weight:    var(--ybp-font-weight-bold);
  line-height:    var(--ybp-line-height-tight);
  margin:         0 0 var(--ybp-space-xl);
  color:          var(--ybp-color-primary);
}

.ybp section h2 em {
  font-style:     italic;
  color:          var(--ybp-color-accent-dark);
}

/* ============================================================
   FEATURE MEDIA BLOCK
   ============================================================ */
.ybp-feature-media-block {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            var(--ybp-space-xl);
  align-items:    start;
  margin-bottom:  var(--ybp-space-xl);
}

.ybp-feature-media-block img {
  width:          100%;
  border-radius:  var(--ybp-radius-md);
  display:        block;
  object-fit:     cover;
  aspect-ratio:   4/3;
}

.ybp-fmb-text p {
  color:          var(--ybp-color-secondary);
  margin:         0 0 var(--ybp-space-md);
}

.ybp-fmb-text p:last-child {
  margin-bottom:  0;
}

/* ============================================================
   SCIENCE BLOCK
   ============================================================ */
.ybp-science-block {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
}

.ybp-science-label {
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--ybp-color-accent-dark);
  margin:         0 0 var(--ybp-space-sm);
}

.ybp-science-block p:last-child {
  margin:         0;
  color:          var(--ybp-color-secondary);
}

/* ============================================================
   PROFILE GRID (What's Included Cards)
   ============================================================ */
.ybp-profile-grid {
  display:        grid;
  grid-template-columns: repeat(2, 1fr);
  gap:            var(--ybp-space-md);
  margin-bottom:  var(--ybp-space-xl);
}

.ybp-profile-card {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-top:     3px solid var(--ybp-color-accent);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg);
}

.ybp-profile-card h3 {
  font-size:      var(--ybp-font-size-base);
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-primary);
  margin:         0 0 var(--ybp-space-sm);
  line-height:    var(--ybp-line-height-tight);
}

.ybp-profile-card p {
  font-size:      var(--ybp-font-size-sm);
  color:          var(--ybp-color-secondary);
  margin:         0;
}

/* ============================================================
   INLINE HIGHLIGHT
   ============================================================ */
.ybp-inline-highlight {
  background:     var(--ybp-color-accent-light);
  border-left:    3px solid var(--ybp-color-accent);
  border-radius:  0 var(--ybp-radius-sm) var(--ybp-radius-sm) 0;
  padding:        var(--ybp-space-md) var(--ybp-space-lg);
  font-size:      var(--ybp-font-size-sm);
  color:          var(--ybp-color-secondary);
  margin:         var(--ybp-space-xl) 0 0;
}

/* ============================================================
   COMPARE TABLE
   ============================================================ */
.ybp-compare-table {
  width:          100%;
  border-collapse: collapse;
  font-size:      var(--ybp-font-size-sm);
  margin-bottom:  0;
}

.ybp-compare-table thead tr {
  background:     var(--ybp-color-bg-dark);
  color:          var(--ybp-color-text-on-dark);
}

.ybp-compare-table th {
  padding:        var(--ybp-space-md) var(--ybp-space-lg);
  text-align:     left;
  font-weight:    var(--ybp-font-weight-medium);
  font-size:      var(--ybp-font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ybp-compare-table td {
  padding:        var(--ybp-space-md) var(--ybp-space-lg);
  border-bottom:  1px solid var(--ybp-color-border);
  color:          var(--ybp-color-secondary);
  vertical-align: top;
}

.ybp-compare-table td:first-child {
  font-weight:    var(--ybp-font-weight-medium);
  color:          var(--ybp-color-primary);
  white-space:    nowrap;
}

.ybp-compare-table tbody tr:last-child td {
  border-bottom:  none;
}

.ybp-compare-table tbody tr:nth-child(even) {
  background:     var(--ybp-color-bg-alt);
}

/* ============================================================
   STEPS
   ============================================================ */
.ybp-steps {
  display:        flex;
  flex-direction: column;
  gap:            var(--ybp-space-lg);
  margin-bottom:  var(--ybp-space-xl);
}

.ybp-step {
  display:        flex;
  gap:            var(--ybp-space-lg);
  align-items:    flex-start;
}

.ybp-step-num {
  flex-shrink:    0;
  width:          2.5rem;
  height:         2.5rem;
  border-radius:  50%;
  background:     var(--ybp-color-accent);
  color:          var(--ybp-color-text-on-dark);
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-bold);
  display:        flex;
  align-items:    center;
  justify-content:center;
  letter-spacing: 0.04em;
}

.ybp-step p {
  margin:         0;
  color:          var(--ybp-color-secondary);
  padding-top:    0.4rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.ybp-faq-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.ybp-faq-item {
  border-bottom:  1px solid var(--ybp-color-border);
  padding:        var(--ybp-space-lg) 0;
}

.ybp-faq-item:first-child {
  border-top:     1px solid var(--ybp-color-border);
}

.ybp-faq-q {
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-primary);
  margin:         0 0 var(--ybp-space-sm);
  font-size:      var(--ybp-font-size-base);
}

.ybp-faq-a {
  color:          var(--ybp-color-secondary);
  font-size:      var(--ybp-font-size-sm);
  margin:         0;
}

/* ============================================================
   GOOGLE RATING
   ============================================================ */
.ybp-google-rating {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
  text-align:     center;
  color:          var(--ybp-color-secondary);
  font-size:      var(--ybp-font-size-sm);
  margin-bottom:  var(--ybp-space-2xl);
}

.ybp-google-rating strong {
  color:          var(--ybp-color-accent-dark);
  font-size:      var(--ybp-font-size-lg);
}

/* ============================================================
   CONTACT BLOCK
   ============================================================ */
.ybp-contact-block {
  background:     var(--ybp-color-accent-light);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-lg);
  padding:        var(--ybp-space-xl) var(--ybp-space-2xl);
  text-align:     center;
  margin-bottom:  var(--ybp-space-2xl);
}

.ybp-contact-block h3 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-lg);
  margin:         0 0 var(--ybp-space-sm);
}

.ybp-contact-block p {
  color:          var(--ybp-color-secondary);
  margin:         0 0 var(--ybp-space-lg);
}

.ybp-cta-link {
  display:        inline-block;
  background:     var(--ybp-color-accent);
  color:          var(--ybp-color-text-on-dark);
  padding:        var(--ybp-space-md) var(--ybp-space-xl);
  border-radius:  var(--ybp-radius-sm);
  font-weight:    var(--ybp-font-weight-medium);
  font-size:      var(--ybp-font-size-sm);
  text-decoration:none;
  transition:     background var(--ybp-transition);
  letter-spacing: 0.04em;
}

.ybp-cta-link:hover {
  background:     var(--ybp-color-accent-dark);
}

/* ============================================================
   DOCTOR BLOCK
   ============================================================ */
.ybp-doctor-block {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
  font-size:      var(--ybp-font-size-sm);
  color:          var(--ybp-color-secondary);
}

.ybp-doctor-block p {
  margin: 0;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.ybp-final-cta {
  background:     var(--ybp-color-bg-dark);
  border-radius:  var(--ybp-radius-lg);
  padding:        var(--ybp-space-2xl);
  text-align:     center;
  margin-top:     var(--ybp-space-2xl);
}

.ybp-final-cta h3 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-lg);
  color:          var(--ybp-color-text-on-dark);
  margin:         0 0 var(--ybp-space-lg);
}

.ybp-cta-btn {
  display:        inline-block;
  background:     var(--ybp-color-accent);
  color:          var(--ybp-color-text-on-dark);
  padding:        var(--ybp-space-md) var(--ybp-space-2xl);
  border-radius:  var(--ybp-radius-sm);
  font-weight:    var(--ybp-font-weight-bold);
  font-size:      var(--ybp-font-size-base);
  text-decoration:none;
  transition:     background var(--ybp-transition);
  letter-spacing: 0.04em;
}

.ybp-cta-btn:hover {
  background:     var(--ybp-color-accent-dark);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .ybp-hero h1               { font-size: var(--ybp-font-size-xl); }
  .ybp-trust-bar             { grid-template-columns: repeat(3, 1fr); gap: var(--ybp-space-sm); padding: var(--ybp-space-lg); }
  .ybp-trust-num             { font-size: var(--ybp-font-size-lg); }
  .ybp-feature-media-block   { grid-template-columns: 1fr; }
  .ybp-profile-grid          { grid-template-columns: 1fr; }
  .ybp-compare-table         { font-size: var(--ybp-font-size-xs); }
  .ybp-compare-table th,
  .ybp-compare-table td      { padding: var(--ybp-space-sm) var(--ybp-space-md); }
  .ybp-contact-block         { padding: var(--ybp-space-xl) var(--ybp-space-lg); }
  .ybp-final-cta             { padding: var(--ybp-space-xl) var(--ybp-space-lg); }
}

@media (max-width: 480px) {
  .ybp-trust-bar             { grid-template-columns: 1fr; }
  .ybp-hero h1               { font-size: var(--ybp-font-size-lg); }
  .ybp section h2            { font-size: var(--ybp-font-size-lg); }
}

/* ── CSS_Palette.css ── */
/*
 * thebeautyroad.com — 팔레트 + 글 템플릿 스타일
 *
 * 배포 위치: wp-content/themes/generatepress_child/css/CSS_Palette.css
 *
 * 왜 이 파일인가:
 *   inc/assets.php 가 css/CSS_*.css 를 glob 해서 SORT_NATURAL|SORT_FLAG_CASE 로 정렬해
 *   순서대로 enqueue 한다. 실제 로드 순서는
 *     CSS_Animations → CSS_blog → CSS_common → CSS_Hero → CSS_Landing → CSS_Palette
 *   이므로 "Palette" 가 마지막이다. 기존 파일을 건드리지 않고 :root 만 덮어쓴다.
 */

/* ============================================================
   1. 포인트 색  ★ 여기 한 줄만 바꾸면 사이트 전체 색이 따라온다 ★
   ============================================================ */

:root {
  --tbr-brand: #175c9c;
}

/*
 * 아래 토큰은 전부 --tbr-brand 에서 계산된다. 직접 고칠 필요 없다.
 *
 * 색을 바꾸기 전에 대비를 확인할 것:
 *     python3 check_palette_contrast.py "#175c9c"
 * 파생식이 같으므로 그 스크립트가 실제 렌더링 값과 일치한다.
 * 너무 밝거나 채도 높은 색은 링크 대비가 깨진다. 실제로 #1f6feb 는
 * 링크/배경 대비가 4.35:1 로 기준(4.5:1)에 미달해서 채택하지 않았다.
 *
 * 현재 값(#175c9c) 검증 결과 — 미달 0:
 *     본문 9.44:1 · 제목 16.86:1 · 링크 6.89:1
 *     버튼 위 흰 글자 6.89:1 · CTA 17.06:1 · 보조 텍스트 4.90:1
 */

/* color-mix 미지원 브라우저용 폴백.
   accent 는 브랜드를 그대로 쓰고 나머지는 중립 회색으로 간다.
   팔레트가 밋밋해질 뿐, 브랜드 색을 바꿔도 색이 어긋나지는 않는다.
   (커스텀 속성은 선언 단위 폴백이 통하지 않아 @supports 로 갈라야 한다.) */
:root {
  --ybp-color-accent:       var(--tbr-brand);
  --ybp-color-accent-dark:  var(--tbr-brand);
  --ybp-color-accent-light: #eef2f6;
  --ybp-color-border:       #d7dee5;
  --ybp-color-bg:           #ffffff;
  --ybp-color-bg-alt:       #f5f7f9;
  --ybp-color-primary:      #12181f;
  --ybp-color-secondary:    #3b4753;
  --ybp-color-muted:        #6b7785;
  --ybp-color-bg-dark:      #12181f;
  --ybp-color-text-on-dark: #ffffff;

  --tbr-maxw: 760px;
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  :root {
    --ybp-color-accent-dark:  color-mix(in srgb, var(--tbr-brand) 72%, #000000);
    --ybp-color-accent-light: color-mix(in srgb, var(--tbr-brand) 12%, #ffffff);
    --ybp-color-border:       color-mix(in srgb, var(--tbr-brand) 22%, #ffffff);
    --ybp-color-bg-alt:       color-mix(in srgb, var(--tbr-brand)  5%, #ffffff);
    --ybp-color-primary:      color-mix(in srgb, var(--tbr-brand) 18%, #0b1118);
    --ybp-color-secondary:    color-mix(in srgb, var(--tbr-brand) 20%, #39434f);
    --ybp-color-muted:        color-mix(in srgb, var(--tbr-brand) 15%, #6b7785);
    --ybp-color-bg-dark:      color-mix(in srgb, var(--tbr-brand) 16%, #0b1118);
  }
}

/* ============================================================
   2. 글 템플릿 (gb03-*)
   ------------------------------------------------------------
   글 21개가 쓰는 GenerateBlocks 클래스 26종은 CSS 정의가 하나도 없었다.
   본문을 건드리지 않고 여기서만 입힌다.
   ============================================================ */

/* .gbp-section 기본 패딩(7rem 40px)이 히어로에 과하다 */
.gb-element-gb03-hero-wrap.gbp-section {
  padding: 3.5rem 0 2.5rem;
  border-top: 1px solid var(--ybp-color-border);
}

.gb-element-gb03-hero-content {
  max-width: var(--tbr-maxw);
  margin: 0 auto;
}

.gb-text-gb03-hero-eyebrow {
  font-family: var(--ybp-font-sans);
  font-size: var(--ybp-font-size-xs);
  font-weight: var(--ybp-font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ybp-color-accent);
  margin: 0 0 var(--ybp-space-md);
}

.gb-text-gb03-hero-h1 {
  font-family: var(--ybp-font-serif);
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: var(--ybp-font-weight-bold);
  line-height: var(--ybp-line-height-tight);
  color: var(--ybp-color-primary);
  margin: 0 0 var(--ybp-space-lg);
}

.gb-text-gb03-hero-intro {
  font-size: var(--ybp-font-size-md);
  line-height: var(--ybp-line-height-base);
  color: var(--ybp-color-secondary);
  margin: 0;
}

.gb-element-gb03-hero-bar {
  width: 56px;
  height: 3px;
  background: var(--ybp-color-accent);
  margin: var(--ybp-space-xl) auto 0;
  max-width: var(--tbr-maxw);
}

/* ---- 목차 ---- */

.gb-element-gb03-toc-wrap {
  max-width: var(--tbr-maxw);
  margin: 0 auto var(--ybp-space-xl);
  padding: var(--ybp-space-lg) var(--ybp-space-xl);
  background: var(--ybp-color-bg-alt);
  border: 1px solid var(--ybp-color-border);
  border-left: 4px solid var(--ybp-color-accent);
  border-radius: 0 var(--ybp-radius-md) var(--ybp-radius-md) 0;
}

.gb-element-gb03-toc-item-wrap {
  counter-reset: tbr-toc;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ybp-space-sm) var(--ybp-space-xl);
}

[class*="gb-element-gb03-toc-item-"] {
  counter-increment: tbr-toc;
  display: flex;
  gap: var(--ybp-space-sm);
  align-items: baseline;
}

[class*="gb-element-gb03-toc-item-"]::before {
  content: counter(tbr-toc, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--ybp-font-sans);
  font-size: var(--ybp-font-size-xs);
  font-weight: var(--ybp-font-weight-bold);
  color: var(--ybp-color-accent);
  letter-spacing: 0.06em;
}

.gb-text-gb03-toc-text {
  margin: 0;
  font-size: var(--ybp-font-size-sm);
  line-height: 1.5;
  color: var(--ybp-color-secondary);
}

/* ---- 리드 문단 ---- */

.gb-text-gb03-p1-title {
  max-width: var(--tbr-maxw);
  margin: 0 auto var(--ybp-space-md);
  font-family: var(--ybp-font-serif);
  font-size: var(--ybp-font-size-lg);
  color: var(--ybp-color-primary);
}

/* ---- 본문 ---- */

.gb-element-gb03-body-wrap {
  max-width: var(--tbr-maxw);
  margin: 0 auto;
}

.gb-element-gb03-body-repeat {
  counter-reset: tbr-sec;
}

.gb-element-gb03-body-repeat > div {
  counter-increment: tbr-sec;
  padding-top: var(--ybp-space-xl);
  margin-bottom: var(--ybp-space-xl);
  border-top: 1px solid var(--ybp-color-border);
}

.gb-element-gb03-body-repeat > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.gb-element-gb03-body-repeat > div > h2 {
  font-family: var(--ybp-font-serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: var(--ybp-line-height-tight);
  color: var(--ybp-color-primary);
  margin: 0 0 var(--ybp-space-md);
}

.gb-element-gb03-body-repeat > div > h2::before {
  content: counter(tbr-sec, decimal-leading-zero);
  display: block;
  font-family: var(--ybp-font-sans);
  font-size: var(--ybp-font-size-xs);
  font-weight: var(--ybp-font-weight-bold);
  letter-spacing: 0.14em;
  color: var(--ybp-color-accent);
  margin-bottom: var(--ybp-space-sm);
}

[class*="gb-text-section-body-h3-"] {
  font-family: var(--ybp-font-sans);
  font-size: var(--ybp-font-size-md);
  font-weight: var(--ybp-font-weight-bold);
  color: var(--ybp-color-primary);
  margin: var(--ybp-space-lg) 0 var(--ybp-space-sm);
}

[class*="gb-text-section-body-p-"],
.gb-element-gb03-body-repeat > div > p {
  font-size: var(--ybp-font-size-base);
  line-height: var(--ybp-line-height-base);
  color: var(--ybp-color-secondary);
  margin: 0 0 var(--ybp-space-md);
}

/* ---- 관련글 ---- */

.gb-element-gb03-internal-links {
  max-width: var(--tbr-maxw);
  margin: var(--ybp-space-2xl) auto 0;
  padding: var(--ybp-space-xl);
  background: var(--ybp-color-bg-alt);
  border: 1px solid var(--ybp-color-border);
  border-radius: var(--ybp-radius-md);
}

.gb-element-gb03-internal-links::before {
  content: "Keep reading";
  display: block;
  font-family: var(--ybp-font-sans);
  font-size: var(--ybp-font-size-xs);
  font-weight: var(--ybp-font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ybp-color-accent);
  margin-bottom: var(--ybp-space-md);
}

.autopost-internal-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ybp-space-sm);
}

.autopost-internal-links-list li {
  margin: 0;
  padding-left: var(--ybp-space-md);
  position: relative;
}

.autopost-internal-links-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--ybp-color-accent);
}

.autopost-internal-links-list a {
  color: var(--ybp-color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--ybp-color-border);
  transition: color .15s ease, border-color .15s ease;
}

.autopost-internal-links-list a:hover,
.autopost-internal-links-list a:focus {
  color: var(--ybp-color-accent-dark);
  border-bottom-color: var(--ybp-color-accent);
}

/* ---- 출처 ---- */

.tbr-sources {
  max-width: var(--tbr-maxw);
  margin: var(--ybp-space-2xl) auto 0;
  padding-top: var(--ybp-space-lg);
  border-top: 2px solid var(--ybp-color-border);
}

.tbr-sources-title {
  font-family: var(--ybp-font-sans);
  font-size: var(--ybp-font-size-xs);
  font-weight: var(--ybp-font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ybp-color-accent);
  margin: 0 0 var(--ybp-space-md);
}

.tbr-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ybp-space-md);
  counter-reset: tbr-src;
}

.tbr-source-item {
  counter-increment: tbr-src;
  margin: 0;
  padding-left: 2rem;
  position: relative;
}

.tbr-source-item::before {
  content: counter(tbr-src);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--ybp-font-sans);
  font-size: var(--ybp-font-size-xs);
  font-weight: var(--ybp-font-weight-bold);
  color: var(--ybp-color-accent);
}

.tbr-source-link {
  color: var(--ybp-color-primary);
  font-weight: var(--ybp-font-weight-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--ybp-color-accent);
}

.tbr-source-link:hover,
.tbr-source-link:focus {
  color: var(--ybp-color-accent-dark);
}

.tbr-source-note {
  margin: var(--ybp-space-xs) 0 0;
  font-size: var(--ybp-font-size-sm);
  line-height: 1.6;
  color: var(--ybp-color-secondary);
}

.tbr-source-checked {
  margin: var(--ybp-space-lg) 0 0;
  font-size: var(--ybp-font-size-xs);
  color: var(--ybp-color-muted);
}

/* ============================================================
   3. 모바일
   ============================================================ */

@media (max-width: 767px) {
  .gb-element-gb03-hero-wrap.gbp-section {
    padding: 2.5rem 0 2rem;
  }
  .gb-element-gb03-toc-item-wrap {
    grid-template-columns: 1fr;
  }
  .gb-element-gb03-toc-wrap,
  .gb-element-gb03-internal-links {
    padding: var(--ybp-space-lg);
  }
}

/* toc-wrap-counter-fix 2026-09-26: 목차 감싸는 칸이 속성 선택자에 걸려 01로 세어지던 문제 */
.gb-element-gb03-toc-item-wrap{counter-increment:none}
.gb-element-gb03-toc-item-wrap::before{content:none}

/* ── CSS_zz_child.css ── */
/* 자식테마 style.css 본문 규칙을 합본에 포함 (2026-10-02). style.css 는 더 이상 따로 받지 않는다. */
/* font */
/* render optimize */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* autopost 본문 블록 기본 스타일 */
.gb-element-gb03-body-p1 .wp-block-paragraph,
.gb-element-gb03-body-p1 .wp-block-list,
.gb-element-gb03-body-p1 .wp-block-heading,
.gb-element-gb03-body-p2 .wp-block-paragraph,
.gb-element-gb03-body-p2 .wp-block-list,
.gb-element-gb03-body-p2 .wp-block-heading {
  font-size: 15px;
  color: #2c3e5a;
  line-height: 1.75;
}

/* autopost: **레이블:** 불릿 → wp:group.autopost-labeled-item (H4 + paragraph) */
.autopost-labeled-item {
  margin-bottom: 1.5em;
  padding: 1em 1.5em;
  border-left: 3px solid #dce7f3;
  background: rgba(220, 231, 243, 0.08);
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

.autopost-labeled-item:hover {
  border-left-color: #1e3260;
}

.autopost-labeled-item .labeled-item-title {
  color: #1e3260;
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1.4;
}

.autopost-labeled-item .labeled-item-desc {
  margin: 0;
  color: #333;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .autopost-labeled-item {
    padding: 0.8em 1em;
    margin-bottom: 1em;
  }

  .autopost-labeled-item .labeled-item-title {
    font-size: 1.05em;
  }
}/* ---------------------------------------------------------------
   목록 페이지 글 제목 복구
   CSS_common.css 의 `.entry-header { display: none; }` 이 단일 글뿐 아니라
   카테고리·태그·검색 목록의 글 제목까지 숨겨 링크를 클릭할 수 없게 만든다.
   단일 글에서의 동작은 건드리지 않고 목록에서만 되살린다.
   GeneratePress 의 `.archive .format-aside .entry-header` 등 한정 규칙은
   특정도가 더 높아 그대로 유지된다.
   --------------------------------------------------------------- */
.archive .entry-header,
.blog .entry-header,
.search .entry-header {
  display: block;
}