/* BASIC css start */
/* =========================================================
   AKKINARA TERMS
   Width : 1100px
   Prefix : akt-
========================================================= */


/* =========================================================
   01. BASE
========================================================= */

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

.akt-page {
    width:1100px;
    margin:0 auto;
    padding:0 0 45px;
    color:#30353a;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif;
}

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

.akt-page fieldset {
    margin:0;
    padding:0;
    border:0;
}

.akt-blind {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    padding:0 !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}



/* =========================================================
   02. LOCATION
========================================================= */

.akt-location {
    display:flex;
    min-height:54px;
    align-items:center;
    gap:8px;
    border-bottom:1px solid #eceef0;
    color:#92989e;
    font-size:13px;
    line-height:1.5;
}

.akt-location a {
    color:#858c93 !important;
    font-size:13px !important;
}

.akt-location a:hover {
    color:#33383e !important;
}

.akt-location span {
    color:#c1c5c9;
}

.akt-location strong {
    color:#686f76;
    font-size:13px;
    font-weight:500;
}



/* =========================================================
   03. HEADING
========================================================= */

.akt-heading {
    padding:52px 0 32px;
    text-align:center;
}

.akt-heading-kicker {
    margin-bottom:8px;
    color:#a0a5aa;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.4px;
}

.akt-heading-title {
    color:#252a2f;
    font-size:30px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.8px;
}

.akt-heading-description {
    margin-top:10px;
    color:#7b8289;
    font-size:14px;
    line-height:1.65;
}



/* =========================================================
   04. TERMS SECTION
========================================================= */

.akt-terms-section {
    width:820px;
    margin:0 auto;
    padding:38px 42px 40px;
    border:1px solid #e0e3e6;
    border-radius:12px;
    background:#fff;
}



/* =========================================================
   05. CONTRACT
========================================================= */

.akt-contract-head {
    margin-bottom:18px;
}

.akt-contract-title {
    color:#30353a;
    font-size:19px;
    font-weight:700;
    letter-spacing:-.35px;
}

.akt-contract-description {
    margin-top:7px;
    color:#8a9096;
    font-size:13px;
    line-height:1.6;
}



/* =========================================================
   06. TEXTAREA
========================================================= */

.akt-contract-box {
    overflow:hidden;
    border:1px solid #dfe2e5;
    border-radius:8px;
    background:#fafbfc;
}

.akt-contract-box textarea {
    display:block;
    width:100% !important;
    height:340px !important;
    margin:0 !important;
    padding:20px 22px !important;
    border:0 !important;
    outline:0 !important;
    resize:none !important;
    background:#fafbfc !important;
    color:#5b6269 !important;
    font-family:
        "Malgun Gothic",
        "Apple SD Gothic Neo",
        Arial,
        sans-serif !important;
    font-size:13px !important;
    line-height:1.75 !important;
    white-space:pre-wrap !important;
}



/* =========================================================
   07. AGREE
========================================================= */

.akt-agree-box {
    display:flex;
    margin-top:18px;
    padding:18px 20px;
    align-items:center;
    gap:30px;
    border-radius:8px;
    background:#f7f8f9;
}

.akt-agree-option {
    display:flex;
    align-items:center;
    gap:8px;
    color:#555c63;
    font-size:13px;
    cursor:pointer;
}

.akt-agree-option input {
    width:16px;
    height:16px;
    margin:0;
    vertical-align:middle;
}

.akt-agree-option span {
    line-height:1.4;
}



/* =========================================================
   08. NEW PRIVACY TERMS BASE
========================================================= */

.akt-contract,
.akt-contract * {
    box-sizing:border-box;
}



/* =========================================================
   09. BUTTONS
========================================================= */

.akt-buttons {
    display:flex;
    margin-top:30px;
    justify-content:center;
    gap:8px;
}

.akt-button {
    display:flex;
    width:180px;
    height:50px;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    font-size:14px !important;
    font-weight:700 !important;
}

.akt-button-cancel {
    border:1px solid #d8dce0;
    background:#fff;
    color:#666d74 !important;
}

.akt-button-cancel:hover {
    border-color:#afb4b9;
    color:#30353a !important;
}

.akt-button-agree {
    border:1px solid #fb4f4f;
    background:#fb4f4f;
    color:#fff !important;
}

.akt-button-agree:hover {
    border-color:#ff7777;
    background:#ff7777;
}



/* =========================================================
   10. OLD STYLE SAFETY
========================================================= */

#terms {
    position:relative;
    width:100%;
}

#terms textarea {
    box-sizing:border-box;
}



