DB 테이블 정보 및 스크립트 수정(20260303)

docker/mysql/initdb/init.sql

@@ -1,12 +1,595 @@
--- 팀원들이 공통으로 사용할 초기 테이블 구조 생성
+-- 컨텐츠 등록
-CREATE TABLE IF NOT EXISTS users (
+CREATE TABLE `edu`.`contents` (
-    id INT AUTO_INCREMENT PRIMARY KEY,
+	`content_id`      VARCHAR(20)  NOT NULL COMMENT '콘텐츠ID', -- 콘텐츠ID
-    username VARCHAR(50) NOT NULL,
+	`category_code`   VARCHAR(20)  NULL     COMMENT '카테고리', -- 카테고리
-    email VARCHAR(100) NOT NULL,
+	`category_group`  VARCHAR(20)  NULL     COMMENT '케테고리구분', -- 케테고리구분
-    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+	`title`           VARCHAR(200) NULL     COMMENT '콘텐츠명', -- 콘텐츠명
-);
+	`description`     TEXT         NULL     COMMENT '콘텐츠설명', -- 콘텐츠설명
+	`description2`    TEXT         NULL     COMMENT '콘텐츠설명2', -- 콘텐츠설명2
+	`content_url`     VARCHAR(200) NULL     COMMENT '콘텐츠url', -- 콘텐츠url
+	`thumbnail_url`   VARCHAR(200) NULL     COMMENT '썸네일url', -- 썸네일url
+	`base_year`       CHAR(4)      NULL     COMMENT '기준년도', -- 기준년도
+	`start_date`      DATE         NULL     COMMENT '기준일자', -- 기준일자
+	`end_date`        DATE         NULL     COMMENT '종료일자', -- 종료일자
+	`sort_order`      INTEGER      NULL     COMMENT '정렬순번', -- 정렬순번
+	`goal_code`       VARCHAR(20)  NULL     COMMENT '학습목표코드', -- 학습목표코드
+	`image_name`      VARCHAR(200) NULL     COMMENT '대표이미지명', -- 대표이미지명
+	`image_path`      VARCHAR(200) NULL     COMMENT '이미지경로', -- 이미지경로
+	`is_offer`        CHAR(1)      NULL     COMMENT '추천콘텐츠적용여부', -- 추천콘텐츠적용여부
+	`offer_id`        VARCHAR(20)  NULL     COMMENT '제안ID', -- 제안ID
+	`issue_type_code` VARCHAR(20)  NULL     COMMENT '인사이트이슈구분', -- 인사이트이슈구분
+	`is_active`       CHAR(1)      NULL     COMMENT '사용여부', -- 사용여부
+	`created_by`      VARCHAR(20)  NULL     COMMENT '등록자', -- 등록자
+	`created_at`      TIMESTAMP    NULL     COMMENT '등록일', -- 등록일
+	`updated_by`      VARCHAR(20)  NULL     COMMENT '수정자', -- 수정자
+	`updated_at`      TIMESTAMP    NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '컨텐츠 등록';
 
--- 초기 테스트를 위한 더미 데이터 삽입 (선택 사항)
+-- 컨텐츠 등록
-INSERT INTO users (username, email) VALUES 
+ALTER TABLE `edu`.`contents`
-('test_user_1', 'user1@hmac-edu.com'),
+	ADD CONSTRAINT `PK_contents` -- 컨텐츠 등록 기본키
-('test_user_2', 'user2@hmac-edu.com');
+		PRIMARY KEY (
+			`content_id` -- 콘텐츠ID
+		);
+
+-- 마이클래스 학습목표 등록
+CREATE TABLE `edu`.`learning_goals` (
+	`goal_code`  VARCHAR(20)  NOT NULL COMMENT '학습목표 코드', -- 학습목표 코드
+	`title`      VARCHAR(200) NULL     COMMENT '학습목표제목', -- 학습목표제목
+	`base_year`  CHAR(4)      NULL     COMMENT '기준년도', -- 기준년도
+	`end_date`   DATE         NULL     COMMENT '종료일', -- 종료일
+	`is_active`  CHAR(1)      NULL     COMMENT '사용여부', -- 사용여부
+	`sort_order` INTEGER      NULL     COMMENT '정렬순번', -- 정렬순번
+	`remarks`    VARCHAR(200) NULL     COMMENT '비고', -- 비고
+	`created_by` VARCHAR(20)  NULL     COMMENT '등록자', -- 등록자
+	`created_at` TIMESTAMP    NULL     COMMENT '등록일', -- 등록일
+	`updated_by` VARCHAR(20)  NULL     COMMENT '수정자', -- 수정자
+	`updated_at` TIMESTAMP    NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '마이클래스 학습목표 등록';
+
+-- 마이클래스 학습목표 등록
+ALTER TABLE `edu`.`learning_goals`
+	ADD CONSTRAINT `PK_learning_goals` -- 마이클래스 학습목표 등록 기본키
+		PRIMARY KEY (
+			`goal_code` -- 학습목표 코드
+		);
+
+-- 코드상세
+CREATE TABLE `edu`.`codes` (
+	`group_code` VARCHAR(10)  NOT NULL COMMENT '메인코드', -- 메인코드
+	`code`       VARCHAR(10)  NOT NULL COMMENT '서브코드', -- 서브코드
+	`base_code`  VARCHAR(20)  NOT NULL COMMENT '기준코드', -- 기준코드
+	`code_name`  VARCHAR(250) NULL     COMMENT '코드명', -- 코드명
+	`is_active`  CHAR(1)      NULL     COMMENT '사용구분', -- 사용구분
+	`desc01`     VARCHAR(250) NULL     COMMENT '설명1', -- 설명1
+	`desc02`     VARCHAR(250) NULL     COMMENT '설명2', -- 설명2
+	`desc03`     VARCHAR(250) NULL     COMMENT '설명3', -- 설명3
+	`desc04`     VARCHAR(250) NULL     COMMENT '설명4', -- 설명4
+	`desc05`     VARCHAR(250) NULL     COMMENT '설명5', -- 설명5
+	`created_by` VARCHAR(20)  NULL     COMMENT '등록자', -- 등록자
+	`created_at` TIMESTAMP    NULL     COMMENT '등록일', -- 등록일
+	`updated_by` VARCHAR(20)  NULL     COMMENT '수정자', -- 수정자
+	`updated_at` TIMESTAMP    NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '코드상세';
+
+-- 코드상세
+ALTER TABLE `edu`.`codes`
+	ADD CONSTRAINT `PK_codes` -- 코드상세 기본키
+		PRIMARY KEY (
+			`group_code`, -- 메인코드
+			`code`        -- 서브코드
+		);
+
+-- 통합인사정보
+CREATE TABLE `edu`.`users` (
+	`member_id`     VARCHAR(20)  NOT NULL COMMENT 'id', -- id
+	`sys_comp_code` VARCHAR(20)  NOT NULL COMMENT '기준법인', -- 기준법인
+	`name`          VARCHAR(100) NULL     COMMENT '성명', -- 성명
+	`dept_name`     VARCHAR(100) NULL     COMMENT '부서', -- 부서
+	`rank_name`     VARCHAR(100) NULL     COMMENT '직위', -- 직위
+	`join_date`     DATE         NULL     COMMENT '입사일', -- 입사일
+	`belong_comp`   VARCHAR(100) NULL     COMMENT '소속회사', -- 소속회사
+	`working_cpmp`  VARCHAR(100) NULL     COMMENT '근무회사', -- 근무회사
+	`intra_pw`      VARCHAR(20)  NULL     COMMENT 'password' -- password
+)
+COMMENT '통합인사정보';
+
+-- 통합인사정보
+ALTER TABLE `edu`.`users`
+	ADD CONSTRAINT `PK_users` -- 통합인사정보 기본키
+		PRIMARY KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 댓글정보
+CREATE TABLE `edu`.`comments` (
+	`id`            VARCHAR(12)  NOT NULL COMMENT '댓글ID', -- 댓글ID
+	`parent_id`     VARCHAR(12)  NULL     COMMENT '상위댓글ID', -- 상위댓글ID
+	`sys_comp_code` VARCHAR(20)  NULL     COMMENT '기준법인', -- 기준법인
+	`member_id`     VARCHAR(20)  NOT NULL COMMENT 'id', -- id
+	`comment`       VARCHAR(255) NULL     COMMENT '내용', -- 내용
+	`content_id`    INTEGER      NULL     COMMENT '콘텐츠ID', -- 콘텐츠ID
+	`created_by`    VARCHAR(20)  NULL     COMMENT '등록자', -- 등록자
+	`created_at`    TIMESTAMP    NULL     COMMENT '등록일', -- 등록일
+	`updated_by`    VARCHAR(20)  NULL     COMMENT '수정자', -- 수정자
+	`updated_at`    TIMESTAMP    NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '댓글정보';
+
+-- 댓글정보
+ALTER TABLE `edu`.`comments`
+	ADD CONSTRAINT `PK_comments` -- 댓글정보 기본키
+		PRIMARY KEY (
+			`id` -- 댓글ID
+		);
+
+-- 학습이력
+CREATE TABLE `edu`.`learning_histories` (
+	`member_id`       VARCHAR(20)  NOT NULL COMMENT 'id', -- id
+	`sys_comp_code`   VARCHAR(20)  NOT NULL COMMENT '기준법인', -- 기준법인
+	`content_id`      VARCHAR(20)  NOT NULL COMMENT '콘텐츠ID', -- 콘텐츠ID
+	`first_viewed_at` DATETIME     NULL     COMMENT '최초시청일시', -- 최초시청일시
+	`last_viewed_at`  DATETIME     NULL     COMMENT '최종시청일시', -- 최종시청일시
+	`watch_tm`        DECIMAL(18)  NULL     COMMENT '영상시작길이', -- 영상시작길이
+	`content_tm`      DECIMAL(18)  NULL     COMMENT '영상길이', -- 영상길이
+	`all_tm`          DECIMAL(18)  NULL     COMMENT '누적시청시간', -- 누적시청시간
+	`completed_at`    DATETIME     NULL     COMMENT '학습완료일시', -- 학습완료일시
+	`comment`         VARCHAR(200) NULL     COMMENT '한줄소감', -- 한줄소감
+	`is_watching`     CHAR(1)      NULL     COMMENT '시청중컨텐츠여부' -- 시청중컨텐츠여부
+)
+COMMENT '학습이력';
+
+-- 학습이력
+ALTER TABLE `edu`.`learning_histories`
+	ADD CONSTRAINT `PK_learning_histories` -- 학습이력 기본키
+		PRIMARY KEY (
+			`member_id`,     -- id
+			`sys_comp_code`, -- 기준법인
+			`content_id`     -- 콘텐츠ID
+		);
+
+-- 컨텐츠저장
+CREATE TABLE `edu`.`content_wishlist` (
+	`member_id`     VARCHAR(20) NOT NULL COMMENT 'id', -- id
+	`sys_comp_code` VARCHAR(20) NOT NULL COMMENT '기준법인', -- 기준법인
+	`content_id`    INTEGER     NOT NULL COMMENT '콘텐츠ID', -- 콘텐츠ID
+	`favorited_at`  DATETIME    NULL     COMMENT '찜한일시', -- 찜한일시
+	`is_active`     CHAR(1)     NULL     COMMENT '사용여부', -- 사용여부
+	`created_by`    VARCHAR(20) NULL     COMMENT '등록자', -- 등록자
+	`created_at`    TIMESTAMP   NULL     COMMENT '등록일', -- 등록일
+	`updated_by`    VARCHAR(20) NULL     COMMENT '수정자', -- 수정자
+	`updated_at`    TIMESTAMP   NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '컨텐츠저장';
+
+-- 컨텐츠저장
+ALTER TABLE `edu`.`content_wishlist`
+	ADD CONSTRAINT `PK_content_wishlist` -- 컨텐츠저장 기본키
+		PRIMARY KEY (
+			`member_id`,     -- id
+			`sys_comp_code`, -- 기준법인
+			`content_id`     -- 콘텐츠ID
+		);
+
+-- 사용자 키워드
+CREATE TABLE `edu`.`user_keywords` (
+	`member_id`     VARCHAR(20)  NOT NULL COMMENT 'id', -- id
+	`sys_comp_code` VARCHAR(20)  NOT NULL COMMENT '기준법인', -- 기준법인
+	`keyword_code`  VARCHAR(20)  NOT NULL COMMENT '키워드코드', -- 키워드코드
+	`keyword_name`  VARCHAR(100) NULL     COMMENT '키워드명', -- 키워드명
+	`created_at`    TIMESTAMP    NULL     COMMENT '등록일', -- 등록일
+	`updated_at`    TIMESTAMP    NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '사용자 키워드';
+
+-- 사용자 키워드
+ALTER TABLE `edu`.`user_keywords`
+	ADD CONSTRAINT `PK_user_keywords` -- 사용자 키워드 기본키
+		PRIMARY KEY (
+			`member_id`,     -- id
+			`sys_comp_code`, -- 기준법인
+			`keyword_code`   -- 키워드코드
+		);
+
+-- 컨텐츠제안하기
+CREATE TABLE `edu`.`content_offer` (
+	`offer_id`      VARCHAR(20)  NOT NULL COMMENT '제안ID', -- 제안ID
+	`type_code`     VARCHAR(20)  NULL     COMMENT '제안구분', -- 제안구분
+	`title`         VARCHAR(200) NULL     COMMENT '제목', -- 제목
+	`reference_url` VARCHAR(255) NULL     COMMENT 'URL', -- URL
+	`reason`        TEXT         NULL     COMMENT '추천이유', -- 추천이유
+	`status_code`   VARCHAR(20)  NULL     COMMENT '제안상태', -- 제안상태
+	`created_at`    TIMESTAMP    NULL     COMMENT '등록일', -- 등록일
+	`updated_at`    TIMESTAMP    NULL     COMMENT '수정일', -- 수정일
+	`member_id`     VARCHAR(20)  NULL     COMMENT 'id', -- id
+	`sys_comp_code` VARCHAR(20)  NULL     COMMENT '기준법인' -- 기준법인
+)
+COMMENT '컨텐츠제안하기';
+
+-- 컨텐츠제안하기
+ALTER TABLE `edu`.`content_offer`
+	ADD CONSTRAINT `PK_content_offer` -- 컨텐츠제안하기 기본키
+		PRIMARY KEY (
+			`offer_id` -- 제안ID
+		);
+
+-- 년도별학습레벨
+CREATE TABLE `edu`.`yearly_learning_stats` (
+	`member_id`      VARCHAR(20) NOT NULL COMMENT 'id', -- id
+	`sys_comp_code`  VARCHAR(20) NOT NULL COMMENT '기준법인', -- 기준법인
+	`stats_year`     CHAR(4)     NOT NULL COMMENT '년도', -- 년도
+	`learning_level` VARCHAR(20) NULL     COMMENT '학습레벨', -- 학습레벨
+	`total_minutes`  DECIMAL(18) NULL     COMMENT '총학습시간(분)', -- 총학습시간(분)
+	`created_at`     TIMESTAMP   NULL     COMMENT '등록일', -- 등록일
+	`updated_at`     TIMESTAMP   NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '년도별학습레벨';
+
+-- 년도별학습레벨
+ALTER TABLE `edu`.`yearly_learning_stats`
+	ADD CONSTRAINT `PK_yearly_learning_stats` -- 년도별학습레벨 기본키
+		PRIMARY KEY (
+			`member_id`,     -- id
+			`sys_comp_code`, -- 기준법인
+			`stats_year`     -- 년도
+		);
+
+-- 컨텐츠 키워드
+CREATE TABLE `edu`.`content_keywords` (
+	`content_id`   VARCHAR(20) NOT NULL COMMENT '콘텐츠ID', -- 콘텐츠ID
+	`keyword_code` VARCHAR(20) NOT NULL COMMENT '키워드코드', -- 키워드코드
+	`is_active`    CHAR(1)     NULL     COMMENT '사용여부', -- 사용여부
+	`created_by`   VARCHAR(20) NULL     COMMENT '등록자', -- 등록자
+	`created_at`   TIMESTAMP   NULL     COMMENT '등록일', -- 등록일
+	`updated_by`   VARCHAR(20) NULL     COMMENT '수정자', -- 수정자
+	`updated_at`   TIMESTAMP   NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '컨텐츠 키워드';
+
+-- 컨텐츠 키워드
+ALTER TABLE `edu`.`content_keywords`
+	ADD CONSTRAINT `PK_content_keywords` -- 컨텐츠 키워드 기본키
+		PRIMARY KEY (
+			`content_id`,   -- 콘텐츠ID
+			`keyword_code`  -- 키워드코드
+		);
+
+-- 접속이력
+CREATE TABLE `edu`.`access_history` (
+	`accessed_at`   TIMESTAMP   NOT NULL COMMENT '접속일시', -- 접속일시
+	`member_id`     VARCHAR(20) NOT NULL COMMENT '사번', -- 사번
+	`sys_comp_code` VARCHAR(20) NULL     COMMENT '기준법인', -- 기준법인
+	`ip_address`    VARCHAR(20) NULL     COMMENT '접속IP' -- 접속IP
+)
+COMMENT '접속이력';
+
+-- 접속이력
+ALTER TABLE `edu`.`access_history`
+	ADD CONSTRAINT `PK_access_history` -- 접속이력 기본키
+		PRIMARY KEY (
+			`accessed_at` -- 접속일시
+		);
+
+-- 코드마스터
+CREATE TABLE `edu`.`code_group` (
+	`group_code` VARCHAR(10)  NOT NULL COMMENT '메인코드', -- 메인코드
+	`group_name` VARCHAR(250) NULL     COMMENT '코드명', -- 코드명
+	`is_active`  CHAR(1)      NULL     COMMENT '사용구분', -- 사용구분
+	`sort_order` INTEGER      NULL     COMMENT '정렬구분', -- 정렬구분
+	`comment`    VARCHAR(250) NULL     COMMENT '코멘트', -- 코멘트
+	`desc01`     VARCHAR(250) NULL     COMMENT '설명1', -- 설명1
+	`desc02`     VARCHAR(250) NULL     COMMENT '설명2', -- 설명2
+	`desc03`     VARCHAR(250) NULL     COMMENT '설명3', -- 설명3
+	`desc04`     VARCHAR(250) NULL     COMMENT '설명4', -- 설명4
+	`desc05`     VARCHAR(250) NULL     COMMENT '설명5', -- 설명5
+	`created_by` VARCHAR(20)  NULL     COMMENT '등록자', -- 등록자
+	`created_at` TIMESTAMP    NULL     COMMENT '등록일', -- 등록일
+	`updated_by` VARCHAR(20)  NULL     COMMENT '수정자', -- 수정자
+	`updated_at` TIMESTAMP    NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '코드마스터';
+
+-- 코드마스터
+ALTER TABLE `edu`.`code_group`
+	ADD CONSTRAINT `PK_code_group` -- 코드마스터 기본키
+		PRIMARY KEY (
+			`group_code` -- 메인코드
+		);
+
+-- 첨부파일
+CREATE TABLE `edu`.`files` (
+	`content_id` VARCHAR(20)  NOT NULL COMMENT '콘텐츠ID', -- 콘텐츠ID
+	`id`         INTEGER      NOT NULL COMMENT '파일ID', -- 파일ID
+	`file_name`  VARCHAR(200) NULL     COMMENT '파일명', -- 파일명
+	`file_type`  VARCHAR(20)  NULL     COMMENT '파일구분', -- 파일구분
+	`file_path`  VARCHAR(200) NULL     COMMENT '저장위치', -- 저장위치
+	`created_by` VARCHAR(20)  NULL     COMMENT '등록자', -- 등록자
+	`created_at` TIMESTAMP    NULL     COMMENT '등록일', -- 등록일
+	`updated_by` VARCHAR(20)  NULL     COMMENT '수정자', -- 수정자
+	`updated_at` TIMESTAMP    NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '첨부파일';
+
+-- 첨부파일
+ALTER TABLE `edu`.`files`
+	ADD CONSTRAINT `PK_files` -- 첨부파일 기본키
+		PRIMARY KEY (
+			`content_id`, -- 콘텐츠ID
+			`id`          -- 파일ID
+		);
+
+-- 선택학습목표
+CREATE TABLE `edu`.`user_learning_goals` (
+	`member_id`      VARCHAR(20) NOT NULL COMMENT 'id', -- id
+	`sys_comp_code`  VARCHAR(20) NOT NULL COMMENT '기준법인', -- 기준법인
+	`goal_code`      VARCHAR(20) NOT NULL COMMENT '학습목표 코드', -- 학습목표 코드
+	`quarter`        VARCHAR(20) NULL     COMMENT '분기', -- 분기
+	`completed_date` DATE        NULL     COMMENT '학습완료일', -- 학습완료일
+	`is_active`      CHAR(1)     NULL     COMMENT '사용여부', -- 사용여부
+	`created_by`     VARCHAR(20) NULL     COMMENT '등록자', -- 등록자
+	`created_at`     TIMESTAMP   NULL     COMMENT '등록일', -- 등록일
+	`updated_by`     VARCHAR(20) NULL     COMMENT '수정자', -- 수정자
+	`updated_at`     TIMESTAMP   NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '선택학습목표';
+
+-- 선택학습목표
+ALTER TABLE `edu`.`user_learning_goals`
+	ADD CONSTRAINT `PK_user_learning_goals` -- 선택학습목표 기본키
+		PRIMARY KEY (
+			`member_id`,     -- id
+			`sys_comp_code`, -- 기준법인
+			`goal_code`      -- 학습목표 코드
+		);
+
+-- 법인별키워드
+CREATE TABLE `edu`.`recommend_keywords` (
+	`sys_comp_code` VARCHAR(20) NOT NULL COMMENT '기준법인', -- 기준법인
+	`keyword_code`  VARCHAR(20) NOT NULL COMMENT '키워드코드', -- 키워드코드
+	`is_active`     CHAR(1)     NULL     COMMENT '사용여부', -- 사용여부
+	`created_by`    VARCHAR(20) NULL     COMMENT '등록자', -- 등록자
+	`created_at`    TIMESTAMP   NULL     COMMENT '등록일', -- 등록일
+	`updated_by`    VARCHAR(20) NULL     COMMENT '수정자', -- 수정자
+	`updated_at`    TIMESTAMP   NULL     COMMENT '수정일' -- 수정일
+)
+COMMENT '법인별키워드';
+
+-- 법인별키워드
+ALTER TABLE `edu`.`recommend_keywords`
+	ADD CONSTRAINT `PK_recommend_keywords` -- 법인별키워드 기본키
+		PRIMARY KEY (
+			`sys_comp_code`, -- 기준법인
+			`keyword_code`   -- 키워드코드
+		);
+
+-- 뱃지정보
+CREATE TABLE `edu`.`user_badges` (
+	`member_id`     VARCHAR(20) NOT NULL COMMENT 'id', -- id
+	`sys_comp_code` VARCHAR(20) NOT NULL COMMENT '기준법인', -- 기준법인
+	`seq`           INTEGER     NOT NULL COMMENT '순번', -- 순번
+	`badge_code`    VARCHAR(20) NULL     COMMENT '뱃지코드', -- 뱃지코드
+	`issued_at`     DATETIME    NULL     COMMENT '지급일자' -- 지급일자
+)
+COMMENT '뱃지정보';
+
+-- 뱃지정보
+ALTER TABLE `edu`.`user_badges`
+	ADD CONSTRAINT `PK_user_badges` -- 뱃지정보 기본키
+		PRIMARY KEY (
+			`member_id`,     -- id
+			`sys_comp_code`, -- 기준법인
+			`seq`            -- 순번
+		);
+
+-- 검색어이력
+CREATE TABLE `edu`.`search_logs` (
+	`member_id`     VARCHAR(20) NOT NULL COMMENT 'id', -- id
+	`sys_comp_code` VARCHAR(20) NOT NULL COMMENT '기준법인', -- 기준법인
+	`seq`           INTEGER     NOT NULL COMMENT '순번', -- 순번
+	`keyword`       VARCHAR(50) NULL     COMMENT '검색어', -- 검색어
+	`searched_at`   DATETIME    NULL     COMMENT '등록일' -- 등록일
+)
+COMMENT '검색어이력';
+
+-- 검색어이력
+ALTER TABLE `edu`.`search_logs`
+	ADD CONSTRAINT `PK_search_logs` -- 검색어이력 기본키
+		PRIMARY KEY (
+			`member_id`,     -- id
+			`sys_comp_code`, -- 기준법인
+			`seq`            -- 순번
+		);
+
+-- 알람이력
+CREATE TABLE `edu`.`notifications` (
+	`member_id` VARCHAR(20)  NOT NULL COMMENT 'id', -- id
+	`corp_code` VARCHAR(20)  NOT NULL COMMENT '기준법인', -- 기준법인
+	`seq`       INTEGER      NOT NULL COMMENT '순번', -- 순번
+	`type_code` VARCHAR(20)  NULL     COMMENT '알람코드', -- 알람코드
+	`message`   VARCHAR(255) NULL     COMMENT '알람내용', -- 알람내용
+	`sent_at`   DATETIME     NULL     COMMENT '알람일시' -- 알람일시
+)
+COMMENT '알람이력';
+
+-- 알람이력
+ALTER TABLE `edu`.`notifications`
+	ADD CONSTRAINT `PK_notifications` -- 알람이력 기본키
+		PRIMARY KEY (
+			`member_id`, -- id
+			`corp_code`, -- 기준법인
+			`seq`        -- 순번
+		);
+
+-- 코드상세
+ALTER TABLE `edu`.`codes`
+	ADD CONSTRAINT `FK_code_group_TO_codes` -- 코드마스터 -> 코드상세
+		FOREIGN KEY (
+			`group_code` -- 메인코드
+		)
+		REFERENCES `edu`.`code_group` ( -- 코드마스터
+			`group_code` -- 메인코드
+		);
+
+-- 댓글정보
+ALTER TABLE `edu`.`comments`
+	ADD CONSTRAINT `FK_users_TO_comments` -- 통합인사정보 -> 댓글정보
+		FOREIGN KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 학습이력
+ALTER TABLE `edu`.`learning_histories`
+	ADD CONSTRAINT `FK_users_TO_learning_histories` -- 통합인사정보 -> 학습이력
+		FOREIGN KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 학습이력
+ALTER TABLE `edu`.`learning_histories`
+	ADD CONSTRAINT `FK_contents_TO_learning_histories` -- 컨텐츠 등록 -> 학습이력
+		FOREIGN KEY (
+			`content_id` -- 콘텐츠ID
+		)
+		REFERENCES `edu`.`contents` ( -- 컨텐츠 등록
+			`content_id` -- 콘텐츠ID
+		);
+
+-- 컨텐츠저장
+ALTER TABLE `edu`.`content_wishlist`
+	ADD CONSTRAINT `FK_users_TO_content_wishlist` -- 통합인사정보 -> 컨텐츠저장
+		FOREIGN KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 사용자 키워드
+ALTER TABLE `edu`.`user_keywords`
+	ADD CONSTRAINT `FK_users_TO_user_keywords` -- 통합인사정보 -> 사용자 키워드
+		FOREIGN KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 컨텐츠제안하기
+ALTER TABLE `edu`.`content_offer`
+	ADD CONSTRAINT `FK_users_TO_content_offer` -- 통합인사정보 -> 컨텐츠제안하기
+		FOREIGN KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 년도별학습레벨
+ALTER TABLE `edu`.`yearly_learning_stats`
+	ADD CONSTRAINT `FK_users_TO_yearly_learning_stats` -- 통합인사정보 -> 년도별학습레벨
+		FOREIGN KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 컨텐츠 키워드
+ALTER TABLE `edu`.`content_keywords`
+	ADD CONSTRAINT `FK_contents_TO_content_keywords` -- 컨텐츠 등록 -> 컨텐츠 키워드
+		FOREIGN KEY (
+			`content_id` -- 콘텐츠ID
+		)
+		REFERENCES `edu`.`contents` ( -- 컨텐츠 등록
+			`content_id` -- 콘텐츠ID
+		);
+
+-- 첨부파일
+ALTER TABLE `edu`.`files`
+	ADD CONSTRAINT `FK_contents_TO_files` -- 컨텐츠 등록 -> 첨부파일
+		FOREIGN KEY (
+			`content_id` -- 콘텐츠ID
+		)
+		REFERENCES `edu`.`contents` ( -- 컨텐츠 등록
+			`content_id` -- 콘텐츠ID
+		);
+
+-- 선택학습목표
+ALTER TABLE `edu`.`user_learning_goals`
+	ADD CONSTRAINT `FK_users_TO_user_learning_goals` -- 통합인사정보 -> 선택학습목표
+		FOREIGN KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 선택학습목표
+ALTER TABLE `edu`.`user_learning_goals`
+	ADD CONSTRAINT `FK_learning_goals_TO_user_learning_goals` -- 마이클래스 학습목표 등록 -> 선택학습목표
+		FOREIGN KEY (
+			`goal_code` -- 학습목표 코드
+		)
+		REFERENCES `edu`.`learning_goals` ( -- 마이클래스 학습목표 등록
+			`goal_code` -- 학습목표 코드
+		);
+
+-- 뱃지정보
+ALTER TABLE `edu`.`user_badges`
+	ADD CONSTRAINT `FK_users_TO_user_badges` -- 통합인사정보 -> 뱃지정보
+		FOREIGN KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 검색어이력
+ALTER TABLE `edu`.`search_logs`
+	ADD CONSTRAINT `FK_users_TO_search_logs` -- 통합인사정보 -> 검색어이력
+		FOREIGN KEY (
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);
+
+-- 알람이력
+ALTER TABLE `edu`.`notifications`
+	ADD CONSTRAINT `FK_users_TO_notifications` -- 통합인사정보 -> 알람이력
+		FOREIGN KEY (
+			`member_id`, -- id
+			`corp_code`  -- 기준법인
+		)
+		REFERENCES `edu`.`users` ( -- 통합인사정보
+			`member_id`,     -- id
+			`sys_comp_code`  -- 기준법인
+		);

src/admin/index.php

@@ -8,12 +8,12 @@ include_once 'header.php';
           전체학습현황
           <span class="ml-4 text-xs font-normal px-2 py-1 bg-gray-200 rounded text-gray-600">전체 학습자 수: 74명</span>
         </h2>
-        <p class="text-sm text-gray-400 mt-1 italic leading-relaxed">법정의무교육 기간: 2025.11.01 ~ 2025.12.15</p>
+        <p class="text-sm text-gray-400 mt-1 italic leading-relaxed">법정의무교육 기간: 2026.11.01 ~ 2026.12.15</p>
       </div>
       <div class="flex items-center space-x-2">
         <div class="flex bg-gray-200 p-1 rounded-md">
-           <button class="px-3 py-1 text-sm rounded bg-white shadow-sm text-gray-700">2025년</button>
+           <button class="px-3 py-1 text-sm rounded text-gray-500 hover:text-gray-800 transition">2025년</button>
-           <button class="px-3 py-1 text-sm text-gray-500 hover:text-gray-800 transition">2026년</button>
+           <button class="px-3 py-1 text-sm rounded bg-[#114b3d] text-white shadow-sm font-bold">2026년</button>
         </div>
         <button class="px-4 py-2 bg-[#2563eb] text-white rounded-md text-sm font-bold flex items-center hover:bg-blue-700 transition shadow-lg">
           <i class="fa-solid fa-file-invoice mr-2"></i>교육결과보고서
@@ -21,36 +21,78 @@ include_once 'header.php';
       </div>
     </header>
 
+    <!-- 통계 카드 3개 -->
     <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+
+      <!-- 법인별 학습인원 현황 (막대 차트) -->
       <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-        <h3 class="font-bold text-gray-800 mb-6 flex items-center justify-between">
+        <h3 class="font-bold text-gray-800 mb-4 flex items-center justify-between text-sm">
           법인별 학습인원 현황
           <i class="fa-solid fa-ellipsis-vertical text-gray-300"></i>
         </h3>
-        <div class="h-44 flex items-end justify-between px-2 space-x-3">
+        <!-- SVG Bar Chart -->
-          <div class="w-full bg-slate-100 rounded-t relative group">
+        <div class="relative w-full" style="height:240px;">
-            <div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 85%;"></div>
+          <svg viewBox="0 0 320 210" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
-            <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">한맥</span>
+            <!-- y=0→svg y=175, y=1800→svg y=10. 범위 165px -->
-          </div>
+            <!-- y_svg = 175 - (val/1800)*165 -->
-          <div class="w-full bg-slate-100 rounded-t relative group">
+
-            <div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 45%;"></div>
+            <!-- 격자선 -->
-            <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">삼안</span>
+            <line x1="42" y1="175" x2="315" y2="175" stroke="#e5e7eb" stroke-width="1"/>
-          </div>
+            <line x1="42" y1="134" x2="315" y2="134" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
-          <div class="w-full bg-slate-100 rounded-t relative group">
+            <line x1="42" y1="93"  x2="315" y2="93"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
-            <div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 25%;"></div>
+            <line x1="42" y1="52"  x2="315" y2="52"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
-            <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">바른</span>
+            <line x1="42" y1="10"  x2="315" y2="10"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
-          </div>
+
+            <!-- Y축 레이블 -->
+            <text x="38" y="178" text-anchor="end" font-size="11" fill="#9ca3af">0</text>
+            <text x="38" y="137" text-anchor="end" font-size="11" fill="#9ca3af">450</text>
+            <text x="38" y="96"  text-anchor="end" font-size="11" fill="#9ca3af">900</text>
+            <text x="38" y="55"  text-anchor="end" font-size="11" fill="#9ca3af">1350</text>
+            <text x="38" y="13"  text-anchor="end" font-size="11" fill="#9ca3af">1800</text>
+
+            <!-- Y축 라인 -->
+            <line x1="42" y1="8" x2="42" y2="175" stroke="#d1d5db" stroke-width="1"/>
+
+            <!-- 막대 너비 36, 간격 8, 6개 막대, x시작 50 -->
+            <!-- 한맥:450 → h=(450/1800)*165=41.25 → y=175-41=134 -->
+            <!-- 삼안:520 → h=47.7 → y=127 -->
+            <!-- 한라:1800→ h=165   → y=10 -->
+            <!-- PTC:120 → h=11    → y=164 -->
+            <!-- 바른:74  → h=6.8  → y=168 -->
+            <!-- 장현:90  → h=8.25 → y=167 -->
+
+            <!-- 한맥기술 -->
+            <rect x="50"  y="134" width="36" height="41" fill="#114b3d" rx="3"/>
+            <text x="68"  y="194" text-anchor="middle" font-size="10" fill="#6b7280">한맥</text>
+            <!-- 삼안 -->
+            <rect x="94"  y="127" width="36" height="48" fill="#114b3d" rx="3"/>
+            <text x="112" y="194" text-anchor="middle" font-size="10" fill="#6b7280">삼안</text>
+            <!-- 한라산업 -->
+            <rect x="138" y="10"  width="36" height="165" fill="#114b3d" rx="3"/>
+            <text x="156" y="194" text-anchor="middle" font-size="10" fill="#6b7280">한라산업</text>
+            <!-- PTC -->
+            <rect x="182" y="164" width="36" height="11" fill="#1d6b56" rx="3"/>
+            <text x="200" y="194" text-anchor="middle" font-size="10" fill="#6b7280">PTC</text>
+            <!-- 바른컨설턴트 -->
+            <rect x="226" y="168" width="36" height="7"  fill="#1d6b56" rx="3"/>
+            <text x="244" y="194" text-anchor="middle" font-size="10" fill="#6b7280">바른</text>
+            <!-- 장현산업 -->
+            <rect x="270" y="167" width="36" height="8"  fill="#1d6b56" rx="3"/>
+            <text x="288" y="194" text-anchor="middle" font-size="10" fill="#6b7280">장현</text>
+          </svg>
         </div>
       </div>
 
+      <!-- 법인별 통계 -->
       <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-        <div class="flex justify-between items-center mb-6">
+        <div class="flex justify-between items-center mb-5">
-            <h3 class="font-bold text-gray-800 italic underline decoration-blue-200 decoration-4">법인별 통계</h3>
+            <h3 class="font-bold text-gray-800 italic underline decoration-blue-200 decoration-4 text-sm">법인별 통계</h3>
             <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
                 <option>평균학습</option>
+                <option>총 학습시간</option>
             </select>
         </div>
-        <div class="space-y-4">
+        <div class="space-y-3">
           <div class="flex justify-between items-center pb-2 border-b border-gray-50">
             <span class="text-sm font-medium text-gray-600">한맥기술</span><span class="text-sm font-bold text-blue-600">15.2회</span>
           </div>
@@ -60,69 +102,150 @@ include_once 'header.php';
           <div class="flex justify-between items-center pb-2 border-b border-gray-50">
             <span class="text-sm font-medium text-gray-600">장현산업</span><span class="text-sm font-bold text-blue-600">18.5회</span>
           </div>
+          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
+            <span class="text-sm font-medium text-gray-600">PTC</span><span class="text-sm font-bold text-blue-600">14.1회</span>
+          </div>
+          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
+            <span class="text-sm font-medium text-gray-600">한라산업</span><span class="text-sm font-bold text-blue-600">16.3회</span>
+          </div>
           <div class="flex justify-between items-center">
-            <span class="text-sm font-medium text-gray-600">GAIA</span><span class="text-sm font-bold text-blue-600">14.1회</span>
+            <span class="text-sm font-medium text-gray-600">바른컨설턴트</span><span class="text-sm font-bold text-blue-600">19.7회</span>
           </div>
         </div>
-            </div>
+      </div>
 
-      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm relative overflow-hidden">
+      <!-- 법인별 접속 추이 (라인 차트) -->
-        <h3 class="font-bold text-gray-800 mb-6">법인별 접속 추이</h3>
+      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-        <div class="h-40 flex items-center justify-center">
+        <div class="flex justify-between items-center mb-4">
-            <svg class="w-full h-full" viewBox="0 0 200 80">
+          <h3 class="font-bold text-gray-800 text-sm">법인별 접속 추이</h3>
-                <path d="M0,60 L40,50 L80,55 L120,30 L160,40 L200,35" fill="none" stroke="#0d9488" stroke-width="2" />
+          <div class="flex gap-1">
-                <circle cx="40" cy="50" r="3" fill="#0d9488" />
+            <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
-                <circle cx="120" cy="30" r="3" fill="#0d9488" />
+              <option>전체</option>
-                <circle cx="200" cy="35" r="3" fill="#0d9488" />
+              <option>한맥기술</option>
-            </svg>
+              <option>삼안</option>
+            </select>
+            <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
+              <option>일별</option>
+              <option>주별</option>
+            </select>
+          </div>
         </div>
-                </div>
+        <!-- SVG Line Chart -->
+        <div class="relative w-full" style="height:240px;">
+          <svg viewBox="0 0 320 210" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+            <!-- y=0→svg y=175, y=800→svg y=10. 범위 165px -->
+            <!-- y_svg = 175 - (val/800)*165 -->
+            <!-- x: x=42 ~ x=310 (6점), 간격 53.6 -->
+            <!-- 220→129.6, 310→111.1, 450→82.7, 480→76.9, 570→55.1, 590→51.4 -->
+
+            <!-- 격자선 -->
+            <line x1="42" y1="175" x2="315" y2="175" stroke="#e5e7eb" stroke-width="1"/>
+            <line x1="42" y1="134" x2="315" y2="134" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
+            <line x1="42" y1="93"  x2="315" y2="93"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
+            <line x1="42" y1="52"  x2="315" y2="52"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
+            <line x1="42" y1="10"  x2="315" y2="10"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
+
+            <!-- Y축 레이블 -->
+            <text x="38" y="178" text-anchor="end" font-size="11" fill="#9ca3af">0</text>
+            <text x="38" y="137" text-anchor="end" font-size="11" fill="#9ca3af">200</text>
+            <text x="38" y="96"  text-anchor="end" font-size="11" fill="#9ca3af">400</text>
+            <text x="38" y="55"  text-anchor="end" font-size="11" fill="#9ca3af">600</text>
+            <text x="38" y="13"  text-anchor="end" font-size="11" fill="#9ca3af">800</text>
+
+            <!-- Y축 라인 -->
+            <line x1="42" y1="8" x2="42" y2="175" stroke="#d1d5db" stroke-width="1"/>
+
+            <!-- 라인 경로 -->
+            <polyline
+              points="42,130 96,111 150,83 204,77 258,55 310,51"
+              fill="none"
+              stroke="#0d9488"
+              stroke-width="2.5"
+              stroke-linejoin="round"
+            />
+
+            <!-- 데이터 포인트 (원) -->
+            <circle cx="42"  cy="130" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
+            <circle cx="96"  cy="111" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
+            <circle cx="150" cy="83"  r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
+            <circle cx="204" cy="77"  r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
+            <circle cx="258" cy="55"  r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
+            <circle cx="310" cy="51"  r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
+
+            <!-- X축 레이블 -->
+            <text x="42"  y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/20</text>
+            <text x="96"  y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/21</text>
+            <text x="150" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/22</text>
+            <text x="204" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/23</text>
+            <text x="258" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/24</text>
+            <text x="310" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/26</text>
+          </svg>
+        </div>
+      </div>
     </section>
 
+    <!-- 하단: 가장 많이 본 영상 + 배움터 학습 랭킹 -->
     <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-12">
+
+      <!-- 가장 많이 본 영상 -->
       <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
-        <div class="p-6 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
+        <div class="p-5 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
-          <h3 class="font-bold text-gray-800 flex items-center italic">
+          <h3 class="font-bold text-gray-800 flex items-center italic text-sm">
             <i class="fa-solid fa-play-circle text-blue-500 mr-2"></i>가장 많이 본 영상
           </h3>
-          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>인사이트</option></select>
+          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>인사이트</option><option>리더십</option><option>온보딩</option></select>
         </div>
-        <div class="p-6 space-y-6">
+        <div class="p-5 space-y-5">
           <div class="flex items-start space-x-4">
-            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0"></div>
+            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
             <div>
               <h4 class="font-bold text-sm leading-tight">실리콘밸리 PM이 말해주는 AI 시대 PM 생존법</h4>
               <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,245회</span> | 완료율: <span class="text-blue-500 font-bold">92%</span></p>
             </div>
           </div>
           <div class="flex items-start space-x-4">
-            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0"></div>
+            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
             <div>
               <h4 class="font-bold text-sm leading-tight">AI와 함께 진화하는 법 : AI 일잘러의 비밀</h4>
-              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,127회</span> | 완료율: <span class="text-blue-500 font-bold">88%</span></p>
+              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,132회</span> | 완료율: <span class="text-blue-500 font-bold">88%</span></p>
+            </div>
+          </div>
+          <div class="flex items-start space-x-4">
+            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
+            <div>
+              <h4 class="font-bold text-sm leading-tight">인생이 바뀌는 환경을 셋업하는 뇌과학적 방법</h4>
+              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,089회</span> | 완료율: <span class="text-blue-500 font-bold">85%</span></p>
+            </div>
+          </div>
+          <div class="flex items-start space-x-4">
+            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
+            <div>
+              <h4 class="font-bold text-sm leading-tight">인생의 기회를 100% 내 것으로 만드는 '운의 공식'</h4>
+              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">987회</span> | 완료율: <span class="text-blue-500 font-bold">83%</span></p>
             </div>
           </div>
         </div>
-        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-50 italic">
+        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-100 italic transition">
           <i class="fa-solid fa-comment-dots mr-2"></i>한줄 소감문 보기
         </button>
       </div>
 
+      <!-- 배움터 학습 랭킹 -->
       <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
-        <div class="p-6 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
+        <div class="p-5 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
-          <h3 class="font-bold text-gray-800 flex items-center italic">
+          <h3 class="font-bold text-gray-800 flex items-center italic text-sm">
             <i class="fa-solid fa-award text-teal-600 mr-2"></i>배움터 학습 랭킹
           </h3>
-          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>전체</option></select>
+          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>전체</option><option>한맥기술</option><option>삼안</option></select>
         </div>
         <div class="p-4">
           <table class="w-full text-sm">
             <tbody>
               <tr class="hover:bg-gray-50 transition">
-                <td class="p-3 font-bold text-blue-600">1</td>
+                <td class="p-3 font-bold text-blue-600 text-lg w-10">1</td>
                 <td class="p-3">
                   <p class="font-bold">홍길동</p>
-                  <p class="text-[10px] text-gray-400">한맥기술 본부장</p>
+                  <p class="text-[10px] text-gray-400">한맥기술 선임연구원</p>
                 </td>
                 <td class="p-3 text-right">
                   <span class="font-bold mr-2">52시간</span>
@@ -130,20 +253,53 @@ include_once 'header.php';
                 </td>
               </tr>
               <tr class="hover:bg-gray-50 transition border-t border-gray-50">
-                <td class="p-3 font-bold text-gray-400">2</td>
+                <td class="p-3 font-bold text-gray-400 text-lg">2</td>
                 <td class="p-3">
                   <p class="font-bold">김철수</p>
-                  <p class="text-[10px] text-gray-400">삼안 전략기획팀</p>
+                  <p class="text-[10px] text-gray-400">삼안 책임연구원</p>
                 </td>
                 <td class="p-3 text-right">
                   <span class="font-bold mr-2">48시간</span>
                   <span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
                 </td>
               </tr>
+              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
+                <td class="p-3 font-bold text-gray-400 text-lg">3</td>
+                <td class="p-3">
+                  <p class="font-bold">이영희</p>
+                  <p class="text-[10px] text-gray-400">삼안 수석연구원</p>
+                </td>
+                <td class="p-3 text-right">
+                  <span class="font-bold mr-2">45시간</span>
+                  <span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
+                </td>
+              </tr>
+              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
+                <td class="p-3 font-bold text-gray-400 text-lg">4</td>
+                <td class="p-3">
+                  <p class="font-bold">박민수</p>
+                  <p class="text-[10px] text-gray-400">한맥기술 주임연구원</p>
+                </td>
+                <td class="p-3 text-right">
+                  <span class="font-bold mr-2">38시간</span>
+                  <span class="px-2 py-0.5 bg-blue-50 text-blue-500 text-[10px] rounded font-bold">Elite</span>
+                </td>
+              </tr>
+              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
+                <td class="p-3 font-bold text-gray-400 text-lg">5</td>
+                <td class="p-3">
+                  <p class="font-bold">정수진</p>
+                  <p class="text-[10px] text-gray-400">바른컨설턴트 선임연구원</p>
+                </td>
+                <td class="p-3 text-right">
+                  <span class="font-bold mr-2">35시간</span>
+                  <span class="px-2 py-0.5 bg-blue-50 text-blue-500 text-[10px] rounded font-bold">Elite</span>
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>
-        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-50 italic">
+        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-100 italic transition">
           <i class="fa-solid fa-thumbs-up mr-2"></i>추천 영상 보기
         </button>
       </div>

src/css/intro.css

@@ -0,0 +1,868 @@
+@charset "UTF-8";
+
+:root {
+  /* text - 텍스트 색상 */
+  --text-intro-base: #1b1810;
+  --text-base: #131313;
+  --text-revers: #fff;
+  --text-primary: #3c3321;
+  --text-secondary: #747474;
+  --text-accent: #ff5c00;
+  --text-myclass: #ffdf60;
+  --text-main-primary: #4a4040;
+  --text-main-secondary: #3a200d;
+  --text-title-accent: #f5651d;
+  --text-pick: #2b5045;
+  --text-keyword-base: #c4c2c0;
+  --text-keyword-primary: #fff;
+  --text-keyword-secondary: #999999;
+  --text-video-primary: #b6d5a7;
+  --text-video-secondary: #ddd;
+  --text-cate-primary: #edd8c2;
+  --text-cate-secondary: #b6d5a7;
+  --text-cate-tertiary: #e8cfe4;
+  --text-comment-primary: #fff;
+  --text-comment-secondary: #8d8d8d;
+  --text-learning-base: #8d8888;
+  --text-learning-primary: #ff5c00;
+  --text-learning-secondary: #008c49;
+  --text-card-category: #252525;
+  --text-card-title-active: #ff7d33;
+  --text-card-title-complete: #66ba92;
+  --text-card-author: #d1cfcf;
+  /* 배경 */
+  --bg-base: #e4ddcf;
+  --bg-primary: #ece3d2;
+  --bg-secondary:
+    radial-gradient(93.89% 93.89% at 49.32% 6.11%,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.11) 86.06%,
+      rgba(134, 114, 77, 0.2) 88.94%),
+    linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
+  --bg-main-card: rgba(255, 255, 255, 0.6);
+  --bg-intro-mask: #1b1810;
+  --bg-intro: linear-gradient(180deg,
+      #f9f5f2 0%,
+      #fff 18.77%,
+      #fff 41.8%,
+      #ece8e4 100%);
+  --bg-main:
+    linear-gradient(90deg,
+      #0f3025 0%,
+      #194335 38%,
+      #0b221b 87.51%,
+      #0d231c 100%) top / 100% 114px no-repeat,
+    #ece3d2;
+  --bg-video: #1b1b1b;
+  --bg-comment: #2a2a2a;
+  --bg-nav: linear-gradient(90deg,
+      #0f3025 0%,
+      #194335 38%,
+      #0b221b 87.51%,
+      #0d231c 100%);
+  --bg-nav-depth: #fff;
+  --bg-nav-alerts: #ff2200;
+  --bg-nav-alerts-hover: #188f6b;
+  --bg-cate-primary: #ded7cf;
+  --bg-cate-secondary: #d4decf;
+  --bg-cate-tertiary: #e8cfe4;
+  --bg-pick: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #d5ede6 100%);
+  --bg-gauge-base: #b4b4b4;
+  --bg-gauge-primary: #ff5c00;
+  --bg-search: #e4dbc9;
+  --bg-keyword-base: rgba(230, 205, 177, 0.3);
+  --bg-keyword-primary: #e47703;
+  --bg-keyword-primary-hover: #e6cdb1;
+  --bg-keyword-secondary: #786c60;
+  --bg-keyword-secondary-hover: #dcd3c9;
+  --bg-lecture-state: linear-gradient(270deg, #00ab66 0%, #058bb0 100%);
+  --bg-lecture-progress-primary: rgba(3, 9, 7, 0.3);
+  --bg-lecture-progress-secondary: #07855c;
+  --bg-btn-base: #000;
+  --bg-btn-primary: #ff5c00;
+  --bg-btn-secondary: #1f1f1f;
+  --bg-card: rgba(255, 255, 255, 0.6);
+  --bg-card-hover-start: #ff6600;
+  --bg-card-hover-end: rgba(255, 132, 0, 0.7);
+  --bg-card-thumb-overlay: rgba(255, 255, 255, 0.3);
+  --bg-card-shadow: rgba(217, 202, 190, 0.5);
+  --bg-card-hover-shadow: rgba(198, 187, 177, 0.5);
+  --bg-card-shadow-inner: rgba(0, 0, 0, 1);
+  --bg-pick-shadow: rgba(166, 154, 97, 0.25);
+  --bg-modal: rgba(0, 0, 0, 0.8);
+  --bg-modal-content: #f6f1e9;
+  --bg-modal-close-hover: #e00400;
+  --bg-scrollbar-thumb: #D0D0D0;
+  --bg-scrollbar-thumb-dark: #383838;
+  --bg-scrollbar-track: #F3F3F3;
+  --bg-scrollbar-thumb-light: rgba(255, 255, 255, 0.2);
+  --bg-scrollbar-thumb-light-hover: rgba(255, 255, 255, 0.3);
+  --bg-scrollbar-track-light: rgba(255, 255, 255, 0.05);
+  --bg-video-gauge: #171717;
+  --bg-video-gauge-fill: #ff6c19;
+  --bg-video-gauge-border: rgba(0, 0, 0, 0.4);
+  --bg-learning-line: #c6c3c3;
+  --bg-learning-dot: #8d8888;
+  --bg-learning-active: rgba(255, 92, 0, 0.2);
+  --bg-learning-active-line: #ffad7f;
+  --bg-learning-active-dot: #ff5c00;
+  --bg-learning-complete: rgba(0, 140, 73, 0.2);
+  --bg-learning-complete-line: #7fc5a4;
+  --bg-learning-complete-dot: #008c49;
+  --bg-chapter-current: #146b51;
+  --bg-chapter-completed: #ba9a85;
+  --bg-card-base: #7e7e7e;
+  --bg-card-current: #1d9b75;
+  --bg-card-current-border: #1f9b76;
+  --bg-card-current-bg: #dbefe9;
+  --bg-card-completed: #ab3d00;
+  --bg-gauge-fill: #e25e00;
+  --bg-shadow: #8a7d64;
+  --bg-puzzle-family: #7ed29b;
+  --bg-puzzle-hanmac: #ffccca;
+  --bg-puzzle-value: #87a7d6;
+  --bg-puzzle-company: #b49a65;
+  --bg-piece-1: #1d375d;
+  --bg-piece-2: #662a0d;
+  --bg-piece-3: #5b4822;
+  --bg-piece-4: #2a5338;
+  --bg-circle-border: #a7790f;
+  --bg-circle-start: rgba(127, 47, 0, 0.1);
+  --bg-circle-end: rgba(167, 121, 15, 0.5);
+  --bg-circle-dot: rgba(221, 144, 0, 0.6);
+  --bg-circle-dot-hover: rgba(221, 144, 0, 0.8);
+  --bg-circle-dot-stroke: rgba(221, 144, 0, 0.2);
+  --bg-gradient-start: #ece3d2;
+  --bg-gradient-end: #fff;
+  --bg-learning-line-color: #edba8a;
+  --bg-modal-header: #f04400;
+  --bg-textarea: #2a2a2a;
+  --bg-textarea-placeholder: rgba(255, 255, 255, 0.5);
+  /* border */
+  --border-base: rgba(0, 0, 0, 0.05);
+  --border-primary: #fff;
+  --border-keyword-base: rgba(0, 0, 0, 0.05);
+  --border-keyword-primary: rgba(255, 255, 255, 0.4);
+  --border-keyword-primary-hover: rgba(0, 0, 0, 0.05);
+  --border-keyword-secondary: rgba(255, 255, 255, 0.4);
+  --border-keyword-secondary-hover: rgba(0, 0, 0, 0.1);
+  --border-pick: rgba(255, 255, 255, 0.5);
+  --border-video: rgba(255, 255, 255, 0.1);
+  --border-btn: rgba(255, 255, 255, 0.2);
+  --border-card: rgba(255, 255, 255, 0.8);
+  --border-modal: #888;
+  --border-comment-resizer: rgba(230, 227, 225, 0.1);
+  /* drop */
+  --text-shadow:
+    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+  --text-stroke: drop-shadow(0 0 0.5px #000);
+  /* shadow */
+  --shadow-pagination: rgba(0, 0, 0, 0.4);
+  --shadow-modal: rgba(0, 0, 0, 0.25);
+  --shadow-card-drop: 0 4px 8px rgba(0, 0, 0, 0.2);
+  --shadow-card-drop-small: 0 4px 2px rgba(0, 0, 0, 0.05);
+  --shadow-gauge-inset: rgba(0, 0, 0, 0.3);
+  --shadow-comment: 0 8px 22px 22px rgba(0, 0, 0, 0.8);
+}
+
+/* 페이드 전환 */
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+
+.fade-in {
+  opacity: 1;
+  transition: opacity 0.4s ease;
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes arrow-next {
+
+  0%,
+  100% {
+    right: 72px;
+  }
+
+  50% {
+    right: 50px;
+  }
+}
+
+@keyframes bounce {
+
+  0%,
+  100% {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  50% {
+    transform: translateX(-50%) translateY(-12px);
+  }
+}
+
+@keyframes slideUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scroll-down {
+  0% {
+    transform-origin: 50% 100%;
+    transform: scaleY(1);
+  }
+
+  50% {
+    transform-origin: 50% 100%;
+    transform: scaleY(0);
+  }
+
+  50.1% {
+    transform-origin: 50% 0;
+    transform: scaleY(0);
+  }
+
+  to {
+    transform-origin: 50% 0;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes borderFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes borderPulse {
+
+  0%,
+  100% {
+    border-color: #fff;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
+  }
+
+  50% {
+    border-color: #fff;
+    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
+  }
+}
+
+@font-face {
+  font-family: "YeogiOttaeJalnan";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff") format("woff");
+  font-weight: normal;
+  font-display: swap;
+}
+
+.intro {
+  background: var(--bg-intro);
+  background-attachment: fixed;
+  overflow: auto;
+}
+
+.intro .container {
+  position: relative;
+  top: 0;
+  height: var(--window-inner-height);
+  margin-top: 0;
+  padding: 0;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  clip-path: none;
+  background: var(--bg-intro);
+  color: var(--text-intro-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.intro .text-ani {
+  display: none;
+}
+
+.intro .text-ani:has(.welcome span.show),
+.intro .text-ani:has(.update-line span.show),
+.intro .text-ani:has(.card.show),
+.intro .text-ani.animating {
+  display: block;
+}
+
+@media only screen and (max-width: 991px) {
+  .intro .text-ani:has(.card.show) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-height: 0;
+    width: 100%;
+  }
+}
+
+.intro .text-area {
+  min-height: 160px;
+  margin-bottom: 34px;
+  text-align: center;
+}
+
+.intro .text-area:has(.greeting.hidden, .update-text.hidden) {
+  min-height: 0;
+  margin-bottom: 0;
+}
+
+.intro .greeting {
+  font-size: 36px;
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+@media only screen and (min-width: 1024px) {
+  .intro .greeting {
+    height: 656px;
+  }
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .greeting {
+    font-size: 2.8rem;
+    min-height: 15.8rem;
+  }
+
+  .intro .greeting p.welcome>*:nth-child(5) {
+    display: block;
+    line-height: 0;
+  }
+}
+
+.intro .name {
+  font-weight: 500;
+}
+
+.intro .welcome span {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.intro .welcome span.show {
+  animation: fadeInUp 0.4s forwards;
+}
+
+.intro .welcome em {
+  font-weight: 500;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .welcome {
+    margin-top: 2rem;
+  }
+}
+
+.intro .update-text {
+  text-align: center;
+}
+
+.intro .update-line {
+  overflow: hidden;
+  font-size: 36px;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .update-line {
+    font-size: 2.8rem;
+  }
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .update-line:last-child {
+    margin-top: 2rem;
+  }
+}
+
+.intro .update-line.bold,
+.intro .update-line em {
+  font-weight: 500;
+}
+
+.intro .update-line>span {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.intro .update-line>span.show {
+  animation: slideUp 0.6s forwards;
+}
+
+.intro .cta-text {
+  position: relative;
+  width: 100vw;
+  height: var(--window-inner-height);
+  font-size: 42px;
+  font-weight: 300;
+  line-height: 1.2;
+  text-align: center;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .cta-text {
+    font-size: 2.8rem;
+  }
+}
+
+.intro .cta-text>div {
+  width: 100vw;
+  height: var(--window-inner-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.intro .cta-text>div:not(.mask) {
+  position: relative;
+  z-index: 1;
+  cursor: default;
+}
+
+.intro .cta-text>div:not(.mask) .text-section {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.intro .cta-text>div:not(.mask) .text-section:has(.show) {
+  background-image: url(../images/intro/promise.svg);
+  background-position: bottom;
+  background-size: 586px auto;
+  background-repeat: no-repeat;
+  animation: fadeInUp 0.5s forwards;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .cta-text>div:not(.mask) .text-section:has(.show) {
+    background-size: 120% auto;
+  }
+}
+
+.intro .cta-text>div:not(.mask) p {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.intro .cta-text>div:not(.mask) p.show {
+  animation: fadeInUp 0.5s forwards;
+}
+
+.intro .cta-text .text-section {
+  height: 260px;
+  translate: 0 -35%;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .cta-text .text-section {
+    width: calc(100% - 32px);
+    max-width: 452px;
+    height: 18rem;
+    translate: 0 -40%;
+  }
+}
+
+.intro .cta-text .text-section.show {
+  animation: opacity 0.5s forwards;
+}
+
+.intro .cta-text em {
+  font-weight: 500;
+}
+
+.intro .cta-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 99;
+  width: calc(100% - 32px);
+  max-width: 483px;
+  height: 116px;
+  padding: 22px 0;
+  border: none;
+  border-radius: 24px;
+  background: radial-gradient(117.51% 77.94% at 48.87% 100%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 24.58%, rgba(255, 255, 255, 0) 100%), #ff8200;
+  color: white;
+  font-size: 36px;
+  font-weight: bold;
+  text-align: center;
+  text-shadow: 0 2px 2px rgba(201, 121, 38, 0.5);
+  opacity: 0;
+  transform: translate(-50%, 25%) translateY(50px);
+  transition: all 0.3s;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .cta-btn {
+    width: calc(100% - 32px);
+    height: 68px;
+    padding: 0;
+    font-size: 28px;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .intro .cta-btn {
+    box-shadow: 0 -4px 4px 0 #e18d36 inset, 4px 4px 12px -4px rgba(220, 196, 172, 0.85);
+  }
+}
+
+.intro .cta-btn.show {
+  opacity: 1;
+  transform: translate(-50%, 25%) translateY(0);
+  transition: all 0.3s linear;
+}
+
+.intro .cta-btn::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 2px;
+  box-sizing: border-box;
+  background: linear-gradient(65deg, rgba(255, 255, 255, 0.6) 0%, transparent 100%) #ff8200;
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.intro .cta-btn .ico-arrow {
+  position: absolute;
+  top: 50%;
+  right: 72px;
+  display: inline-block;
+  width: 24px;
+  height: 32px;
+  background-image: url(../images/ico/ico_arrow_next_dashed.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  filter: drop-shadow(0 2px 2px rgba(201, 121, 38, 0.5));
+  transform: translateY(-50%);
+  animation: arrow-next 3s infinite ease-in-out;
+}
+
+.intro .mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  background-color: var(--bg-intro-mask);
+  color: rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+  --size: 0px;
+  --x: 50vw;
+  --y: 50vh;
+  -webkit-mask-image: url(../images/cursor.svg);
+  -webkit-mask-origin: content-box;
+  -webkit-mask-position: calc(var(--x) - var(--size) / 2) calc(var(--y) - var(--size) / 2), center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: var(--size), contain;
+  mask-image: url(../images/cursor.svg);
+  mask-origin: content-box;
+  mask-position: calc(var(--x) - var(--size) / 2) calc(var(--y) - var(--size) / 2), center;
+  mask-repeat: no-repeat;
+  mask-size: var(--size), contain;
+  transition: -webkit-mask-size 0.2s linear;
+  transition: mask-size 0.2s linear;
+  transition: mask-size 0.2s linear, -webkit-mask-size 0.2s linear;
+}
+
+@media only screen and (max-width: 991px) {
+  .intro .mask {
+    -webkit-mask-image: none;
+    mask-image: none;
+    clip-path: circle(0% at 50% 50%);
+    transition: clip-path 3.5s ease-out;
+  }
+
+  .intro .mask.expand {
+    clip-path: circle(300% at 50% 50%);
+  }
+}
+
+.intro .mask .text-section {
+  background-image: url(../images/intro/promise_b.svg);
+  background-position: bottom;
+  background-size: auto;
+  background-repeat: no-repeat;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .mask .text-section {
+    background-size: 95% auto;
+  }
+}
+
+.intro .mask .mask-text {
+  color: #fff;
+}
+
+.intro .mask .mask-text em {
+  font-style: normal;
+}
+
+.intro .content-area {
+  margin-top: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 991px) {
+  .intro .content-area {
+    flex: 1 1 0;
+    min-height: 0;
+    margin-top: 0;
+    align-items: stretch;
+  }
+}
+
+.intro .card {
+  opacity: 0;
+  transform: translateY(60px);
+  transition: all 0.6s ease;
+  background: white;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: 0 0 12px 12px;
+  box-shadow: 0 24px 24px 0 rgba(215, 209, 204, 0.5);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+@media only screen and (min-width: 992px) {
+  .intro .card {
+    flex: 0 0 calc(50% - 12px);
+    padding: 60px 32px 48px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .intro .card {
+    flex: 1 1 0;
+    width: 340px;
+    padding: 86px 22px 68px;
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .intro .card {
+    flex: 1 1 0;
+    min-height: 0;
+    width: calc(100vw - 32px);
+    padding: 0 24px;
+    z-index: 9;
+    transition-duration: 0.9s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    box-shadow: 0 4px 12px rgba(215, 209, 204, 0.5);
+    border-radius: 12px;
+  }
+}
+
+.intro .card.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.intro .card-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+@media only screen and (min-width: 1200px) {
+  .intro .card-list {
+    flex-wrap: nowrap;
+  }
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .card-list {
+    gap: 2.4rem;
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .intro .card-list {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    flex: 1 1 0;
+    min-height: var(--window-inner-height);
+    gap: 8px;
+    padding: 8px 16px;
+    align-items: stretch;
+  }
+}
+
+.intro .card-num {
+  font-family: YeogiOttaeJalnan;
+  font-size: 120px;
+  font-weight: 400;
+  line-height: 1;
+  color: transparent;
+  opacity: 0.1;
+  background: linear-gradient(180deg, transparent 30%, #ffffff 80%) #1b1810;
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .card-num {
+    font-size: 6rem;
+  }
+}
+
+.intro .card-title {
+  margin-top: -46px;
+  margin-bottom: 42px;
+  font-size: 32px;
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .card-title {
+    font-size: 2.4rem;
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .intro .card-title {
+    margin-top: -32px;
+    margin-bottom: 0;
+  }
+}
+
+.intro .card-desc {
+  font-size: 24px;
+}
+
+@media only screen and (max-width: 1023px) {
+  .intro .card-desc {
+    font-size: 1.6rem;
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .intro .card-desc {
+    display: none;
+  }
+}
+
+.intro .card em {
+  font-weight: 700;
+}
+
+.typing {
+  opacity: 0;
+}
+
+.cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.2em;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: blink 0.7s infinite;
+}
+
+.scroll-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  transform: translateX(-50%);
+}
+
+.scroll-indicator.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.scroll-indicator.sec2 .bar {
+  height: 60px;
+}
+
+.scroll-indicator span {
+  font-size: 16px;
+  color: var(--text-intro-base);
+  opacity: 0.8;
+}
+
+.scroll-indicator .bar {
+  width: 2px;
+  height: 110px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.3);
+  transition: height 0.5s linear;
+}
+
+.scroll-indicator .bar::before {
+  content: " ";
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 0 0 4px 4px;
+  background-color: #111;
+  animation: scroll-down 2s infinite ease-in-out;
+}

src/css/learning_objectives.css

@@ -0,0 +1,698 @@
+@charset "UTF-8";
+:root {
+  /* text - 텍스트 색상 */
+  --text-intro-base: #1b1810;
+  --text-base: #131313;
+  --text-revers: #fff;
+  --text-primary: #3c3321;
+  --text-secondary: #747474;
+  --text-accent: #ff5c00;
+  --text-myclass: #ffdf60;
+  --text-main-primary: #4a4040;
+  --text-main-secondary: #3a200d;
+  --text-title-accent: #f5651d;
+  --text-pick: #2b5045;
+  --text-keyword-base: #c4c2c0;
+  --text-keyword-primary: #fff;
+  --text-keyword-secondary: #999999;
+  --text-video-primary: #b6d5a7;
+  --text-video-secondary: #ddd;
+  --text-cate-primary: #edd8c2;
+  --text-cate-secondary: #b6d5a7;
+  --text-cate-tertiary: #e8cfe4;
+  --text-comment-primary: #fff;
+  --text-comment-secondary: #8d8d8d;
+  --text-learning-base: #8d8888;
+  --text-learning-primary: #ff5c00;
+  --text-learning-secondary: #008c49;
+  --text-card-category: #252525;
+  --text-card-title-active: #ff7d33;
+  --text-card-title-complete: #66ba92;
+  --text-card-author: #d1cfcf;
+  /* 배경 */
+  --bg-base: #e4ddcf;
+  --bg-primary: #ece3d2;
+  --bg-secondary:
+    radial-gradient(
+      93.89% 93.89% at 49.32% 6.11%,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.11) 86.06%,
+      rgba(134, 114, 77, 0.2) 88.94%
+    ),
+    linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
+  --bg-main-card: rgba(255, 255, 255, 0.6);
+  --bg-intro-mask: #1b1810;
+  --bg-intro: linear-gradient(
+    180deg,
+    #f9f5f2 0%,
+    #fff 18.77%,
+    #fff 41.8%,
+    #ece8e4 100%
+  );
+  --bg-main:
+    linear-gradient(
+        90deg,
+        #0f3025 0%,
+        #194335 38%,
+        #0b221b 87.51%,
+        #0d231c 100%
+      )
+      top / 100% 114px no-repeat,
+    #ece3d2;
+  --bg-video: #1b1b1b;
+  --bg-comment: #2a2a2a;
+  --bg-nav: linear-gradient(
+    90deg,
+    #0f3025 0%,
+    #194335 38%,
+    #0b221b 87.51%,
+    #0d231c 100%
+  );
+  --bg-nav-depth: #fff;
+  --bg-nav-alerts: #ff2200;
+  --bg-nav-alerts-hover: #188f6b;
+  --bg-cate-primary: #ded7cf;
+  --bg-cate-secondary: #d4decf;
+  --bg-cate-tertiary: #e8cfe4;
+  --bg-pick: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #d5ede6 100%);
+  --bg-gauge-base: #b4b4b4;
+  --bg-gauge-primary: #ff5c00;
+  --bg-search: #e4dbc9;
+  --bg-keyword-base: rgba(230, 205, 177, 0.3);
+  --bg-keyword-primary: #e47703;
+  --bg-keyword-primary-hover: #e6cdb1;
+  --bg-keyword-secondary: #786c60;
+  --bg-keyword-secondary-hover: #dcd3c9;
+  --bg-lecture-state: linear-gradient(270deg, #00ab66 0%, #058bb0 100%);
+  --bg-lecture-progress-primary: rgba(3, 9, 7, 0.3);
+  --bg-lecture-progress-secondary: #07855c;
+  --bg-btn-base: #000;
+  --bg-btn-primary: #ff5c00;
+  --bg-btn-secondary: #1f1f1f;
+  --bg-card: rgba(255, 255, 255, 0.6);
+  --bg-card-hover-start: #ff6600;
+  --bg-card-hover-end: rgba(255, 132, 0, 0.7);
+  --bg-card-thumb-overlay: rgba(255, 255, 255, 0.3);
+  --bg-card-shadow: rgba(217, 202, 190, 0.5);
+  --bg-card-hover-shadow: rgba(198, 187, 177, 0.5);
+  --bg-card-shadow-inner: rgba(0, 0, 0, 1);
+  --bg-pick-shadow: rgba(166, 154, 97, 0.25);
+  --bg-modal: rgba(0, 0, 0, 0.8);
+  --bg-modal-content: #f6f1e9;
+  --bg-modal-close-hover: #e00400;
+  --bg-scrollbar-thumb: #D0D0D0;
+  --bg-scrollbar-thumb-dark: #383838;
+  --bg-scrollbar-track: #F3F3F3;
+  --bg-scrollbar-thumb-light: rgba(255, 255, 255, 0.2);
+  --bg-scrollbar-thumb-light-hover: rgba(255, 255, 255, 0.3);
+  --bg-scrollbar-track-light: rgba(255, 255, 255, 0.05);
+  --bg-video-gauge: #171717;
+  --bg-video-gauge-fill: #ff6c19;
+  --bg-video-gauge-border: rgba(0, 0, 0, 0.4);
+  --bg-learning-line: #c6c3c3;
+  --bg-learning-dot: #8d8888;
+  --bg-learning-active: rgba(255, 92, 0, 0.2);
+  --bg-learning-active-line: #ffad7f;
+  --bg-learning-active-dot: #ff5c00;
+  --bg-learning-complete: rgba(0, 140, 73, 0.2);
+  --bg-learning-complete-line: #7fc5a4;
+  --bg-learning-complete-dot: #008c49;
+  --bg-chapter-current: #146b51;
+  --bg-chapter-completed: #ba9a85;
+  --bg-card-base: #7e7e7e;
+  --bg-card-current: #1d9b75;
+  --bg-card-current-border: #1f9b76;
+  --bg-card-current-bg: #dbefe9;
+  --bg-card-completed: #ab3d00;
+  --bg-gauge-fill: #e25e00;
+  --bg-shadow: #8a7d64;
+  --bg-puzzle-family: #7ed29b;
+  --bg-puzzle-hanmac: #ffccca;
+  --bg-puzzle-value: #87a7d6;
+  --bg-puzzle-company: #b49a65;
+  --bg-piece-1: #1d375d;
+  --bg-piece-2: #662a0d;
+  --bg-piece-3: #5b4822;
+  --bg-piece-4: #2a5338;
+  --bg-circle-border: #a7790f;
+  --bg-circle-start: rgba(127, 47, 0, 0.1);
+  --bg-circle-end: rgba(167, 121, 15, 0.5);
+  --bg-circle-dot: rgba(221, 144, 0, 0.6);
+  --bg-circle-dot-hover: rgba(221, 144, 0, 0.8);
+  --bg-circle-dot-stroke: rgba(221, 144, 0, 0.2);
+  --bg-gradient-start: #ece3d2;
+  --bg-gradient-end: #fff;
+  --bg-learning-line-color: #edba8a;
+  --bg-modal-header: #f04400;
+  --bg-textarea: #2a2a2a;
+  --bg-textarea-placeholder: rgba(255, 255, 255, 0.5);
+  /* border */
+  --border-base: rgba(0, 0, 0, 0.05);
+  --border-primary: #fff;
+  --border-keyword-base: rgba(0, 0, 0, 0.05);
+  --border-keyword-primary: rgba(255, 255, 255, 0.4);
+  --border-keyword-primary-hover: rgba(0, 0, 0, 0.05);
+  --border-keyword-secondary: rgba(255, 255, 255, 0.4);
+  --border-keyword-secondary-hover: rgba(0, 0, 0, 0.1);
+  --border-pick: rgba(255, 255, 255, 0.5);
+  --border-video: rgba(255, 255, 255, 0.1);
+  --border-btn: rgba(255, 255, 255, 0.2);
+  --border-card: rgba(255, 255, 255, 0.8);
+  --border-modal: #888;
+  --border-comment-resizer: rgba(230, 227, 225, 0.1);
+  /* drop */
+  --text-shadow:
+    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+  --text-stroke: drop-shadow(0 0 0.5px #000);
+  /* shadow */
+  --shadow-pagination: rgba(0, 0, 0, 0.4);
+  --shadow-modal: rgba(0, 0, 0, 0.25);
+  --shadow-card-drop: 0 4px 8px rgba(0, 0, 0, 0.2);
+  --shadow-card-drop-small: 0 4px 2px rgba(0, 0, 0, 0.05);
+  --shadow-gauge-inset: rgba(0, 0, 0, 0.3);
+  --shadow-comment: 0 8px 22px 22px rgba(0, 0, 0, 0.8);
+}
+
+/* 페이드 전환 */
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+
+.fade-in {
+  opacity: 1;
+  transition: opacity 0.4s ease;
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes arrow-next {
+  0%, 100% {
+    right: 72px;
+  }
+  50% {
+    right: 50px;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateX(-50%) translateY(0);
+  }
+  50% {
+    transform: translateX(-50%) translateY(-12px);
+  }
+}
+@keyframes slideUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes scroll-down {
+  0% {
+    transform-origin: 50% 100%;
+    transform: scaleY(1);
+  }
+  50% {
+    transform-origin: 50% 100%;
+    transform: scaleY(0);
+  }
+  50.1% {
+    transform-origin: 50% 0;
+    transform: scaleY(0);
+  }
+  to {
+    transform-origin: 50% 0;
+    transform: scaleY(1);
+  }
+}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+@keyframes borderFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes borderPulse {
+  0%, 100% {
+    border-color: #fff;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
+  }
+  50% {
+    border-color: #fff;
+    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
+  }
+}
+.study .study-container {
+  display: flex;
+  gap: 40px;
+  margin: 0 auto;
+  padding: 40px 60px;
+  position: relative;
+  background: linear-gradient(180deg, #F9F6F0 0%, #E6DDCC 100%);
+}
+.study .study-container::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30.8333%;
+  padding-top: 90.54054%;
+  background-image: url("../images/myclass/bg_lo.png");
+  background-size: contain;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  z-index: 0;
+  mix-blend-mode: multiply;
+}
+.study .page-title {
+  margin-bottom: 72px;
+}
+.study .study-sidebar {
+  flex-shrink: 0;
+  width: 380px;
+  position: sticky;
+  top: 40px;
+  height: -moz-fit-content;
+  height: fit-content;
+  z-index: 1;
+}
+.study .study-sidebar .sidebar-content {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 32px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+.study .study-sidebar .user-rank-info {
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.study .study-sidebar .user-rank-info .rank-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: row;
+  gap: 12px;
+}
+.study .study-sidebar .user-rank-info .rank-header .ico-trophy {
+  background-image: url("../images/ico/ico_trophy.svg");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 32px;
+  aspect-ratio: 1/1;
+  flex-shrink: 0;
+}
+.study .study-sidebar .user-rank-info .rank-header .rank-text {
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--text-base);
+}
+.study .study-sidebar .user-rank-info .rank-header .rank-text strong {
+  font-weight: 700;
+  color: var(--text-primary);
+}
+.study .study-sidebar .user-rank-info .rank-header .rank-text em {
+  font-style: normal;
+  font-weight: 700;
+  color: var(--text-accent);
+  margin: 0 4px;
+}
+.study .study-sidebar .user-rank-info .rank-header .rank-text small {
+  font-size: 14px;
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+.study .study-sidebar .quarter-selector {
+  margin-bottom: 32px;
+}
+.study .study-sidebar .quarter-selector .year-select {
+  margin-bottom: 12px;
+}
+.study .study-sidebar .quarter-selector .year-select .btn-year {
+  width: 100%;
+  padding: 12px 16px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  align-items: space-between;
+  justify-content: center;
+  flex-direction: row;
+  transition: all 0.2s ease;
+}
+.study .study-sidebar .quarter-selector .year-select .btn-year:hover {
+  background: #f5f5f5;
+  border-color: rgba(0, 0, 0, 0.2);
+}
+.study .study-sidebar .quarter-selector .year-select .btn-year .ico-arrow-down {
+  background-image: url("../images/ico/ico_arrow_down.svg");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 16px;
+  aspect-ratio: 1/1;
+}
+.study .study-sidebar .quarter-selector .quarter-select .btn-quarter {
+  width: 100%;
+  padding: 12px 16px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.study .study-sidebar .quarter-selector .quarter-select .btn-quarter.active {
+  background: var(--text-accent);
+  color: #fff;
+  border-color: var(--text-accent);
+}
+.study .study-sidebar .quarter-selector .quarter-select .btn-quarter:hover:not(.active) {
+  background: #f5f5f5;
+  border-color: rgba(0, 0, 0, 0.2);
+}
+.study .study-sidebar .learning-goal .goal-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+  line-height: 1.4;
+}
+.study .study-sidebar .learning-goal .goal-title .emoji {
+  font-style: normal;
+  margin-left: 4px;
+}
+.study .study-sidebar .learning-goal .goal-description {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+}
+.study .study-sidebar .learning-goal .btn-change-goal {
+  width: 100%;
+  padding: 12px 20px;
+  background: var(--text-accent);
+  color: #fff;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.study .study-sidebar .learning-goal .btn-change-goal:hover {
+  background: #e55000;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 92, 0, 0.3);
+}
+.study .study-main {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+.study .study-main .study-header {
+  margin-bottom: 40px;
+}
+.study .study-main .study-header .study-title {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+}
+.study .study-main .study-header .study-title em {
+  font-style: normal;
+  color: var(--text-accent);
+}
+.study .study-main .study-header .study-countdown {
+  font-size: 18px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.study .study-main .study-header .study-countdown small {
+  font-size: 16px;
+  color: var(--text-base);
+}
+.study .study-main .study-modules {
+  margin-bottom: 40px;
+}
+.study .study-main .study-modules .modules-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px 24px;
+}
+.study .study-main .module-card {
+  position: relative;
+  background: #fff;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.study .study-main .module-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+}
+.study .study-main .module-card:hover .card-thumbnail img {
+  transform: scale(1.05);
+}
+.study .study-main .module-card.card-color-teal {
+  border-top: 4px solid #4db6ac;
+}
+.study .study-main .module-card.card-color-pink {
+  border-top: 4px solid #f48fb1;
+}
+.study .study-main .module-card.card-color-blue {
+  border-top: 4px solid #81d4fa;
+}
+.study .study-main .module-card.card-color-yellow {
+  border-top: 4px solid #ffeb3b;
+}
+.study .study-main .module-card.card-color-green {
+  border-top: 4px solid #a5d6a7;
+}
+.study .study-main .module-card.card-color-beige {
+  border-top: 4px solid #d7ccc8;
+}
+.study .study-main .module-card .card-thumbnail {
+  width: 100%;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+.study .study-main .module-card .card-thumbnail img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  transition: transform 0.3s ease;
+}
+.study .study-main .module-card .card-content {
+  padding: 20px 24px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.study .study-main .module-card .card-content .card-category {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+  padding: 4px 12px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 12px;
+}
+.study .study-main .module-card .card-content .card-title {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+.study .study-main .module-card .card-content .card-subtitle {
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-base);
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+.study .study-main .module-card .card-content .card-description {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+}
+.study .study-main .module-card .card-content .card-check {
+  margin-top: auto;
+  padding-top: 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+.study .study-main .module-card .card-content .card-check .check-title {
+  display: block;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-accent);
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.study .study-main .module-card .card-content .card-check .check-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.study .study-main .module-card .card-content .card-check .check-list li {
+  position: relative;
+  padding-left: 20px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+.study .study-main .module-card .card-content .card-check .check-list li:last-child {
+  margin-bottom: 0;
+}
+.study .study-main .module-card .card-content .card-check .check-list li::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  color: var(--text-accent);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 1.2;
+}
+.study .study-main .study-tags {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: row;
+  gap: 16px;
+  padding: 20px 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+.study .study-main .study-tags .tag-quarter {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  padding: 8px 16px;
+  background: rgba(255, 92, 0, 0.1);
+  border-radius: 12px;
+}
+.study .study-main .study-tags .tag-list {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: row;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.study .study-main .study-tags .tag-list .tag-item {
+  padding: 8px 20px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.study .study-main .study-tags .tag-list .tag-item:hover {
+  background: #f5f5f5;
+  border-color: rgba(0, 0, 0, 0.2);
+}
+.study .study-main .study-tags .tag-list .tag-item.active {
+  background: var(--text-accent);
+  color: #fff;
+  border-color: var(--text-accent);
+}
+
+@media (max-width: 1400px) {
+  .study .study-container {
+    padding: 32px 40px;
+    gap: 32px;
+  }
+  .study .study-sidebar {
+    width: 320px;
+  }
+  .study .study-main .modules-grid {
+    gap: 24px 20px;
+  }
+}
+@media (max-width: 1024px) {
+  .study .study-container {
+    flex-direction: column;
+    padding: 24px 32px;
+  }
+  .study .study-sidebar {
+    width: 100%;
+    position: relative;
+    top: 0;
+  }
+  .study .study-sidebar .sidebar-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+  }
+  .study .study-sidebar .user-rank-info,
+  .study .study-sidebar .quarter-selector,
+  .study .study-sidebar .learning-goal {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+  .study .study-main .modules-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .study .study-container {
+    padding: 20px 24px;
+  }
+  .study .study-sidebar .sidebar-content {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  .study .study-main .study-header .study-title {
+    font-size: 24px;
+  }
+  .study .study-main .study-header .study-countdown {
+    font-size: 16px;
+  }
+  .study .study-main .modules-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}

src/css/lib/lenis.min.css

@@ -0,0 +1 @@
+html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto !important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-smooth iframe{pointer-events:none}

src/css/main.css

@@ -0,0 +1,758 @@
+@charset "UTF-8";
+:root {
+  /* text - 텍스트 색상 */
+  --text-intro-base: #1b1810;
+  --text-base: #131313;
+  --text-revers: #fff;
+  --text-primary: #3c3321;
+  --text-secondary: #747474;
+  --text-accent: #ff5c00;
+  --text-myclass: #ffdf60;
+  --text-main-primary: #4a4040;
+  --text-main-secondary: #3a200d;
+  --text-title-accent: #f5651d;
+  --text-pick: #2b5045;
+  --text-keyword-base: #c4c2c0;
+  --text-keyword-primary: #fff;
+  --text-keyword-secondary: #999999;
+  --text-video-primary: #b6d5a7;
+  --text-video-secondary: #ddd;
+  --text-cate-primary: #edd8c2;
+  --text-cate-secondary: #b6d5a7;
+  --text-cate-tertiary: #e8cfe4;
+  --text-comment-primary: #fff;
+  --text-comment-secondary: #8d8d8d;
+  --text-learning-base: #8d8888;
+  --text-learning-primary: #ff5c00;
+  --text-learning-secondary: #008c49;
+  --text-card-category: #252525;
+  --text-card-title-active: #ff7d33;
+  --text-card-title-complete: #66ba92;
+  --text-card-author: #d1cfcf;
+  /* 배경 */
+  --bg-base: #e4ddcf;
+  --bg-primary: #ece3d2;
+  --bg-secondary:
+    radial-gradient(
+      93.89% 93.89% at 49.32% 6.11%,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.11) 86.06%,
+      rgba(134, 114, 77, 0.2) 88.94%
+    ),
+    linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
+  --bg-main-card: rgba(255, 255, 255, 0.6);
+  --bg-intro-mask: #1b1810;
+  --bg-intro: linear-gradient(
+    180deg,
+    #f9f5f2 0%,
+    #fff 18.77%,
+    #fff 41.8%,
+    #ece8e4 100%
+  );
+  --bg-main:
+    linear-gradient(
+        90deg,
+        #0f3025 0%,
+        #194335 38%,
+        #0b221b 87.51%,
+        #0d231c 100%
+      )
+      top / 100% 114px no-repeat,
+    #ece3d2;
+  --bg-video: #1b1b1b;
+  --bg-comment: #2a2a2a;
+  --bg-nav: linear-gradient(
+    90deg,
+    #0f3025 0%,
+    #194335 38%,
+    #0b221b 87.51%,
+    #0d231c 100%
+  );
+  --bg-nav-depth: #fff;
+  --bg-nav-alerts: #ff2200;
+  --bg-nav-alerts-hover: #188f6b;
+  --bg-cate-primary: #ded7cf;
+  --bg-cate-secondary: #d4decf;
+  --bg-cate-tertiary: #e8cfe4;
+  --bg-pick: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #d5ede6 100%);
+  --bg-gauge-base: #b4b4b4;
+  --bg-gauge-primary: #ff5c00;
+  --bg-search: #e4dbc9;
+  --bg-keyword-base: rgba(230, 205, 177, 0.3);
+  --bg-keyword-primary: #e47703;
+  --bg-keyword-primary-hover: #e6cdb1;
+  --bg-keyword-secondary: #786c60;
+  --bg-keyword-secondary-hover: #dcd3c9;
+  --bg-lecture-state: linear-gradient(270deg, #00ab66 0%, #058bb0 100%);
+  --bg-lecture-progress-primary: rgba(3, 9, 7, 0.3);
+  --bg-lecture-progress-secondary: #07855c;
+  --bg-btn-base: #000;
+  --bg-btn-primary: #ff5c00;
+  --bg-btn-secondary: #1f1f1f;
+  --bg-card: rgba(255, 255, 255, 0.6);
+  --bg-card-hover-start: #ff6600;
+  --bg-card-hover-end: rgba(255, 132, 0, 0.7);
+  --bg-card-thumb-overlay: rgba(255, 255, 255, 0.3);
+  --bg-card-shadow: rgba(217, 202, 190, 0.5);
+  --bg-card-hover-shadow: rgba(198, 187, 177, 0.5);
+  --bg-card-shadow-inner: rgba(0, 0, 0, 1);
+  --bg-pick-shadow: rgba(166, 154, 97, 0.25);
+  --bg-modal: rgba(0, 0, 0, 0.8);
+  --bg-modal-content: #f6f1e9;
+  --bg-modal-close-hover: #e00400;
+  --bg-scrollbar-thumb: #D0D0D0;
+  --bg-scrollbar-thumb-dark: #383838;
+  --bg-scrollbar-track: #F3F3F3;
+  --bg-scrollbar-thumb-light: rgba(255, 255, 255, 0.2);
+  --bg-scrollbar-thumb-light-hover: rgba(255, 255, 255, 0.3);
+  --bg-scrollbar-track-light: rgba(255, 255, 255, 0.05);
+  --bg-video-gauge: #171717;
+  --bg-video-gauge-fill: #ff6c19;
+  --bg-video-gauge-border: rgba(0, 0, 0, 0.4);
+  --bg-learning-line: #c6c3c3;
+  --bg-learning-dot: #8d8888;
+  --bg-learning-active: rgba(255, 92, 0, 0.2);
+  --bg-learning-active-line: #ffad7f;
+  --bg-learning-active-dot: #ff5c00;
+  --bg-learning-complete: rgba(0, 140, 73, 0.2);
+  --bg-learning-complete-line: #7fc5a4;
+  --bg-learning-complete-dot: #008c49;
+  --bg-chapter-current: #146b51;
+  --bg-chapter-completed: #ba9a85;
+  --bg-card-base: #7e7e7e;
+  --bg-card-current: #1d9b75;
+  --bg-card-current-border: #1f9b76;
+  --bg-card-current-bg: #dbefe9;
+  --bg-card-completed: #ab3d00;
+  --bg-gauge-fill: #e25e00;
+  --bg-shadow: #8a7d64;
+  --bg-puzzle-family: #7ed29b;
+  --bg-puzzle-hanmac: #ffccca;
+  --bg-puzzle-value: #87a7d6;
+  --bg-puzzle-company: #b49a65;
+  --bg-piece-1: #1d375d;
+  --bg-piece-2: #662a0d;
+  --bg-piece-3: #5b4822;
+  --bg-piece-4: #2a5338;
+  --bg-circle-border: #a7790f;
+  --bg-circle-start: rgba(127, 47, 0, 0.1);
+  --bg-circle-end: rgba(167, 121, 15, 0.5);
+  --bg-circle-dot: rgba(221, 144, 0, 0.6);
+  --bg-circle-dot-hover: rgba(221, 144, 0, 0.8);
+  --bg-circle-dot-stroke: rgba(221, 144, 0, 0.2);
+  --bg-gradient-start: #ece3d2;
+  --bg-gradient-end: #fff;
+  --bg-learning-line-color: #edba8a;
+  --bg-modal-header: #f04400;
+  --bg-textarea: #2a2a2a;
+  --bg-textarea-placeholder: rgba(255, 255, 255, 0.5);
+  /* border */
+  --border-base: rgba(0, 0, 0, 0.05);
+  --border-primary: #fff;
+  --border-keyword-base: rgba(0, 0, 0, 0.05);
+  --border-keyword-primary: rgba(255, 255, 255, 0.4);
+  --border-keyword-primary-hover: rgba(0, 0, 0, 0.05);
+  --border-keyword-secondary: rgba(255, 255, 255, 0.4);
+  --border-keyword-secondary-hover: rgba(0, 0, 0, 0.1);
+  --border-pick: rgba(255, 255, 255, 0.5);
+  --border-video: rgba(255, 255, 255, 0.1);
+  --border-btn: rgba(255, 255, 255, 0.2);
+  --border-card: rgba(255, 255, 255, 0.8);
+  --border-modal: #888;
+  --border-comment-resizer: rgba(230, 227, 225, 0.1);
+  /* drop */
+  --text-shadow:
+    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+  --text-stroke: drop-shadow(0 0 0.5px #000);
+  /* shadow */
+  --shadow-pagination: rgba(0, 0, 0, 0.4);
+  --shadow-modal: rgba(0, 0, 0, 0.25);
+  --shadow-card-drop: 0 4px 8px rgba(0, 0, 0, 0.2);
+  --shadow-card-drop-small: 0 4px 2px rgba(0, 0, 0, 0.05);
+  --shadow-gauge-inset: rgba(0, 0, 0, 0.3);
+  --shadow-comment: 0 8px 22px 22px rgba(0, 0, 0, 0.8);
+}
+
+/* 페이드 전환 */
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+
+.fade-in {
+  opacity: 1;
+  transition: opacity 0.4s ease;
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes arrow-next {
+  0%, 100% {
+    right: 72px;
+  }
+  50% {
+    right: 50px;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateX(-50%) translateY(0);
+  }
+  50% {
+    transform: translateX(-50%) translateY(-12px);
+  }
+}
+@keyframes slideUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes scroll-down {
+  0% {
+    transform-origin: 50% 100%;
+    transform: scaleY(1);
+  }
+  50% {
+    transform-origin: 50% 100%;
+    transform: scaleY(0);
+  }
+  50.1% {
+    transform-origin: 50% 0;
+    transform: scaleY(0);
+  }
+  to {
+    transform-origin: 50% 0;
+    transform: scaleY(1);
+  }
+}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+@keyframes borderFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes borderPulse {
+  0%, 100% {
+    border-color: #fff;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
+  }
+  50% {
+    border-color: #fff;
+    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
+  }
+}
+.guide-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 99;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  display: none;
+  height: var(--window-inner-height, 100vh);
+}
+.guide-wrap.active {
+  opacity: 1;
+  pointer-events: auto;
+  display: block;
+}
+.guide-svg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+}
+.guide-borders {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10000;
+}
+.guide-border {
+  position: absolute;
+  border-radius: 4px;
+}
+.guide-mask.nav {
+  position: absolute;
+  left: 50%;
+  top: 14px;
+  width: 900px;
+  height: 32px;
+  translate: -61% 0;
+  opacity: 0.5;
+}
+.guide-tooltip-box {
+  position: fixed;
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+  word-break: keep-all;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 10001;
+  pointer-events: auto;
+  opacity: 0;
+}
+.guide-tooltip-box:has(.guide-tooltip-description) .guide-tooltip-title {
+  margin-bottom: 8px;
+}
+.guide-tooltip-box::before, .guide-tooltip-box::after {
+  content: "";
+  display: black;
+  position: absolute;
+}
+.guide-tooltip-box::before {
+  top: -20px;
+  width: 1.5px;
+  height: 20px;
+  background-color: #fff;
+}
+.guide-tooltip-box::after {
+  top: -25px;
+  border-radius: 50px;
+  width: 12px;
+  height: 12px;
+  background-color: #FF602F;
+  border: 1.5px solid #fff;
+}
+.guide-tooltip-box.menu, .guide-tooltip-box.search, .guide-tooltip-box.notice, .guide-tooltip-box.mypage {
+  position: absolute;
+  top: 72px;
+}
+.guide-tooltip-box.menu {
+  left: calc(50% - 283px);
+  translate: -50% 0;
+}
+.guide-tooltip-box.menu::before, .guide-tooltip-box.menu::after {
+  content: "";
+  display: black;
+  position: absolute;
+}
+.guide-tooltip-box.menu::before {
+  right: 58px;
+}
+.guide-tooltip-box.menu::after {
+  right: 51.5px;
+}
+.guide-tooltip-box.menu p {
+  position: relative;
+  padding-left: 12px;
+}
+.guide-tooltip-box.menu p::before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 10px;
+  display: block;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: #333;
+}
+.guide-tooltip-box.search {
+  width: 180px;
+  translate: -35% 0;
+}
+.guide-tooltip-box.search::before {
+  right: 88px;
+}
+.guide-tooltip-box.search::after {
+  right: 81.5px;
+}
+.guide-tooltip-box.notice {
+  width: 122px;
+  translate: -106% 0;
+}
+.guide-tooltip-box.notice::before {
+  right: 32px;
+}
+.guide-tooltip-box.notice::after {
+  right: 25.5px;
+}
+.guide-tooltip-box.mypage {
+  width: 168px;
+  translate: 8% 0;
+}
+.guide-tooltip-box.mypage::before {
+  left: 22px;
+}
+.guide-tooltip-box.mypage::after {
+  left: 15.5px;
+}
+.guide-tooltip-box.mypage .guide-tooltip-description {
+  letter-spacing: -0.064em;
+}
+.guide-tooltip-box.change {
+  text-align: right;
+  white-space: nowrap;
+  width: -moz-max-content;
+  width: max-content;
+  translate: -100% 0;
+}
+.guide-tooltip-box.change::before {
+  right: 52px;
+}
+.guide-tooltip-box.change::after {
+  right: 45.5px;
+}
+.guide-tooltip-box.interest::before {
+  left: 52px;
+}
+.guide-tooltip-box.interest::after {
+  left: 45.5px;
+}
+.guide-tooltip-box.learning {
+  translate: -50% 142%;
+}
+.guide-tooltip-box.learning::before {
+  top: -70px;
+  left: 22px;
+  height: 70px;
+}
+.guide-tooltip-box.learning::after {
+  top: -72px;
+  left: 15.5px;
+}
+.guide-tooltip-title {
+  font-weight: 700;
+  font-size: 18px;
+  margin-bottom: 0;
+  color: #000;
+}
+.guide-tooltip-title:has(.guide-tooltip-description) {
+  margin-bottom: 8px;
+}
+.guide-tooltip-description {
+  font-size: 16px;
+  line-height: 1.5;
+  color: #666;
+  white-space: pre-line;
+}
+
+.main .container {
+  position: relative;
+  height: calc(var(--window-inner-height) - 64px);
+  overflow: hidden;
+}
+.main .container .bg-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: 100%;
+  margin: auto;
+  height: calc(var(--window-inner-height) - 64px);
+  -webkit-mask: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(180deg, #d9d9d9 0%, rgba(166, 166, 166, 0.08) 40%, rgba(140, 140, 140, 0.08) 60%, #737373 100%);
+          mask: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(180deg, #d9d9d9 0%, rgba(166, 166, 166, 0.08) 40%, rgba(140, 140, 140, 0.08) 60%, #737373 100%);
+  -webkit-mask-composite: source-in, xor;
+          mask-composite: intersect;
+  -webkit-mask: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(180deg, #d9d9d9 0%, rgba(166, 166, 166, 0.08) 40%, rgba(140, 140, 140, 0.08) 60%, #737373 100%);
+  -webkit-mask-composite: source-in;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  overflow: hidden;
+}
+.main .container .bg-circle::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 50%;
+  width: 100vw;
+  height: 67.22222vh;
+  background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 23.56%, var(--bg-gradient-end) 66.83%, var(--bg-gradient-start) 100%);
+  translate: 0 -50%;
+  opacity: 0.67;
+  z-index: 1;
+  mix-blend-mode: multiply;
+}
+.main .container .bg-circle ul {
+  position: relative;
+  width: clamp(1372px, 71.45833vw, 71.45833vw);
+  aspect-ratio: 1/1;
+}
+.main .container .bg-circle ul li {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  border: 1px solid var(--bg-circle-border);
+  background-blend-mode: multiply, normal;
+  background: linear-gradient(0deg, var(--bg-circle-start) 0%, var(--bg-circle-start) 100%), radial-gradient(50% 50% at 50% 50%, rgba(167, 121, 15, 0) 94.72%, var(--bg-circle-end) 100%);
+}
+.main .container .bg-circle ul li::before, .main .container .bg-circle ul li::after {
+  content: " ";
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  aspect-ratio: 1/1;
+  top: 50%;
+}
+.main .container .bg-circle ul li:nth-child(1) {
+  width: clamp(1372px, 71.45833vw, 71.45833vw);
+  opacity: 1;
+  transform: rotate(30deg);
+}
+.main .container .bg-circle ul li:nth-child(1)::before {
+  width: 12px;
+  height: 12px;
+  background: radial-gradient(50% 50% at 50% 50%, var(--bg-circle-dot) 60%, var(--bg-circle-dot-hover) 100%);
+  stroke-width: 1px;
+  stroke: var(--bg-circle-dot-stroke);
+  left: -6px;
+  opacity: 0.6;
+}
+.main .container .bg-circle ul li:nth-child(1)::after {
+  width: 14px;
+  height: 14px;
+}
+.main .container .bg-circle ul li:nth-child(2) {
+  width: clamp(1066px, 55.5208vw, 55.5208vw);
+  opacity: 0.7;
+}
+.main .container .bg-circle ul li:nth-child(3) {
+  width: clamp(794px, 41.3541vw, 41.3541vw);
+  opacity: 0.6;
+}
+.main .container .bg-circle ul li:nth-child(4) {
+  width: clamp(470px, 24.4791vw, 24.4791vw);
+  opacity: 0.5;
+}
+.main-contents {
+  width: 100%;
+  height: calc(var(--window-inner-height) - 64px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.main-contents .text-box {
+  text-align: center;
+  z-index: 1;
+}
+.main-contents .text-box span {
+  color: var(--text-main-primary);
+  font-size: 32px;
+}
+.main-contents .text-box span em {
+  font-weight: 700;
+}
+.main-contents .text-box p {
+  color: var(--text-main-primary);
+  font-size: 38px;
+}
+.main-contents .text-box p em {
+  color: var(--text-main-secondary);
+  font-weight: 700;
+}
+.main-contents .keyword-area {
+  padding: 8px 12px;
+  margin: 10px auto 8px auto;
+  text-align: center;
+  gap: 12px;
+  width: -moz-max-content;
+  width: max-content;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.main-contents .keyword-area button {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-main-primary);
+  opacity: 0.7;
+  gap: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+}
+.main-contents .keyword-area button .ico-setting {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background-image: url("../images/ico/ico_setting.svg");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.main .video-wrap {
+  position: absolute;
+  width: 100%;
+  height: calc(var(--window-inner-height) - 64px);
+  pointer-events: none;
+}
+.main .video-wrap .btn-prev, .main .video-wrap .btn-next {
+  pointer-events: auto;
+  position: absolute;
+  width: 84px;
+  height: 180px;
+  top: 50%;
+  translate: 0 -50%;
+  text-indent: -9999px;
+  color: transparent;
+  font-size: 1px;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+.main .video-wrap .btn-prev {
+  left: 40px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M94.6499 3C88.3166 26.9504 62.8499 78.281 11.6499 92C39.3166 99.3333 94.6499 127.5 94.6499 181.5' stroke='url(%23paint0_linear_1337_60932)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_60932' x1='94.6499' y1='92.25' x2='11.6499' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23DD842F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+  transition: left 0.2s linear;
+}
+.main .video-wrap .btn-prev:not(.disabled):hover {
+  left: 30px;
+}
+.main .video-wrap .btn-prev.disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M94.6499 3C88.3166 26.9504 62.8499 78.281 11.6499 92C39.3166 99.3333 94.6499 127.5 94.6499 181.5' stroke='url(%23paint0_linear_1337_60932)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_60932' x1='94.6499' y1='92.25' x2='11.6499' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23EFE7D7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+}
+.main .video-wrap .btn-prev:not(.disabled):hover {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M94.6499 3C88.3166 26.9504 62.8499 78.281 11.6499 92C39.3166 99.3333 94.6499 127.5 94.6499 181.5' stroke='url(%23paint0_linear_1337_60932)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_60932' x1='94.6499' y1='92.25' x2='11.6499' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23D34D00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+}
+.main .video-wrap .btn-next {
+  right: 40px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M3.00098 3C9.33431 26.9504 34.801 78.281 86.001 92C58.3343 99.3333 3.00098 127.5 3.00098 181.5' stroke='url(%23paint0_linear_1337_61160)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_61160' x1='3.00098' y1='92.25' x2='86.001' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23DD842F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+  transition: right 0.2s linear;
+}
+.main .video-wrap .btn-next:not(.disabled):hover {
+  right: 30px;
+}
+.main .video-wrap .btn-next.disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M3.00098 3C9.33431 26.9504 34.801 78.281 86.001 92C58.3343 99.3333 3.00098 127.5 3.00098 181.5' stroke='url(%23paint0_linear_1337_61162)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_61162' x1='3.00098' y1='92.25' x2='86.001' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23EFE7D7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+}
+.main .video-wrap .btn-next:not(.disabled):hover {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M3.00098 3C9.33431 26.9504 34.801 78.281 86.001 92C58.3343 99.3333 3.00098 127.5 3.00098 181.5' stroke='url(%23paint0_linear_1337_61162)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_61162' x1='3.00098' y1='92.25' x2='86.001' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23D34D00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+}
+.main .video-wrap .pagination {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  font-size: 20px;
+  color: var(--shadow-pagination);
+  font-weight: 400;
+}
+.main .video-wrap .pagination .current {
+  font-size: 24px;
+  font-weight: 700;
+}
+.main .video-cards-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  align-items: center;
+  justify-items: center;
+  height: 100%;
+  -moz-column-gap: 10%;
+       column-gap: 10%;
+}
+.main .video-card:nth-child(3) {
+  margin-left: -30%;
+}
+.main .video-card:nth-child(4) {
+  margin-right: -30%;
+}
+.main .my-learning {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: 796px;
+  translate: -50% -100%;
+}
+.main .learning-area {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: clamp(932px, 48.5416vw, 48.5416vw);
+  padding-top: 0;
+  background: none;
+}
+.main .learning-area::before, .main .learning-area::after {
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 158px;
+  height: 1px;
+  bottom: 48.5%;
+}
+.main .learning-area::before {
+  left: 7.2%;
+  background: linear-gradient(90deg, var(--bg-learning-line-color) 0%, rgba(237, 186, 138, 0) 100%);
+}
+.main .learning-area::after {
+  right: 7.2%;
+  background: linear-gradient(90deg, rgba(237, 186, 138, 0) 11.59%, var(--bg-learning-line-color) 100%);
+}
+
+.modal.keyword {
+  background-color: rgba(0, 0, 0, 0);
+}
+.modal.keyword .modal-header {
+  color: var(--bg-modal-header);
+  font-size: 14px;
+  font-weight: 700;
+}
+.modal.keyword .modal-header .btn-close {
+  color: inherit;
+  font: inherit;
+}
+.modal.keyword .modal-header .ico-check {
+  display: inline-block;
+  margin-left: 8px;
+  width: 8px;
+  height: 8px;
+  cursor: pointer;
+  background-image: url("../images/ico/ico_check.svg");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.modal.keyword .modal-content {
+  width: 640px;
+  min-height: auto;
+  padding: 20px 26px;
+  gap: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.98);
+  border: none;
+  box-shadow: 0 0 6px 0 var(--shadow-modal);
+  translate: 0 0;
+  transform: translate(-50%, -10px);
+}
+.modal.keyword .modal-content .keyword-list {
+  max-width: 100%;
+}

src/img/_favicon.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" data-name="레이어_2"><defs><style/></defs><g class="layer"><g data-name="레이어_1" id="_레이어_1-2"><g id="svg_1"><path d="M31.59 31.61c-1.81.72-2.76.04-3.19-.47l-4.83 5.85c-4.09 4.9-8.97 6.79-12.69 5.16l19.3-23.16s1.93-2.63 4.12-4.35c.16-.12.21-.25.18-.47-.14-.58-1.42-.97-2.96-.95l-3.83.02s-1.42-.07-2.35 0c-.19.02-2.67.12-3.48.21-.86.07-3.04.46-3.66.63-3.91 1.07-7.67 2.98-10.57 6.37-3.83 4.46-5.82 9.74-5.6 14.85.16 3.77 1.52 7.09 3.83 9.34 2.18 2.11 4.9 3.21 7.86 3.21.76 0 1.54-.07 2.32-.21 3.85-.72 7.61-3.18 10.9-7.13l6.98-8.44c-.23-.32-.91-1-2.28-.46h-.06zM6.55 35.07c-.16-3.69 1.36-7.62 4.32-11.03 3.5-4.04 6.34-5.23 9.05-5.41 1.26-.09 2.41.09 3.68.72L7.43 38.8c-.53-1.07-.82-2.35-.88-3.72v-.02z" id="svg_2" fill="#ca2829"/><path d="M61.56 25.31c-.31-3.84-1.98-7.27-4.59-9.41-6.23-5.13-13.46-3.39-19.87 4.74l-7.3 8.83-.6.74c.14.21.66.75 2.04.19 1.69-.68 2.86.04 3.42.72l1.03-1.25 4.75-5.74.04-.05c4.88-6.2 9.53-7.57 13.83-4.02 1.56 1.28 2.55 3.37 2.74 5.72.29 3.55-1.11 7.58-4.2 11.1-4.34 4.92-8.52 6.37-12.72 4.86l6.27-7.72-3.35-3.49-9.36 11.53s-1.87 2.55-4.03 4.27c-.23.16-.33.28-.27.54.12.56 1.34.93 2.82.95h3.93s3.33.02 4.03-.04c.14-.02 2.49-.23 2.96-.26.41-.04 2.43-.44 2.9-.56 3.97-1.12 7.18-2.93 10.18-6.57 3.91-4.71 5.84-10.08 5.43-15.12l-.08.04z" id="svg_3" fill="#263b7c"/></g></g></g></svg>

src/img/bg_alerts.svg

@@ -0,0 +1 @@
+<svg width="253" height="260" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d_1754_44161)"><mask id="a" fill="#fff"><path d="M211.176 5.771c1.08-2.406 4.518-2.347 5.514.095l5.129 12.567a4.001 4.001 0 003.704 2.489H237a4 4 0 014 4v219a4 4 0 01-4 4H8a4 4 0 01-4-4v-219a4 4 0 014-4h193.785a3.999 3.999 0 003.649-2.362l5.742-12.789z"/></mask><path d="M211.176 5.771c1.08-2.406 4.518-2.347 5.514.095l5.129 12.567a4.001 4.001 0 003.704 2.489H237a4 4 0 014 4v219a4 4 0 01-4 4H8a4 4 0 01-4-4v-219a4 4 0 014-4h193.785a3.999 3.999 0 003.649-2.362l5.742-12.789z" fill="#fff"/><path d="M211.176 5.771l-.912-.41.912.41zm5.514.095l.926-.378-.926.378zM237 20.922v-1 1zm4 223h1-1zm-233 4v1-1zm-4-4H3h1zM205.434 18.56l-.912-.41.912.41zm16.385-.127l.926-.378-.926.378zM211.176 5.771l.912.41c.72-1.605 3.012-1.565 3.677.063l.925-.378.926-.378c-1.329-3.256-5.912-3.335-7.352-.126l.912.41zm5.514.095l-.925.378 5.128 12.567.926-.378.926-.378-5.129-12.567-.926.378zm8.833 15.056v1H237v-2h-11.477v1zm11.477 0v1a3 3 0 013 3h2a5 5 0 00-5-5v1zm4 4h-1v219h2v-219h-1zm0 219h-1a3 3 0 01-3 3v2a5 5 0 005-5h-1zm-4 4v-1H8v2h229v-1zm-229 0v-1a3 3 0 01-3-3H3a5 5 0 005 5v-1zm-4-4h1v-219H3v219h1zm0-219h1a3 3 0 013-3v-2a5 5 0 00-5 5h1zm4-4v1h193.785v-2H8v1zm197.434-2.362l.913.41 5.741-12.789-.912-.41-.912-.41-5.742 12.79.912.41zm-3.649 2.362v1a5.002 5.002 0 004.562-2.952l-.913-.41-.912-.41a3 3 0 01-2.737 1.772v1zm20.034-2.489l-.926.378a5.001 5.001 0 004.63 3.11v-2a3.001 3.001 0 01-2.778-1.866l-.926.378z" fill="#188F6B" mask="url(#a)"/></g><defs><filter id="filter0_d_1754_44161" x="0" y="0" width="253" height="259.922" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="4" dy="4"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1754_44161"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1754_44161" result="shape"/></filter></defs></svg>

src/img/bg_circle.svg

@@ -0,0 +1 @@
+<svg width="1599" height="914" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1599" height="914"><path fill="url(#paint0_linear_1334_29251)" d="M0 0h1599v914H0z"/></mask><g mask="url(#a)"><g opacity=".5"><circle cx="799.614" cy="460.614" r="234.114" fill="url(#paint1_radial_1334_29251)" fill-opacity=".5"/><circle cx="799.614" cy="460.614" r="234.114" fill="#7F2F00" fill-opacity=".1" style="mix-blend-mode:multiply"/><circle cx="799.614" cy="460.614" r="234.114" stroke="#A7790F"/></g><g opacity=".6"><circle cx="799.97" cy="460.97" r="396.47" fill="url(#paint2_radial_1334_29251)" fill-opacity=".5"/><circle cx="799.97" cy="460.97" r="396.47" fill="#7F2F00" fill-opacity=".2"/><circle cx="799.97" cy="460.97" r="396.47" stroke="#A7790F"/></g><g opacity=".7"><circle cx="799.456" cy="460.456" r="532.956" fill="url(#paint3_radial_1334_29251)" fill-opacity=".5"/><circle cx="799.456" cy="460.456" r="532.956" fill="#7F2F00" fill-opacity=".2"/><circle cx="799.456" cy="460.456" r="532.956" stroke="#A7790F"/></g><circle cx="800" cy="461" r="685.5" fill="url(#paint4_radial_1334_29251)" fill-opacity=".5"/><circle cx="800" cy="461" r="685.5" fill="#7F2F00" fill-opacity=".1" style="mix-blend-mode:multiply"/><circle cx="800" cy="461" r="685.5" stroke="#A7790F"/></g><defs><radialGradient id="paint1_radial_1334_29251" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90 169.5 630.114) scale(234.614)"><stop offset=".947" stop-color="#A7790F" stop-opacity="0"/><stop offset="1" stop-color="#A7790F"/></radialGradient><radialGradient id="paint2_radial_1334_29251" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90 169.5 630.47) scale(396.97)"><stop offset=".947" stop-color="#A7790F" stop-opacity="0"/><stop offset="1" stop-color="#A7790F"/></radialGradient><radialGradient id="paint3_radial_1334_29251" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90 169.5 629.956) scale(533.456)"><stop offset=".947" stop-color="#A7790F" stop-opacity="0"/><stop offset="1" stop-color="#A7790F"/></radialGradient><radialGradient id="paint4_radial_1334_29251" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 686 -686 0 800 461)"><stop offset=".947" stop-color="#A7790F" stop-opacity="0"/><stop offset="1" stop-color="#A7790F"/></radialGradient><linearGradient id="paint0_linear_1334_29251" x1="799.5" y1="0" x2="799.5" y2="914" gradientUnits="userSpaceOnUse"><stop stop-color="#D9D9D9"/><stop offset=".4" stop-color="#A6A6A6" stop-opacity=".08"/><stop offset=".6" stop-color="#8D8D8D" stop-opacity=".08"/><stop offset="1" stop-color="#737373"/></linearGradient></defs></svg>

src/img/btn_next.svg

@@ -0,0 +1 @@
+<svg width="98" height="185" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 3c6.333 23.95 31.8 75.281 83 89-27.667 7.333-83 35.5-83 89.5" stroke="url(#paint0_linear_1208_27735)" stroke-width="6" stroke-linecap="round"/><defs><linearGradient id="paint0_linear_1208_27735" x1="3" y1="92.25" x2="86" y2="92.25" gradientUnits="userSpaceOnUse"><stop stop-color="#CBAF94" stop-opacity="0"/><stop offset="1" stop-color="#CBAF94"/></linearGradient></defs></svg>

src/img/btn_prev.svg

@@ -0,0 +1 @@
+<svg width="98" height="185" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M94.65 3c-6.333 23.95-31.8 75.281-83 89 27.667 7.333 83 35.5 83 89.5" stroke="url(#paint0_linear_1208_27734)" stroke-width="6" stroke-linecap="round"/><defs><linearGradient id="paint0_linear_1208_27734" x1="94.65" y1="92.25" x2="11.65" y2="92.25" gradientUnits="userSpaceOnUse"><stop stop-color="#CBAF94" stop-opacity="0"/><stop offset="1" stop-color="#CBAF94"/></linearGradient></defs></svg>

src/img/cursor.svg

@@ -0,0 +1 @@
+<svg width="100" height="100" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="#000"/></svg>

src/img/ico/ico_add.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6.528" cy="6.528" r="6.12" fill="#FFFEFE" stroke="#6C6C6C" stroke-width=".816"/><path stroke="#6C6C6C" stroke-width="1.632" d="M6.528 3.266v6.528M3.264 6.528h6.528"/></svg>

src/img/ico/ico_alerts.svg

@@ -0,0 +1 @@
+<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.78 14c-.09 0-2.11-.36-2.11-6.25 0-4.16-2.42-6.75-6.42-6.75S3.83 3.59 3.83 7.75c0 6-2.09 6.25-2.08 6.25a.75.75 0 100 1.5h4.83a3.74 3.74 0 007.34 0h4.84a.75.75 0 100-1.5h.02zm-8.53 3a2.24 2.24 0 01-2.11-1.5h4.22a2.24 2.24 0 01-2.11 1.5zm-6.24-3c.72-1.09 1.32-3 1.32-6.25s1.8-5.25 4.92-5.25 4.92 1.91 4.92 5.25.6 5.16 1.32 6.25H4.01z" fill="#fff"/><path d="M10.25.5c2.111 0 3.857.687 5.073 1.972 1.213 1.281 1.847 3.103 1.847 5.278 0 2.898.499 4.354.945 5.068.446.714.829.682.665.682a1.25 1.25 0 01-.02 2.5h-4.45a4.24 4.24 0 01-8.12 0H1.75a1.25 1.25 0 01-.072-2.497h.002a.687.687 0 00.133-.065c.125-.075.33-.237.552-.583.449-.699.965-2.152.965-5.105 0-2.175.634-3.997 1.847-5.278C6.393 1.187 8.139.5 10.25.5zM9.034 16a1.732 1.732 0 002.432 0H9.034zM1.75 14c-.003 0 .135-.019.342-.148a.706.706 0 00-.1-.29.964.964 0 00-.242-.062v.5zm8.5-11c-1.45 0-2.536.461-3.264 1.246-.732.79-1.156 1.968-1.156 3.504 0 2.676-.4 4.51-.975 5.75h10.786c-.573-1.22-.971-3.006-.971-5.75 0-1.584-.426-2.759-1.154-3.535C12.79 3.443 11.706 3 10.25 3z" stroke="#000" stroke-opacity=".3"/></svg>

src/img/ico/ico_arrow_meta.svg

@@ -0,0 +1 @@
+<svg width="5" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 .736L.744 0l4.05 4.009a.69.69 0 01.152.755.69.69 0 01-.152.225L.744 9 0 8.264 3.802 4.5 0 .736z" fill="#B6D5A7"/></svg>

src/img/ico/ico_arrow_next_dashed.svg

@@ -0,0 +1 @@
+<svg width="30" height="23" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".8" d="M27.916 11.25l-10-10m10 10l-10 10m10-10h-17.5m-9.167 0h4.167" stroke="#FFFEFE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/img/ico/ico_arrow_suggest.svg

@@ -0,0 +1 @@
+<svg width="9" height="5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5.5l4 4 4-4" stroke="#A9760B" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/img/ico/ico_bookmark.svg

@@ -0,0 +1 @@
+<svg width="18" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.05.75c2.428 0 4.2 1.702 4.2 3.746 0 1.27-.624 2.498-1.917 3.935-1.299 1.443-3.172 2.99-5.505 4.91v.002L9 14.026l-.827-.683-.001-.001-1.662-1.375C4.938 10.653 3.64 9.513 2.667 8.43 1.374 6.994.75 5.766.75 4.496.75 2.452 2.522.75 4.95.75c1.365 0 2.67.581 3.505 1.466L9 2.792l.545-.576C10.38 1.33 11.685.75 13.05.75z" stroke="#000" stroke-opacity=".8" stroke-width="1.5"/></svg>

src/img/ico/ico_bookmark_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" fill="none"><path d="M15.95 0C14.036 0 12.199.795 11 2.04 9.801.795 7.964 0 6.05 0 2.662 0 0 2.364 0 5.395c0 3.698 3.74 6.73 9.405 11.31L11 18l1.595-1.295C18.26 12.125 22 9.093 22 5.395 22 2.364 19.338 0 15.95 0z" fill="#fff"/><path d="M15.95.75c3.058 0 5.3 2.108 5.3 4.646 0 1.572-.789 3.079-2.38 4.816-1.598 1.742-3.899 3.607-6.747 5.91v.001l-1.123.91-1.122-.91h-.001l-2.031-1.651c-1.924-1.578-3.518-2.954-4.715-4.26C1.539 8.475.75 6.968.75 5.396.75 2.858 2.992.75 6.05.75c1.717 0 3.357.717 4.41 1.81l.54.562.54-.561C12.593 1.467 14.233.75 15.95.75z" stroke="#060505" stroke-opacity=".2" stroke-width="1.5"/></svg>

src/img/ico/ico_bookmark_on.svg

@@ -0,0 +1 @@
+<svg width="22" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.95 0C14.036 0 12.199.795 11 2.04 9.801.795 7.964 0 6.05 0 2.662 0 0 2.364 0 5.395c0 3.698 3.74 6.73 9.405 11.31L11 18l1.595-1.295C18.26 12.125 22 9.093 22 5.395 22 2.364 19.338 0 15.95 0z" fill="#ff5c00"/><path d="M15.95.75c3.058 0 5.3 2.108 5.3 4.646 0 1.572-.789 3.079-2.38 4.816-1.598 1.742-3.899 3.607-6.747 5.91v.001l-1.123.91-1.122-.91h-.001l-2.031-1.651c-1.924-1.578-3.518-2.954-4.715-4.26C1.539 8.475.75 6.968.75 5.396.75 2.858 2.992.75 6.05.75c1.717 0 3.357.717 4.41 1.81l.54.562.54-.561C12.593 1.467 14.233.75 15.95.75z" stroke="#fff" stroke-opacity=".2" stroke-width="1.5"/></svg>

src/img/ico/ico_check.svg

@@ -0,0 +1 @@
+<svg width="8" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.75 4.217c1.29 1.538 1.82 2.526 2.4 4.533.678-3.726 1.415-5.702 3.6-8" stroke="#F27A4A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/img/ico/ico_chevron.svg

@@ -0,0 +1 @@
+<svg width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4l3 3 3-3" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/img/ico/ico_clear.svg

@@ -0,0 +1 @@
+<svg width="12" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".4" stroke="#000"><path transform="rotate(134.999 4.982 2.064) skewX(-.003)" d="M0-.5h14.09"/><path d="M10.717 10.323L.754.36"/></g></svg>

src/img/ico/ico_comment.svg

@@ -0,0 +1 @@
+<svg width="21" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.516 2.47L16.29.409a1.694 1.694 0 00-1.07-.407 1.707 1.707 0 00-1.091.354L6.816 7.13a1.462 1.462 0 00-.463.91l-.35 3.14a.735.735 0 00.236.602.868.868 0 00.577.218h.073l3.388-.286c.371-.034.719-.186.983-.43l7.313-6.774c.284-.277.437-.648.427-1.03a1.4 1.4 0 00-.484-1.01zm-8.385 7.739l-2.438.21.22-2.258 4.59-4.2 2.194 2.032-4.566 4.216zm5.623-5.224l-2.178-2.018 1.584-1.505 2.218 2.055-1.624 1.468z" fill="#000"/></svg>

src/img/ico/ico_drag.svg

@@ -0,0 +1 @@
+<svg width="16" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.643h5.5v3.305l-1.295-1.382-.705.755L8 16l2.5-2.679-.705-.755L8.5 13.948v-3.305H14V9.57H2v1.072zm3.5-6.964l.705.755L7.5 3.052v3.305H2V7.43h12V6.357H8.5V3.052l1.295 1.382.705-.755L8 1 5.5 3.679z" fill="#fff" opacity=".5"/></svg>

src/img/ico/ico_economy.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.22 10.61c9.82 0 17.782 8.931 17.782 19.386 0 10.456-7.962 19.387-17.783 19.387H26.6c-9.821 0-17.783-8.68-17.783-19.387S16.778 10.61 26.598 10.61h7.621z" fill="#FFB200"/><path d="M34.22 10.61c9.82 0 17.782 8.931 17.782 19.386 0 10.456-7.962 19.387-17.783 19.387H26.6c-9.821 0-17.783-8.68-17.783-19.387S16.778 10.61 26.598 10.61h7.621z" fill="url(#paint0_linear_1805_3336)" fill-opacity=".1"/><ellipse cx="27.556" cy="30.003" rx="19.556" ry="20.23" fill="#FFB300"/><ellipse cx="27.556" cy="30.003" rx="19.556" ry="20.23" fill="url(#paint1_linear_1805_3336)" fill-opacity=".3"/><path d="M27.556 11.773c9.632 0 17.555 8.098 17.555 18.23s-7.923 18.23-17.555 18.23C17.923 48.233 10 40.136 10 30.003c0-10.132 7.924-18.23 17.556-18.23z" stroke="#fff" stroke-opacity=".5" stroke-width="4"/><g clip-path="url(#clip0_1805_3336)"><path d="M21.293 24.752a.976.976 0 00-1.224-.601.95.95 0 00-.614 1.2l1.512 4.442h-.593a.957.957 0 00-.968.948c0 .525.433.948.968.948h1.237l1.714 5.041a.97.97 0 00.956.649.96.96 0 00.9-.717l1.27-4.973h1.392l1.27 4.973a.96.96 0 00.9.717.97.97 0 00.956-.649l1.715-5.04h1.236a.957.957 0 00.968-.949.957.957 0 00-.968-.948h-.592l1.511-4.442a.945.945 0 00-.61-1.2.975.975 0 00-1.225.598l-1.717 5.044H29.35l-1.267-4.973a.961.961 0 00-.937-.717.961.961 0 00-.937.717l-1.27 4.973h-1.935l-1.712-5.04zm2.359 6.937h.804l-.345 1.352-.46-1.352zm3.284-1.896l.211-.833.212.833h-.424zm2.902 1.896h.804l-.46 1.352-.344-1.352z" fill="url(#paint2_linear_1805_3336)"/></g><defs><linearGradient id="paint0_linear_1805_3336" x1="24.14" y1="26.067" x2="40.81" y2="54.065" gradientUnits="userSpaceOnUse"><stop stop-opacity="0"/><stop offset="1"/></linearGradient><linearGradient id="paint1_linear_1805_3336" x1="21.878" y1="25.903" x2="40.337" y2="52.812" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="paint2_linear_1805_3336" x1="27.148" y1="24.102" x2="27.148" y2="37.38" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".8"/></linearGradient><clipPath id="clip0_1805_3336"><path fill="#fff" transform="translate(19.406 24.102)" d="M0 0h15.482v15.172H0z"/></clipPath></defs></svg>

src/img/ico/ico_future.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.828 13.62c2.977.238 6.168 1.475 9.308 3.376a1.627 1.627 0 010 2.783c-2.558 1.549-5.195 3.654-7.737 6.196-2.263 2.265-4.181 4.603-5.668 6.895 1.487 2.291 3.404 4.63 5.668 6.895 2.264 2.264 4.603 4.18 6.895 5.667 2.292-1.486 4.63-3.404 6.894-5.667 2.543-2.542 4.648-5.18 6.196-7.738a1.627 1.627 0 012.784 0c1.9 3.14 3.138 6.332 3.375 9.308.242 3.021-.552 5.857-2.74 8.044-2.188 2.188-5.023 2.983-8.044 2.74-2.71-.216-5.6-1.26-8.465-2.881-2.867 1.62-5.755 2.665-8.466 2.882-3.02.242-5.856-.553-8.043-2.741-2.188-2.188-2.983-5.023-2.741-8.044.216-2.71 1.261-5.599 2.882-8.465-1.62-2.866-2.666-5.755-2.882-8.465-.242-3.022.553-5.858 2.74-8.045 2.188-2.187 5.024-2.981 8.044-2.74zm-5.883 16.093c1.458-2.047 3.196-4.081 5.153-6.04 1.958-1.956 3.992-3.694 6.038-5.152-2.009-.965-3.892-1.525-5.567-1.658-2.26-.18-4.094.41-5.483 1.799-1.39 1.39-1.979 3.223-1.799 5.483.133 1.675.693 3.56 1.658 5.568zm0 6.312c-.965 2.01-1.524 3.894-1.658 5.568-.18 2.26.409 4.094 1.799 5.484 1.39 1.39 3.223 1.978 5.483 1.798 1.674-.134 3.558-.693 5.567-1.658-2.046-1.457-4.081-3.195-6.038-5.152-1.957-1.957-3.695-3.993-5.153-6.04zM32.45 47.218c2.01.965 3.894 1.525 5.568 1.658 2.26.18 4.094-.41 5.484-1.798 1.39-1.39 1.978-3.224 1.798-5.484-.134-1.673-.693-3.558-1.658-5.567-1.458 2.046-3.195 4.082-5.153 6.039-1.957 1.957-3.991 3.694-6.039 5.152z" fill="#A87DFF"/><path d="M25.018 28.598a6.043 6.043 0 118.546 8.546 6.043 6.043 0 01-8.546-8.546z" fill="#2D26FF"/><path d="M25.018 28.598a6.043 6.043 0 118.546 8.546 6.043 6.043 0 01-8.546-8.546z" fill="url(#paint0_linear_1805_37041)" fill-opacity=".5"/><path d="M14.07 14.313a2.406 2.406 0 110 4.812 2.406 2.406 0 010-4.813zm0 32.539a2.406 2.406 0 110 4.811 2.406 2.406 0 010-4.811zm31.376-1.164a2.406 2.406 0 11.001 4.812 2.406 2.406 0 010-4.813z" fill="#F9F9FA" stroke="#2D26FF"/><path d="M43.537 10.125c.282.28.44.66.44 1.057v2.147c4.147.174 7.5 3.441 7.5 7.673 0 1.068-.072 2.315-.151 3.37-.153 2.046-1.683 3.76-3.792 4.012a42.95 42.95 0 01-5.057.303c-1.986 0-3.74-.145-5.058-.303-2.11-.252-3.64-1.966-3.792-4.011a47.83 47.83 0 01-.15-3.37c0-4.233 3.351-7.5 7.5-7.674v-2.147c0-.396.158-.777.439-1.057a1.503 1.503 0 012.121 0z" fill="#315BFF"/><path d="M43.537 10.125c.282.28.44.66.44 1.057v2.147c4.147.174 7.5 3.441 7.5 7.673 0 1.068-.072 2.315-.151 3.37-.153 2.046-1.683 3.76-3.792 4.012a42.95 42.95 0 01-5.057.303c-1.986 0-3.74-.145-5.058-.303-2.11-.252-3.64-1.966-3.792-4.011a47.83 47.83 0 01-.15-3.37c0-4.233 3.351-7.5 7.5-7.674v-2.147c0-.396.158-.777.439-1.057a1.503 1.503 0 012.121 0z" fill="url(#paint1_linear_1805_37041)" fill-opacity=".5"/><path d="M43.537 10.125c.282.28.44.66.44 1.057v2.147c4.147.174 7.5 3.441 7.5 7.673 0 1.068-.072 2.315-.151 3.37-.153 2.046-1.683 3.76-3.792 4.012a42.95 42.95 0 01-5.057.303c-1.986 0-3.74-.145-5.058-.303-2.11-.252-3.64-1.966-3.792-4.011a47.83 47.83 0 01-.15-3.37c0-4.233 3.351-7.5 7.5-7.674v-2.147c0-.396.158-.777.439-1.057a1.503 1.503 0 012.121 0z" fill="url(#paint2_linear_1805_37041)" fill-opacity=".8" style="mix-blend-mode:screen"/><path d="M47.362 19.648c.076.189.115.39.115.595v.889c0 .204-.04.406-.115.595a1.56 1.56 0 01-.325.505c-.14.144-.304.259-.486.337a1.453 1.453 0 01-1.635-.337 1.56 1.56 0 01-.325-.505 1.607 1.607 0 01-.114-.595v-.889c0-.204.038-.406.114-.595a1.56 1.56 0 01.325-.505 1.51 1.51 0 01.487-.337 1.454 1.454 0 011.634.337c.14.145.25.316.325.505zm-7 0c.076.189.115.39.115.595v.889c0 .204-.04.406-.115.595a1.56 1.56 0 01-.325.505c-.14.144-.304.259-.486.337a1.453 1.453 0 01-1.635-.337 1.56 1.56 0 01-.325-.505 1.607 1.607 0 01-.114-.595v-.889c0-.204.038-.406.114-.595a1.56 1.56 0 01.325-.505 1.51 1.51 0 01.487-.337 1.454 1.454 0 011.634.337c.14.145.25.316.325.505z" fill="#F9F9FA"/><defs><linearGradient id="paint0_linear_1805_37041" x1="28.971" y1="36.887" x2="32.866" y2="26.102" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="paint1_linear_1805_37041" x1="42" y1="25.5" x2="48.379" y2="8.766" gradientUnits="userSpaceOnUse"><stop stop-color="#00FFB5" stop-opacity="0"/><stop offset="1" stop-color="#00FFB5"/></linearGradient><linearGradient id="paint2_linear_1805_37041" x1="45.72" y1="14.229" x2="37.459" y2="28.691" gradientUnits="userSpaceOnUse"><stop stop-color="#1500FF" stop-opacity="0"/><stop offset="1" stop-color="#1500FF"/></linearGradient></defs></svg>

src/img/ico/ico_health.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42.35 40.092a5.45 5.45 0 00-1.516-3.787 5.09 5.09 0 00-3.66-1.568v-1.339H15.2a5.026 5.026 0 00-1.988.401 5.169 5.169 0 00-1.687 1.16 5.371 5.371 0 00-1.128 1.74A5.515 5.515 0 0010 38.752c0 4.527 2.156 7.94 5.525 10.166 3.318 2.187 7.79 3.22 12.591 3.22 4.8 0 9.273-1.033 12.59-3.22 3.37-2.223 5.526-5.641 5.526-10.166 0-1.28-.435-2.455-1.16-3.376a5.257 5.257 0 00-1.99 1.969 5.495 5.495 0 00-.732 2.746z" fill="url(#paint0_linear_1805_10738)"/><path d="M42.35 40.092a5.45 5.45 0 00-1.516-3.787 5.09 5.09 0 00-3.66-1.568v-1.339H15.2a5.026 5.026 0 00-1.988.401 5.169 5.169 0 00-1.687 1.16 5.371 5.371 0 00-1.128 1.74A5.515 5.515 0 0010 38.752c0 4.527 2.156 7.94 5.525 10.166 3.318 2.187 7.79 3.22 12.591 3.22 4.8 0 9.273-1.033 12.59-3.22 3.37-2.223 5.526-5.641 5.526-10.166 0-1.28-.435-2.455-1.16-3.376a5.257 5.257 0 00-1.99 1.969 5.495 5.495 0 00-.732 2.746z" fill="url(#paint1_linear_1805_10738)"/><path d="M42.35 40.092a5.45 5.45 0 00-1.516-3.787 5.09 5.09 0 00-3.66-1.568v-1.339H15.2a5.026 5.026 0 00-1.988.401 5.169 5.169 0 00-1.687 1.16 5.371 5.371 0 00-1.128 1.74A5.515 5.515 0 0010 38.752c0 4.527 2.156 7.94 5.525 10.166 3.318 2.187 7.79 3.22 12.591 3.22 4.8 0 9.273-1.033 12.59-3.22 3.37-2.223 5.526-5.641 5.526-10.166 0-1.28-.435-2.455-1.16-3.376a5.257 5.257 0 00-1.99 1.969 5.495 5.495 0 00-.732 2.746z" fill="url(#paint2_radial_1805_10738)" fill-opacity=".5"/><path d="M28.117 9.313c-2.746 0-5.379 1.128-7.32 3.136-1.942 2.008-3.032 4.732-3.032 7.572s1.09 5.565 3.032 7.573c1.941 2.008 4.574 3.136 7.32 3.136 2.745 0 5.378-1.128 7.32-3.136 1.941-2.008 3.032-4.732 3.032-7.573 0-2.84-1.09-5.564-3.032-7.572s-4.575-3.136-7.32-3.136z" fill="url(#paint3_linear_1805_10738)"/><path d="M42.353 36.088l-1.628-1.32a6.054 6.054 0 00-4.315-1.35c-1.551.127-3 .852-4.057 2.033a6.532 6.532 0 00-1.652 4.34 6.534 6.534 0 001.629 4.348l9.066 10.254c.12.137.268.246.433.321a1.256 1.256 0 001.043 0c.165-.075.312-.184.434-.321l9.068-10.254a6.534 6.534 0 001.629-4.349 6.532 6.532 0 00-1.652-4.34 6.118 6.118 0 00-4.057-2.032 6.054 6.054 0 00-4.316 1.35l-1.625 1.32z" fill="url(#paint4_linear_1805_10738)"/><defs><linearGradient id="paint0_linear_1805_10738" x1="18.616" y1="35.891" x2="24.841" y2="55.106" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#9C6CFE"/><stop offset="1" stop-color="#7A41DC"/></linearGradient><linearGradient id="paint1_linear_1805_10738" x1="28.116" y1="31.168" x2="36.846" y2="62.7" gradientUnits="userSpaceOnUse"><stop stop-color="#885EDB" stop-opacity="0"/><stop offset="1" stop-color="#E362F8"/></linearGradient><linearGradient id="paint3_linear_1805_10738" x1="22.687" y1="12.158" x2="33.76" y2="29.252" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#9C6CFE"/><stop offset="1" stop-color="#7A41DC"/></linearGradient><linearGradient id="paint4_linear_1805_10738" x1="33.295" y1="34.742" x2="47.434" y2="57.315" gradientUnits="userSpaceOnUse"><stop stop-color="#FC92CB"/><stop offset="1" stop-color="#D7257D"/></linearGradient><radialGradient id="paint2_radial_1805_10738" cx="0" cy="0" r="1" gradientTransform="matrix(14.535 11.502 -6.67913 9.03256 43.644 45.446)" gradientUnits="userSpaceOnUse"><stop offset=".436" stop-color="#30116E"/><stop offset=".556" stop-color="#30116E" stop-opacity=".812"/><stop offset="1" stop-color="#30116E" stop-opacity="0"/></radialGradient></defs></svg>

src/img/ico/ico_history.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".6" d="M12.308 12.308a5.052 5.052 0 01-1.733 1.149 5.306 5.306 0 01-1.96.379 5.305 5.305 0 01-1.958-.38 5.06 5.06 0 01-1.734-1.148l.82-.82c.8.8 1.758 1.2 2.873 1.2 1.115 0 2.072-.4 2.871-1.2.8-.8 1.2-1.758 1.2-2.872.001-1.115-.399-2.072-1.2-2.872-.8-.8-1.758-1.2-2.871-1.2s-2.07.4-2.872 1.2l-.062.061h1.272l.02 1.17H3.692V3.692l1.17.021v1.272l.061-.062a5.05 5.05 0 011.734-1.148 5.31 5.31 0 011.959-.38 5.31 5.31 0 011.959.38 5.03 5.03 0 011.733 1.148c.512.513.895 1.09 1.149 1.734.254.642.38 1.295.38 1.959a5.34 5.34 0 01-.38 1.959 5.026 5.026 0 01-1.15 1.733z" fill="#000"/><path opacity=".6" stroke="#000" stroke-width=".707" stroke-linecap="round" d="M8.479 6.906V9.1m2.068.802l-1.689-.844"/></svg>

src/img/ico/ico_info.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="7" fill="#D0CBBF"/><path d="M6.498 12.143a.701.701 0 01-.187-.044 2.02 2.02 0 01-.264-.121 3.458 3.458 0 01-.242-.176.425.425 0 01-.12-.187.469.469 0 01-.023-.165v-.308c.008-.176.015-.4.022-.671a74.3 74.3 0 00.044-.891c.022-.33.04-.66.055-.99.022-.33.04-.645.055-.946.022-.308.037-.568.044-.781.015-.22.022-.378.022-.473 0-.051.011-.088.033-.11.03-.03.077-.044.143-.044.147 0 .297.018.451.055a.983.983 0 01.385.176c.11.073.165.169.165.286a6.7 6.7 0 01-.033.484c-.014.242-.033.524-.055.847-.022.323-.047.649-.077.979-.03.33-.051.63-.066.902-.014.264-.022.462-.022.594 0 .257.011.422.033.495.022.066.063.099.121.099.044 0 .114-.044.21-.132a6.606 6.606 0 00.616-.66c.102-.117.175-.205.22-.264l.054-.055c.008-.015.022-.022.044-.022.03 0 .066.033.11.099a.48.48 0 01.077.231.124.124 0 01-.01.088.248.248 0 01-.045.088 5.41 5.41 0 01-.34.44c-.147.176-.309.356-.485.539a4.634 4.634 0 01-.517.451c-.161.125-.3.187-.418.187zm.066-7.205a.78.78 0 01-.33-.066.602.602 0 01-.209-.198.558.558 0 01-.077-.286c0-.154.037-.282.11-.385a.668.668 0 01.297-.231.872.872 0 01.374-.088.63.63 0 01.286.066.43.43 0 01.21.187.626.626 0 01.087.352c0 .11-.036.216-.11.319a.93.93 0 01-.286.242.781.781 0 01-.352.088z" fill="#000"/></svg>

src/img/ico/ico_level_master.svg

@@ -0,0 +1 @@
+<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_f_3513_49356)"><path d="M12.787 4.884c-4.963-.876-7.007.292-8.174 4.717v.875c1 3.737 1.46 4.38 6.13 4.38 5.839 0 5.352-3.504 5.547-5.255 0-.39-.881-4.254-3.503-4.717z" fill="#FFC30F"/></g><path d="M12.787 4.884c-4.963-.876-7.007.292-8.174 4.717v.875c1 3.737 1.46 4.38 6.13 4.38 5.839 0 5.352-3.504 5.547-5.255 0-.39-.881-4.254-3.503-4.717z" fill="#FFC30F"/><path d="M5.446 13.371a5.693 5.693 0 01-.834-2.978c0-3.193 2.614-5.78 5.839-5.78 3.224 0 5.838 2.587 5.838 5.78a5.693 5.693 0 01-.834 2.978" stroke="#000" stroke-width=".876" stroke-linecap="round"/><path d="M12.64 17.02l-.094.472c-.103.516-.154.773-.27.978a1.46 1.46 0 01-.813.665c-.222.074-.486.074-1.012.074-.525 0-.79 0-1.012-.073a1.46 1.46 0 01-.813-.666c-.116-.205-.167-.462-.27-.978l-.094-.473m-1.18-1.388c-.068-.201-.101-.303-.098-.384a.438.438 0 01.28-.387c.075-.03.182-.03.393-.03h5.588c.212 0 .318 0 .394.03a.437.437 0 01.279.387c.003.082-.03.182-.097.384-.124.373-.187.56-.282.711a1.46 1.46 0 01-.876.635c-.174.043-.37.043-.761.043H9c-.392 0-.588 0-.761-.044a1.46 1.46 0 01-.876-.634c-.095-.15-.157-.338-.282-.71z" stroke="#000" stroke-width=".876"/><path d="M10.45 14.83v-3.648" stroke="#000" stroke-width=".876" stroke-linecap="round" stroke-linejoin="round"/><g filter="url(#filter1_f_3513_49356)"><path d="M6.41 9.509C5.936 7.491 8.267 6.02 9.493 6.034c1.226.014 1.273 1.224.809 1.328-1.696.026-2.345 1.08-2.643 2.352-.397.406-1.045.663-1.25-.205z" fill="#fff"/></g><path opacity=".6" d="M10.45 2.652a7.59 7.59 0 017.275 9.76h-.567a7.048 7.048 0 10-13.413 0h-.568a7.59 7.59 0 017.274-9.759z" fill="#FFC30F"/><defs><filter id="filter0_f_3513_49356" x="0" y=".001" width="20.902" height="19.467" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.306" result="effect1_foregroundBlur_3513_49356"/></filter><filter id="filter1_f_3513_49356" x="6.23" y="5.918" width="4.46" height="4.288" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation=".058" result="effect1_foregroundBlur_3513_49356"/></filter></defs></svg>

src/img/ico/ico_life.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1805_37053)" fill-rule="evenodd" clip-rule="evenodd"><path d="M35.719 32.049c1.455.12 2.904.768 4.266 1.97 1.383-1.17 2.844-1.796 4.299-1.895a6 6 0 014.656 1.779c2.256 2.244 2.982 6.372.05 9.198l-.03.03-7.988 7.26a1.5 1.5 0 01-2.02 0l-7.985-7.26-.051-.048c-2.91-2.895-2.151-7.044.126-9.288a5.94 5.94 0 014.677-1.746z" fill="url(#paint0_linear_1805_37053)"/><path d="M35.61 12a2.25 2.25 0 011.92 1.122l6.075 10.5a2.25 2.25 0 01-3.897 2.253l-4.182-7.23L23.83 37.74a2.25 2.25 0 01-3.795.066l-5.409-8.18H11.28a2.25 2.25 0 010-4.5h4.554a2.25 2.25 0 011.878 1.007l4.125 6.24 11.826-19.299A2.249 2.249 0 0135.61 12z" fill="#FF7852"/></g><defs><linearGradient id="paint0_linear_1805_37053" x1="31.458" y1="33.207" x2="43.423" y2="53.728" gradientUnits="userSpaceOnUse"><stop stop-color="#FF7A41"/><stop offset="1" stop-color="#FF001A"/></linearGradient><clipPath id="clip0_1805_37053"><path fill="#fff" transform="translate(9 9)" d="M0 0h42v42H0z"/></clipPath></defs></svg>

src/img/ico/ico_like.svg

@@ -0,0 +1 @@
+<svg width="22" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.95 0C14.036 0 12.199.795 11 2.04 9.801.795 7.964 0 6.05 0 2.662 0 0 2.364 0 5.395c0 3.698 3.74 6.73 9.405 11.31L11 18l1.595-1.295C18.26 12.125 22 9.093 22 5.395 22 2.364 19.338 0 15.95 0z" fill="#ff5c00"/><path d="M15.95.75c3.058 0 5.3 2.108 5.3 4.646 0 1.572-.789 3.079-2.38 4.816-1.598 1.742-3.899 3.607-6.747 5.91v.001l-1.123.91-1.122-.91h-.001l-2.031-1.651c-1.924-1.578-3.518-2.954-4.715-4.26C1.539 8.475.75 6.968.75 5.396.75 2.858 2.992.75 6.05.75c1.717 0 3.357.717 4.41 1.81l.54.562.54-.561C12.593 1.467 14.233.75 15.95.75z" stroke="#fff" stroke-opacity=".2" stroke-width="1.5"/></svg>

src/img/ico/ico_people.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40.55 51.736c5.765 0 9.782-6.681 11.862-10.081a2.21 2.21 0 00-.17-2.584l-7.61-9.243c-1.996-2.421-5.964-2.284-7.758.267L34.55 33.41s-1.54 1.495-2.438 1.495c-.9 0-5.775 3.978-5.775 3.978l-1.924 8.976c2.34-3.337 4.085-2.168 5.262-1.55 3.559 1.866 6.568 5.428 10.874 5.428z" fill="url(#paint0_radial_1805_35487)"/><path d="M40.55 51.736c5.765 0 9.782-6.681 11.862-10.081a2.21 2.21 0 00-.17-2.584l-7.61-9.243c-1.996-2.421-5.964-2.284-7.758.267L34.55 33.41s-1.54 1.495-2.438 1.495c-.9 0-5.775 3.978-5.775 3.978l-1.924 8.976c2.34-3.337 4.085-2.168 5.262-1.55 3.559 1.866 6.568 5.428 10.874 5.428z" fill="url(#paint1_radial_1805_35487)" fill-opacity=".5"/><path d="M19.45 28.094c-5.765 0-9.782 6.682-11.862 10.081a2.21 2.21 0 00.17 2.584l7.61 9.243c1.996 2.421 5.964 2.285 7.762-.267l12.46-17.764c-2.343 3.338-4.088 2.168-5.265 1.55-3.558-1.865-6.568-5.427-10.874-5.427z" fill="url(#paint2_linear_1805_35487)"/><path d="M19.45 28.094c-5.765 0-9.782 6.682-11.862 10.081a2.21 2.21 0 00.17 2.584l7.61 9.243c1.996 2.421 5.964 2.285 7.762-.267l12.46-17.764c-2.343 3.338-4.088 2.168-5.265 1.55-3.558-1.865-6.568-5.427-10.874-5.427z" fill="url(#paint3_radial_1805_35487)"/><path d="M20.25 22.5a6.5 6.5 0 100-13 6.5 6.5 0 000 13z" fill="url(#paint4_linear_1805_35487)"/><path d="M20.25 22.5a6.5 6.5 0 100-13 6.5 6.5 0 000 13z" fill="url(#paint5_radial_1805_35487)"/><path d="M39.75 22.5a6.5 6.5 0 100-13 6.5 6.5 0 000 13z" fill="url(#paint6_linear_1805_35487)"/><path d="M39.75 22.5a6.5 6.5 0 100-13 6.5 6.5 0 000 13z" fill="url(#paint7_radial_1805_35487)"/><defs><radialGradient id="paint0_radial_1805_35487" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(21.985 -79.618 80.756) scale(32.5634 22.7459)"><stop offset=".136" stop-color="#003580"/><stop offset=".366" stop-color="#0057AA"/><stop offset="1" stop-color="#0FAFFF"/></radialGradient><radialGradient id="paint1_radial_1805_35487" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(37.46 -40.128 50.638) scale(16.6605 15.9855)"><stop stop-color="#76EB95"/><stop offset=".407" stop-color="#76EB95" stop-opacity=".338"/><stop offset="1" stop-color="#76EB95" stop-opacity="0"/></radialGradient><radialGradient id="paint3_radial_1805_35487" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(111.85 7.518 26.21) scale(27.9192 29.0844)"><stop stop-color="#2BDABE"/><stop offset=".443" stop-color="#13ACCF"/><stop offset="1" stop-color="#0078D4"/></radialGradient><radialGradient id="paint5_radial_1805_35487" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(113.199 7.426 11.71) scale(13.2007)"><stop stop-color="#2BDABE"/><stop offset=".518" stop-color="#16BBDA"/><stop offset=".75" stop-color="#119FC5"/><stop offset="1" stop-color="#0078D4"/></radialGradient><radialGradient id="paint7_radial_1805_35487" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(113.199 17.176 18.143) scale(13.2007)"><stop stop-color="#2BDABE"/><stop offset=".518" stop-color="#16BBDA"/><stop offset=".75" stop-color="#119FC5"/><stop offset="1" stop-color="#0078D4"/></radialGradient><linearGradient id="paint2_linear_1805_35487" x1="32.756" y1="28.094" x2="21.697" y2="55.81" gradientUnits="userSpaceOnUse"><stop stop-color="#3BD5FF"/><stop offset="1" stop-color="#0095FF"/></linearGradient><linearGradient id="paint4_linear_1805_35487" x1="17" y1="9.5" x2="23.276" y2="21.902" gradientUnits="userSpaceOnUse"><stop stop-color="#3BD5FF"/><stop offset="1" stop-color="#006EE3"/></linearGradient><linearGradient id="paint6_linear_1805_35487" x1="36.5" y1="9.5" x2="42.776" y2="21.902" gradientUnits="userSpaceOnUse"><stop stop-color="#3BD5FF"/><stop offset="1" stop-color="#006EE3"/></linearGradient></defs></svg>

src/img/ico/ico_pick.svg

@@ -0,0 +1 @@
+<svg width="27" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d_2000_107191)" shape-rendering="crispEdges"><path d="M12.492 2.532a1 1 0 011.77 0l2.553 4.84a1 1 0 00.714.519l5.393.933a1 1 0 01.547 1.682l-3.815 3.925a1 1 0 00-.273.84l.78 5.417a1 1 0 01-1.431 1.04l-4.912-2.416a1 1 0 00-.882 0l-4.912 2.415a1 1 0 01-1.43-1.04l.778-5.417a1 1 0 00-.272-.839l-3.815-3.925a1 1 0 01.547-1.682l5.393-.933a1 1 0 00.714-.519l2.553-4.84z" fill="url(#paint0_linear_2000_107191)"/><path d="M12.05 2.299c.563-1.067 2.091-1.067 2.654 0l2.554 4.84a.5.5 0 00.356.26l5.393.932c1.188.206 1.66 1.659.82 2.524l-3.814 3.924a.5.5 0 00-.137.42l.78 5.417c.171 1.194-1.065 2.092-2.147 1.56l-4.911-2.415a.501.501 0 00-.442 0l-4.91 2.415c-1.083.532-2.32-.366-2.147-1.56l.779-5.417a.5.5 0 00-.137-.42l-3.814-3.925c-.84-.864-.368-2.317.82-2.523l5.393-.933a.5.5 0 00.356-.26l2.554-4.84z" stroke="url(#paint1_linear_2000_107191)" stroke-opacity=".7"/></g><defs><linearGradient id="paint0_linear_2000_107191" x1="13.377" y1=".855" x2="13.377" y2="24.855" gradientUnits="userSpaceOnUse"><stop stop-color="#58DDB5"/><stop offset="1" stop-color="#31B88F"/></linearGradient><linearGradient id="paint1_linear_2000_107191" x1="13.377" y1=".855" x2="13.377" y2="24.855" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><filter id="filter0_d_2000_107191" x="0" y="0" width="26.754" height="25.832" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.684295 0 0 0 0 0.524626 0 0 0 0.2 0"/><feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_2000_107191"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_2000_107191" result="shape"/></filter></defs></svg>

src/img/ico/ico_pin.svg

@@ -0,0 +1 @@
+<svg width="24" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.998 10.38a.74.74 0 01-.744.731h-4.962a.74.74 0 01-.745-.73.74.74 0 01.745-.733h4.962c.41 0 .744.328.744.732zm0 4.39a.74.74 0 01-.744.73h-3.97a.74.74 0 01-.744-.73c0-.405.333-.733.744-.733h3.97c.41 0 .744.328.744.732z" fill="#000"/><path d="M12.587 10.238l.364.357c1.518 1.492 2.278 2.239 2.277 3.047 0 .265-.055.526-.16.769-.326.743-1.324 1.133-3.319 1.914l-.145.056c-.565.221-.848.332-1.076.51a2 2 0 00-.44.48c-.157.24-.24.529-.407 1.104-.258.893-.386 1.34-.66 1.537a1 1 0 01-.71.181c-.339-.04-.673-.369-1.34-1.025l-1.027-1.01-2.673 2.628a.754.754 0 01-1.214-.237.723.723 0 01.161-.798l2.663-2.637-1.017-1c-.667-.655-1-.983-1.043-1.316a.96.96 0 01.184-.697c.202-.27.656-.397 1.564-.65.586-.163.88-.245 1.124-.399a1.96 1.96 0 00.488-.433c.181-.224.294-.502.52-1.058l.056-.142c.794-1.96 1.191-2.941 1.948-3.26.247-.105.513-.159.781-.159.824 0 1.583.745 3.101 2.238z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.998 19.154a.74.74 0 01-.744.73h-8.932a.74.74 0 01-.744-.73c0-.404.333-.732.744-.732h8.932c.41 0 .744.328.744.732z" fill="#000"/></svg>

src/img/ico/ico_remove.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6.528" cy="6.528" r="6.12" fill="#FFFEFE" stroke="#6C6C6C" stroke-width=".816"/><path stroke="#6C6C6C" stroke-width="1.632" d="M3.264 6.528h6.528"/></svg>

src/img/ico/ico_search.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.168 6.182a4.986 4.986 0 10-9.971 0 4.986 4.986 0 009.971 0zm1.197 0c0 1.492-.529 2.86-1.409 3.928l4.424 4.424a.598.598 0 11-.846.846l-4.424-4.424a6.182 6.182 0 112.254-4.774z" fill="#184133"/></svg>

src/img/ico/ico_setting.svg

@@ -0,0 +1 @@
+<svg width="13" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.79.352c.056.11.07.251.098.533.054.533.08.8.192.947a.65.65 0 00.604.25c.182-.025.39-.194.805-.534.219-.18.329-.27.446-.307a.65.65 0 01.457.023c.113.049.214.15.414.35l.58.58c.2.2.301.3.35.414a.65.65 0 01.023.457c-.038.117-.127.227-.307.446-.34.416-.51.623-.534.806a.65.65 0 00.25.603c.147.112.414.138.947.192.282.028.423.042.533.098a.65.65 0 01.306.34c.046.114.046.256.046.54v.82c0 .284 0 .426-.046.54a.65.65 0 01-.306.34c-.11.056-.251.07-.533.098-.533.054-.8.08-.947.192a.65.65 0 00-.25.604c.025.182.195.39.534.805.18.219.27.328.307.446a.65.65 0 01-.023.457c-.049.113-.15.213-.35.414l-.58.58c-.2.2-.3.301-.414.35a.65.65 0 01-.457.022c-.117-.037-.227-.127-.446-.306-.416-.34-.623-.51-.805-.533a.65.65 0 00-.604.25c-.112.146-.138.412-.192.946-.028.282-.042.423-.098.533a.65.65 0 01-.34.306C7.337 13 7.195 13 6.91 13h-.82c-.284 0-.426 0-.54-.046a.65.65 0 01-.34-.306c-.056-.11-.07-.251-.098-.533-.054-.533-.08-.8-.192-.947a.65.65 0 00-.603-.25c-.183.025-.39.194-.806.534-.219.18-.329.27-.446.307a.65.65 0 01-.457-.023c-.113-.049-.214-.15-.414-.35l-.58-.58c-.2-.2-.301-.3-.35-.414a.65.65 0 01-.023-.457c.038-.117.127-.227.307-.446.34-.416.51-.623.533-.806a.65.65 0 00-.25-.603c-.146-.112-.413-.138-.946-.192C.603 7.86.462 7.846.352 7.79a.65.65 0 01-.306-.34C0 7.337 0 7.195 0 6.91v-.82c0-.284 0-.426.045-.54a.65.65 0 01.307-.34c.11-.056.251-.07.533-.098.533-.054.8-.08.947-.192a.65.65 0 00.25-.603c-.025-.183-.195-.39-.534-.806-.18-.22-.27-.329-.307-.447a.65.65 0 01.023-.456c.049-.113.15-.214.35-.414l.58-.58c.2-.2.3-.302.414-.35a.65.65 0 01.457-.023c.117.038.227.127.446.307.416.339.623.509.805.533a.65.65 0 00.604-.25c.111-.146.138-.413.192-.946.028-.282.042-.423.098-.533a.65.65 0 01.34-.306C5.663 0 5.805 0 6.09 0h.82c.284 0 .426 0 .54.045a.65.65 0 01.34.307zM6.5 9.1a2.6 2.6 0 100-5.2 2.6 2.6 0 000 5.2z" fill="#E79946"/></svg>

src/img/ico/ico_trash.svg

@@ -0,0 +1 @@
+<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.28 8.069v4.405M7.341 8.069v4.405M4.406 5.132v8.81a1.469 1.469 0 001.468 1.468h5.873a1.469 1.469 0 001.469-1.468v-8.81m-10.278 0h11.746m-9.544 0l1.468-2.937h4.405l1.469 2.937" stroke="#000" stroke-width=".979" stroke-linecap="round" stroke-linejoin="round" opacity=".4"/></svg>

src/img/ico/ico_trend.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.727 36.063H8l11.727 13.68h11.726l-11.726-13.68z" fill="#FF7E7E"/><path d="M19.727 36.063H8l11.727 13.68h11.726l-11.726-13.68z" fill="url(#paint0_linear_1805_11639)" fill-opacity=".4" style="mix-blend-mode:overlay"/><path d="M39.273 19.772L19.728 49.74h11.727l16.287-24.756L51 27.59V10l-16.288 7.818 4.56 1.954z" fill="#FF2B00"/><path d="M39.273 19.772L19.728 49.74h11.727l16.287-24.756L51 27.59V10l-16.288 7.818 4.56 1.954z" fill="url(#paint1_linear_1805_11639)" fill-opacity=".1" style="mix-blend-mode:plus-darker"/><path d="M39.273 19.772L19.728 49.74h11.727l16.287-24.756L51 27.59V10l-16.288 7.818 4.56 1.954z" fill="url(#paint2_linear_1805_11639)" fill-opacity=".3"/><defs><linearGradient id="paint0_linear_1805_11639" x1="16.5" y1="38.004" x2="14.217" y2="48.274" gradientUnits="userSpaceOnUse"><stop stop-opacity="0"/><stop offset="1"/></linearGradient><linearGradient id="paint1_linear_1805_11639" x1="40.998" y1="19.5" x2="28.317" y2="49.275" gradientUnits="userSpaceOnUse"><stop stop-opacity="0"/><stop offset=".859"/></linearGradient><linearGradient id="paint2_linear_1805_11639" x1="43.498" y1="25.5" x2="51.084" y2="10.537" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient></defs></svg>

src/img/ico/ico_user.svg

@@ -0,0 +1 @@
+<svg width="20" height="21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.496 6.45c0-.94.245-1.864.712-2.682a5.473 5.473 0 011.95-1.987 5.537 5.537 0 015.41-.148 5.481 5.481 0 012.059 1.876 5.417 5.417 0 01.3 5.354 5.466 5.466 0 01-1.835 2.092 8.997 8.997 0 014.203 3.158 8.871 8.871 0 011.697 4.948.74.74 0 01-.215.513.754.754 0 01-1.285-.468 7.401 7.401 0 00-2.275-5.108A7.536 7.536 0 009.996 11.9c-1.95 0-3.823.752-5.222 2.097a7.401 7.401 0 00-2.275 5.108.74.74 0 01-.24.508.754.754 0 01-1.049-.03.74.74 0 01-.21-.522 8.87 8.87 0 011.697-4.949A8.997 8.997 0 016.9 10.955a5.468 5.468 0 01-1.766-1.957 5.41 5.41 0 01-.638-2.549zm5.5-3.965a4.02 4.02 0 00-2.828 1.161A3.946 3.946 0 005.996 6.45c0 1.051.421 2.06 1.172 2.803a4.019 4.019 0 002.828 1.161 4.02 4.02 0 002.828-1.161 3.946 3.946 0 001.172-2.803c0-1.051-.421-2.06-1.172-2.803a4.018 4.018 0 00-2.828-1.16z" fill="#fff"/><path d="M9.83.502a6.041 6.041 0 012.97.687 5.985 5.985 0 012.247 2.05 5.916 5.916 0 01.328 5.847 5.95 5.95 0 01-1.312 1.733 9.486 9.486 0 013.636 3 9.372 9.372 0 011.793 5.227v.021c-.004.323-.134.63-.36.859a1.254 1.254 0 01-2.139-.784v-.02a6.902 6.902 0 00-2.122-4.764A7.038 7.038 0 009.995 12.4a7.04 7.04 0 00-4.875 1.958A6.901 6.901 0 003 19.121l-.001.01a1.241 1.241 0 01-.402.852 1.254 1.254 0 01-1.744-.05 1.24 1.24 0 01-.352-.874v-.012a9.371 9.371 0 011.793-5.228 9.486 9.486 0 013.635-2.999 5.912 5.912 0 01-1.154-7.3 5.974 5.974 0 012.128-2.168A6.039 6.039 0 019.83.502zm.166 2.483c-.93 0-1.82.366-2.476 1.016a3.447 3.447 0 00-1.024 2.448c0 .917.368 1.798 1.024 2.447a3.52 3.52 0 002.476 1.017c.93 0 1.82-.366 2.477-1.017a3.446 3.446 0 001.023-2.447c0-.917-.367-1.798-1.023-2.448a3.52 3.52 0 00-2.477-1.016z" stroke="#000" stroke-opacity=".3"/></svg>

src/img/ico/ico_watch.svg

@@ -0,0 +1 @@
+<svg width="16" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.6 0C1.176 0 .769.146.469.405c-.3.26-.469.611-.469.978v9.679c0 .366.169.718.469.978.3.259.707.404 1.131.404h12.8c.424 0 .831-.145 1.131-.405.3-.259.469-.61.469-.977v-9.68c0-.366-.169-.718-.469-.977C15.231.145 14.824 0 14.4 0H1.6zm3.7 3.892a.784.784 0 01.156-.37.944.944 0 01.33-.27 1.126 1.126 0 01.885-.045c.404.149 1.255.485 2.334 1.023.758.374 1.49.786 2.192 1.234.123.08.224.183.293.302a.76.76 0 01.105.383.76.76 0 01-.105.383.897.897 0 01-.293.301c-.702.448-1.434.86-2.192 1.234-.754.38-1.533.722-2.333 1.024a1.126 1.126 0 01-.886-.044.943.943 0 01-.33-.271.784.784 0 01-.156-.37 17.356 17.356 0 01-.14-2.257c0-1.072.089-1.88.14-2.257z" fill="#3C3C3C"/></svg>

src/img/ico/icon-snail.svg

@@ -0,0 +1 @@
+<svg width="67" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode:hard-light"><path d="M11.404 34.252a7.449 7.449 0 015.053-2.735c1.062 1.082 1.426 2.996.815 6.072-2.307-.201-4.509-1.454-5.867-3.337z" fill="#AA6144"/><path d="M15.926 31.456c.04-.351.383-.577.703-.725a6.358 6.358 0 013.254-.552c2.3 1.159 3.272 3.84 2.637 8.366-1.817 1.11-4.325.959-6.013-.36-.318-.25-.622-.557-.717-.95-.123-.5.119-1.005.288-1.49a5.6 5.6 0 00-.03-3.724c-.066-.183-.143-.372-.122-.565z" fill="#AA6144"/><path d="M16.406 31.89a6.17 6.17 0 01.327 2.626c-.04.432-.134.853-.268 1.265-.153.47-.39.916-.297 1.423.087.467-.648.53-.733.067-.16-.86.388-1.678.524-2.51a5.303 5.303 0 00-.242-2.613c-.157-.448.53-.707.688-.259h.001zm33.316-9.96a13.098 13.098 0 011.037-5.384c.185-.436.854-.123.668.313a12.199 12.199 0 00-.972 5.004c.01.47-.724.541-.733.066z" fill="#000"/><path d="M50.643 32.41c-1.429 1.953-1.23 4.612-2.011 6.894-.834 2.436-2.876 4.436-5.355 5.245-2.277.742-4.75.505-7.146.67-2.116.145-4.199.61-6.315.744-2.582.165-5.168-.162-7.735-.489-2.133-.27-4.265-.542-6.398-.814-.314-.04-.704-.149-.747-.458-.044-.308.301-.515.592-.636l11.066-4.59 10.747-6.865c1.623-.123 2.894-1.454 3.64-2.875.747-1.423 1.144-3.012 1.974-4.388 1.06-1.756 2.864-3.1 4.91-3.45 2.046-.35 4.295.372 5.61 1.96 1.316 1.589 1.55 4.013.417 5.724-.855 1.293-2.332 2.077-3.248 3.328z" fill="#EECEB5"/><path d="M19.38 29.9c.137-1.02 3.174-3.409 6.717-2.712 2.573 2.72 3.312 8.317.627 13.885-2.408 1.41-6.346-.588-6.252-1.969.037-.557 1.744-3.98-.652-7.97-.23-.382-.5-.793-.44-1.234z" fill="#AA6144"/><path d="M19.892 32.022c-.26-.535-.65-1.021-.821-1.594-.136-.453.552-.714.688-.259.17.568.563 1.062.822 1.594.243.5.44 1.023.585 1.559.243.899.339 1.818.295 2.746a9.834 9.834 0 01-.33 2.06c-.09.343-.254.7-.287 1.056-.044.47-.77.339-.727-.132.032-.334.185-.672.272-.994.172-.633.291-1.28.335-1.934a7.863 7.863 0 00-.278-2.66 8.831 8.831 0 00-.553-1.443z" fill="#000"/><path d="M41.483 32.298c.989 10.195-12.61 12.404-15.131 8.448-.646-1.014-.041-2.332.317-3.472 1.049-3.346.479-7.17-1.503-10.085 4.886-5.803 15.647-1.804 16.318 5.11h-.001z" fill="#AA6144"/><path d="M25.48 26.969a12.327 12.327 0 012.087 6.654 11.866 11.866 0 01-.45 3.486c-.296 1.016-1.064 2.399-.454 3.432.24.407-.356.837-.597.428-.62-1.05-.27-2.192.09-3.263.383-1.145.641-2.312.675-3.526a11.616 11.616 0 00-1.948-6.783c-.266-.395.332-.823.597-.428zm20.89-3.884a14.407 14.407 0 01-.808-6.081c.038-.471.765-.339.727.131-.157 1.929.11 3.868.77 5.691.162.448-.527.707-.688.26zm1.124 3.519c-.477-.697-.122-1.67.547-1.955 1.059-.453 2.09.378 1.935 1.466-.156 1.092-1.794 1.495-2.482.49z" fill="#000"/><path d="M48.691 25.69a.392.392 0 01.157-.564c.306-.13.603.11.558.423-.045.314-.517.43-.715.141z" fill="#fff"/><path d="M51.8 25.797c-.43-.628-.11-1.503.493-1.761.954-.408 1.883.34 1.743 1.32-.14.983-1.616 1.347-2.236.441z" fill="#000"/><path d="M52.871 24.97a.353.353 0 01.142-.507.356.356 0 01.503.38c-.04.284-.466.389-.644.128z" fill="#fff"/><path d="M52.801 28.204c.317.347-.156.908-.476.557-.36-.395-.929-.382-1.174.122-.207.425-.871.103-.663-.322.432-.89 1.624-1.113 2.313-.358zm-18.542 12.53a18.831 18.831 0 00-5.639-1.169c-.47-.025-.342-.748.127-.723 1.993.104 3.949.524 5.82 1.227.444.167.135.832-.308.665zm-5.675-4.706c-.467-.076-.342-.8.127-.723 3.287.533 6.66.392 9.879-.431.453-.116.72.57.262.688a25.179 25.179 0 01-10.268.466zm1.471-3.813c-.466-.016-.543-.748-.07-.732a18.2 18.2 0 007.82-1.472c.435-.186.696.502.264.688a18.709 18.709 0 01-8.014 1.515zm-1.868-3.099c-.471.015-.545-.717-.071-.732a12.984 12.984 0 005.608-1.474c.418-.218.676.473.262.688a13.488 13.488 0 01-5.8 1.518zm-6.297 1.787c-.469-.01-.545-.743-.072-.732.854.02 1.692-.155 2.445-.559.412-.22.846.377.431.599-.87.466-1.811.715-2.805.692zm2.366 8.409l-1.744-.08c-.471-.021-.342-.744.126-.723l1.745.08c.47.022.341.745-.127.723zm-1.846-4.441c-.471-.05-.344-.773.126-.723a4.254 4.254 0 002.366-.443c.423-.21.681.48.263.688a4.96 4.96 0 01-2.756.478zm-4.985-1.829c-.468-.07-.342-.794.127-.724.362.054.712.022 1.058-.095.447-.152.71.536.263.688-.47.16-.954.203-1.448.13zm1.491 4.051l-1.447-.265c-.466-.085-.341-.809.126-.723l1.448.265c.465.085.341.809-.127.723z" fill="#000"/></g><path d="M43.842 19.928c-1.343 1.046-3.723 3.725-1.667 4.148 2.017.415 1.898-2.43 1.667-4.148zm1.296 3.789c-1.342 1.047-3.722 3.725-1.666 4.148 2.016.416 1.898-2.43 1.666-4.148z" fill="#B2E9F1"/></svg>

src/img/learning/bg _chapter_completed.svg

@@ -0,0 +1 @@
+<svg width="203" height="152" fill="none" xmlns="http://www.w3.org/2000/svg"><foreignObject x="-29.2" y="-29.2" width="260.932" height="210.127"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(14.6px);height:100%;width:100%" clip-path="url(#bgblur_0_2000_108660_clip_path)"/></foreignObject><g data-figma-bg-blur-radius="29.2"><mask id="a" maskUnits="userSpaceOnUse" x="-.734" y="-.734" width="204" height="153" fill="#000"><path fill="#fff" d="M-.734-.734h204v153h-204z"/><path d="M191.139 1.266c5.592 0 10.127 4.534 10.127 10.127v114.746c0 5.592-4.535 10.127-10.127 10.127H108.56l-7.794 13-7.794-13h-81.58c-5.592 0-10.126-4.535-10.126-10.127V11.393C1.266 5.8 5.8 1.266 11.393 1.266h179.746z"/></mask><path d="M191.139 1.266c5.592 0 10.127 4.534 10.127 10.127v114.746c0 5.592-4.535 10.127-10.127 10.127H108.56l-7.794 13-7.794-13h-81.58c-5.592 0-10.126-4.535-10.126-10.127V11.393C1.266 5.8 5.8 1.266 11.393 1.266h179.746z" fill="#fff" fill-opacity=".9"/><path d="M191.139 1.266c5.592 0 10.127 4.534 10.127 10.127v114.746c0 5.592-4.535 10.127-10.127 10.127H108.56l-7.794 13-7.794-13h-81.58c-5.592 0-10.126-4.535-10.126-10.127V11.393C1.266 5.8 5.8 1.266 11.393 1.266h179.746z" fill="url(#paint0_linear_2000_108660)"/><path d="M108.56 136.266V135h-.717l-.369.615 1.086.651zm-7.794 13l-1.086.651 1.086 1.81 1.085-1.81-1.085-.651zm-7.794-13l1.085-.651-.368-.615h-.717v1.266zm98.167-135V2.53A8.862 8.862 0 01200 11.393h2.531C202.531 5.1 197.43 0 191.139 0v1.266zm10.127 10.127H200v114.746h2.531V11.393h-1.265zm0 114.746H200a8.862 8.862 0 01-8.861 8.861v2.531c6.291 0 11.392-5.101 11.392-11.392h-1.265zm-10.127 10.127V135H108.56v2.531h82.579v-1.265zm-82.579 0l-1.086-.651-7.794 13 1.086.651 1.085.651 7.794-13-1.085-.651zm-7.794 13l1.085-.651-7.794-13-1.085.651-1.086.651 7.794 13 1.086-.651zm-7.794-13V135h-81.58v2.531h81.58v-1.265zm-81.58 0V135a8.862 8.862 0 01-8.86-8.861H0c0 6.291 5.1 11.392 11.393 11.392v-1.265zM1.267 126.139H2.53V11.393H0v114.746h1.266zm0-114.746H2.53a8.861 8.861 0 018.862-8.862V0C5.1 0 0 5.1 0 11.393h1.266zM11.393 1.266V2.53h179.746V0H11.393v1.266z" fill="#fff" fill-opacity=".1" mask="url(#a)"/></g><defs><linearGradient id="paint0_linear_2000_108660" x1="224.67" y1="39.884" x2="-20.902" y2="39.526" gradientUnits="userSpaceOnUse"><stop offset=".312" stop-color="#fff"/><stop offset="1" stop-color="#EAD7CC"/></linearGradient><clipPath id="bgblur_0_2000_108660_clip_path" transform="translate(29.2 29.2)"><path d="M191.139 1.266c5.592 0 10.127 4.534 10.127 10.127v114.746c0 5.592-4.535 10.127-10.127 10.127H108.56l-7.794 13-7.794-13h-81.58c-5.592 0-10.126-4.535-10.126-10.127V11.393C1.266 5.8 5.8 1.266 11.393 1.266h179.746z"/></clipPath></defs></svg>

src/img/learning/bg_chapter_base.svg

@@ -0,0 +1 @@
+<svg width="142" height="107" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="-.113" y="-.113" width="142" height="107" fill="#000"><path fill="#fff" d="M-.113-.113h142v107h-142z"/><path d="M133.798.887a7.09 7.09 0 017.089 7.089v80.822a7.09 7.09 0 01-7.089 7.089H75.872l-5.485 9-5.486-9H7.976a7.089 7.089 0 01-7.09-7.09V7.977a7.09 7.09 0 017.09-7.09h125.822z"/></mask><path d="M133.798.887a7.09 7.09 0 017.089 7.089v80.822a7.09 7.09 0 01-7.089 7.089H75.872l-5.485 9-5.486-9H7.976a7.089 7.089 0 01-7.09-7.09V7.977a7.09 7.09 0 017.09-7.09h125.822z" fill="#fff"/><path d="M133.798.887a7.09 7.09 0 017.089 7.089v80.822a7.09 7.09 0 01-7.089 7.089H75.872l-5.485 9-5.486-9H7.976a7.089 7.089 0 01-7.09-7.09V7.977a7.09 7.09 0 017.09-7.09h125.822z" fill="url(#paint0_linear_2000_108855)" fill-opacity=".2"/><path d="M75.872 95.887V95h-.498l-.259.425.757.46zm-5.485 9l-.757.461.757 1.241.756-1.241-.756-.461zm-5.486-9l.757-.461-.259-.425h-.498v.886zm68.897-95v.886a6.204 6.204 0 016.203 6.203h1.772A7.975 7.975 0 00133.798 0v.886zm7.089 7.089h-.886v80.822h1.772V7.976h-.886zm0 80.822h-.886A6.203 6.203 0 01133.798 95v1.772a7.975 7.975 0 007.975-7.975h-.886zm-7.089 7.089V95H75.872v1.772h57.926v-.886zm-57.926 0l-.757-.461-5.485 9 .757.461.756.461 5.486-9-.757-.461zm-5.485 9l.756-.461-5.485-9-.757.46-.756.462 5.485 9 .757-.461zm-5.486-9V95H7.976v1.772H64.9v-.886zm-56.925 0V95a6.203 6.203 0 01-6.203-6.203H0a7.975 7.975 0 007.975 7.975v-.886zm-7.09-7.09h.887V7.977H0v80.822h.886zm0-80.821h.887a6.203 6.203 0 016.203-6.203V0A7.975 7.975 0 000 7.976h.886zm7.09-7.09v.887h125.822V0H7.976v.886z" fill="#fff" fill-opacity=".2" mask="url(#a)"/><defs><linearGradient id="paint0_linear_2000_108855" x1="70.887" y1="53.288" x2="70.887" y2="112.334" gradientUnits="userSpaceOnUse"><stop stop-color="#4A4A4A" stop-opacity="0"/><stop offset="1" stop-color="#4A4A4A"/></linearGradient></defs></svg>

src/img/learning/bg_chapter_current.svg

@@ -0,0 +1 @@
+<svg width="338" height="242" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="0" y="0" width="338" height="242" fill="#000"><path fill="#fff" d="M0 0h338v242H0z"/><path d="M318.196 5C326.372 5 333 11.628 333 19.804v184.392c0 8.176-6.628 14.804-14.804 14.804H179.777L169 233l-10.777-14H19.803C11.629 219 5 212.372 5 204.196V19.804C5 11.628 11.628 5 19.804 5h298.392z"/></mask><path d="M318.196 5C326.372 5 333 11.628 333 19.804v184.392c0 8.176-6.628 14.804-14.804 14.804H179.777L169 233l-10.777-14H19.803C11.629 219 5 212.372 5 204.196V19.804C5 11.628 11.628 5 19.804 5h298.392z" fill="#fff"/><path d="M318.196 5C326.372 5 333 11.628 333 19.804v184.392c0 8.176-6.628 14.804-14.804 14.804H179.777L169 233l-10.777-14H19.803C11.629 219 5 212.372 5 204.196V19.804C5 11.628 11.628 5 19.804 5h298.392z" fill="url(#paint0_linear_2000_108816)" fill-opacity=".2"/><path d="M179.777 219v-5h-2.461l-1.501 1.95 3.962 3.05zM169 233l-3.962 3.05 3.962 5.147 3.962-5.147L169 233zm-10.777-14l3.962-3.05-1.501-1.95h-2.461v5zM318.196 5v5c5.414 0 9.804 4.39 9.804 9.804h10C338 8.867 329.133 0 318.196 0v5zM333 19.804h-5v184.392h10V19.804h-5zm0 184.392h-5c0 5.414-4.39 9.804-9.804 9.804v10c10.937 0 19.804-8.867 19.804-19.804h-5zM318.196 219v-5H179.777v10h138.419v-5zm-138.419 0l-3.962-3.05-10.777 14L169 233l3.962 3.05 10.777-14-3.962-3.05zM169 233l3.962-3.05-10.777-14-3.962 3.05-3.962 3.05 10.777 14L169 233zm-10.777-14v-5H19.803v10h138.42v-5zm-138.42 0v-5C14.39 214 10 209.61 10 204.196H0C0 215.133 8.867 224 19.804 224v-5zM5 204.196h5V19.804H0v184.392h5zM5 19.804h5C10 14.39 14.39 10 19.804 10V0C8.867 0 0 8.867 0 19.804h5zM19.804 5v5h298.392V0H19.804v5z" fill="url(#paint1_linear_2000_108816)" mask="url(#a)"/><defs><linearGradient id="paint0_linear_2000_108816" x1="169" y1="126.673" x2="169" y2="248.346" gradientUnits="userSpaceOnUse"><stop stop-color="#1F9B76" stop-opacity="0"/><stop offset="1" stop-color="#1F9B76"/></linearGradient><linearGradient id="paint1_linear_2000_108816" x1="169" y1="5" x2="169" y2="233" gradientUnits="userSpaceOnUse"><stop stop-color="#188F6B"/><stop offset="1" stop-color="#57D2AD" stop-opacity=".7"/></linearGradient></defs></svg>