\ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8 01\uac15 | \ud0d5\uc218\uc721 \uc18c\uc2a4 \ucc0d\uba39\uacfc \ubd80\uba39<\/title>\n<style>\n:root{\n --navy:#10233f;--navy-dark:#071426;--pink:#ef3f7d;--pink-dark:#c52d70;\n --pink-light:#fff0f6;--orange:#f97316;--green:#168a57;--blue:#2563eb;\n --ink:#111827;--muted:#64748b;--line:#dfe7f1;--white:#fff;\n --shadow:0 18px 50px rgba(16,35,63,.12)\n}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{\n margin:0;\n font-family:Pretendard,\"Noto Sans KR\",\"Apple SD Gothic Neo\",Arial,sans-serif;\n color:var(--ink);\n background:\n radial-gradient(circle at 8% 8%,rgba(255,143,177,.18),transparent 25%),\n radial-gradient(circle at 92% 12%,rgba(59,130,246,.11),transparent 25%),\n #f7f9fc\n}\nbutton,input,textarea,select{font:inherit}\nbutton{cursor:pointer}\na{text-decoration:none;color:inherit}\nbutton:focus-visible,a:focus-visible,textarea:focus-visible{\n outline:3px solid rgba(239,63,125,.32);outline-offset:3px\n}\n.topbar{\n position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);\n border-bottom:1px solid var(--line);backdrop-filter:blur(12px)\n}\n.topbar-inner{\n max-width:1180px;margin:auto;padding:14px 20px;\n display:flex;align-items:center;justify-content:space-between;gap:20px\n}\n.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--navy)}\n.logo{\n width:46px;height:46px;border-radius:15px;\n background:linear-gradient(135deg,#ef3f7d,#ff7aa8);\n display:grid;place-items:center;color:#fff;font-size:24px;\n box-shadow:0 8px 20px rgba(239,63,125,.25)\n}\n.brand-title{font-size:21px}\n.brand small{display:block;color:var(--muted);font-size:12px;margin-top:3px}\n.top-actions{display:flex;gap:10px}\n.top-btn{\n border:1px solid #d7dee8;background:#fff;color:var(--navy);\n border-radius:12px;padding:10px 14px;font-weight:900;\n box-shadow:0 5px 14px rgba(15,23,42,.06)\n}\n.top-btn.print{background:var(--pink);color:#fff;border-color:var(--pink)}\n.wrap{max-width:1180px;margin:auto;padding:34px 20px 80px}\n.hero{\n position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;\n gap:28px;background:linear-gradient(135deg,#bd2870,#e8447b 55%,#ff7195);\n border-radius:32px;padding:42px;color:#fff;box-shadow:var(--shadow)\n}\n.hero::before,.hero::after{\n content:\"\";position:absolute;border-radius:50%;background:rgba(255,255,255,.09)\n}\n.hero::before{width:260px;height:260px;right:-80px;top:-100px}\n.hero::after{width:190px;height:190px;left:44%;bottom:-110px}\n.hero-content,.hero-card{position:relative;z-index:2}\n.badge{\n display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);\n border:1px solid rgba(255,255,255,.28);padding:8px 14px;border-radius:999px;font-weight:900\n}\n.hero h1{\n font-size:clamp(32px,4.7vw,54px);line-height:1.22;margin:20px 0 16px;\n color:#fff;letter-spacing:-1.5px\n}\n.hero h1 span{display:block;margin:6px 0}\n.vs-text{color:#fff2a8;font-size:.72em}\n.hero p{font-size:18px;line-height:1.8;font-weight:700;margin:0;max-width:720px}\n.hero-card{\n background:#fff;color:var(--ink);border-radius:26px;padding:26px;\n box-shadow:0 18px 40px rgba(88,15,55,.18)\n}\n.hero-card h3{margin:0 0 18px;color:var(--navy);font-size:21px}\n.goal-list{display:grid;gap:14px}\n.goal-item{display:flex;gap:10px;align-items:flex-start;color:#334155;font-weight:800;line-height:1.55}\n.goal-check{\n flex:0 0 23px;width:23px;height:23px;border-radius:50%;\n background:#ffe2ed;color:var(--pink);display:grid;place-items:center;font-size:13px\n}\n.lesson-actions{\n display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0;\n padding:18px;background:#fff;border:1px solid #dbe3ed;border-radius:22px;box-shadow:var(--shadow)\n}\n.action-button{\n min-height:58px;border:2px solid #e1b5c8;border-radius:16px;\n padding:12px 18px;font-weight:900;transition:.2s\n}\n.action-button:hover,.btn:hover,.top-btn:hover{transform:translateY(-2px)}\n.action-reset,.action-save{background:#fff0f6;color:#5f2343}\n.action-print{background:#5f2343;color:#fff}\n.progress-box{\n background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);\n display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center\n}\n.progress-title{display:flex;align-items:center;gap:14px;margin-bottom:10px}\n.progress-title strong{color:var(--navy)}\n.progress-track{height:14px;background:#edf2f7;border-radius:999px;overflow:hidden}\n.progress-fill{\n height:100%;width:0;background:linear-gradient(90deg,#ef3f7d,#ffae5d);transition:.4s\n}\n.progress-text{font-weight:900;color:var(--pink);font-size:22px}\n.grid{display:grid;grid-template-columns:260px 1fr;gap:26px;margin-top:26px}\n.sidebar{\n position:sticky;top:92px;align-self:start;background:#fff;border-radius:24px;\n padding:18px;box-shadow:var(--shadow)\n}\n.side-title{\n display:flex;align-items:center;gap:8px;font-weight:900;color:var(--navy);\n padding:8px;margin-bottom:8px\n}\n.step-link{\n display:flex;gap:12px;align-items:center;padding:13px 12px;border-radius:14px;\n margin:7px 0;font-weight:800;color:#526175;transition:.2s\n}\n.step-link:hover,.step-link.active{background:#fff0f6;color:var(--pink-dark)}\n.num{\n width:31px;height:31px;border-radius:10px;background:#e9eef5;\n display:grid;place-items:center;font-weight:900\n}\n.step-link.active .num{background:var(--pink);color:#fff}\n.complete-guide{\n margin-top:24px;background:#fff8f1;border:1px solid #f8dcc7;\n border-radius:18px;padding:17px\n}\n.complete-guide h4{margin:0 0 12px;color:var(--navy)}\n.complete-guide p{margin:8px 0;color:#596579;font-size:14px;line-height:1.6}\n.content{display:grid;gap:24px}\n.lesson{\n background:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);scroll-margin-top:100px\n}\n.lesson-head{display:flex;gap:14px;margin-bottom:22px}\n.lesson-no{\n flex:0 0 46px;height:46px;border-radius:15px;display:grid;place-items:center;\n background:linear-gradient(135deg,#ef3f7d,#ff769d);\n color:#fff;font-size:22px;font-weight:900\n}\n.lesson h2{margin:3px 0 7px;color:var(--navy);font-size:25px;line-height:1.4}\n.desc{margin:0;color:var(--muted);line-height:1.7}\n.opinion-example{border:2px dashed #c9d9ef;border-radius:22px;padding:24px;background:#fbfdff}\n.flow-title{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}\n.flow-title div{\n text-align:center;padding:13px 8px;font-weight:900;border-bottom:2px dotted #c9d4e3;line-height:1.5\n}\n.flow-title div:nth-child(1){color:#d52d72}\n.flow-title div:nth-child(2){color:#e45b0b}\n.flow-title div:nth-child(3){color:#289a41}\n.flow-title div:nth-child(4){color:#2361d7}\n.color-paragraph{font-size:19px;line-height:2.05;font-weight:800;margin:0}\n.color-paragraph .pink{color:#d52d72}\n.color-paragraph .orange{color:#e45b0b}\n.color-paragraph .green{color:#289a41}\n.color-paragraph .blue{color:#2361d7}\n.teacher-tip{\n display:flex;gap:14px;align-items:center;margin-top:18px;padding:16px;\n border:1px solid #f4cdbc;background:#fffaf7;border-radius:16px\n}\n.pencil{\n flex:0 0 58px;width:58px;height:58px;border-radius:18px;\n display:grid;place-items:center;font-size:35px;background:#fff3ce\n}\n.teacher-tip p{margin:0;color:#4b5563;line-height:1.7;font-size:14px}\n.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.choice-card{\n position:relative;border:2px solid #e1e8f0;background:#fff;border-radius:22px;\n padding:22px;cursor:pointer;transition:.2s\n}\n.choice-card:hover{transform:translateY(-3px);border-color:#f59abb}\n.choice-card.selected{border-color:var(--pink);background:#fff1f6;box-shadow:0 10px 30px rgba(239,63,125,.15)}\n.choice-card input{position:absolute;opacity:0;pointer-events:none}\n.choice-icon{\n width:54px;height:54px;border-radius:18px;display:grid;place-items:center;\n font-size:29px;background:#fff2c8;margin-bottom:14px\n}\n.choice-card h3{margin:0 0 8px;color:var(--navy)}\n.choice-card p{margin:0;color:#64748b;line-height:1.65}\n.thought-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.thought-card{border:1px solid var(--line);border-radius:20px;padding:19px;background:#f8fbff}\n.thought-card h3{margin:0 0 12px;color:var(--navy);font-size:18px}\ntextarea{\n width:100%;min-height:150px;resize:vertical;border:2px solid #d8e0ea;\n border-radius:16px;padding:15px 16px;background:#fff;color:#111827;line-height:1.75\n}\ntextarea:focus{outline:3px solid rgba(239,63,125,.14);border-color:var(--pink)}\n.writing-paper{\n position:relative;border:7px solid #d6e4fb;border-radius:34px;padding:24px 28px;\n background:repeating-linear-gradient(to bottom,#fff 0,#fff 41px,#bad2ef 42px,#fff 43px)\n}\n.writing-paper::before{\n content:\"\u2713\";position:absolute;top:14px;left:22px;color:#ef4444;\n font-size:38px;transform:rotate(-8deg)\n}\n.writing-paper textarea{\n min-height:280px;border:0;background:transparent;padding:46px 8px 10px;\n font-size:18px;line-height:43px;resize:vertical\n}\n.writing-paper textarea:focus{outline:none}\n.word-bank{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}\n.word-chip{\n padding:9px 13px;border-radius:999px;background:#fff0f6;border:1px solid #e8b2c8;\n color:#7d3154;font-weight:900\n}\n.tip{\n background:#fff3f8;color:#51233c;border:1px solid #efc6d6;\n border-left:5px solid var(--pink);padding:16px 18px;border-radius:12px;line-height:1.75\n}\n.toolbar{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}\n.btn{border:0;border-radius:14px;padding:12px 17px;font-weight:900;transition:.2s}\n.btn-primary{background:var(--pink);color:#fff}\n.btn-light{background:#fff0f6;color:#642642;border:1px solid #e0adc3}\n.btn-blue{background:var(--blue);color:#fff}\n.btn-green{background:#139a62;color:#fff}\n.feedback{margin-top:14px;font-weight:900;min-height:24px;line-height:1.6}\n.ok{color:#168a57}.bad{color:#dc3f4f}\n.answer-reveal{\n margin-top:14px;padding:16px 18px;border-radius:14px;background:#fff1cc;\n border:2px solid #f59e0b;color:#4a2a00;font-weight:800;line-height:1.75\n}\n.char-info{display:flex;justify-content:flex-end;margin-top:9px;color:#64748b;font-weight:800}\n.result-panel{\n display:none;background:linear-gradient(135deg,#fff1cc,#ffe6f1);\n border-radius:22px;padding:22px;margin-top:18px\n}\n.result-score{font-size:32px;font-weight:900;color:#5f2343}\n.footer{background:var(--navy-dark);color:#dbe5f4;padding:34px 20px;margin-top:10px}\n.footer-inner{\n max-width:1180px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px\n}\n.footer-brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:20px}\n.toast{\n position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,30px);\n background:#4d2440;color:#fff;padding:13px 18px;border-radius:14px;opacity:0;\n pointer-events:none;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.2)\n}\n.toast.show{opacity:1;transform:translate(-50%,0)}\n@media(max-width:900px){\n .top-actions{display:none}.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr}\n .sidebar{position:static;display:flex;gap:8px;overflow-x:auto;padding:12px}\n .side-title,.complete-guide{display:none}.step-link{min-width:max-content}\n}\n@media(max-width:700px){\n .wrap{padding:22px 14px 60px}.hero{padding:28px 22px;border-radius:24px}\n .hero h1{font-size:32px}.lesson-actions{grid-template-columns:1fr}\n .progress-box{grid-template-columns:1fr}.choice-grid,.thought-grid,.flow-title{grid-template-columns:1fr}\n .lesson{padding:22px 17px;border-radius:22px}.lesson h2{font-size:21px}\n .color-paragraph{font-size:17px}.footer-inner{flex-direction:column;text-align:center}\n}\n@media print{\n body{background:#fff}.topbar,.sidebar,.toolbar,.progress-box,.toast,.lesson-actions{display:none!important}\n .wrap{max-width:none;padding:0}.hero{box-shadow:none;border:1px solid #ddd;color:#111;background:#fff}\n .hero h1,.hero p{color:#111}.grid{display:block}\n .lesson{box-shadow:none;border:1px solid #ddd;break-inside:avoid;margin-bottom:18px}\n .footer{display:none}\n}\n<\/style>\n<\/head>\n<body>\n\n<header class=\"topbar\">\n <div class=\"topbar-inner\">\n <div class=\"brand\">\n <div class=\"logo\">\ud83d\udcd6<\/div>\n <div><div class=\"brand-title\">\ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8<\/div><small>\ucd08\ub4f1\ud559\uc0dd\uc744 \uc704\ud55c \uc0dd\uac01\ud558\ub294 \uae00\uc4f0\uae30 \ud559\uc2b5<\/small><\/div>\n <\/div>\n <div class=\"top-actions\">\n <button type=\"button\" class=\"top-btn\" id=\"topResetBtn\">\ucc98\uc74c\ubd80\ud130 \u21ba<\/button>\n <button type=\"button\" class=\"top-btn\" id=\"topSaveBtn\">\ud559\uc2b5 \uc800\uc7a5 \u25a3<\/button>\n <button type=\"button\" class=\"top-btn print\" id=\"topPrintBtn\">\uc778\uc1c4 \/ PDF<\/button>\n <\/div>\n <\/div>\n<\/header>\n\n<main class=\"wrap\">\n<section class=\"hero\">\n <div class=\"hero-content\">\n <span class=\"badge\">01\uac15 \u00b7 \uc758\uacac \ube44\uad50\uc640 \uae00\uc4f0\uae30<\/span>\n <h1>\n <span>\ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/span>\n <span class=\"vs-text\">VS<\/span>\n <span>\ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/span>\n <\/h1>\n <p>\ub450 \uac00\uc9c0 \uc758\uacac\uc744 \ube44\uad50\ud558\uace0 \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 \uc815\ud574 \ubd05\ub2c8\ub2e4. \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \ucc28\ub840\ub300\ub85c \uc815\ub9ac\ud558\uc5ec \ub17c\ub9ac\uc801\uc778 \uae00\uc744 \uc644\uc131\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <aside class=\"hero-card\">\n <h3>\ud83c\udfaf \uc624\ub298\uc758 \ud559\uc2b5 \ubaa9\ud45c<\/h3>\n <div class=\"goal-list\">\n <div class=\"goal-item\"><span class=\"goal-check\">\u2713<\/span><span>\ub450 \uac00\uc9c0 \uc758\uacac\uc758 \ucc28\uc774\uc810\uc744 \uc774\ud574\ud569\ub2c8\ub2e4.<\/span><\/div>\n <div class=\"goal-item\"><span class=\"goal-check\">\u2713<\/span><span>\uc790\uc2e0\uc758 \uc758\uacac\uc744 \ubd84\uba85\ud558\uac8c \uc815\ud569\ub2c8\ub2e4.<\/span><\/div>\n <div class=\"goal-item\"><span class=\"goal-check\">\u2713<\/span><span>\uc758\uacac\uc744 \ub4b7\ubc1b\uce68\ud558\ub294 \uae4c\ub2ed\uc744 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/span><\/div>\n <div class=\"goal-item\"><span class=\"goal-check\">\u2713<\/span><span>\uc608\uc0c1\ub418\ub294 \ubb38\uc81c\uc640 \ud574\uacb0 \ubc29\ubc95\uc744 \uae00\ub85c \ud45c\ud604\ud569\ub2c8\ub2e4.<\/span><\/div>\n <\/div>\n <\/aside>\n<\/section>\n\n<section class=\"lesson-actions\">\n <button id=\"resetBtn\" type=\"button\" class=\"action-button action-reset\">\u21ba \ucc98\uc74c\ubd80\ud130<\/button>\n <button id=\"saveBtn\" type=\"button\" class=\"action-button action-save\">\u2713 \ud559\uc2b5 \uc800\uc7a5<\/button>\n <button id=\"printBtn\" type=\"button\" class=\"action-button action-print\">\u25a3 \uc778\uc1c4\u00b7PDF<\/button>\n<\/section>\n\n<section class=\"progress-box\">\n <div>\n <div class=\"progress-title\"><strong>\ud559\uc2b5 \uc9c4\ud589\ub960<\/strong><span>\uc804\uccb4 4\ub2e8\uacc4 \ud65c\ub3d9<\/span><\/div>\n <div class=\"progress-track\"><div id=\"progressFill\" class=\"progress-fill\"><\/div><\/div>\n <\/div>\n <div id=\"progressText\" class=\"progress-text\">0%<\/div>\n<\/section>\n\n<div class=\"grid\">\n<nav class=\"sidebar\">\n <div class=\"side-title\">\ud83d\udcd6 \ud559\uc2b5 \uc21c\uc11c<\/div>\n <a class=\"step-link active\" href=\"#step1\"><span class=\"num\">1<\/span>\uc758\uacac \ube44\uad50\uc640 \uc774\ud574<\/a>\n <a class=\"step-link\" href=\"#step2\"><span class=\"num\">2<\/span>\ub098\uc758 \uc758\uacac \uc815\ud558\uae30<\/a>\n <a class=\"step-link\" href=\"#step3\"><span class=\"num\">3<\/span>\uae4c\ub2ed\uacfc \ubb38\uc81c \uc0dd\uac01\ud558\uae30<\/a>\n <a class=\"step-link\" href=\"#step4\"><span class=\"num\">4<\/span>\ub0b4 \uc0dd\uac01 \uae00\ub85c \uc4f0\uae30<\/a>\n <div class=\"complete-guide\">\n <h4>\ud83c\udfc6 \ud559\uc2b5 \uc644\ub8cc \uc870\uac74<\/h4>\n <p>\u2713 \ubaa8\ub4e0 \ub2e8\uacc4\ub97c \uc644\ub8cc\ud569\ub2c8\ub2e4.<\/p>\n <p>\u2713 \ucd5c\uc885 \uae00\uc744 120\uc790 \uc774\uc0c1 \uc501\ub2c8\ub2e4.<\/p>\n <p>\u2713 \uc758\uacac\uacfc \uae4c\ub2ed\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n<\/nav>\n\n<div class=\"content\">\n<section class=\"lesson\" id=\"step1\">\n <div class=\"lesson-head\"><div class=\"lesson-no\">1<\/div><div><h2>\ub450 \uac00\uc9c0 \uc758\uacac\uc744 \uc77d\uace0 \uae00\uc758 \ud750\ub984\uc744 \uc0b4\ud3b4\ubcf4\uc138\uc694.<\/h2><p class=\"desc\">\uc758\uacac, \uae4c\ub2ed, \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc774 \uc5b4\ub5bb\uac8c \uc774\uc5b4\uc9c0\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/p><\/div><\/div>\n <div class=\"opinion-example\">\n <div class=\"flow-title\">\n <div>\ub098\uc758 \uc758\uacac\uc740?<\/div><div>\uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294<br>\uae4c\ub2ed\uc740 \ubb34\uc5c7\uc77c\uae4c?<\/div>\n <div>\uadf8\ub807\uac8c \ub418\uba74<br>\ubb38\uc81c\ub294 \uc5c6\uc744\uae4c?<\/div><div>\uadf8 \ubb38\uc81c\ub294 \uc5b4\ub5bb\uac8c<br>\ud574\uacb0\ud560\uae4c?<\/div>\n <\/div>\n <p class=\"color-paragraph\">\n <span class=\"pink\">\ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/span>\n <span class=\"orange\">\uadf8\ub798\uc57c \ucc0d\uc5b4 \uba39\ub294 \uc7ac\ubbf8\uac00 \uc788\ub2e4. \uc18c\uc2a4\ub97c \ub9ce\uc774 \ucc0d\uc73c\uba74 \ub9db\uc788\ub2e4.<\/span>\n <span class=\"green\">\ubd80\uba39\uc740 \uc18c\uc2a4\ub97c \uc870\uc808\ud560 \uc218 \uc5c6\ub2e4. \ucc0d\uc5b4 \uba39\uc73c\uba74 \uc785\ucc9c\uc7a5\uc774 \uae4c\uc9c8 \uc218\ub3c4 \uc788\ub2e4.<\/span>\n <span class=\"blue\">\ud558\uc9c0\ub9cc \uc57d\uc744 \ubc14\ub974\uba74 \ub41c\ub2e4.<\/span>\n <\/p>\n <\/div>\n <div class=\"teacher-tip\"><div class=\"pencil\">\u270f\ufe0f<\/div><p>\ub450 \uac00\uc9c0 \uc758\uacac \uc911 \uc790\uc2e0\uc758 \uc758\uacac\uc744 \ud558\ub098 \uc815\ud55c \ub4a4 \uadf8 \ubb38\uc7a5\uc73c\ub85c \uc2dc\uc791\ud574 \ubcf4\uc138\uc694. \uc758\uacac\uacfc \uae4c\ub2ed, \ubb38\uc81c\uc640 \ud574\uacb0 \ubc29\ubc95\uc744 \uc11c\ub85c \ub2e4\ub978 \uc0c9\uc73c\ub85c \uad6c\ubd84\ud558\uba74 \uae00\uc758 \ud750\ub984\uc744 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p><\/div>\n <div id=\"fb1\" class=\"feedback\" aria-live=\"polite\"><\/div>\n <div id=\"ans1\" class=\"answer-reveal\" hidden>\uae00\uc758 \ud750\ub984\uc740 <strong>\ub098\uc758 \uc758\uacac \u2192 \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed \u2192 \uc608\uc0c1\ub418\ub294 \ubb38\uc81c \u2192 \ud574\uacb0 \ubc29\ubc95<\/strong>\uc758 \uc21c\uc11c\uc785\ub2c8\ub2e4.<\/div>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn btn-light\" id=\"step1HintBtn\">\ud78c\ud2b8 \ubcf4\uae30<\/button>\n <button type=\"button\" class=\"btn btn-primary\" id=\"step1CompleteBtn\">\ub0b4\uc6a9 \uc774\ud574 \uc644\ub8cc<\/button>\n <\/div>\n<\/section>\n\n<section class=\"lesson\" id=\"step2\">\n <div class=\"lesson-head\"><div class=\"lesson-no\">2<\/div><div><h2>\ud0d5\uc218\uc721\uc744 \uba39\ub294 \ubc29\ubc95\uc5d0 \ub300\ud55c \uc790\uc2e0\uc758 \uc758\uacac\uc744 \uc815\ud574 \ubcf4\uc138\uc694.<\/h2><p class=\"desc\">\ub450 \uac00\uc9c0 \uc758\uacac \uac00\uc6b4\ub370 \uc790\uc2e0\uc758 \uc0dd\uac01\uacfc \ub354 \uac00\uae4c\uc6b4 \uc758\uacac\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/p><\/div><\/div>\n <div class=\"choice-grid\">\n <label class=\"choice-card\" id=\"choiceDip\">\n <input type=\"radio\" name=\"opinion\" value=\"\ucc0d\uba39\">\n <div class=\"choice-icon\">\ud83e\udd62<\/div><h3>\uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/h3>\n <p>\ud0d5\uc218\uc721\uc758 \ubc14\uc0ad\ud55c \uc2dd\uac10\uc744 \uc720\uc9c0\ud560 \uc218 \uc788\uace0, \uba39\uace0 \uc2f6\uc740 \ub9cc\ud07c \uc18c\uc2a4\uc758 \uc591\uc744 \uc870\uc808\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n <\/label>\n <label class=\"choice-card\" id=\"choicePour\">\n <input type=\"radio\" name=\"opinion\" value=\"\ubd80\uba39\">\n <div class=\"choice-icon\">\ud83e\udd63<\/div><h3>\uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/h3>\n <p>\ud0d5\uc218\uc721 \uc804\uccb4\uc5d0 \uc18c\uc2a4\uac00 \uace8\uace0\ub8e8 \ubb3b\uace0, \ubd80\ub4dc\ub7fd\uace0 \ucd09\ucd09\ud55c \ub9db\uc744 \uc990\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n <\/label>\n <\/div>\n <div style=\"margin-top:18px\">\n <textarea id=\"opinionReason\" placeholder=\"\uc120\ud0dd\ud55c \uc758\uacac\uc744 \ud55c \ubb38\uc7a5\uc73c\ub85c \uc4f0\uace0, \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed\uc744 60\uc790 \uc774\uc0c1 \uc368 \ubcf4\uc138\uc694.\"><\/textarea>\n <div class=\"char-info\"><span id=\"reasonCount\">0\uc790<\/span><\/div>\n <\/div>\n <div id=\"fb2\" class=\"feedback\" aria-live=\"polite\"><\/div>\n <div id=\"ans2\" class=\"answer-reveal\" hidden><\/div>\n <div class=\"toolbar\"><button type=\"button\" class=\"btn btn-primary\" id=\"step2CheckBtn\">\uc758\uacac \ud655\uc778<\/button><\/div>\n<\/section>\n\n<section class=\"lesson\" id=\"step3\">\n <div class=\"lesson-head\"><div class=\"lesson-no\">3<\/div><div><h2>\ub098\uc758 \uc758\uacac\uc744 \ub4b7\ubc1b\uce68\ud558\ub294 \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c\ub97c \uc0dd\uac01\ud574 \ubcf4\uc138\uc694.<\/h2><p class=\"desc\">\uc88b\uc740 \uc810\ub9cc \uc4f0\uc9c0 \uc54a\uace0 \ubc18\ub300\ucabd\uc5d0\uc11c \uc81c\uae30\ud560 \uc218 \uc788\ub294 \ubb38\uc81c\uc640 \ud574\uacb0 \ubc29\ubc95\ub3c4 \ud568\uaed8 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/p><\/div><\/div>\n <div class=\"thought-grid\">\n <div class=\"thought-card\"><h3>\u2460 \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed<\/h3><textarea id=\"whyText\" placeholder=\"\uc608: \uc18c\uc2a4\ub97c \ucc0d\uc5b4 \uba39\uc73c\uba74 \ud0d5\uc218\uc721\uc758 \ubc14\uc0ad\ud55c \uc2dd\uac10\uc744 \uc624\ub798 \uc720\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\"><\/textarea><\/div>\n <div class=\"thought-card\"><h3>\u2461 \uadf8\ub807\uac8c \uba39\uc744 \ub54c \uc0dd\uae38 \uc218 \uc788\ub294 \ubb38\uc81c<\/h3><textarea id=\"problemText\" placeholder=\"\uc608: \uc18c\uc2a4\ub97c \ub530\ub85c \ub2f4\uc544\uc57c \ud558\ubbc0\ub85c \uadf8\ub987\uc774 \ub354 \ud544\uc694\ud558\uace0 \ubc88\uac70\ub85c\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\"><\/textarea><\/div>\n <div class=\"thought-card\"><h3>\u2462 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub294 \ubc29\ubc95<\/h3><textarea id=\"solutionText\" placeholder=\"\uc608: \uc791\uc740 \uc18c\uc2a4 \uadf8\ub987\uc744 \uc900\ube44\ud558\uac70\ub098 \ud55c \uc811\uc2dc\uc758 \ud55c\ucabd\uc5d0 \uc18c\uc2a4\ub97c \ub2f4\uc73c\uba74 \ub429\ub2c8\ub2e4.\"><\/textarea><\/div>\n <div class=\"thought-card\"><h3>\u2463 \uc0c1\ub300 \uc758\uacac\ub3c4 \uc774\ud574\ud574 \ubcf4\uae30<\/h3><textarea id=\"otherText\" placeholder=\"\uc608: \ubd80\uc5b4 \uba39\uc73c\uba74 \uc18c\uc2a4\uac00 \uace8\uace0\ub8e8 \ubb3b\uc5b4 \ubd80\ub4dc\ub7ec\uc6b4 \ub9db\uc744 \uc990\uae38 \uc218 \uc788\ub2e4\ub294 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4.\"><\/textarea><\/div>\n <\/div>\n <div id=\"fb3\" class=\"feedback\" aria-live=\"polite\"><\/div>\n <div id=\"ans3\" class=\"answer-reveal\" hidden>\n <strong>\uc608\uc2dc<\/strong><br>\n \uae4c\ub2ed: \ucc0d\uc5b4 \uba39\uc73c\uba74 \ubc14\uc0ad\ud55c \uc2dd\uac10\uc774 \uc624\ub798 \uc720\uc9c0\ub418\uace0 \uc18c\uc2a4\uc758 \uc591\uc744 \uc870\uc808\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>\n \ubb38\uc81c: \uc18c\uc2a4\ub97c \ub530\ub85c \ub2f4\uc544\uc57c \ud558\ubbc0\ub85c \uadf8\ub987\uc774 \ub354 \ud544\uc694\ud569\ub2c8\ub2e4.<br>\n \ud574\uacb0 \ubc29\ubc95: \uc791\uc740 \uc18c\uc2a4 \uadf8\ub987\uc744 \uc900\ube44\ud558\uac70\ub098 \uc811\uc2dc \ud55c\ucabd\uc5d0 \uc18c\uc2a4\ub97c \ub2f4\uc2b5\ub2c8\ub2e4.<br>\n \uc0c1\ub300 \uc758\uacac \uc774\ud574: \ubd80\uc5b4 \uba39\uc73c\uba74 \uc18c\uc2a4\uac00 \uace8\uace0\ub8e8 \ubb3b\uace0 \ubd80\ub4dc\ub7ec\uc6b4 \ub9db\uc744 \uc990\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/div>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn btn-light\" id=\"step3ExampleBtn\">\uc608\uc2dc \ub2f5\uc548 \ubcf4\uae30<\/button>\n <button type=\"button\" class=\"btn btn-primary\" id=\"step3CheckBtn\">\uc0dd\uac01 \uc815\ub9ac \uc644\ub8cc<\/button>\n <\/div>\n<\/section>\n\n<section class=\"lesson\" id=\"step4\">\n <div class=\"lesson-head\"><div class=\"lesson-no\">4<\/div><div><h2>\ud0d5\uc218\uc721 \uc18c\uc2a4\uc5d0 \ub300\ud55c \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 \ud55c \ud3b8\uc758 \uae00\ub85c \uc644\uc131\ud574 \ubcf4\uc138\uc694.<\/h2><p class=\"desc\">\uc790\uc2e0\uc758 \uc758\uacac\uc73c\ub85c \uc2dc\uc791\ud558\uace0, \ub450 \uac00\uc9c0 \uc774\uc0c1\uc758 \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/p><\/div><\/div>\n <div class=\"word-bank\">\n <span class=\"word-chip\">\ubc14\uc0ad\ud55c \uc2dd\uac10<\/span><span class=\"word-chip\">\ubd80\ub4dc\ub7ec\uc6b4 \ub9db<\/span>\n <span class=\"word-chip\">\uc18c\uc2a4\uc758 \uc591<\/span><span class=\"word-chip\">\uac1c\uc778\uc758 \ucde8\ud5a5<\/span>\n <span class=\"word-chip\">\uace8\uace0\ub8e8 \ubb3b\ub2e4<\/span><span class=\"word-chip\">\ud574\uacb0 \ubc29\ubc95<\/span>\n <\/div>\n <div class=\"tip\"><strong>\uae00\uc4f0\uae30 \ub3c4\uc6c0\ub9d0<\/strong><br>\n \u2460 \ub098\uc758 \uc758\uacac\uc744 \uccab \ubb38\uc7a5\uc5d0 \ubd84\uba85\ud558\uac8c \uc501\ub2c8\ub2e4.<br>\n \u2461 \u201c\uccab\uc9f8\u201d, \u201c\ub458\uc9f8\u201d\ub97c \uc0ac\uc6a9\ud574 \uae4c\ub2ed\uc744 \ub098\ub204\uc5b4 \uc501\ub2c8\ub2e4.<br>\n \u2462 \uc608\uc0c1\ub418\ub294 \ubb38\uc81c\ub97c \uc0dd\uac01\ud558\uace0 \ud574\uacb0 \ubc29\ubc95\uc744 \uc81c\uc2dc\ud569\ub2c8\ub2e4.<br>\n \u2463 \ub9c8\uc9c0\ub9c9\uc5d0\ub294 \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 \ub2e4\uc2dc \ud55c\ubc88 \uc815\ub9ac\ud569\ub2c8\ub2e4.\n <\/div>\n <div class=\"writing-paper\" style=\"margin-top:18px\"><textarea id=\"finalEssay\" placeholder=\"\uc5ec\uae30\uc5d0 \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 120\uc790 \uc774\uc0c1 \uc368 \ubcf4\uc138\uc694.\"><\/textarea><\/div>\n <div class=\"char-info\"><span id=\"essayCount\">0\uc790<\/span><\/div>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn btn-light\" id=\"guideBtn\">\uae00\uc4f0\uae30 \ud2c0 \ub123\uae30<\/button>\n <button type=\"button\" class=\"btn btn-blue\" id=\"bringBtn\">\uc0dd\uac01 \uac00\uc838\uc624\uae30<\/button>\n <button type=\"button\" class=\"btn btn-green\" id=\"finishBtn\">\ud559\uc2b5 \uc644\ub8cc<\/button>\n <\/div>\n <div id=\"resultPanel\" class=\"result-panel\"><div id=\"scoreText\" class=\"result-score\">\ud559\uc2b5 \uc644\ub8cc<\/div><p id=\"resultMsg\"><\/p><\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/main>\n\n<footer class=\"footer\">\n <div class=\"footer-inner\">\n <div class=\"footer-brand\"><div class=\"logo\">\ud83d\udcd6<\/div><span>\ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8<\/span><\/div>\n <div>\ucd08\ub4f1\ud559\uc0dd\uc744 \uc704\ud55c \uc0dd\uac01\ud558\uace0 \ud45c\ud604\ud558\ub294 \uae00\uc4f0\uae30 \ud559\uc2b5<\/div>\n <div>\ubcf8 \ud559\uc2b5 \ucf58\ud150\uce20\ub294 \uad50\uc721 \ubaa9\uc801\uc73c\ub85c \uc81c\uc791\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/div>\n <\/div>\n<\/footer>\n\n<div id=\"toast\" class=\"toast\" role=\"status\" aria-live=\"polite\">\ud559\uc2b5 \ub0b4\uc6a9\uc774 \uc800\uc7a5\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/div>\n\n<script>\n(function(){\n\"use strict\";\n\nconst STORAGE_KEY = \"elementaryEssaySchool_tangsuyuk_lesson01_v2\";\nlet completed = {step1:false,step2:false,step3:false,step4:false};\n\nconst $ = (id) => document.getElementById(id);\nconst progressFill = $(\"progressFill\");\nconst progressText = $(\"progressText\");\nconst toastBox = $(\"toast\");\n\nfunction showToast(message){\n toastBox.textContent = message;\n toastBox.classList.add(\"show\");\n window.clearTimeout(showToast.timer);\n showToast.timer = window.setTimeout(() => toastBox.classList.remove(\"show\"), 1800);\n}\n\nfunction updateProgress(){\n const count = Object.values(completed).filter(Boolean).length;\n const percent = count * 25;\n progressFill.style.width = percent + \"%\";\n progressText.textContent = percent + \"%\";\n}\n\nfunction setFeedback(id, message, ok){\n const el = $(id);\n el.className = \"feedback \" + (ok ? \"ok\" : \"bad\");\n el.textContent = message;\n}\n\nfunction setChoiceVisual(){\n $(\"choiceDip\").classList.remove(\"selected\");\n $(\"choicePour\").classList.remove(\"selected\");\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n if(!selected) return;\n (selected.value === \"\ucc0d\uba39\" ? $(\"choiceDip\") : $(\"choicePour\")).classList.add(\"selected\");\n}\n\nfunction showStep1Hint(){\n const el = $(\"fb1\");\n el.className = \"feedback\";\n el.textContent = \"\ud78c\ud2b8: \uc790\uc2e0\uc758 \uc758\uacac\uc744 \uba3c\uc800 \ub9d0\ud55c \ub4a4, \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \ucc28\ub840\ub300\ub85c \uc124\uba85\ud569\ub2c8\ub2e4.\";\n}\n\nfunction completeStep1(){\n $(\"ans1\").hidden = false;\n setFeedback(\"fb1\",\"\uc758\uacac\uc744 \uc124\uba85\ud558\ub294 \uae00\uc758 \uae30\ubcf8 \ud750\ub984\uc744 \ud655\uc778\ud588\uc2b5\ub2c8\ub2e4.\",true);\n completed.step1 = true;\n updateProgress();\n showToast(\"1\ub2e8\uacc4\ub97c \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction checkStep2(){\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n const text = $(\"opinionReason\").value.trim();\n if(!selected){\n setFeedback(\"fb2\",\"\uba3c\uc800 \ucc0d\uc5b4 \uba39\uae30\uc640 \ubd80\uc5b4 \uba39\uae30 \uac00\uc6b4\ub370 \ud558\ub098\ub97c \uc120\ud0dd\ud574 \uc8fc\uc138\uc694.\",false);\n return;\n }\n const valid = text.length >= 60 && \/(\ub54c\ubb38|\uc65c\ub0d0\ud558\uba74|\ubc14\uc0ad|\ubd80\ub4dc\ub7fd|\uc18c\uc2a4|\ub9db|\uc2dd\uac10|\uc870\uc808|\uace8\uace0\ub8e8)\/.test(text);\n $(\"ans2\").hidden = false;\n $(\"ans2\").innerHTML = selected.value === \"\ucc0d\uba39\"\n ? \"<strong>\uc608\uc2dc \ub2f5\uc548<\/strong><br>\uc800\ub294 \ud0d5\uc218\uc721\uc744 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4. \uc18c\uc2a4\ub97c \ub530\ub85c \ucc0d\uc73c\uba74 \ud0d5\uc218\uc721\uc758 \ubc14\uc0ad\ud55c \uc2dd\uac10\uc744 \uc720\uc9c0\ud560 \uc218 \uc788\uace0, \uc790\uc2e0\uc774 \uc6d0\ud558\ub294 \ub9cc\ud07c \uc18c\uc2a4\uc758 \uc591\uc744 \uc870\uc808\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.\"\n : \"<strong>\uc608\uc2dc \ub2f5\uc548<\/strong><br>\uc800\ub294 \ud0d5\uc218\uc721\uc5d0 \uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4. \uc18c\uc2a4\ub97c \ubd80\uc73c\uba74 \ubaa8\ub4e0 \ud0d5\uc218\uc721\uc5d0 \uc18c\uc2a4\uac00 \uace8\uace0\ub8e8 \ubb3b\uace0, \ucd09\ucd09\ud558\uace0 \ubd80\ub4dc\ub7ec\uc6b4 \ub9db\uc744 \ud55c\uaebc\ubc88\uc5d0 \uc990\uae38 \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.\";\n completed.step2 = valid;\n updateProgress();\n if(valid){\n setFeedback(\"fb2\",\"\uc790\uc2e0\uc758 \uc758\uacac\uacfc \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed\uc744 \ubd84\uba85\ud558\uac8c \ud45c\ud604\ud588\uc2b5\ub2c8\ub2e4.\",true);\n showToast(\"2\ub2e8\uacc4\ub97c \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4.\");\n }else{\n setFeedback(\"fb2\",\"\uc790\uc2e0\uc758 \uc758\uacac\uacfc \uae4c\ub2ed\uc744 \ud3ec\ud568\ud558\uc5ec 60\uc790 \uc774\uc0c1 \uc368 \uc8fc\uc138\uc694.\",false);\n }\n}\n\nfunction showStep3Example(){\n $(\"ans3\").hidden = false;\n showToast(\"\uc608\uc2dc \ub2f5\uc548\uc744 \ud655\uc778\ud588\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction checkStep3(){\n const why = $(\"whyText\").value.trim();\n const problem = $(\"problemText\").value.trim();\n const solution = $(\"solutionText\").value.trim();\n const other = $(\"otherText\").value.trim();\n const valid =\n why.length >= 30 && problem.length >= 25 && solution.length >= 25 && other.length >= 25 &&\n \/(\ub9db|\uc2dd\uac10|\uc18c\uc2a4|\ubc14\uc0ad|\ubd80\ub4dc\ub7fd|\uc870\uc808|\uace8\uace0\ub8e8)\/.test(why) &&\n \/(\ubb38\uc81c|\ubd88\ud3b8|\ubc88\uac70|\ub205\ub205|\ubd80\uc871|\ub9ce\uc774|\uc801\uac8c|\uadf8\ub987)\/.test(problem) &&\n \/(\ud574\uacb0|\uc900\ube44|\ub098\ub204|\uc870\uc808|\ub530\ub85c|\uc120\ud0dd|\ub2f4)\/.test(solution);\n\n $(\"ans3\").hidden = false;\n completed.step3 = valid;\n updateProgress();\n\n if(valid){\n setFeedback(\"fb3\",\"\uae4c\ub2ed\uacfc \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \uade0\ud615 \uc788\uac8c \uc815\ub9ac\ud588\uc2b5\ub2c8\ub2e4.\",true);\n showToast(\"3\ub2e8\uacc4\ub97c \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4.\");\n }else{\n setFeedback(\"fb3\",\"\ub124 \uce78\uc744 \ubaa8\ub450 \uc791\uc131\ud558\uace0, \uae4c\ub2ed\uacfc \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \uad6c\uccb4\uc801\uc73c\ub85c \uc368 \uc8fc\uc138\uc694.\",false);\n }\n}\n\nfunction insertWritingGuide(){\n const finalEssay = $(\"finalEssay\");\n if(finalEssay.value.trim()){\n showToast(\"\uc774\ubbf8 \uc791\uc131\ud55c \ub0b4\uc6a9\uc774 \uc788\uc2b5\ub2c8\ub2e4.\");\n return;\n }\n finalEssay.value =\n`\uc800\ub294 \ud0d5\uc218\uc721\uc744 \uc18c\uc2a4\uc5d0 ____________________ \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.\n\uccab\uc9f8, ____________________\ud558\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.\n\ub458\uc9f8, ____________________\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.\n\ud558\uc9c0\ub9cc ____________________\ub77c\ub294 \ubb38\uc81c\uac00 \uc0dd\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n\uc774 \ubb38\uc81c\ub294 ____________________\ud558\uba74 \ud574\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n\ub530\ub77c\uc11c \uc800\ub294 ____________________ \uba39\ub294 \ubc29\ubc95\uc774 \ub354 \uc88b\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.`;\n finalEssay.dispatchEvent(new Event(\"input\"));\n finalEssay.focus();\n}\n\nfunction bringThoughts(){\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n if(!selected){\n showToast(\"2\ub2e8\uacc4\uc5d0\uc11c \uba3c\uc800 \uc758\uacac\uc744 \uc120\ud0dd\ud574 \uc8fc\uc138\uc694.\");\n return;\n }\n const intro = selected.value === \"\ucc0d\uba39\"\n ? \"\uc800\ub294 \ud0d5\uc218\uc721\uc744 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.\"\n : \"\uc800\ub294 \ud0d5\uc218\uc721\uc5d0 \uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.\";\n\n const parts = [\n intro,\n $(\"opinionReason\").value.trim(),\n $(\"whyText\").value.trim() ? \"\uccab\uc9f8, \" + $(\"whyText\").value.trim() : \"\",\n $(\"problemText\").value.trim() ? \"\ud558\uc9c0\ub9cc \" + $(\"problemText\").value.trim() : \"\",\n $(\"solutionText\").value.trim() ? \"\uc774 \ubb38\uc81c\ub294 \" + $(\"solutionText\").value.trim() : \"\",\n $(\"otherText\").value.trim() ? \"\ubc18\ub300 \uc758\uacac\uc5d0\uc11c\ub294 \" + $(\"otherText\").value.trim() : \"\"\n ].filter(Boolean);\n\n $(\"finalEssay\").value = parts.join(\"\\n\\n\");\n $(\"finalEssay\").dispatchEvent(new Event(\"input\"));\n $(\"finalEssay\").focus();\n showToast(\"\uc55e \ub2e8\uacc4\uc758 \uc0dd\uac01\uc744 \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction finishLesson(){\n const text = $(\"finalEssay\").value.trim();\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n if(!selected){ showToast(\"\uba3c\uc800 \uc790\uc2e0\uc758 \uc758\uacac\uc744 \uc120\ud0dd\ud574 \uc8fc\uc138\uc694.\"); return; }\n if(text.length < 120){ showToast(\"\ucd5c\uc885 \uae00\uc744 120\uc790 \uc774\uc0c1 \uc368 \uc8fc\uc138\uc694.\"); return; }\n if(!\/(\ucc0d\uc5b4|\ubd80\uc5b4|\ucc0d\uba39|\ubd80\uba39|\uc0dd\uac01\ud569\ub2c8\ub2e4|\uc758\uacac)\/.test(text)){\n showToast(\"\uc790\uc2e0\uc758 \uc758\uacac\uc744 \ubd84\uba85\ud558\uac8c \uc368 \uc8fc\uc138\uc694.\"); return;\n }\n if(!\/(\uccab\uc9f8|\ub458\uc9f8|\ub54c\ubb38|\uae4c\ub2ed|\ubc14\uc0ad|\ubd80\ub4dc\ub7fd|\uc18c\uc2a4|\uc2dd\uac10|\ub9db)\/.test(text)){\n showToast(\"\uc758\uacac\uc744 \ub4b7\ubc1b\uce68\ud558\ub294 \uae4c\ub2ed\uc744 \ud3ec\ud568\ud574 \uc8fc\uc138\uc694.\"); return;\n }\n completed.step4 = true;\n updateProgress();\n const score = Object.values(completed).filter(Boolean).length * 25;\n $(\"resultPanel\").style.display = \"block\";\n $(\"scoreText\").textContent = score + \"\uc810 \u00b7 \ud559\uc2b5 \uc644\ub8cc\";\n $(\"resultMsg\").textContent = score === 100\n ? \"\ubaa8\ub4e0 \ud65c\ub3d9\uc744 \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4. \uc790\uc2e0\uc758 \uc758\uacac\uacfc \uae4c\ub2ed, \uc608\uc0c1\ub418\ub294 \ubb38\uc81c\uc640 \ud574\uacb0 \ubc29\ubc95\uc744 \ub17c\ub9ac\uc801\uc73c\ub85c \uc798 \ud45c\ud604\ud588\uc2b5\ub2c8\ub2e4.\"\n : \"\ucd5c\uc885 \uae00\uc4f0\uae30\ub294 \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4. \uc544\uc9c1 \uc644\ub8cc\ud558\uc9c0 \uc54a\uc740 \ub2e8\uacc4\uac00 \uc788\ub2e4\uba74 \uc704\ub85c \uc774\ub3d9\ud558\uc5ec \ub2e4\uc2dc \ud655\uc778\ud574 \ubcf4\uc138\uc694.\";\n saveAll(false);\n showToast(\"\ud559\uc2b5\uc744 \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction collectData(){\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n return {\n completed,\n opinion:selected ? selected.value : \"\",\n fields:{\n opinionReason:$(\"opinionReason\").value,\n whyText:$(\"whyText\").value,\n problemText:$(\"problemText\").value,\n solutionText:$(\"solutionText\").value,\n otherText:$(\"otherText\").value,\n finalEssay:$(\"finalEssay\").value\n }\n };\n}\n\nfunction saveAll(showMessage){\n try{\n localStorage.setItem(STORAGE_KEY,JSON.stringify(collectData()));\n if(showMessage) showToast(\"\ud559\uc2b5 \ub0b4\uc6a9\uc774 \uc800\uc7a5\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\");\n }catch(error){\n if(showMessage) showToast(\"\ube0c\ub77c\uc6b0\uc800 \uc800\uc7a5 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.\");\n }\n}\n\nfunction loadAll(){\n try{\n const raw = localStorage.getItem(STORAGE_KEY);\n if(!raw){ updateProgress(); return; }\n const data = JSON.parse(raw);\n completed = Object.assign(completed,data.completed || {});\n if(data.fields){\n Object.entries(data.fields).forEach(([key,value])=>{\n if($(key)) $(key).value = value;\n });\n }\n if(data.opinion){\n const radio = document.querySelector('input[name=\"opinion\"][value=\"'+data.opinion+'\"]');\n if(radio) radio.checked = true;\n }\n setChoiceVisual();\n updateProgress();\n $(\"opinionReason\").dispatchEvent(new Event(\"input\"));\n $(\"finalEssay\").dispatchEvent(new Event(\"input\"));\n }catch(error){\n console.warn(\"\uc800\uc7a5 \ub0b4\uc6a9\uc744 \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.\",error);\n }\n}\n\nfunction resetAll(){\n if(!window.confirm(\"\uc791\uc131\ud55c \ud559\uc2b5 \ub0b4\uc6a9\uc744 \ubaa8\ub450 \uc9c0\uc6b0\uace0 \ucc98\uc74c\ubd80\ud130 \uc2dc\uc791\ud560\uae4c\uc694?\")) return;\n try{ localStorage.removeItem(STORAGE_KEY); }catch(error){}\n document.querySelectorAll(\"textarea\").forEach(el=>el.value=\"\");\n document.querySelectorAll('input[name=\"opinion\"]').forEach(el=>el.checked=false);\n document.querySelectorAll(\".choice-card\").forEach(el=>el.classList.remove(\"selected\"));\n document.querySelectorAll(\".feedback\").forEach(el=>{el.textContent=\"\";el.className=\"feedback\";});\n document.querySelectorAll(\".answer-reveal\").forEach(el=>el.hidden=true);\n completed = {step1:false,step2:false,step3:false,step4:false};\n $(\"resultPanel\").style.display = \"none\";\n $(\"reasonCount\").textContent = \"0\uc790\";\n $(\"essayCount\").textContent = \"0\uc790\";\n updateProgress();\n window.scrollTo({top:0,behavior:\"smooth\"});\n showToast(\"\ucc98\uc74c \uc0c1\ud0dc\ub85c \ucd08\uae30\ud654\ud588\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction printLesson(){\n saveAll(false);\n showToast(\"\uc778\uc1c4 \ucc3d\uc744 \uc5fd\ub2c8\ub2e4.\");\n window.setTimeout(()=>window.print(),250);\n}\n\nfunction bindButton(id,handler){\n const el = $(id);\n if(el) el.addEventListener(\"click\",handler);\n}\n\ndocument.querySelectorAll('input[name=\"opinion\"]').forEach(radio=>{\n radio.addEventListener(\"change\",setChoiceVisual);\n});\n\n$(\"opinionReason\").addEventListener(\"input\",e=>$(\"reasonCount\").textContent=e.target.value.length+\"\uc790\");\n$(\"finalEssay\").addEventListener(\"input\",e=>$(\"essayCount\").textContent=e.target.value.length+\"\uc790\");\n\nbindButton(\"step1HintBtn\",showStep1Hint);\nbindButton(\"step1CompleteBtn\",completeStep1);\nbindButton(\"step2CheckBtn\",checkStep2);\nbindButton(\"step3ExampleBtn\",showStep3Example);\nbindButton(\"step3CheckBtn\",checkStep3);\nbindButton(\"guideBtn\",insertWritingGuide);\nbindButton(\"bringBtn\",bringThoughts);\nbindButton(\"finishBtn\",finishLesson);\n\n[\"saveBtn\",\"topSaveBtn\"].forEach(id=>bindButton(id,()=>saveAll(true)));\n[\"resetBtn\",\"topResetBtn\"].forEach(id=>bindButton(id,resetAll));\n[\"printBtn\",\"topPrintBtn\"].forEach(id=>bindButton(id,printLesson));\n\ndocument.querySelectorAll(\".step-link\").forEach(link=>{\n link.addEventListener(\"click\",function(e){\n const target = document.querySelector(this.getAttribute(\"href\"));\n if(target){\n e.preventDefault();\n target.scrollIntoView({behavior:\"smooth\",block:\"start\"});\n }\n });\n});\n\nif(\"IntersectionObserver\" in window){\n const observer = new IntersectionObserver(entries=>{\n entries.forEach(entry=>{\n if(entry.isIntersecting){\n document.querySelectorAll(\".step-link\").forEach(link=>link.classList.remove(\"active\"));\n const active = document.querySelector('.step-link[href=\"#'+entry.target.id+'\"]');\n if(active) active.classList.add(\"active\");\n }\n });\n },{rootMargin:\"-35% 0px -55% 0px\"});\n document.querySelectorAll(\".lesson\").forEach(section=>observer.observe(section));\n}\n\nloadAll();\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8 01\uac15 | \ud0d5\uc218\uc721 \uc18c\uc2a4 \ucc0d\uba39\uacfc \ubd80\uba39 \ud83d\udcd6 \ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8 \ucd08\ub4f1\ud559\uc0dd\uc744 \uc704\ud55c \uc0dd\uac01\ud558\ub294 \uae00\uc4f0\uae30 \ud559\uc2b5 \ucc98\uc74c\ubd80\ud130 \u21ba \ud559\uc2b5 \uc800\uc7a5 \u25a3 \uc778\uc1c4 \/ PDF 01\uac15 \u00b7 \uc758\uacac \ube44\uad50\uc640 \uae00\uc4f0\uae30 \ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4. VS \ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4. \ub450 \uac00\uc9c0 \uc758\uacac\uc744 \ube44\uad50\ud558\uace0 \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 \uc815\ud574 \ubd05\ub2c8\ub2e4. \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \ucc28\ub840\ub300\ub85c \uc815\ub9ac\ud558\uc5ec…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":3,"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":11,"date":"2026-07-16T21:48:18","date_gmt":"2026-07-16T21:48:18","guid":{"rendered":"https:\/\/book1.ag-1004.com\/?page_id=11"},"modified":"2026-07-16T21:53:30","modified_gmt":"2026-07-16T21:53:30","slug":"11-2","status":"publish","type":"page","link":"https:\/\/book1.ag-1004.com\/?page_id=11","title":{"rendered":"\ub9e4\uc77c \ub17c\uc220 1\uac15"},"content":{"rendered":"\n\n\n\n\n\n\ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8 01\uac15 | \ud0d5\uc218\uc721 \uc18c\uc2a4 \ucc0d\uba39\uacfc \ubd80\uba39<\/title>\n<style>\n:root{\n --navy:#10233f;--navy-dark:#071426;--pink:#ef3f7d;--pink-dark:#c52d70;\n --pink-light:#fff0f6;--orange:#f97316;--green:#168a57;--blue:#2563eb;\n --ink:#111827;--muted:#64748b;--line:#dfe7f1;--white:#fff;\n --shadow:0 18px 50px rgba(16,35,63,.12)\n}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{\n margin:0;\n font-family:Pretendard,\"Noto Sans KR\",\"Apple SD Gothic Neo\",Arial,sans-serif;\n color:var(--ink);\n background:\n radial-gradient(circle at 8% 8%,rgba(255,143,177,.18),transparent 25%),\n radial-gradient(circle at 92% 12%,rgba(59,130,246,.11),transparent 25%),\n #f7f9fc\n}\nbutton,input,textarea,select{font:inherit}\nbutton{cursor:pointer}\na{text-decoration:none;color:inherit}\nbutton:focus-visible,a:focus-visible,textarea:focus-visible{\n outline:3px solid rgba(239,63,125,.32);outline-offset:3px\n}\n.topbar{\n position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);\n border-bottom:1px solid var(--line);backdrop-filter:blur(12px)\n}\n.topbar-inner{\n max-width:1180px;margin:auto;padding:14px 20px;\n display:flex;align-items:center;justify-content:space-between;gap:20px\n}\n.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--navy)}\n.logo{\n width:46px;height:46px;border-radius:15px;\n background:linear-gradient(135deg,#ef3f7d,#ff7aa8);\n display:grid;place-items:center;color:#fff;font-size:24px;\n box-shadow:0 8px 20px rgba(239,63,125,.25)\n}\n.brand-title{font-size:21px}\n.brand small{display:block;color:var(--muted);font-size:12px;margin-top:3px}\n.top-actions{display:flex;gap:10px}\n.top-btn{\n border:1px solid #d7dee8;background:#fff;color:var(--navy);\n border-radius:12px;padding:10px 14px;font-weight:900;\n box-shadow:0 5px 14px rgba(15,23,42,.06)\n}\n.top-btn.print{background:var(--pink);color:#fff;border-color:var(--pink)}\n.wrap{max-width:1180px;margin:auto;padding:34px 20px 80px}\n.hero{\n position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;\n gap:28px;background:linear-gradient(135deg,#bd2870,#e8447b 55%,#ff7195);\n border-radius:32px;padding:42px;color:#fff;box-shadow:var(--shadow)\n}\n.hero::before,.hero::after{\n content:\"\";position:absolute;border-radius:50%;background:rgba(255,255,255,.09)\n}\n.hero::before{width:260px;height:260px;right:-80px;top:-100px}\n.hero::after{width:190px;height:190px;left:44%;bottom:-110px}\n.hero-content,.hero-card{position:relative;z-index:2}\n.badge{\n display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);\n border:1px solid rgba(255,255,255,.28);padding:8px 14px;border-radius:999px;font-weight:900\n}\n.hero h1{\n font-size:clamp(32px,4.7vw,54px);line-height:1.22;margin:20px 0 16px;\n color:#fff;letter-spacing:-1.5px\n}\n.hero h1 span{display:block;margin:6px 0}\n.vs-text{color:#fff2a8;font-size:.72em}\n.hero p{font-size:18px;line-height:1.8;font-weight:700;margin:0;max-width:720px}\n.hero-card{\n background:#fff;color:var(--ink);border-radius:26px;padding:26px;\n box-shadow:0 18px 40px rgba(88,15,55,.18)\n}\n.hero-card h3{margin:0 0 18px;color:var(--navy);font-size:21px}\n.goal-list{display:grid;gap:14px}\n.goal-item{display:flex;gap:10px;align-items:flex-start;color:#334155;font-weight:800;line-height:1.55}\n.goal-check{\n flex:0 0 23px;width:23px;height:23px;border-radius:50%;\n background:#ffe2ed;color:var(--pink);display:grid;place-items:center;font-size:13px\n}\n.lesson-actions{\n display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0;\n padding:18px;background:#fff;border:1px solid #dbe3ed;border-radius:22px;box-shadow:var(--shadow)\n}\n.action-button{\n min-height:58px;border:2px solid #e1b5c8;border-radius:16px;\n padding:12px 18px;font-weight:900;transition:.2s\n}\n.action-button:hover,.btn:hover,.top-btn:hover{transform:translateY(-2px)}\n.action-reset,.action-save{background:#fff0f6;color:#5f2343}\n.action-print{background:#5f2343;color:#fff}\n.progress-box{\n background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);\n display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center\n}\n.progress-title{display:flex;align-items:center;gap:14px;margin-bottom:10px}\n.progress-title strong{color:var(--navy)}\n.progress-track{height:14px;background:#edf2f7;border-radius:999px;overflow:hidden}\n.progress-fill{\n height:100%;width:0;background:linear-gradient(90deg,#ef3f7d,#ffae5d);transition:.4s\n}\n.progress-text{font-weight:900;color:var(--pink);font-size:22px}\n.grid{display:grid;grid-template-columns:260px 1fr;gap:26px;margin-top:26px}\n.sidebar{\n position:sticky;top:92px;align-self:start;background:#fff;border-radius:24px;\n padding:18px;box-shadow:var(--shadow)\n}\n.side-title{\n display:flex;align-items:center;gap:8px;font-weight:900;color:var(--navy);\n padding:8px;margin-bottom:8px\n}\n.step-link{\n display:flex;gap:12px;align-items:center;padding:13px 12px;border-radius:14px;\n margin:7px 0;font-weight:800;color:#526175;transition:.2s\n}\n.step-link:hover,.step-link.active{background:#fff0f6;color:var(--pink-dark)}\n.num{\n width:31px;height:31px;border-radius:10px;background:#e9eef5;\n display:grid;place-items:center;font-weight:900\n}\n.step-link.active .num{background:var(--pink);color:#fff}\n.complete-guide{\n margin-top:24px;background:#fff8f1;border:1px solid #f8dcc7;\n border-radius:18px;padding:17px\n}\n.complete-guide h4{margin:0 0 12px;color:var(--navy)}\n.complete-guide p{margin:8px 0;color:#596579;font-size:14px;line-height:1.6}\n.content{display:grid;gap:24px}\n.lesson{\n background:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);scroll-margin-top:100px\n}\n.lesson-head{display:flex;gap:14px;margin-bottom:22px}\n.lesson-no{\n flex:0 0 46px;height:46px;border-radius:15px;display:grid;place-items:center;\n background:linear-gradient(135deg,#ef3f7d,#ff769d);\n color:#fff;font-size:22px;font-weight:900\n}\n.lesson h2{margin:3px 0 7px;color:var(--navy);font-size:25px;line-height:1.4}\n.desc{margin:0;color:var(--muted);line-height:1.7}\n.opinion-example{border:2px dashed #c9d9ef;border-radius:22px;padding:24px;background:#fbfdff}\n.flow-title{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}\n.flow-title div{\n text-align:center;padding:13px 8px;font-weight:900;border-bottom:2px dotted #c9d4e3;line-height:1.5\n}\n.flow-title div:nth-child(1){color:#d52d72}\n.flow-title div:nth-child(2){color:#e45b0b}\n.flow-title div:nth-child(3){color:#289a41}\n.flow-title div:nth-child(4){color:#2361d7}\n.color-paragraph{font-size:19px;line-height:2.05;font-weight:800;margin:0}\n.color-paragraph .pink{color:#d52d72}\n.color-paragraph .orange{color:#e45b0b}\n.color-paragraph .green{color:#289a41}\n.color-paragraph .blue{color:#2361d7}\n.teacher-tip{\n display:flex;gap:14px;align-items:center;margin-top:18px;padding:16px;\n border:1px solid #f4cdbc;background:#fffaf7;border-radius:16px\n}\n.pencil{\n flex:0 0 58px;width:58px;height:58px;border-radius:18px;\n display:grid;place-items:center;font-size:35px;background:#fff3ce\n}\n.teacher-tip p{margin:0;color:#4b5563;line-height:1.7;font-size:14px}\n.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.choice-card{\n position:relative;border:2px solid #e1e8f0;background:#fff;border-radius:22px;\n padding:22px;cursor:pointer;transition:.2s\n}\n.choice-card:hover{transform:translateY(-3px);border-color:#f59abb}\n.choice-card.selected{border-color:var(--pink);background:#fff1f6;box-shadow:0 10px 30px rgba(239,63,125,.15)}\n.choice-card input{position:absolute;opacity:0;pointer-events:none}\n.choice-icon{\n width:54px;height:54px;border-radius:18px;display:grid;place-items:center;\n font-size:29px;background:#fff2c8;margin-bottom:14px\n}\n.choice-card h3{margin:0 0 8px;color:var(--navy)}\n.choice-card p{margin:0;color:#64748b;line-height:1.65}\n.thought-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.thought-card{border:1px solid var(--line);border-radius:20px;padding:19px;background:#f8fbff}\n.thought-card h3{margin:0 0 12px;color:var(--navy);font-size:18px}\ntextarea{\n width:100%;min-height:150px;resize:vertical;border:2px solid #d8e0ea;\n border-radius:16px;padding:15px 16px;background:#fff;color:#111827;line-height:1.75\n}\ntextarea:focus{outline:3px solid rgba(239,63,125,.14);border-color:var(--pink)}\n.writing-paper{\n position:relative;border:7px solid #d6e4fb;border-radius:34px;padding:24px 28px;\n background:repeating-linear-gradient(to bottom,#fff 0,#fff 41px,#bad2ef 42px,#fff 43px)\n}\n.writing-paper::before{\n content:\"\u2713\";position:absolute;top:14px;left:22px;color:#ef4444;\n font-size:38px;transform:rotate(-8deg)\n}\n.writing-paper textarea{\n min-height:280px;border:0;background:transparent;padding:46px 8px 10px;\n font-size:18px;line-height:43px;resize:vertical\n}\n.writing-paper textarea:focus{outline:none}\n.word-bank{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}\n.word-chip{\n padding:9px 13px;border-radius:999px;background:#fff0f6;border:1px solid #e8b2c8;\n color:#7d3154;font-weight:900\n}\n.tip{\n background:#fff3f8;color:#51233c;border:1px solid #efc6d6;\n border-left:5px solid var(--pink);padding:16px 18px;border-radius:12px;line-height:1.75\n}\n.toolbar{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}\n.btn{border:0;border-radius:14px;padding:12px 17px;font-weight:900;transition:.2s}\n.btn-primary{background:var(--pink);color:#fff}\n.btn-light{background:#fff0f6;color:#642642;border:1px solid #e0adc3}\n.btn-blue{background:var(--blue);color:#fff}\n.btn-green{background:#139a62;color:#fff}\n.feedback{margin-top:14px;font-weight:900;min-height:24px;line-height:1.6}\n.ok{color:#168a57}.bad{color:#dc3f4f}\n.answer-reveal{\n margin-top:14px;padding:16px 18px;border-radius:14px;background:#fff1cc;\n border:2px solid #f59e0b;color:#4a2a00;font-weight:800;line-height:1.75\n}\n.char-info{display:flex;justify-content:flex-end;margin-top:9px;color:#64748b;font-weight:800}\n.result-panel{\n display:none;background:linear-gradient(135deg,#fff1cc,#ffe6f1);\n border-radius:22px;padding:22px;margin-top:18px\n}\n.result-score{font-size:32px;font-weight:900;color:#5f2343}\n.footer{background:var(--navy-dark);color:#dbe5f4;padding:34px 20px;margin-top:10px}\n.footer-inner{\n max-width:1180px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px\n}\n.footer-brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:20px}\n.toast{\n position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,30px);\n background:#4d2440;color:#fff;padding:13px 18px;border-radius:14px;opacity:0;\n pointer-events:none;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.2)\n}\n.toast.show{opacity:1;transform:translate(-50%,0)}\n@media(max-width:900px){\n .top-actions{display:none}.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr}\n .sidebar{position:static;display:flex;gap:8px;overflow-x:auto;padding:12px}\n .side-title,.complete-guide{display:none}.step-link{min-width:max-content}\n}\n@media(max-width:700px){\n .wrap{padding:22px 14px 60px}.hero{padding:28px 22px;border-radius:24px}\n .hero h1{font-size:32px}.lesson-actions{grid-template-columns:1fr}\n .progress-box{grid-template-columns:1fr}.choice-grid,.thought-grid,.flow-title{grid-template-columns:1fr}\n .lesson{padding:22px 17px;border-radius:22px}.lesson h2{font-size:21px}\n .color-paragraph{font-size:17px}.footer-inner{flex-direction:column;text-align:center}\n}\n@media print{\n body{background:#fff}.topbar,.sidebar,.toolbar,.progress-box,.toast,.lesson-actions{display:none!important}\n .wrap{max-width:none;padding:0}.hero{box-shadow:none;border:1px solid #ddd;color:#111;background:#fff}\n .hero h1,.hero p{color:#111}.grid{display:block}\n .lesson{box-shadow:none;border:1px solid #ddd;break-inside:avoid;margin-bottom:18px}\n .footer{display:none}\n}\n<\/style>\n<\/head>\n<body>\n\n<header class=\"topbar\">\n <div class=\"topbar-inner\">\n <div class=\"brand\">\n <div class=\"logo\">\ud83d\udcd6<\/div>\n <div><div class=\"brand-title\">\ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8<\/div><small>\ucd08\ub4f1\ud559\uc0dd\uc744 \uc704\ud55c \uc0dd\uac01\ud558\ub294 \uae00\uc4f0\uae30 \ud559\uc2b5<\/small><\/div>\n <\/div>\n <div class=\"top-actions\">\n <button type=\"button\" class=\"top-btn\" id=\"topResetBtn\">\ucc98\uc74c\ubd80\ud130 \u21ba<\/button>\n <button type=\"button\" class=\"top-btn\" id=\"topSaveBtn\">\ud559\uc2b5 \uc800\uc7a5 \u25a3<\/button>\n <button type=\"button\" class=\"top-btn print\" id=\"topPrintBtn\">\uc778\uc1c4 \/ PDF<\/button>\n <\/div>\n <\/div>\n<\/header>\n\n<main class=\"wrap\">\n<section class=\"hero\">\n <div class=\"hero-content\">\n <span class=\"badge\">01\uac15 \u00b7 \uc758\uacac \ube44\uad50\uc640 \uae00\uc4f0\uae30<\/span>\n <h1>\n <span>\ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/span>\n <span class=\"vs-text\">VS<\/span>\n <span>\ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/span>\n <\/h1>\n <p>\ub450 \uac00\uc9c0 \uc758\uacac\uc744 \ube44\uad50\ud558\uace0 \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 \uc815\ud574 \ubd05\ub2c8\ub2e4. \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \ucc28\ub840\ub300\ub85c \uc815\ub9ac\ud558\uc5ec \ub17c\ub9ac\uc801\uc778 \uae00\uc744 \uc644\uc131\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <aside class=\"hero-card\">\n <h3>\ud83c\udfaf \uc624\ub298\uc758 \ud559\uc2b5 \ubaa9\ud45c<\/h3>\n <div class=\"goal-list\">\n <div class=\"goal-item\"><span class=\"goal-check\">\u2713<\/span><span>\ub450 \uac00\uc9c0 \uc758\uacac\uc758 \ucc28\uc774\uc810\uc744 \uc774\ud574\ud569\ub2c8\ub2e4.<\/span><\/div>\n <div class=\"goal-item\"><span class=\"goal-check\">\u2713<\/span><span>\uc790\uc2e0\uc758 \uc758\uacac\uc744 \ubd84\uba85\ud558\uac8c \uc815\ud569\ub2c8\ub2e4.<\/span><\/div>\n <div class=\"goal-item\"><span class=\"goal-check\">\u2713<\/span><span>\uc758\uacac\uc744 \ub4b7\ubc1b\uce68\ud558\ub294 \uae4c\ub2ed\uc744 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/span><\/div>\n <div class=\"goal-item\"><span class=\"goal-check\">\u2713<\/span><span>\uc608\uc0c1\ub418\ub294 \ubb38\uc81c\uc640 \ud574\uacb0 \ubc29\ubc95\uc744 \uae00\ub85c \ud45c\ud604\ud569\ub2c8\ub2e4.<\/span><\/div>\n <\/div>\n <\/aside>\n<\/section>\n\n<section class=\"lesson-actions\">\n <button id=\"resetBtn\" type=\"button\" class=\"action-button action-reset\">\u21ba \ucc98\uc74c\ubd80\ud130<\/button>\n <button id=\"saveBtn\" type=\"button\" class=\"action-button action-save\">\u2713 \ud559\uc2b5 \uc800\uc7a5<\/button>\n <button id=\"printBtn\" type=\"button\" class=\"action-button action-print\">\u25a3 \uc778\uc1c4\u00b7PDF<\/button>\n<\/section>\n\n<section class=\"progress-box\">\n <div>\n <div class=\"progress-title\"><strong>\ud559\uc2b5 \uc9c4\ud589\ub960<\/strong><span>\uc804\uccb4 4\ub2e8\uacc4 \ud65c\ub3d9<\/span><\/div>\n <div class=\"progress-track\"><div id=\"progressFill\" class=\"progress-fill\"><\/div><\/div>\n <\/div>\n <div id=\"progressText\" class=\"progress-text\">0%<\/div>\n<\/section>\n\n<div class=\"grid\">\n<nav class=\"sidebar\">\n <div class=\"side-title\">\ud83d\udcd6 \ud559\uc2b5 \uc21c\uc11c<\/div>\n <a class=\"step-link active\" href=\"#step1\"><span class=\"num\">1<\/span>\uc758\uacac \ube44\uad50\uc640 \uc774\ud574<\/a>\n <a class=\"step-link\" href=\"#step2\"><span class=\"num\">2<\/span>\ub098\uc758 \uc758\uacac \uc815\ud558\uae30<\/a>\n <a class=\"step-link\" href=\"#step3\"><span class=\"num\">3<\/span>\uae4c\ub2ed\uacfc \ubb38\uc81c \uc0dd\uac01\ud558\uae30<\/a>\n <a class=\"step-link\" href=\"#step4\"><span class=\"num\">4<\/span>\ub0b4 \uc0dd\uac01 \uae00\ub85c \uc4f0\uae30<\/a>\n <div class=\"complete-guide\">\n <h4>\ud83c\udfc6 \ud559\uc2b5 \uc644\ub8cc \uc870\uac74<\/h4>\n <p>\u2713 \ubaa8\ub4e0 \ub2e8\uacc4\ub97c \uc644\ub8cc\ud569\ub2c8\ub2e4.<\/p>\n <p>\u2713 \ucd5c\uc885 \uae00\uc744 120\uc790 \uc774\uc0c1 \uc501\ub2c8\ub2e4.<\/p>\n <p>\u2713 \uc758\uacac\uacfc \uae4c\ub2ed\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n<\/nav>\n\n<div class=\"content\">\n<section class=\"lesson\" id=\"step1\">\n <div class=\"lesson-head\"><div class=\"lesson-no\">1<\/div><div><h2>\ub450 \uac00\uc9c0 \uc758\uacac\uc744 \uc77d\uace0 \uae00\uc758 \ud750\ub984\uc744 \uc0b4\ud3b4\ubcf4\uc138\uc694.<\/h2><p class=\"desc\">\uc758\uacac, \uae4c\ub2ed, \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc774 \uc5b4\ub5bb\uac8c \uc774\uc5b4\uc9c0\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/p><\/div><\/div>\n <div class=\"opinion-example\">\n <div class=\"flow-title\">\n <div>\ub098\uc758 \uc758\uacac\uc740?<\/div><div>\uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294<br>\uae4c\ub2ed\uc740 \ubb34\uc5c7\uc77c\uae4c?<\/div>\n <div>\uadf8\ub807\uac8c \ub418\uba74<br>\ubb38\uc81c\ub294 \uc5c6\uc744\uae4c?<\/div><div>\uadf8 \ubb38\uc81c\ub294 \uc5b4\ub5bb\uac8c<br>\ud574\uacb0\ud560\uae4c?<\/div>\n <\/div>\n <p class=\"color-paragraph\">\n <span class=\"pink\">\ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/span>\n <span class=\"orange\">\uadf8\ub798\uc57c \ucc0d\uc5b4 \uba39\ub294 \uc7ac\ubbf8\uac00 \uc788\ub2e4. \uc18c\uc2a4\ub97c \ub9ce\uc774 \ucc0d\uc73c\uba74 \ub9db\uc788\ub2e4.<\/span>\n <span class=\"green\">\ubd80\uba39\uc740 \uc18c\uc2a4\ub97c \uc870\uc808\ud560 \uc218 \uc5c6\ub2e4. \ucc0d\uc5b4 \uba39\uc73c\uba74 \uc785\ucc9c\uc7a5\uc774 \uae4c\uc9c8 \uc218\ub3c4 \uc788\ub2e4.<\/span>\n <span class=\"blue\">\ud558\uc9c0\ub9cc \uc57d\uc744 \ubc14\ub974\uba74 \ub41c\ub2e4.<\/span>\n <\/p>\n <\/div>\n <div class=\"teacher-tip\"><div class=\"pencil\">\u270f\ufe0f<\/div><p>\ub450 \uac00\uc9c0 \uc758\uacac \uc911 \uc790\uc2e0\uc758 \uc758\uacac\uc744 \ud558\ub098 \uc815\ud55c \ub4a4 \uadf8 \ubb38\uc7a5\uc73c\ub85c \uc2dc\uc791\ud574 \ubcf4\uc138\uc694. \uc758\uacac\uacfc \uae4c\ub2ed, \ubb38\uc81c\uc640 \ud574\uacb0 \ubc29\ubc95\uc744 \uc11c\ub85c \ub2e4\ub978 \uc0c9\uc73c\ub85c \uad6c\ubd84\ud558\uba74 \uae00\uc758 \ud750\ub984\uc744 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p><\/div>\n <div id=\"fb1\" class=\"feedback\" aria-live=\"polite\"><\/div>\n <div id=\"ans1\" class=\"answer-reveal\" hidden>\uae00\uc758 \ud750\ub984\uc740 <strong>\ub098\uc758 \uc758\uacac \u2192 \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed \u2192 \uc608\uc0c1\ub418\ub294 \ubb38\uc81c \u2192 \ud574\uacb0 \ubc29\ubc95<\/strong>\uc758 \uc21c\uc11c\uc785\ub2c8\ub2e4.<\/div>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn btn-light\" id=\"step1HintBtn\">\ud78c\ud2b8 \ubcf4\uae30<\/button>\n <button type=\"button\" class=\"btn btn-primary\" id=\"step1CompleteBtn\">\ub0b4\uc6a9 \uc774\ud574 \uc644\ub8cc<\/button>\n <\/div>\n<\/section>\n\n<section class=\"lesson\" id=\"step2\">\n <div class=\"lesson-head\"><div class=\"lesson-no\">2<\/div><div><h2>\ud0d5\uc218\uc721\uc744 \uba39\ub294 \ubc29\ubc95\uc5d0 \ub300\ud55c \uc790\uc2e0\uc758 \uc758\uacac\uc744 \uc815\ud574 \ubcf4\uc138\uc694.<\/h2><p class=\"desc\">\ub450 \uac00\uc9c0 \uc758\uacac \uac00\uc6b4\ub370 \uc790\uc2e0\uc758 \uc0dd\uac01\uacfc \ub354 \uac00\uae4c\uc6b4 \uc758\uacac\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/p><\/div><\/div>\n <div class=\"choice-grid\">\n <label class=\"choice-card\" id=\"choiceDip\">\n <input type=\"radio\" name=\"opinion\" value=\"\ucc0d\uba39\">\n <div class=\"choice-icon\">\ud83e\udd62<\/div><h3>\uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/h3>\n <p>\ud0d5\uc218\uc721\uc758 \ubc14\uc0ad\ud55c \uc2dd\uac10\uc744 \uc720\uc9c0\ud560 \uc218 \uc788\uace0, \uba39\uace0 \uc2f6\uc740 \ub9cc\ud07c \uc18c\uc2a4\uc758 \uc591\uc744 \uc870\uc808\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n <\/label>\n <label class=\"choice-card\" id=\"choicePour\">\n <input type=\"radio\" name=\"opinion\" value=\"\ubd80\uba39\">\n <div class=\"choice-icon\">\ud83e\udd63<\/div><h3>\uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4.<\/h3>\n <p>\ud0d5\uc218\uc721 \uc804\uccb4\uc5d0 \uc18c\uc2a4\uac00 \uace8\uace0\ub8e8 \ubb3b\uace0, \ubd80\ub4dc\ub7fd\uace0 \ucd09\ucd09\ud55c \ub9db\uc744 \uc990\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n <\/label>\n <\/div>\n <div style=\"margin-top:18px\">\n <textarea id=\"opinionReason\" placeholder=\"\uc120\ud0dd\ud55c \uc758\uacac\uc744 \ud55c \ubb38\uc7a5\uc73c\ub85c \uc4f0\uace0, \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed\uc744 60\uc790 \uc774\uc0c1 \uc368 \ubcf4\uc138\uc694.\"><\/textarea>\n <div class=\"char-info\"><span id=\"reasonCount\">0\uc790<\/span><\/div>\n <\/div>\n <div id=\"fb2\" class=\"feedback\" aria-live=\"polite\"><\/div>\n <div id=\"ans2\" class=\"answer-reveal\" hidden><\/div>\n <div class=\"toolbar\"><button type=\"button\" class=\"btn btn-primary\" id=\"step2CheckBtn\">\uc758\uacac \ud655\uc778<\/button><\/div>\n<\/section>\n\n<section class=\"lesson\" id=\"step3\">\n <div class=\"lesson-head\"><div class=\"lesson-no\">3<\/div><div><h2>\ub098\uc758 \uc758\uacac\uc744 \ub4b7\ubc1b\uce68\ud558\ub294 \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c\ub97c \uc0dd\uac01\ud574 \ubcf4\uc138\uc694.<\/h2><p class=\"desc\">\uc88b\uc740 \uc810\ub9cc \uc4f0\uc9c0 \uc54a\uace0 \ubc18\ub300\ucabd\uc5d0\uc11c \uc81c\uae30\ud560 \uc218 \uc788\ub294 \ubb38\uc81c\uc640 \ud574\uacb0 \ubc29\ubc95\ub3c4 \ud568\uaed8 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/p><\/div><\/div>\n <div class=\"thought-grid\">\n <div class=\"thought-card\"><h3>\u2460 \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed<\/h3><textarea id=\"whyText\" placeholder=\"\uc608: \uc18c\uc2a4\ub97c \ucc0d\uc5b4 \uba39\uc73c\uba74 \ud0d5\uc218\uc721\uc758 \ubc14\uc0ad\ud55c \uc2dd\uac10\uc744 \uc624\ub798 \uc720\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\"><\/textarea><\/div>\n <div class=\"thought-card\"><h3>\u2461 \uadf8\ub807\uac8c \uba39\uc744 \ub54c \uc0dd\uae38 \uc218 \uc788\ub294 \ubb38\uc81c<\/h3><textarea id=\"problemText\" placeholder=\"\uc608: \uc18c\uc2a4\ub97c \ub530\ub85c \ub2f4\uc544\uc57c \ud558\ubbc0\ub85c \uadf8\ub987\uc774 \ub354 \ud544\uc694\ud558\uace0 \ubc88\uac70\ub85c\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\"><\/textarea><\/div>\n <div class=\"thought-card\"><h3>\u2462 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub294 \ubc29\ubc95<\/h3><textarea id=\"solutionText\" placeholder=\"\uc608: \uc791\uc740 \uc18c\uc2a4 \uadf8\ub987\uc744 \uc900\ube44\ud558\uac70\ub098 \ud55c \uc811\uc2dc\uc758 \ud55c\ucabd\uc5d0 \uc18c\uc2a4\ub97c \ub2f4\uc73c\uba74 \ub429\ub2c8\ub2e4.\"><\/textarea><\/div>\n <div class=\"thought-card\"><h3>\u2463 \uc0c1\ub300 \uc758\uacac\ub3c4 \uc774\ud574\ud574 \ubcf4\uae30<\/h3><textarea id=\"otherText\" placeholder=\"\uc608: \ubd80\uc5b4 \uba39\uc73c\uba74 \uc18c\uc2a4\uac00 \uace8\uace0\ub8e8 \ubb3b\uc5b4 \ubd80\ub4dc\ub7ec\uc6b4 \ub9db\uc744 \uc990\uae38 \uc218 \uc788\ub2e4\ub294 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4.\"><\/textarea><\/div>\n <\/div>\n <div id=\"fb3\" class=\"feedback\" aria-live=\"polite\"><\/div>\n <div id=\"ans3\" class=\"answer-reveal\" hidden>\n <strong>\uc608\uc2dc<\/strong><br>\n \uae4c\ub2ed: \ucc0d\uc5b4 \uba39\uc73c\uba74 \ubc14\uc0ad\ud55c \uc2dd\uac10\uc774 \uc624\ub798 \uc720\uc9c0\ub418\uace0 \uc18c\uc2a4\uc758 \uc591\uc744 \uc870\uc808\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>\n \ubb38\uc81c: \uc18c\uc2a4\ub97c \ub530\ub85c \ub2f4\uc544\uc57c \ud558\ubbc0\ub85c \uadf8\ub987\uc774 \ub354 \ud544\uc694\ud569\ub2c8\ub2e4.<br>\n \ud574\uacb0 \ubc29\ubc95: \uc791\uc740 \uc18c\uc2a4 \uadf8\ub987\uc744 \uc900\ube44\ud558\uac70\ub098 \uc811\uc2dc \ud55c\ucabd\uc5d0 \uc18c\uc2a4\ub97c \ub2f4\uc2b5\ub2c8\ub2e4.<br>\n \uc0c1\ub300 \uc758\uacac \uc774\ud574: \ubd80\uc5b4 \uba39\uc73c\uba74 \uc18c\uc2a4\uac00 \uace8\uace0\ub8e8 \ubb3b\uace0 \ubd80\ub4dc\ub7ec\uc6b4 \ub9db\uc744 \uc990\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/div>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn btn-light\" id=\"step3ExampleBtn\">\uc608\uc2dc \ub2f5\uc548 \ubcf4\uae30<\/button>\n <button type=\"button\" class=\"btn btn-primary\" id=\"step3CheckBtn\">\uc0dd\uac01 \uc815\ub9ac \uc644\ub8cc<\/button>\n <\/div>\n<\/section>\n\n<section class=\"lesson\" id=\"step4\">\n <div class=\"lesson-head\"><div class=\"lesson-no\">4<\/div><div><h2>\ud0d5\uc218\uc721 \uc18c\uc2a4\uc5d0 \ub300\ud55c \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 \ud55c \ud3b8\uc758 \uae00\ub85c \uc644\uc131\ud574 \ubcf4\uc138\uc694.<\/h2><p class=\"desc\">\uc790\uc2e0\uc758 \uc758\uacac\uc73c\ub85c \uc2dc\uc791\ud558\uace0, \ub450 \uac00\uc9c0 \uc774\uc0c1\uc758 \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/p><\/div><\/div>\n <div class=\"word-bank\">\n <span class=\"word-chip\">\ubc14\uc0ad\ud55c \uc2dd\uac10<\/span><span class=\"word-chip\">\ubd80\ub4dc\ub7ec\uc6b4 \ub9db<\/span>\n <span class=\"word-chip\">\uc18c\uc2a4\uc758 \uc591<\/span><span class=\"word-chip\">\uac1c\uc778\uc758 \ucde8\ud5a5<\/span>\n <span class=\"word-chip\">\uace8\uace0\ub8e8 \ubb3b\ub2e4<\/span><span class=\"word-chip\">\ud574\uacb0 \ubc29\ubc95<\/span>\n <\/div>\n <div class=\"tip\"><strong>\uae00\uc4f0\uae30 \ub3c4\uc6c0\ub9d0<\/strong><br>\n \u2460 \ub098\uc758 \uc758\uacac\uc744 \uccab \ubb38\uc7a5\uc5d0 \ubd84\uba85\ud558\uac8c \uc501\ub2c8\ub2e4.<br>\n \u2461 \u201c\uccab\uc9f8\u201d, \u201c\ub458\uc9f8\u201d\ub97c \uc0ac\uc6a9\ud574 \uae4c\ub2ed\uc744 \ub098\ub204\uc5b4 \uc501\ub2c8\ub2e4.<br>\n \u2462 \uc608\uc0c1\ub418\ub294 \ubb38\uc81c\ub97c \uc0dd\uac01\ud558\uace0 \ud574\uacb0 \ubc29\ubc95\uc744 \uc81c\uc2dc\ud569\ub2c8\ub2e4.<br>\n \u2463 \ub9c8\uc9c0\ub9c9\uc5d0\ub294 \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 \ub2e4\uc2dc \ud55c\ubc88 \uc815\ub9ac\ud569\ub2c8\ub2e4.\n <\/div>\n <div class=\"writing-paper\" style=\"margin-top:18px\"><textarea id=\"finalEssay\" placeholder=\"\uc5ec\uae30\uc5d0 \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 120\uc790 \uc774\uc0c1 \uc368 \ubcf4\uc138\uc694.\"><\/textarea><\/div>\n <div class=\"char-info\"><span id=\"essayCount\">0\uc790<\/span><\/div>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn btn-light\" id=\"guideBtn\">\uae00\uc4f0\uae30 \ud2c0 \ub123\uae30<\/button>\n <button type=\"button\" class=\"btn btn-blue\" id=\"bringBtn\">\uc0dd\uac01 \uac00\uc838\uc624\uae30<\/button>\n <button type=\"button\" class=\"btn btn-green\" id=\"finishBtn\">\ud559\uc2b5 \uc644\ub8cc<\/button>\n <\/div>\n <div id=\"resultPanel\" class=\"result-panel\"><div id=\"scoreText\" class=\"result-score\">\ud559\uc2b5 \uc644\ub8cc<\/div><p id=\"resultMsg\"><\/p><\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/main>\n\n<footer class=\"footer\">\n <div class=\"footer-inner\">\n <div class=\"footer-brand\"><div class=\"logo\">\ud83d\udcd6<\/div><span>\ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8<\/span><\/div>\n <div>\ucd08\ub4f1\ud559\uc0dd\uc744 \uc704\ud55c \uc0dd\uac01\ud558\uace0 \ud45c\ud604\ud558\ub294 \uae00\uc4f0\uae30 \ud559\uc2b5<\/div>\n <div>\ubcf8 \ud559\uc2b5 \ucf58\ud150\uce20\ub294 \uad50\uc721 \ubaa9\uc801\uc73c\ub85c \uc81c\uc791\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/div>\n <\/div>\n<\/footer>\n\n<div id=\"toast\" class=\"toast\" role=\"status\" aria-live=\"polite\">\ud559\uc2b5 \ub0b4\uc6a9\uc774 \uc800\uc7a5\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/div>\n\n<script>\n(function(){\n\"use strict\";\n\nconst STORAGE_KEY = \"elementaryEssaySchool_tangsuyuk_lesson01_v2\";\nlet completed = {step1:false,step2:false,step3:false,step4:false};\n\nconst $ = (id) => document.getElementById(id);\nconst progressFill = $(\"progressFill\");\nconst progressText = $(\"progressText\");\nconst toastBox = $(\"toast\");\n\nfunction showToast(message){\n toastBox.textContent = message;\n toastBox.classList.add(\"show\");\n window.clearTimeout(showToast.timer);\n showToast.timer = window.setTimeout(() => toastBox.classList.remove(\"show\"), 1800);\n}\n\nfunction updateProgress(){\n const count = Object.values(completed).filter(Boolean).length;\n const percent = count * 25;\n progressFill.style.width = percent + \"%\";\n progressText.textContent = percent + \"%\";\n}\n\nfunction setFeedback(id, message, ok){\n const el = $(id);\n el.className = \"feedback \" + (ok ? \"ok\" : \"bad\");\n el.textContent = message;\n}\n\nfunction setChoiceVisual(){\n $(\"choiceDip\").classList.remove(\"selected\");\n $(\"choicePour\").classList.remove(\"selected\");\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n if(!selected) return;\n (selected.value === \"\ucc0d\uba39\" ? $(\"choiceDip\") : $(\"choicePour\")).classList.add(\"selected\");\n}\n\nfunction showStep1Hint(){\n const el = $(\"fb1\");\n el.className = \"feedback\";\n el.textContent = \"\ud78c\ud2b8: \uc790\uc2e0\uc758 \uc758\uacac\uc744 \uba3c\uc800 \ub9d0\ud55c \ub4a4, \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \ucc28\ub840\ub300\ub85c \uc124\uba85\ud569\ub2c8\ub2e4.\";\n}\n\nfunction completeStep1(){\n $(\"ans1\").hidden = false;\n setFeedback(\"fb1\",\"\uc758\uacac\uc744 \uc124\uba85\ud558\ub294 \uae00\uc758 \uae30\ubcf8 \ud750\ub984\uc744 \ud655\uc778\ud588\uc2b5\ub2c8\ub2e4.\",true);\n completed.step1 = true;\n updateProgress();\n showToast(\"1\ub2e8\uacc4\ub97c \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction checkStep2(){\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n const text = $(\"opinionReason\").value.trim();\n if(!selected){\n setFeedback(\"fb2\",\"\uba3c\uc800 \ucc0d\uc5b4 \uba39\uae30\uc640 \ubd80\uc5b4 \uba39\uae30 \uac00\uc6b4\ub370 \ud558\ub098\ub97c \uc120\ud0dd\ud574 \uc8fc\uc138\uc694.\",false);\n return;\n }\n const valid = text.length >= 60 && \/(\ub54c\ubb38|\uc65c\ub0d0\ud558\uba74|\ubc14\uc0ad|\ubd80\ub4dc\ub7fd|\uc18c\uc2a4|\ub9db|\uc2dd\uac10|\uc870\uc808|\uace8\uace0\ub8e8)\/.test(text);\n $(\"ans2\").hidden = false;\n $(\"ans2\").innerHTML = selected.value === \"\ucc0d\uba39\"\n ? \"<strong>\uc608\uc2dc \ub2f5\uc548<\/strong><br>\uc800\ub294 \ud0d5\uc218\uc721\uc744 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4. \uc18c\uc2a4\ub97c \ub530\ub85c \ucc0d\uc73c\uba74 \ud0d5\uc218\uc721\uc758 \ubc14\uc0ad\ud55c \uc2dd\uac10\uc744 \uc720\uc9c0\ud560 \uc218 \uc788\uace0, \uc790\uc2e0\uc774 \uc6d0\ud558\ub294 \ub9cc\ud07c \uc18c\uc2a4\uc758 \uc591\uc744 \uc870\uc808\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.\"\n : \"<strong>\uc608\uc2dc \ub2f5\uc548<\/strong><br>\uc800\ub294 \ud0d5\uc218\uc721\uc5d0 \uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4. \uc18c\uc2a4\ub97c \ubd80\uc73c\uba74 \ubaa8\ub4e0 \ud0d5\uc218\uc721\uc5d0 \uc18c\uc2a4\uac00 \uace8\uace0\ub8e8 \ubb3b\uace0, \ucd09\ucd09\ud558\uace0 \ubd80\ub4dc\ub7ec\uc6b4 \ub9db\uc744 \ud55c\uaebc\ubc88\uc5d0 \uc990\uae38 \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.\";\n completed.step2 = valid;\n updateProgress();\n if(valid){\n setFeedback(\"fb2\",\"\uc790\uc2e0\uc758 \uc758\uacac\uacfc \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed\uc744 \ubd84\uba85\ud558\uac8c \ud45c\ud604\ud588\uc2b5\ub2c8\ub2e4.\",true);\n showToast(\"2\ub2e8\uacc4\ub97c \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4.\");\n }else{\n setFeedback(\"fb2\",\"\uc790\uc2e0\uc758 \uc758\uacac\uacfc \uae4c\ub2ed\uc744 \ud3ec\ud568\ud558\uc5ec 60\uc790 \uc774\uc0c1 \uc368 \uc8fc\uc138\uc694.\",false);\n }\n}\n\nfunction showStep3Example(){\n $(\"ans3\").hidden = false;\n showToast(\"\uc608\uc2dc \ub2f5\uc548\uc744 \ud655\uc778\ud588\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction checkStep3(){\n const why = $(\"whyText\").value.trim();\n const problem = $(\"problemText\").value.trim();\n const solution = $(\"solutionText\").value.trim();\n const other = $(\"otherText\").value.trim();\n const valid =\n why.length >= 30 && problem.length >= 25 && solution.length >= 25 && other.length >= 25 &&\n \/(\ub9db|\uc2dd\uac10|\uc18c\uc2a4|\ubc14\uc0ad|\ubd80\ub4dc\ub7fd|\uc870\uc808|\uace8\uace0\ub8e8)\/.test(why) &&\n \/(\ubb38\uc81c|\ubd88\ud3b8|\ubc88\uac70|\ub205\ub205|\ubd80\uc871|\ub9ce\uc774|\uc801\uac8c|\uadf8\ub987)\/.test(problem) &&\n \/(\ud574\uacb0|\uc900\ube44|\ub098\ub204|\uc870\uc808|\ub530\ub85c|\uc120\ud0dd|\ub2f4)\/.test(solution);\n\n $(\"ans3\").hidden = false;\n completed.step3 = valid;\n updateProgress();\n\n if(valid){\n setFeedback(\"fb3\",\"\uae4c\ub2ed\uacfc \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \uade0\ud615 \uc788\uac8c \uc815\ub9ac\ud588\uc2b5\ub2c8\ub2e4.\",true);\n showToast(\"3\ub2e8\uacc4\ub97c \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4.\");\n }else{\n setFeedback(\"fb3\",\"\ub124 \uce78\uc744 \ubaa8\ub450 \uc791\uc131\ud558\uace0, \uae4c\ub2ed\uacfc \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \uad6c\uccb4\uc801\uc73c\ub85c \uc368 \uc8fc\uc138\uc694.\",false);\n }\n}\n\nfunction insertWritingGuide(){\n const finalEssay = $(\"finalEssay\");\n if(finalEssay.value.trim()){\n showToast(\"\uc774\ubbf8 \uc791\uc131\ud55c \ub0b4\uc6a9\uc774 \uc788\uc2b5\ub2c8\ub2e4.\");\n return;\n }\n finalEssay.value =\n`\uc800\ub294 \ud0d5\uc218\uc721\uc744 \uc18c\uc2a4\uc5d0 ____________________ \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.\n\uccab\uc9f8, ____________________\ud558\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.\n\ub458\uc9f8, ____________________\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.\n\ud558\uc9c0\ub9cc ____________________\ub77c\ub294 \ubb38\uc81c\uac00 \uc0dd\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n\uc774 \ubb38\uc81c\ub294 ____________________\ud558\uba74 \ud574\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n\ub530\ub77c\uc11c \uc800\ub294 ____________________ \uba39\ub294 \ubc29\ubc95\uc774 \ub354 \uc88b\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.`;\n finalEssay.dispatchEvent(new Event(\"input\"));\n finalEssay.focus();\n}\n\nfunction bringThoughts(){\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n if(!selected){\n showToast(\"2\ub2e8\uacc4\uc5d0\uc11c \uba3c\uc800 \uc758\uacac\uc744 \uc120\ud0dd\ud574 \uc8fc\uc138\uc694.\");\n return;\n }\n const intro = selected.value === \"\ucc0d\uba39\"\n ? \"\uc800\ub294 \ud0d5\uc218\uc721\uc744 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.\"\n : \"\uc800\ub294 \ud0d5\uc218\uc721\uc5d0 \uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.\";\n\n const parts = [\n intro,\n $(\"opinionReason\").value.trim(),\n $(\"whyText\").value.trim() ? \"\uccab\uc9f8, \" + $(\"whyText\").value.trim() : \"\",\n $(\"problemText\").value.trim() ? \"\ud558\uc9c0\ub9cc \" + $(\"problemText\").value.trim() : \"\",\n $(\"solutionText\").value.trim() ? \"\uc774 \ubb38\uc81c\ub294 \" + $(\"solutionText\").value.trim() : \"\",\n $(\"otherText\").value.trim() ? \"\ubc18\ub300 \uc758\uacac\uc5d0\uc11c\ub294 \" + $(\"otherText\").value.trim() : \"\"\n ].filter(Boolean);\n\n $(\"finalEssay\").value = parts.join(\"\\n\\n\");\n $(\"finalEssay\").dispatchEvent(new Event(\"input\"));\n $(\"finalEssay\").focus();\n showToast(\"\uc55e \ub2e8\uacc4\uc758 \uc0dd\uac01\uc744 \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction finishLesson(){\n const text = $(\"finalEssay\").value.trim();\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n if(!selected){ showToast(\"\uba3c\uc800 \uc790\uc2e0\uc758 \uc758\uacac\uc744 \uc120\ud0dd\ud574 \uc8fc\uc138\uc694.\"); return; }\n if(text.length < 120){ showToast(\"\ucd5c\uc885 \uae00\uc744 120\uc790 \uc774\uc0c1 \uc368 \uc8fc\uc138\uc694.\"); return; }\n if(!\/(\ucc0d\uc5b4|\ubd80\uc5b4|\ucc0d\uba39|\ubd80\uba39|\uc0dd\uac01\ud569\ub2c8\ub2e4|\uc758\uacac)\/.test(text)){\n showToast(\"\uc790\uc2e0\uc758 \uc758\uacac\uc744 \ubd84\uba85\ud558\uac8c \uc368 \uc8fc\uc138\uc694.\"); return;\n }\n if(!\/(\uccab\uc9f8|\ub458\uc9f8|\ub54c\ubb38|\uae4c\ub2ed|\ubc14\uc0ad|\ubd80\ub4dc\ub7fd|\uc18c\uc2a4|\uc2dd\uac10|\ub9db)\/.test(text)){\n showToast(\"\uc758\uacac\uc744 \ub4b7\ubc1b\uce68\ud558\ub294 \uae4c\ub2ed\uc744 \ud3ec\ud568\ud574 \uc8fc\uc138\uc694.\"); return;\n }\n completed.step4 = true;\n updateProgress();\n const score = Object.values(completed).filter(Boolean).length * 25;\n $(\"resultPanel\").style.display = \"block\";\n $(\"scoreText\").textContent = score + \"\uc810 \u00b7 \ud559\uc2b5 \uc644\ub8cc\";\n $(\"resultMsg\").textContent = score === 100\n ? \"\ubaa8\ub4e0 \ud65c\ub3d9\uc744 \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4. \uc790\uc2e0\uc758 \uc758\uacac\uacfc \uae4c\ub2ed, \uc608\uc0c1\ub418\ub294 \ubb38\uc81c\uc640 \ud574\uacb0 \ubc29\ubc95\uc744 \ub17c\ub9ac\uc801\uc73c\ub85c \uc798 \ud45c\ud604\ud588\uc2b5\ub2c8\ub2e4.\"\n : \"\ucd5c\uc885 \uae00\uc4f0\uae30\ub294 \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4. \uc544\uc9c1 \uc644\ub8cc\ud558\uc9c0 \uc54a\uc740 \ub2e8\uacc4\uac00 \uc788\ub2e4\uba74 \uc704\ub85c \uc774\ub3d9\ud558\uc5ec \ub2e4\uc2dc \ud655\uc778\ud574 \ubcf4\uc138\uc694.\";\n saveAll(false);\n showToast(\"\ud559\uc2b5\uc744 \uc644\ub8cc\ud588\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction collectData(){\n const selected = document.querySelector('input[name=\"opinion\"]:checked');\n return {\n completed,\n opinion:selected ? selected.value : \"\",\n fields:{\n opinionReason:$(\"opinionReason\").value,\n whyText:$(\"whyText\").value,\n problemText:$(\"problemText\").value,\n solutionText:$(\"solutionText\").value,\n otherText:$(\"otherText\").value,\n finalEssay:$(\"finalEssay\").value\n }\n };\n}\n\nfunction saveAll(showMessage){\n try{\n localStorage.setItem(STORAGE_KEY,JSON.stringify(collectData()));\n if(showMessage) showToast(\"\ud559\uc2b5 \ub0b4\uc6a9\uc774 \uc800\uc7a5\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\");\n }catch(error){\n if(showMessage) showToast(\"\ube0c\ub77c\uc6b0\uc800 \uc800\uc7a5 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.\");\n }\n}\n\nfunction loadAll(){\n try{\n const raw = localStorage.getItem(STORAGE_KEY);\n if(!raw){ updateProgress(); return; }\n const data = JSON.parse(raw);\n completed = Object.assign(completed,data.completed || {});\n if(data.fields){\n Object.entries(data.fields).forEach(([key,value])=>{\n if($(key)) $(key).value = value;\n });\n }\n if(data.opinion){\n const radio = document.querySelector('input[name=\"opinion\"][value=\"'+data.opinion+'\"]');\n if(radio) radio.checked = true;\n }\n setChoiceVisual();\n updateProgress();\n $(\"opinionReason\").dispatchEvent(new Event(\"input\"));\n $(\"finalEssay\").dispatchEvent(new Event(\"input\"));\n }catch(error){\n console.warn(\"\uc800\uc7a5 \ub0b4\uc6a9\uc744 \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.\",error);\n }\n}\n\nfunction resetAll(){\n if(!window.confirm(\"\uc791\uc131\ud55c \ud559\uc2b5 \ub0b4\uc6a9\uc744 \ubaa8\ub450 \uc9c0\uc6b0\uace0 \ucc98\uc74c\ubd80\ud130 \uc2dc\uc791\ud560\uae4c\uc694?\")) return;\n try{ localStorage.removeItem(STORAGE_KEY); }catch(error){}\n document.querySelectorAll(\"textarea\").forEach(el=>el.value=\"\");\n document.querySelectorAll('input[name=\"opinion\"]').forEach(el=>el.checked=false);\n document.querySelectorAll(\".choice-card\").forEach(el=>el.classList.remove(\"selected\"));\n document.querySelectorAll(\".feedback\").forEach(el=>{el.textContent=\"\";el.className=\"feedback\";});\n document.querySelectorAll(\".answer-reveal\").forEach(el=>el.hidden=true);\n completed = {step1:false,step2:false,step3:false,step4:false};\n $(\"resultPanel\").style.display = \"none\";\n $(\"reasonCount\").textContent = \"0\uc790\";\n $(\"essayCount\").textContent = \"0\uc790\";\n updateProgress();\n window.scrollTo({top:0,behavior:\"smooth\"});\n showToast(\"\ucc98\uc74c \uc0c1\ud0dc\ub85c \ucd08\uae30\ud654\ud588\uc2b5\ub2c8\ub2e4.\");\n}\n\nfunction printLesson(){\n saveAll(false);\n showToast(\"\uc778\uc1c4 \ucc3d\uc744 \uc5fd\ub2c8\ub2e4.\");\n window.setTimeout(()=>window.print(),250);\n}\n\nfunction bindButton(id,handler){\n const el = $(id);\n if(el) el.addEventListener(\"click\",handler);\n}\n\ndocument.querySelectorAll('input[name=\"opinion\"]').forEach(radio=>{\n radio.addEventListener(\"change\",setChoiceVisual);\n});\n\n$(\"opinionReason\").addEventListener(\"input\",e=>$(\"reasonCount\").textContent=e.target.value.length+\"\uc790\");\n$(\"finalEssay\").addEventListener(\"input\",e=>$(\"essayCount\").textContent=e.target.value.length+\"\uc790\");\n\nbindButton(\"step1HintBtn\",showStep1Hint);\nbindButton(\"step1CompleteBtn\",completeStep1);\nbindButton(\"step2CheckBtn\",checkStep2);\nbindButton(\"step3ExampleBtn\",showStep3Example);\nbindButton(\"step3CheckBtn\",checkStep3);\nbindButton(\"guideBtn\",insertWritingGuide);\nbindButton(\"bringBtn\",bringThoughts);\nbindButton(\"finishBtn\",finishLesson);\n\n[\"saveBtn\",\"topSaveBtn\"].forEach(id=>bindButton(id,()=>saveAll(true)));\n[\"resetBtn\",\"topResetBtn\"].forEach(id=>bindButton(id,resetAll));\n[\"printBtn\",\"topPrintBtn\"].forEach(id=>bindButton(id,printLesson));\n\ndocument.querySelectorAll(\".step-link\").forEach(link=>{\n link.addEventListener(\"click\",function(e){\n const target = document.querySelector(this.getAttribute(\"href\"));\n if(target){\n e.preventDefault();\n target.scrollIntoView({behavior:\"smooth\",block:\"start\"});\n }\n });\n});\n\nif(\"IntersectionObserver\" in window){\n const observer = new IntersectionObserver(entries=>{\n entries.forEach(entry=>{\n if(entry.isIntersecting){\n document.querySelectorAll(\".step-link\").forEach(link=>link.classList.remove(\"active\"));\n const active = document.querySelector('.step-link[href=\"#'+entry.target.id+'\"]');\n if(active) active.classList.add(\"active\");\n }\n });\n },{rootMargin:\"-35% 0px -55% 0px\"});\n document.querySelectorAll(\".lesson\").forEach(section=>observer.observe(section));\n}\n\nloadAll();\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8 01\uac15 | \ud0d5\uc218\uc721 \uc18c\uc2a4 \ucc0d\uba39\uacfc \ubd80\uba39 \ud83d\udcd6 \ucd08\ub4f1\ub17c\uc220\uc2a4\ucfe8 \ucd08\ub4f1\ud559\uc0dd\uc744 \uc704\ud55c \uc0dd\uac01\ud558\ub294 \uae00\uc4f0\uae30 \ud559\uc2b5 \ucc98\uc74c\ubd80\ud130 \u21ba \ud559\uc2b5 \uc800\uc7a5 \u25a3 \uc778\uc1c4 \/ PDF 01\uac15 \u00b7 \uc758\uacac \ube44\uad50\uc640 \uae00\uc4f0\uae30 \ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\uc5d0 \ucc0d\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4. VS \ud0d5\uc218\uc721\uc740 \uc18c\uc2a4\ub97c \ubd80\uc5b4 \uba39\uc5b4\uc57c \ud55c\ub2e4. \ub450 \uac00\uc9c0 \uc758\uacac\uc744 \ube44\uad50\ud558\uace0 \uc790\uc2e0\uc758 \uc0dd\uac01\uc744 \uc815\ud574 \ubd05\ub2c8\ub2e4. \uadf8\ub807\uac8c \uc0dd\uac01\ud558\ub294 \uae4c\ub2ed\uacfc \uc608\uc0c1\ub418\ub294 \ubb38\uc81c, \ud574\uacb0 \ubc29\ubc95\uc744 \ucc28\ub840\ub300\ub85c \uc815\ub9ac\ud558\uc5ec…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":3,"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/book1.ag-1004.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}