/* =========================================================
   11. PRIVACY SECTION TITLE
========================================================= */

.akt-contract h4.tit {
    display:block !important;
    position:relative !important;

    width:100% !important;

    margin:0 0 13px !important;
    padding:0 0 0 13px !important;

    border:0 !important;
    background:none !important;

    color:#30353a !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif !important;

    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.5 !important;
    letter-spacing:-0.3px !important;

    text-align:left !important;
}

.akt-contract h4.tit:before {
    position:absolute;
    top:5px;
    left:0;

    width:4px;
    height:13px;

    border-radius:2px;

    background:#fb4f4f;

    content:"";
}



/* =========================================================
   12. FIRST REQUIRED TITLE GAP
========================================================= */

/*
   약관에 동의합니다 / 동의하지 않습니다.
              ↓
   [필수] 개인정보 수집·이용 동의
*/

.akt-agree-box + h4.tit {
    margin-top:42px !important;
}


/*
   MakeShop이 중간에 hidden input 등을 넣는 경우까지 대응
*/

.akt-agree-box ~ h4.tit:first-of-type {
    margin-top:42px !important;
}



/* =========================================================
   13. PRIVACY SECTION GAP
========================================================= */

/*
   개인정보 표
   안내문
              ↓
   다음 [선택] 제목
*/

.akt-contract .privacy-noti + h4.tit {
    margin-top:42px !important;
}



/* =========================================================
   14. PRIVACY TABLE
========================================================= */

.akt-contract table.contract-tbl {
    width:100% !important;

    margin:0 !important;

    border:1px solid #dde1e4 !important;

    border-spacing:0 !important;
    border-collapse:collapse !important;

    background:#fff !important;

    table-layout:auto !important;
}



/* =========================================================
   15. TABLE CAPTION
========================================================= */

.akt-contract table.contract-tbl caption {
    overflow:hidden !important;

    position:absolute !important;

    width:1px !important;
    height:1px !important;

    margin:-1px !important;
    padding:0 !important;

    border:0 !important;

    clip:rect(0,0,0,0) !important;

    white-space:nowrap !important;
}



/* =========================================================
   16. TABLE HEADER
========================================================= */

.akt-contract table.contract-tbl th {
    height:auto !important;

    margin:0 !important;
    padding:12px 8px !important;

    border-top:0 !important;
    border-left:0 !important;
    border-right:1px solid #e4e7e9 !important;
    border-bottom:1px solid #d9dde0 !important;

    background:#f7f8f9 !important;

    color:#555c63 !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif !important;

    font-size:12px !important;
    font-weight:600 !important;
    line-height:1.45 !important;

    text-align:center !important;
    vertical-align:middle !important;
}



/* =========================================================
   17. TABLE BODY
========================================================= */

.akt-contract table.contract-tbl td {
    height:auto !important;

    margin:0 !important;
    padding:13px 10px !important;

    border-top:0 !important;
    border-left:0 !important;
    border-right:1px solid #eceef0 !important;
    border-bottom:1px solid #eceef0 !important;

    background:#fff !important;

    color:#656c73 !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif !important;

    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.55 !important;

    text-align:center !important;
    vertical-align:middle !important;
}

.akt-contract table.contract-tbl th:last-child,
.akt-contract table.contract-tbl td:last-child {
    border-right:0 !important;
}

.akt-contract table.contract-tbl tbody tr:last-child td {
    border-bottom:0 !important;
}



/* =========================================================
   18. TABLE INNER MAKESHOP RESET
========================================================= */

.akt-contract table.contract-tbl .p10,
.akt-contract table.contract-tbl td > div,
.akt-contract table.contract-tbl th > div {
    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    background:none !important;

    color:inherit !important;

    font-size:inherit !important;
    line-height:inherit !important;

    text-align:inherit !important;
}



/* =========================================================
   19. TABLE STRONG
========================================================= */

.akt-contract table.contract-tbl strong {
    color:#555c63 !important;
    font-weight:600 !important;
}



/* =========================================================
   20. CHECKBOX
========================================================= */

.akt-contract table.contract-tbl input[type="checkbox"],
.akt-contract input.privacy_agree,
.akt-contract input.all_agree {
    position:static !important;

    display:inline-block !important;
    float:none !important;

    width:17px !important;
    height:17px !important;

    margin:0 !important;
    padding:0 !important;

    opacity:1 !important;
    visibility:visible !important;

    vertical-align:middle !important;

    cursor:pointer !important;
}

.akt-contract table.contract-tbl th input[type="checkbox"] {
    margin-left:5px !important;
}



