듀란일대기 - Chronicle of Duran html, body { margin: 0; padding: 0; background: #050607 !important; color: #b8ad99 !important; -webkit-text-fill-color: #b8ad99 !important; color-scheme: dark !important; forced-color-adjust: none !important; font-family: 'Noto Serif KR', serif; } body { min-height: 100vh; padding: 40px 20px; display: flex; justify-content: center; background-image: radial-gradient(circle at 50% 0%, #18211c 0%, #050607 70%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b8ad99' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .duran-wrap, .duran-wrap *, .duran-wrap *::before, .duran-wrap *::after { box-sizing: border-box; color: #b8ad99 !important; -webkit-text-fill-color: #b8ad99 !important; text-decoration-color: #b8ad99 !important; caret-color: #b8ad99 !important; forced-color-adjust: none !important; color-scheme: dark !important; } .duran-wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 70px 50px; border-radius: 16px; background: linear-gradient(180deg, rgba(20, 26, 22, 0.96) 0%, rgba(12, 15, 16, 0.98) 100%) !important; border: 1px solid rgba(184, 173, 153, 0.34) !important; box-shadow: 0 40px 100px rgba(9, 11, 10, 0.88), inset 0 0 80px rgba(9, 11, 10, 0.82), inset 0 0 20px rgba(184, 173, 153, 0.08) !important; text-align: center; position: relative; overflow: hidden; } .duran-wrap::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: radial-gradient(circle, #b8ad99 1px, transparent 1px); background-size: 120px 120px; opacity: 0.03; transform: rotate(45deg); pointer-events: none; animation: drift 80s linear infinite; } @keyframes drift { 0% { transform: rotate(45deg) translateY(0); } 100% { transform: rotate(45deg) translateY(-150px); } } .duran-ornament-top, .duran-ornament-bottom { position: absolute; left: 50%; transform: translateX(-50%); width: 85%; height: 20px; background: radial-gradient(circle at center, #b8ad99 0%, transparent 2px), linear-gradient(90deg, transparent, rgba(184, 173, 153, 0.34), transparent); background-size: 24px 20px, 100% 1px; background-position: center, center; background-repeat: no-repeat, no-repeat; z-index: 1; opacity: 0.55; } .duran-ornament-top { top: 25px; } .duran-ornament-bottom { bottom: 25px; } .duran-symbol { width: 760px; max-width: 100%; margin: 0 auto 30px; font-family: 'Cinzel', serif; font-size: 32px; letter-spacing: 0.3em; opacity: 0.85; text-shadow: 0 0 25px rgba(184, 173, 153, 0.35); animation: pulse 4s ease-in-out infinite alternate; position: relative; z-index: 2; } @keyframes pulse { 0% { opacity: 0.45; text-shadow: 0 0 10px rgba(184, 173, 153, 0.12); } 100% { opacity: 1; text-shadow: 0 0 30px rgba(184, 173, 153, 0.55); } } .duran-preset-card, .duran-update-box, .duran-notice-card, .duran-main-frame, .duran-play-box, .duran-gallery-wrap, .duran-title, .duran-subtitle, .duran-intro, .duran-footer { width: 760px; max-width: 100%; margin-left: auto; margin-right: auto; position: relative; z-index: 2; } .duran-preset-card { margin-top: 0; margin-bottom: 42px; padding: 30px 28px 32px; border-radius: 10px; background: radial-gradient(circle at 50% 0%, rgba(184, 173, 153, 0.09), transparent 72%), rgba(16, 20, 24, 0.95) !important; border-top: 1px solid rgba(184, 173, 153, 0.48) !important; border-right: 1px solid rgba(184, 173, 153, 0.48) !important; border-bottom: 1px solid rgba(184, 173, 153, 0.48) !important; border-left: 3px solid #b8ad99 !important; box-shadow: 0 18px 44px rgba(9, 11, 10, 0.64), inset 0 0 0 1px rgba(184, 173, 153, 0.13), inset 0 0 32px rgba(184, 173, 153, 0.04) !important; text-align: center !important; overflow: hidden; position: relative; } .duran-preset-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(184, 173, 153, 0.16) !important; border-radius: 6px; pointer-events: none; z-index: 0; } .duran-preset-card > * { position: relative; z-index: 1; } .duran-preset-kicker { display: block; margin-bottom: 12px; font-size: 22px; font-weight: 900; letter-spacing: 0.08em; text-shadow: 0 4px 18px rgba(9, 11, 10, 0.9), 0 0 18px rgba(184, 173, 153, 0.22) !important; } .duran-preset-code { display: inline-block; margin: 4px auto 18px; padding: 10px 26px; border: 1px solid rgba(184, 173, 153, 0.58) !important; background: rgba(13, 16, 17, 0.72) !important; font-family: 'Cinzel', serif; font-size: 46px; font-weight: 900; line-height: 1.1; letter-spacing: 0.09em; box-shadow: 0 10px 26px rgba(9, 11, 10, 0.58), inset 0 0 20px rgba(184, 173, 153, 0.05) !important; text-shadow: 0 5px 24px rgba(9, 11, 10, 0.9), 0 0 26px rgba(184, 173, 153, 0.28) !important; } .duran-preset-lead { margin: 0; font-size: 17px; line-height: 1.85; font-weight: 600; word-break: keep-all; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-preset-note { margin: 20px auto 0; padding-top: 18px; border-top: 1px solid rgba(184, 173, 153, 0.18) !important; font-size: 15.5px; line-height: 1.75; word-break: keep-all; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-update-box, .duran-notice-card { border-radius: 6px; background: rgba(16, 20, 24, 0.95) !important; border-top: 1px solid rgba(184, 173, 153, 0.44) !important; border-right: 1px solid rgba(184, 173, 153, 0.44) !important; border-bottom: 1px solid rgba(184, 173, 153, 0.44) !important; border-left: 3px solid #b8ad99 !important; box-shadow: 0 15px 40px rgba(9, 11, 10, 0.62), inset 0 0 0 1px rgba(184, 173, 153, 0.13), inset 0 0 28px rgba(184, 173, 153, 0.04) !important; text-align: left !important; overflow: hidden; position: relative; } .duran-update-box::before, .duran-notice-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(184, 173, 153, 0.16) !important; border-radius: 4px; pointer-events: none; z-index: 0; } .duran-update-box > *, .duran-notice-card > * { position: relative; z-index: 1; } .duran-update-box { margin-top: 0; margin-bottom: 50px; } .duran-update-head { cursor: pointer; list-style: none; padding: 18px 26px; display: flex; align-items: center; justify-content: space-between; transition: background 0.3s ease; text-align: left !important; } .duran-update-head:hover { background: rgba(184, 173, 153, 0.08) !important; } .duran-update-head::-webkit-details-marker { display: none; } .duran-update-title { display: block; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-update-sub { display: block; margin-top: 7px; font-size: 12px; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-update-icon { flex: 0 0 auto; font-family: 'Cinzel', serif; font-size: 26px; line-height: 1; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .duran-update-box[open] .duran-update-icon { transform: rotate(180deg); } .duran-update-body { padding: 0 26px 26px; border-top: 1px solid rgba(184, 173, 153, 0.18) !important; animation: unfold 0.4s ease-out; text-align: left !important; } @keyframes unfold { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .duran-update-date { margin: 24px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-update-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; text-align: left !important; } .duran-update-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.65; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; text-align: left !important; } .duran-update-list li::before { content: "◈"; position: absolute; left: 0; top: 2px; font-size: 12px; } .duran-notice-card { margin-top: 0; margin-bottom: 0; padding: 0; } .duran-notice-title { margin: 0; padding: 18px 26px; font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700; letter-spacing: 0.12em; text-align: left !important; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; border-bottom: 1px solid rgba(184, 173, 153, 0.18) !important; } .duran-notice-list { margin: 0; padding: 22px 26px 26px; list-style: none; display: grid; gap: 16px; text-align: left !important; } .duran-notice-list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.75; word-break: keep-all; text-align: left !important; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-notice-list li::before { content: "◈"; position: absolute; left: 0; top: 3px; font-size: 12px; } .duran-notice-list strong { font-weight: 800; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-display-spacer { width: 760px; max-width: 100%; height: 96px; margin: 0 auto; position: relative; z-index: 2; display: block; flex: none; } .duran-main-frame { margin-top: 0; margin-bottom: 40px; padding: 10px; background: linear-gradient(135deg, rgba(184, 173, 153, 0.15) 0%, transparent 50%, rgba(184, 173, 153, 0.15) 100%) !important; border: 1px solid rgba(184, 173, 153, 0.44) !important; border-radius: 8px; box-shadow: 0 25px 60px rgba(9, 11, 10, 0.82), inset 0 0 0 1px rgba(184, 173, 153, 0.13), inset 0 0 24px rgba(184, 173, 153, 0.03) !important; position: relative; overflow: hidden; } .duran-main-frame::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(184, 173, 153, 0.16) !important; border-radius: 4px; pointer-events: none; z-index: 3; } .duran-main-img { width: 100%; display: block; border-radius: 4px; border: 1px solid #151817; filter: sepia(0.3) contrast(1.15) brightness(0.85); transition: filter 0.6s ease, transform 0.6s ease; object-fit: cover; background-color: #151817 !important; position: relative; z-index: 1; } .duran-main-frame:hover .duran-main-img { filter: sepia(0.1) contrast(1.2) brightness(1); transform: scale(1.01); } .duran-badge { display: inline-block; font-family: 'Cinzel', serif; padding: 8px 24px; margin-bottom: 24px; background: rgba(13, 16, 17, 0.7) !important; border: 1px solid rgba(184, 173, 153, 0.55) !important; font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; position: relative; z-index: 2; box-shadow: 0 5px 15px rgba(9, 11, 10, 0.5); text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-title { margin-top: 0; margin-bottom: 0; font-size: 52px; font-weight: 900; text-shadow: 0 5px 25px rgba(9, 11, 10, 0.9), 0 0 20px rgba(184, 173, 153, 0.25) !important; letter-spacing: -0.02em; } .duran-divider { width: 140px; height: 2px; margin: 30px auto; background: linear-gradient(90deg, transparent, #b8ad99, transparent) !important; position: relative; z-index: 2; } .duran-divider::after { content: '♦'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 16px; background: #101513 !important; padding: 0 12px; } .duran-subtitle { margin-top: 0; margin-bottom: 35px; font-size: 22px; font-weight: 400; font-style: italic; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-intro { margin-top: 0; margin-bottom: 50px; font-size: 17px; line-height: 1.9; word-break: keep-all; text-shadow: 0 2px 5px rgba(9, 11, 10, 0.88) !important; } .duran-play-box { margin-top: 0; padding: 50px 40px; background: radial-gradient(circle at 50% 0%, rgba(184, 173, 153, 0.06), transparent 70%), rgba(13, 16, 17, 0.68) !important; border: 1px solid rgba(184, 173, 153, 0.44) !important; border-radius: 12px; box-shadow: 0 20px 50px rgba(9, 11, 10, 0.55), inset 0 0 0 1px rgba(184, 173, 153, 0.13), inset 0 0 24px rgba(184, 173, 153, 0.03) !important; position: relative; overflow: hidden; } .duran-play-box::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(184, 173, 153, 0.16) !important; border-radius: 7px; pointer-events: none; z-index: 0; } .duran-play-box > * { position: relative; z-index: 1; } .duran-section-label { font-family: 'Cinzel', serif; text-align: center !important; margin-bottom: 30px; font-size: 20px; letter-spacing: 0.25em; text-shadow: 0 2px 8px rgba(9, 11, 10, 0.88) !important; } .duran-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; text-align: left !important; } .duran-step-card { display: flex; flex-direction: column; background: rgba(18, 22, 23, 0.86) !important; border: 1px solid rgba(184, 173, 153, 0.44) !important; border-radius: 8px; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; text-align: left !important; box-shadow: 0 20px 50px rgba(9, 11, 10, 0.38), inset 0 0 0 1px rgba(184, 173, 153, 0.13), inset 0 0 24px rgba(184, 173, 153, 0.03) !important; } .duran-step-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(184, 173, 153, 0.16) !important; border-radius: 4px; pointer-events: none; z-index: 3; } .duran-step-card:hover { transform: translateY(-8px); background: rgba(24, 28, 29, 0.96) !important; border-color: rgba(184, 173, 153, 0.65) !important; box-shadow: 0 20px 40px rgba(9, 11, 10, 0.8), 0 0 25px rgba(184, 173, 153, 0.12), inset 0 0 0 1px rgba(184, 173, 153, 0.13), inset 0 0 28px rgba(184, 173, 153, 0.04) !important; } .duran-card-img-wrapper { width: 100%; height: 160px; overflow: hidden; position: relative; border-bottom: 1px solid rgba(184, 173, 153, 0.18) !important; background-color: #151817 !important; z-index: 1; } .duran-card-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) sepia(40%) brightness(0.8); transition: transform 0.6s ease, filter 0.6s ease; } .duran-step-card:hover .duran-card-img { transform: scale(1.08); filter: grayscale(0%) sepia(10%) brightness(1); } .duran-step-content { padding: 24px; flex-grow: 1; position: relative; text-align: left !important; z-index: 1; } .duran-step-number { font-family: 'Cinzel', serif; font-size: 32px; position: absolute; top: 15px; right: 20px; font-weight: 700; line-height: 1; pointer-events: none; opacity: 0.42; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-step-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; position: relative; z-index: 1; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; text-align: left !important; } .duran-step-text { font-size: 14px; line-height: 1.7; position: relative; z-index: 1; word-break: keep-all; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; text-align: left !important; } .duran-step-card.no-img-card { grid-column: 1 / -1; flex-direction: column; align-items: center; justify-content: center; text-align: center !important; padding: 40px 30px; background: radial-gradient(circle at center, rgba(184, 173, 153, 0.08) 0%, rgba(18, 22, 23, 0.86) 70%) !important; border: 1px solid rgba(184, 173, 153, 0.44) !important; } .duran-step-card.no-img-card .duran-step-number { position: static; margin-bottom: 15px; font-size: 42px; opacity: 0.6; } .duran-step-card.no-img-card .duran-step-content { padding: 0; width: 100%; text-align: center !important; } .duran-step-card.no-img-card .duran-step-title, .duran-step-card.no-img-card .duran-step-text { text-align: center !important; } .duran-start-example { margin-top: 40px; padding: 24px; background: linear-gradient(90deg, transparent, rgba(184, 173, 153, 0.08), transparent) !important; border-top: 1px solid rgba(184, 173, 153, 0.18) !important; border-bottom: 1px solid rgba(184, 173, 153, 0.18) !important; font-size: 15px; line-height: 1.8; font-style: italic; text-align: center !important; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-start-example span { display: block; margin-top: 10px; font-size: 17px; font-weight: 700; text-shadow: 0 2px 8px rgba(9, 11, 10, 0.88) !important; } .highlight-text { font-weight: 700; text-shadow: 0 2px 8px rgba(9, 11, 10, 0.88) !important; } .duran-gallery-wrap { margin-top: 80px; border-top: 1px dashed rgba(184, 173, 153, 0.24) !important; padding-top: 60px; } .duran-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin-top: 40px; } .duran-gallery-item { display: block; text-decoration: none; border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 3 / 4; border: 1px solid rgba(184, 173, 153, 0.44) !important; background: #151817 !important; box-shadow: 0 10px 20px rgba(9, 11, 10, 0.52), inset 0 0 0 1px rgba(184, 173, 153, 0.13), inset 0 0 24px rgba(184, 173, 153, 0.03) !important; cursor: pointer; } .duran-gallery-item::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(184, 173, 153, 0.16) !important; border-radius: 4px; pointer-events: none; z-index: 3; } .duran-gallery-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%) sepia(30%) brightness(0.7); transition: transform 0.5s ease, filter 0.5s ease; } .duran-gallery-item:hover .duran-gallery-img { transform: scale(1.08); filter: grayscale(0%) sepia(0%) brightness(1.1); } .duran-gallery-caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 10px 15px; background: linear-gradient(0deg, rgba(9, 11, 10, 0.9) 0%, transparent 100%) !important; font-size: 13px; text-align: center !important; z-index: 2; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; font-weight: 700; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } .duran-gallery-item:hover .duran-gallery-caption { opacity: 1; transform: translateY(0); } .duran-image-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 40px 24px; background: radial-gradient(circle at center, rgba(184, 173, 153, 0.08), transparent 48%), rgba(9, 11, 10, 0.88) !important; backdrop-filter: blur(6px); } .duran-image-overlay:target { display: flex; animation: overlayFade 0.28s ease-out; } @keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } } .duran-overlay-backdrop { position: absolute; inset: 0; cursor: default; } .duran-overlay-frame { position: relative; z-index: 1; width: min(92vw, 820px); max-height: 90vh; padding: 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(184, 173, 153, 0.22), transparent 42%, rgba(184, 173, 153, 0.16)), rgba(12, 15, 16, 0.94) !important; border: 1px solid rgba(184, 173, 153, 0.44) !important; box-shadow: 0 30px 90px rgba(9, 11, 10, 0.92), 0 0 45px rgba(184, 173, 153, 0.08), inset 0 0 0 1px rgba(184, 173, 153, 0.13), inset 0 0 28px rgba(184, 173, 153, 0.04) !important; animation: overlayRise 0.32s cubic-bezier(0.22, 0.9, 0.24, 1); } .duran-overlay-frame::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(184, 173, 153, 0.16) !important; border-radius: 6px; pointer-events: none; z-index: 2; } @keyframes overlayRise { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .duran-overlay-img { display: block; width: 100%; max-height: 78vh; object-fit: contain; border-radius: 5px; border: 1px solid #151817; background: #151817 !important; filter: contrast(1.05) brightness(0.96); position: relative; z-index: 1; } .duran-overlay-caption { padding: 14px 8px 4px; font-size: 14px; text-align: center !important; letter-spacing: 0.04em; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; position: relative; z-index: 3; } .duran-overlay-close { position: absolute; top: -18px; right: -18px; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: rgba(13, 16, 17, 0.96) !important; border: 1px solid rgba(184, 173, 153, 0.45) !important; font-family: 'Cinzel', serif; font-size: 22px; line-height: 1; text-decoration: none; box-shadow: 0 10px 24px rgba(9, 11, 10, 0.72), 0 0 18px rgba(184, 173, 153, 0.12); transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; z-index: 4; } .duran-overlay-close:hover { transform: rotate(90deg) scale(1.08); background: rgba(30, 27, 23, 0.98) !important; border-color: rgba(184, 173, 153, 0.72) !important; } .duran-footer { margin-top: 70px; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.3em; text-shadow: 0 2px 6px rgba(9, 11, 10, 0.88) !important; } @media (max-width: 768px) { body { padding: 24px 12px; } .duran-wrap { padding: 40px 20px; } .duran-update-head, .duran-notice-title { padding: 18px 20px; } .duran-update-body { padding: 0 20px 24px; } .duran-notice-list { padding: 20px 20px 24px; } .duran-notice-list li, .duran-update-list li { font-size: 14px; } .duran-display-spacer { height: 64px; } .duran-preset-card { margin-bottom: 32px; padding: 26px 20px 28px; } .duran-preset-kicker { font-size: 18px; } .duran-preset-code { font-size: 34px; letter-spacing: 0.06em; padding: 9px 18px; } .duran-preset-lead { font-size: 15px; } .duran-preset-note { font-size: 14px; } .duran-title { font-size: 38px; } .duran-subtitle { font-size: 18px; } .duran-play-box { padding: 30px 20px; } .duran-card-grid { grid-template-columns: 1fr; } .duran-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .duran-image-overlay { padding: 28px 14px; } .duran-overlay-frame { width: 94vw; padding: 8px; } .duran-overlay-img { max-height: 76vh; } .duran-overlay-close { top: -14px; right: -10px; width: 34px; height: 34px; font-size: 20px; } .duran-overlay-caption { font-size: 13px; } } ✣ 채팅방 설정 프리셋 P4CB-DT5K 으로 진행하시길 추천드립니다. 잼삼플로 테스트해 아마 다른 모델로도 큰문제 없이 즐기실수 있을겁니다. 유저노트는 기억보조용으로 쓰시는걸 추천드립니다. 전령의 두루마리 (업데이트 내역) 인장을 클릭하여 봉인을 해제하십시오 ▼ 제국력 2026.05.20 · 열 한번째 서신 전체 지문을 UI화하여 몰입도를 올렸습니다. 이제 보보가 이것저것 줏어옵니다. 제국력 2026.05.19 · 열 번째 서신 오류 핫픽스! 이미지와 애니깨짐 수정! 대화씬 추가! 이제 캐릭터가 추가 될때마다 대화가 추가 됩니다. 제국력 2026.05.18 · 아홉 번째 서신 이제 주사위 굴림 성공판정을 쉽게 확인할 수 있습니다! 비주얼 요소가 업데이트 됬습니다! 제국력 2026.05.17 · 여덟 번째 서신 듀란에게 동행이 생겼습니다! 바로 문턱 수달 보보!. 보보는 매턴 어디선가 뭘 뒤져 가져옵니다. 하지만 그게 쓸모있는지 없는지는 알수 없어요! 제국력 2026.05.17 · 일곱 번째 서신 전반적인 UI를 개선했습니다. 제국력 2026.05.16 · 여섯 번째 서신 듀란의 행동과 액션이 다양 해졌습니다..!! 현재 100개의 개별 에셋이 상황에 맞게 랜덤으로 조합중입니다 우리애가 말을해요! 이제 대사도 출력됩니다! 제국력 2026.05.16 · 다섯 번째 서신 주사위 배경도 상황에 따라 변경이 됩니다! 듀란이 살아 숨쉽니다! 이제 그냥 숨만쉬지 않습니다! 제국력 2026.05.15 · 네 번째 서신 이제 주사위를 좀더 비주얼틱하게 확인 하실 수 있습니다! 각 상황과 배경에 맞는 배경이미지와 보드 세팅을 즐기세요! 제국력 2026.05.14 · 세 번째 서신 오래된 고서적 스타일의 타로 카드 레이아웃이 적용되었습니다. 시작의 맹세(5번 항목)가 돋보이도록 마도서 양식으로 재디자인 되었습니다. 기록보관소(갤러리)가 신설되었습니다. 제국력 2026.05.14 · 두 번째 서신 하단 이미지 영역에 자연스러운 효과들이 추가되었습니다. 살아 숨쉬는 듀란을 만나보세요! 제국력 2026.05.14 · 첫 번째 서신 전체 스토리 라인이 정리되었습니다. 로직 및 시스템이 정리되었습니다. 로어북이 강화되었습니다. 이제는 장막도 주사위를 던집니다! DISPLAY CHECK 플레이 중 운명의흔적, 새운명의패, 장면 SVG, 듀란 대사 SVG가 정상적으로 표시되는지 확인하십시오. 표기가 보이지 않거나 일부 이미지가 누락되면 먼저 브라우저를 새로고침하십시오. 새로고침 후에도 표시되지 않으면 해당 턴의 출력이 깨진 것이므로 리롤하십시오. Chronicle of Duran 듀란일대기 그는 어떻게 죽지 못하는 기사가 되었나 이름 없는 피난민으로 살아남은 소년 듀란. 잿더미가 된 고향과 잊힌 맹세, 그리고 첫 전장의 문턱에서 그는 기사도보다 먼저 생존의 의미를 배우기 시작한다. HOW TO PLAY I 운명의 카드가 뒤집힙니다 턴이 시작되면 딜러가 새로운 카드를 공개합니다. 사건, 위협, 인물, 장소 등 마주할 운명의 장면이 펼쳐집니다. II 행동을 선언하십시오 플레이어는 듀란이 무엇을 할지 결정합니다. 공격, 설득, 도주, 침묵 등 당신의 짧은 결단이 다음 장면을 이끕니다. III 주사위의 심판 결과가 불확실한 행동은 주사위로 판정합니다. 성공은 길을 열지만, 실패는 장막의 개입을 부릅니다. IV 지워지지 않는 흉터 판정 결과는 다음 카드로 이어집니다. 듀란이 얻은 흔적, 상처, 원한은 사라지지 않고 발목을 잡습니다. V 시작의 맹세 처음 선택하는 '배경'이 듀란의 출발점을 정합니다. 이에 따라 칭호와 초기 장비가 변합니다. 무음의 시작을 택한다면, 그는 언제나 하로몬트의 종자로 이 잔혹한 서사시를 엽니다. 이야기의 첫 장은 이렇게 넘기십시오. “듀란은 숨을 죽이고, 폐허 너머에서 들려오는 발소리를 살핀다.” ARCHIVE 기록보관소 Illust 01 Illust 02 Illust 03 Illust 04 Illust 05 Illust 06 Illust 07 Illust 08 GREENHOLLOW · RAVENSTONE · THE UNDYING KNIGHT × Illust 01 × Illust 02 × Illust 03 × Illust 04 × Illust 05 × Illust 06 × Illust 07 × Illust 08