- Published on
밤 산책
(function () {
const mount = document.getElementById("kv-night-walk-all-words");
if (!mount) return;
const root = mount.attachShadow ? mount.attachShadow({ mode: "open" }) : mount;
root.innerHTML = `
:host {
all: initial;
display: block;
width: 100%;
color: #111827;
font-family: Arial, Helvetica, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
.kv-wrap {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.kv-card {
width: 100%;
background: #ffffff;
border: 1px solid #dbe4f0;
border-radius: 20px;
padding: 22px 20px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.kv-story {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
line-height: 2.05;
color: #111827;
word-break: keep-all;
letter-spacing: 0;
}
.kv-sentence {
position: relative;
display: block;
margin: 0 0 12px 0;
padding: 12px 14px;
border-radius: 14px;
transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
outline: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.kv-sentence:last-child {
margin-bottom: 0;
}
.kv-sentence:hover,
.kv-sentence:focus {
background: #f8fafc;
transform: translateY(-1px);
}
.kv-sentence.active {
background: #f8fafc;
}
.kv-sentence.playing {
background: #ecfdf5;
box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.18);
}
.kv-mainline {
display: block;
}
.kv-word {
position: relative;
display: inline-block;
padding: 0 2px;
border-radius: 8px;
cursor: pointer;
color: #14532d;
background: linear-gradient(to top, rgba(187, 247, 208, 0.72) 50%, transparent 50%);
transition: transform 0.15s ease, background 0.15s ease;
outline: none;
}
.kv-word:hover,
.kv-word:focus,
.kv-word.active {
transform: translateY(-1px);
background: linear-gradient(to top, rgba(134, 239, 172, 0.95) 56%, transparent 56%);
}
.kv-word::after {
content: attr(data-en);
position: absolute;
left: 50%;
bottom: calc(100% + 12px);
transform: translateX(-50%) translateY(6px);
background: #0f172a;
color: #ffffff;
padding: 8px 12px;
border-radius: 10px;
font-size: 14px;
line-height: 1.3;
font-family: Arial, Helvetica, sans-serif;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
box-shadow: 0 10px 24px rgba(2, 6, 23, 0.24);
z-index: 1000;
}
.kv-word::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 5px);
transform: translateX(-50%);
border-width: 8px 7px 0 7px;
border-style: solid;
border-color: #0f172a transparent transparent transparent;
opacity: 0;
transition: opacity 0.18s ease;
pointer-events: none;
z-index: 999;
}
.kv-word:hover::after,
.kv-word:hover::before,
.kv-word:focus::after,
.kv-word:focus::before,
.kv-word.active::after,
.kv-word.active::before {
opacity: 1;
}
.kv-word:hover::after,
.kv-word:focus::after,
.kv-word.active::after {
transform: translateX(-50%) translateY(0);
}
.kv-read-mark {
display: inline-block;
margin-left: 8px;
font-size: 15px;
line-height: 1;
vertical-align: middle;
opacity: 0.72;
user-select: none;
}
.kv-pron {
display: none;
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
background: #f1f5f9;
color: #334155;
font-size: 16px;
line-height: 1.7;
word-break: keep-all;
}
.kv-sentence.active .kv-pron {
display: block;
}
.kv-pron-label {
display: inline-block;
margin-right: 8px;
color: #166534;
font-weight: 700;
}
@media (max-width: 768px) {
.kv-wrap {
padding: 10px;
}
.kv-card {
padding: 16px 14px;
border-radius: 16px;
}
.kv-story {
font-size: 21px;
line-height: 1.9;
}
.kv-sentence {
padding: 10px 11px;
}
.kv-pron {
font-size: 15px;
}
.kv-word::after {
white-space: normal;
min-width: 84px;
max-width: 180px;
text-align: center;
}
}
어느
저녁,
민수는
집
근처
공원을
산책하기로
했다.□
발음어느 저녁, 민수는 집 끈처 공워늘 산채카기로 해따.
공원에
들어가자
바람이
시원하게
불고,
나무
냄새가
은은하게
퍼졌다.□
발음공워네 드러가자 바라미 시워나게 불고, 나무 냄쌔가 으느나게 퍼젇따.
“오늘은
정말
기분이
좋다,”
민수가
혼잣말을
했다.□
발음오느른 정말 기부니 조타, 민수가 혼잔마를 해따.
그때,
작은
고양이
한
마리가
민수에게
다가왔다.□
발음그때, 자근 고양이 한 마리가 민수에게 다가와따.
고양이는
“야옹”
하고
울며
민수의
다리에
몸을
비볐다.□
발음고양이는 야옹 하고 울며 민수에 다리에 모믈 비벼따.
“너
정말
귀엽다!”□
발음너 정말 귀엽따.
민수는
고양이를
살짝
쓰다듬었다.□
발음민수는 고양이를 살짝 쓰다드머따.
고양이는
민수를
따라
공원
끝까지
걸었다.□
발음고양이는 민수를 따라 공원 끋까지 거러따.
민수는
웃으며
말했다.□
발음민수는 우스며 말해따.
“우리
내일도
만날까?”□
발음우리 내일도 만날까?
고양이는
대답
대신
꼬리를
살랑
흔들었다.□
발음고양이는 대답 때신 꼬리를 살랑 흔드러따.
0 Comments