/* =========================================================
   21. PRIVACY NOTICE
========================================================= */

.akt-contract .privacy-noti {
    display:block !important;

    width:100% !important;

    margin:9px 0 0 !important;
    padding:0 2px !important;

    color:#90969c !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif !important;

    font-size:11px !important;
    font-weight:400 !important;
    line-height:1.55 !important;

    text-align:left !important;
}



/* =========================================================
   22. PRIVACY A
========================================================= */

.akt-contract #join_privacyA td {
    text-align:left !important;
}

.akt-contract #join_privacyA td:last-child {
    width:70px !important;
    text-align:center !important;
}



/* =========================================================
   23. PRIVACY B
========================================================= */

.akt-contract #join_privacyB td {
    text-align:left !important;
}

.akt-contract #join_privacyB td:last-child {
    width:70px !important;
    text-align:center !important;
}



/* =========================================================
   24. PRIVACY C
========================================================= */

.akt-contract #join_privacyC td:last-child {
    width:70px !important;
    text-align:center !important;
}



/* =========================================================
   25. AD EMAIL / SMS
========================================================= */

.akt-contract #join_privacy_ad td:last-child {
    width:70px !important;
    text-align:center !important;
}

.akt-contract #join_privacy_ad td:first-child {
    color:#30353a !important;
    font-weight:600 !important;
}



/* =========================================================
   26. OLD MAKESHOP PRIVACY RADIO
========================================================= */

.akt-contract .privercy-agree {
    display:flex !important;

    align-items:center !important;

    gap:24px !important;

    width:100% !important;

    margin:0 !important;
    padding:14px 16px !important;

    border:1px solid #e6e8ea !important;
    border-radius:7px !important;

    background:#fafbfb !important;
}

.akt-contract .privercy-agree label {
    display:inline-flex !important;

    align-items:center !important;

    gap:6px !important;

    margin:0 !important;

    color:#555c63 !important;

    font-size:13px !important;
    font-weight:400 !important;
    line-height:1.5 !important;

    cursor:pointer !important;
}

.akt-contract .privercy-agree input[type="radio"] {
    position:static !important;

    display:inline-block !important;
    float:none !important;

    width:16px !important;
    height:16px !important;

    margin:0 !important;
    padding:0 !important;

    opacity:1 !important;
    visibility:visible !important;

    vertical-align:middle !important;

    cursor:pointer !important;
}



/* =========================================================
   27. FALLBACK - ORIGINAL MAKESHOP OUTPUT
========================================================= */

/*
   현재 커스텀 HTML 안에서는 .akt-contract를 우선 사용.
   혹시 MakeShop 출력이 #terms 쪽에 위치하는 경우에도
   표 스타일이 풀리지 않도록 fallback.
*/

#terms .contract-tbl {
    width:100% !important;
    border:1px solid #dde1e4 !important;
    border-spacing:0 !important;
    border-collapse:collapse !important;
    background:#fff !important;
}

#terms .contract-tbl th {
    padding:12px 8px !important;
    border-right:1px solid #e4e7e9 !important;
    border-bottom:1px solid #d9dde0 !important;
    background:#f7f8f9 !important;
    color:#555c63 !important;
    font-size:12px !important;
    font-weight:600 !important;
    line-height:1.45 !important;
    text-align:center !important;
    vertical-align:middle !important;
}

#terms .contract-tbl td {
    padding:13px 10px !important;
    border-right:1px solid #eceef0 !important;
    border-bottom:1px solid #eceef0 !important;
    background:#fff !important;
    color:#656c73 !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.55 !important;
    text-align:center !important;
    vertical-align:middle !important;
}

#terms .contract-tbl th:last-child,
#terms .contract-tbl td:last-child {
    border-right:0 !important;
}

#terms .contract-tbl tbody tr:last-child td {
    border-bottom:0 !important;
}

#terms .contract-tbl .p10 {
    margin:0 !important;
    padding:0 !important;
    color:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    text-align:inherit !important;
}

#terms .contract-tbl input[type="checkbox"] {
    position:static !important;
    display:inline-block !important;
    float:none !important;
    width:17px !important;
    height:17px !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    vertical-align:middle !important;
}



/* =========================================================
   28. FALLBACK TITLE / GAP
========================================================= */

#terms h4.tit {
    display:block !important;
    color:#30353a !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.5 !important;
}

#terms .privacy-noti + h4.tit {
    margin-top:42px !important;
}



/* =========================================================
   END
========================================================= */
/* BASIC css end */

