{"id":9,"date":"2026-04-30T03:46:23","date_gmt":"2026-04-30T03:46:23","guid":{"rendered":"https:\/\/app.decktoon.com\/?p=9"},"modified":"2026-04-30T03:46:23","modified_gmt":"2026-04-30T03:46:23","slug":"9","status":"publish","type":"post","link":"https:\/\/app.decktoon.com\/?p=9","title":{"rendered":""},"content":{"rendered":"\n<style>\n    \/* 1. \uc6f9\ud3f0\ud2b8 \ubc0f \uae30\ubcf8 \ubcc0\uc218 *\/\n    @import url(\"https:\/\/cdn.jsdelivr.net\/gh\/orioncactus\/pretendard@v1.3.8\/dist\/web\/static\/pretendard.css\");\n\n    .deck-app-container {\n        --dt-primary: #ec4899; \/* \uba54\uc778 \ud551\ud06c *\/\n        --dt-secondary: #fbcfe8; \/* \uc5f0\ud55c \ud551\ud06c *\/\n        --dt-bg-sub: #fdf2f8; \/* \ubc30\uacbd \uc804\uccb4\uc5d0 \uae54\ub9ac\ub294 \uc5f0\ubd84\ud64d *\/\n        --dt-card-bg: #ffffff; \/* \uac1c\ubcc4 \uc139\uc158 \uce74\ub4dc\uc0c9 *\/\n        --dt-text: #111827;\n        --dt-gray: #6b7280;\n        \n        font-family: 'Pretendard', sans-serif;\n        background-color: var(--dt-bg-sub); \/* \ubc30\uacbd\uc744 \uc5f0\ud55c \ud551\ud06c\ub85c *\/\n        color: var(--dt-text);\n        max-width: 500px;\n        margin: 0 auto;\n        padding-bottom: 90px;\n        min-height: 100vh;\n        position: relative;\n        word-break: keep-all;\n    }\n\n    \/* \uacf5\ud1b5 \uc139\uc158 \uce74\ub4dc\ud654 \uc2a4\ud0c0\uc77c *\/\n    .app-card-section {\n        background: var(--dt-card-bg);\n        margin: 12px 15px; \/* \uc139\uc158 \uc0ac\uc774 \uac04\uaca9 *\/\n        padding: 20px 15px;\n        border-radius: 28px; \/* \uc544\uc8fc \ub465\uae00\ub465\uae00\ud558\uac8c *\/\n        box-shadow: 0 4px 15px rgba(236, 72, 153, 0.05); \/* \ubd80\ub4dc\ub7ec\uc6b4 \uadf8\ub9bc\uc790 *\/\n        border: 1px solid rgba(252, 231, 243, 0.5);\n    }\n\n    \/* \ucd08\uae30\ud654 *\/\n    .deck-app-container h2, .deck-app-container h3, .deck-app-container h4, .deck-app-container p { margin: 0; line-height: 1.4; }\n    .deck-app-container a { text-decoration: none; }\n\n    \/* 2. \uc0c1\ub2e8 \ud5e4\ub354 *\/\n    .app-header {\n        display: flex; justify-content: space-between; align-items: center;\n        padding: 15px 20px; position: sticky; top: 0; background: #fff; z-index: 100;\n        border-bottom: 1px solid #fce7f3;\n    }\n    .fake-logo {\n        font-size: 1.5em; font-weight: 900; font-style: italic;\n        background: linear-gradient(135deg, #ec4899, #f43f5e);\n        -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n    }\n    .app-header-icons { display: flex; gap: 15px; font-size: 1.2em; color: var(--dt-gray); }\n\n    \/* 3. \ubbf8\uc158 \uac8c\uc774\uc9c0 \uce74\ub4dc *\/\n    .reward-status { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n    .reward-status h4 { font-size: 1em; font-weight: 800; color: #111; }\n    .reward-status span { font-weight: 900; color: var(--dt-primary); font-size: 1.1em; }\n    .reward-progress-bar { height: 12px; background-color: #fce7f3; border-radius: 10px; overflow: hidden; }\n    .reward-progress-fill { height: 100%; width: 75%; background: linear-gradient(to right, #ec4899, #fb923c); border-radius: 10px; }\n\n    \/* 4. \uce74\ud14c\uace0\ub9ac (\uac00\ub85c \uc2a4\ud06c\ub864) *\/\n    .category-scroll { display: flex; overflow-x: auto; padding: 5px 15px 15px; gap: 8px; scrollbar-width: none; }\n    .category-scroll::-webkit-scrollbar { display: none; }\n    .cat-chip { white-space: nowrap; padding: 10px 20px; border-radius: 25px; background: #fff; font-size: 0.9em; font-weight: 700; color: var(--dt-gray); border: 1px solid #f3f4f6; cursor: pointer; }\n    .cat-chip.active { background: var(--dt-primary); color: #fff; border-color: var(--dt-primary); box-shadow: 0 4px 10px rgba(236,72,153,0.3); }\n\n    \/* 5. \uba54\uc778 \ucd94\ucc9c \ubc30\ub108 *\/\n    .main-banner {\n        height: 240px; border-radius: 28px;\n        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 50%), url('https:\/\/images.unsplash.com\/photo-1605806616949-1e87b487cb2a?q=80&w=800&auto=format&fit=crop') center\/cover;\n        display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; color: #fff;\n        margin-bottom: 5px;\n    }\n    .main-banner h2 { font-size: 1.5em; font-weight: 900; color: #fff; }\n    .main-banner p { margin-top: 5px; font-size: 0.9em; opacity: 0.9; font-weight: 500; }\n\n    \/* 6. \uc139\uc158 \ud5e4\ub354 *\/\n    .section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }\n    .section-head h3 { font-size: 1.2em; font-weight: 800; display: flex; align-items: center; gap: 6px; }\n    .section-head h3::before { content: ''; width: 4px; height: 16px; background: var(--dt-primary); border-radius: 2px; } \/* \ud3ec\uc778\ud2b8 \ubc14 *\/\n    .section-head a { font-size: 0.8em; color: var(--dt-primary); font-weight: 800; background: #fff1f2; padding: 4px 10px; border-radius: 10px; }\n\n    \/* 7. \uac00\ub85c \uc2a4\ud06c\ub864 \uce74\ub4dc *\/\n    .horizontal-list { display: flex; overflow-x: auto; gap: 12px; scrollbar-width: none; padding-bottom: 5px; }\n    .horizontal-list::-webkit-scrollbar { display: none; }\n    .horizontal-card { flex: 0 0 130px; }\n    .horizontal-card .thumb { width: 130px; height: 180px; border-radius: 20px; background-color: #f3f4f6; margin-bottom: 10px; overflow: hidden; position: relative; }\n    .horizontal-card .thumb img { width: 100%; height: 100%; object-fit: cover; }\n    .horizontal-card .reward-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #fff; padding: 3px 7px; border-radius: 8px; font-size: 0.7em; font-weight: 800; backdrop-filter: blur(4px); }\n    .horizontal-card h4 { font-size: 0.95em; font-weight: 800; margin-bottom: 2px; }\n    .horizontal-card p { font-size: 0.8em; color: var(--dt-gray); }\n\n    \/* 8. \uc138\ub85c \ub9ac\uc2a4\ud2b8 \uc544\uc774\ud15c *\/\n    .vertical-list { display: flex; flex-direction: column; gap: 12px; }\n    .list-item { display: flex; gap: 15px; align-items: center; padding: 10px; background: #fff; border-radius: 20px; border: 1px solid #fce7f3; }\n    .list-item .thumb { width: 65px; height: 65px; border-radius: 15px; overflow: hidden; }\n    .list-item .thumb img { width: 100%; height: 100%; object-fit: cover; }\n    .list-item .info h4 { font-size: 1em; font-weight: 800; }\n    .list-item .info p { margin-top: 3px; font-size: 0.8em; color: var(--dt-primary); font-weight: 700; }\n\n    \/* 9. \ub9c8\uc774\ud398\uc774\uc9c0 \ubbf8\ub2c8 \uce74\ub4dc *\/\n    .mypage-section { display: flex; align-items: center; gap: 12px; background: linear-gradient(to right, #fff, #fff1f2); }\n    .mypage-profile-img { width: 55px; height: 55px; border-radius: 50%; border: 2px solid var(--dt-primary); padding: 2px; background: #fff; }\n    .mypage-profile-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }\n    .mypage-info h4 { font-size: 1.1em; font-weight: 800; }\n    .mypage-info p { font-size: 0.85em; color: var(--dt-gray); font-weight: 600; margin-top: 2px; }\n\n    \/* 10. \ud558\ub2e8 \uace0\uc815 \ub124\ube44\uac8c\uc774\uc158 *\/\n    .bottom-nav {\n        position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 500px;\n        background: rgba(255,255,255,0.9); backdrop-filter: blur(15px); border-top: 1px solid #fce7f3;\n        display: flex; justify-content: space-around; padding: 10px 0 25px; z-index: 200;\n        border-radius: 25px 25px 0 0;\n    }\n    .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.7em; font-weight: 800; color: #9ca3af; }\n    .nav-item.active { color: var(--dt-primary); }\n    .nav-icon { font-size: 1.6em; }\n\n    @media screen and (max-width: 480px) {\n        .deck-app-container { font-size: 14px; }\n        .app-card-section { margin: 10px 12px; padding: 18px 12px; }\n        .main-banner { height: 210px; padding: 20px; }\n        .horizontal-card { flex: 0 0 115px; }\n        .horizontal-card .thumb { width: 115px; height: 160px; }\n    }\n<\/style>\n\n<div class=\"deck-app-container\">\n    <header class=\"app-header\">\n        <div class=\"fake-logo\">DECKTOON<\/div>\n        <div class=\"app-header-icons\">\n            <span>\ud83d\udd0d<\/span>\n            <span>\ud83d\udd14<\/span>\n        <\/div>\n    <\/header>\n    \n    <div class=\"category-scroll\">\n        <div class=\"cat-chip active\">\uc804\uccb4<\/div>\n        <div class=\"cat-chip\">\uc20f\ud3fc \ucf54\ubbf9\uc2a4<\/div>\n        <div class=\"cat-chip\">\uc2a4\ub9b4\ub7ec\/\uc561\uc158<\/div>\n        <div class=\"cat-chip\">\ub85c\ub9e8\uc2a4<\/div>\n        <div class=\"cat-chip\">\ub7ad\ud0b9<\/div>\n    <\/div>\n\n    <div class=\"app-card-section\">\n        <div class=\"reward-status\">\n            <h4>\uc624\ub298\uc758 \ubbf8\uc158 \ubcf4\uc0c1 \ud83c\udf81<\/h4>\n            <span>1,500P<\/span>\n        <\/div>\n        <div class=\"reward-progress-bar\">\n            <div class=\"reward-progress-fill\"><\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"app-card-section\" style=\"padding:0; overflow:hidden; border:none;\">\n        <section class=\"main-banner\">\n            <h2>\uc5b4\ub460 \uc18d \uad11\ub9e5\uc744 \uce90\ub294<br>\ub450\ub354\uc9c0 \uad11\uc0b0 \uc2dc\uc98c 1<\/h2>\n            <p>Deck \ud504\ub85c\uc81d\ud2b8 \ub3c5\uc810 \uc5f0\uc7ac \u2022 +50P \ubcf4\uc0c1<\/p>\n        <\/section>\n    <\/div>\n\n    <div class=\"app-card-section\">\n        <div class=\"section-head\">\n            <h3>\uc9c0\uae08 \ud56b\ud55c \ub371\ud230 \ud83d\udd25<\/h3>\n            <a href=\"#\">\uc804\uccb4\ubcf4\uae30<\/a>\n        <\/div>\n        <div class=\"horizontal-list\">\n            <div class=\"horizontal-card\">\n                <div class=\"thumb\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618336753974-aae8e04506aa?q=80&#038;w=300&#038;auto=format&#038;fit=crop\" alt=\"\">\n                    <div class=\"reward-badge\">+10P<\/div>\n                <\/div>\n                <h4>\uc5b8\ub354\ub3c5 \ud06c\ub8e8<\/h4>\n                <p>\ud310\ud0c0\uc9c0 \/ \uc561\uc158<\/p>\n            <\/div>\n            <div class=\"horizontal-card\">\n                <div class=\"thumb\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555580168-9de1a2d5e305?q=80&#038;w=300&#038;auto=format&#038;fit=crop\" alt=\"\">\n                    <div class=\"reward-badge\">+10P<\/div>\n                <\/div>\n                <h4>\ud799\ucc14\uc774 \ub450\ub354\uc9c0<\/h4>\n                <p>\uc77c\uc0c1 \/ \uac1c\uadf8<\/p>\n            <\/div>\n            <div class=\"horizontal-card\">\n                <div class=\"thumb\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1578632767115-351597cf2477?q=80&#038;w=300&#038;auto=format&#038;fit=crop\" alt=\"\">\n                    <div class=\"reward-badge\">+10P<\/div>\n                <\/div>\n                <h4>\uc5b4\ub460 \uc18d\uc758 \ub2e4\uc774\uc544<\/h4>\n                <p>\ub85c\ub9e8\uc2a4 \/ \uc2a4\ub9b4\ub7ec<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <div class=\"app-card-section mypage-section\">\n        <div class=\"mypage-profile-img\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1533738363-b7f9aef128ce?q=80&#038;w=150&#038;auto=format&#038;fit=crop\" alt=\"\">\n        <\/div>\n        <div class=\"mypage-info\">\n            <h4>DECK \ub514\ub809\ud130\ub2d8 \ud83d\udc51<\/h4>\n            <p>\uc624\ub298\uc758 \ubf51\uae30\uad8c\uc774 \ub3c4\ucc29\ud588\uc5b4\uc694! \ud83c\udfaf<\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"app-card-section\">\n        <div class=\"section-head\">\n            <h3>\ubc29\uae08 \uc62c\ub77c\uc628 \uc2e0\uc791 \ud83c\udd95<\/h3>\n        <\/div>\n        <div class=\"vertical-list\">\n            <div class=\"list-item\">\n                <div class=\"thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1606606011910-b98a7281e8b2?q=80&#038;w=150&#038;auto=format&#038;fit=crop\" alt=\"\"><\/div>\n                <div class=\"info\">\n                    <h4>\ud1a0\ud070 \ub9c8\uc2a4\ud130: \uc81c\ub85c<\/h4>\n                    <p>\u2b50 9.8 \u2022 1\ud654 \uc77d\uace0 \ud3ec\uc778\ud2b8 \ubc1b\uae30<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"list-item\">\n                <div class=\"thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541562232579-512a21360020?q=80&#038;w=150&#038;auto=format&#038;fit=crop\" alt=\"\"><\/div>\n                <div class=\"info\">\n                    <h4>\uc9c0\ud558\uc138\uacc4 \ucc44\uad74\ub2e8<\/h4>\n                    <p>\u2b50 9.5 \u2022 \ub3c5\uc810 \uc5f0\uc7ac<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <nav class=\"bottom-nav\">\n        <a href=\"#\" class=\"nav-item active\">\n            <span class=\"nav-icon\">\u2302<\/span>\n            <span>\ud648<\/span>\n        <\/a>\n        <a href=\"#\" class=\"nav-item\">\n            <span class=\"nav-icon\">\u2694\ufe0e<\/span>\n            <span>\ud0d0\uc0c9<\/span>\n        <\/a>\n        <a href=\"#\" class=\"nav-item\">\n            <span class=\"nav-icon\">\ud83c\udf81<\/span>\n            <span>\ubbf8\uc158<\/span>\n        <\/a>\n        <a href=\"#\" class=\"nav-item\">\n            <span class=\"nav-icon\">\ud83d\udc64<\/span>\n            <span>\ub9c8\uc774<\/span>\n        <\/a>\n    <\/nav>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>DECKTOON \ud83d\udd0d \ud83d\udd14 \uc804\uccb4 \uc20f\ud3fc \ucf54\ubbf9\uc2a4 \uc2a4\ub9b4\ub7ec\/\uc561\uc158 \ub85c\ub9e8\uc2a4 \ub7ad\ud0b9 \uc624\ub298\uc758 \ubbf8\uc158 \ubcf4\uc0c1 \ud83c\udf81 1,500P \uc5b4\ub460 \uc18d \uad11\ub9e5\uc744 \uce90\ub294\ub450\ub354\uc9c0 \uad11\uc0b0 \uc2dc\uc98c 1 Deck \ud504\ub85c\uc81d\ud2b8 \ub3c5\uc810 \uc5f0\uc7ac \u2022 +50P \ubcf4\uc0c1 \uc9c0\uae08 \ud56b\ud55c \ub371\ud230 \ud83d\udd25 \uc804\uccb4\ubcf4\uae30 +10P \uc5b8\ub354\ub3c5 \ud06c\ub8e8 \ud310\ud0c0\uc9c0 \/ \uc561\uc158 +10P \ud799\ucc14\uc774 \ub450\ub354\uc9c0 \uc77c\uc0c1 \/ \uac1c\uadf8 +10P \uc5b4\ub460 \uc18d\uc758 \ub2e4\uc774\uc544 \ub85c\ub9e8\uc2a4 \/ \uc2a4\ub9b4\ub7ec DECK \ub514\ub809\ud130\ub2d8 \ud83d\udc51 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/app.decktoon.com\/index.php?rest_route=\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/app.decktoon.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/app.decktoon.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/app.decktoon.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/app.decktoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":1,"href":"https:\/\/app.decktoon.com\/index.php?rest_route=\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/app.decktoon.com\/index.php?rest_route=\/wp\/v2\/posts\/9\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/app.decktoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app.decktoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app.decktoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}