/* BASIC css start */
/* =========================================================
   AKKINARA 2026 CHUSEOK COUPON EVENT
   WIDTH : 1100px
   PREFIX : akcp-
========================================================= */


/* =========================================================
   BASE
========================================================= */

.akcp-page,
.akcp-page * {
    box-sizing:border-box;
}

.akcp-page {
    width:1100px;
    margin:0 auto;
    padding:0 0 90px;
    background:#fff;
    color:#24282d;
    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif;
}

.akcp-page a {
    color:inherit;
    text-decoration:none;
}


/* =========================================================
   HERO
========================================================= */

.akcp-hero {
    position:relative;

    width:1100px;
    min-height:520px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #18233a 0%,
            #263654 56%,
            #172136 100%
        );

    color:#fff;
}


/* 장식 */

.akcp-hero:before {
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    right:-80px;
    top:-100px;

    border-radius:50%;

    background:rgba(239,215,154,.10);
}

.akcp-hero:after {
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:110px;
    top:95px;

    border-radius:50%;

    background:#efe0ae;

    box-shadow:
        0 0 80px rgba(239,224,174,.25);
}


.akcp-hero-inner {
    position:relative;

    z-index:4;

    width:570px;

    padding:75px 0 65px 70px;
}


.akcp-hero-kicker {
    margin-bottom:18px;

    color:#d9c78d;

    font-size:13px;
    font-weight:700;

    letter-spacing:2px;
}


.akcp-hero-title {
    color:#fff;

    font-size:28px;
    font-weight:600;

    line-height:1.45;

    letter-spacing:-1px;
}

.akcp-hero-title > span {
    display:block;

    margin-bottom:4px;

    color:#f3dfa4;

    font-size:18px;
    font-weight:700;
}


.akcp-hero-benefit {
    display:flex;

    margin-top:26px;

    align-items:baseline;

    gap:11px;

    color:#f4e8c5;

    font-size:20px;
    font-weight:600;
}

.akcp-hero-benefit strong {
    color:#fff;

    font-size:74px;
    font-weight:800;

    line-height:1;

    letter-spacing:-4px;
}


.akcp-hero-copy {
    margin-top:17px;

    color:#fff;

    font-size:20px;
    font-weight:500;

    line-height:1.6;

    letter-spacing:-.6px;
}


.akcp-hero-period {
    display:inline-flex;

    min-height:38px;

    margin-top:28px;

    padding:0 15px;

    align-items:center;

    gap:12px;

    border:1px solid rgba(255,255,255,.22);
    border-radius:20px;

    background:rgba(255,255,255,.07);

    color:#fff;

    font-size:13px;
    font-weight:600;
}

.akcp-hero-period span {
    color:#d8c68d;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;
}


/* HERO IMAGE */

