/* Theme Name: SideTwoJob Chatgin Description: 당근 위탁판매 실전 가이드 랜딩페이지. Version: 1.0.0 Author: SideTwoJob Text Domain: sidetwojob-chatgin Requires at least: 6.6 Requires PHP: 7.4 */ :root { --white: #FFFFFF; --gray: #F4F4F6; --gray-2: #E8E8EE; --line: #DEDFE6; --ink: #191B20; --ink-2: #4B5060; --ink-3: #636878; --dark: #222327; --dark-2: #2F3137; --dark-3: #3A3D45; --dark-ink: #F6F6F8; --dark-ink-2: #BFC2CC; --red: #F04E4E; --red-dark: #B92F3D; --red-text: #D42A3C; --red-night: #FF7A7A; --red-soft: #FFE5E5; --yellow: #FFD84D; --shadow: 0 10px 28px rgba(20, 22, 30, .08), 0 2px 6px rgba(20, 22, 30, .05); --gut: 20px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: light; } } :root[data-theme="dark"] { color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: #E9E9EE; color: var(--ink); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 18px; line-height: 1.7; font-weight: 500; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; } a { color: inherit; } b, strong { font-weight: 800; } p { margin: 0 0 14px; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; letter-spacing: -0.03em; } .nw { white-space: nowrap; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } main.page { max-width: 480px; margin: 0 auto; background: var(--white); overflow: hidden; overflow: clip; box-shadow: 0 20px 60px rgba(20, 22, 30, .12); } main.page > section, main.page > header { padding: 64px var(--gut); position: relative; } .gray { background: var(--gray); } .dark { background: var(--dark); color: var(--dark-ink); } .center { text-align: center; } .pill { display: inline-block; background: var(--red); color: #fff; font-size: 16px; font-weight: 800; line-height: 1.4; border-radius: 999px; padding: 5px 16px; margin-bottom: 14px; } .pill.ink { background: var(--dark); } .dark .pill.ink { background: var(--dark-3); } .pill.yellow { background: var(--yellow); color: var(--ink); } .eyebrow { display: block; font-size: 17px; font-weight: 800; color: var(--red-text); margin-bottom: 10px; } .dark .eyebrow { color: var(--red-night); } h2 { font-size: clamp(28px, 8.4vw, 34px); line-height: 1.32; font-weight: 900; margin-bottom: 18px; } .mega { font-size: clamp(34px, 10.4vw, 44px); line-height: 1.22; font-weight: 900; letter-spacing: -0.045em; } .lead { font-size: 18px; color: var(--ink-2); line-height: 1.7; } .dark .lead { color: var(--dark-ink-2); } .dark .lead b { color: #fff; } .kw { color: var(--red-text); } .dark .kw { color: var(--red-night); } .kbox { display: inline-block; background: var(--red); color: #fff; padding: 0 10px; border-radius: 4px; line-height: 1.32; margin: 2px 0; } .mark { background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); padding: 0 2px; } .dark .mark { background: none; color: var(--yellow); padding: 0; } .note { font-size: 16px; line-height: 1.6; color: var(--ink-3); margin-top: 14px; } .note::before { content: "※ "; } .note.plain::before { content: ""; } .dark .note { color: var(--dark-ink-2); } .big-line { font-size: 25px; line-height: 1.45; font-weight: 900; margin: 30px 0 0; letter-spacing: -0.035em; } .big-line small { display: block; font-size: 17px; font-weight: 600; color: var(--ink-2); margin-top: 8px; letter-spacing: -0.01em; } .dark .big-line small { color: var(--dark-ink-2); } .i3d { width: 84px; height: 84px; margin: 0 auto 10px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(20, 22, 30, .14)); } .ic { width: 26px; height: 26px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; width: 100%; min-height: 64px; padding: 14px 18px; border-radius: 14px; border: 0; background: var(--red); color: #fff; font: inherit; font-size: 20px; font-weight: 900; line-height: 1.3; text-align: center; text-decoration: none; letter-spacing: -0.02em; box-shadow: 0 6px 0 var(--red-dark), 0 14px 26px rgba(240, 78, 78, .28); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .12s ease; } .btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--red-dark), 0 6px 12px rgba(240, 78, 78, .2); } .btn .btn-price { font-weight: 800; } .btn-sub { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; margin-top: 12px; padding: 12px 18px; border: 2px solid var(--ink); border-radius: 14px; background: transparent; color: var(--ink); font-size: 18px; font-weight: 800; text-decoration: none; } .dark .btn-sub { border-color: #fff; color: #fff; } .btn:focus-visible, .btn-sub:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .dark :focus-visible { outline-color: var(--yellow); } .btn-wrap { margin-top: 28px; } .topstrip { background: var(--dark); color: #fff; font-size: 16px; font-weight: 800; text-align: center; padding: 11px var(--gut); line-height: 1.45; } .topstrip b { color: var(--yellow); } .hero { padding-top: 40px !important; padding-bottom: 48px !important; text-align: center; background: linear-gradient(180deg, #FFF 0%, #FFF 55%, var(--gray) 100%); } .shh { display: inline-flex; align-items: center; gap: 8px; position: relative; background: var(--white); border-radius: 18px; padding: 10px 18px; box-shadow: var(--shadow); margin-bottom: 24px; font-size: 18px; font-weight: 800; line-height: 1.4; } .shh::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: var(--white); } .shh .i3d { width: 34px; height: 34px; margin: 0; filter: none; } .shh .kw { font-size: 22px; font-weight: 900; } .hero h1 { font-size: clamp(31px, 9.6vw, 40px); line-height: 1.26; font-weight: 900; letter-spacing: -0.045em; margin: 0 0 14px; } .hero h1 .ln { display: block; } .hero .cond { font-size: 16px; line-height: 1.6; color: var(--ink-3); margin: 0 auto 22px; } .hero-sub { font-size: 20px; line-height: 1.6; font-weight: 700; margin: 0 0 20px; } .hero-sub b { color: var(--red-text); } .hero-proof { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--white); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); margin-bottom: 18px; } .hero-proof .i3d { width: 52px; height: 52px; margin: 0; flex: none; } .hero-proof p { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 700; } .hero-proof b { color: var(--red-text); font-size: 20px; } .hero-proof small { display: block; font-size: 16px; color: var(--ink-3); font-weight: 500; } .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 24px; } .badges li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--dark); color: #fff; font-size: 16px; font-weight: 800; line-height: 1.35; } .badges li b { color: var(--yellow); } .cover-wrap { position: relative; width: min(240px, 70%); margin: 8px auto 0; } .cover-card { margin: 0; border-radius: 16px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 22px 40px rgba(20, 22, 30, .22); transform: rotate(-3deg); } .cover-card img { width: 100%; aspect-ratio: 533 / 714; object-fit: cover; } .cover-sticker { position: absolute; right: -16px; top: -12px; transform: rotate(10deg); background: var(--red); color: #fff; font-size: 16px; font-weight: 900; line-height: 1.25; border-radius: 50%; width: 88px; height: 88px; display: grid; place-items: center; text-align: center; box-shadow: 0 8px 16px rgba(240, 78, 78, .35); } .coach-band { display: flex; gap: 12px; align-items: center; text-align: left; margin: 22px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--dark); } .coach-band .i3d { width: 52px; height: 52px; margin: 0; flex: none; } .coach-band p { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--dark-ink-2); } .coach-band b { color: #fff; font-size: 18px; } .coach-tag { display: inline-block; font-size: 16px; font-weight: 800; color: var(--ink); background: var(--yellow); border-radius: 8px; padding: 0 8px; line-height: 1.6; } .chev { height: 32px; position: relative; z-index: 2; margin-top: -1px; } .chev::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); } .chev.w-g { background: var(--gray); } .chev.w-g::before { background: var(--white); } .chev.w-d { background: var(--dark); } .chev.w-d::before { background: var(--white); } .chev.g-w { background: var(--white); } .chev.g-w::before { background: var(--gray); } .chev.g-d { background: var(--dark); } .chev.g-d::before { background: var(--gray); } .chev.d-w { background: var(--white); } .chev.d-w::before { background: var(--dark); } .chev.d-g { background: var(--gray); } .chev.d-g::before { background: var(--dark); } .reversal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .reversal li { background: var(--white); border-radius: 16px; padding: 16px 10px 14px; text-align: center; box-shadow: 0 3px 10px rgba(20, 22, 30, .06); } .reversal li:first-child { grid-column: 1 / -1; } .reversal .i3d { width: 64px; height: 64px; margin-bottom: 6px; } .reversal p { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--ink-2); } .reversal p b { color: var(--ink); } .wrong { font-size: clamp(42px, 12.4vw, 54px); font-weight: 900; letter-spacing: -0.05em; margin: 28px 0 0; line-height: 1.1; } .wrong span { display: inline-block; border-bottom: 7px solid var(--red); padding-bottom: 2px; } .vs-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .vs-head div { text-align: center; font-size: 17px; font-weight: 900; padding: 10px 6px; border-radius: 12px; } .vs-head .them { background: var(--gray-2); color: var(--ink-2); } .vs-head .us { background: var(--red); color: #fff; } .vs-row { background: var(--white); border-radius: 16px; padding: 12px; margin-bottom: 10px; box-shadow: 0 3px 10px rgba(20, 22, 30, .06); text-align: left; } .vs-row h4 { font-size: 16px; font-weight: 800; color: var(--ink-3); margin: 0 4px 8px; } .vs-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .vs-cells div { border-radius: 12px; padding: 10px 12px; font-size: 17px; line-height: 1.45; font-weight: 600; } .vs-cells .them { background: var(--gray); color: var(--ink-2); } .vs-cells .us { background: var(--red-soft); color: var(--ink); font-weight: 900; border: 2px solid var(--red); } .bignum { display: grid; gap: 12px; margin-top: 8px; } .bignum li { background: var(--white); border-radius: 20px; padding: 22px 18px 18px; text-align: center; box-shadow: var(--shadow); } .dark .bignum li { background: var(--dark-2); box-shadow: none; } .bignum .i3d { width: 72px; height: 72px; } .bignum b { display: block; font-size: clamp(40px, 12vw, 50px); line-height: 1.1; font-weight: 900; color: var(--red); letter-spacing: -0.04em; margin-bottom: 8px; } .dark .bignum b { color: var(--red-night); } .bignum p { margin: 0 0 8px; font-size: 18px; line-height: 1.55; font-weight: 700; } .bignum small { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-3); } .dark .bignum small { color: var(--dark-ink-2); } .bignum a, .note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .flipbox { position: relative; margin: 44px 0 0; padding: 36px 18px 22px; border: 3px solid var(--red); border-radius: 20px; background: var(--white); text-align: center; } .flipbox > .pill { position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%); margin: 0; font-size: 18px; padding: 6px 20px; white-space: nowrap; } .flipbox p { margin: 0; font-size: 22px; line-height: 1.5; font-weight: 800; } .flipbox p small { display: block; font-size: 16px; font-weight: 600; color: var(--ink-3); margin-top: 10px; } .points { display: grid; gap: 14px; margin-top: 6px; } .point { background: var(--white); border-radius: 20px; padding: 20px 18px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 72px; gap: 4px 12px; align-items: center; text-align: left; } .dark .point { background: var(--dark-2); box-shadow: none; } .point > .pill { grid-column: 1 / -1; justify-self: start; margin-bottom: 4px; font-size: 16px; padding: 3px 12px; } .point h3 { font-size: 22px; line-height: 1.4; font-weight: 900; margin: 0; } .point .i3d { width: 72px; height: 72px; margin: 0; grid-row: 2 / span 2; grid-column: 2; } .point p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); font-weight: 600; } .dark .point p { color: var(--dark-ink-2); } .flow { display: grid; margin-top: 8px; text-align: left; } .flow li { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border-radius: 16px; padding: 14px 14px 14px 16px; box-shadow: 0 3px 10px rgba(20, 22, 30, .06); } .flow li + li { margin-top: 26px; position: relative; } .flow li + li::before { content: ""; position: absolute; left: 50%; top: -20px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: var(--red); } .flow .num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; font-size: 18px; font-weight: 900; display: grid; place-items: center; margin-top: 1px; } .flow .txt { flex: 1; min-width: 0; } .flow .i3d { width: 48px; height: 48px; margin: 0; flex: none; } .flow b { display: block; font-size: 18px; line-height: 1.4; } .flow .s { display: block; font-size: 16px; color: var(--ink-3); line-height: 1.5; font-weight: 600; margin-top: 2px; } .chatmock { margin-top: 10px; padding: 10px; border-radius: 14px; background: var(--gray); display: grid; gap: 6px; } .chatmock .tag { font-size: 16px; font-weight: 800; color: var(--ink-3); } .chatmock p { margin: 0; max-width: 92%; padding: 8px 12px; border-radius: 14px; font-size: 16px; line-height: 1.45; font-weight: 700; } .chatmock .them { justify-self: start; background: #fff; border-bottom-left-radius: 4px; } .chatmock .me { justify-self: end; background: var(--dark); color: #fff; border-bottom-right-radius: 4px; } .money { margin-top: 26px; background: var(--white); border-radius: 20px; padding: 22px 18px; box-shadow: var(--shadow); text-align: center; } .money .eq1 { font-size: 19px; font-weight: 800; line-height: 1.5; margin: 0; } .money .eq1 small { display: block; font-size: 16px; font-weight: 600; color: var(--ink-3); } .money .eq2 { font-size: 30px; font-weight: 900; margin: 6px 0 16px; letter-spacing: -0.03em; color: var(--red); } .money .ex { font-size: 18px; font-weight: 700; margin: 0 0 8px; line-height: 1.6; } .money .ex .kbox { font-size: 22px; font-weight: 900; } .money .warn { font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--ink); background: var(--gray); border-radius: 12px; padding: 12px 14px; margin: 14px 0 0; text-align: left; } .steps3 { display: grid; gap: 10px; margin-top: 16px; text-align: left; } .steps3 li { display: flex; gap: 12px; align-items: center; background: var(--white); border-radius: 14px; padding: 12px 14px; font-size: 17px; line-height: 1.55; box-shadow: 0 2px 8px rgba(20, 22, 30, .05); } .steps3 .n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--dark); color: #fff; font-weight: 900; font-size: 16px; display: grid; place-items: center; } .steps3 b { display: block; font-size: 18px; } .notice { margin-top: 22px; background: var(--white); border: 2px solid var(--line); border-radius: 16px; padding: 16px; text-align: left; } .notice h4 { font-size: 17px; font-weight: 900; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .notice h4 .i3d { width: 28px; height: 28px; margin: 0; filter: none; } .notice li { font-size: 16px; line-height: 1.65; padding-left: 14px; position: relative; margin-top: 6px; } .notice li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); } .qcards { display: grid; gap: 14px; margin-top: 8px; } .qcard { border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); text-align: center; } .qcard .qh { display: flex; gap: 10px; align-items: center; background: var(--dark); color: #fff; padding: 12px 16px; text-align: left; } .qcard .qh i { font-style: normal; font-size: 28px; font-weight: 900; color: var(--red-night); line-height: 1; } .qcard .qh b { font-size: 18px; line-height: 1.4; } .qcard .qb { padding: 16px 16px 18px; } .qcard .qb .i3d { width: 72px; height: 72px; margin-bottom: 8px; } .qcard .qb p { margin: 0; font-size: 18px; line-height: 1.55; font-weight: 700; } .qcard .qb p small { display: block; font-size: 16px; color: var(--ink-3); font-weight: 600; margin-top: 4px; } .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .tiles li { background: var(--white); border-radius: 16px; padding: 14px 12px; text-align: center; box-shadow: 0 3px 10px rgba(20, 22, 30, .06); } .tiles .i3d { width: 56px; height: 56px; margin-bottom: 6px; } .tiles b { display: block; font-size: 18px; line-height: 1.35; } .tiles p { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-3); font-weight: 600; } .ticket { position: relative; margin: 6px 0 0; background: var(--red); color: #fff; border-radius: 18px; padding: 22px 20px; text-align: left; overflow: hidden; } .ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--dark); } .ticket::before { left: -14px; } .ticket::after { right: -14px; } .ticket .t-top { font-size: 16px; font-weight: 800; letter-spacing: .02em; padding-right: 70px; } .ticket .t-title { font-size: 26px; font-weight: 900; line-height: 1.3; margin: 6px 0 12px; letter-spacing: -0.03em; padding-right: 64px; } .ticket .t-row { display: flex; flex-wrap: wrap; gap: 6px; border-top: 2px dashed rgba(255, 255, 255, .6); padding-top: 12px; } .ticket .t-row span { font-size: 16px; font-weight: 800; background: rgba(0, 0, 0, .2); border-radius: 8px; padding: 2px 10px; } .ticket .i3d { position: absolute; right: 14px; top: 14px; width: 64px; height: 64px; margin: 0; } .chips3 { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 24px 0; flex-wrap: nowrap; } .chips3 span { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 16px; background: var(--dark-2); font-size: 16px; color: var(--dark-ink-2); text-align: center; line-height: 1.35; } .chips3 .i3d { width: 40px; height: 40px; margin: 0 0 2px; } .chips3 b { color: #fff; font-size: 17px; } .chips3 i { flex: none; font-style: normal; color: var(--yellow); font-weight: 900; font-size: 20px; } .roadmap { background: var(--dark-2); border-radius: 20px; padding: 16px; text-align: left; } .rm { display: grid; grid-template-columns: 66px 1fr auto; gap: 8px 12px; align-items: start; padding: 12px 0; border-bottom: 1px dashed rgba(255, 255, 255, .16); } .rm:first-child { padding-top: 0; } .rm .wk { text-align: center; font-size: 16px; font-weight: 900; color: var(--ink); background: var(--yellow); border-radius: 10px; padding: 4px 0; } .rm b { display: block; font-size: 21px; color: #fff; line-height: 1.35; } .rm p { margin: 2px 0 0; font-size: 17px; line-height: 1.5; color: var(--dark-ink-2); } .rm.key b { color: var(--red-night); } .rm .flagchip { grid-column: 2 / -1; justify-self: start; display: inline-block; font-size: 16px; font-weight: 800; color: #fff; background: var(--red); border-radius: 10px; padding: 4px 10px; line-height: 1.45; } .locks { display: flex; gap: 4px; margin-top: 2px; } .locks .i3d { width: 26px; height: 26px; margin: 0; filter: none; opacity: .9; } .rm-warn { margin: 14px 0 0; font-size: 18px; line-height: 1.6; font-weight: 700; color: #fff; } .rm-lock { margin: 10px 0 0; display: flex; gap: 8px; align-items: center; font-size: 16px; color: var(--dark-ink-2); font-weight: 700; } .rm-lock .i3d { width: 24px; height: 24px; margin: 0; filter: none; } .solo { display: grid; gap: 10px; margin-top: 22px; text-align: left; } .solo li { background: var(--dark-2); border-radius: 16px; padding: 14px 16px; } .solo .x { display: flex; gap: 10px; margin: 0; color: #A7ABB6; font-size: 16.5px; line-height: 1.5; font-weight: 600; text-decoration: line-through; text-decoration-color: rgba(167, 171, 182, .5); } .solo .o { display: flex; gap: 10px; margin: 8px 0 0; color: #fff; font-size: 18px; line-height: 1.55; font-weight: 800; } .solo .ic { width: 22px; height: 22px; margin-top: 2px; } .solo .o .ic { color: #7BD39B; } .cohort { margin-top: 18px; font-size: 18px; font-weight: 800; color: var(--yellow); text-align: center; } .maker-h { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 900; margin: 0 0 16px; text-align: left; line-height: 1.3; } .maker-h::before { content: ""; flex: none; width: 6px; height: 30px; background: var(--red); border-radius: 2px; } .author { background: var(--white); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); text-align: left; } .author-top { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; } .mascot { flex: none; width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--red-soft); background: url("assets/book/cover.png") no-repeat 86% 74% / 260%; } .sub-h { font-size: 21px; line-height: 1.45; margin: 30px 0 12px; font-weight: 900; } .reviews { display: grid; gap: 12px; } .review { background: var(--white); border: 2px solid var(--red); border-radius: 16px; padding: 16px; text-align: center; } .review .free { display: inline-block; font-size: 16px; font-weight: 800; color: var(--red-text); margin-bottom: 6px; } .review p { font-size: 18px; font-weight: 700; margin: 0; } .review small { display: block; font-size: 16px; color: var(--ink-3); margin-top: 8px; font-weight: 700; } .phone-ph { margin: 18px auto 0; max-width: 260px; border-radius: 34px; padding: 12px; background: var(--dark); box-shadow: var(--shadow); } .phone-ph .scr { border-radius: 24px; background: var(--gray); padding: 12px; min-height: 240px; display: flex; align-items: center; } .fit { border-radius: 20px; padding: 18px 16px; text-align: left; } .fit.yes { background: var(--white); border: 3px solid var(--red); } .fit.no { background: var(--white); margin-top: 14px; border: 2px solid var(--line); } .fit h3 { font-size: 21px; margin: 0 0 10px; font-weight: 900; } .fit li { display: flex; gap: 10px; font-size: 17.5px; line-height: 1.55; font-weight: 700; margin-top: 10px; } .fit li .ic { width: 24px; height: 24px; margin-top: 1px; } .fit.yes .ic { color: var(--red); } .fit.no .ic { color: var(--ink-3); } .fit.no li { color: var(--ink-2); } .promise { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; text-align: left; } .promise div { border-radius: 16px; padding: 14px; font-size: 17px; line-height: 1.5; font-weight: 800; } .promise small { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; } .promise .give { background: var(--dark); color: #fff; } .promise .give small { color: var(--yellow); } .promise .not { background: var(--white); border: 2px solid var(--line); } .promise .not small { color: var(--red-text); } .offer { display: grid; gap: 10px; margin-bottom: 22px; text-align: left; } .offer > li { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border-radius: 16px; padding: 14px; box-shadow: 0 2px 8px rgba(20, 22, 30, .05); } .offer > li > .i3d { width: 44px; height: 44px; margin: 0; flex: none; } .offer b { display: block; font-size: 18px; line-height: 1.45; } .offer small { display: block; font-size: 16px; line-height: 1.55; color: var(--ink-3); font-weight: 600; margin-top: 2px; } .offer .course-item { border: 3px solid var(--red); } .offer .course-item .btn-sub { margin-top: 12px; min-height: 50px; font-size: 17px; } .mini-road { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; } .mini-road i { font-style: normal; font-size: 16px; font-weight: 800; color: var(--ink); background: var(--gray); border-radius: 8px; padding: 0 8px; } .mini-road i + i::before { content: "→ "; color: var(--red); } .price-box { background: var(--white); border-radius: 22px; padding: 24px 18px 20px; box-shadow: 0 18px 44px rgba(20, 22, 30, .16); border: 3px solid var(--ink); text-align: center; } .price-box .pname { font-size: 17px; font-weight: 800; color: var(--ink-2); margin: 0; } .price-box .list { font-size: 18px; color: var(--ink-3); font-weight: 700; margin: 4px 0 0; } .price-box .list s { text-decoration-thickness: 2px; } .price-box .now { font-size: 48px; font-weight: 900; line-height: 1.2; letter-spacing: -0.04em; margin: 6px 0 2px; } .price-box .now small { font-size: 22px; font-weight: 800; margin-left: 2px; } .price-box .deadline { display: inline-block; font-size: 16px; font-weight: 900; color: #fff; background: var(--red); border-radius: 999px; padding: 3px 14px; margin: 6px 0; } .price-box .btn { margin-top: 16px; } .price-box .btn-sub { margin-top: 10px; } .price-box .terms { text-align: left; margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-2); } .price-box .terms p { margin-bottom: 8px; } #buy { scroll-margin-top: 12px; } .faq { display: grid; gap: 10px; text-align: left; } .faq details { background: var(--white); border-radius: 16px; box-shadow: 0 3px 10px rgba(20, 22, 30, .06); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; padding: 16px 44px 16px 14px; position: relative; font-size: 18px; line-height: 1.5; font-weight: 800; min-height: 56px; } .faq summary::-webkit-details-marker { display: none; } .faq summary .qn { flex: none; min-width: 36px; height: 32px; padding: 0 6px; border-radius: 8px; background: var(--dark); color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 900; margin-top: -1px; } .faq summary::after { content: ""; position: absolute; right: 18px; top: 24px; width: 10px; height: 10px; border-right: 3px solid var(--ink-2); border-bottom: 3px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; } .faq details[open] summary::after { transform: rotate(-135deg); top: 28px; } .faq .ans { padding: 0 18px 18px; font-size: 18px; line-height: 1.7; } @media (min-width: 400px) { .faq .ans { padding-left: 62px; } } .final .mini-cover { width: 150px; margin: 0 auto 22px; border-radius: 14px; border: 4px solid #fff; box-shadow: 0 16px 30px rgba(0, 0, 0, .35); transform: rotate(3deg); } .sum { display: grid; gap: 10px; text-align: left; margin: 24px 0 6px; } .sum li { display: flex; gap: 12px; align-items: center; background: var(--dark-2); border-radius: 16px; padding: 14px 16px; } .sum .i3d { width: 48px; height: 48px; margin: 0; flex: none; } .sum b { display: block; font-size: 18.5px; line-height: 1.4; color: #fff; } .sum span { display: block; font-size: 16px; color: var(--dark-ink-2); line-height: 1.6; font-weight: 600; } .final .deadline { margin-top: 12px; font-size: 16px; font-weight: 800; color: var(--yellow); } .disclose { text-align: left; background: var(--gray); border-radius: 16px; padding: 18px 16px; } .disclose h4 { font-size: 17px; font-weight: 900; margin: 0 0 6px; } .disclose li { font-size: 16px; line-height: 1.65; color: var(--ink-2); padding-left: 14px; position: relative; margin-top: 8px; } .disclose li::before { content: "·"; position: absolute; left: 2px; font-weight: 900; } .seller { text-align: left; margin-top: 16px; font-size: 16px; color: var(--ink-2); line-height: 1.7; } .seller dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; } .seller dt { font-weight: 800; color: var(--ink); } .seller dd { margin: 0; } .foot-pad { height: 96px; background: var(--white); } .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; box-shadow: 0 -8px 24px rgba(20, 22, 30, .14); padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .28s ease; } .buybar:not(.show) { visibility: hidden; transition: transform .28s ease, visibility 0s .28s; } .buybar.show { transform: none; visibility: visible; transition: transform .28s ease; } .buybar .in { max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 12px; } .buybar .info { flex: 1; min-width: 0; line-height: 1.3; } .buybar .info small { display: block; font-size: 16px; color: var(--ink-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buybar .info b { display: block; font-size: 20px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buybar .btn { width: auto; flex: none; min-height: 54px; padding: 10px 18px; font-size: 18px; box-shadow: 0 4px 0 var(--red-dark); } .lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(15, 16, 20, .92); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .lightbox.open { display: flex; } .lightbox img { max-height: 80vh; width: auto; border-radius: 12px; } .lightbox p { color: #fff; font-size: 16px; margin-top: 12px; text-align: center; max-width: 420px; } .lightbox .lb-close { position: absolute; top: 14px; right: 16px; color: #fff; font-size: 17px; font-weight: 800; padding: 10px; } .toast { position: fixed; left: 50%; bottom: 100px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--dark); color: #fff; font-size: 16px; font-weight: 700; padding: 12px 18px; border-radius: 12px; transition: .25s; width: max-content; max-width: calc(100% - 40px); text-align: center; } .toast.on { opacity: 1; transform: translate(-50%, 0); } .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } .img-mode body { background: var(--white); } .img-mode main.page { box-shadow: none; } .img-mode .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .img-mode .buybar, .img-mode .toast, .img-mode .lightbox, .img-mode .foot-pad, .img-mode .btn-sub { display: none !important; } @media (max-width: 340px) { :root { --gut: 16px; } .promise { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr; } .rm { grid-template-columns: 58px 1fr; } .rm .locks { display: none; } .buybar .info small { display: none; } .point { grid-template-columns: 1fr 56px; } .point .i3d { width: 56px; height: 56px; } } .hl { color: var(--red-text); } .dark .hl { color: var(--red-night); } .pink { background: #FFF0F0; } .chev.g-g { display: none; } .chev.g-p { background: #FFF0F0; } .chev.g-p::before { background: var(--gray); } .chev.p-d { background: var(--dark); } .chev.p-d::before { background: #FFF0F0; } .cliff { margin: 40px 0 0; font-size: 22px; line-height: 1.5; font-weight: 800; text-align: center; letter-spacing: -0.03em; } .cliff::before { content: ""; display: block; width: 2px; height: 32px; background: var(--red); margin: 0 auto 14px; } .cliff .i3d.inline { display: block; width: 48px; height: 48px; margin: 0 auto 8px; } .hero .shh { flex-wrap: wrap; justify-content: center; max-width: 100%; } .cover-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; } .cover-row .cover-wrap { width: 170px; margin: 0; flex: none; } .say { position: relative; background: var(--white); border: 2px solid var(--red-text); border-radius: 16px; padding: 10px 12px; font-size: 18px; line-height: 1.45; font-weight: 800; text-align: left; margin: 0; } .say::before { content: ""; position: absolute; left: -9px; top: 50%; margin-top: -8px; width: 14px; height: 14px; background: var(--white); border-left: 2px solid var(--red-text); border-bottom: 2px solid var(--red-text); transform: rotate(45deg); } .say.small { display: inline-block; font-size: 17px; margin: 4px 0 6px 6px; } .say.small::before { left: 20px; top: -9px; margin-top: 0; transform: rotate(135deg); } .coach-wrap { margin-top: 26px; text-align: center; } .coach-wrap > .pill { margin-bottom: -14px; position: relative; z-index: 1; } .coach-band { padding-top: 22px; } .coach-band p { color: var(--dark-ink-2); font-size: 17px; } .coach-band b { font-size: 20px; } .band-note { font-size: 16px; color: var(--ink-3); margin: 8px 0 0; } .dark .i3d.l { width: 96px; height: 96px; } .main-num { margin: 6px 0 14px; } .main-num .mn-1 { font-size: 24px; font-weight: 800; margin: 0; color: #fff; } .main-num .mn-2 { font-size: clamp(48px, 15vw, 60px); font-weight: 900; color: var(--red-night); margin: 0; line-height: 1.1; letter-spacing: -0.045em; } .main-num .mn-3 { font-size: 19px; font-weight: 700; color: #fff; margin: 10px 0 6px; } .main-num small { display: block; font-size: 16px; color: var(--dark-ink-2); line-height: 1.5; } .main-num a, .minicards a, .statrows a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .minicards { display: grid; gap: 10px; text-align: left; } .minicards li { display: flex; gap: 12px; align-items: flex-start; background: var(--dark-2); border-radius: 16px; padding: 14px; } .minicards .i3d { width: 48px; height: 48px; margin: 2px 0 0; flex: none; } .minicards b { display: block; font-size: 28px; line-height: 1.2; font-weight: 900; color: var(--red-night); letter-spacing: -0.03em; } .minicards p { margin: 4px 0 4px; font-size: 17px; line-height: 1.55; color: #EEE; font-weight: 600; } .minicards small { display: block; font-size: 16px; color: var(--dark-ink-2); line-height: 1.5; } .dark .flipbox { color: var(--ink); } .dark .flipbox .kw { color: var(--red-text); } .flipbox .i3d.corner { position: absolute; right: 10px; bottom: -22px; width: 56px; height: 56px; margin: 0; } .so { margin: 34px 0 0; font-size: clamp(30px, 9.4vw, 36px); line-height: 1.35; font-weight: 900; color: #fff; letter-spacing: -0.04em; } .ifcard { margin-top: 24px; background: var(--white); color: var(--ink); border-radius: 18px; padding: 20px 18px; text-align: center; } .ifcard .big { font-size: 22px; line-height: 1.5; font-weight: 800; margin: 0 0 10px; } .ifcard .small { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0; font-weight: 600; } .dark .cliff { color: #fff; } .q-intro { font-size: 20px; font-weight: 700; color: var(--ink-2); margin: 0 0 12px; } .mascot.big { width: 96px; height: 96px; margin: 0 auto 12px; } .qcard .qh { min-height: 60px; } .qcard .qh b { font-size: 19px; } .qcard .qb p { font-size: 19px; } .flow li { align-items: center; } .flow li .num { align-self: flex-start; } .money { position: relative; border: 2px solid var(--red); } .money .i3d { width: 72px; height: 72px; } .money > .pill { margin: 0 0 10px; } .money .ex .kbox { font-size: 22px; } .money .warn { font-size: 18px; } .darkline { margin: 22px 0 0; background: var(--dark); color: #fff; border-radius: 18px; padding: 20px 16px; font-size: 26px; line-height: 1.45; font-weight: 900; letter-spacing: -0.035em; } .darkline .kw { color: var(--red-night); } .notice { border-left: 5px solid var(--red-text); } .statrows { display: grid; gap: 12px; margin-top: 8px; text-align: left; } .statrows li { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); } .statrows .i3d { width: 56px; height: 56px; margin: 4px 0 0; flex: none; } .statrows b { display: block; font-size: clamp(36px, 11vw, 46px); line-height: 1.1; font-weight: 900; color: var(--red); letter-spacing: -0.04em; } .statrows p { margin: 6px 0 6px; font-size: 18px; line-height: 1.55; font-weight: 700; } .statrows small { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-3); } .pink .big-line .kbox { font-size: inherit; } #course > .pill { margin-bottom: 18px; } #course > .i3d { width: 72px; height: 72px; } .week-line { font-size: 28px; line-height: 1.45; font-weight: 900; margin: 6px 0 16px; letter-spacing: -0.035em; color: #fff; } .solo .x .i3d, .solo .o .i3d { width: 24px; height: 24px; margin: 2px 0 0; flex: none; filter: none; } .solo .x { text-decoration: none; color: #A7ABB6; font-size: 17px; } .roadmap { background: var(--white); color: var(--ink); margin-top: 22px; } .rm { border-bottom: 1px dashed var(--line); grid-template-columns: 66px 1fr; position: relative; } .rm .wk { background: var(--red-text); color: #fff; } .rm b { color: var(--ink); font-size: 22px; } .rm p { color: var(--ink-2); font-size: 18px; } .rm.key b { color: var(--red-text); } .rm .flagchip { display: inline-flex; align-items: center; gap: 6px; background: var(--red-soft); color: var(--red-text); border: 2px solid var(--red); } .rm .flagchip .i3d { width: 22px; height: 22px; margin: 0; filter: none; } .locks { gap: 4px; position: absolute; right: 0; top: 14px; margin: 0; } .rm:first-child .locks { top: 2px; } .locks .i3d { width: 24px; height: 24px; background: var(--gray); border-radius: 8px; padding: 3px; box-sizing: content-box; } .rm-warn { color: var(--ink-2); font-size: 18px; } .rm-lock { justify-content: center; font-size: 20px; color: #fff; font-weight: 800; margin-top: 18px; } .rm-lock .i3d { width: 40px; height: 40px; } #course .big-line .kw { color: var(--red-night); } .maker-h.sub { font-size: 22px; margin: 30px 0 12px; } #people h2 { text-align: left; } .author { margin-top: 4px; } #fit > .i3d { width: 88px; height: 88px; } .offer > li { position: relative; padding: 0; overflow: hidden; align-items: stretch; gap: 0; } .offer > li::before, .offer > li::after { content: ""; position: absolute; left: 82px; width: 16px; height: 16px; border-radius: 50%; background: var(--gray); } .offer > li::before { top: -8px; } .offer > li::after { bottom: -8px; } .offer .stub { flex: none; width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 6px; border-right: 2px dashed var(--line); } .offer .stub .i3d { width: 44px; height: 44px; margin: 0; } .offer .stub em { font-style: normal; font-size: 16px; font-weight: 900; color: var(--red-text); } .offer > li > div { padding: 14px; flex: 1; min-width: 0; } .offer .course-item { border: 3px solid var(--red); } .offer .course-item::before, .offer .course-item::after { left: 80px; } .price-box { padding: 0 0 20px; overflow: hidden; border: 0; box-shadow: 0 18px 44px rgba(20, 22, 30, .18); } .price-box > * { margin-left: 18px; margin-right: 18px; } .price-box > .pname { margin: 0; background: var(--dark); color: #fff; font-size: 19px; padding: 16px 18px; } .price-box > .now { margin: 0; background: var(--red); color: #fff; padding: 10px 18px; font-size: 44px; } .price-box > .list { margin-top: 10px; } .price-box > .deadline { margin-top: 10px; } #faq > .i3d { width: 64px; height: 64px; } .faq details { background: var(--gray); box-shadow: none; } .faq summary .qn { background: var(--red-text); border-radius: 999px; } .faq .ans { background: var(--white); margin: 0 10px 10px; border-radius: 12px; padding: 14px 14px 16px; } @media (min-width: 400px) { .faq .ans { padding-left: 14px; } } .say-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; } .say-row .mascot { width: 88px; height: 88px; } .say-row .say { color: var(--ink); } .final .i3d { width: 56px; height: 56px; } .final .deadline { color: var(--yellow); font-size: 16px; font-weight: 800; margin-top: 12px; } .notice-end { padding-top: 40px !important; } .credit { font-size: 16px; color: var(--ink-3); margin: 16px 0 0; text-align: left; } @media (max-width: 340px) { .cover-row { flex-direction: column; } .say::before { display: none; } .offer .stub { width: 76px; } .offer > li::before, .offer > li::after { left: 68px; } } .price-box > .btn, .price-box > .btn-sub { width: auto; } .qcard .qb { display: flex; gap: 14px; align-items: center; text-align: left; padding: 16px; } .qcard .qb .i3d { width: 60px; height: 60px; margin: 0; flex: none; } .qcard .qb p { font-size: 18px; } .goal-line { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--dark-ink-2); } .goal-line b { display: block; color: #fff; font-size: 19px; margin-bottom: 4px; } #fifties .note.plain { text-align: left; } .dark .say .kw { color: var(--red-text); } .coach-band .kw { color: var(--red-night); } .pill, .flow .num, .price-box .deadline { background: var(--red-text); } .buybar .btn { font-size: 19px; } .rm .flagchip { color: var(--red-dark); } .fit.no { margin-top: 0; } .fit + .fit { margin-top: 14px; } .chev.p-w { background: var(--white); } .chev.p-w::before { background: #FFF0F0; } .chev.p-g { background: var(--gray); } .chev.p-g::before { background: #FFF0F0; } .chev.w-p { background: #FFF0F0; } .chev.w-p::before { background: var(--white); } .chev.d-p { background: #FFF0F0; } .chev.d-p::before { background: var(--dark); } @media (max-width: 340px) { .rm .flagchip { grid-column: 1 / -1; } } .will { margin: 26px 0 0; font-size: 24px; line-height: 1.5; font-weight: 900; letter-spacing: -0.035em; } .will .kbox { font-size: inherit; } .strat { margin: 20px 0 14px; } .strat-h { margin: 0 0 10px; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; } .strat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .strat-row > div { background: var(--red-soft); border-radius: 12px; padding: 12px 10px; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--ink-2); text-align: left; } .strat-row b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 4px; } .strat-f { margin: 12px 0 0; font-size: 18px; font-weight: 800; } @media (max-width: 340px) { .strat-row { grid-template-columns: 1fr; } } .statrows li { display: block; text-align: center; padding: 22px 18px 18px; } .statrows .i3d { display: block; width: 52px; height: 52px; margin: 0 auto 6px; } .statrows b { font-size: clamp(44px, 13vw, 54px); } .statrows p { font-size: 19px; margin: 10px 0 0; } .statrows p.why { font-size: 18px; margin-top: 8px; color: var(--ink-2); } .statrows small { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); } #fifties .note.plain.stat-extra { text-align: center; background: var(--white); border-radius: 16px; padding: 14px 16px; margin-top: 12px; } .stat-extra b { display: block; font-size: 18px; line-height: 1.5; color: var(--ink); } .stat-extra small { display: block; font-size: 16px; margin-top: 6px; } .promise { display: block; } .promise .give { padding: 20px 18px; border-radius: 18px; } .promise .give > small { font-size: 18px; font-weight: 900; } .promise .give-h { margin: 2px 0 14px; font-size: 22px; line-height: 1.4; font-weight: 900; letter-spacing: -0.03em; } .promise .give-h span { color: var(--yellow); } .promise .give ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .promise .give li { position: relative; padding: 12px 12px 12px 46px; background: rgba(255, 255, 255, .07); border-radius: 12px; font-size: 18px; line-height: 1.45; font-weight: 800; } .promise .give li::before { content: "✓"; position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font-size: 16px; line-height: 24px; text-align: center; font-weight: 900; } .promise .give li b { display: block; } .promise .give li span { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--dark-ink-2); } .bookset { position: relative; height: 290px; margin: 22px 0 8px; border-radius: 22px; overflow: hidden; background: radial-gradient(110% 80% at 50% 18%, #3a3c44 0%, #1d1e23 58%, #111215 100%); } .bookset::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 20px; height: 28px; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); } .bookset .glow { position: absolute; left: 50%; top: 10%; width: 240px; height: 240px; margin-left: -120px; background: radial-gradient(closest-side, rgba(233, 201, 121, .2), transparent); } .bookset .bk { position: absolute; bottom: 34px; z-index: 2; border-radius: 3px 7px 7px 3px; background: linear-gradient(100deg, #0b0c0f 0%, #25272d 40%, #17181c 72%, #0e0f12 100%); box-shadow: 0 22px 34px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); } .bookset .bk::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: linear-gradient(#7d5e25, #f0d58e 50%, #7d5e25); } .bookset .cv { position: absolute; inset: 14px 10px 12px 20px; display: flex; flex-direction: column; text-align: left; } .bookset .gd { background: linear-gradient(180deg, #f8e6a6 0%, #dcb65c 48%, #a47c2c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .bookset .cv i { font-style: normal; font-size: 12px; font-weight: 800; } .bookset .cv b { margin-top: 6px; font-weight: 900; line-height: 1.18; letter-spacing: -0.03em; } .bookset .cv s, .bookset .card8 s { margin-top: auto; text-decoration: none; font-size: 11px; font-weight: 800; } .bookset .bk.main { left: 50%; width: 140px; height: 198px; margin-left: -70px; z-index: 3; } .bookset .bk.main b { font-size: 23px; } .bookset .bk.l { left: 4%; width: 98px; height: 148px; transform: rotate(-3deg); } .bookset .bk.r { right: 4%; width: 100px; height: 162px; } .bookset .bk.l b, .bookset .bk.r b { font-size: 17px; } .bookset .card8 { position: absolute; right: 2%; bottom: 22px; z-index: 4; width: 88px; height: 116px; border-radius: 10px; background: linear-gradient(150deg, #1d1e23, #0f1013); border: 2px solid #c9a24e; transform: rotate(9deg); box-shadow: 0 14px 24px rgba(0, 0, 0, .55); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 10px 6px; } .bookset .card8 b { font-size: 17px; line-height: 1.25; font-weight: 900; } .bookset .card8 s { margin-top: 8px; font-size: 10px; } .bookset-cap { margin: 0 0 18px; font-size: 18px; line-height: 1.55; font-weight: 800; } .bookset-cap b { color: var(--red-text); } .offer .desc { color: var(--ink); font-weight: 700; } .offer .stub .minibook { position: relative; width: 40px; height: 54px; border-radius: 2px 5px 5px 2px; background: linear-gradient(100deg, #0d0e11, #2a2c33 55%, #15161a); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); } .offer .stub .minibook::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: linear-gradient(#8c6a2a, #ecd08a, #8c6a2a); } .offer .stub .minibook::after { content: ""; position: absolute; left: 12px; right: 6px; top: 13px; height: 14px; border-top: 2px solid #d9b45a; border-bottom: 2px solid #d9b45a; } @media (max-width: 340px) { .bookset { height: 262px; } .bookset .bk.main { width: 124px; height: 178px; margin-left: -62px; } .bookset .bk.main b { font-size: 20px; } .bookset .bk.l, .bookset .bk.r { width: 86px; } } .refund-band { margin: 26px 0 18px; padding: 22px 18px 18px; border-radius: 20px; background: var(--dark); color: #fff; text-align: center; } .refund-band > .pill { margin-bottom: 12px; } .refund-band .rb-main { margin: 0; font-size: 19px; line-height: 1.5; font-weight: 700; color: #EDEDF0; } .refund-band .rb-main b { color: var(--red-night); } .refund-band .rb-big { margin: 8px 0 0; font-size: 28px; line-height: 1.35; font-weight: 900; letter-spacing: -0.035em; } .refund-band .rb-big .kbox { font-size: inherit; } .refund-band .rb-won { margin: 10px 0 0; font-size: 18px; font-weight: 800; color: var(--yellow); } .refund-band .rb-note { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--dark-ink-2); } #people { text-align: center; } #people h2 { text-align: center; } #people .note { text-align: left; } .bookset .bk.l { left: 3%; width: 92px; } .bookset .bk.r { height: 172px; } .bookset .card8 { bottom: 8px; width: 82px; height: 96px; padding: 8px 4px; } .bookset .cv s { font-size: 10px; } .coach-tag { background: var(--red-text); color: #fff; } @media (max-width: 340px) { .bookset .bk.main { width: 118px; margin-left: -59px; } .bookset .bk.l { width: 78px; left: 1%; } .bookset .bk.l .cv, .bookset .bk.r .cv { inset: 12px 6px 10px 15px; } .bookset .bk.l b, .bookset .bk.r b { font-size: 14px; } } .bookset .bk { overflow: hidden; } .bookset .cv s { white-space: nowrap; } .proof { margin: 28px 0 0; } .proof-h { margin: 0 0 14px; font-size: 24px; line-height: 1.45; font-weight: 900; letter-spacing: -0.035em; } .shot { margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--white); box-shadow: 0 10px 28px rgba(20, 22, 30, .16); } .shot img { display: block; width: 100%; height: auto; } .shot.phone { max-width: 270px; border: 6px solid var(--dark); border-radius: 28px; } .proof-cap { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-3); } .proof-grid { display: grid; gap: 14px; margin-top: 4px; } .proof-grid figcaption { padding: 10px 14px; font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--ink); text-align: left; } #people .maker-h.sub { justify-content: flex-start; } .money .ex-big { margin: 2px 0 16px; font-size: 38px; line-height: 1.2; font-weight: 900; letter-spacing: -0.035em; color: var(--ink); } .money .ex-big .kbox { font-size: inherit; padding: 2px 14px; border-radius: 8px; } h1, h2, h3, .cliff, .proof-h, .big-line, .so, .darkline, .will, .give-h, .bookset-cap, .rb-main, .rb-big, .hero-sub, .q-intro, .ifcard .big, .flipbox p, .main-num .mn-3, .statrows p, .say, .rm-lock, .strat-h, .strat-f, .maker-h { text-wrap: balance; } p, li, small, figcaption, .ans, .proof-cap, .note, .cond, .band-note, .strat-row > div, .offer small { text-wrap: pretty; } .offer > li { flex-direction: column; } .offer .stub { width: auto; height: 56px; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 16px; border-right: 0; border-bottom: 2px dashed var(--line); } .offer .stub .i3d { width: 38px; height: 38px; } .offer .stub .minibook { width: 28px; height: 38px; margin: 0 5px; } .offer .stub .minibook::before { left: 4px; } .offer .stub .minibook::after { left: 9px; right: 4px; top: 10px; height: 10px; } .offer .stub em { font-size: 17px; } .offer > li > div { padding: 12px 16px 16px; } .offer > li::before, .offer > li::after, .offer .course-item::before, .offer .course-item::after { top: 47px; bottom: auto; } .offer > li::before, .offer .course-item::before { left: -8px; right: auto; } .offer > li::after, .offer .course-item::after { left: auto; right: -8px; } .flow li { display: grid; grid-template-columns: 34px 1fr 40px; gap: 4px 12px; align-items: start; } .flow .txt { display: contents; } .flow .num { grid-column: 1; grid-row: 1 / 3; } .flow b { grid-column: 2; grid-row: 1; align-self: center; } .flow .i3d { grid-column: 3; grid-row: 1; width: 40px; height: 40px; align-self: center; } .flow .s, .flow .chatmock { grid-column: 2 / 4; grid-row: 2; } .qcard .qb { display: block; padding: 16px 18px 18px; } .qcard .qb::after { content: ""; display: table; clear: both; } .qcard .qb .i3d { float: right; width: 52px; height: 52px; margin: 0 0 0 10px; } .strat-row { grid-template-columns: 1fr; } .strat-row > div { padding: 12px 16px; font-size: 17px; } .shot.phone { max-width: 316px; } .hero-proof { display: block; } .hero-proof::after { content: ""; display: table; clear: both; } .hero-proof .i3d { float: left; margin: 0 12px 0 0; } .minicards li { display: block; position: relative; padding: 16px; } .minicards .i3d { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; margin: 0; } .minicards b { padding-right: 52px; } @media (max-width: 340px) { .reversal { grid-template-columns: 1fr; } .reversal li { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 16px; } .reversal .i3d { width: 48px; height: 48px; margin: 0; flex: none; } } .promise .give li .nw { display: inline; margin-top: 0; font-size: inherit; font-weight: inherit; color: inherit; } .hero .lead-cond { max-width: 290px; } @media (max-width: 340px) { .coach-band { flex-direction: column; text-align: center; gap: 8px; } } @media (max-width: 340px) { .flipbox { padding-bottom: 34px; } } @media (max-width: 340px) { #people .review p { text-wrap: balance; } } .faq summary { text-wrap: balance; } .price-box > .now:has(+ .vat:not([hidden])) { padding-bottom: 0; } .price-box > .vat { margin: 0; background: var(--red); color: #fff; font-size: 17px; font-weight: 800; line-height: 1.45; padding: 2px 18px 12px; text-wrap: balance; } .price-box > .cash { margin-top: 14px; background: #FFF6CC; border: 2px solid var(--yellow); border-radius: 14px; padding: 10px 12px; } .price-box > .cash b { display: block; font-size: 18px; font-weight: 900; color: var(--ink); } .price-box > .cash span { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; color: var(--red-text); text-wrap: balance; } .refund-band .rb-cash { margin-top: 2px; } .buybar .info b .vat { font-size: 16px; font-weight: 800; color: var(--ink-3); } .price-box > .cash span { font-size: 20px; } .price-box > .cash small { display: block; font-size: 16px; font-weight: 700; color: var(--ink-2); } .refund-band .rb-won { text-wrap: balance; } @media (max-width: 440px) { .buybar .info small { display: none; } .buybar .info b .vat { display: block; line-height: 1.2; } } .price-box > .vat-top { margin: 0; background: var(--red); color: #fff; font-size: 17px; font-weight: 800; padding: 14px 18px 0; } .price-box > .vat-top:not([hidden]) + .now { padding-top: 0; } .refund-band .rb-base { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--dark-ink-2); } .price-box > .vat-top:not([hidden]), .price-box > .vat-top:not([hidden]) + .now { box-shadow: 0 1px 0 var(--red); position: relative; } .price-box > .cash.bonus span { font-size: 22px; } .hero h1 { margin-bottom: 14px; } .hero .vs-hero { margin: 18px 0 4px; } .vs-hero .vs-head div { font-size: 18px; } .vs-hero .vs-cells div { font-size: 19px; line-height: 1.4; text-align: center; padding: 14px 8px; } .vs-hero .vs-cells .them { font-weight: 700; } .vs-hero .vs-cells .us { font-weight: 900; } .vs-row h4 { display: flex; align-items: center; gap: 6px; } .vs-row h4 .ic { width: 20px; height: 20px; flex: none; color: var(--red-text); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .vs-row .vs-cells div { text-align: center; } .vs-note { margin: 4px auto 18px; max-width: 340px; text-align: center; } .hero .proof { margin-top: 24px; } .hero .proof .shot { max-width: 360px; margin-left: auto; margin-right: auto; } .hero .big-line { margin-top: 26px; } .hero .chips3 { margin: 20px 0 6px; } .hero > .cliff { margin-top: 26px; } .statrows .why b.in { display: inline; font-size: inherit; line-height: inherit; color: var(--ink); } #worry .big-line small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .proof-grid.two { grid-template-columns: 1fr; } #people > h2 { text-align: center; } #people > .sub-h { text-align: center; margin-top: 34px; } #people > .cliff { text-align: center; } #price #fit { margin: 34px 0 0; text-align: left; } #fit > .will { margin: 0 0 10px; text-align: center; } #fit > .lead { text-align: center; } #price .refund-lead { margin: 30px 0 14px; } .say-row .mini-cover { width: 110px; margin: 0; flex: none; transform: rotate(-3deg); } .ask { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--dark-ink-2); } .ask b { color: #fff; } .vs-cells div, .chips3 span { text-wrap: balance; } .hero .chips3 { align-items: stretch; } .hero .chips3 i { align-self: center; } #worry > .q-intro { margin-top: 34px; } .proof-grid.two .shot:first-child { max-width: 300px; margin-left: auto; margin-right: auto; } #vs { padding-top: 40px; } #vs .vs-row { padding: 10px; margin-bottom: 8px; } #vs .vs-row h4 { margin-bottom: 5px; } #vs .vs-cells div { padding: 8px 12px; } .big-line small .src-in { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; color: var(--ink-3); } .proof-grid figcaption .cap-sub { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--ink-2); } #people > .people-h { margin-top: 0; font-size: 26px; } #price .give-lead { margin: 6px 0 14px; } .bookset .bk.r .cv s { visibility: hidden; } .chev { position: relative; z-index: 2; margin-top: -1px; margin-bottom: -1px; } .chev::before { inset: -1px 0 0; } .price-box > .vat { position: relative; box-shadow: 0 -2px 0 var(--red); } .b3d-stage { --W: 164px; --H: 228px; --D: 22px; position: relative; height: 440px; margin: 22px 0 10px; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 85% at 55% 22%, #1d4a43 0%, #10302b 48%, #0a1f1c 100%); } .b3d-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 112%, rgba(0, 0, 0, .45), transparent 70%); pointer-events: none; } .b3d-books { position: absolute; left: 50%; top: 0; width: 335px; height: 400px; margin-left: -167.5px; } .b3d { position: absolute; width: var(--W); height: var(--H); filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)) drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); } .b3d-body { position: absolute; inset: 0; transform-style: preserve-3d; } .b3d .f { position: absolute; backface-visibility: hidden; } .b3d .paper { background-color: #f6f5f1; background-image: url("data:image/svg+xml;utf8,"); } .b3d .front { inset: 0; transform: translateZ(calc(var(--D) / 2)); border-radius: 2px 5px 5px 2px; overflow: hidden; } .b3d .front::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .02) 3%, rgba(255, 255, 255, .35) 5%, rgba(0, 0, 0, .06) 7.5%, rgba(0, 0, 0, 0) 11%), linear-gradient(160deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .06) 100%); } .b3d .back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--D) / 2)); background-color: #e8e6e0; border-radius: 5px 2px 2px 5px; } .b3d .spine { top: 0; left: calc(var(--D) / -2); width: var(--D); height: var(--H); transform: rotateY(-90deg); border-radius: 3px; } .b3d .spine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .25) 30%, rgba(0, 0, 0, .05) 70%, rgba(0, 0, 0, .2)); } .b3d .pages { top: 3px; left: calc(var(--W) - var(--D) / 2 - 2px); width: calc(var(--D) - 2px); height: calc(var(--H) - 6px); transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #fbfaf6 0 1px, #e4e1d8 1px 2px), #f2f0ea; } .b3d .top { left: 2px; top: calc(var(--D) / -2 + 3px); width: calc(var(--W) - 5px); height: calc(var(--D) - 2px); transform: rotateX(90deg); background: repeating-linear-gradient(0deg, #fbfaf6 0 1px, #e2dfd6 1px 2px), #f2f0ea; } .b3d .bottom { left: 2px; top: calc(var(--H) - var(--D) / 2 - 3px); width: calc(var(--W) - 5px); height: calc(var(--D) - 2px); transform: rotateX(-90deg); background: #d9d6cd; } .b3d .cv3 { position: absolute; inset: 0; padding: 12px 12px 10px 18px; display: flex; flex-direction: column; color: #1c1d21; text-align: left; } .b3d .cv3-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; font-weight: 900; letter-spacing: .02em; } .b3d .cv3-top b:last-child { font-size: 8px; letter-spacing: .06em; } .b3d .cv3-roof { display: block; width: 100%; height: auto; margin: 16px 0 0; } .b3d .cv3-title { margin: 6px 0 0; font-size: 19px; line-height: 1.22; font-weight: 800; letter-spacing: -0.04em; text-align: center; color: #1c1d21; } .b3d .cv3-sub { margin: 6px 0 0; font-size: 7.5px; line-height: 1.4; font-weight: 600; color: #4a4d55; text-align: center; letter-spacing: -0.01em; } .b3d .cv3-art { display: block; width: 92%; height: auto; margin: 10px auto 0; } .b3d .cv3-by { margin: auto 0 0; font-size: 7px; font-weight: 700; color: #55585f; text-align: center; } .b3d .spine .sp { position: absolute; inset: 8px 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; writing-mode: vertical-rl; color: #1c1d21; } .b3d .spine .sp b { font-size: 10.5px; font-weight: 800; letter-spacing: -0.02em; } .b3d .spine .sp i { font-style: normal; font-size: 7px; font-weight: 900; } .b3d .spine .sp s { text-decoration: none; font-size: 6.5px; font-weight: 700; color: #55585f; } .b3d.one { right: 4px; top: 22px; } .b3d.one .b3d-body { transform: perspective(1200px) rotateX(8deg) rotateY(-22deg) rotateZ(6deg); } .b3d.two { left: 2px; top: 142px; } .b3d.two .b3d-body { transform: perspective(1200px) rotateX(6deg) rotateY(34deg) rotateZ(-5deg); } .b3d-chips { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0 10px; list-style: none; } .b3d-chips li { font-size: 16px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 3px 12px; } .b3d-chips li b { color: var(--yellow); } @media (max-width: 350px) { .b3d-books { transform: scale(.9); transform-origin: 50% 0; } .b3d-stage { height: 410px; } } .offer .stub .minibook { background: #f6f5f1; border: 1px solid #d9d6cd; box-shadow: 0 4px 8px rgba(0, 0, 0, .18); } .offer .stub .minibook::before { background: linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)); width: 4px; left: 0; } .offer .stub .minibook::after { border: 0; background: #e8493f; border-radius: 5px; height: 5px; top: 22px; left: 7px; right: 5px; } .b3d-stage { height: 486px; } .b3d.one { top: 12px; } .b3d.two { left: 18px; top: 128px; } .b3d .spine .sp { writing-mode: horizontal-tb; flex-direction: column; justify-content: space-between; align-items: center; } .b3d .spine .sp > * { writing-mode: vertical-rl; white-space: nowrap; line-height: 1; } @media (max-width: 374px) { .b3d-books { transform: scale(.9); transform-origin: 50% 0; } .b3d-stage { height: 448px; } } @media (max-width: 340px) { .b3d-books { transform: scale(.82); } .b3d-stage { height: 418px; } } .b3d .spine .sp { inset: 12px 0 10px; } .b3d .spine .sp b { font-size: 9.5px; letter-spacing: -0.01em; } .b3d .spine .sp s { font-size: 6.5px; letter-spacing: .04em; } #vs > h2:first-of-type { margin-bottom: 18px; } .tried { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; } .tried li { position: relative; background: var(--white); border-radius: 16px; padding: 14px 92px 14px 16px; box-shadow: 0 3px 10px rgba(20, 22, 30, .06); } .tried li b { display: block; font-size: 18px; font-weight: 800; line-height: 1.4; } .tried li span { display: block; font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--ink-2); margin-top: 2px; } .tried .stamp { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(-12deg); font-style: normal; font-size: 16px; font-weight: 900; color: var(--red-text); border: 3px solid var(--red-text); border-radius: 10px; padding: 4px 9px; line-height: 1.2; opacity: .85; letter-spacing: .02em; } .reframe { margin: 30px 0 0; font-size: 26px; line-height: 1.45; font-weight: 900; letter-spacing: -0.035em; text-wrap: balance; } .reframe .kbox { font-size: inherit; } .reframe-sub { margin: 12px 0 0; font-size: 21px; line-height: 1.5; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; } .reframe-sub small { display: block; margin-top: 10px; font-size: 18px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; } #vs .vs-eyebrow2 { margin-top: 44px; } #worry > .inner-wrap { margin-top: 34px; } #worry .inner-wrap .q-intro { margin: 0 0 12px; } .inner { display: grid; gap: 8px; justify-items: center; } .inner .th { margin: 0; display: inline-block; background: var(--white); border-radius: 18px; padding: 10px 18px; font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--ink); box-shadow: 0 3px 10px rgba(20, 22, 30, .06); position: relative; } .inner .th:nth-child(1) { justify-self: start; } .inner .th:nth-child(3) { justify-self: end; } .inner-ok { margin: 16px 0 26px; font-size: 20px; line-height: 1.5; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; } .qcard .qb p .need { display: block; margin-top: 10px; background: #FFF4D6; border-radius: 12px; padding: 10px 12px; font-size: 16px; line-height: 1.55; font-weight: 700; color: var(--ink); } .qcard .qb p .need b { display: block; color: var(--red-text); font-size: 16px; margin-bottom: 2px; } .refund-band .rb-how { list-style: none; margin: 14px 0 0; padding: 12px 14px; display: grid; gap: 8px; background: rgba(255, 255, 255, .07); border-radius: 14px; text-align: left; } .refund-band .rb-how li { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: baseline; font-size: 17px; line-height: 1.5; font-weight: 600; color: #EDEDF0; } .refund-band .rb-how li b { font-size: 16px; font-weight: 800; color: var(--yellow); } .refund-band .rb-how li small { display: block; font-size: 16px; font-weight: 600; color: var(--dark-ink-2); } .b3d-stage { --H: 220px; } .b3d .front.cover { background: #f3ece2; } .b3d .front.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .b3d .back { background: #efe5d6; } .b3d .spine { background: linear-gradient(90deg, #f6ede0, #fbf5ec 45%, #efe4d4); } .b3d .spine .sp b { color: #e2541f; } .b3d .spine .sp s { color: #3a3b40; } #worry > .inner-wrap + h2 { margin-top: 30px; } .inner-ok { margin-bottom: 0; } .refund-band .rb-how li { grid-template-columns: 44px 1fr; } #vs .vs-eyebrow2 + h2 { margin-bottom: 12px; } #vs .vs-row { padding: 8px 10px; margin-bottom: 6px; } #vs .vs-row h4 { margin-bottom: 4px; } #vs .vs-cells div { padding: 6px 10px; } #vs .vs-eyebrow2 { margin-top: 24px; } #vs .vs-eyebrow2 + h2 { margin-bottom: 10px; } #vs .vs-row { margin-bottom: 5px; } #vs .vs-note { margin-top: 8px; } #vs .vs-head div { padding: 8px 6px; } .inner-ok small { display: block; margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--ink-2); } .formula { margin: 26px 0 0; background: var(--white); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px 6px; text-align: left; } .formula .formula-h { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--red-text); text-align: center; } .formula p:not(.formula-h) { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 0; border-top: 1px dashed var(--line); } .formula p span { flex: none; font-size: 16px; font-weight: 800; color: #fff; background: var(--dark); border-radius: 999px; padding: 3px 12px; line-height: 1.4; } .formula p em { font-style: normal; font-size: 19px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); } .formula p em b { color: var(--red-text); } .hero-offer { margin: 12px 0 0; background: var(--dark); color: #fff; border-radius: 16px; padding: 14px 16px; font-size: 19px; font-weight: 800; line-height: 1.45; letter-spacing: -0.02em; text-wrap: balance; } .hero-offer b { color: var(--yellow); } .hero-offer small { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--dark-ink-2); } .dark .formula { background: var(--dark-2); box-shadow: none; } .dark .formula p:not(.formula-h) { border-top-color: rgba(255, 255, 255, .12); } .dark .formula p span { background: var(--red); } .dark .formula p em { color: #fff; } .dark .formula p em b { color: var(--yellow); } .dark .formula .formula-h { color: var(--red-night); } .final .formula-end { margin: 0 0 30px; } .q3 { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; } .q3 li { background: var(--white); border-radius: 16px; padding: 14px 16px; box-shadow: 0 3px 10px rgba(20, 22, 30, .06); } .q3 .q3q { display: block; font-size: 19px; font-weight: 800; line-height: 1.4; } .q3 .q3q b { color: var(--red-text); font-size: 22px; } .q3 .q3a { display: block; margin-top: 4px; font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--ink-2); } .q3 .q3a small { display: block; font-size: 16px; color: var(--ink-3); margin-top: 2px; } .q3-sum { margin: 26px 0 10px; font-size: 20px; line-height: 1.5; font-weight: 800; color: var(--ink-2); text-wrap: balance; } #weekly .loop { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #weekly .loop li { position: relative; background: var(--dark-2); border-radius: 14px; padding: 12px 4px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; } #weekly .loop li b { width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-size: 16px; display: grid; place-items: center; } #weekly .loop li span { font-size: 16px; font-weight: 700; line-height: 1.4; color: #fff; text-align: center; } #weekly .loop li small { display: block; font-size: 16px; font-weight: 600; color: var(--dark-ink-2); } #weekly .weeks { margin: 22px 0 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; } #weekly .weeks i { font-style: normal; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 16px; font-weight: 800; color: var(--dark-ink-2); } #weekly .weeks i::before { content: "✓"; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--dark); font-size: 16px; font-weight: 900; display: grid; place-items: center; } #weekly .weeks-cap { margin: 10px 0 0; font-size: 18px; font-weight: 800; } #weekly .road { margin: 16px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; } #weekly .road span { font-size: 16px; font-weight: 800; color: var(--dark); background: #fff; border-radius: 999px; padding: 3px 12px; } #weekly .road span + span::before { content: "→ "; color: var(--red); } #weekly .fb { margin: 26px 0 0; background: var(--dark-2); border-radius: 18px; padding: 18px 16px; } #weekly .fb .fb-h { margin: 0 0 6px; font-size: 21px; font-weight: 900; color: var(--yellow); letter-spacing: -0.02em; } #weekly .fb p:not(.fb-h) { margin: 0; font-size: 19px; line-height: 1.5; font-weight: 800; color: #fff; } #weekly .fb small { display: block; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--dark-ink-2); } .taste { margin: 26px 0 0; background: var(--white); border: 2px dashed var(--red); border-radius: 20px; padding: 20px 16px 16px; text-align: left; } .taste > .pill { display: table; margin: 0 auto 10px; } .taste .taste-h { margin: 0 0 12px; font-size: 22px; line-height: 1.4; font-weight: 900; text-align: center; letter-spacing: -0.03em; } .taste-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .taste-list li { background: var(--gray); border-radius: 14px; padding: 12px 14px; } .taste-list li > b { display: block; font-size: 16px; font-weight: 800; color: var(--red-text); margin-bottom: 2px; } .taste-list li > span { display: block; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ink); } .taste-list .eqn { font-size: 19px; font-weight: 900; } .taste-list .say1 { display: inline-block !important; background: #FFE36E; border-radius: 14px 14px 14px 4px; padding: 6px 12px; font-size: 18px; font-weight: 800; } .taste-list small { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--ink-3); line-height: 1.5; } .taste .taste-cap { margin: 10px 0 0; font-size: 16px; color: var(--ink-3); text-align: center; } #weekly .loop { grid-template-columns: 1fr 1fr; gap: 8px; } #weekly .loop li { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; padding: 12px; text-align: left; } #weekly .loop li b { flex: none; } #weekly .loop li span { text-align: left; } #weekly .loop { grid-template-columns: 1fr; gap: 6px; } #weekly .loop li { padding: 10px 14px; } .cost { position: relative; margin: 34px 0 0; background: var(--white); border-radius: 20px; padding: 20px 14px 18px; box-shadow: var(--shadow); } .cost .cost-h { margin: 0 0 14px; font-size: 22px; line-height: 1.45; font-weight: 900; letter-spacing: -0.03em; text-wrap: balance; } .cost-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cost-grid li { background: var(--gray); border-radius: 14px; padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .cost-grid li .i3d { width: 44px; height: 44px; } .cost-grid li span { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--ink); text-align: center; } .cost .cost-fly { display: block; width: 72px; height: 72px; margin: 10px auto 0; } .cost .cost-f { margin: 6px 0 0; font-size: 22px; line-height: 1.45; font-weight: 900; letter-spacing: -0.03em; } .cost .cost-f .kbox { font-size: inherit; } .vs2 { margin: 34px 0 0; } .vs2 .vs2-h { margin: 0 0 14px; font-size: 24px; line-height: 1.4; font-weight: 900; letter-spacing: -0.03em; color: #fff; } .vs2-box { display: flex; gap: 12px; align-items: center; border-radius: 18px; padding: 14px 16px; text-align: left; } .vs2-box .i3d { flex: none; width: 52px; height: 52px; } .vs2-box b { display: block; font-size: 18px; font-weight: 900; margin-bottom: 4px; } .vs2-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .vs2-box li { font-size: 16px; font-weight: 700; line-height: 1.45; padding-left: 22px; position: relative; } .vs2-box.them { background: var(--dark-2); color: var(--dark-ink-2); } .vs2-box.them b { color: #fff; } .vs2-box.them li::before { content: "✕"; position: absolute; left: 0; color: #9AA0AB; font-weight: 900; } .vs2-box.us { background: #FFF0F0; color: var(--ink); border: 3px solid var(--red); } .vs2-box.us b { color: var(--red-text); } .vs2-box.us li::before { content: "✓"; position: absolute; left: 0; color: var(--red-text); font-weight: 900; } .vs2 .vs2-vs { margin: 8px 0; font-size: 22px; font-weight: 900; color: var(--yellow); letter-spacing: .04em; } .vs2 .vs2-f { margin: 18px 0 0; font-size: 24px; line-height: 1.45; font-weight: 900; color: #fff; letter-spacing: -0.03em; } .vs2 .vs2-f .kbox { font-size: inherit; } #stuck h2 { margin-bottom: 8px; } #stuck .stuck-sub { margin: 0 0 18px; font-size: 20px; font-weight: 800; color: var(--ink-2); } .bubbles { display: grid; gap: 12px; } .bubbles .bb { margin: 0; display: flex; align-items: center; gap: 10px; } .bubbles .bb.r { justify-content: flex-end; } .bubbles .bb .i3d { flex: none; width: 52px; height: 52px; } .bubbles .bb span { background: var(--gray); border-radius: 18px; padding: 10px 16px; font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--ink); } .bubbles .bb.l span { border-top-left-radius: 4px; } .bubbles .bb.r span { border-top-right-radius: 4px; background: #FFF0F0; } .trio { margin: 22px 0 0; background: var(--white); border: 3px solid var(--red); border-radius: 20px; padding: 16px 14px; box-shadow: var(--shadow); } .trio .i3d { width: 64px; height: 64px; display: block; margin: 0 auto 4px; } .trio .trio-eq { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--ink-2); } .trio .trio-eq b { color: var(--red-text); } .trio .trio-s { margin: 6px 0 0; font-size: 19px; line-height: 1.5; font-weight: 800; } .lockbox { margin: 30px 0 0; background: var(--dark); color: #fff; border-radius: 22px; padding: 24px 16px 20px; } .lockbox .lk-1 { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 900; } .lockbox .lk-2 { margin: 10px 0 0; font-size: 22px; line-height: 1.5; font-weight: 900; letter-spacing: -0.02em; } .lockbox .mk { color: var(--yellow); box-shadow: inset 0 -6px 0 rgba(255, 216, 77, .25); } .lockbox .lk-art { position: relative; width: 190px; height: 140px; margin: 14px auto 6px; } .lockbox .lk-laptop { position: absolute; left: 0; top: 0; width: 150px; height: 150px; } .lockbox .lk-lock { position: absolute; right: 0; bottom: 0; width: 76px; height: 76px; } .lockbox .lk-3 { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--dark-ink-2); } .lockbox .lk-3 .kw { color: var(--red-night); font-weight: 800; } #stuck .stuck-ans { margin: 30px 0 4px; font-size: 21px; font-weight: 900; } #stuck .q3 li { background: var(--gray); box-shadow: none; } @media (max-width: 340px) { .cost-grid { grid-template-columns: repeat(2, 1fr); } } .bubbles .bb .i3d, .vs2-box .i3d { margin: 0; display: block; } .bubbles .bb.l { justify-content: flex-start; } .poster > section, .poster > header { padding: 0; background: none; } .poster .sl { position: relative; padding: 58px 22px 54px; text-align: center; overflow: hidden; display: flex; flex-direction: column; align-items: center; color: var(--ink); } .poster .sl[data-bg="white"] { background: #fff; } .poster .sl[data-bg="gray"] { background: #F3F3F5; } .poster .sl[data-bg="yellow"] { background: var(--yellow); } .poster .sl[data-bg="red"] { background: var(--red); color: #fff; } .poster .sl[data-bg="dark"] { background: #222327; color: #fff; } .poster .sl[data-bg="black"] { background: #111214; color: #fff; } .poster .sl-pill { display: inline-block; margin: 0 0 16px; padding: 7px 16px; border-radius: 999px; font-size: 16px; font-weight: 800; line-height: 1.35; background: rgba(255,255,255,.14); color: #fff; } .poster .sl[data-bg="white"] .sl-pill, .poster .sl[data-bg="gray"] .sl-pill, .poster .sl[data-bg="yellow"] .sl-pill { background: #222327; color: #fff; } .poster .sl-pill.dark { background: #222327; color: #fff; } .poster .sl-pill.red { background: var(--red); color: #fff; } .poster .sl-pill.w { background: #fff; color: var(--red-text); } .poster .sl-pill.line { background: none; border: 2px solid rgba(255,255,255,.85); } .poster .sl-h { margin: 0; font-size: 38px; line-height: 1.22; font-weight: 900; letter-spacing: -0.045em; text-wrap: balance; word-break: keep-all; } .poster .sl-h.xl { font-size: 46px; } .poster .sl-h .ln { display: block; } .poster .mk { display: inline-block; background: var(--red); color: #fff; padding: 0 9px 2px; border-radius: 7px; line-height: 1.18; } .poster .sl[data-bg="red"] .mk, .poster .mk.w { background: #fff; color: var(--red-text); } .poster .sl[data-bg="yellow"] .mk { background: #222327; color: var(--yellow); } .poster .y { color: var(--yellow); } .poster .sl-s { margin: 18px 0 0; font-size: 20px; line-height: 1.5; font-weight: 700; letter-spacing: -0.02em; } .poster .sl-s.top { margin: 0 0 6px; } .poster .sl-s.gray { margin: 0 0 10px; color: #A9ACB6; } .poster .sl-s .mk { padding: 0 6px 1px; font-weight: 800; } .poster .cap { margin: 14px 0 0; display: inline-block; padding: 6px 14px; border-radius: 999px; background: #222327; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.4; } .poster .sl[data-bg="dark"] .cap, .poster .sl[data-bg="black"] .cap { background: rgba(255,255,255,.12); } .poster .art { display: block; height: auto; filter: drop-shadow(0 18px 22px rgba(0,0,0,.18)); } .poster .art.mid { width: 150px; margin: 6px auto 4px; } .poster .art.big { width: 300px; margin: 26px auto 6px; filter: drop-shadow(0 0 40px rgba(255,216,77,.28)) drop-shadow(0 18px 22px rgba(0,0,0,.4)); } .poster .cut { position: relative; margin: 26px auto 0; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.28); } .poster .cut img { display: block; width: 100%; height: auto; border-radius: 10px; } .poster .cut.tilt-l { transform: rotate(-2deg); } .poster .cut.tilt-r { transform: rotate(2deg); } .poster .cut.kakao { width: 100%; max-width: 340px; } .poster .cut.kakao .ring { position: absolute; left: 10%; top: 72%; width: 25%; aspect-ratio: 1.75; border: 4px solid var(--yellow); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,216,77,.25); } .poster .cut.pay { width: 300px; } .poster .cut.site { width: 200px; margin-top: 18px; } .poster .cut.book { width: 230px; padding: 6px; } .poster .dash3 { list-style: none; margin: 26px 0 0; padding: 0; width: 100%; display: grid; gap: 12px; } .poster .dash3 li { display: flex; align-items: center; gap: 14px; background: #fff; color: var(--ink); border: 3px dashed var(--red); border-radius: 18px; padding: 14px 16px; text-align: left; box-shadow: 0 10px 22px rgba(120,20,20,.18); } .poster .dash3 li img { width: 76px; height: 76px; object-fit: contain; flex: none; } .poster .dash3 small { display: block; font-size: 17px; font-weight: 800; color: var(--ink-2); } .poster .dash3 b { display: block; font-size: 26px; line-height: 1.25; font-weight: 900; letter-spacing: -0.04em; color: var(--red-text); } .poster .dash3 em { display: block; font-style: normal; font-size: 16px; font-weight: 700; color: var(--ink-3); margin-top: 2px; } .poster .big70 { margin: 0; font-size: 116px; line-height: 1; font-weight: 900; letter-spacing: -0.06em; color: var(--red-text); } .poster .big70.w { color: #fff; font-size: 40px; font-weight: 900; } .poster .big70.w b { font-size: 112px; color: var(--yellow); letter-spacing: -0.06em; } .poster .cond { margin: 14px 0 0; padding: 12px 16px; background: rgba(255,255,255,.7); border-radius: 14px; font-size: 16px; line-height: 1.55; font-weight: 700; color: var(--ink-2); } .poster .cost6 { position: relative; width: 100%; margin-top: 24px; } .poster .cost-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .poster .cost-grid li { background: #fff; border-radius: 18px; padding: 16px 8px 14px; box-shadow: 0 10px 24px rgba(20,22,30,.12); display: flex; flex-direction: column; align-items: center; gap: 8px; } .poster .cost-grid img { width: 84px; height: 84px; object-fit: contain; } .poster .cost-grid span { font-size: 19px; font-weight: 900; letter-spacing: -0.03em; } .poster .sl[data-bg="white"] .cost6 { background: #FFF1E6; border-radius: 22px; padding: 14px; } .poster .cost6 .fly { position: absolute; left: 50%; top: 50%; width: 128px; height: auto; transform: translate(-50%, -50%) rotate(-8deg); filter: drop-shadow(0 12px 16px rgba(0,0,0,.25)); } .poster .zero3 { width: 100%; margin-top: 16px; background: #111214; color: #fff; border-radius: 20px; padding: 16px 14px 18px; } .poster .zero3 > p { margin: 0; font-size: 18px; font-weight: 800; } .poster .zero3 ul { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; justify-content: center; gap: 22px; } .poster .zero3 li { display: flex; flex-direction: column; align-items: center; font-size: 17px; font-weight: 800; } .poster .zero3 li b { font-size: 58px; line-height: 1; color: #FF5A5A; font-weight: 900; } .poster .zero3 .z-f { margin-top: 8px; font-size: 19px; } .poster .num-big { margin: 26px 0 0; font-size: 62px; line-height: 1.05; font-weight: 900; letter-spacing: -0.05em; color: var(--yellow); } .poster .num-big small { display: block; font-size: 22px; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; } .poster .num-chip { margin: 22px 0 0; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border-radius: 18px; padding: 12px 16px; text-align: left; } .poster .num-chip img { width: 54px; height: auto; flex: none; } .poster .num-chip b { display: block; font-size: 24px; font-weight: 900; color: var(--yellow); } .poster .num-chip span { font-size: 16px; font-weight: 700; line-height: 1.4; } .poster .src { margin: 18px 0 0; font-size: 16px; line-height: 1.5; color: #A9ACB6; } .poster .src a { color: inherit; } .poster .grid4 { list-style: none; margin: 24px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .poster .grid4 li { background: #F3F3F5; border-radius: 18px; padding: 16px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .poster .grid4 img { width: 74px; height: 74px; object-fit: contain; } .poster .grid4 b { font-size: 19px; line-height: 1.3; font-weight: 900; letter-spacing: -0.03em; word-break: keep-all; } .poster .grid4 span { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink-3); word-break: keep-all; } .poster .bubbles3 { width: 100%; margin-top: 26px; display: grid; gap: 16px; } .poster .bq { margin: 0; display: flex; align-items: center; gap: 10px; } .poster .bq.r { justify-content: flex-end; } .poster .bq img { width: 70px; height: 70px; object-fit: contain; flex: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); } .poster .bq span { background: #fff; color: var(--ink); border-radius: 18px; padding: 13px 16px 12px; font-size: 21px; font-weight: 900; letter-spacing: -0.04em; text-align: left; box-shadow: 0 10px 22px rgba(100,10,10,.2); } .poster .bq em { display: block; font-style: normal; margin-top: 4px; font-size: 16px; font-weight: 800; color: var(--red-text); } .poster .chat-ill { width: 100%; max-width: 330px; margin: 26px auto 0; background: #fff; border-radius: 26px; padding: 20px 16px; box-shadow: 0 18px 40px rgba(20,22,30,.14); display: grid; gap: 12px; } .poster .cb { margin: 0; display: flex; align-items: flex-end; gap: 8px; } .poster .cb.me { justify-content: flex-end; } .poster .cb img { width: 42px; height: 42px; object-fit: contain; flex: none; } .poster .cb span { max-width: 80%; padding: 11px 15px; border-radius: 18px; font-size: 18px; font-weight: 700; line-height: 1.4; text-align: left; } .poster .cb.them span { background: #EEF0F3; color: var(--ink); border-bottom-left-radius: 6px; } .poster .cb.me span { background: #FF6F0F; color: #fff; border-bottom-right-radius: 6px; } .poster .flow-chips { margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; } .poster .flow-chips span { background: #fff; border-radius: 999px; padding: 6px 12px; box-shadow: 0 4px 10px rgba(20,22,30,.08); } .poster .flow-chips i { font-style: normal; color: var(--red-text); } .poster .flow-chips.dark span { background: rgba(255,255,255,.12); box-shadow: none; color: #fff; } .poster .flow-chips.dark i { color: var(--yellow); } .poster .eq-card { width: 100%; margin-top: 24px; background: #fff; border-radius: 22px; padding: 20px 16px 18px; box-shadow: 0 14px 30px rgba(120,90,0,.18); } .poster .eq-card .sl-pill { margin-bottom: 12px; } .poster .eq1 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -0.03em; } .poster .eq1 small { display: block; font-size: 16px; font-weight: 700; color: var(--ink-3); } .poster .eq2 { margin: 12px 0 0; font-size: 22px; font-weight: 800; } .poster .eq2 b { color: var(--red-text); } .poster .eq3 { margin: 8px 0 0; font-size: 24px; font-weight: 800; } .poster .eq3 b { display: inline-block; font-size: 40px; color: #fff; background: var(--red); border-radius: 8px; padding: 0 8px 2px; letter-spacing: -0.04em; } .poster .eq-tag { margin: 12px 0 0; font-size: 16px; font-weight: 700; color: var(--ink-3); } .poster #reviewList { width: 100%; margin-top: 22px; display: grid; gap: 12px; } .poster #reviewList .review { background: #fff; border: 3px solid var(--red); border-radius: 20px; padding: 16px 14px; text-align: center; box-shadow: none; } .poster #reviewList .review .free { display: block; font-size: 16px; font-weight: 800; color: var(--red-text); } .poster #reviewList .review p { margin: 6px 0 0; font-size: 20px; line-height: 1.45; font-weight: 900; letter-spacing: -0.03em; } .poster #reviewList .review small:empty { display: none; } .poster .fan3 { position: relative; width: 100%; height: 330px; margin-top: 26px; } .poster .fan3 img { position: absolute; top: 18px; width: 170px; height: auto; border-radius: 12px; border: 5px solid #fff; box-shadow: 0 14px 30px rgba(20,22,30,.22); } .poster .fan3 img:nth-child(1) { left: 2%; transform: rotate(-8deg); } .poster .fan3 img:nth-child(3) { right: 2%; transform: rotate(8deg); } .poster .fan3 img:nth-child(2) { left: 50%; top: 0; width: 196px; transform: translateX(-50%); z-index: 2; } .poster .num3 { margin: 6px 0 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .poster .num3 span { background: #222327; color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 16px; font-weight: 800; } .poster .b3d-stage.small { --H: 170px; height: 300px; width: 100%; margin: 20px 0 6px; } .poster .give5 { list-style: none; margin: 12px 0 0; padding: 0; width: 100%; display: grid; gap: 10px; } .poster .give5 li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 12px 14px; text-align: left; box-shadow: 0 8px 20px rgba(20,22,30,.08); } .poster .give5 li > img { width: 56px; height: 56px; object-fit: contain; flex: none; } .poster .give5 li > img.thumb { width: 46px; height: 60px; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.15); margin: 0 5px; } .poster .give5 b { display: block; font-size: 18px; line-height: 1.35; font-weight: 900; letter-spacing: -0.03em; } .poster .give5 b em { font-style: normal; color: var(--red-text); } .poster .give5 small { display: block; margin-top: 3px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--ink-3); } .poster .give5 .bonus { background: #FFF6D6; } .poster .fit2 { width: 100%; margin-top: 24px; display: grid; gap: 12px; } .poster .fit2 .fit { border-radius: 20px; padding: 16px 16px 14px; text-align: left; margin: 0; } .poster .fit2 .fit.no { background: #2E3036; color: #D9DBE1; } .poster .fit2 .fit.yes { background: #fff; color: var(--ink); } .poster .fit2 h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 900; } .poster .fit2 .no h3 { color: #FF7A7A; } .poster .fit2 .yes h3 { color: var(--red-text); } .poster .fit2 .ic { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 3; } .poster .fit2 ul { list-style: none; margin: 0; padding: 0; } .poster .fit2 li { font-size: 17px; line-height: 1.45; font-weight: 700; padding: 5px 0; border-top: 1px solid rgba(127,127,127,.18); } .poster .rb-main { margin: 10px 0 0; font-size: 20px; font-weight: 800; } .poster .rb3 { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; display: grid; gap: 8px; } .poster .rb3 li { background: #fff; color: var(--ink); border-radius: 16px; padding: 11px 14px; display: flex; gap: 12px; align-items: center; text-align: left; } .poster .rb3 b { flex: none; font-size: 18px; font-weight: 900; color: var(--red-text); } .poster .rb3 span { font-size: 16px; line-height: 1.45; font-weight: 700; } .poster .rb-base { margin: 14px 0 0; font-size: 16px; line-height: 1.5; font-weight: 700; color: #FFE1E1; } .poster .rb-won { margin: 12px 0 0; display: inline-block; background: var(--yellow); color: var(--ink); border-radius: 12px; padding: 8px 14px; font-size: 19px; font-weight: 900; } .poster .rb-note { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: #FFE1E1; font-weight: 600; } .poster .final .price-box { width: 100%; margin-top: 22px; } .poster .final .ask { margin: 16px 0 0; font-size: 17px; } .poster > header.hero { padding: 0 !important; background: none; } .poster .sl-s.muted { margin: 0 0 10px; color: #A9ACB6; background: none; } .poster .flow-chips { gap: 5px; font-size: 16px; } .poster .flow-chips span { padding: 6px 11px; } .poster .cost-grid li { padding: 12px 8px 10px; gap: 6px; } .poster .cost-grid img { width: 70px; height: 70px; } .poster .b3d-stage.small { height: 292px; } .poster .b3d-stage.small .b3d-books { transform: scale(.72); transform-origin: 50% 0; } .poster .give5 li { position: relative; } .poster .give5 li::before, .poster .give5 li::after { content: none; } .poster .give5 li > img { width: 48px; height: 48px; } .poster .give5 li > img.thumb { width: 40px; height: 52px; margin: 0 4px; } .poster .give5 .course-item { border: 3px solid var(--red); } .poster .give5 .course-item .btn-sub { margin-top: 10px; } .poster .fit2 .fit.no, .poster .fit2 .fit.yes { border: 0; margin: 0; } .poster .fit2 .fit.yes { border: 3px solid var(--red); } .poster .fit2 .fit li { display: block; margin: 0; } .poster .fit2 .fit.no li { color: #D9DBE1; } .poster .rb-base, .poster .rb-note { color: rgba(255,255,255,.92); } .poster > section, .poster > header, .poster #fit { padding: 0 !important; margin: 0 !important; background: none; } .poster .b3d-stage.small { height: 250px; margin: 16px 0 4px; } @media (max-width: 352px) { .poster .sl-h { font-size: 34px; } .poster .sl-h.xl { font-size: 42px; } .poster .grid4 b { font-size: 17px; } } @media (max-width: 330px) { .poster .sl-h { font-size: 31px; } .poster .sl-h.xl { font-size: 38px; } } .poster .blk { display: block; } .poster .cut.pay { width: min(300px, 88%); } @media (max-width: 352px) { .poster .dash3 b { font-size: 23px; } .poster .dash3 li img { width: 64px; height: 64px; } } .poster .sl[data-bg="red2"] { background: #D42A3C; color: #fff; } .poster .sl[data-bg="red2"] .mk { background: #fff; color: #D42A3C; } .poster .sl[data-bg="red2"] .rb3 b { color: #D42A3C; } .poster .sl[data-bg="red2"] .big70.w b { color: var(--yellow); } .poster .ul { background: linear-gradient(transparent 58%, rgba(255,216,77,.95) 58%, rgba(255,216,77,.95) 92%, transparent 92%); padding: 0 3px; } .poster .sl-h .ul { display: inline; } .poster .chip1 { margin: 18px 0 0; display: inline-block; background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 16px; font-size: 17px; font-weight: 800; line-height: 1.45; box-shadow: 0 6px 16px rgba(20,22,30,.08); } .poster .sl[data-bg="white"] .chip1 { background: #F3F3F5; box-shadow: none; } .poster .chip1 b { color: var(--red-text); } .poster .cut.kakao .ring { left: 9%; top: 77%; width: 22%; aspect-ratio: 2.3; } .poster .dash3.tag3 li { border: 0; } .poster .dash3.tag3 small { display: inline-block; background: var(--red); color: #fff; border-radius: 999px; padding: 1px 10px; font-size: 16px; margin-bottom: 4px; } .poster .tried3 { list-style: none; margin: 26px 0 0; padding: 0; width: 100%; display: grid; gap: 12px; } .poster .tried3 li { position: relative; background: #F3F3F5; border-radius: 18px; padding: 16px 92px 16px 18px; text-align: left; } .poster .tried3 b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; } .poster .tried3 span { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; color: var(--ink-3); } .poster .tried3 i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(-10deg); font-style: normal; font-size: 18px; font-weight: 900; color: var(--red-text); border: 3px solid var(--red); border-radius: 10px; padding: 4px 8px; background: #fff; } .poster .sl[data-bg="gray"] .cost6 { background: none; padding: 0; } .poster .cost-grid { gap: 14px; } .poster .fly2 { width: 104px; height: auto; margin: 10px auto -6px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.2)); } .poster .num-chip { justify-content: center; text-align: center; } .poster .art.big.box { width: 240px; } .poster .cb .pf { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #D5D8DE radial-gradient(circle at 50% 38%, #fff 0 22%, transparent 23%), #D5D8DE; position: relative; overflow: hidden; } .poster .cb .pf::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 26px; height: 22px; transform: translateX(-50%); border-radius: 50%; background: #fff; } .poster .cb span { max-width: 88%; } .poster .cb.me span { background: #E35A00; } .poster .cut.site.big { width: min(300px, 86%); } .poster .row3 { width: 100%; margin-top: 24px; display: flex; justify-content: center; gap: 8px; } .poster .row3 img { width: 32%; height: auto; border-radius: 10px; border: 4px solid #fff; box-shadow: 0 12px 24px rgba(120,90,0,.25); } .poster .row3 img:nth-child(1) { transform: rotate(-3deg); } .poster .row3 img:nth-child(3) { transform: rotate(3deg); } .poster .num3 { margin-top: 14px; } .poster .chips4 { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; } .poster .chips4 em { font-style: normal; background: var(--red-soft); color: var(--red-text); border-radius: 999px; padding: 2px 9px; font-size: 16px; font-weight: 800; } .poster .b3d-stage.small { --H: 220px; height: 268px; } .poster .b3d-stage.small .b3d-books { transform: scale(.62); transform-origin: 50% 0; } .img-mode .poster .src a { text-decoration: none; } .poster .b3d-stage.small { height: 236px; } .poster .cb .pf { display: block; background: radial-gradient(circle at 50% 36%, #fff 0 21%, transparent 22%), #C9CDD4; } .poster .cut.kakao .ring { top: 80%; width: 21%; aspect-ratio: 2.7; } .poster .sl-s.muted2 { margin: 26px 0 0; font-size: 24px; font-weight: 800; color: #B9BCC6; } .poster .money-big { margin: 4px 0 0; font-size: 64px; line-height: 1.1; font-weight: 900; letter-spacing: -0.05em; color: var(--yellow); } .poster .sl[data-bg="dark"] .art.mid { margin-top: 18px; filter: drop-shadow(0 0 30px rgba(255,216,77,.25)) drop-shadow(0 16px 20px rgba(0,0,0,.45)); } @media (max-width: 352px) { .poster .money-big { font-size: 56px; } } .poster .b3d-stage.small { --W: 178px; --H: 238px; --D: 24px; height: 300px; margin: 18px 0 6px; background: radial-gradient(60% 55% at 52% 48%, rgba(240,78,78,.30), rgba(240,78,78,0) 70%), #222327; } .poster .b3d-stage.small::after { background: radial-gradient(60% 40% at 50% 112%, rgba(0,0,0,.5), transparent 70%); } .poster .b3d-stage.small .b3d-books { transform: none; left: 0; right: 0; width: auto; margin-left: 0; height: 300px; } .poster .b3d-stage.small .b3d.two { display: none; } .poster .b3d-stage.small .b3d.one { left: 50%; right: auto; top: 30px; margin-left: calc(var(--W) / -2 + 12px); } .poster .b3d-stage.small .b3d.one .b3d-body { transform: perspective(1300px) rotateX(5deg) rotateY(28deg) rotateZ(-2deg); } .poster .b3d-stage.small .b3d .front.cover { background: #FBFBF9; } .poster .b3d-stage.small .b3d .spine { background: linear-gradient(180deg, #222327 0 28.6%, #D42A3C 28.6% 44.1%, #222327 44.1% 100%); } .poster .b3d-stage.small .b3d .spine .sp b { color: #fff; font-size: 10px; letter-spacing: 0; } .poster .b3d-stage.small .b3d .spine .sp s { color: var(--yellow); font-size: 7px; } .poster .b3d-stage.small .b3d .back { background: #F3F3F5; } .poster .b3d-stage.small { --W: 164px; --H: 220px; --D: 22px; height: 258px; margin: 14px 0 4px; } .poster .b3d-stage.small .b3d-books { height: 258px; } .poster .b3d-stage.small .b3d.one { top: 20px; } .poster .dash3.num3d li { gap: 12px; padding: 14px 12px 14px 14px; } .poster .dash3.num3d .no { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #222327; color: #fff; font-style: normal; font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; letter-spacing: 0; } .poster .dash3.num3d li > div { flex: 1; min-width: 0; } .poster .dash3.num3d li > img { width: 70px; height: 70px; } .poster .bubbles3.left .bq { justify-content: flex-start; } .poster .bubbles3.left .bq span { flex: 1; } .poster .dash3.num3d b { font-size: 23px; white-space: nowrap; } .poster .dash3.num3d li > img { width: 58px; height: 58px; } .poster .dash3.num3d .no { width: 36px; height: 36px; font-size: 15px; } @media (max-width: 352px) { .poster .dash3.num3d b { font-size: 20px; } .poster .dash3.num3d li > img { width: 48px; height: 48px; } } .poster .dash3.num3d .no { font-size: 16px; } @media (max-width: 352px) { .poster .bq img { width: 56px; height: 56px; } .poster .bq span { font-size: 19px; padding: 12px 13px 11px; } } .poster .main-item { position: relative; width: 100%; margin-top: 16px; background: #222327; color: #fff; border-radius: 22px; padding: 22px 18px 20px; box-shadow: 0 16px 34px rgba(20,22,30,.22); display: flex; flex-direction: column; align-items: center; } .poster .main-item .mi-tag { position: absolute; left: 16px; top: 16px; background: var(--yellow); color: #222327; border-radius: 999px; padding: 4px 12px; font-size: 16px; font-weight: 900; } .poster .main-item img { width: 150px; height: auto; margin-top: 18px; filter: drop-shadow(0 0 26px rgba(255,216,77,.28)) drop-shadow(0 12px 16px rgba(0,0,0,.45)); } .poster .main-item .mi-h { margin: 8px 0 0; font-size: 30px; line-height: 1.25; font-weight: 900; letter-spacing: -0.045em; } .poster .main-item .mi-s { margin: 10px 0 0; font-size: 18px; font-weight: 700; line-height: 1.45; } .poster .main-item .mi-s b { color: var(--yellow); } .poster .main-item .mi-s small { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: #B9BCC6; } .poster .sl[data-bg="yellow"] .main-item { margin-top: 26px; padding: 26px 18px 24px; } .poster .sl[data-bg="yellow"] .main-item img { width: 230px; margin-top: 24px; } .poster .sl[data-bg="yellow"] .main-item .mi-h { font-size: 34px; } .poster .sl[data-bg="yellow"] .main-item .mk { background: var(--red); color: #fff; } .poster .bill { position: relative; width: 100%; margin-top: 30px; background: #fff; border-radius: 16px 16px 0 0; padding: 20px 20px 30px; text-align: left; box-shadow: 0 14px 30px rgba(20,22,30,.12); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle 8px at 11px 100%, transparent 97%, #000) bottom / 22px 10px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle 8px at 11px 100%, transparent 97%, #000) bottom / 22px 10px repeat-x; } .poster .bill .bill-art { position: absolute; right: 8px; top: -30px; width: 108px; height: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.2)); } .poster .bill .bill-h { margin: 0 0 6px; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); padding-bottom: 12px; border-bottom: 2px dashed #D9D9E0; } .poster .bill ul { list-style: none; margin: 0; padding: 0; } .poster .bill li { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px dotted #D9D9E0; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; } .poster .bill li i { font-style: normal; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--red-soft); color: var(--red-text); font-size: 20px; font-weight: 900; display: flex; align-items: center; justify-content: center; line-height: 1; } .poster .bill .bill-f { margin: 12px 0 0; text-align: right; font-size: 18px; font-weight: 800; color: var(--ink-2); } .poster .bill .bill-f b { color: var(--red-text); font-size: 22px; } .poster .receipt { width: 100%; margin-top: 22px; background: #fff; border-radius: 20px; padding: 16px 16px 10px; box-shadow: 0 10px 24px rgba(20,22,30,.08); text-align: left; } .poster .receipt .rc-h { margin: 0 0 6px; font-size: 18px; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); } .poster .receipt ul { list-style: none; margin: 0; padding: 0; } .poster .receipt li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #EEEEF2; } .poster .receipt li img { width: 36px; height: 36px; object-fit: contain; flex: none; } .poster .receipt li b { flex: 1; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; } .poster .receipt li i { font-style: normal; background: var(--yellow); color: #222327; border-radius: 999px; padding: 2px 9px; font-size: 16px; font-weight: 900; } .poster .receipt li.key b { color: var(--red-text); font-size: 18px; } .poster .recap3 { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .poster .recap3 li { background: #222327; color: #fff; border-radius: 14px; padding: 10px 6px 11px; font-size: 16px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; word-break: keep-all; } .poster .recap3 small { display: block; font-size: 16px; color: var(--yellow); font-weight: 900; margin-bottom: 2px; } .poster .refund-chip { margin: 12px 0 0; display: inline-flex; align-items: center; gap: 8px; background: var(--yellow); color: #222327; border-radius: 999px; padding: 6px 16px 6px 8px; font-size: 18px; font-weight: 800; } .poster .refund-chip img { width: 34px; height: 34px; object-fit: contain; } .poster .refund-chip b { color: var(--red-text); } .poster .sl-s.top.big2 { font-size: 24px; font-weight: 900; } .poster .final .receipt { margin-top: 18px; padding: 14px 16px 8px; } .poster .final .receipt li { padding: 5px 0; } .poster .final .receipt li img { width: 32px; height: 32px; } .poster .final .recap3 { margin-top: 14px; } .poster .final .refund-chip { margin-top: 10px; } .poster .refund-chip { border-radius: 18px; padding: 8px 16px 8px 10px; text-align: left; line-height: 1.35; } .poster .refund-chip img { width: 38px; height: 38px; } .poster .recap3 li { white-space: nowrap; } .poster .bill-wrap { position: relative; width: 100%; margin-top: 30px; } .poster .bill-wrap .bill { margin-top: 0; } .poster .bill-wrap .bill-art { position: absolute; right: 8px; top: -30px; z-index: 2; width: 108px; height: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.2)); } .poster .bill li img { width: 40px; height: 40px; object-fit: contain; flex: none; margin-right: 12px; } .poster .bill li span { flex: 1; } .poster .bill li { padding: 6px 0; } .poster .sl-pill.line { background: #fff; color: var(--red-text); border: 0; } .poster .cut.site.big2 { width: min(340px, 94%); } .poster .zero3 .z-s { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: #C9CCD3; } .poster .eq-tag em { font-style: normal; background: #222327; color: #fff; border-radius: 999px; padding: 1px 9px; margin-right: 4px; font-weight: 900; } .poster #final .sl-h.xl .ln { display: block; } .poster #final .final-btn { margin-top: 22px; width: 100%; max-width: 320px; } .poster .b3d-stage.small { --W: 206px; --H: 276px; --D: 26px; height: 320px; } .poster .b3d-stage.small .b3d-books { height: 320px; } .poster .b3d-stage.small .b3d.one { top: 22px; } @media (max-width: 352px) { .poster .b3d-stage.small { --W: 180px; --H: 241px; height: 286px; } .poster .b3d-stage.small .b3d-books { height: 286px; } } @font-face{font-family:"Pretendard Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/fonts/PretendardVariable.woff2") format("woff2");} :root{--site-header-height:64px;--bar-height:100px} html{scroll-padding-top:calc(var(--site-header-height) + 20px)} body{background:#e9e9ee} body.modal-is-open{overflow:hidden} button{font-family:inherit} .skip-link{position:fixed;top:-100px;left:16px;z-index:100000;padding:12px 18px;background:#fff;color:#222327;border:2px solid #222327;border-radius:10px;font-size:16px} .skip-link:focus{top:12px} .site-header{position:sticky;top:0;z-index:60;background:rgba(34,35,39,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)} .site-header .site-header-inner{max-width:480px;min-height:64px;margin:auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px} .site-brand{text-decoration:none;font-size:20px;font-weight:900;letter-spacing:-.04em;white-space:nowrap} .site-brand span{color:var(--yellow)} .site-nav{display:flex;gap:15px;align-items:center;font-size:14px;font-weight:700;line-height:1.3} .site-nav a{text-decoration:none;white-space:nowrap} .site-nav a:hover{color:var(--yellow)} .site-header a:focus-visible,.site-footer a:focus-visible,.bar-contact:focus-visible{outline:3px solid var(--yellow);outline-offset:5px} .admin-bar .site-header{top:32px} main.page.poster{margin-top:0} .poster .btn-sub{cursor:pointer;font:inherit;font-size:18px;font-weight:800} .poster .course-included{display:inline-block;background:var(--red);color:#fff;padding:2px 8px;border-radius:999px;font-size:14px;white-space:nowrap;vertical-align:middle} .poster .sl-s.top{margin-bottom:10px} .poster .review p{margin-bottom:0} .poster .final .price-box{padding-bottom:18px} .connection-state{display:block;margin:16px 0 0;color:#636878;font-size:14px;font-weight:700;line-height:1.5;text-align:center} .poster #final .connection-state{color:#c9ccd3} .poster .final-contact{max-width:320px;width:100%;color:#fff;border-color:#aaaebb} .poster #final .final-btn{flex:none} .zoom-trigger{display:block;position:relative;width:100%;padding:0;margin:0;border:0;background:transparent;color:inherit;cursor:zoom-in} .zoom-trigger:focus-visible{outline:4px solid var(--red);outline-offset:5px} .zoom-trigger img{width:100%} .buybar .in{max-width:440px;gap:8px} .buybar .btn{padding-inline:15px;font-size:17px;min-height:50px} .buybar .info b{font-size:18px} .buybar .bar-state{display:block;margin:4px 0 0;text-align:left;font-size:11px;color:#636878} .bar-contact{background:#fff;border:1.5px solid #222327;border-radius:10px;font:inherit;font-size:16px;line-height:1.3;font-weight:800;text-decoration:none;color:#222327;min-height:50px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer} .site-footer{max-width:480px;margin:0 auto;background:#191b20;color:#bcc0ca;padding:30px 24px calc(30px + env(safe-area-inset-bottom));font-size:14px;line-height:1.7} .site-footer .footer-brand{color:#fff;font-size:20px;font-weight:900;margin:0 0 8px} .site-footer p{margin:0 0 8px} .site-footer .footer-links{margin:14px 0;display:flex;align-items:center;gap:20px} .site-footer a{text-decoration:underline;text-underline-offset:4px} .site-footer .footer-contact{font:inherit;color:#fff;background:transparent;padding:0;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer} .site-footer .copyright{margin:18px 0 0;font-size:12px;color:#8e95a3} .site-footer .connection-state{text-align:left;color:#aeb4c0} dialog{border:0;padding:0;max-width:calc(100vw - 32px);color:#222327;font:inherit} dialog::backdrop{background:rgba(15,16,20,.78);backdrop-filter:blur(3px)} .action-dialog{width:420px;border-radius:22px;box-shadow:0 24px 100px rgba(0,0,0,.35)} .dialog-inner{position:relative;padding:38px 26px 26px} .dialog-eyebrow{display:inline-block;margin:0 0 18px;padding:5px 11px;background:#fff2c1;color:#514000;border-radius:999px;font-size:14px;font-weight:800} .action-dialog h2{font-size:28px;line-height:1.35;margin:0 0 16px} .action-dialog p{font-size:16px;line-height:1.75;color:#4b5060;margin:0 0 18px} .action-dialog .dialog-close-btn{width:100%;padding:13px 18px;border:0;border-radius:12px;background:#222327;color:#fff;font:inherit;font-size:17px;font-weight:800;cursor:pointer} .dialog-close-icon{position:absolute;top:9px;right:12px;padding:7px 10px;line-height:1;background:transparent;border:0;font-size:28px;color:inherit;cursor:pointer} dialog button:focus-visible{outline:3px solid #d42a3c;outline-offset:4px} .proof-dialog{width:min(940px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border-radius:16px;background:#222327;color:#fff;overflow:auto} .proof-dialog .dialog-inner{padding:48px 18px 20px} .proof-dialog figure{margin:0} .proof-dialog img{max-width:100%;max-height:74dvh;width:auto;margin:auto;object-fit:contain} .proof-dialog figcaption{max-width:720px;margin:16px auto 0;font-size:14px;line-height:1.6;color:#dedfe6;text-align:center} .proof-dialog .dialog-close-icon{color:#fff} .content-shell{max-width:860px;margin:0 auto;background:#fff;padding:48px 28px 64px;min-height:70vh;overflow-wrap:anywhere} .content-shell h1{font-size:36px;line-height:1.4;margin:0 0 30px} .content-shell h2{font-size:27px;margin-top:32px} .content-shell article{margin:0 0 40px} .content-shell .post-meta{font-size:14px;color:#636878} .content-shell p{margin:0 0 18px} .content-shell ul,.content-shell ol{margin:0 0 18px;padding-left:24px;list-style:revert} .content-shell a{color:#b92f3d;text-underline-offset:3px} .content-shell table{border-collapse:collapse;max-width:100%;display:block;overflow:auto} .content-shell td,.content-shell th{padding:8px;border:1px solid #dedfe6} @media(min-width:900px){main.page.poster{box-shadow:0 20px 70px rgba(20,22,30,.18)}} @media(max-width:782px){.admin-bar .site-header{top:46px}} @media(max-width:600px){.admin-bar .site-header{top:0}} @media(max-width:380px){.site-header .site-header-inner{padding-inline:16px;gap:10px}.site-brand{font-size:18px}.site-nav{gap:11px;font-size:13px}.buybar{padding-inline:12px}.buybar .in{gap:7px}.buybar .btn{padding-inline:12px;font-size:16px}.bar-contact{padding-inline:10px;font-size:15px}.buybar .info b{font-size:17px}.buybar .info b .vat{font-size:13px}.buybar .bar-state{font-size:10px}.poster .connection-state{font-size:13px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important}}