feat(redesign): 약관 sticky 목차 + 조항 카드 구조
terms.jsp에 .terms grid + .terms-toc sticky 목차(앵커 #a1~#a10) 신규 추가, h2→h3 변환·section id 부여. 조항 본문 텍스트는 무손실 보존(전문 유지), 구조 래핑만. 자체 head/include 보존. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
f266aeef9b
commit
29182a3124
|
|
@ -64,32 +64,68 @@
|
|||
.policy-doc__body {
|
||||
padding: 1.35rem;
|
||||
}
|
||||
.policy-section + .policy-section {
|
||||
margin-top: 1.55rem;
|
||||
padding-top: 1.55rem;
|
||||
border-top: 1px solid var(--border);
|
||||
/* terms layout */
|
||||
.terms {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 28px;
|
||||
}
|
||||
.policy-section h2 {
|
||||
margin: 0 0 0.7rem;
|
||||
.terms-toc {
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
align-self: start;
|
||||
border-right: 1px solid var(--border);
|
||||
padding-right: 8px;
|
||||
}
|
||||
.terms-toc .toc-title {
|
||||
font-size: 11px;
|
||||
letter-spacing: .12em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.terms-toc a {
|
||||
display: block;
|
||||
font-size: 13.5px;
|
||||
color: var(--text-muted);
|
||||
padding: 7px 0 7px 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.terms-toc a:hover { color: var(--text); }
|
||||
.terms-toc a.on {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
border-left: 2px solid var(--accent);
|
||||
padding-left: 12px;
|
||||
}
|
||||
.terms-body section {
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
scroll-margin-top: 24px;
|
||||
}
|
||||
.terms-body section:last-child { border-bottom: none; }
|
||||
.terms-body h3 {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.35;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
margin: 0 0 0.7rem;
|
||||
}
|
||||
.policy-section p,
|
||||
.policy-section li {
|
||||
.terms-body p,
|
||||
.terms-body li {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.925rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.policy-section p {
|
||||
margin: 0.45rem 0 0;
|
||||
}
|
||||
.policy-section ul,
|
||||
.policy-section ol {
|
||||
.terms-body p { margin: 0.45rem 0 0; }
|
||||
.terms-body ul,
|
||||
.terms-body ol {
|
||||
margin: 0.6rem 0 0;
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
.policy-section strong {
|
||||
color: var(--text);
|
||||
.terms-body strong { color: var(--text); }
|
||||
@media (max-width: 720px) {
|
||||
.terms { grid-template-columns: 1fr; }
|
||||
.terms-toc { position: static; border-right: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -102,91 +138,113 @@
|
|||
<p>시행일: 2026년 4월 16일</p>
|
||||
</header>
|
||||
<div class="policy-doc__body">
|
||||
<section class="policy-section">
|
||||
<h2>제1조 (목적)</h2>
|
||||
<p>본 약관은 개인 개발자(이하 "운영자")가 제공하는 웹 서비스 '비빔밥'(이하 "서비스")의 이용 조건 및 절차, 이용자와 운영자의 권리, 의무 및 책임 사항을 규정함을 목적으로 합니다.</p>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>제2조 (용어의 정의)</h2>
|
||||
<ol>
|
||||
<li>"서비스"란 운영자가 개발한 웹게임을 게재하고 이용자들이 소통할 수 있는 커뮤니티 공간을 제공하는 웹사이트를 의미합니다.</li>
|
||||
<li>"이용자"란 본 약관에 따라 운영자가 제공하는 서비스를 이용하는 회원 및 비회원을 말합니다.</li>
|
||||
<li>"회원"이란 서비스에 접속하여 본 약관에 동의하고 계정을 생성하여 서비스를 이용하는 자를 말합니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>제3조 (약관의 게시와 개정)</h2>
|
||||
<ol>
|
||||
<li>운영자는 본 약관의 내용을 이용자가 쉽게 알 수 있도록 서비스 초기 화면에 게시합니다.</li>
|
||||
<li>운영자는 관련 법령을 위배하지 않는 범위에서 본 약관을 개정할 수 있습니다.</li>
|
||||
<li>약관이 개정될 경우 적용 일자 및 개정 사유를 명시하여 현행 약관과 함께 서비스 내에 공지합니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>제4조 (서비스의 제공 및 변경)</h2>
|
||||
<ol>
|
||||
<li>서비스는 웹게임 게재 및 커뮤니티 기능을 기본으로 제공하며, 운영자의 판단에 따라 새로운 기능을 추가하거나 기존 기능을 변경할 수 있습니다.</li>
|
||||
<li>본 서비스는 이용자에게 무료로 제공됩니다. 다만, 서비스 운영상 필요한 경우 일부 기능을 유료화하거나 광고를 게재할 수 있으며, 이 경우 사전에 공지합니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>제5조 (회원가입 및 계정 관리)</h2>
|
||||
<ol>
|
||||
<li>이용자는 운영자가 정한 가입 양식에 따라 회원정보를 기입함으로써 회원가입을 신청합니다.</li>
|
||||
<li>모든 회원은 반드시 본인의 정보를 제공하여야 하며, 타인의 정보를 도용할 경우 서비스 이용 제한 및 관련 법령에 따른 처벌을 받을 수 있습니다.</li>
|
||||
<li>회원은 자신의 계정과 비밀번호를 관리할 책임이 있으며, 이를 제3자가 이용하도록 하여서는 안 됩니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>제6조 (이용자의 의무 및 금지 행위)</h2>
|
||||
<p>이용자는 서비스 이용 시 다음 각호의 행위를 하여서는 안 됩니다.</p>
|
||||
<ol>
|
||||
<li>서비스의 안정적인 운영을 방해할 목적으로 하는 데이터 마이닝, 크롤링, 또는 비정상적인 접근 행위</li>
|
||||
<li>타인을 비방하거나 명예를 훼손하는 게시물을 작성하는 행위</li>
|
||||
<li>타인의 저작권 등 지식재산권을 침해하는 행위 (저작권 침해 게임물이나 게시물 게재 등)</li>
|
||||
<li>공공질서 및 미풍양속에 반하는 정보를 유포하는 행위</li>
|
||||
<li>기타 관계 법령 및 운영정책에 위배되는 행위</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>제7조 (게시물의 저작권)</h2>
|
||||
<ol>
|
||||
<li>회원이 서비스 내에 게시한 게시물의 저작권은 해당 게시물의 저작자에게 귀속됩니다.</li>
|
||||
<li>운영자는 서비스의 홍보 및 운영 목적으로 회원의 게시물을 노출하거나 복제, 수정하여 사용할 수 있습니다.</li>
|
||||
<li>회원은 서비스에 저작권 문제가 있는 게시물을 올려서는 안 되며, 이로 인해 발생하는 법적 책임은 게시자 본인에게 있습니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>제8조 (서비스 이용 제한 및 해지)</h2>
|
||||
<ol>
|
||||
<li>회원은 언제든지 서비스 내 설정 메뉴를 통해 회원 탈퇴를 신청할 수 있습니다.</li>
|
||||
<li>운영자는 회원이 제6조의 금지 행위를 한 경우, 사전 통보 없이 서비스 이용을 일시 정지하거나 계정을 삭제할 수 있습니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>제9조 (책임 제한)</h2>
|
||||
<ol>
|
||||
<li>운영자는 천재지변, 서버 점검, 네트워크 장애 등 불가항력적인 사유로 서비스를 제공할 수 없는 경우 책임이 면제됩니다.</li>
|
||||
<li>운영자는 이용자 간 또는 이용자와 제3자 상호 간에 서비스를 매개로 하여 발생한 분쟁에 대해 개입할 의무가 없으며 이로 인한 손해를 배상할 책임이 없습니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>제10조 (준거법 및 관할법원)</h2>
|
||||
<ol>
|
||||
<li>본 약관과 관련하여 발생한 분쟁에 대해서는 대한민국 법을 준거법으로 합니다.</li>
|
||||
<li>서비스 이용으로 발생한 분쟁에 대해 소송이 제기될 경우 <strong>서울중앙지방법원</strong>을 전속 관할법원으로 합니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>부칙</h2>
|
||||
<p>본 약관은 2026년 4월 16일부터 시행됩니다.</p>
|
||||
</section>
|
||||
<section class="policy-section">
|
||||
<h2>문의처</h2>
|
||||
<ul>
|
||||
<li>이메일: artbiit@naver.com</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div class="terms">
|
||||
|
||||
<%-- 목차 (앵커 링크) --%>
|
||||
<nav class="terms-toc">
|
||||
<div class="toc-title">목차</div>
|
||||
<a class="on" href="#a1">제1조 목적</a>
|
||||
<a href="#a2">제2조 용어의 정의</a>
|
||||
<a href="#a3">제3조 약관의 게시와 개정</a>
|
||||
<a href="#a4">제4조 서비스 제공 및 변경</a>
|
||||
<a href="#a5">제5조 회원가입 및 계정 관리</a>
|
||||
<a href="#a6">제6조 이용자의 의무</a>
|
||||
<a href="#a7">제7조 게시물의 저작권</a>
|
||||
<a href="#a8">제8조 이용 제한 및 해지</a>
|
||||
<a href="#a9">제9조 책임 제한</a>
|
||||
<a href="#a10">제10조 준거법 및 관할법원</a>
|
||||
</nav>
|
||||
|
||||
<%-- 본문 (조항) --%>
|
||||
<div class="terms-body">
|
||||
<section id="a1">
|
||||
<h3>제1조 (목적)</h3>
|
||||
<p>본 약관은 개인 개발자(이하 "운영자")가 제공하는 웹 서비스 '비빔밥'(이하 "서비스")의 이용 조건 및 절차, 이용자와 운영자의 권리, 의무 및 책임 사항을 규정함을 목적으로 합니다.</p>
|
||||
</section>
|
||||
<section id="a2">
|
||||
<h3>제2조 (용어의 정의)</h3>
|
||||
<ol>
|
||||
<li>"서비스"란 운영자가 개발한 웹게임을 게재하고 이용자들이 소통할 수 있는 커뮤니티 공간을 제공하는 웹사이트를 의미합니다.</li>
|
||||
<li>"이용자"란 본 약관에 따라 운영자가 제공하는 서비스를 이용하는 회원 및 비회원을 말합니다.</li>
|
||||
<li>"회원"이란 서비스에 접속하여 본 약관에 동의하고 계정을 생성하여 서비스를 이용하는 자를 말합니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="a3">
|
||||
<h3>제3조 (약관의 게시와 개정)</h3>
|
||||
<ol>
|
||||
<li>운영자는 본 약관의 내용을 이용자가 쉽게 알 수 있도록 서비스 초기 화면에 게시합니다.</li>
|
||||
<li>운영자는 관련 법령을 위배하지 않는 범위에서 본 약관을 개정할 수 있습니다.</li>
|
||||
<li>약관이 개정될 경우 적용 일자 및 개정 사유를 명시하여 현행 약관과 함께 서비스 내에 공지합니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="a4">
|
||||
<h3>제4조 (서비스의 제공 및 변경)</h3>
|
||||
<ol>
|
||||
<li>서비스는 웹게임 게재 및 커뮤니티 기능을 기본으로 제공하며, 운영자의 판단에 따라 새로운 기능을 추가하거나 기존 기능을 변경할 수 있습니다.</li>
|
||||
<li>본 서비스는 이용자에게 무료로 제공됩니다. 다만, 서비스 운영상 필요한 경우 일부 기능을 유료화하거나 광고를 게재할 수 있으며, 이 경우 사전에 공지합니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="a5">
|
||||
<h3>제5조 (회원가입 및 계정 관리)</h3>
|
||||
<ol>
|
||||
<li>이용자는 운영자가 정한 가입 양식에 따라 회원정보를 기입함으로써 회원가입을 신청합니다.</li>
|
||||
<li>모든 회원은 반드시 본인의 정보를 제공하여야 하며, 타인의 정보를 도용할 경우 서비스 이용 제한 및 관련 법령에 따른 처벌을 받을 수 있습니다.</li>
|
||||
<li>회원은 자신의 계정과 비밀번호를 관리할 책임이 있으며, 이를 제3자가 이용하도록 하여서는 안 됩니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="a6">
|
||||
<h3>제6조 (이용자의 의무 및 금지 행위)</h3>
|
||||
<p>이용자는 서비스 이용 시 다음 각호의 행위를 하여서는 안 됩니다.</p>
|
||||
<ol>
|
||||
<li>서비스의 안정적인 운영을 방해할 목적으로 하는 데이터 마이닝, 크롤링, 또는 비정상적인 접근 행위</li>
|
||||
<li>타인을 비방하거나 명예를 훼손하는 게시물을 작성하는 행위</li>
|
||||
<li>타인의 저작권 등 지식재산권을 침해하는 행위 (저작권 침해 게임물이나 게시물 게재 등)</li>
|
||||
<li>공공질서 및 미풍양속에 반하는 정보를 유포하는 행위</li>
|
||||
<li>기타 관계 법령 및 운영정책에 위배되는 행위</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="a7">
|
||||
<h3>제7조 (게시물의 저작권)</h3>
|
||||
<ol>
|
||||
<li>회원이 서비스 내에 게시한 게시물의 저작권은 해당 게시물의 저작자에게 귀속됩니다.</li>
|
||||
<li>운영자는 서비스의 홍보 및 운영 목적으로 회원의 게시물을 노출하거나 복제, 수정하여 사용할 수 있습니다.</li>
|
||||
<li>회원은 서비스에 저작권 문제가 있는 게시물을 올려서는 안 되며, 이로 인해 발생하는 법적 책임은 게시자 본인에게 있습니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="a8">
|
||||
<h3>제8조 (서비스 이용 제한 및 해지)</h3>
|
||||
<ol>
|
||||
<li>회원은 언제든지 서비스 내 설정 메뉴를 통해 회원 탈퇴를 신청할 수 있습니다.</li>
|
||||
<li>운영자는 회원이 제6조의 금지 행위를 한 경우, 사전 통보 없이 서비스 이용을 일시 정지하거나 계정을 삭제할 수 있습니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="a9">
|
||||
<h3>제9조 (책임 제한)</h3>
|
||||
<ol>
|
||||
<li>운영자는 천재지변, 서버 점검, 네트워크 장애 등 불가항력적인 사유로 서비스를 제공할 수 없는 경우 책임이 면제됩니다.</li>
|
||||
<li>운영자는 이용자 간 또는 이용자와 제3자 상호 간에 서비스를 매개로 하여 발생한 분쟁에 대해 개입할 의무가 없으며 이로 인한 손해를 배상할 책임이 없습니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="a10">
|
||||
<h3>제10조 (준거법 및 관할법원)</h3>
|
||||
<ol>
|
||||
<li>본 약관과 관련하여 발생한 분쟁에 대해서는 대한민국 법을 준거법으로 합니다.</li>
|
||||
<li>서비스 이용으로 발생한 분쟁에 대해 소송이 제기될 경우 <strong>서울중앙지방법원</strong>을 전속 관할법원으로 합니다.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section>
|
||||
<h3>부칙</h3>
|
||||
<p>본 약관은 2026년 4월 16일부터 시행됩니다.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>문의처</h3>
|
||||
<ul>
|
||||
<li>이메일: artbiit@naver.com</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in New Issue