.akcp-hero-visual {
    position:absolute;

    z-index:5;

    right:40px;
    bottom:35px;

    width:430px;
    height:360px;

    display:flex;

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


.akcp-hero-image {
    display:block;

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;
}


.akcp-title-image-placeholder {
    position:relative;

    z-index:3;

    display:flex;

    width:360px;
    height:240px;

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

    flex-direction:column;


    text-align:center;
}

.akcp-title-image-placeholder span {
    color:#8a7e61;

    font-size:11px;
    font-weight:800;

    letter-spacing:1.5px;
}

.akcp-title-image-placeholder strong {
    margin-top:10px;

    font-size:15px;
    font-weight:700;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.akcp-intro,
.akcp-info-section,
.akcp-use-section {
    padding:80px 0 0;
}


.akcp-intro {
    text-align:center;
}


.akcp-section-kicker {
    margin-bottom:8px;

    color:#a08d58;

    font-size:12px;
    font-weight:800;

    letter-spacing:1.5px;
}


.akcp-section-title {
    color:#242a31;

    font-size:30px;
    font-weight:800;

    line-height:1.4;

    letter-spacing:-1.2px;
}


.akcp-section-desc {
    margin-top:12px;

    color:#777f87;

    font-size:15px;

    line-height:1.75;

    letter-spacing:-.35px;
}


/* =========================================================
   COUPON
========================================================= */

.akcp-coupon-section {
    padding:40px 65px 80px;
}


.akcp-coupon-grid {
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;
}


.akcp-coupon-card {
    position:relative;

    display:block;

    min-height:245px;

    padding:28px 30px;

    overflow:hidden;

    border:1px solid #e2ddd0;
    border-radius:14px;

    background:#fffdf7;

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        border-color .17s ease;
}


.akcp-coupon-card:hover {
    border-color:#cdbc83;

    box-shadow:0 10px 30px rgba(43,48,54,.08);

    transform:translateY(-2px);
}


/* 쿠폰 절취선 느낌 */

.akcp-coupon-card:before,
.akcp-coupon-card:after {
    content:"";

    position:absolute;

    right:107px;

    width:28px;
    height:28px;

    border-radius:50%;

    background:#fff;
}

.akcp-coupon-card:before {
    top:-14px;
}

.akcp-coupon-card:after {
    bottom:-14px;
}


.akcp-coupon-card-main {
    background:#f7f1df;
}


.akcp-coupon-category {
    display:block;

    color:#9f8d59;

    font-size:11px;
    font-weight:800;

    letter-spacing:1.4px;
}


.akcp-coupon-name {
    display:block;

    margin-top:9px;

    color:#33373b;

    font-size:19px;
    font-weight:700;

    letter-spacing:-.5px;
}


.akcp-coupon-rate {
    display:inline-block;

    margin-top:17px;

    color:#1d2941;

    font-size:58px;
    font-weight:800;

    line-height:1;

    letter-spacing:-3px;
}

.akcp-coupon-rate span {
    margin-left:2px;

    font-size:30px;
}


.akcp-coupon-off {
    margin-left:9px;

    color:#9b8b61;

    font-size:12px;
    font-weight:800;

    letter-spacing:1px;
}


.akcp-coupon-button {
    position:absolute;

    top:0;
    right:0;

    display:flex;

    width:108px;
    height:100%;

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

    flex-direction:column;

    gap:9px;

    border-left:1px dashed #d7ca9c;

    background:#263654;

    color:#fff !important;

    font-size:13px;
    font-weight:700;

    text-align:center;
}

.akcp-coupon-button span {
    display:flex;

    width:29px;
    height:29px;

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

    border-radius:50%;

    background:#e3cf91;

    color:#263654 !important;

    font-size:15px;
    font-weight:800;
}


.akcp-coupon-card:hover .akcp-coupon-button {
    background:#1d2b46;
}


.akcp-coupon-notice {
    margin-top:22px;

    padding:16px 20px;

    border-radius:8px;

    background:#f6f6f5;

    color:#747a80;

    font-size:13px;

    line-height:1.7;

    text-align:center;
}

.akcp-coupon-notice strong {
    margin-right:8px;

    color:#b59b55;

    font-size:12px;
    font-weight:800;
}


/* =========================================================
   STEP
========================================================= */

.akcp-step-section {
    padding:70px 65px 75px;

    background:#202c44;
}


.akcp-section-head-light {
    text-align:center;
}


.akcp-light {
    color:#d8c68d;
}


.akcp-light-title {
    color:#fff;
}


.akcp-light-desc {
    color:#b9c1ce;
}


.akcp-step-grid {
    display:grid;

    grid-template-columns:
        1fr 40px
        1fr 40px
        1fr 40px
        1fr;

    margin-top:38px;

    align-items:center;
}


.akcp-step-item {
    min-height:170px;

    padding:25px 16px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;

    background:rgba(255,255,255,.055);

    text-align:center;
}


.akcp-step-number {
    display:block;

    color:#d8c68d;

    font-size:11px;
    font-weight:800;

    letter-spacing:1px;
}


.akcp-step-item strong {
    display:block;

    margin-top:15px;

    color:#fff;

    font-size:19px;
    font-weight:700;
}


.akcp-step-item > span:last-child {
    display:block;

    margin-top:11px;

    color:#bac1cb;

    font-size:13px;

    line-height:1.7;
}


.akcp-step-arrow {
    color:#7f8a9d;

    font-size:23px;

    text-align:center;
}


/* =========================================================
   EVENT INFORMATION
========================================================= */

.akcp-info-section {
    width:930px;

    margin:0 auto;
}


.akcp-info-table {
    margin-top:30px;

    border-top:2px solid #30353a;
}


.akcp-info-row {
    display:grid;

    grid-template-columns:170px minmax(0,1fr);

    border-bottom:1px solid #e2e5e7;
}


.akcp-info-label {
    padding:20px 22px;

    background:#f6f7f8;

    color:#454b51;

    font-size:14px;
    font-weight:700;
}


.akcp-info-value {
    padding:20px 24px;

    color:#656c73;

    font-size:14px;

    line-height:1.8;
}


.akcp-info-value strong {
    color:#30353a;
}


.akcp-info-value > div + div {
    margin-top:4px;
}


.akcp-red {
    color:#d84848 !important;
}


/* =========================================================
   USE FLOW
========================================================= */

.akcp-use-section {
    width:930px;

    margin:0 auto;
}


.akcp-use-flow {
    display:grid;

    grid-template-columns:
        1fr 32px
        1fr 32px
        1fr 32px
        1.15fr;

    margin-top:32px;

    align-items:center;
}


.akcp-use-flow-item {
    display:flex;

    min-height:100px;

    padding:17px;

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

    flex-direction:column;

    border:1px solid #e1e4e7;
    border-radius:9px;

    background:#fafbfc;

    text-align:center;
}


.akcp-use-flow-item span {
    color:#a28d54;

    font-size:11px;
    font-weight:800;
}


.akcp-use-flow-item strong {
    margin-top:8px;

    color:#41474d;

    font-size:14px;
    font-weight:700;

    line-height:1.5;
}


.akcp-use-flow-main {
    border-color:#263654;

    background:#263654;
}

.akcp-use-flow-main span {
    color:#d8c68d;
}

.akcp-use-flow-main strong {
    color:#fff;
}


.akcp-use-flow-arrow {
    color:#a9afb5;

    font-size:24px;

    text-align:center;
}


/* =========================================================
   SCREENSHOT
========================================================= */

.akcp-screen-area {
    margin-top:45px;

    padding:30px;

    border-radius:12px;

    background:#f6f7f8;
}


.akcp-screen-head span {
    display:block;

    color:#a08d58;

    font-size:11px;
    font-weight:800;

    letter-spacing:1.2px;
}


.akcp-screen-head strong {
    display:block;

    margin-top:7px;

    color:#33383e;

    font-size:18px;
    font-weight:700;
}


.akcp-screen-placeholder {
    display:flex;

    min-height:390px;

    margin-top:22px;

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

    flex-direction:column;

    border:1px dashed #c9cdd1;

    background:#fff;

    color:#8d949a;

    text-align:center;
}


.akcp-screen-placeholder > span {
    color:#aaa189;

    font-size:11px;
    font-weight:800;

    letter-spacing:1.3px;
}


.akcp-screen-placeholder strong {
    margin-top:11px;

    color:#565d64;

    font-size:16px;
}


.akcp-screen-placeholder small {
    margin-top:7px;

    color:#9ba1a6;

    font-size:12px;
}


.akcp-screen-image {
    display:block;

    width:100%;
    height:auto;

    margin-top:22px;
}


/* =========================================================
   BOTTOM NOTICE
========================================================= */

.akcp-bottom-notice {
    width:930px;

    margin:70px auto 0;

    padding:24px 27px;

    border-top:1px solid #d9dcdf;
    border-bottom:1px solid #d9dcdf;

    color:#7f858b;

    font-size:13px;

    line-height:1.8;
}


.akcp-bottom-notice strong {
    display:block;

    margin-bottom:6px;

    color:#474d53;

    font-size:14px;
    font-weight:700;
}
/* BASIC css end */